2023-06-14

king

2023-06-14 08cce3334a2dc81d690b518136b0aaea64e48b0b

 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 => {
        colors.push({color: item, title: '常用色：' + item})
      })
    } else {
      normal_colors = []
    }

    if (_colors) {
      try {
@@ -47,13 +64,19 @@
      }
      
      _colors.forEach(item => {
        if (!colors.includes(item.linkurl)) {
          colors.push(item.linkurl)
        }
        if (normal_colors.includes(item.linkurl)) return
        
        colors.push({color: item.linkurl, title: '系统色：' + item.linkurl})
      })
    }

    this.setState({color: initVal, allowClear: allowClear === true, colors})
    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) => {
@@ -77,18 +100,47 @@
    }
  }

  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">
        } 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}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div>
        <div className="color-sketch-value">{color || <span style={{color: '#ff4d4f'}}>无</span>}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div>
      </div>
    )
  }