From 4ea5215f4c4eb89f92b7d6493ad937df3a8253b8 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Wed, 6 May 2020 23:59:56 +0800 Subject: [PATCH] Basic QRcode Generation --- src/actions/index.js | 14 +++ src/components/InputInfo.js | 22 ---- src/components/QrItem.js | 41 -------- src/components/Qrcode.js | 117 +++------------------- src/components/app/App.js | 7 +- src/components/app/PartInput.js | 11 ++ src/components/app/PartMore.js | 20 ++++ src/components/app/PartStyles.js | 17 ++++ src/components/download/DownloadButton.js | 16 +++ src/components/link/LinkButton.js | 16 +++ src/components/renderer/RendererBase.js | 30 ++++++ src/components/renderer/RendererBlank.js | 13 +++ src/components/style/Style.js | 30 ++++++ src/components/style/StyleList.js | 26 +++++ src/containers/InputText.js | 16 +++ src/containers/Renderer.js | 14 +++ src/containers/StyleListViewer.js | 36 +++++++ src/reducers/index.js | 26 +++++ 18 files changed, 306 insertions(+), 166 deletions(-) create mode 100644 src/actions/index.js delete mode 100644 src/components/InputInfo.js delete mode 100644 src/components/QrItem.js create mode 100644 src/components/app/PartInput.js create mode 100644 src/components/app/PartMore.js create mode 100644 src/components/app/PartStyles.js create mode 100644 src/components/download/DownloadButton.js create mode 100644 src/components/link/LinkButton.js create mode 100644 src/components/renderer/RendererBase.js create mode 100644 src/components/renderer/RendererBlank.js create mode 100644 src/components/style/Style.js create mode 100644 src/components/style/StyleList.js create mode 100644 src/containers/InputText.js create mode 100644 src/containers/Renderer.js create mode 100644 src/containers/StyleListViewer.js diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 0000000..c40b127 --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,14 @@ +export const actionTypes = { + GENERATE_QR_INFO: 'GENERATE_QR_INFO', + CHANGE_STYLE: 'CHANGE_STYLE' +} + +export const genQRInfo = text => ({ + type: actionTypes.GENERATE_QR_INFO, + text +}) + +export const changeStyle = index => ({ + type: actionTypes.CHANGE_STYLE, + index +}) diff --git a/src/components/InputInfo.js b/src/components/InputInfo.js deleted file mode 100644 index ace1ba2..0000000 --- a/src/components/InputInfo.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const InputInfo = ({ onChange, onBlur, onKeyPress }) => ( -
- -
-) - -InputInfo.propTypes = { - onChange: PropTypes.func.isRequired, - onBlur: PropTypes.func.isRequired, - onKeyPress: PropTypes.func.isRequired -} - -export default InputInfo diff --git a/src/components/QrItem.js b/src/components/QrItem.js deleted file mode 100644 index 944117a..0000000 --- a/src/components/QrItem.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import './Qrcode.css' - -function calClassName(props) { - if (props.selected === true) return 'Qr-item Qr-item-selected'; - return 'Qr-item'; -} - -export default class QrItem extends React.Component { - - constructor(props) { - super(props); - } - - componentDidMount() { - this.forceUpdate() - } - - handleClick = (e) => { - this.props.onSelected(this.props.index); - } - - shouldComponentUpdate(nextProps, nextState, nextContext) { - return (nextProps.selected || this.props.selected) && (this.props.text == nextProps.text || this.props.text.length == 0) - } - - render() { - return ( -
-
-
- {this.props.renderer} -
-
-
- {this.props.value} -
-
- ); - } -} diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index 4ef7357..39a8f74 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -145,108 +145,21 @@ class Qrcode extends React.Component { render() { return ( -
- - this.setState({text: e.target.value})} - onBlur={this.handleCreate} - onKeyPress={(e) => {if(e.key === 'Enter') this.handleCreate(e)}} - /> -
-
-
-
Styles
-

点击选择样式

-
-
-
- { - styleList.map((style, index) => { - return this.setState({selectedIndex: index})} - /> - }) - } -
-
-
-
-
-
Parameters
-

参数调整

-
-
-
- - - - - - - {this.renderAdjustment()} - -
容错率 - -
-
-
-
-
-
-
Downloads
-

下载二维码 — {styleList[this.state.selectedIndex].value}

-
-
-
- - -
-
-
- -
-
-
-
More
-

更多

-
-
-
- - - - - - -
-
- -
-
-
+
+ //
+ //
+ //
Downloads
+ //

下载二维码 — {styleList[this.state.selectedIndex].value}

+ //
+ //
+ //
+ // + // + //
+ //
+ //
+ // + //
); } } diff --git a/src/components/app/App.js b/src/components/app/App.js index 9042a7a..66b14ba 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -3,6 +3,9 @@ import './App.css'; import '../Qrcode.css'; import Footer from "../footer/Footer"; import Header from "../header/Header"; +import PartInput from "./PartInput"; +import PartStyles from "./PartStyles"; +import PartMore from "./PartMore"; function App() { return ( @@ -10,7 +13,9 @@ function App() {
- + + +
diff --git a/src/components/app/PartInput.js b/src/components/app/PartInput.js new file mode 100644 index 0000000..25d0f8f --- /dev/null +++ b/src/components/app/PartInput.js @@ -0,0 +1,11 @@ +import React from 'react'; +import './App.css'; +import InputText from "../../containers/InputText"; + +const PartInput = () => ( +
+ +
+) + +export default PartInput; diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js new file mode 100644 index 0000000..e88ac14 --- /dev/null +++ b/src/components/app/PartMore.js @@ -0,0 +1,20 @@ +import React from 'react'; +import './App.css'; +import LinkButton from "../link/LinkButton"; + +const PartMore = () => ( +
+
+
More
+

更多

+
+
+
+ + +
+
+
+) + +export default PartMore; diff --git a/src/components/app/PartStyles.js b/src/components/app/PartStyles.js new file mode 100644 index 0000000..f58c5df --- /dev/null +++ b/src/components/app/PartStyles.js @@ -0,0 +1,17 @@ +import React from 'react'; +import './App.css'; +import StyleListViewer from "../../containers/StyleListViewer"; + +const PartStyles = () => ( +
+
+
Styles
+

点击选择样式

+
+
+ +
+
+) + +export default PartStyles; diff --git a/src/components/download/DownloadButton.js b/src/components/download/DownloadButton.js new file mode 100644 index 0000000..ce510e9 --- /dev/null +++ b/src/components/download/DownloadButton.js @@ -0,0 +1,16 @@ +import React from "react"; +import PropTypes from 'prop-types' +import '../Qrcode.css'; + +const DownloadButton = ({ onClick, value }) => ( + +) + +DownloadButton.propTypes = { + onClick: PropTypes.func.isRequired, + value: PropTypes.string.isRequired +} + +export default DownloadButton; diff --git a/src/components/link/LinkButton.js b/src/components/link/LinkButton.js new file mode 100644 index 0000000..cff0741 --- /dev/null +++ b/src/components/link/LinkButton.js @@ -0,0 +1,16 @@ +import React from "react"; +import PropTypes from 'prop-types' +import '../Qrcode.css'; + +const LinkButton = ({ href, value }) => ( + + + +) + +LinkButton.propTypes = { + href: PropTypes.string.isRequired, + value: PropTypes.string.isRequired +} + +export default LinkButton; diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js new file mode 100644 index 0000000..6a8cdf3 --- /dev/null +++ b/src/components/renderer/RendererBase.js @@ -0,0 +1,30 @@ +import React from "react"; +import PropTypes from 'prop-types'; +import {defaultRenderer} from "../../utils/util"; + +function listPoints(qrcode) { + if (!qrcode) return[] + + const nCount = qrcode.getModuleCount(); + const pointList = [] + let id = 0 + + for (let x = 0; x < nCount; x++) { + for (let y = 0; y < nCount; y++) { + if (qrcode.isDark(x, y)) { + pointList.push() + } + } + } + return pointList; +} + +const RendererBase = ({ qrcode }) => ( + defaultRenderer(qrcode, listPoints(qrcode)) +); + +RendererBase.prototype = { + qrcode: PropTypes.object.isRequired +} + +export default RendererBase; diff --git a/src/components/renderer/RendererBlank.js b/src/components/renderer/RendererBlank.js new file mode 100644 index 0000000..ebcfa51 --- /dev/null +++ b/src/components/renderer/RendererBlank.js @@ -0,0 +1,13 @@ +import React from "react"; +import PropTypes from 'prop-types'; +import {defaultRenderer} from "../../utils/util"; + +const RendererBlank = ({ qrcode }) => ( + defaultRenderer(qrcode, []) +); + +RendererBlank.prototype = { + qrcode: PropTypes.object.isRequired +} + +export default RendererBlank; diff --git a/src/components/style/Style.js b/src/components/style/Style.js new file mode 100644 index 0000000..83b705e --- /dev/null +++ b/src/components/style/Style.js @@ -0,0 +1,30 @@ +import React from 'react' +import PropTypes from 'prop-types' + +function calClassName(selected) { + if (selected === true) return 'Qr-item Qr-item-selected'; + return 'Qr-item'; +} + +const Style = ({ value, renderer, selected, onClick }) => ( +
+
+
+ {renderer} +
+
+
+ {value} +
+
+); + +Style.propTypes = { + value: PropTypes.string.isRequired, + renderer: PropTypes.object.isRequired, + selected: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired +} + +export default Style; diff --git a/src/components/style/StyleList.js b/src/components/style/StyleList.js new file mode 100644 index 0000000..de01b64 --- /dev/null +++ b/src/components/style/StyleList.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Style from "./Style"; + +const StyleList = ({ styles, onSelected }) => ( +
+ {styles.map((style, index) => +