2021-06-18

king

2021-06-18 bb47f06e3c5eaf568aaecf870736787373ce73aa

 src/menu/stylecombcontrolbutton/index.jsx

@@ -12,12 +12,14 @@
  }

  state = {
    label: '调整',
    label: '批量调整',
    parent: null,
    type: '',
    components: []
  }

  componentDidMount () {
    sessionStorage.setItem('style-control', 'false')
    MKEmitter.addListener('clickComponent', this.clickComponent)
    MKEmitter.addListener('submitCombineStyle', this.submitCombineStyle)
  }
@@ -34,50 +36,67 @@
  }

  submitCombineStyle = (style) => {
    const { components } = this.state
    const { components, parent } = this.state

    components.forEach((item, i) => {
      setTimeout(() => {
        MKEmitter.emit('submitStyle', [item.uuid], {...item.style, ...style})
      }, i * 5)
    })
    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) => {
  clickComponent = (card, _p, _type) => {
    const { menu } = this.props
    const { parent } = this.state
    const { parent, type } = this.state
    let components = fromJS(this.state.components).toJS()

    if (!parent) {
      let _parent = null
      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
      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 {
        getParents(menu)
        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')
      MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background'])

      sessionStorage.setItem('style-control', (_type ? _type : 'component'))

      this.setState({
        type: _type ? _type : 'component',
        parent: _parent,
        components: [card]
      })
@@ -85,9 +104,17 @@
      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 (parent.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
      } 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({
@@ -98,9 +125,9 @@
  }

  triggerStyleChange = () => {
    const { label } = this.state
    const { label, components } = this.state

    if (label === '调整') {
    if (label === '批量调整') {
      document.body.className = 'style-control'
      sessionStorage.setItem('style-control', 'true')
      this.setState({label: '退出'})
@@ -108,21 +135,20 @@
      document.body.className = ''
      sessionStorage.setItem('style-control', 'false')

      let eles = document.getElementsByClassName('selected-control-element')
      for (let i = 0; i < eles.length; i++) {
        eles[i].classList.remove('selected-control-element')
      }
      components.forEach(item => {
        document.getElementById(item.uuid).classList.remove('selected-control-element')
      })

      MKEmitter.emit('closeCombineStyle')

      this.setState({label: '调整', parent: null, components: []})
      this.setState({label: '批量调整', parent: null, components: []})
    }
  }
  
  render() {
    const { label } = this.state
    return (
      <Button className="style-control-button" type="link" icon="font-colors" title="调整样式" onClick={this.triggerStyleChange}>{label}</Button>
      <Button className="style-control-button" icon="font-colors" title="批量调整样式" onClick={this.triggerStyleChange}>{label}</Button>
    )
  }
}