From 4c538565bd930279c9e32234617aa25804b19dee Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 05 四月 2023 13:15:40 +0800
Subject: [PATCH] 2023-04-05
---
src/mob/colorsketch/index.jsx | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 54 insertions(+), 3 deletions(-)
diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx
index 6f1ba7a..58c6d9b 100644
--- a/src/mob/colorsketch/index.jsx
+++ b/src/mob/colorsketch/index.jsx
@@ -9,8 +9,9 @@
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', '#d3adf7', '#EBE9E9', '#d9d9d9', '#434343', '#000000', '#ffffff', 'transparent'
+ '#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 = {
@@ -20,6 +21,7 @@
}
state = {
color: '',
+ initVal: '',
colors: [],
allowClear: false
}
@@ -38,6 +40,21 @@
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 => {
+ if (!colors.includes(item)) {
+ colors.push(item)
+ }
+ })
+ }
if (_colors) {
try {
@@ -53,7 +70,13 @@
})
}
- this.setState({color: initVal, allowClear: allowClear === true, colors})
+ if (colors.length < 40) {
+ for (let i = colors.length; i < 40; i++) {
+ colors.push('transparent')
+ }
+ }
+
+ this.setState({color: initVal, initVal, allowClear: allowClear === true, colors})
}
handleChange = (color) => {
@@ -77,13 +100,41 @@
}
}
+ onVisibleChange = (status) => {
+ const { initVal, color } = this.state
+
+ if (!status && color && color !== initVal) {
+ 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)
+
+ 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">
+ } 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>
--
Gitblit v1.8.0