import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
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'
|
|
const { TabPane } = Tabs
|
// ['direction', 'edit', 'normal', 'data', 'hint']
|
|
class MkEditIcon extends Component {
|
static propTpyes = {
|
onChange: PropTypes.func
|
}
|
|
state = {
|
selectIcon: '',
|
allowClear: false,
|
icons: [],
|
cusicons: [],
|
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})
|
}
|
|
componentDidMount() {
|
if (!window.GLOB.designView) {
|
if (sessionStorage.getItem('systemIcons')) {
|
this.setState({cusicons: JSON.parse(sessionStorage.getItem('systemIcons'))})
|
} else {
|
this.getIcons()
|
}
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
checkIcon = (val) => {
|
this.setState({selectIcon: val, visible: false})
|
this.props.onChange(val)
|
}
|
|
getIcons = () => {
|
Api.getSystemConfig({ 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, cusicons } = this.state
|
|
return (
|
<div className="mk-icon-box">
|
{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="mk-pop-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
|
>
|
<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 MkEditIcon
|
