2023-04-05

king

2023-04-05 4c538565bd930279c9e32234617aa25804b19dee

 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>