From c6f7462d80ab626174329b69045fb7e5704c0683 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 05 六月 2021 22:44:17 +0800
Subject: [PATCH] 2021-06-05
---
src/mob/colorsketch/index.jsx | 17 ++++++++++++-----
1 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx
index 753a443..7eb42c9 100644
--- a/src/mob/colorsketch/index.jsx
+++ b/src/mob/colorsketch/index.jsx
@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { SketchPicker } from 'react-color'
-import { Popover } from 'antd'
+import { Popover, Icon } from 'antd'
import './index.scss'
@@ -20,10 +20,11 @@
}
state = {
color: '',
+ allowClear: false
}
UNSAFE_componentWillMount () {
- const { defaultValue, value } = this.props
+ const { defaultValue, value, allowClear } = this.props
let initVal = ''
if (this.props['data-__meta']) {
@@ -34,7 +35,7 @@
initVal = value
}
- this.setState({color: initVal})
+ this.setState({color: initVal, allowClear: allowClear === true})
}
handleChange = (color) => {
@@ -45,6 +46,12 @@
})
}
+ clear = () => {
+ this.setState({ color: '' }, () => {
+ this.props.onChange && this.props.onChange('')
+ })
+ }
+
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.value !== undefined && nextProps.value !== this.state.color) {
this.setState({ color: nextProps.value })
@@ -52,7 +59,7 @@
}
render() {
- const { color } = this.state
+ const { color, allowClear } = this.state
return (
<div className="color-sketch-block">
<Popover content={
@@ -62,7 +69,7 @@
<div className="color-sketch-block-inner" style={ {background: color} }></div>
</div>
</Popover>
- <div className="color-sketch-value">{color}</div>
+ <div className="color-sketch-value">{color}{allowClear && color ? <Icon onClick={this.clear} type="close"/> : null}</div>
</div>
)
}
--
Gitblit v1.8.0