From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 09 十二月 2022 15:53:32 +0800
Subject: [PATCH] 2022-12-09
---
src/menu/stylecombcontroller/index.jsx | 112 ++++++++++++++++----------------------------------------
1 files changed, 32 insertions(+), 80 deletions(-)
diff --git a/src/menu/stylecombcontroller/index.jsx b/src/menu/stylecombcontroller/index.jsx
index c26c17d..e47bdd3 100644
--- a/src/menu/stylecombcontroller/index.jsx
+++ b/src/menu/stylecombcontroller/index.jsx
@@ -3,7 +3,6 @@
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'
import {
- ColumnHeightOutlined,
FontSizeOutlined,
BoldOutlined,
LineHeightOutlined,
@@ -44,8 +43,8 @@
}
state = {
- options: [],
style: {},
+ type: '',
borposition: 'outer'
}
@@ -54,8 +53,7 @@
}
componentDidMount () {
- MKEmitter.addListener('changeCombineStyle', this.initStyle)
- MKEmitter.addListener('closeCombineStyle', this.closeStyle)
+ MKEmitter.addListener('switchMultiStyle', this.switchMultiStyle)
}
/**
@@ -65,24 +63,22 @@
this.setState = () => {
return
}
- MKEmitter.removeListener('changeCombineStyle', this.initStyle)
- MKEmitter.removeListener('closeCombineStyle', this.closeStyle)
+ MKEmitter.removeListener('switchMultiStyle', this.switchMultiStyle)
}
- closeStyle = () => {
- this.setState({
- visible: false,
- options: []
- })
- }
-
- initStyle = (options) => {
- this.setState({
- visible: true,
- style: {},
- options: options,
- borposition: 'outer'
- })
+ switchMultiStyle = (swit, type) => {
+ if (swit === 'open') {
+ this.setState({
+ visible: true,
+ style: {},
+ type: type,
+ borposition: 'outer'
+ })
+ } else {
+ this.setState({
+ visible: false
+ })
+ }
}
onCloseDrawer = () => {
@@ -246,7 +242,6 @@
}
render () {
- const { options, borposition } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -275,19 +270,8 @@
>
<div className="menu-combine-style-controller">
<Form {...formItemLayout}>
- <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]}>
- {options.includes('height') ? <Panel header="楂樺害" key="height">
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<ColumnHeightOutlined title="楂樺害" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/>
- </Form.Item>
- </Col>
- </Panel> : null}
- {options.includes('font') ? <Panel header="瀛椾綋" key="font">
+ <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey="margin">
+ {this.state.type === 'cardcell' ? <Panel header="瀛椾綋" key="font">
<Col span={12}>
<Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}>
<InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} />
@@ -372,7 +356,7 @@
</Form.Item>
</Col>
</Panel> : null}
- {options.includes('background') ? <Panel header="鑳屾櫙" key="background">
+ <Panel header="鑳屾櫙" key="background">
<Col span={24}>
<Form.Item
colon={false}
@@ -382,8 +366,8 @@
<ColorSketch onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
- </Panel> : null}
- {options.includes('border') ? <Panel header="杈规" key="border">
+ </Panel>
+ <Panel header="杈规" key="border">
<Col span={24}>
<Form.Item
colon={false}
@@ -405,36 +389,12 @@
label={<BorderOuterOutlined title="杈规鏍峰紡"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
+ <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
<Option value="solid">瀹炵嚎</Option>
<Option value="dotted">鐐瑰垝绾�</Option>
<Option value="dashed">铏氱嚎</Option>
<Option value="double">鍙岀嚎</Option>
- </Select> : null}
- {borposition === 'left' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
- <Option value="solid">瀹炵嚎</Option>
- <Option value="dotted">鐐瑰垝绾�</Option>
- <Option value="dashed">铏氱嚎</Option>
- <Option value="double">鍙岀嚎</Option>
- </Select> : null}
- {borposition === 'right' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
- <Option value="solid">瀹炵嚎</Option>
- <Option value="dotted">鐐瑰垝绾�</Option>
- <Option value="dashed">铏氱嚎</Option>
- <Option value="double">鍙岀嚎</Option>
- </Select> : null}
- {borposition === 'top' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
- <Option value="solid">瀹炵嚎</Option>
- <Option value="dotted">鐐瑰垝绾�</Option>
- <Option value="dashed">铏氱嚎</Option>
- <Option value="double">鍙岀嚎</Option>
- </Select> : null}
- {borposition === 'bottom' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
- <Option value="solid">瀹炵嚎</Option>
- <Option value="dotted">鐐瑰垝绾�</Option>
- <Option value="dashed">铏氱嚎</Option>
- <Option value="double">鍙岀嚎</Option>
- </Select> : null}
+ </Select>
</Form.Item>
</Col>
<Col span={24}>
@@ -443,11 +403,7 @@
label={<ColumnWidthOutlined title="杈规瀹藉害"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'left' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'right' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'top' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'bottom' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -456,11 +412,7 @@
label={<BgColorsOutlined title="杈规棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
- {borposition === 'left' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
- {borposition === 'right' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
- {borposition === 'top' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
- {borposition === 'bottom' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
+ <ColorSketch onChange={this.changeBorderColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -472,8 +424,8 @@
<StyleInput defaultValue={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
</Form.Item>
</Col>
- </Panel> : null}
- {options.includes('shadow') ? <Panel header="闃村奖" key="shadow">
+ </Panel>
+ <Panel header="闃村奖" key="shadow">
<Col span={24}>
<Form.Item
colon={false}
@@ -483,8 +435,8 @@
<ColorSketch onChange={this.changeShadowColor} />
</Form.Item>
</Col>
- </Panel> : null}
- {options.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
+ </Panel>
+ <Panel header="澶栬竟璺�" key="margin">
<Col span={24}>
<Form.Item
colon={false}
@@ -521,8 +473,8 @@
<StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
</Form.Item>
</Col>
- </Panel> : null}
- {options.includes('padding') ? <Panel header="鍐呰竟璺�" key="padding">
+ </Panel>
+ <Panel header="鍐呰竟璺�" key="padding">
<Col span={24}>
<Form.Item
colon={false}
@@ -559,7 +511,7 @@
<StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
</Form.Item>
</Col>
- </Panel> : null}
+ </Panel>
</Collapse>
</Form>
<div style={{textAlign: 'right'}}>
--
Gitblit v1.8.0