[Style selection]

public/index.html

@@ -5,8 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
     <meta content="yes" name="apple-mobile-web-app-capable">
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">    <meta name="theme-color" content="#000000" />
-    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/components/QrItem.js

@@ -8,25 +8,34 @@ function calViewBox(props) {
     return '0 0 ' + String(nCount) + ' ' + String(nCount);
 }
 
+function calClassName(props) {
+    if (props.selected == true) return 'Qr-item-image Qr-item-image-selected';
+    return 'Qr-item-image';
+}
+
 class QrItem extends React.Component {
 
     constructor(props) {
         super(props);
+        this.handleClick = this.handleClick.bind(this);
         this.state = {
             value: props.value
         }
     }
 
+    handleClick(e) {
+        this.props.onSelected(this.state.value);
+    }
+
     render() {
         return (
-            <div className="Qr-item">
+            <div className="Qr-item" onClick={this.handleClick}>
-                <div className="Qr-item-image">
+                <div className={calClassName(this.props)}>
                     <div className="Qr-item-image-inner">
                         <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
                             {this.props.renderer}
                         </svg>
                     </div>
-
                 </div>
                 <div className="Qr-item-detail">
                     {this.state.value}

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;
-}
+}

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 QrRendererBase from "./QrRendererBase";
-import QrRendererRound from './QrRendererRound'
+import QrRendererRound from "./QrRendererRound";
+import QrItem from "./QrItem";
 
-function onChange(value) {
+function getStyleList(qrcode) {
-    console.log('changed', value);
+    const styleList = [
-}
+        {value: "A1", renderer: <QrRendererBase qrcode={qrcode}/> },
-
+        {value: "A2", renderer: <QrRendererRound qrcode={qrcode}/>},
-function QrBoxList(props) {
+        {value: "B1"},
-    return (
+        {value: "B2"},
-        <React.Fragment>
+        {value: "C1"},
-            <QrItem value={"A1"} qrcode={props.qrcode} renderer={<QrRendererBase qrcode={props.qrcode}/>} />
+        {value: "C2"},
-            <QrItem value={"A2"} qrcode={props.qrcode} renderer={<QrRendererRound qrcode={props.qrcode}/>} />
+        {value: "D1"},
-            <QrItem value={"B1"} qrcode={props.qrcode} />
+        {value: "D2"},
-            <QrItem value={"C1"} qrcode={props.qrcode} />
+    ];
-            <QrItem value={"C2"} qrcode={props.qrcode} />
+    return styleList;
-            <QrItem value={"D1"} qrcode={props.qrcode} />
-            <QrItem value={"D2"} qrcode={props.qrcode} />
-            <QrItem value={"D3"} qrcode={props.qrcode} />
-            <QrItem value={"E1"} qrcode={props.qrcode} />
-            <QrItem value={"E2"} qrcode={props.qrcode} />
-        </React.Fragment>
-    );
 }
 
 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
+        let text = this.state.text
-        this.setState({options: {text: text}, qrcode: getQrcodeData({text: 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 {
                     <input
                         className="Qr-input big-input"
                         placeholder="Input your URL here"
+                        value={this.state.text}
                         onChange={this.handleChange}
                         onBlur={this.handleCreate}
                         onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}}
@@ -71,7 +77,17 @@ class Qrcode extends React.Component {
                     </div>
                     <div className="Qr-s">
                         <div className="Qr-box">
-                            <QrBoxList qrcode={this.state.qrcode} options={this.state.options}/>
+                            {
+                                getStyleList().map((style) => {
+                                    return <QrItem
+                                        value={style.value}
+                                        qrcode={this.state.qrcode}
+                                        renderer={style.renderer}
+                                        selected={style.value == this.state.selected}
+                                        onSelected={this.handleSelected}
+                                    />
+                                })
+                            }
                         </div>
                     </div>
                 </div>