2020-07-17

king

2020-07-17 e70553694d5ab6869a85a0db60bc14942a06bc15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React, {Component} from 'react'
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { SketchPicker } from 'react-color'
import {Popover } from 'antd'
 
import './index.scss'
 
class ColorSketch extends Component {
  static propTpyes = {
    color: PropTypes.any,
    changeColor: PropTypes.func
  }
  state = {
    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">
          <div className="color-sketch-block-inner" style={ {background: _color} }></div>
        </div>
      </Popover>
    )
  }
}
 
export default ColorSketch