From e0e5aa28cbd509579c7a83672a93241c9a5ed7e9 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 06 七月 2020 15:09:49 +0800
Subject: [PATCH] 2020-07-06
---
src/mob/colorsketch/index.jsx | 32 ++++++++++++++++----------------
1 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx
index 7f02cc2..42a3b13 100644
--- a/src/mob/colorsketch/index.jsx
+++ b/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>
)
--
Gitblit v1.8.0