all files / packages/context-menu/ ContextMenu.js

0% Statements 0/27
0% Branches 0/4
0% Functions 0/8
0% Lines 0/27
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80                                                                                                                                                               
import { Toolbox } from '../../ui'
 
class ContextMenu extends Toolbox {
 
  didMount() {
    super.didMount()
    if (!this.context.scrollPane) {
      throw new Error('Requires a scrollPane context')
    }
    this.context.scrollPane.on('context-menu:opened', this._onContextMenuOpened, this)
  }
 
  dispose() {
    super.dispose()
    this.context.scrollPane.off(this)
  }
 
  /*
    Override with custom rendering
  */
  render($$) {
    let el = $$('div').addClass('sc-context-menu sm-hidden')
    let activeToolGroups = this.state.activeToolGroups
 
    activeToolGroups.forEach((toolGroup) => {
      let toolGroupProps = Object.assign({}, toolGroup, {
        toolStyle: this.getToolStyle(),
        showLabels: true,
        // showHints: true
      })
 
      if (toolGroupProps.tools.size > 0) {
        let toolGroupEl = $$(toolGroup.Class, toolGroupProps)
        el.append(toolGroupEl)
      }
    })
    return el
  }
 
  getActiveToolGroupNames() {
    return ['context-menu-primary', 'context-menu-document']
  }
 
  showDisabled() {
    return true
  }
 
  /*
    Override if you just want to use a different style
  */
  getToolStyle() {
    return 'plain-dark'
  }
 
  hide() {
    this.el.addClass('sm-hidden')
  }
 
  /*
    Positions the content menu relative to the scrollPane
  */
  _onContextMenuOpened(hints) {
    let mouseBounds = hints.mouseBounds
    this.el.removeClass('sm-hidden')
    let contextMenuWidth = this.el.htmlProp('offsetWidth')
 
    // By default, context menu are aligned left bottom to the mouse coordinate clicked
    this.el.css('top', mouseBounds.top)
    let leftPos = mouseBounds.left
    // Must not exceed left bound
    leftPos = Math.max(leftPos, 0)
    // Must not exceed right bound
    let maxLeftPos = mouseBounds.left + mouseBounds.right - contextMenuWidth
    leftPos = Math.min(leftPos, maxLeftPos)
    this.el.css('left', leftPos)
  }
}
 
export default ContextMenu