2024-03-02

king

2024-03-02 f0616c0783c54043be7da18fc185527c93b95696

 src/mob/colorsketch/index.jsx

@@ -1,16 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { SketchPicker } from 'react-color'
import { Popover } from 'antd'
import { CloseCircleFilled } from '@ant-design/icons'

import Api from '@/api'
import './index.scss'

const presetColors = [
  '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14', '#a0d911', '#52c41a', '#13c2c2', '#1890ff', '#2f54eb', '#722ed1',
  '#eb2f96', '#595959', '#ffa39e', '#ffbb96', '#ffd591', '#ffe58f', '#fffb8f', '#eaff8f', '#b7eb8f', '#87e8de', '#91d5ff',
  '#adc6ff', '#d3adf7', '#ffadd2', '#d9d9d9', '#000000', '#ffffff', 'transparent'
  '#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]
let loading = false

class ColorSketch extends Component {
  static propTpyes = {
@@ -20,10 +23,13 @@
  }
  state = {
    color: '',
    initVal: '',
    colors: [],
    allowClear: false
  }

  UNSAFE_componentWillMount () {
    const { defaultValue, value } = this.props
    const { defaultValue, value, allowClear } = this.props
    let initVal = ''

    if (this.props['data-__meta']) {
@@ -33,15 +39,89 @@
    } else if (value) {
      initVal = value
    }
    
    this.setState({color: initVal})

    this.setState({color: initVal, initVal, allowClear: allowClear === true}, () => {
      this.checkcolors()
    })
  }

  checkcolors = () => {
    let app_colors = window.GLOB.app_colors

    if (app_colors) {
      this.getColors(app_colors)
    } else if (sessionStorage.getItem('app_colors')) {
      let app_colors = JSON.parse(sessionStorage.getItem('app_colors'))
      window.GLOB.app_colors = app_colors
      this.getColors(app_colors)
    } else {
      if (loading) {
        this.getColors([])
      } else {
        loading = true
        let param = {
          func: 's_url_db_adduptdel',
          PageIndex: 0,  // 0 代表全部
          PageSize: 0,   // 0 代表全部
          typecharone: 'color',
          type: 'search'
        }
  
        Api.getCloudConfig(param).then(res => {
          loading = false
          window.GLOB.app_colors = res.data || []
          sessionStorage.setItem('app_colors', JSON.stringify(res.data || []))
          this.getColors(res.data || [])
        })
      }
    }
  }

  getColors = (appColors) => {
    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 = []
    }

    appColors.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({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)
      this.props.onChange && this.props.onChange(_color, _hex)
    })
  }

  clear = () => {
    this.setState({ color: '' }, () => {
      this.props.onChange && this.props.onChange('')
    })
  }

@@ -51,16 +131,45 @@
    }
  }

  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 } = this.state
    const { color, allowClear, colors } = this.state
    return (
      <div className="color-sketch-block">
        <Popover content={
          <SketchPicker color={ color } presetColors={presetColors} onChange={ this.handleChange } />
        } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
          <div className="color-sketch-block-inner" style={ {background: color} }></div>
          <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}</div>
        <div className="color-sketch-value">{color || <span style={{color: '#ff4d4f'}}>无</span>}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div>
      </div>
    )
  }