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