2020-07-13

king

2020-07-13 269f0759a64927c2ea06a9d7de92ecfd0be7df5b

 src/mob/controller/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio } from 'antd'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Popover, Menu } from 'antd'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -23,7 +23,11 @@
    card: null,
    fontColor: '#000000',
    backgroundColor: '#ffffff',
    bgimages: []
    bgimages: [],
    marginTop: '',
    marginTopVal: '',
    marginBottom: '',
    marginBottomVal: '',
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
@@ -48,6 +52,10 @@
          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) : ''
        })
      })
    }
@@ -205,8 +213,71 @@
    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {backgroundImage: val}})
  }

  submitBorder = (val, type) => {
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {[type]: val}})
  }

  changeBorderRadius = (val) => {
    const { card } = this.state
    let value = parseFloat(val)

    if (isNaN(value) || value < 0 || value > 500) return

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {borderRadius: `${value}px`}})
  }

  changeMarginTop = (e) => {
    let val = e.target.value
    let _val = parseInt(val)

    this.setState({
      marginTop: val
    })

    if (isNaN(_val)) return

    this.setState({
      marginTopVal: _val
    })
  }

  submitMarginTop = (val) => {
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {marginTop: val}})
    this.setState({
      marginTop: val
    })
  }

  changeMarginBottom = (e) => {
    let val = e.target.value
    let _val = parseInt(val)

    this.setState({
      marginBottom: val
    })

    if (isNaN(_val)) return

    this.setState({
      marginBottomVal: _val
    })
  }

  submitMarginBottom = (val) => {
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {marginBottom: val}})
    this.setState({
      marginBottom: val
    })
  }

  render () {
    const { card, fontColor, backgroundColor, backgroundImage, bgimages } = this.state
    const { card, fontColor, backgroundColor, backgroundImage, bgimages, marginTop, marginTopVal, marginBottom, marginBottomVal } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -331,15 +402,95 @@
              </Col>
            </Panel> : null}
            {card.items.includes('border') ? <Panel header="边框" key="border">
              <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} />
              <Col span={24}>
                <Form.Item
                  colon={false}
                  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')}/>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  colon={false}
                  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}/>
                </Form.Item>
              </Col>
            </Panel> : null}
            <Panel header="其他" key="3">
              其他
            </Panel>
            {card.items.includes('margin') ? <Panel header="外边距" key="margin">
              <Col span={12}>
                <Form.Item
                  colon={false}
                  label={<Icon title="上边距" type="vertical-align-top"/>}
                >
                  <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>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  colon={false}
                  label={<Icon title="下边距" type="vertical-align-bottom"/>}
                >
                  <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>
                </Form.Item>
              </Col>
            </Panel> : null}
          </Collapse> : null}
        </Form>
      </div>