2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

 src/components/mkIcon/index.jsx

@@ -1,12 +1,16 @@
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 } from 'antd'
import { CloseCircleFilled } from '@ant-design/icons'

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

class MkIcon extends Component {
// ['direction', 'edit', 'normal', 'data', 'hint']

class MkEditIcon extends Component {
  static propTpyes = {
    onChange: PropTypes.func
  }
@@ -14,17 +18,28 @@
  state = {
    selectIcon: '',
    allowClear: false,
    icons: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.trademark, ...minkeIconSystem.data, ...minkeIconSystem.hint],
    icons: [],
    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})
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -41,9 +56,9 @@

    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.setState({visible: true})} type="swap"/>
        {allowClear && selectIcon ? <CloseCircleFilled className="close" onClick={() => this.checkIcon('')}/> : null}
        <Modal
          wrapClassName="popview-modal mk-icon-wrap"
          title={'图标选择'}
@@ -58,7 +73,7 @@
        >
          <Row>
            {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
              <Icon onClick={() => this.checkIcon(icon)} type={icon} />
              <MkIcon onClick={() => this.checkIcon(icon)} type={icon} />
            </Col>)}
          </Row>
        </Modal>
@@ -67,4 +82,4 @@
  }
}

export default MkIcon
export default MkEditIcon