This commit is contained in:
ciaochaos 2020-05-06 15:20:20 +08:00
commit bd96341137
8 changed files with 15 additions and 39 deletions

View File

@ -6,18 +6,17 @@ function calClassName(props) {
return 'Qr-item'; return 'Qr-item';
} }
class QrItem extends React.Component { export default class QrItem extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this);
} }
componentDidMount() { componentDidMount() {
this.forceUpdate() this.forceUpdate()
} }
handleClick(e) { handleClick = (e) => {
this.props.onSelected(this.props.index); this.props.onSelected(this.props.index);
} }
@ -40,5 +39,3 @@ class QrItem extends React.Component {
); );
} }
} }
export default QrItem;

View File

@ -70,7 +70,7 @@ function listPoint(props) {
return pointList; return pointList;
} }
class QrRendererBase extends React.Component { export default class QrRendererBase extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.setParamInfo) { if (this.props.setParamInfo) {
@ -111,4 +111,3 @@ class QrRendererBase extends React.Component {
} }
} }
export default QrRendererBase

View File

@ -2,10 +2,9 @@ import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {defaultRenderer} from "../utils/util"; import {defaultRenderer} from "../utils/util";
class QrRendererBlank extends React.Component { export default class QrRendererBlank extends React.Component {
render() { render() {
return defaultRenderer(this.props.qrcode); return defaultRenderer(this.props.qrcode);
} }
} }
export default QrRendererBlank

View File

@ -159,7 +159,7 @@ function listPoint(props) {
return pointList; return pointList;
} }
class QrRendererDSJ extends React.Component { export default class QrRendererDSJ extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.setParamInfo) { if (this.props.setParamInfo) {
@ -190,4 +190,3 @@ class QrRendererDSJ extends React.Component {
} }
} }
export default QrRendererDSJ

View File

@ -38,10 +38,9 @@ function listPoint(props) {
return pointList; return pointList;
} }
class QrRendererRandRect extends React.Component { export default class QrRendererRandRect extends React.Component {
render() { render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props)); return defaultRenderer(this.props.qrcode, listPoint(this.props));
} }
} }
export default QrRendererRandRect

View File

@ -70,7 +70,7 @@ function listPoint(props) {
return pointList; return pointList;
} }
class QrRendererRandRound extends React.Component { export default class QrRendererRandRound extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.setParamInfo) { if (this.props.setParamInfo) {
@ -111,4 +111,3 @@ class QrRendererRandRound extends React.Component {
} }
} }
export default QrRendererRandRound

View File

@ -70,7 +70,7 @@ function listPoint(props) {
return pointList; return pointList;
} }
class QrRendererRound extends React.Component { export default class QrRendererRound extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.setParamInfo) { if (this.props.setParamInfo) {
@ -111,4 +111,3 @@ class QrRendererRound extends React.Component {
} }
} }
export default QrRendererRound

View File

@ -40,14 +40,6 @@ class Qrcode extends React.Component {
paramValueBuffer; paramValueBuffer;
constructor(props) { constructor(props) {
super(props); super(props);
this.handleCreate = this.handleCreate.bind(this)
this.downloadSvg = this.downloadSvg.bind(this)
this.downloadImg = this.downloadImg.bind(this)
this.setParamValue = this.setParamValue.bind(this)
this.getParamValue = this.getParamValue.bind(this)
this.setParamInfo = this.setParamInfo.bind(this)
this.renderAdjustment = this.renderAdjustment.bind(this)
this.renderParamEditor = this.renderParamEditor.bind(this)
this.state = { this.state = {
text: '', text: '',
selectedIndex: 0, selectedIndex: 0,
@ -72,7 +64,7 @@ class Qrcode extends React.Component {
}); });
} }
setParamInfo(index) { setParamInfo = (index) => {
const _this = this; const _this = this;
return function (params) { return function (params) {
_this.paramInfoBuffer[index] = params; _this.paramInfoBuffer[index] = params;
@ -82,39 +74,32 @@ class Qrcode extends React.Component {
} }
} }
setParamValue(valueIndex, value) { setParamValue = (valueIndex, value) => {
const newValue = this.state.paramValue.slice(); const newValue = this.state.paramValue.slice();
newValue[this.state.selectedIndex][valueIndex] = value; newValue[this.state.selectedIndex][valueIndex] = value;
this.setState({paramValue: newValue}); this.setState({paramValue: newValue});
} }
getParamValue(index) { handleCreate = (e) => {
const _this = this;
return function () {
return _this.state.paramValue[index];
}
}
handleCreate(e) {
let text = this.state.text let text = this.state.text
if (text.length <= 0) text = 'https://qrbtf.com/'; if (text.length <= 0) text = 'https://qrbtf.com/';
this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text, correctLevel: this.state.correctLevel})}); this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text, correctLevel: this.state.correctLevel})});
if (e) e.target.blur(); if (e) e.target.blur();
} }
downloadSvg(e) { downloadSvg = (e) => {
const style = styleList[this.state.selectedIndex] const style = styleList[this.state.selectedIndex]
const el = React.createElement(style.renderer, {qrcode: this.state.qrcode, params: this.state.paramValue[this.state.selectedIndex]}) const el = React.createElement(style.renderer, {qrcode: this.state.qrcode, params: this.state.paramValue[this.state.selectedIndex]})
saveSvg(style.value, ReactDOMServer.renderToString(el)) saveSvg(style.value, ReactDOMServer.renderToString(el))
} }
downloadImg(e) { downloadImg = (e) => {
const style = styleList[this.state.selectedIndex] const style = styleList[this.state.selectedIndex]
const el = React.createElement(style.renderer, {qrcode: this.state.qrcode, params: this.state.paramValue[this.state.selectedIndex]}) const el = React.createElement(style.renderer, {qrcode: this.state.qrcode, params: this.state.paramValue[this.state.selectedIndex]})
saveImg(style.value, ReactDOMServer.renderToString(el), 1500, 1500) saveImg(style.value, ReactDOMServer.renderToString(el), 1500, 1500)
} }
renderParamEditor(info, index) { renderParamEditor = (info, index) => {
if (info.choices) { if (info.choices) {
return ( return (
<select <select
@ -149,7 +134,7 @@ class Qrcode extends React.Component {
} }
} }
renderAdjustment() { renderAdjustment = () => {
const target = this.state.paramInfo[this.state.selectedIndex]; const target = this.state.paramInfo[this.state.selectedIndex];
if (target instanceof Array) { if (target instanceof Array) {
return target.map((info, index) => { return target.map((info, index) => {