diff --git a/src/components/param/ParamCheckbox.js b/src/components/param/ParamCheckbox.js new file mode 100644 index 0000000..f7b41c6 --- /dev/null +++ b/src/components/param/ParamCheckbox.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types' +import '../Qrcode.css'; + +const ParamCheckBox = ({ rendererIndex, paramIndex, value, onChange }) => ( + + +) + +ParamCheckBox.propTypes = { + rendererIndex: PropTypes.number.isRequired, + paramIndex: PropTypes.number.isRequired, + value: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired +} + +export default ParamCheckBox; diff --git a/src/components/param/ParamList.js b/src/components/param/ParamList.js index 9219612..fdb52da 100644 --- a/src/components/param/ParamList.js +++ b/src/components/param/ParamList.js @@ -5,11 +5,13 @@ import ParamTextViewer from "../../containers/param/ParamTextViewer"; import ParamSelectViewer from "../../containers/param/ParamSelectViewer"; import ParamColorViewer from "../../containers/param/ParamColorViewer"; import ParamUploadViewer from "../../containers/param/ParamUploadViewer"; +import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer"; const mapTypeToComponent = ({ [ParamTypes.TEXT_EDITOR]: ParamTextViewer, [ParamTypes.SELECTOR]: ParamSelectViewer, [ParamTypes.COLOR_EDITOR]: ParamColorViewer, + [ParamTypes.CHECK_BOX]: ParamCheckBoxViewer, [ParamTypes.UPLOAD_BUTTON]: ParamUploadViewer, }) diff --git a/src/constant/ParamTypes.js b/src/constant/ParamTypes.js index 728e766..57d262d 100644 --- a/src/constant/ParamTypes.js +++ b/src/constant/ParamTypes.js @@ -2,6 +2,6 @@ export const ParamTypes = ({ TEXT_EDITOR: 1, SELECTOR: 2, COLOR_EDITOR: 3, - MULTI_CHECK: 4, + CHECK_BOX: 4, UPLOAD_BUTTON: 5 }); diff --git a/src/containers/param/ParamCheckBoxViewer.js b/src/containers/param/ParamCheckBoxViewer.js new file mode 100644 index 0000000..138cd29 --- /dev/null +++ b/src/containers/param/ParamCheckBoxViewer.js @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import {changeParam} from "../../actions"; +import ParamCheckBox from "../../components/param/ParamCheckbox"; + +const mapStateToProps = (state, ownProps) => ({ + rendererIndex: ownProps.rendererIndex, + paramIndex: ownProps.paramIndex, + value: state.paramValue[ownProps.rendererIndex][ownProps.paramIndex], +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + onChange: (e) => { + dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, e.target.checked)) + } +}) + +export default connect(mapStateToProps, mapDispatchToProps)(ParamCheckBox); diff --git a/src/reducers/index.js b/src/reducers/index.js index c0fee9e..c66433f 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,6 +2,7 @@ import {getQrcodeData} from "../utils/qrcodeHandler"; import {actionTypes} from "../constant/ActionTypes"; import {QRBTF_URL} from "../constant/References"; import RendererBase from "../components/renderer/RendererBase"; +import {getExactValue} from "../utils/util"; const initialState = { selectedIndex: 0, @@ -53,12 +54,7 @@ export default function appReducer(state = initialState, action) { } const newItem = item.slice(); - let newValue = action.value; - if (newValue.length <= 0) - newValue = state.paramInfo[action.rendererIndex][action.paramIndex].default; - - if (!isNaN(newValue)) newValue = parseInt(newValue); - newItem[action.paramIndex] = newValue; + newItem[action.paramIndex] = getExactValue(action.value, state.paramInfo[action.rendererIndex][action.paramIndex].default); return newItem; }) }); diff --git a/src/utils/util.js b/src/utils/util.js index bc0d4a4..7953e10 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -51,6 +51,13 @@ export function gamma(r, g, b) { return Math.pow((Math.pow(r, 2.2) + Math.pow(1.5 * g, 2.2) + Math.pow(0.6 * b, 2.2)) / (1 + Math.pow(1.5, 2.2) + Math.pow(0.6, 2.2)), 1/2.2) } +export function getExactValue(value, defaultValue) { + if (typeof value != "string") return value; + if (value.length <= 0) value = defaultValue; + if (!isNaN(value)) value = parseInt(value); + return value; +} + export function toBase64(file, width, height) { let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d');