import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Button } from 'antd'
|
import { FontColorsOutlined } from '@ant-design/icons'
|
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
class StyleCombControlButton extends Component {
|
static propTpyes = {
|
menu: PropTypes.any
|
}
|
|
state = {
|
label: '批量调整',
|
parent: null,
|
type: '',
|
components: []
|
}
|
|
componentDidMount () {
|
sessionStorage.setItem('style-control', 'false')
|
MKEmitter.addListener('clickComponent', this.clickComponent)
|
MKEmitter.addListener('submitCombineStyle', this.submitCombineStyle)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('clickComponent', this.clickComponent)
|
MKEmitter.removeListener('submitCombineStyle', this.submitCombineStyle)
|
}
|
|
submitCombineStyle = (style) => {
|
const { components, parent } = this.state
|
|
let keys = components.map(item => item.uuid)
|
|
MKEmitter.emit('submitComponentStyle', parent.uuid, keys, style)
|
|
setTimeout(() => {
|
keys.forEach(key => {
|
document.getElementById(key).classList.add('selected-control-element')
|
})
|
}, 100)
|
}
|
|
clickComponent = (card, _p, _type) => {
|
const { menu } = this.props
|
const { parent, type } = this.state
|
let components = fromJS(this.state.components).toJS()
|
|
if (!parent) {
|
let _parent = null
|
|
if (_type === 'propcard') {
|
_parent = _p
|
MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background', 'shadow'])
|
} else if (_type === 'cardcell') {
|
_parent = _p
|
MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background', 'font'])
|
} else {
|
let getParents = (box) => {
|
box.components.forEach(item => {
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
if (tab.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
|
_parent = tab
|
} else {
|
getParents(tab)
|
}
|
})
|
} else if (item.type === 'group') {
|
if (item.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
|
_parent = item
|
}
|
}
|
})
|
}
|
|
if (menu.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
|
_parent = menu
|
} else {
|
getParents(menu)
|
}
|
|
MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background'])
|
}
|
|
document.getElementById(card.uuid).classList.add('selected-control-element')
|
|
sessionStorage.setItem('style-control', (_type ? _type : 'component'))
|
|
this.setState({
|
type: _type ? _type : 'component',
|
parent: _parent,
|
components: [card]
|
})
|
} else {
|
if (components.findIndex(cell => cell.uuid === card.uuid) > -1) {
|
components = components.filter(cell => cell.uuid !== card.uuid)
|
document.getElementById(card.uuid).classList.remove('selected-control-element')
|
} else if (type !== 'propcard' && parent.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
|
components.push(card)
|
document.getElementById(card.uuid).classList.add('selected-control-element')
|
} else if (type === 'propcard' && parent.subcards.findIndex(cell => cell.uuid === card.uuid) > -1) {
|
components.push(card)
|
document.getElementById(card.uuid).classList.add('selected-control-element')
|
}
|
|
if (components.length === 0) {
|
MKEmitter.emit('closeCombineStyle')
|
sessionStorage.setItem('style-control', 'true')
|
}
|
|
this.setState({
|
components: components,
|
parent: components.length ? parent : null
|
})
|
}
|
}
|
|
triggerStyleChange = () => {
|
const { label, components } = this.state
|
|
if (label === '批量调整') {
|
document.body.className = 'style-control'
|
sessionStorage.setItem('style-control', 'true')
|
this.setState({label: '退出'})
|
} else {
|
document.body.className = ''
|
sessionStorage.setItem('style-control', 'false')
|
|
components.forEach(item => {
|
document.getElementById(item.uuid).classList.remove('selected-control-element')
|
})
|
|
MKEmitter.emit('closeCombineStyle')
|
|
this.setState({label: '批量调整', parent: null, components: []})
|
}
|
}
|
|
render() {
|
const { label } = this.state
|
return (
|
<Button className="style-control-button" title="批量调整样式" onClick={this.triggerStyleChange}><FontColorsOutlined/> {label}</Button>
|
)
|
}
|
}
|
|
export default StyleCombControlButton
|
