2020-07-06

king

2020-07-06 e0e5aa28cbd509579c7a83672a93241c9a5ed7e9

 src/mob/colorsketch/index.jsx

@@ -8,34 +8,34 @@

class ColorSketch extends Component {
  static propTpyes = {
    card: PropTypes.object,
    onDoubleClick: PropTypes.func
    color: PropTypes.any,
    changeColor: PropTypes.func
  }
  state = {
    visible: false,
    color: '#f8e71c',
  };

  handleClick = () => {
    this.setState({ visible: !this.state.visible })
  };

  handleClose = () => {
    this.setState({ visible: false })
  };
    color: this.props.color,
  }

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

  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 (
      <Popover content={
        <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
      } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
        <div className="color-sketch-block" onClick={ this.handleClick }>
          <div className="color-sketch-block-inner" style={ {background: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })`} }></div>
        <div className="color-sketch-block">
          <div className="color-sketch-block-inner" style={ {background: _color} }></div>
        </div>
      </Popover>
    )