2023-08-17

king

2023-08-17 c7aece35a62b6e91fd98a625bf0e53f64bfbd18d

 src/components/mkIcon/index.jsx

@@ -1,12 +1,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Modal, Icon, Row, Col, Button } from 'antd'
import { Modal, Row, Col, Button, Tabs, notification } from 'antd'
import { CloseCircleFilled, RedoOutlined } from '@ant-design/icons'

import Api from '@/api'
import { minkeIconSystem } from '@/utils/option.js'
import MkIcon from '@/components/mk-icon'
import './index.scss'

class MkIcon extends Component {
const { TabPane } = Tabs
// ['direction', 'edit', 'normal', 'data', 'hint']

class MkEditIcon extends Component {
  static propTpyes = {
    onChange: PropTypes.func
  }
@@ -14,17 +20,39 @@
  state = {
    selectIcon: '',
    allowClear: false,
    icons: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint],
    icons: [],
    cusicons: [],
    visible: false
  }

  UNSAFE_componentWillMount () {
    const { options } = this.props
    let val = ''
    if (this.props['data-__meta']) {
      val = this.props['data-__meta'].initialValue || ''
    }

    this.setState({selectIcon: val, allowClear: this.props.allowClear === true})
    let icons = []

    if (options) {
      options.forEach(item => {
        icons.push(...minkeIconSystem[item])
      })
    } else {
      icons = [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint]
    }

    this.setState({selectIcon: val, allowClear: this.props.allowClear === true, icons})
  }

  componentDidMount() {
    if (!window.GLOB.designView) {
      if (sessionStorage.getItem('systemIcons')) {
        this.setState({cusicons: JSON.parse(sessionStorage.getItem('systemIcons'))})
      } else {
        this.getIcons()
      }
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -36,17 +64,55 @@
    this.props.onChange(val)
  }

  getIcons = () => {
    Api.getCloudConfig({ func: 's_get_icons' }).then(res => {
      if (!res.status) {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
        sessionStorage.setItem('systemIcons', JSON.stringify([]))
        return
      } else if (!res.data) {
        return
      }

      let icons = res.data.map(item => {
        item.icon_svg = window.decodeURIComponent(window.atob(item.icon_svg))
        return item
      })

      sessionStorage.setItem('systemIcons', JSON.stringify(icons))

      this.setState({cusicons: icons})
    })
  }

  trigger = () => {
    const { selectIcon, cusicons } = this.state

    this.setState({visible: true})

    if (cusicons.length > 0 && selectIcon && /<svg/.test(selectIcon)) {
      setTimeout(() => {
        let node = document.getElementById('mk-custom-tab')
        node && node.click()
      }, 200)
    }
  }

  render() {
    const { selectIcon, visible, icons, allowClear } = this.state
    const { selectIcon, visible, icons, allowClear, cusicons } = this.state

    return (
      <div className="mk-icon-box">
        {selectIcon ? <Icon type={selectIcon}/> : <Icon style={{opacity: 0}} type="plus"/>}
        <Icon className="trigger" onClick={() => this.setState({visible: true})} type="swap"/>
        {allowClear && selectIcon ? <Icon className="close" onClick={() => this.checkIcon('')} theme="filled" type="close-circle"/> : null}
        {selectIcon ? <MkIcon type={selectIcon}/> : <span style={{color: '#bcbcbc'}}>请选择</span>}
        <MkIcon className="trigger" onClick={this.trigger} type="swap"/>
        {allowClear && selectIcon ? <CloseCircleFilled className="close" onClick={() => this.checkIcon('')}/> : null}
        <Modal
          wrapClassName="popview-modal mk-icon-wrap"
          title={'图标选择'}
          wrapClassName="mk-pop-modal mk-icon-wrap"
          // title={'图标选择'}
          visible={visible}
          width={800}
          maskClosable={false}
@@ -56,15 +122,31 @@
          ]}
          destroyOnClose
        >
          <Row>
            {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
              <Icon onClick={() => this.checkIcon(icon)} type={icon} />
            </Col>)}
          </Row>
          <Tabs className={cusicons.length > 0 ? 'dubble-tabs' : ''}>
            <TabPane tab="系统" key="setting">
              <Row>
                {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
                  <MkIcon onClick={() => this.checkIcon(icon)} type={icon} />
                </Col>)}
              </Row>
            </TabPane>
            <TabPane tab={
              <span className="tab-control" id="mk-custom-tab">
                <RedoOutlined onClick={(e) => {this.getIcons()}}/>
                自定义
              </span>
            } key="scripts">
              <Row>
                {cusicons.map(icon => <Col className={icon.icon_svg === selectIcon ? 'active' : ''} key={icon.id} span={4} onClick={() => this.checkIcon(icon.icon_svg)}>
                  <MkIcon type={icon.icon_svg} />
                </Col>)}
              </Row>
            </TabPane>
          </Tabs>
        </Modal>
      </div>
    )
  }
}

export default MkIcon
export default MkEditIcon