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,51 +1,74 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import QrItem from './QrItem'
|
||||||
|
import {getQrcodeData} from "../utils/qrcodeHandler";
|
||||||
import './Qrcode.css'
|
import './Qrcode.css'
|
||||||
|
|
||||||
function QrItem(props) {
|
import QrRendererBase from './QrRendererBase'
|
||||||
return (
|
import QrRendererRound from './QrRendererRound'
|
||||||
<div className="Qr-item">
|
|
||||||
<div className="Qr-item-image">
|
|
||||||
|
|
||||||
</div>
|
function QrBoxList(props) {
|
||||||
<div className="Qr-item-detail">
|
return (
|
||||||
{props.value}
|
<React.Fragment>
|
||||||
</div>
|
<QrItem value={1} qrcode={props.qrcode} renderer={<QrRendererBase qrcode={props.qrcode}/>} />
|
||||||
</div>
|
<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) {
|
class Qrcode extends React.Component {
|
||||||
const numbers = props.numbers;
|
|
||||||
const listItems = numbers.map((number) =>
|
|
||||||
<QrItem key={number.toString()} value={number} />
|
|
||||||
|
|
||||||
);
|
constructor(props) {
|
||||||
return (
|
super(props);
|
||||||
<div>
|
this.handleChange = this.handleChange.bind(this)
|
||||||
<div className="Qr-Centered">
|
this.handleCreate = this.handleCreate.bind(this)
|
||||||
<h1>qrbtf.com</h1>
|
this.state = {
|
||||||
<input className="Qr-input" placeholder="Input your URL here"/>
|
text: '',
|
||||||
</div>
|
options: {text: ''},
|
||||||
<div className="Qr-titled">
|
qrcode: null
|
||||||
<div className="Qr-Centered Qr-s-title">
|
};
|
||||||
Styles
|
}
|
||||||
|
|
||||||
|
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"
|
||||||
|
onChange={this.handleChange}
|
||||||
|
onBlur={this.handleCreate}
|
||||||
|
onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="Qr-s">
|
<div className="Qr-titled">
|
||||||
<div className="Qr-box">
|
<div className="Qr-Centered Qr-s-title">
|
||||||
{listItems}
|
Styles
|
||||||
|
</div>
|
||||||
|
<div className="Qr-s">
|
||||||
|
<div className="Qr-box">
|
||||||
|
<QrBoxList qrcode={this.state.qrcode} options={this.state.options}/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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;
|
export default Qrcode;
|
||||||
|
|
Loading…
Reference in New Issue