pc端平台
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
king
2022-01-21 46f79b491173d284a4900d19e7aecf7509481438 
 src/menu/stylecombcontroller/index.jsx


@@ -1,11 +1,35 @@


import React, {Component} from 'react'


import PropTypes from 'prop-types'


import { is, fromJS } from 'immutable'


import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'


import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'


import {


  ColumnHeightOutlined,


  FontSizeOutlined,


  BoldOutlined,


  LineHeightOutlined,


  ColumnWidthOutlined,


  FontColorsOutlined,


  ItalicOutlined,


  AlignLeftOutlined,


  AlignCenterOutlined,


  AlignRightOutlined,


  UnderlineOutlined,


  StrikethroughOutlined,


  BgColorsOutlined,


  BorderOutlined,


  BorderOuterOutlined,


  BorderLeftOutlined,


  BorderRightOutlined,


  BorderTopOutlined,


  BorderBottomOutlined,


  RadiusSettingOutlined,


  ArrowUpOutlined,


  ArrowDownOutlined,


  ArrowLeftOutlined,


  ArrowRightOutlined,


} from '@ant-design/icons'




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'


import StyleInput from './styleInput'


import './index.scss'


@@ -20,7 +44,6 @@


  }




  state = {


    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,


    options: [],


    style: {},


    borposition: 'outer'


@@ -257,7 +280,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="高度" type="column-height" />}


                    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}/>


@@ -266,12 +289,12 @@


              </Panel> : null}


              {options.includes('font') ? <Panel header="字体" key="font">


                <Col span={12}>


                  <Form.Item colon={false} label={<Icon title="字体大小" type="font-size" />}>


                  <Form.Item colon={false} label={<FontSizeOutlined title="字体大小"/>}>


                    <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} />


                  </Form.Item>


                </Col>


                <Col span={12}>


                  <Form.Item colon={false} label={<Icon title="字体粗细" type="bold" />}>


                  <Form.Item colon={false} label={<BoldOutlined title="字体粗细"/>}>


                    <Select defaultValue={''} onChange={this.boldChange}>


                      <Option value="normal">normal</Option>


                      <Option value="bold">bold</Option>


@@ -290,19 +313,19 @@


                  </Form.Item>


                </Col>


                <Col span={12}>


                  <Form.Item colon={false} label={<Icon title="行高" type="line-height" />}>


                  <Form.Item colon={false} label={<LineHeightOutlined title="行高" />}>


                    <InputNumber defaultValue={''} 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" />}>


                  <Form.Item colon={false} label={<ColumnWidthOutlined title="字间距"/>}>


                    <InputNumber defaultValue={''} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>


                  </Form.Item>


                </Col>


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="字体颜色" type="font-colors" />}


                    label={<FontColorsOutlined title="字体颜色"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <ColorSketch onChange={this.changeFontColor} />


@@ -316,7 +339,7 @@


                  >


                    <Radio.Group defaultValue={''} 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="italic"><ItalicOutlined title="斜体"/></Radio.Button>


                      <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="倾斜">B</span></Radio.Button>


                    </Radio.Group>


                  </Form.Item>


@@ -328,9 +351,9 @@


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <Radio.Group className="text-align" defaultValue={''} 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.Button value="left"><AlignLeftOutlined title="左对齐"/></Radio.Button>


                      <Radio.Button value="center"><AlignCenterOutlined title="居中对齐"/></Radio.Button>


                      <Radio.Button value="right"><AlignRightOutlined title="右对齐"/></Radio.Button>


                    </Radio.Group>


                  </Form.Item>


                </Col>


@@ -342,8 +365,8 @@


                  >


                    <Radio.Group className="text-decoration" defaultValue={''} 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="underline"><UnderlineOutlined title="下划线"/></Radio.Button>


                      <Radio.Button value="line-through"><StrikethroughOutlined title="中划线"/></Radio.Button>


                      <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="上划线">O</span></Radio.Button>


                    </Radio.Group>


                  </Form.Item>


@@ -353,7 +376,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="背景颜色" type="bg-colors" />}


                    label={<BgColorsOutlined title="背景颜色"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <ColorSketch onChange={this.changeBackgroundColor} />


@@ -364,22 +387,22 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="边框位置" type="border" />}


                    label={<BorderOutlined title="边框位置"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}>


                      <Radio value="outer"><Icon title="外边框" type="border-outer" /></Radio>


                      <Radio value="left"><Icon title="左边框" type="border-left" /></Radio>


                      <Radio value="right"><Icon title="右边框" type="border-right" /></Radio>


                      <Radio value="top"><Icon title="上边框" type="border-top" /></Radio>


                      <Radio value="bottom"><Icon title="下边框" type="border-bottom" /></Radio>


                      <Radio value="outer"><BorderOuterOutlined title="外边框"/></Radio>


                      <Radio value="left"><BorderLeftOutlined title="左边框"/></Radio>


                      <Radio value="right"><BorderRightOutlined title="右边框"/></Radio>


                      <Radio value="top"><BorderTopOutlined title="上边框"/></Radio>


                      <Radio value="bottom"><BorderBottomOutlined title="下边框"/></Radio>


                    </Radio.Group>


                  </Form.Item>


                </Col>


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="边框样式" type="border-outer" />}


                    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}>


@@ -417,7 +440,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="边框宽度" type="column-width" />}


                    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}


@@ -430,7 +453,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="边框颜色" type="bg-colors" />}


                    label={<BgColorsOutlined title="边框颜色"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    {borposition === 'outer' ? <ColorSketch onChange={this.changeBorderColor} /> : null}


@@ -443,7 +466,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="圆角" type="radius-setting" />}


                    label={<RadiusSettingOutlined title="圆角"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>


@@ -454,7 +477,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="阴影颜色" type="bg-colors" />}


                    label={<BgColorsOutlined title="阴影颜色"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <ColorSketch onChange={this.changeShadowColor} />


@@ -465,7 +488,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="上边距" type="arrow-up"/>}


                    label={<ArrowUpOutlined title="上边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>


@@ -474,7 +497,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="下边距" type="arrow-down"/>}


                    label={<ArrowDownOutlined title="下边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>


@@ -483,7 +506,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="左边距" type="arrow-left"/>}


                    label={<ArrowLeftOutlined title="左边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>


@@ -492,7 +515,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="右边距" type="arrow-right"/>}


                    label={<ArrowRightOutlined title="右边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>


@@ -503,7 +526,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="上边距" type="arrow-up"/>}


                    label={<ArrowUpOutlined title="上边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>


@@ -512,7 +535,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="下边距" type="arrow-down"/>}


                    label={<ArrowDownOutlined title="下边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>


@@ -521,7 +544,7 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="左边距" type="arrow-left"/>}


                    label={<ArrowLeftOutlined title="左边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>


@@ -530,25 +553,10 @@


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="右边距" type="arrow-right"/>}


                    label={<ArrowRightOutlined title="右边距"/>}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>


                  </Form.Item>


                </Col>


              </Panel> : null}


              {options.includes('float') ? <Panel header="浮动" key="float">


                <Col span={24}>


                  <Form.Item


                    colon={false}


                    label={<Icon title="浮动" type="swap" />}


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <Radio.Group defaultValue={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>


                      <Radio value="left">左浮动</Radio>


                      <Radio value="right">右浮动</Radio>


                      <Radio value="none">不浮动</Radio>


                    </Radio.Group>


                  </Form.Item>


                </Col>


              </Panel> : null}