2020-09-26

king

2020-09-26 ab60d53b67f802878662aaa5a5b52580cca421b8

 src/mob/colorsketch/index.jsx

@@ -16,28 +16,30 @@
  }

  handleChange = (color) => {
    this.setState({ color: color.rgb })
    this.props.onChange(`rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`)
    let _color = `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`
    
    this.setState({ color: _color }, () => {
      this.props.onChange(_color)
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.state.color) {
      this.setState({ color: nextProps.value })
    }
  }

  render() {
    const { color } = this.state

    let _color = ''
    if (typeof(color) === 'string') {
      _color = color
    } else {
      _color = `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })`
    }

    return (
      <div className="color-sketch-block">
        <Popover content={
          <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
          <SketchPicker color={ color } onChange={ this.handleChange } />
        } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
          <div className="color-sketch-block-inner" style={ {background: _color} }></div>
          <div className="color-sketch-block-inner" style={ {background: color} }></div>
        </Popover>
        <div className="color-sketch-value">{_color}</div>
        <div className="color-sketch-value">{color}</div>
      </div>
    )
  }