From e812829d83b1fd296b25fbc244f89e9b38f687a9 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 28 九月 2020 09:28:15 +0800
Subject: [PATCH] 2020-09-28
---
src/menu/stylecontroller/index.jsx | 335 ++++++++++++++++++++++++++-----------------------------
1 files changed, 156 insertions(+), 179 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index f4171c8..82cbd05 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Popover, Menu, Drawer } from 'antd'
+import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer } from 'antd'
+import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import ColorSketch from '@/mob/colorsketch'
@@ -21,54 +22,73 @@
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
card: null,
+ comIds: [],
fontColor: '#000000',
- backgroundColor: '#ffffff',
bgimages: [],
- marginTop: '',
- marginTopVal: '',
- marginBottom: '',
- marginBottomVal: '',
- }
-
- 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()
- let bgImg = _card.backgroundImage || ''
-
- if (bgImg && /^linear-gradient/.test(bgImg)) {
- bgImg = bgImg.replace('linear-gradient(', '')
- bgImg = bgImg.replace(')', '')
- } else if (bgImg && /^url/.test(bgImg)) {
- bgImg = bgImg.replace('url(', '')
- bgImg = bgImg.replace(')', '')
- }
-
- this.setState({
- card: _card,
- fontColor: _card.color || '#000000',
- backgroundColor: _card.backgroundColor || '#ffffff',
- backgroundImage: bgImg,
- marginTop: _card.marginTop ? _card.marginTop : '',
- marginTopVal: _card.marginTop ? parseInt(_card.marginTop) : '',
- marginBottom: _card.marginBottom ? _card.marginBottom : '',
- marginBottomVal: _card.marginBottomVal ? parseInt(_card.marginBottomVal) : ''
- })
- })
- }
+ backgroundImage: '',
+ options: [],
}
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
}
- updateStyle = (style) => {
- const { card } = this.state
+ componentDidMount () {
+ MKEmitter.addListener('changeStyle', this.initStyle)
+ }
- this.props.updateStyle({componentId: card.componentId, classId: card.classId, uuid: card.uuid, style})
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ MKEmitter.removeListener('changeStyle', this.initStyle)
+ }
+
+ initStyle = (comIds, options, style = {}) => {
+ let backgroundImage = ''
+ if (style.backgroundImage) {
+ if (/^url/ig.test(style.backgroundImage)) {
+ backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
+ } else if (/^linear-gradient/ig.test(style.backgroundImage)) {
+ backgroundImage = style.backgroundImage.replace(/^linear-gradient\(/ig, '').replace(/\)$/ig, '')
+ }
+ }
+
+ this.setState({
+ visible: true,
+ comIds: comIds,
+ card: fromJS(style).toJS(),
+ options: options,
+ backgroundImage
+ })
+ }
+
+ onCloseDrawer = () => {
+ this.setState({
+ visible: false,
+ comIds: [],
+ card: null,
+ options: [],
+ backgroundImage: ''
+ })
+ }
+
+ updateStyle = (style) => {
+ const { comIds, card } = this.state
+
+ let _style = {
+ ...card,
+ ...style
+ }
+
+ this.setState({
+ card: _style,
+ })
+
+ MKEmitter.emit('submitStyle', comIds, _style)
}
/**
@@ -155,19 +175,7 @@
* @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
*/
changeBackgroundColor = (val) => {
- this.setState({
- backgroundColor: val
- })
this.updateStyle({backgroundColor: val})
- }
-
- /**
- * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏�
- */
- changeBackgroundColorInput = (e) => {
- this.setState({
- backgroundColor: e.target.value
- })
}
imgChange = (list) => {
@@ -183,12 +191,6 @@
}
changeBackgroundImageInput = (e) => {
- this.setState({
- backgroundImage: e.target.value
- })
- }
-
- submitBackgroundImage = (e) => {
let val = e.target.value
val = val.replace(/^\s*|\s*$/ig, '')
@@ -197,68 +199,35 @@
} else if (/^#|,/ig.test(val)) {
val = `linear-gradient(${val})`
}
-
+ this.setState({backgroundImage: e.target.value})
this.updateStyle({backgroundImage: val})
}
- submitBorder = (val, type) => {
- this.updateStyle({[type]: val})
+ submitBorder = (val) => {
+ let border = '0px'
+ if (!/,\s0\)$/.test(val)) {
+ border = `1px solid ${val}`
+ }
+ this.updateStyle({border: border})
}
- changeBorderRadius = (val) => {
- let value = parseFloat(val)
-
- if (isNaN(value) || value < 0 || value > 500) return
-
- this.updateStyle({borderRadius: `${value}px`})
- }
-
- changeMarginTop = (e) => {
+ changeBorderRadius = (e) => {
let val = e.target.value
- let _val = parseInt(val)
-
- this.setState({
- marginTop: val
- })
-
- if (isNaN(_val)) return
-
- this.setState({
- marginTopVal: _val
- })
+ this.updateStyle({borderRadius: val})
}
- submitMarginTop = (val) => {
- this.setState({
- marginTop: val
- })
- this.updateStyle({marginTop: val})
- }
+ changeMarginOrPadding = (val, type) => {
+ val = parseInt(val)
- changeMarginBottom = (e) => {
- let val = e.target.value
- let _val = parseInt(val)
+ if (isNaN(val)) {
+ val = 0
+ }
- this.setState({
- marginBottom: val
- })
-
- if (isNaN(_val)) return
-
- this.setState({
- marginBottomVal: _val
- })
- }
-
- submitMarginBottom = (val) => {
- this.setState({
- marginBottom: val
- })
- this.updateStyle({marginBottom: val})
+ this.updateStyle({[type]: `${val}px`})
}
render () {
- const { card, fontColor, backgroundColor, backgroundImage, bgimages, marginTop, marginTopVal, marginBottom, marginBottomVal } = this.state
+ const { card, options, backgroundImage, bgimages } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -272,20 +241,26 @@
return (
<Drawer
- title="鏍峰紡淇敼"
+ title={
+ <div className="header-logo">
+ <img src="http://cloud.mk9h.cn/Content/images/upload/2020-03-26/2020032615132185788026_xiazai.png" alt=""/>
+ </div>
+ }
placement="left"
width="300"
+ className="menu-style-drawer"
closable={true}
- maskStyle={{opacity: 0.2}}
+ onClose={this.onCloseDrawer}
+ maskStyle={{opacity: 0.1}}
visible={this.state.visible}
>
- <div className="mob-controller">
+ <div className="menu-style-controller">
<Form {...formItemLayout}>
- {card ? <Collapse expandIconPosition="right" defaultActiveKey={card.items[0]} accordion={true}>
- {card.items.includes('font') ? <Panel header="瀛椾綋" key="font">
+ {card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]} accordion={true}>
+ {options.includes('font') ? <Panel header="瀛椾綋" key="font">
<Col span={12}>
<Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}>
- <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
+ <InputNumber defaultValue={card.fontSize} min={12} max={100} precision={0} onChange={this.changeFontSize} />
</Form.Item>
</Col>
<Col span={12}>
@@ -324,7 +299,6 @@
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<ColorSketch value={card.color || '#000000'} onChange={this.changeFontColor} />
- <Input value={fontColor} onChange={this.changeFontColorInput} />
</Form.Item>
</Col>
<Col span={24}>
@@ -368,15 +342,14 @@
</Form.Item>
</Col>
</Panel> : null}
- {card.items.includes('background') ? <Panel header="鑳屾櫙" key="background">
+ {options.includes('background') ? <Panel header="鑳屾櫙" key="background">
<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} />
+ <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -386,54 +359,18 @@
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<FileUpload value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
- <Input placeholder="" value={backgroundImage} autoComplete="off" onBlur={this.submitBackgroundImage} onPressEnter={this.submitBackgroundImage} onChange={this.changeBackgroundImageInput} />
+ <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
</Form.Item>
</Col>
</Panel> : null}
- {card.items.includes('border') ? <Panel header="杈规" key="border">
+ {options.includes('border') ? <Panel header="杈规" key="border">
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="澶栬竟妗�" type="border-outer" />}
+ label={<Icon title="杈规" type="border-outer" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Input placeholder="" defaultValue={card.border || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'border')} onPressEnter={(e) => this.submitBorder(e.target.value, 'border')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="宸﹁竟妗�" type="border-left" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderLeft || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderLeft')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderLeft')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="鍙宠竟妗�" type="border-right" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderRight || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderRight')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderRight')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="涓婅竟妗�" type="border-top" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderTop || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderTop')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderTop')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="涓嬭竟妗�" type="border-bottom" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderBottom || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderBottom')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderBottom')}/>
+ <ColorSketch defaultValue={card.border ? card.border.replace(/^1px solid /ig, '').replace('0px', 'transparent') : 'transparent'} onChange={this.submitBorder} />
</Form.Item>
</Col>
<Col span={24}>
@@ -442,41 +379,81 @@
label={<Icon title="鍦嗚" type="radius-setting" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <InputNumber defaultValue={card.borderRadius || 0} min={0} max={500} precision={0} onChange={this.changeBorderRadius}/>
+ <Radio.Group onChange={this.changeBorderRadius} defaultValue={card.borderRadius || ''}>
+ <Radio value="0px">鏃�</Radio>
+ <Radio value="2px">2px</Radio>
+ <Radio value="4px">4px</Radio>
+ <Radio value="25%">25%</Radio>
+ <Radio value="50%">50%</Radio>
+ </Radio.Group>
</Form.Item>
</Col>
</Panel> : null}
- {card.items.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
+ {options.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
<Col span={12}>
<Form.Item
colon={false}
- label={<Icon title="涓婅竟璺�" type="vertical-align-top"/>}
+ label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
>
- <Popover placement="bottom" overlayClassName="margin-popover" content={
- marginTopVal !== '' ?
- <Menu>
- <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}px`)}>{marginTopVal} px</Menu.Item>
- <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}vh`)}>{marginTopVal} vh</Menu.Item>
- </Menu> : null
- } trigger="hover">
- <Input value={marginTop} onChange={this.changeMarginTop}/>
- </Popover>
+ <InputNumber defaultValue={card.marginTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
colon={false}
- label={<Icon title="涓嬭竟璺�" type="vertical-align-bottom"/>}
+ label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
>
- <Popover placement="bottom" overlayClassName="margin-popover" content={
- marginBottomVal !== '' ?
- <Menu>
- <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}px`)}>{marginBottomVal} px</Menu.Item>
- <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}vh`)}>{marginBottomVal} vh</Menu.Item>
- </Menu> : null
- } trigger="hover">
- <Input value={marginBottom} onChange={this.changeMarginBottom}/>
- </Popover>
+ <InputNumber defaultValue={card.marginBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
+ >
+ <InputNumber defaultValue={card.marginLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
+ >
+ <InputNumber defaultValue={card.marginRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('padding') ? <Panel header="鍐呰竟璺�" key="padding">
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
+ >
+ <InputNumber defaultValue={card.paddingTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
+ >
+ <InputNumber defaultValue={card.paddingBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
+ >
+ <InputNumber defaultValue={card.paddingLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
+ >
+ <InputNumber defaultValue={card.paddingRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
--
Gitblit v1.8.0