diff --git a/public/index.html b/public/index.html index 05154cd..374cba6 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,7 @@ - - + -
+
+
{this.props.renderer}
-
{this.state.value} diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index d9120ed..93fdf48 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -108,6 +108,10 @@ } } +.Qr-item-image-selected { + border-color: #44D7B6 !important; +} + .Qr-item:hover .Qr-item-image { border-color: #44D7B6; } @@ -314,4 +318,4 @@ a { a:hover { text-decoration: underline; -} \ No newline at end of file +} diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index d09f82c..9177fc1 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -1,31 +1,23 @@ import React from "react"; -import QrItem from './QrItem' import {getQrcodeData} from "../utils/qrcodeHandler"; import './Qrcode.css'; -import { InputNumber } from 'antd'; -import QrRendererBase from './QrRendererBase' -import QrRendererRound from './QrRendererRound' +import QrRendererBase from "./QrRendererBase"; +import QrRendererRound from "./QrRendererRound"; +import QrItem from "./QrItem"; -function onChange(value) { - console.log('changed', value); -} - -function QrBoxList(props) { - return ( - - } /> - } /> - - - - - - - - - - ); +function getStyleList(qrcode) { + const styleList = [ + {value: "A1", renderer: }, + {value: "A2", renderer: }, + {value: "B1"}, + {value: "B2"}, + {value: "C1"}, + {value: "C2"}, + {value: "D1"}, + {value: "D2"}, + ]; + return styleList; } class Qrcode extends React.Component { @@ -34,20 +26,33 @@ class Qrcode extends React.Component { super(props); this.handleChange = this.handleChange.bind(this) this.handleCreate = this.handleCreate.bind(this) + this.handleSelected = this.handleSelected.bind(this) this.state = { text: '', + selected: 'A1', options: {text: ''}, qrcode: null }; } + handleSelected(value) { + this.setState({selected: value}); + } + handleChange(e) { this.setState({text: e.target.value}) } handleCreate(e) { - const text = this.state.text - this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})}); + let text = this.state.text + + if (text.length > 0) + this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})}); + else { + text = 'http://qrbtf.com/'; + this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text})}); + } + e.target.blur(); } render() { @@ -59,6 +64,7 @@ class Qrcode extends React.Component { {if(e.key == 'Enter') this.handleCreate(e)}} @@ -71,7 +77,17 @@ class Qrcode extends React.Component {
- + { + getStyleList().map((style) => { + return + }) + }