2022-03-23

king

2022-03-23 151f90d6aa701be749ff2fc80b3599b88ece3844

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
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'
 
// ['direction', 'edit', 'normal', 'data', 'hint']
 
class MkEditIcon extends Component {
  static propTpyes = {
    onChange: PropTypes.func
  }
 
  state = {
    selectIcon: '',
    allowClear: false,
    icons: [],
    visible: false
  }
 
  UNSAFE_componentWillMount () {
    const { options } = this.props
    let val = ''
    if (this.props['data-__meta']) {
      val = this.props['data-__meta'].initialValue || ''
    }
 
    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) {
    return !is(fromJS(this.state), fromJS(nextState))
  }
 
  checkIcon = (val) => {
    this.setState({selectIcon: val, visible: false})
    this.props.onChange(val)
  }
 
  render() {
    const { selectIcon, visible, icons, allowClear } = this.state
 
    return (
      <div className="mk-icon-box">
        {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={'图标选择'}
          visible={visible}
          width={800}
          maskClosable={false}
          onCancel={() => { this.setState({ visible: false }) }}
          footer={[
            <Button key="close" onClick={() => { this.setState({ visible: false }) }}>关闭</Button>
          ]}
          destroyOnClose
        >
          <Row>
            {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
              <MkIcon onClick={() => this.checkIcon(icon)} type={icon} />
            </Col>)}
          </Row>
        </Modal>
      </div>
    )
  }
}
 
export default MkEditIcon