[title & icon]
This commit is contained in:
parent
7dbcff5908
commit
77f5858001
|
@ -36,3 +36,17 @@ export const loadDownloadData = (data) => ({
|
||||||
type: actionTypes.LOAD_DOWNLOAD_DATA,
|
type: actionTypes.LOAD_DOWNLOAD_DATA,
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const changeTitle = (title) => {
|
||||||
|
return {
|
||||||
|
type: actionTypes.CHANGE_TITLE,
|
||||||
|
title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const changeIcon = (icon) => {
|
||||||
|
return {
|
||||||
|
type: actionTypes.CHANGE_ICON,
|
||||||
|
icon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -2,6 +2,8 @@ import React from 'react';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import ParamListViewer from "../../containers/param/ParamListViewer";
|
import ParamListViewer from "../../containers/param/ParamListViewer";
|
||||||
import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer";
|
import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer";
|
||||||
|
import ParamTitleViewer from "../../containers/param/disposable/ParamTitleViewer";
|
||||||
|
import ParamIconViewer from "../../containers/param/disposable/ParamIconViewer";
|
||||||
|
|
||||||
const PartParams = () => (
|
const PartParams = () => (
|
||||||
<div className="Qr-titled-nobg">
|
<div className="Qr-titled-nobg">
|
||||||
|
@ -12,6 +14,8 @@ const PartParams = () => (
|
||||||
<div className="Qr-Centered">
|
<div className="Qr-Centered">
|
||||||
<div className="Qr-div-table">
|
<div className="Qr-div-table">
|
||||||
<ParamCorrectLevelViewer/>
|
<ParamCorrectLevelViewer/>
|
||||||
|
<ParamTitleViewer/>
|
||||||
|
<ParamIconViewer/>
|
||||||
<ParamListViewer/>
|
<ParamListViewer/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import '../Qrcode.css';
|
||||||
|
|
||||||
|
const FrameworkParam = ({ paramName, children, ...other }) => (
|
||||||
|
<table className="Qr-table" {...other}>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>{ paramName }</td>
|
||||||
|
<td>
|
||||||
|
{ children }
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default FrameworkParam;
|
|
@ -42,7 +42,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
|
||||||
<div style={styles.cover} onClick={() => setDisplay(false)} />
|
<div style={styles.cover} onClick={() => setDisplay(false)} />
|
||||||
<TwitterPicker
|
<TwitterPicker
|
||||||
key={"input_" + rendererIndex + "_" + paramIndex}
|
key={"input_" + rendererIndex + "_" + paramIndex}
|
||||||
triangle="none"
|
triangle="hide"
|
||||||
color={value}
|
color={value}
|
||||||
colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
|
colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
|
||||||
onChangeComplete={onChange}
|
onChangeComplete={onChange}
|
||||||
|
|
|
@ -1,31 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import '../Qrcode.css';
|
|
||||||
|
|
||||||
const ParamCorrectLevel = ({value, onChange}) => (
|
|
||||||
<table className="Qr-table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>容错率</td>
|
|
||||||
<td>
|
|
||||||
<select
|
|
||||||
className="Qr-select"
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}>
|
|
||||||
<option value={1}>7%</option>
|
|
||||||
<option value={0}>15%</option>
|
|
||||||
<option value={3}>25%</option>
|
|
||||||
<option value={2}>30%</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
)
|
|
||||||
|
|
||||||
ParamCorrectLevel.propTypes = {
|
|
||||||
value: PropTypes.number.isRequired,
|
|
||||||
onChange: PropTypes.func.isRequired
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ParamCorrectLevel;
|
|
|
@ -6,6 +6,7 @@ import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
|
||||||
import ParamColorViewer from "../../containers/param/ParamColorViewer";
|
import ParamColorViewer from "../../containers/param/ParamColorViewer";
|
||||||
import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
|
import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
|
||||||
import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer";
|
import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer";
|
||||||
|
import FrameworkParam from "./FrameworkParam";
|
||||||
|
|
||||||
const mapTypeToComponent = ({
|
const mapTypeToComponent = ({
|
||||||
[ParamTypes.TEXT_EDITOR]: ParamTextViewer,
|
[ParamTypes.TEXT_EDITOR]: ParamTextViewer,
|
||||||
|
@ -18,19 +19,12 @@ const mapTypeToComponent = ({
|
||||||
const ParamList = ({ rendererIndex, paramInfo }) => (
|
const ParamList = ({ rendererIndex, paramInfo }) => (
|
||||||
paramInfo.map((item, paramIndex) => {
|
paramInfo.map((item, paramIndex) => {
|
||||||
return (
|
return (
|
||||||
<table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
|
<FrameworkParam key={"tr_" + rendererIndex + "_" + paramIndex} paramName={item.key}>
|
||||||
<tbody>
|
{React.createElement(mapTypeToComponent[item.type], {
|
||||||
<tr>
|
rendererIndex: rendererIndex,
|
||||||
<td>{item.key}</td>
|
paramIndex: paramIndex
|
||||||
<td>
|
})}
|
||||||
{React.createElement(mapTypeToComponent[item.type], {
|
</FrameworkParam>
|
||||||
rendererIndex: rendererIndex,
|
|
||||||
paramIndex: paramIndex
|
|
||||||
})}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import '../../Qrcode.css';
|
||||||
|
import FrameworkParam from "../FrameworkParam";
|
||||||
|
|
||||||
|
const ParamCorrectLevel = ({value, onChange}) => (
|
||||||
|
<FrameworkParam paramName={"容错率"}>
|
||||||
|
<select
|
||||||
|
className="Qr-select"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}>
|
||||||
|
<option value={1}>7%</option>
|
||||||
|
<option value={0}>15%</option>
|
||||||
|
<option value={3}>25%</option>
|
||||||
|
<option value={2}>30%</option>
|
||||||
|
</select>
|
||||||
|
</FrameworkParam>
|
||||||
|
)
|
||||||
|
|
||||||
|
ParamCorrectLevel.propTypes = {
|
||||||
|
value: PropTypes.number.isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParamCorrectLevel;
|
|
@ -0,0 +1,50 @@
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import '../../Qrcode.css';
|
||||||
|
import FrameworkParam from "../FrameworkParam";
|
||||||
|
import {getExactValue} from "../../../utils/util";
|
||||||
|
import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSrcViewer";
|
||||||
|
|
||||||
|
const IconParams = ({ icon, onChange }) => {
|
||||||
|
const { enabled, src, scale } = icon;
|
||||||
|
if (getExactValue(enabled, 0)) {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<FrameworkParam paramName={"图标源"}>
|
||||||
|
<ParamIconSrcViewer icon={icon} onChange={onChange}/>
|
||||||
|
</FrameworkParam>
|
||||||
|
<FrameworkParam paramName={"图标缩放"}>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="Qr-input small-input"
|
||||||
|
value={scale}
|
||||||
|
onChange={(e) => onChange({...icon, scale: e.target.value})}
|
||||||
|
/>
|
||||||
|
</FrameworkParam>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ParamIcon = ({icon, onChange}) => (
|
||||||
|
<React.Fragment>
|
||||||
|
<FrameworkParam paramName={"启用图标"}>
|
||||||
|
<select
|
||||||
|
className="Qr-select"
|
||||||
|
value={icon.enabled}
|
||||||
|
onChange={(e) => onChange({...icon, enabled: e.target.value})}>
|
||||||
|
<option value={0}>否</option>
|
||||||
|
<option value={1}>是</option>
|
||||||
|
</select>
|
||||||
|
</FrameworkParam>
|
||||||
|
<IconParams icon={icon} onChange={onChange}/>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
|
||||||
|
ParamIcon.propTypes = {
|
||||||
|
icon: PropTypes.object.isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParamIcon;
|
|
@ -0,0 +1,67 @@
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import '../../Qrcode.css';
|
||||||
|
import FrameworkParam from "../FrameworkParam";
|
||||||
|
import {getExactValue} from "../../../utils/util";
|
||||||
|
import ParamTitleColorViewer from "../../../containers/param/disposable/ParamTitleColorViewer";
|
||||||
|
|
||||||
|
const TitleParams = ({ title, onChange }) => {
|
||||||
|
const { enabled, text, color, size, align } = title;
|
||||||
|
if (getExactValue(enabled, 0)) {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<FrameworkParam paramName={"标题内容"}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="Qr-input small-input"
|
||||||
|
value={text}
|
||||||
|
onChange={(e) => onChange({...title, text: e.target.value})}
|
||||||
|
/>
|
||||||
|
</FrameworkParam>
|
||||||
|
<FrameworkParam paramName={"标题颜色"}>
|
||||||
|
<ParamTitleColorViewer title={title} onChange={onChange}/>
|
||||||
|
</FrameworkParam>
|
||||||
|
<FrameworkParam paramName={"标题大小"}>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="Qr-input small-input"
|
||||||
|
value={size}
|
||||||
|
onChange={(e) => onChange({...title, size: e.target.value})}
|
||||||
|
/>
|
||||||
|
</FrameworkParam>
|
||||||
|
<FrameworkParam paramName={"标题对齐"}>
|
||||||
|
<select
|
||||||
|
className="Qr-select"
|
||||||
|
value={title.align}
|
||||||
|
onChange={(e) => onChange({...title, align: e.target.value})}>
|
||||||
|
<option value={"middle"}>中间</option>
|
||||||
|
<option value={"bottom"}>底部</option>
|
||||||
|
</select>
|
||||||
|
</FrameworkParam>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ParamTitle = ({title, onChange}) => (
|
||||||
|
<React.Fragment>
|
||||||
|
<FrameworkParam paramName={"启用标题"}>
|
||||||
|
<select
|
||||||
|
className="Qr-select"
|
||||||
|
value={title.enabled}
|
||||||
|
onChange={(e) => onChange({...title, enabled: e.target.value})}>
|
||||||
|
<option value={0}>否</option>
|
||||||
|
<option value={1}>是</option>
|
||||||
|
</select>
|
||||||
|
</FrameworkParam>
|
||||||
|
<TitleParams title={title} onChange={onChange}/>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
|
||||||
|
ParamTitle.propTypes = {
|
||||||
|
title: PropTypes.object.isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParamTitle;
|
|
@ -13,7 +13,6 @@ function listPoints(qrcode, params) {
|
||||||
let type = params[0];
|
let type = params[0];
|
||||||
let size = params[1] / 100;
|
let size = params[1] / 100;
|
||||||
let funcType = params[1];
|
let funcType = params[1];
|
||||||
let opacity = params[2] / 100;
|
|
||||||
let posType = params[3];
|
let posType = params[3];
|
||||||
let id = 0;
|
let id = 0;
|
||||||
let otherColor = params[4];
|
let otherColor = params[4];
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, {useEffect} from "react";
|
import React, {useEffect} from "react";
|
||||||
import {extend} from "../../utils/util";
|
import {extend, getExactValue} from "../../utils/util";
|
||||||
|
|
||||||
const Renderer = ({ rendererType, ...other }) => (
|
const Renderer = ({ rendererType, ...other }) => (
|
||||||
React.createElement(rendererType, other)
|
React.createElement(rendererType, other)
|
||||||
|
@ -9,24 +9,72 @@ function areEqual(prevProps, nextProps) {
|
||||||
return !(prevProps.selected === true || nextProps.selected === true)
|
return !(prevProps.selected === true || nextProps.selected === true)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createRenderer(renderer) {
|
let defaultViewBox = function (qrcode) {
|
||||||
let defaultViewBox = function (qrcode) {
|
if (!qrcode) return '0 0 0 0';
|
||||||
if (!qrcode) return '0 0 0 0';
|
|
||||||
|
|
||||||
const nCount = qrcode.getModuleCount();
|
const nCount = qrcode.getModuleCount();
|
||||||
return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
|
return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
let drawIcon = function (qrcode, title, icon) {
|
||||||
|
if (!qrcode) return []
|
||||||
|
if (!title && !icon) return null;
|
||||||
|
|
||||||
|
let id = 0;
|
||||||
|
const titleEnabled = getExactValue(title.enabled, 0);
|
||||||
|
const iconEnabled = getExactValue(icon.enabled, 0);
|
||||||
|
const {text, color, size, align} = title;
|
||||||
|
const {src, scale} = icon;
|
||||||
|
|
||||||
|
const nCount = qrcode.getModuleCount();
|
||||||
|
// const { fontSize, color, verticalAlign, ...titleStyle } = styles.title || {};
|
||||||
|
// const titleVerticalAlign = titleAlign || verticalAlign || (icon ? "bottom" : "middle");
|
||||||
|
// iconScale = iconScale > .33 ? .33 : iconScale;
|
||||||
|
const titleStyle = {};
|
||||||
|
const titleVerticalAlign = align;
|
||||||
|
|
||||||
|
const iconSize = Number(nCount * (scale > .33 ? .33 : scale));
|
||||||
|
const iconXY = (nCount - iconSize) / 2;
|
||||||
|
|
||||||
|
const pointList = [];
|
||||||
|
if ((titleEnabled && align === "middle") || iconEnabled) {
|
||||||
|
pointList.push(<rect key={id++} width={iconSize} height={iconSize} rx="2" ry="2" fill="#FFFFFF" x={iconXY} y={iconXY} />);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (icon && iconEnabled) {
|
||||||
|
pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (title && titleEnabled) {
|
||||||
|
// const svgWidth = styles.svg && styles.svg.width ? styles.svg.width.replace("px", "") : 300;
|
||||||
|
// const titleFontSize = Number(nCount + nCount / 5 * 2) * (titleSize || fontSize || 12) / svgWidth;
|
||||||
|
// const titleFontColor = titleColor || color || "#000000";
|
||||||
|
const svgWidth = 300;
|
||||||
|
const titleFontSize = Number(nCount + nCount / 5 * 2) * size / svgWidth;
|
||||||
|
const titleFontColor = color;
|
||||||
|
|
||||||
|
const fontY = titleVerticalAlign === "middle"
|
||||||
|
? (icon ? (iconXY + iconSize) : (nCount / 2 + titleFontSize * .5))
|
||||||
|
: Number(nCount + nCount / 5) - titleFontSize * .5;
|
||||||
|
|
||||||
|
pointList.push(<text key={id++} x={nCount / 2} y={fontY} fill={titleFontColor} style={{ ...titleStyle, fontSize: titleFontSize }} textAnchor="middle">{text}</text>)
|
||||||
|
}
|
||||||
|
|
||||||
|
return pointList;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createRenderer(renderer) {
|
||||||
|
|
||||||
|
|
||||||
renderer = extend({
|
renderer = extend({
|
||||||
getViewBox: defaultViewBox,
|
getViewBox: defaultViewBox,
|
||||||
listPoints: (qrcode, params) => { return []; },
|
listPoints: (qrcode, params) => { return []; },
|
||||||
getParamInfo: () => {return []; },
|
getParamInfo: () => {return []; },
|
||||||
beginRendering: ({ qrcode, params, setParamInfo }) => {},
|
beginRendering: ({ qrcode, params, setParamInfo }) => {},
|
||||||
beforeListing: ({ qrcode, params, setParamInfo }) => {},
|
beforeListing: ({ qrcode, params, setParamInfo }) => {},
|
||||||
afterListing: ({ qrcode, params, setParamInfo }) => {},
|
|
||||||
}, renderer);
|
}, renderer);
|
||||||
|
|
||||||
return ({ qrcode, params, setParamInfo}) => {
|
return ({ qrcode, params, title, icon, setParamInfo}) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setParamInfo(renderer.getParamInfo());
|
setParamInfo(renderer.getParamInfo());
|
||||||
}, [setParamInfo]);
|
}, [setParamInfo]);
|
||||||
|
@ -37,7 +85,7 @@ export function createRenderer(renderer) {
|
||||||
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
|
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
|
||||||
{renderer.beforeListing({ qrcode, params, setParamInfo })}
|
{renderer.beforeListing({ qrcode, params, setParamInfo })}
|
||||||
{renderer.listPoints(qrcode, params)}
|
{renderer.listPoints(qrcode, params)}
|
||||||
{renderer.afterListing({ qrcode, params, setParamInfo })}
|
{drawIcon(qrcode, title, icon)}
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,4 +5,6 @@ export const actionTypes = {
|
||||||
CREATE_PARAM: 'CREATE_PARAM',
|
CREATE_PARAM: 'CREATE_PARAM',
|
||||||
CHANGE_PARAM: 'CHANGE_PARAM',
|
CHANGE_PARAM: 'CHANGE_PARAM',
|
||||||
LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
|
LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
|
||||||
|
CHANGE_TITLE: 'CHANGE_TITLE',
|
||||||
|
CHANGE_ICON: 'CHANGE_ICON'
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import {changeCorrectLevel} from "../../actions";
|
import {changeCorrectLevel} from "../../actions";
|
||||||
import ParamCorrectLevel from "../../components/param/ParamCorrectLevel";
|
import ParamCorrectLevel from "../../components/param/disposable/ParamCorrectLevel";
|
||||||
import {connect} from "react-redux";
|
import {connect} from "react-redux";
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
const mapStateToProps = (state) => ({
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import {isPicture, toBase64} from "../../../utils/imageUtils";
|
||||||
|
import ParamUpload from "../../../components/param/ParamUpload";
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
rendererIndex: -1,
|
||||||
|
paramIndex: -1,
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||||
|
onChange: (e) => {
|
||||||
|
if (e.target.files.length > 0) {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (isPicture(file)) {
|
||||||
|
toBase64(file, 1.0).then(res => {
|
||||||
|
ownProps.onChange({ ...ownProps.icon, src: res})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ParamUpload);
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import ParamIcon from "../../../components/param/disposable/ParamIcon";
|
||||||
|
import {changeIcon} from "../../../actions";
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
icon: state.icon
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||||
|
onChange: (icon) => {
|
||||||
|
dispatch(changeIcon(icon))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ParamIcon);
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import ParamColor from "../../../components/param/ParamColor";
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
rendererIndex: -1,
|
||||||
|
paramIndex: -1,
|
||||||
|
value: state.title.color
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||||
|
onChange: (color) => {
|
||||||
|
ownProps.onChange({ ...ownProps.title, color: color.hex })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ParamColor);
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import ParamTitle from "../../../components/param/disposable/ParamTitle";
|
||||||
|
import {changeTitle} from "../../../actions";
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
title: state.title
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||||
|
onChange: (title) => {
|
||||||
|
dispatch(changeTitle(title))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ParamTitle);
|
|
@ -7,6 +7,8 @@ const mapStateToProps = (state, ownProps) => ({
|
||||||
rendererIndex: ownProps.index,
|
rendererIndex: ownProps.index,
|
||||||
qrcode: state.qrcode,
|
qrcode: state.qrcode,
|
||||||
params: fillEmptyWith(state.paramValue[ownProps.index].slice(), 0),
|
params: fillEmptyWith(state.paramValue[ownProps.index].slice(), 0),
|
||||||
|
title: state.title,
|
||||||
|
icon: state.icon,
|
||||||
selected: state.selectedIndex === ownProps.index,
|
selected: state.selectedIndex === ownProps.index,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,8 @@ const initialState = {
|
||||||
history: [],
|
history: [],
|
||||||
downloadData: [],
|
downloadData: [],
|
||||||
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
|
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
|
||||||
|
icon: { enabled: 0, src: '', scale: 0.33 },
|
||||||
|
title: { enabled: 0, text: '', color: 'black', size: 20, align: 'middle'},
|
||||||
paramInfo: new Array(16).fill(new Array(16)),
|
paramInfo: new Array(16).fill(new Array(16)),
|
||||||
paramValue: new Array(16).fill(new Array(16))
|
paramValue: new Array(16).fill(new Array(16))
|
||||||
}
|
}
|
||||||
|
@ -65,6 +67,16 @@ export default function appReducer(state = initialState, action) {
|
||||||
downloadData: action.data
|
downloadData: action.data
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
case actionTypes.CHANGE_TITLE: {
|
||||||
|
return Object.assign({}, state, {
|
||||||
|
title: Object.assign({}, state.title, action.title)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
case actionTypes.CHANGE_ICON: {
|
||||||
|
return Object.assign({}, state, {
|
||||||
|
icon: Object.assign({}, state.icon, action.icon)
|
||||||
|
});
|
||||||
|
}
|
||||||
default: return state
|
default: return state
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue