From c680be15a1906b82a320e7e6949af7df787b9715 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Thu, 7 May 2020 23:20:15 +0800 Subject: [PATCH] Reconstruct code --- src/actions/index.js | 15 ++++-- src/components/renderer/RendererBase.js | 67 ++++++++++++++++++++---- src/components/renderer/RendererBlank.js | 36 +++++++++---- src/constant/ActionTypes.js | 6 +++ src/constant/ParamTypes.js | 4 ++ src/containers/Renderer.js | 13 +++-- src/containers/StyleListViewer.js | 6 +-- src/reducers/index.js | 29 ++++++++-- src/utils/qrcode.js | 1 + src/utils/util.js | 9 ---- 10 files changed, 142 insertions(+), 44 deletions(-) create mode 100644 src/constant/ActionTypes.js create mode 100644 src/constant/ParamTypes.js diff --git a/src/actions/index.js b/src/actions/index.js index c40b127..5b8296f 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,7 +1,4 @@ -export const actionTypes = { - GENERATE_QR_INFO: 'GENERATE_QR_INFO', - CHANGE_STYLE: 'CHANGE_STYLE' -} +import {actionTypes} from "../constant/ActionTypes"; export const genQRInfo = text => ({ type: actionTypes.GENERATE_QR_INFO, @@ -12,3 +9,13 @@ export const changeStyle = index => ({ type: actionTypes.CHANGE_STYLE, index }) + +export const createParam = (rendererIndex, params) => ({ + type: actionTypes.CREATE_PARAM, + rendererIndex, params +}) + +export const changeParam = (rendererIndex, paramIndex, value) => ({ + type: actionTypes.CHANGE_PARAM, + rendererIndex, paramIndex, value +}) diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js index 6a8cdf3..d908704 100644 --- a/src/components/renderer/RendererBase.js +++ b/src/components/renderer/RendererBase.js @@ -1,8 +1,9 @@ import React from "react"; -import PropTypes from 'prop-types'; -import {defaultRenderer} from "../../utils/util"; +import {defaultViewBox} from "../../utils/util"; +import {ParamTypes} from "../../constant/ParamTypes"; +import {createParam} from "../../actions"; -function listPoints(qrcode) { +function listPoints(qrcode, params) { if (!qrcode) return[] const nCount = qrcode.getModuleCount(); @@ -19,12 +20,58 @@ function listPoints(qrcode) { return pointList; } -const RendererBase = ({ qrcode }) => ( - defaultRenderer(qrcode, listPoints(qrcode)) -); - -RendererBase.prototype = { - qrcode: PropTypes.object.isRequired +function getParamInfo() { + return [ + { + type: ParamTypes.SELECTOR, + key: '信息点样式', + default: 0, + choices: [ + "矩形", + "圆形", + "随机" + ] + }, + { + type: ParamTypes.TEXT_EDITOR, + key: '信息点缩放', + default: 100 + }, + { + type: ParamTypes.TEXT_EDITOR, + key: '信息点不透明度', + default: 100, + }, + { + type: ParamTypes.SELECTOR, + key: '定位点样式', + default: 0, + choices: [ + "矩形", + "圆形", + "行星", + ] + }, + ]; +} + +export default class RendererBase extends React.Component { + + constructor(props) { + super(props); + } + + componentDidMount() { + this.props.setParamInfo(this.props.rendererIndex, getParamInfo()) + } + + render() { + return ( + + {listPoints(this.props.qrcode, this.props.params)} + + ) + } } -export default RendererBase; diff --git a/src/components/renderer/RendererBlank.js b/src/components/renderer/RendererBlank.js index ebcfa51..2865485 100644 --- a/src/components/renderer/RendererBlank.js +++ b/src/components/renderer/RendererBlank.js @@ -1,13 +1,31 @@ import React from "react"; -import PropTypes from 'prop-types'; -import {defaultRenderer} from "../../utils/util"; +import {defaultViewBox} from "../../utils/util"; -const RendererBlank = ({ qrcode }) => ( - defaultRenderer(qrcode, []) -); - -RendererBlank.prototype = { - qrcode: PropTypes.object.isRequired +function listPoints(qrcode, params) { + if (!qrcode) return[] + return [] +} + +function getParamInfo() { + return [] +} + +export default class RendererBlank extends React.Component { + + constructor(props) { + super(props); + } + + componentDidMount() { + } + + render() { + return ( + + {listPoints(this.props.qrcode, this.props.params)} + + ) + } } -export default RendererBlank; diff --git a/src/constant/ActionTypes.js b/src/constant/ActionTypes.js new file mode 100644 index 0000000..52e60f3 --- /dev/null +++ b/src/constant/ActionTypes.js @@ -0,0 +1,6 @@ +export const actionTypes = { + GENERATE_QR_INFO: 'GENERATE_QR_INFO', + CHANGE_STYLE: 'CHANGE_STYLE', + CREATE_PARAM: 'CREATE_PARAM', + CHANGE_PARAM: 'CHANGE_PARAM' +} diff --git a/src/constant/ParamTypes.js b/src/constant/ParamTypes.js new file mode 100644 index 0000000..74f3fec --- /dev/null +++ b/src/constant/ParamTypes.js @@ -0,0 +1,4 @@ +export const ParamTypes = { + TEXT_EDITOR: 1, + SELECTOR: 2 +} diff --git a/src/containers/Renderer.js b/src/containers/Renderer.js index b7c2037..183fe55 100644 --- a/src/containers/Renderer.js +++ b/src/containers/Renderer.js @@ -1,14 +1,17 @@ import React from "react"; import { connect } from 'react-redux'; -import {changeStyle} from "../actions"; +import {createParam} from "../actions"; -const mapStateToProp = state => ({ - qrcode: state.qrcode +const mapStateToProps = (state, ownProps) => ({ + qrcode: state.qrcode, + params: state.paramValue[ownProps.index], + rendererIndex: ownProps.index }) -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch) => ({ + setParamInfo: (index, params) => dispatch(createParam(index, params)), }) export default function Renderer(WrappedRenderer) { - return connect(mapStateToProp, mapDispatchToProps())(WrappedRenderer) + return connect(mapStateToProps, mapDispatchToProps)(WrappedRenderer) } diff --git a/src/containers/StyleListViewer.js b/src/containers/StyleListViewer.js index 9a38e90..ac1c3ef 100644 --- a/src/containers/StyleListViewer.js +++ b/src/containers/StyleListViewer.js @@ -16,12 +16,12 @@ const styles = [ {value: 'D1', renderer: RendererBlank}, ] -const mapStateToProp = state => ({ +const mapStateToProps = state => ({ styles: styles.map((style, index) => { return { value: style.value, selected: state.selectedIndex == index, - renderer: React.createElement(Renderer(style.renderer)) + renderer: React.createElement(Renderer(style.renderer), {index: index}) } }) }) @@ -31,6 +31,6 @@ const mapDispatchToProps = dispatch => ({ }) export default connect( - mapStateToProp, + mapStateToProps, mapDispatchToProps )(StyleList) diff --git a/src/reducers/index.js b/src/reducers/index.js index d9d082a..8273acf 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,14 +1,15 @@ import { combineReducers } from "redux"; -import {actionTypes} from "../actions"; import {getQrcodeData} from "../utils/qrcodeHandler"; +import {actionTypes} from "../constant/ActionTypes"; const initialState = { selectedIndex: 0, - qrcode: null + qrcode: null, + paramInfo: new Array(16).fill(new Array(16)), + paramValue: new Array(16).fill(new Array(16)) } export default function appReducer(state = initialState, action) { - console.log(state) switch (action.type) { case actionTypes.GENERATE_QR_INFO: { return Object.assign({}, state, { @@ -18,7 +19,27 @@ export default function appReducer(state = initialState, action) { case actionTypes.CHANGE_STYLE: { return Object.assign({}, state, { selectedIndex: action.index - }) + }); + } + case actionTypes.CREATE_PARAM: { + return Object.assign({}, state, { + paramInfo: Object.assign([], [...state.paramInfo], { + [action.rendererIndex]: action.params + }), + paramValue: Object.assign([], [...state.paramValue], { + [action.rendererIndex]: action.params.map(obj => obj.default) + }) + }); + } + case actionTypes.CHANGE_PARAM: { + return Object.assign({}, state, { + paramValue: Object.assign([], [...state.paramValue], { + [action.rendererIndex]: + Object.assign([], [...state.paramValue[action.rendererIndex]], { + [action.paramIndex]: action.value + }) + }) + }); } default: return state } diff --git a/src/utils/qrcode.js b/src/utils/qrcode.js index 0ec42e9..15a5356 100644 --- a/src/utils/qrcode.js +++ b/src/utils/qrcode.js @@ -17,6 +17,7 @@ //--------------------------------------------------------------------- // QR8bitByte //--------------------------------------------------------------------- +/* eslint-disable */ function QR8bitByte(data) { this.mode = QRMode.MODE_8BIT_BYTE; diff --git a/src/utils/util.js b/src/utils/util.js index 5c6ab47..4fb8b16 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -22,15 +22,6 @@ export function defaultViewBox(qrcode) { return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2); } -export function defaultRenderer(qrcode, points) { - return ( - - {points} - - ); -} - export function isWeiXin(){ const ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){