| | |
| | | import { is, fromJS } from 'immutable' |
| | | import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd' |
| | | import { |
| | | ColumnHeightOutlined, |
| | | FontSizeOutlined, |
| | | BoldOutlined, |
| | | LineHeightOutlined, |
| | |
| | | } |
| | | |
| | | state = { |
| | | options: [], |
| | | style: {}, |
| | | borposition: 'outer' |
| | | } |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('changeCombineStyle', this.initStyle) |
| | | MKEmitter.addListener('closeCombineStyle', this.closeStyle) |
| | | MKEmitter.addListener('switchMultiStyle', this.switchMultiStyle) |
| | | } |
| | | |
| | | /** |
| | |
| | | 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 = () => { |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { options, borposition } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | > |
| | | <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} /> |
| | |
| | | </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} |
| | |
| | | <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} |
| | |
| | | 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}> |
| | |
| | | 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}> |
| | |
| | | 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}> |
| | |
| | | <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} |
| | |
| | | <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} |
| | |
| | | <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} |
| | |
| | | <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </Form> |
| | | <div style={{textAlign: 'right'}}> |