2023-02-01

king

2023-02-01 61ab22d7b6be46c00e8813b00b2352a52cc252f3

 src/menu/stylecontroller/styleInput/index.jsx

@@ -1,9 +1,11 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Menu, Popover, Input } from 'antd'
import { Select, Input } from 'antd'

import './index.scss'

const { Option } = Select

class StyleInput extends Component {
  static propTpyes = {
@@ -15,14 +17,14 @@

  state = {
    value: '',
    parseVal: '',
    width: '',
    unit: '',
    options: null
  }

  UNSAFE_componentWillMount () {
    const { defaultValue, value, options } = this.props
    let val = ''
    let unit = ''
    let _options = ['px']

    if (value !== undefined) {
@@ -35,13 +37,29 @@
      _options = options
    }

    let _val = parseInt(val)
    unit = _options[0]

    if (val) {
      if (val.indexOf('px') > -1) {
        unit = 'px'
      } else if (val.indexOf('%') > -1) {
        unit = '%'
      } else if (val.indexOf('vw') > -1) {
        unit = 'vw'
      } else if (val.indexOf('vh') > -1) {
        unit = 'vh'
      } else if (val === 'auto' && _options.includes('auto')) {
        unit = 'auto'
      }
    }

    let _val = parseFloat(val)

    if (isNaN(_val)) {
      _val = ''
    }

    this.setState({value: val, options: _options, parseVal: _val})
    this.setState({value: _val, options: _options, unit})
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -50,13 +68,32 @@

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== undefined && nextProps.value !== this.state.value) {
      this.setState({ value: nextProps.value })
      let val = nextProps.value
      let unit = this.state.unit

      if (val) {
        if (val.indexOf('px') > -1) {
          unit = 'px'
        } else if (val.indexOf('%') > -1) {
          unit = '%'
        } else if (val.indexOf('vw') > -1) {
          unit = 'vw'
        } else if (val.indexOf('vh') > -1) {
          unit = 'vh'
        }
      }

      let _val = parseFloat(val)

      if (isNaN(_val)) {
        _val = ''
      }

      this.setState({value: _val, unit})
    }
  }

  componentDidMount () {
    this.setState({width: (this.input.offsetWidth - 10) + 'px'})
  }
  componentDidMount () {}

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
@@ -68,49 +105,62 @@
  }

  changeValue = (e) => {
    const { unit } = this.state
    let val = e.target.value
    let _val = parseInt(val)

    if (/\d+\.$|^-$|^-0$/.test(val)) {
      this.setState({
        value: val
      })
      return
    }
    let _val = parseFloat(val)
    
    if (isNaN(_val)) {
      _val = ''
    }

    this.setState({
      value: val,
      parseVal: _val
    })

    if (!val && this.props.onChange) {
      this.props.onChange('0px')
    }
  }

  submitValue = (val) => {
    this.setState({
      value: val
      value: _val,
    })

    if (this.props.onChange) {
      this.props.onChange(val)
      if (!_val) {
        this.props.onChange('0px')
      } else {
        this.props.onChange(`${_val}${unit}`)
      }
    }
  }

  changeUnit = (val) => {
    const { value } = this.state

    this.setState({unit: val})

    if (val === 'auto') {
      this.setState({value: ''})
      this.props.onChange('auto')
    } else {
      if (value && this.props.onChange) {
        this.props.onChange(`${value}${val}`)
      }
    }
  }

  render () {
    const { value, options, parseVal, width } = this.state
    const { value, options, unit } = this.state

    return (
      <Popover placement="bottom" overlayClassName="style-input-popover" content={
        parseVal !== '' ?
        <Menu>
          {options.map(option => (
            <Menu.Item key={option} style={{width: width}} onClick={() => this.submitValue(`${parseVal}${option}`)}>{parseVal} {option}</Menu.Item>
          ))}
        </Menu> : null
      } trigger="click">
        <div ref={dom => { this.input = dom }} style={{lineHeight: '32px'}}>
          <Input value={value} onChange={this.changeValue}/>
        </div>
      </Popover>
      <div className="style-input-box">
        <Input value={value} disabled={unit === 'auto'} addonAfter={
          options.length > 1 ?
          <Select value={unit} onChange={this.changeUnit}>
            {options.map(item => <Option key={item} value={item}>{item}</Option>)}
          </Select> :
          <div className="single-unit">{unit}</div>
        } onChange={this.changeValue}/>
      </div>
    )
  }
}