@reviewpush/rp-treeselect 0.0.0

package/src/components/Menu.vue

@@ -0,0 +1,313 @@
+<script>
+  import { MENU_BUFFER } from '../constants'
+  import { watchSize, setupResizeAndScrollEventListeners } from '../utils'
+  import Option from './Option'
+  import Tip from './Tip'
+
+  const directionMap = {
+    top: 'top',
+    bottom: 'bottom',
+    above: 'top',
+    below: 'bottom',
+  }
+
+  export default {
+    name: 'rp-treeselect--menu',
+    inject: [ 'instance' ],
+
+    computed: {
+      menuStyle() {
+        const { instance } = this
+
+        return {
+          maxHeight: instance.maxHeight + 'px',
+        }
+      },
+
+      menuContainerStyle() {
+        const { instance } = this
+
+        return {
+          zIndex: instance.appendToBody ? null : instance.zIndex,
+        }
+      },
+    },
+
+    watch: {
+      'instance.menu.isOpen'(newValue) {
+        if (newValue) {
+          // In case `openMenu()` is just called and the menu is not rendered yet.
+          this.$nextTick(this.onMenuOpen)
+        } else {
+          this.onMenuClose()
+        }
+      },
+    },
+
+    created() {
+      this.menuSizeWatcher = null
+      this.menuResizeAndScrollEventListeners = null
+    },
+
+    mounted() {
+      const { instance } = this
+
+      if (instance.menu.isOpen) this.$nextTick(this.onMenuOpen)
+    },
+
+    destroyed() {
+      this.onMenuClose()
+    },
+
+    methods: {
+      renderMenu() {
+        const { instance } = this
+
+        if (!instance.menu.isOpen) return null
+
+        return (
+          <div ref="menu" class="rp-treeselect__menu" onMousedown={instance.handleMouseDown} style={this.menuStyle}>
+            {this.renderBeforeList()}
+            {instance.async
+              ? this.renderAsyncSearchMenuInner()
+              : instance.localSearch.active
+                ? this.renderLocalSearchMenuInner()
+                : this.renderNormalMenuInner()}
+            {this.renderAfterList()}
+          </div>
+        )
+      },
+
+      renderBeforeList() {
+        const { instance } = this
+        const beforeListRenderer = instance.$scopedSlots['before-list']
+
+        return beforeListRenderer
+          ? beforeListRenderer()
+          : null
+      },
+
+      renderAfterList() {
+        const { instance } = this
+        const afterListRenderer = instance.$scopedSlots['after-list']
+
+        return afterListRenderer
+          ? afterListRenderer()
+          : null
+      },
+
+      renderNormalMenuInner() {
+        const { instance } = this
+
+        if (instance.rootOptionsStates.isLoading) {
+          return this.renderLoadingOptionsTip()
+        } else if (instance.rootOptionsStates.loadingError) {
+          return this.renderLoadingRootOptionsErrorTip()
+        } else if (instance.rootOptionsStates.isLoaded && instance.forest.normalizedOptions.length === 0) {
+          return this.renderNoAvailableOptionsTip()
+        } else {
+          return this.renderOptionList()
+        }
+      },
+
+      renderLocalSearchMenuInner() {
+        const { instance } = this
+
+        if (instance.rootOptionsStates.isLoading) {
+          return this.renderLoadingOptionsTip()
+        } else if (instance.rootOptionsStates.loadingError) {
+          return this.renderLoadingRootOptionsErrorTip()
+        } else if (instance.rootOptionsStates.isLoaded && instance.forest.normalizedOptions.length === 0) {
+          return this.renderNoAvailableOptionsTip()
+        } else if (instance.localSearch.noResults) {
+          return this.renderNoResultsTip()
+        } else {
+          return this.renderOptionList()
+        }
+      },
+
+      renderAsyncSearchMenuInner() {
+        const { instance } = this
+        const entry = instance.getRemoteSearchEntry()
+        const shouldShowSearchPromptTip = instance.trigger.searchQuery === '' && !instance.defaultOptions
+        const shouldShowNoResultsTip = shouldShowSearchPromptTip
+          ? false
+          : entry.isLoaded && entry.options.length === 0
+
+        if (shouldShowSearchPromptTip) {
+          return this.renderSearchPromptTip()
+        } else if (entry.isLoading) {
+          return this.renderLoadingOptionsTip()
+        } else if (entry.loadingError) {
+          return this.renderAsyncSearchLoadingErrorTip()
+        } else if (shouldShowNoResultsTip) {
+          return this.renderNoResultsTip()
+        } else {
+          return this.renderOptionList()
+        }
+      },
+
+      renderOptionList() {
+        const { instance } = this
+
+        return (
+          <div class="rp-treeselect__list">
+            {instance.forest.normalizedOptions.map(rootNode => (
+              <Option node={rootNode} key={rootNode.id} />
+            ))}
+          </div>
+        )
+      },
+
+      renderSearchPromptTip() {
+        const { instance } = this
+
+        return (
+          <Tip type="search-prompt" icon="warning">{ instance.searchPromptText }</Tip>
+        )
+      },
+
+      renderLoadingOptionsTip() {
+        const { instance } = this
+
+        return (
+          <Tip type="loading" icon="loader">{ instance.loadingText }</Tip>
+        )
+      },
+
+      renderLoadingRootOptionsErrorTip() {
+        const { instance } = this
+
+        return (
+          <Tip type="error" icon="error">
+            { instance.rootOptionsStates.loadingError }
+            <a class="rp-treeselect__retry" onClick={instance.loadRootOptions} title={instance.retryTitle}>
+              { instance.retryText }
+            </a>
+          </Tip>
+        )
+      },
+
+      renderAsyncSearchLoadingErrorTip() {
+        const { instance } = this
+        const entry = instance.getRemoteSearchEntry()
+
+        // TODO: retryTitle?
+
+        return (
+          <Tip type="error" icon="error">
+            { entry.loadingError }
+            <a class="rp-treeselect__retry" onClick={instance.handleRemoteSearch} title={instance.retryTitle}>
+              { instance.retryText }
+            </a>
+          </Tip>
+        )
+      },
+
+      renderNoAvailableOptionsTip() {
+        const { instance } = this
+
+        return (
+          <Tip type="no-options" icon="warning">{ instance.noOptionsText }</Tip>
+        )
+      },
+
+      renderNoResultsTip() {
+        const { instance } = this
+
+        return (
+          <Tip type="no-results" icon="warning">{ instance.noResultsText }</Tip>
+        )
+      },
+
+      onMenuOpen() {
+        this.adjustMenuOpenDirection()
+        this.setupMenuSizeWatcher()
+        this.setupMenuResizeAndScrollEventListeners()
+      },
+
+      onMenuClose() {
+        this.removeMenuSizeWatcher()
+        this.removeMenuResizeAndScrollEventListeners()
+      },
+
+      adjustMenuOpenDirection() {
+        const { instance } = this
+        if (!instance.menu.isOpen) return
+
+        const $menu = instance.getMenu()
+        const $control = instance.getControl()
+        const menuRect = $menu.getBoundingClientRect()
+        const controlRect = $control.getBoundingClientRect()
+        const menuHeight = menuRect.height
+        const viewportHeight = window.innerHeight
+        const spaceAbove = controlRect.top
+        const spaceBelow = window.innerHeight - controlRect.bottom
+        const isControlInViewport = (
+          (controlRect.top >= 0 && controlRect.top <= viewportHeight) ||
+          (controlRect.top < 0 && controlRect.bottom > 0)
+        )
+        const hasEnoughSpaceBelow = spaceBelow > menuHeight + MENU_BUFFER
+        const hasEnoughSpaceAbove = spaceAbove > menuHeight + MENU_BUFFER
+
+        if (!isControlInViewport) {
+          instance.closeMenu()
+        } else if (instance.openDirection !== 'auto') {
+          instance.menu.placement = directionMap[instance.openDirection]
+        } else if (hasEnoughSpaceBelow || !hasEnoughSpaceAbove) {
+          instance.menu.placement = 'bottom'
+        } else {
+          instance.menu.placement = 'top'
+        }
+      },
+
+      setupMenuSizeWatcher() {
+        const { instance } = this
+        const $menu = instance.getMenu()
+
+        // istanbul ignore next
+        if (this.menuSizeWatcher) return
+
+        this.menuSizeWatcher = {
+          remove: watchSize($menu, this.adjustMenuOpenDirection),
+        }
+      },
+
+      setupMenuResizeAndScrollEventListeners() {
+        const { instance } = this
+        const $control = instance.getControl()
+
+        // istanbul ignore next
+        if (this.menuResizeAndScrollEventListeners) return
+
+        this.menuResizeAndScrollEventListeners = {
+          remove: setupResizeAndScrollEventListeners($control, this.adjustMenuOpenDirection),
+        }
+      },
+
+      removeMenuSizeWatcher() {
+        if (!this.menuSizeWatcher) return
+
+        this.menuSizeWatcher.remove()
+        this.menuSizeWatcher = null
+      },
+
+      removeMenuResizeAndScrollEventListeners() {
+        if (!this.menuResizeAndScrollEventListeners) return
+
+        this.menuResizeAndScrollEventListeners.remove()
+        this.menuResizeAndScrollEventListeners = null
+      },
+    },
+
+    render() {
+      return (
+        <div ref="menu-container" class="rp-treeselect__menu-container" style={this.menuContainerStyle}>
+          <transition name="rp-treeselect__menu--transition">
+            {this.renderMenu()}
+          </transition>
+        </div>
+      )
+    },
+  }
+</script>

package/src/components/MenuPortal.vue

@@ -0,0 +1,179 @@
+<script>
+  import Vue from 'vue'
+  import { watchSize, setupResizeAndScrollEventListeners, find } from '../utils'
+  import Menu from './Menu'
+
+  const PortalTarget = {
+    name: 'rp-treeselect--portal-target',
+    inject: [ 'instance' ],
+
+    watch: {
+      'instance.menu.isOpen'(newValue) {
+        if (newValue) {
+          this.setupHandlers()
+        } else {
+          this.removeHandlers()
+        }
+      },
+
+      'instance.menu.placement'() {
+        this.updateMenuContainerOffset()
+      },
+    },
+
+    created() {
+      this.controlResizeAndScrollEventListeners = null
+      this.controlSizeWatcher = null
+    },
+
+    mounted() {
+      const { instance } = this
+
+      if (instance.menu.isOpen) this.setupHandlers()
+    },
+
+    methods: {
+      setupHandlers() {
+        this.updateWidth()
+        this.updateMenuContainerOffset()
+        this.setupControlResizeAndScrollEventListeners()
+        this.setupControlSizeWatcher()
+      },
+
+      removeHandlers() {
+        this.removeControlResizeAndScrollEventListeners()
+        this.removeControlSizeWatcher()
+      },
+
+      setupControlResizeAndScrollEventListeners() {
+        const { instance } = this
+        const $control = instance.getControl()
+
+        // istanbul ignore next
+        if (this.controlResizeAndScrollEventListeners) return
+
+        this.controlResizeAndScrollEventListeners = {
+          remove: setupResizeAndScrollEventListeners($control, this.updateMenuContainerOffset),
+        }
+      },
+
+      setupControlSizeWatcher() {
+        const { instance } = this
+        const $control = instance.getControl()
+
+        // istanbul ignore next
+        if (this.controlSizeWatcher) return
+
+        this.controlSizeWatcher = {
+          remove: watchSize($control, () => {
+            this.updateWidth()
+            this.updateMenuContainerOffset()
+          }),
+        }
+      },
+
+      removeControlResizeAndScrollEventListeners() {
+        if (!this.controlResizeAndScrollEventListeners) return
+
+        this.controlResizeAndScrollEventListeners.remove()
+        this.controlResizeAndScrollEventListeners = null
+      },
+
+      removeControlSizeWatcher() {
+        if (!this.controlSizeWatcher) return
+
+        this.controlSizeWatcher.remove()
+        this.controlSizeWatcher = null
+      },
+
+      updateWidth() {
+        const { instance } = this
+        const $portalTarget = this.$el
+        const $control = instance.getControl()
+        const controlRect = $control.getBoundingClientRect()
+
+        $portalTarget.style.width = controlRect.width + 'px'
+      },
+
+      updateMenuContainerOffset() {
+        const { instance } = this
+        const $control = instance.getControl()
+        const $portalTarget = this.$el
+        const controlRect = $control.getBoundingClientRect()
+        const portalTargetRect = $portalTarget.getBoundingClientRect()
+        const offsetY = instance.menu.placement === 'bottom' ? controlRect.height : 0
+        const left = Math.round(controlRect.left - portalTargetRect.left) + 'px'
+        const top = Math.round(controlRect.top - portalTargetRect.top + offsetY) + 'px'
+        const menuContainerStyle = this.$refs.menu.$refs['menu-container'].style
+        const transformVariations = [ 'transform', 'webkitTransform', 'MozTransform', 'msTransform' ]
+        const transform = find(transformVariations, t => t in document.body.style)
+
+        // IE9 doesn't support `translate3d()`.
+        menuContainerStyle[transform] = `translate(${left}, ${top})`
+      },
+    },
+
+    render() {
+      const { instance } = this
+      const portalTargetClass = [ 'rp-treeselect__portal-target', instance.wrapperClass ]
+      const portalTargetStyle = { zIndex: instance.zIndex }
+
+      return (
+        <div class={portalTargetClass} style={portalTargetStyle} data-instance-id={instance.getInstanceId()}>
+          <Menu ref="menu" />
+        </div>
+      )
+    },
+
+    destroyed() {
+      this.removeHandlers()
+    },
+  }
+
+  let placeholder
+
+  export default {
+    name: 'rp-treeselect--menu-portal',
+
+    created() {
+      this.portalTarget = null
+    },
+
+    mounted() {
+      this.setup()
+    },
+
+    destroyed() {
+      this.teardown()
+    },
+
+    methods: {
+      setup() {
+        const el = document.createElement('div')
+        document.body.appendChild(el)
+
+        this.portalTarget = new Vue({
+          el,
+          parent: this,
+          ...PortalTarget,
+        })
+      },
+
+      teardown() {
+        document.body.removeChild(this.portalTarget.$el)
+        this.portalTarget.$el.innerHTML = ''
+
+        this.portalTarget.$destroy()
+        this.portalTarget = null
+      },
+    },
+
+    render() {
+      if (!placeholder) placeholder = (
+        <div class="rp-treeselect__menu-placeholder" />
+      )
+
+      return placeholder
+    },
+  }
+</script>

package/src/components/MultiValue.vue

@@ -0,0 +1,56 @@
+<script>
+  import MultiValueItem from './MultiValueItem'
+  import Input from './Input'
+  import Placeholder from './Placeholder'
+
+  export default {
+    name: 'rp-treeselect--multi-value',
+    inject: [ 'instance' ],
+
+    methods: {
+      renderMultiValueItems() {
+        const { instance } = this
+
+        return instance.internalValue
+          .slice(0, instance.limit)
+          .map(instance.getNode)
+          .map(node => (
+            <MultiValueItem key={`multi-value-item-${node.id}`} node={node} />
+          ))
+      },
+
+      renderExceedLimitTip() {
+        const { instance } = this
+        const count = instance.internalValue.length - instance.limit
+
+        if (count <= 0) return null
+
+        return (
+          <div class="rp-treeselect__limit-tip rp-treeselect-helper-zoom-effect-off" key="exceed-limit-tip">
+            <span class="rp-treeselect__limit-tip-text">{ instance.limitText(count) }</span>
+          </div>
+        )
+      },
+    },
+
+    render() {
+      const { renderValueContainer } = this.$parent
+      const transitionGroupProps = {
+        props: {
+          tag: 'div',
+          name: 'rp-treeselect__multi-value-item--transition',
+          appear: true,
+        },
+      }
+
+      return renderValueContainer(
+        <transition-group class="rp-treeselect__multi-value" {...transitionGroupProps}>
+          {this.renderMultiValueItems()}
+          {this.renderExceedLimitTip()}
+          <Placeholder key="placeholder" />
+          <Input ref="input" key="input" />
+        </transition-group>,
+      )
+    },
+  }
+</script>

package/src/components/MultiValueItem.vue

@@ -0,0 +1,45 @@
+<script>
+  import { onLeftClick } from '../utils'
+  import DeleteIcon from './icons/Delete'
+
+  export default {
+    name: 'rp-treeselect--multi-value-item',
+    inject: [ 'instance' ],
+
+    props: {
+      node: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    methods: {
+      handleMouseDown: onLeftClick(function handleMouseDown() {
+        const { instance, node } = this
+
+        // Deselect this node.
+        instance.select(node)
+      }),
+    },
+
+    render() {
+      const { instance, node } = this
+      const itemClass = {
+        'rp-treeselect__multi-value-item': true,
+        'rp-treeselect__multi-value-item-disabled': node.isDisabled,
+        'rp-treeselect__multi-value-item-new': node.isNew,
+      }
+      const customValueLabelRenderer = instance.$scopedSlots['value-label']
+      const labelRenderer = customValueLabelRenderer ? customValueLabelRenderer({ node }) : node.label
+
+      return (
+        <div class="rp-treeselect__multi-value-item-container">
+          <div class={itemClass} onMousedown={this.handleMouseDown}>
+            <span class="rp-treeselect__multi-value-label">{ labelRenderer }</span>
+            <span class="rp-treeselect__icon rp-treeselect__value-remove"><DeleteIcon /></span>
+          </div>
+        </div>
+      )
+    },
+  }
+</script>