Basic QR Code generator
This commit is contained in:
parent
759f9c73d3
commit
0fb64ea060
|
@ -0,0 +1,36 @@
|
|||
import React from "react";
|
||||
import './Qrcode.css'
|
||||
|
||||
function calViewBox(props) {
|
||||
if (!props.qrcode) return '0 0 0 0';
|
||||
|
||||
const nCount = props.qrcode.getModuleCount();
|
||||
return '0 0 ' + String(nCount) + ' ' + String(nCount);
|
||||
}
|
||||
|
||||
class QrItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="Qr-item">
|
||||
<div className="Qr-item-image">
|
||||
<svg width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
|
||||
{this.props.renderer}
|
||||
</svg>
|
||||
</div>
|
||||
<div className="Qr-item-detail">
|
||||
{this.state.value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default QrItem;
|
|
@ -0,0 +1,36 @@
|
|||
import React from "react";
|
||||
import './Qrcode.css'
|
||||
|
||||
function listPoint(props) {
|
||||
if (!props.qrcode) return []
|
||||
|
||||
const qrcode = props.qrcode;
|
||||
const nCount = qrcode.getModuleCount();
|
||||
const pointList = new Array(nCount);
|
||||
let id = 0;
|
||||
for (let row = 0; row < nCount; row++) {
|
||||
for (let col = 0; col < nCount; col++) {
|
||||
if (qrcode.isDark(row, col))
|
||||
pointList.push(<use key={id++} fill="black" x={row} y={col} href="#simpleRect"/>)
|
||||
}
|
||||
}
|
||||
return pointList;
|
||||
}
|
||||
|
||||
class QrRendererBase extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<svg>
|
||||
<rect fill="black" width={1} height={1} id="simpleRect"/>
|
||||
{listPoint(this.props)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default QrRendererBase
|
|
@ -0,0 +1,36 @@
|
|||
import React from "react";
|
||||
import './Qrcode.css'
|
||||
|
||||
function listPoint(props) {
|
||||
if (!props.qrcode) return []
|
||||
|
||||
const qrcode = props.qrcode;
|
||||
const nCount = qrcode.getModuleCount();
|
||||
const pointList = new Array(nCount);
|
||||
let id = 0;
|
||||
for (let row = 0; row < nCount; row++) {
|
||||
for (let col = 0; col < nCount; col++) {
|
||||
if (qrcode.isDark(row, col))
|
||||
pointList.push(<use key={id++} fill="black" x={row} y={col} href="#simpleRound"/>)
|
||||
}
|
||||
}
|
||||
return pointList;
|
||||
}
|
||||
|
||||
class QrRendererRound extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<svg>
|
||||
<circle fill="black" r={0.6} id="simpleRound"/>
|
||||
{listPoint(this.props)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default QrRendererRound
|
|
@ -1,30 +1,60 @@
|
|||
import React from "react";
|
||||
import QrItem from './QrItem'
|
||||
import {getQrcodeData} from "../utils/qrcodeHandler";
|
||||
import './Qrcode.css'
|
||||
|
||||
function QrItem(props) {
|
||||
return (
|
||||
<div className="Qr-item">
|
||||
<div className="Qr-item-image">
|
||||
import QrRendererBase from './QrRendererBase'
|
||||
import QrRendererRound from './QrRendererRound'
|
||||
|
||||
</div>
|
||||
<div className="Qr-item-detail">
|
||||
{props.value}
|
||||
</div>
|
||||
</div>
|
||||
function QrBoxList(props) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<QrItem value={1} qrcode={props.qrcode} renderer={<QrRendererBase qrcode={props.qrcode}/>} />
|
||||
<QrItem value={2} qrcode={props.qrcode} renderer={<QrRendererRound qrcode={props.qrcode}/>} />
|
||||
<QrItem value={3} qrcode={props.qrcode} />
|
||||
<QrItem value={4} qrcode={props.qrcode} />
|
||||
<QrItem value={5} qrcode={props.qrcode} />
|
||||
<QrItem value={6} qrcode={props.qrcode} />
|
||||
<QrItem value={7} qrcode={props.qrcode} />
|
||||
<QrItem value={8} qrcode={props.qrcode} />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function Qrs(props) {
|
||||
const numbers = props.numbers;
|
||||
const listItems = numbers.map((number) =>
|
||||
<QrItem key={number.toString()} value={number} />
|
||||
class Qrcode extends React.Component {
|
||||
|
||||
);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
this.handleCreate = this.handleCreate.bind(this)
|
||||
this.state = {
|
||||
text: '',
|
||||
options: {text: ''},
|
||||
qrcode: null
|
||||
};
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({text: e.target.value})
|
||||
}
|
||||
|
||||
handleCreate(e) {
|
||||
const text = this.state.text
|
||||
this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="Qr-Centered">
|
||||
<h1>qrbtf.com</h1>
|
||||
<input className="Qr-input" placeholder="Input your URL here"/>
|
||||
<input
|
||||
className="Qr-input"
|
||||
placeholder="Input your URL here"
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.handleCreate}
|
||||
onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}}
|
||||
/>
|
||||
</div>
|
||||
<div className="Qr-titled">
|
||||
<div className="Qr-Centered Qr-s-title">
|
||||
|
@ -32,20 +62,13 @@ function Qrs(props) {
|
|||
</div>
|
||||
<div className="Qr-s">
|
||||
<div className="Qr-box">
|
||||
{listItems}
|
||||
<QrBoxList qrcode={this.state.qrcode} options={this.state.options}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
const numbers = ['C1', 'C2', 'S1', 'D1', 'D2', 'D3', 'D4', 'A1', 'A2', 'A3', 'A4'];
|
||||
const Qrcode = (props) => {
|
||||
return (
|
||||
<Qrs numbers={numbers} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Qrcode;
|
||||
|
|
Loading…
Reference in New Issue