import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
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: []
|
}
|
|
type = null
|
|
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) => {
|
if (this.type === 'component') {
|
Object.keys(this.components).forEach((key, i) => {
|
setTimeout(() => {
|
this.components[key](style)
|
}, i * 10)
|
})
|
} else {
|
Object.keys(this.components).forEach((key, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('submitComponentStyle', key, this.components[key], style)
|
}, i * 10)
|
})
|
}
|
}
|
|
clickComponent = (id, pid, callback) => {
|
if (!this.type) {
|
if (pid) {
|
this.type = 'cardcell'
|
} else {
|
this.type = 'component'
|
}
|
} else if ((this.type === 'cardcell' && !pid) || (this.type === 'component' && pid)) {
|
return
|
}
|
|
let plus = true
|
if (this.type === 'cardcell') {
|
if (this.components[pid]) {
|
if (this.components[pid].includes(id)) {
|
this.components[pid] = this.components[pid].filter(item => item !== id)
|
if (this.components[pid].length === 0) {
|
delete this.components[pid]
|
}
|
plus = false
|
} else {
|
this.components[pid].push(id)
|
}
|
} else {
|
this.components[pid] = [id]
|
}
|
} else {
|
if (this.components[id]) {
|
delete this.components[id]
|
plus = false
|
} else {
|
this.components[id] = callback
|
}
|
}
|
|
if (plus) {
|
document.getElementById(id).classList.add('selected-control-element')
|
MKEmitter.emit('switchMultiStyle', 'open', this.type)
|
} else {
|
document.getElementById(id).classList.remove('selected-control-element')
|
}
|
|
let length = Object.keys(this.components).length
|
|
if (length === 0) {
|
MKEmitter.emit('switchMultiStyle', 'close')
|
sessionStorage.setItem('style-control', 'true')
|
this.type = null
|
} else {
|
sessionStorage.setItem('style-control', this.type)
|
}
|
}
|
|
triggerStyleChange = () => {
|
const { label } = 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')
|
|
if (this.type === 'cardcell') {
|
Object.keys(this.components).forEach(key => {
|
this.components[key].forEach(id => {
|
document.getElementById(id).classList.remove('selected-control-element')
|
})
|
})
|
} else {
|
Object.keys(this.components).forEach(key => {
|
document.getElementById(key).classList.remove('selected-control-element')
|
})
|
}
|
|
MKEmitter.emit('switchMultiStyle', 'close')
|
this.components = {}
|
this.type = null
|
|
this.setState({label: '批量调整'})
|
}
|
}
|
|
render() {
|
const { label } = this.state
|
return (
|
<Button className="style-control-button" title="批量调整样式" onClick={this.triggerStyleChange}><FontColorsOutlined/> {label}</Button>
|
)
|
}
|
}
|
|
export default StyleCombControlButton
|
