import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { connect } from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import { Tabs, Icon, Popover, Modal } from 'antd'
|
|
import MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import './index.scss'
|
|
const SettingComponent = asyncIconComponent(() => import('../tabsetting'))
|
const TabLabelComponent = asyncComponent(() => import('../tablabelform'))
|
const TabComponents = asyncComponent(() => import('../tabcomponents'))
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
|
class antvTabs extends Component {
|
static propTpyes = {
|
tabs: PropTypes.object,
|
deletecomponent: PropTypes.func,
|
updateConfig: PropTypes.func,
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
tabs: null,
|
editab: null,
|
labelvisible: false
|
}
|
|
UNSAFE_componentWillMount () {
|
const { tabs } = this.props
|
|
if (tabs.isNew) {
|
let _tabs = {
|
uuid: tabs.uuid,
|
type: tabs.type,
|
floor: tabs.floor,
|
tabId: tabs.tabId || '',
|
parentId: tabs.parentId || '',
|
subtype: tabs.subtype,
|
width: 24,
|
name: tabs.name,
|
setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name},
|
style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
|
subtabs: [
|
{ uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 1', icon: '', components: [] },
|
{ uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 2', icon: '', components: [] },
|
{ uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 3', icon: '', components: [] }
|
]
|
}
|
this.setState({
|
tabs: _tabs
|
})
|
this.props.updateConfig(_tabs)
|
} else {
|
this.setState({
|
tabs: fromJS(tabs).toJS()
|
})
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('tabsChange', this.handleTabsChange)
|
MKEmitter.addListener('submitStyle', this.getStyle)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
|
MKEmitter.addListener('submitStyle', this.getStyle)
|
}
|
|
changeStyle = () => {
|
const { tabs } = this.state
|
|
MKEmitter.emit('changeStyle', [tabs.uuid], ['background', 'border', 'padding', 'margin'], tabs.style)
|
}
|
|
getStyle = (comIds, style) => {
|
const { tabs } = this.state
|
|
if (comIds.length !== 1 || comIds[0] !== tabs.uuid) return
|
|
let _card = {...tabs, style}
|
|
this.setState({
|
tabs: _card
|
})
|
|
this.props.updateConfig(_card)
|
}
|
|
handleTabsChange = (parentId) => {
|
const { tabs } = this.state
|
|
if (parentId === tabs.parentId) {
|
MKEmitter.emit('tabsChange', tabs.uuid)
|
}
|
}
|
|
updateComponent = (component) => {
|
const { tabs } = this.state
|
|
if (!is(fromJS(tabs.setting), fromJS(component.setting))) {
|
// 注册事件-标签变化，通知标签内元素
|
MKEmitter.emit('tabsChange', tabs.uuid)
|
}
|
|
component.width = component.setting.width
|
component.name = component.setting.name
|
|
this.setState({
|
tabs: component
|
})
|
this.props.updateConfig(component)
|
}
|
|
updateTabComponent = (tab) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
|
tabs.subtabs = tabs.subtabs.map(t => {
|
if (t.uuid === tab.uuid) {
|
return tab
|
} else {
|
return t
|
}
|
})
|
|
this.setState({tabs})
|
this.props.updateConfig(tabs)
|
}
|
|
tabAdd = (e) => {
|
const { tabs } = this.state
|
|
e.stopPropagation()
|
|
this.setState({
|
editab: {
|
uuid: '',
|
parentId: tabs.uuid,
|
floor: tabs.floor,
|
label: '',
|
icon: '',
|
components: []
|
},
|
labelvisible: true
|
})
|
}
|
|
editTab = (tab) => {
|
this.setState({
|
editab: tab,
|
labelvisible: true
|
})
|
}
|
|
tabLabelSubmit = () => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
let editab = fromJS(this.state.editab).toJS()
|
|
this.tabLabelRef.handleConfirm().then(res => {
|
editab.label = res.label
|
editab.icon = res.icon
|
|
if (editab.uuid) {
|
tabs.subtabs = tabs.subtabs.map(t => {
|
if (t.uuid === editab.uuid) {
|
return editab
|
} else {
|
return t
|
}
|
})
|
} else {
|
editab.uuid = Utils.getuuid()
|
tabs.subtabs.push(editab)
|
}
|
|
this.setState({
|
editab: null,
|
labelvisible: false,
|
tabs
|
})
|
this.props.updateConfig(tabs)
|
})
|
}
|
|
delTab = (tab) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
const _this = this
|
|
tabs.subtabs = tabs.subtabs.filter(t => t.uuid !== tab.uuid)
|
|
confirm({
|
title: '确定删除标签？',
|
content: '',
|
onOk() {
|
_this.setState({tabs})
|
_this.props.updateConfig(tabs)
|
},
|
onCancel() {}
|
})
|
}
|
|
moveSwitch = (index, index1) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
tabs.subtabs[index] = tabs.subtabs.splice(index1, 1, tabs.subtabs[index])[0]
|
|
this.setState({tabs})
|
this.props.updateConfig(tabs)
|
}
|
|
render() {
|
const { tabs, dict, labelvisible, editab } = this.state
|
|
return (
|
<div className="menu-tabs-edit-box" style={tabs.style}>
|
<Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}>
|
{tabs.subtabs.map((tab, index) => (
|
<TabPane tab={
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<Icon className="edit" title="edit" type="edit" onClick={() => this.editTab(tab)} />
|
{index !== 0 ? <Icon className="edit" type="arrow-left" onClick={() => this.moveSwitch(index, index - 1)} /> : null}
|
{(index + 1) !== tabs.subtabs.length ? <Icon className="edit" type="arrow-right" onClick={() => this.moveSwitch(index, index + 1)} /> : null}
|
<Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} />
|
</div>
|
} trigger="hover">
|
<span>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span>
|
</Popover>
|
} key={tab.uuid}>
|
<TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} />
|
</TabPane>
|
))}
|
<TabPane disabled tab={
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<Icon className="plus" title="添加标签" type="plus" onClick={this.tabAdd} />
|
<SettingComponent config={tabs} updateConfig={this.updateComponent} />
|
<Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
|
<Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(tabs.uuid)} />
|
</div>
|
} trigger="hover">
|
<Icon type="tool" />
|
</Popover>
|
} key="tool">
|
</TabPane>
|
</Tabs>
|
<Modal
|
wrapClassName="popview-modal"
|
title={'标签编辑'}
|
visible={labelvisible}
|
width={600}
|
maskClosable={false}
|
okText={dict['model.submit']}
|
onOk={this.tabLabelSubmit}
|
onCancel={() => { this.setState({ labelvisible: false }) }}
|
destroyOnClose
|
>
|
<TabLabelComponent
|
dict={dict}
|
tab={editab}
|
inputSubmit={this.tabLabelSubmit}
|
wrappedComponentRef={(inst) => this.tabLabelRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
menu: state.customMenu
|
}
|
}
|
|
const mapDispatchToProps = () => {
|
return {}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(antvTabs)
|
