From e0e5aa28cbd509579c7a83672a93241c9a5ed7e9 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 06 七月 2020 15:09:49 +0800 Subject: [PATCH] 2020-07-06 --- src/mob/controller/index.jsx | 222 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 204 insertions(+), 18 deletions(-) diff --git a/src/mob/controller/index.jsx b/src/mob/controller/index.jsx index 6a4306b..6e9ebc0 100644 --- a/src/mob/controller/index.jsx +++ b/src/mob/controller/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Input, Col, Icon, InputNumber, Select } from 'antd' +import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio } from 'antd' import zhCN from '@/locales/zh-CN/mob.js' import enUS from '@/locales/en-US/mob.js' @@ -14,22 +14,153 @@ class MobController extends Component { static propTpyes = { editElem: PropTypes.any, + updateStyle: PropTypes.func, } state = { dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + card: null, + fontColor: '#000000', + backgroundColor: '#ffffff' + } + + UNSAFE_componentWillReceiveProps (nextProps) { + if (!is(fromJS(this.props.editElem), fromJS(nextProps.editElem))) { + this.setState({ + card: null + }, () => { + if (!nextProps.editElem) return + let _card = fromJS(nextProps.editElem).toJS() + + this.setState({ + card: _card, + fontColor: _card.color || '#000000', + backgroundColor: _card.backgroundColor || '#ffffff' + }) + }) + } } shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) + return !is(fromJS(this.state), fromJS(nextState)) } + /** + * @description 瀛椾綋澶у皬鍒囨崲锛岃秴鍑鸿寖鍥村拷鐣� + */ + changeFontSize = (val) => { + const { card } = this.state + let value = parseInt(val) + + if (isNaN(value) || value < 12 || value > 100) return + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontSize: `${value}px`}}) + } + + /** + * @description 淇敼琛岄棿璺濓紝瓒呭嚭鑼冨洿蹇界暐 + */ + changeLineHeight = (val) => { + const { card } = this.state + let value = parseFloat(val) + + if (isNaN(value) || value < 1 || value > 10) return + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {lineHeight: value}}) + } + + /** + * @description 瀛椾綋闂磋窛淇敼锛岃秴鍑鸿寖鍥村拷鐣� + */ + changeLetterSpacing = (val) => { + const { card } = this.state + let value = parseFloat(val) + + if (isNaN(value) || value < 0 || value > 100) return + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {letterSpacing: `${value}px`}}) + } + + /** + * @description 淇敼瀛椾綋绮楃粏 + */ boldChange = (val) => { - console.log(val) + const { card } = this.state + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontWeight: val}}) + } + + /** + * @description 淇敼瀛椾綋棰滆壊 锛岄鑹叉帶浠� + */ + changeFontColor = (val) => { + const { card } = this.state + + this.setState({ + fontColor: val + }) + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {color: val}}) + } + + /** + * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏� + */ + changeFontColorInput = (e) => { + this.setState({ + fontColor: e.target.value + }) + } + + /** + * @description 瀛椾綋瀵归綈 + */ + changeTextAlign = (e) => { + const { card } = this.state + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {textAlign: e.target.value}}) + } + + /** + * @description 瀛椾綋鏍峰紡锛屽�炬枩 + */ + changeFontStyle = (e) => { + const { card } = this.state + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontStyle: e.target.value}}) + } + + /** + * @description 瀛椾綋瑁呴グ锛屼笅鍒掔嚎銆佽疮绌跨嚎銆佷笂鍒掔嚎 + */ + changeTextDecoration = (e) => { + const { card } = this.state + + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {textDecoration: e.target.value}}) + } + + /** + * @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠� + */ + changeBackgroundColor = (val) => { + const { card } = this.state + + this.setState({ + backgroundColor: val + }) + this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {backgroundColor: val}}) + } + + /** + * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏� + */ + changeBackgroundColorInput = (e) => { + this.setState({ + backgroundColor: e.target.value + }) } render () { - const { editElem } = this.props + const { card, fontColor, backgroundColor } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -40,19 +171,20 @@ sm: { span: 16 } } } + return ( <div className="mob-controller"> <Form {...formItemLayout}> - {editElem ? <Collapse expandIconPosition="right" accordion={true}> - {editElem.items.includes('font') ? <Panel header="瀛椾綋" key="0"> + {card ? <Collapse expandIconPosition="right" defaultActiveKey={card.items[0]} accordion={true}> + {card.items.includes('font') ? <Panel header="瀛椾綋" key="font"> <Col span={12}> <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> - <InputNumber min={12} max={100} precision={0} /> + <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} /> </Form.Item> </Col> <Col span={12}> <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> - <Select defaultValue="normal" onChange={this.boldChange}> + <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}> <Option value="normal">normal</Option> <Option value="bold">bold</Option> <Option value="bolder">bolder</Option> @@ -71,12 +203,12 @@ </Col> <Col span={12}> <Form.Item colon={false} label={<Icon title="琛岄棿璺�" type="line-height" />}> - <InputNumber min={1} max={10} precision={1} /> + <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> </Form.Item> </Col> <Col span={12}> <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}> - <InputNumber min={0} max={100} precision={0} /> + <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> </Form.Item> </Col> <Col span={24}> @@ -85,19 +217,73 @@ label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - <ColorSketch /> - <Input /> + <ColorSketch color={card.color || '#000000'} changeColor={this.changeFontColor} /> + <Input value={fontColor} onChange={this.changeFontColorInput} /> </Form.Item> </Col> - <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> - <Input /> + <Col span={24}> + <Form.Item + colon={false} + label={' '} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}> + <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button> + <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button> + <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> + </Radio.Group> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={' '} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={this.changeTextAlign}> + <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button> + <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button> + <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button> + </Radio.Group> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={' '} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}> + <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button> + <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button> + <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button> + <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button> + </Radio.Group> </Form.Item> </Col> </Panel> : null} - <Panel header="鑳屾櫙" key="1"> - 鑳屾櫙 - </Panel> + {card.items.includes('background') ? <Panel header="鑳屾櫙" key="1"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} /> + <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} /> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鑳屾櫙鍥剧墖" type="picture" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} /> + <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} /> + </Form.Item> + </Col> + </Panel> : null} <Panel header="杈硅窛" key="2"> 杈硅窛 </Panel> -- Gitblit v1.8.0