2022-10-18

king

2022-10-18 a8507cc8c42d17d4fb854594dbf1e084d61912ac

 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,7 +43,6 @@
  }

  state = {
    options: [],
    style: {},
    borposition: 'outer'
  }
@@ -54,8 +52,7 @@
  }

  componentDidMount () {
    MKEmitter.addListener('changeCombineStyle', this.initStyle)
    MKEmitter.addListener('closeCombineStyle', this.closeStyle)
    MKEmitter.addListener('switchMultiStyle', this.switchMultiStyle)
  }

  /**
@@ -65,24 +62,21 @@
    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 = (type) => {
    if (type === 'open') {
      this.setState({
        visible: true,
        style: {},
        borposition: 'outer'
      })
    } else {
      this.setState({
        visible: false
      })
    }
  }

  onCloseDrawer = () => {
@@ -246,7 +240,6 @@
  }

  render () {
    const { options, borposition } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -275,19 +268,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">
              <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} />
@@ -371,8 +353,8 @@
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('background') ? <Panel header="背景" key="background">
              </Panel>
              <Panel header="背景" key="background">
                <Col span={24}>
                  <Form.Item
                    colon={false}
@@ -382,8 +364,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 +387,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 +401,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 +410,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 +422,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 +433,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 +471,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 +509,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'}}>