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
|