import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { SketchPicker } from 'react-color'
|
import { Popover } from 'antd'
|
import { CloseCircleFilled } from '@ant-design/icons'
|
|
import './index.scss'
|
|
const presetColors = [
|
'#1890ff', '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14', '#a0d911', '#52c41a', '#13c2c2', '#2f54eb', '#722ed1',
|
'#eb2f96', '#aeb303', '#c32539', '#1d3661', '#ffd591', '#ffe58f', '#fffb8f', '#eaff8f', '#b7eb8f', '#87e8de', '#91d5ff',
|
'#adc6ff', '#EBE9E9', '#d9d9d9', 'rgba(0, 0, 0, 0.65)', 'rgba(0, 0, 0, 0.85)', '#000000', '#ffffff', 'transparent'
|
]
|
const _href = window.location.href.split('#')[0]
|
|
class ColorSketch extends Component {
|
static propTpyes = {
|
defaultValue: PropTypes.any,
|
value: PropTypes.any,
|
onChange: PropTypes.func
|
}
|
state = {
|
color: '',
|
initVal: '',
|
colors: [],
|
allowClear: false
|
}
|
|
UNSAFE_componentWillMount () {
|
const { defaultValue, value, allowClear } = this.props
|
let initVal = ''
|
|
if (this.props['data-__meta']) {
|
initVal = this.props['data-__meta'].initialValue
|
} else if (defaultValue) {
|
initVal = defaultValue
|
} else if (value) {
|
initVal = value
|
}
|
|
let _colors = sessionStorage.getItem('app_colors')
|
let colors = JSON.parse(JSON.stringify(presetColors))
|
let normal_colors = localStorage.getItem(_href + 'normal_colors')
|
|
if (normal_colors) {
|
try {
|
normal_colors = JSON.parse(normal_colors)
|
} catch (e) {
|
normal_colors = []
|
}
|
|
normal_colors.forEach(item => {
|
colors.push({color: item, title: '常用色：' + item})
|
})
|
} else {
|
normal_colors = []
|
}
|
|
if (_colors) {
|
try {
|
_colors = JSON.parse(_colors)
|
} catch (e) {
|
_colors = []
|
}
|
|
_colors.forEach(item => {
|
if (normal_colors.includes(item.linkurl)) return
|
|
colors.push({color: item.linkurl, title: '系统色：' + item.linkurl})
|
})
|
}
|
|
if (colors.length < 40) {
|
for (let i = colors.length; i < 40; i++) {
|
colors.push({color: 'transparent', title: '' + i})
|
}
|
}
|
|
this.setState({color: initVal, initVal, allowClear: allowClear === true, colors})
|
}
|
|
handleChange = (color) => {
|
let _color = `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`
|
let _hex = color.hex === 'transparent' ? '#ffffff' : color.hex
|
|
this.setState({ color: _color }, () => {
|
this.props.onChange && this.props.onChange(_color, _hex)
|
})
|
}
|
|
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 })
|
}
|
}
|
|
onVisibleChange = (status) => {
|
const { initVal, color } = this.state
|
|
if (!status && color && color !== initVal && color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent' && !/rgba\(\d+,\s*\d+,\s*\d+,\s*0\)/.test(color)) {
|
let normal_colors = localStorage.getItem(_href + 'normal_colors')
|
|
if (normal_colors) {
|
try {
|
normal_colors = JSON.parse(normal_colors)
|
} catch (e) {
|
normal_colors = []
|
}
|
} else {
|
normal_colors = []
|
}
|
|
normal_colors.unshift(color)
|
normal_colors = Array.from(new Set(normal_colors))
|
|
if (normal_colors.length > 10) {
|
normal_colors.length = 10
|
}
|
|
localStorage.setItem(_href + 'normal_colors', JSON.stringify(normal_colors))
|
}
|
}
|
|
|
|
render() {
|
const { color, allowClear, colors } = this.state
|
return (
|
<div className="color-sketch-block">
|
<Popover content={
|
<SketchPicker color={ color } presetColors={colors} onChange={ this.handleChange } />
|
} overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click" onVisibleChange={this.onVisibleChange}>
|
<div className="color-sketch-block-box">
|
<div className="color-sketch-block-inner" style={ {background: color} }></div>
|
</div>
|
</Popover>
|
<div className="color-sketch-value">{color || <span style={{color: '#ff4d4f'}}>无</span>}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div>
|
</div>
|
)
|
}
|
}
|
|
export default ColorSketch
|
