[Style selection]

This commit is contained in:
CPunisher 2020-05-03 00:22:05 +08:00
parent 704dbbf40e
commit 2def2652a9
4 changed files with 60 additions and 32 deletions

View File

@ -5,8 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1" />--> <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
<meta content="yes" name="apple-mobile-web-app-capable"> <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 <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"

View File

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

View File

@ -108,6 +108,10 @@
} }
} }
.Qr-item-image-selected {
border-color: #44D7B6 !important;
}
.Qr-item:hover .Qr-item-image { .Qr-item:hover .Qr-item-image {
border-color: #44D7B6; border-color: #44D7B6;
} }

View File

@ -1,31 +1,23 @@
import React from "react"; import React from "react";
import QrItem from './QrItem'
import {getQrcodeData} from "../utils/qrcodeHandler"; import {getQrcodeData} from "../utils/qrcodeHandler";
import './Qrcode.css'; 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 { class Qrcode extends React.Component {
@ -34,20 +26,33 @@ class Qrcode extends React.Component {
super(props); super(props);
this.handleChange = this.handleChange.bind(this) this.handleChange = this.handleChange.bind(this)
this.handleCreate = this.handleCreate.bind(this) this.handleCreate = this.handleCreate.bind(this)
this.handleSelected = this.handleSelected.bind(this)
this.state = { this.state = {
text: '', text: '',
selected: 'A1',
options: {text: ''}, options: {text: ''},
qrcode: null qrcode: null
}; };
} }
handleSelected(value) {
this.setState({selected: value});
}
handleChange(e) { handleChange(e) {
this.setState({text: e.target.value}) this.setState({text: e.target.value})
} }
handleCreate(e) { handleCreate(e) {
const text = this.state.text let text = this.state.text
if (text.length > 0)
this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})}); 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() { render() {
@ -59,6 +64,7 @@ class Qrcode extends React.Component {
<input <input
className="Qr-input big-input" className="Qr-input big-input"
placeholder="Input your URL here" placeholder="Input your URL here"
value={this.state.text}
onChange={this.handleChange} onChange={this.handleChange}
onBlur={this.handleCreate} onBlur={this.handleCreate}
onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}} onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}}
@ -71,7 +77,17 @@ class Qrcode extends React.Component {
</div> </div>
<div className="Qr-s"> <div className="Qr-s">
<div className="Qr-box"> <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> </div>
</div> </div>