2021-06-05

king

2021-06-05 c6f7462d80ab626174329b69045fb7e5704c0683

 src/mob/colorsketch/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { SketchPicker } from 'react-color'
import { Popover } from 'antd'
import { Popover, Icon } from 'antd'

import './index.scss'

@@ -20,10 +20,11 @@
  }
  state = {
    color: '',
    allowClear: false
  }

  UNSAFE_componentWillMount () {
    const { defaultValue, value } = this.props
    const { defaultValue, value, allowClear } = this.props
    let initVal = ''

    if (this.props['data-__meta']) {
@@ -34,7 +35,7 @@
      initVal = value
    }
    
    this.setState({color: initVal})
    this.setState({color: initVal, allowClear: allowClear === true})
  }

  handleChange = (color) => {
@@ -45,6 +46,12 @@
    })
  }

  clear = () => {
    this.setState({ color: '' }, () => {
      this.props.onChange && this.props.onChange('')
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== undefined && nextProps.value !== this.state.color) {
      this.setState({ color: nextProps.value })
@@ -52,7 +59,7 @@
  }

  render() {
    const { color } = this.state
    const { color, allowClear } = this.state
    return (
      <div className="color-sketch-block">
        <Popover content={
@@ -62,7 +69,7 @@
            <div className="color-sketch-block-inner" style={ {background: color} }></div>
          </div>
        </Popover>
        <div className="color-sketch-value">{color}</div>
        <div className="color-sketch-value">{color}{allowClear && color ? <Icon onClick={this.clear} type="close"/> : null}</div>
      </div>
    )
  }