Reconstruct code

src/actions/index.js

@@ -1,7 +1,4 @@
-export const actionTypes = {
+import {actionTypes} from "../constant/ActionTypes";
-    GENERATE_QR_INFO: 'GENERATE_QR_INFO',
-    CHANGE_STYLE: 'CHANGE_STYLE'
-}
 
 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
+})

src/components/renderer/RendererBase.js

@@ -1,8 +1,9 @@
 import React from "react";
-import PropTypes from 'prop-types';
+import {defaultViewBox} from "../../utils/util";
-import {defaultRenderer} 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 }) => (
+function getParamInfo() {
-    defaultRenderer(qrcode, listPoints(qrcode))
+    return [
-);
+        {
-
+            type: ParamTypes.SELECTOR,
-RendererBase.prototype = {
+            key: '信息点样式',
-    qrcode: PropTypes.object.isRequired
+            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 (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoints(this.props.qrcode, this.props.params)}
+            </svg>
+        )
+    }
 }
 
-export default RendererBase;

src/components/renderer/RendererBlank.js

@@ -1,13 +1,31 @@
 import React from "react";
-import PropTypes from 'prop-types';
+import {defaultViewBox} from "../../utils/util";
-import {defaultRenderer} from "../../utils/util";
 
-const RendererBlank = ({ qrcode }) => (
+function listPoints(qrcode, params) {
-    defaultRenderer(qrcode, [])
+    if (!qrcode) return[]
-);
+    return []
-
+}
-RendererBlank.prototype = {
+
-    qrcode: PropTypes.object.isRequired
+function getParamInfo() {
+    return []
+}
+
+export default class RendererBlank extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+    }
+
+    render() {
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoints(this.props.qrcode, this.props.params)}
+            </svg>
+        )
+    }
 }
 
-export default RendererBlank;

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'
+}

src/constant/ParamTypes.js

@@ -0,0 +1,4 @@
+export const ParamTypes = {
+    TEXT_EDITOR: 1,
+    SELECTOR: 2
+}

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 => ({
+const mapStateToProps = (state, ownProps) => ({
-    qrcode: state.qrcode
+    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)
 }

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)

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
     }

src/utils/qrcode.js

@@ -17,6 +17,7 @@
 //---------------------------------------------------------------------
 // QR8bitByte
 //---------------------------------------------------------------------
+/* eslint-disable */
 
 function QR8bitByte(data) {
 	this.mode = QRMode.MODE_8BIT_BYTE;

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 (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {points}
-        </svg>
-    );
-}
-
 export function isWeiXin(){
     const ua = window.navigator.userAgent.toLowerCase();
     if(ua.match(/MicroMessenger/i) == 'micromessenger'){