Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic QR Code generator

This commit is contained in:
CPunisher 2020-05-01 16:30:37 +08:00
parent 759f9c73d3
commit 0fb64ea060
4 changed files with 167 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/QrItem.js Normal file
View File

@ -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;

36
src/components/QrRendererBase.js Normal file
View File

@ -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

36
src/components/QrRendererRound.js Normal file
View File

@ -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

95
src/components/Qrcode.js
View File

@ -1,51 +1,74 @@
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 {
);
return (
<div>
<div className="Qr-Centered">
<h1>qrbtf.com</h1>
<input className="Qr-input" placeholder="Input your URL here"/>
</div>
<div className="Qr-titled">
<div className="Qr-Centered Qr-s-title">
Styles
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"
onChange={this.handleChange}
onBlur={this.handleCreate}
onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}}
/>
</div>
<div className="Qr-s">
<div className="Qr-box">
{listItems}
<div className="Qr-titled">
<div className="Qr-Centered Qr-s-title">
Styles
</div>
<div className="Qr-s">
<div className="Qr-box">
<QrBoxList qrcode={this.state.qrcode} options={this.state.options}/>
</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;