all files / packages/toolbar/ ToolDropdown.js

0% Statements 0/19
0% Branches 0/2
0% Functions 0/4
0% Lines 0/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54                                                                                                           
import { Component } from '../../ui'
import Button from '../button/Button'
 
class ToolDropdown extends Component {
 
  render($$) {
    let tools = this.props.tools
    let commandStates = this.props.commandStates
    let el = $$('div').addClass('sc-tool-dropdown')
    el.addClass('sm-target-'+this.props.name)
    el.append(
      this.renderButton($$)
    )
    if (this.state.open) {
      let optionEls = []
      tools.forEach(function(tool, name) {
        let toolProps = Object.assign({}, commandStates[name])
        toolProps.name = name
        toolProps.label = name
        toolProps.style = 'plain-dark' // plain button style on dark bg will be used
        optionEls.push($$(tool.Class, toolProps))
      })
      el.append(
        $$('div').addClass('se-options').append(
          $$('div').addClass('se-arrow'),
          $$('div').addClass('se-content').append(
            optionEls
          )
        )
      )
    }
    return el
  }
 
  renderButton($$) {
    let btn = $$(Button, {
      label: this.props.name,
      active: this.state.open,
      disabled: this.props.disabled,
      style: this.props.style
    }).on('click', this.onClick)
    return btn
  }
 
  onClick() {
    let open = !this.state.open
    this.setState({
      open: open
    })
  }
}
 
export default ToolDropdown