@reviewpush/rp-treeselect 0.0.0

package/src/components/Option.vue

@@ -0,0 +1,300 @@
+<script>
+  import { UNCHECKED, INDETERMINATE, CHECKED } from '../constants'
+  import { onLeftClick } from '../utils'
+  import Tip from './Tip'
+  import ArrowIcon from './icons/Arrow'
+
+  let arrowPlaceholder, checkMark, minusMark
+
+  const Option = {
+    name: 'rp-treeselect--option',
+    inject: [ 'instance' ],
+
+    props: {
+      node: {
+        type: Object,
+        required: true,
+      },
+    },
+
+    computed: {
+      shouldExpand() {
+        const { instance, node } = this
+
+        return node.isBranch && instance.shouldExpand(node)
+      },
+
+      shouldShow() {
+        const { instance, node } = this
+
+        return instance.shouldShowOptionInMenu(node)
+      },
+    },
+
+    methods: {
+      renderOption() {
+        const { instance, node } = this
+        const optionClass = {
+          'rp-treeselect__option': true,
+          'rp-treeselect__option--disabled': node.isDisabled,
+          'rp-treeselect__option--selected': instance.isSelected(node),
+          'rp-treeselect__option--highlight': node.isHighlighted,
+          'rp-treeselect__option--matched': instance.localSearch.active && node.isMatched,
+          'rp-treeselect__option--hide': !this.shouldShow,
+        }
+
+        return (
+          <div class={optionClass} onMouseenter={this.handleMouseEnterOption} data-id={node.id}>
+            {this.renderArrow()}
+            {this.renderLabelContainer([
+              this.renderCheckboxContainer([
+                this.renderCheckbox(),
+              ]),
+              this.renderLabel(),
+            ])}
+          </div>
+        )
+      },
+
+      renderSubOptionsList() {
+        if (!this.shouldExpand) return null
+
+        return (
+          <div class="rp-treeselect__list">
+            {this.renderSubOptions()}
+            {this.renderNoChildrenTip()}
+            {this.renderLoadingChildrenTip()}
+            {this.renderLoadingChildrenErrorTip()}
+          </div>
+        )
+      },
+
+      renderArrow() {
+        const { instance, node } = this
+
+        if (instance.shouldFlattenOptions && this.shouldShow) return null
+
+        if (node.isBranch) {
+          const transitionProps = {
+            props: {
+              name: 'rp-treeselect__option-arrow--prepare',
+              appear: true,
+            },
+          }
+          const arrowClass = {
+            'rp-treeselect__option-arrow': true,
+            'rp-treeselect__option-arrow--rotated': this.shouldExpand,
+          }
+
+          return (
+            <div class="rp-treeselect__option-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
+              <transition {...transitionProps}>
+                <ArrowIcon class={arrowClass} />
+              </transition>
+            </div>
+          )
+        }
+
+        // For leaf nodes, we render a placeholder to keep its label aligned to
+        // branch nodes. Unless there is no branch nodes at all (a normal
+        // non-tree select).
+        if (/*node.isLeaf && */instance.hasBranchNodes) {
+          if (!arrowPlaceholder) arrowPlaceholder = (
+            <div class="rp-treeselect__option-arrow-placeholder">&nbsp;</div>
+          )
+
+          return arrowPlaceholder
+        }
+
+        return null
+      },
+
+      renderLabelContainer(children) {
+        return (
+          <div class="rp-treeselect__label-container" onMousedown={this.handleMouseDownOnLabelContainer}>
+            {children}
+          </div>
+        )
+      },
+
+      renderCheckboxContainer(children) {
+        const { instance, node } = this
+
+        if (instance.single) return null
+        if (instance.disableBranchNodes && node.isBranch) return null
+
+        return (
+          <div class="rp-treeselect__checkbox-container">
+            {children}
+          </div>
+        )
+      },
+
+      renderCheckbox() {
+        const { instance, node } = this
+        const checkedState = instance.forest.checkedStateMap[node.id]
+        const checkboxClass = {
+          'rp-treeselect__checkbox': true,
+          'rp-treeselect__checkbox--checked': checkedState === CHECKED,
+          'rp-treeselect__checkbox--indeterminate': checkedState === INDETERMINATE,
+          'rp-treeselect__checkbox--unchecked': checkedState === UNCHECKED,
+          'rp-treeselect__checkbox--disabled': node.isDisabled,
+        }
+
+        if (!checkMark) checkMark = (
+          <span class="rp-treeselect__check-mark" />
+        )
+        if (!minusMark) minusMark = (
+          <span class="rp-treeselect__minus-mark" />
+        )
+
+        return (
+          <span class={checkboxClass}>
+            {checkMark}
+            {minusMark}
+          </span>
+        )
+      },
+
+      renderLabel() {
+        const { instance, node } = this
+        const shouldShowCount = (
+          node.isBranch && (instance.localSearch.active
+            ? instance.showCountOnSearchComputed
+            : instance.showCount
+          )
+        )
+        const count = shouldShowCount
+          ? instance.localSearch.active
+            ? instance.localSearch.countMap[node.id][instance.showCountOf]
+            : node.count[instance.showCountOf]
+          : NaN
+        const labelClassName = 'rp-treeselect__label'
+        const countClassName = 'rp-treeselect__count'
+        const customLabelRenderer = instance.$scopedSlots['option-label']
+
+        if (customLabelRenderer) return customLabelRenderer({
+          node,
+          shouldShowCount,
+          count,
+          labelClassName,
+          countClassName,
+        })
+
+        return (
+          <label class={labelClassName}>
+            {node.label}
+            {shouldShowCount && (
+              <span class={countClassName}>({count})</span>
+            )}
+          </label>
+        )
+      },
+
+      renderSubOptions() {
+        const { node } = this
+
+        if (!node.childrenStates.isLoaded) return null
+
+        return node.children.map(childNode => (
+          <Option node={childNode} key={childNode.id} />
+        ))
+      },
+
+      renderNoChildrenTip() {
+        const { instance, node } = this
+
+        if (!node.childrenStates.isLoaded || node.children.length) return null
+
+        return (
+          <Tip type="no-children" icon="warning">{ instance.noChildrenText }</Tip>
+        )
+      },
+
+      renderLoadingChildrenTip() {
+        const { instance, node } = this
+
+        if (!node.childrenStates.isLoading) return null
+
+        return (
+          <Tip type="loading" icon="loader">{ instance.loadingText }</Tip>
+        )
+      },
+
+      renderLoadingChildrenErrorTip() {
+        const { instance, node } = this
+
+        if (!node.childrenStates.loadingError) return null
+
+        return (
+          <Tip type="error" icon="error">
+            { node.childrenStates.loadingError }
+            <a class="rp-treeselect__retry" title={instance.retryTitle} onMousedown={this.handleMouseDownOnRetry}>
+              { instance.retryText }
+            </a>
+          </Tip>
+        )
+      },
+
+      handleMouseEnterOption(evt) {
+        const { instance, node } = this
+
+        // Equivalent to `self` modifier.
+        // istanbul ignore next
+        if (evt.target !== evt.currentTarget) return
+
+        instance.setCurrentHighlightedOption(node, false)
+      },
+
+      handleMouseDownOnArrow: onLeftClick(function handleMouseDownOnOptionArrow() {
+        const { instance, node } = this
+
+        instance.toggleExpanded(node)
+      }),
+
+      handleMouseDownOnLabelContainer: onLeftClick(function handleMouseDownOnLabelContainer() {
+        const { instance, node } = this
+
+        if (node.isBranch && instance.disableBranchNodes) {
+          instance.toggleExpanded(node)
+        } else {
+          instance.select(node)
+        }
+      }),
+
+      handleMouseDownOnRetry: onLeftClick(function handleMouseDownOnRetry() {
+        const { instance, node } = this
+
+        instance.loadChildrenOptions(node)
+      }),
+    },
+
+    render() {
+      const { node } = this
+      const indentLevel = this.instance.shouldFlattenOptions ? 0 : node.level
+      const listItemClass = {
+        'rp-treeselect__list-item': true,
+        [`rp-treeselect__indent-level-${indentLevel}`]: true,
+      }
+      const transitionProps = {
+        props: {
+          name: 'rp-treeselect__list--transition',
+        },
+      }
+
+      return (
+        <div class={listItemClass}>
+          {this.renderOption()}
+          {node.isBranch && (
+            <transition {...transitionProps}>
+              {this.renderSubOptionsList()}
+            </transition>
+          )}
+        </div>
+      )
+    },
+  }
+
+  // eslint-disable-next-line vue/require-direct-export
+  export default Option
+</script>

package/src/components/Placeholder.vue

@@ -0,0 +1,21 @@
+<script>
+  export default {
+    name: 'rp-treeselect--placeholder',
+    inject: [ 'instance' ],
+
+    render() {
+      const { instance } = this
+      const placeholderClass = {
+        'rp-treeselect__placeholder': true,
+        'rp-treeselect-helper-zoom-effect-off': true,
+        'rp-treeselect-helper-hide': instance.hasValue || instance.trigger.searchQuery,
+      }
+
+      return (
+        <div class={placeholderClass}>
+          { instance.placeholder }
+        </div>
+      )
+    },
+  }
+</script>

package/src/components/SingleValue.vue

@@ -0,0 +1,34 @@
+<script>
+  import Input from './Input'
+  import Placeholder from './Placeholder'
+
+  export default {
+    name: 'rp-treeselect--single-value',
+    inject: [ 'instance' ],
+    methods: {
+      renderSingleValueLabel() {
+        const { instance } = this
+        const node = instance.selectedNodes[0]
+
+        const customValueLabelRenderer = instance.$scopedSlots['value-label']
+        return customValueLabelRenderer
+          ? customValueLabelRenderer({ node })
+          : node.label
+      },
+    },
+    render() {
+      const { instance, $parent: { renderValueContainer } } = this
+      const shouldShowValue = instance.hasValue && !instance.trigger.searchQuery
+
+      return renderValueContainer([
+        shouldShowValue && (
+          <div class="rp-treeselect__single-value">
+            { this.renderSingleValueLabel() }
+          </div>
+        ),
+        <Placeholder />,
+        <Input ref="input" />,
+      ])
+    },
+  }
+</script>

package/src/components/Tip.vue

@@ -0,0 +1,32 @@
+<script>
+  export default {
+    name: 'rp-treeselect--tip',
+    functional: true,
+
+    props: {
+      type: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+    },
+
+    render(_, context) {
+      const { props, children } = context
+
+      return (
+        <div class={`rp-treeselect__tip rp-treeselect__${props.type}-tip`}>
+          <div class="rp-treeselect__icon-container">
+            <span class={`rp-treeselect__icon-${props.icon}`} />
+          </div>
+          <span class={`rp-treeselect__tip-text rp-treeselect__${props.type}-tip-text`}>
+            {children}
+          </span>
+        </div>
+      )
+    },
+  }
+</script>

package/src/components/Treeselect.vue

@@ -0,0 +1,42 @@
+<script>
+  import treeselectMixin from '../mixins/treeselectMixin'
+  import HiddenFields from './HiddenFields'
+  import Control from './Control'
+  import Menu from './Menu'
+  import MenuPortal from './MenuPortal'
+
+  export default {
+    name: 'rp-treeselect',
+    mixins: [ treeselectMixin ],
+
+    computed: {
+      wrapperClass() {
+        return {
+          'rp-treeselect': true,
+          'rp-treeselect--single': this.single,
+          'rp-treeselect--multi': this.multiple,
+          'rp-treeselect--searchable': this.searchable,
+          'rp-treeselect--disabled': this.disabled,
+          'rp-treeselect--focused': this.trigger.isFocused,
+          'rp-treeselect--has-value': this.hasValue,
+          'rp-treeselect--open': this.menu.isOpen,
+          'rp-treeselect--open-above': this.menu.placement === 'top',
+          'rp-treeselect--open-below': this.menu.placement === 'bottom',
+          'rp-treeselect--branch-nodes-disabled': this.disableBranchNodes,
+          'rp-treeselect--append-to-body': this.appendToBody,
+          'rp-treeselect--test': true,
+        }
+      },
+    },
+
+    render() {
+      return (
+        <div ref="wrapper" class={this.wrapperClass}>
+          <HiddenFields />
+          <Control ref="control" />
+          {this.appendToBody ? <MenuPortal ref="portal" /> : <Menu ref="menu" />}
+        </div>
+      )
+    },
+  }
+</script>

package/src/components/icons/Arrow.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.362 292.362">
+    <path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z" />
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'rp-treeselect--arrow',
+  }
+</script>

package/src/components/icons/Delete.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.333 348.333">
+    <path d="M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z" />
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'rp-treeselect--x',
+  }
+</script>

package/src/constants.js

@@ -0,0 +1,50 @@
+// Magic value that indicates a root level node.
+export const NO_PARENT_NODE = null
+
+// Types of checked state.
+export const UNCHECKED = 0
+export const INDETERMINATE = 1
+export const CHECKED = 2
+
+// Types of count number.
+export const ALL_CHILDREN = 'ALL_CHILDREN'
+export const ALL_DESCENDANTS = 'ALL_DESCENDANTS'
+export const LEAF_CHILDREN = 'LEAF_CHILDREN'
+export const LEAF_DESCENDANTS = 'LEAF_DESCENDANTS'
+
+// Action types of delayed loading.
+export const LOAD_ROOT_OPTIONS = 'LOAD_ROOT_OPTIONS'
+export const LOAD_CHILDREN_OPTIONS = 'LOAD_CHILDREN_OPTIONS'
+export const ASYNC_SEARCH = 'ASYNC_SEARCH'
+
+// Acceptable values of `valueConsistsOf` prop.
+export const ALL = 'ALL'
+export const BRANCH_PRIORITY = 'BRANCH_PRIORITY'
+export const LEAF_PRIORITY = 'LEAF_PRIORITY'
+export const ALL_WITH_INDETERMINATE = 'ALL_WITH_INDETERMINATE'
+
+// Acceptable values of `sortValueBy` prop.
+export const ORDER_SELECTED = 'ORDER_SELECTED'
+export const LEVEL = 'LEVEL'
+export const INDEX = 'INDEX'
+
+// Key codes look-up table.
+export const KEY_CODES = {
+  BACKSPACE: 8,
+  ENTER: 13,
+  ESCAPE: 27,
+  END: 35,
+  HOME: 36,
+  ARROW_LEFT: 37,
+  ARROW_UP: 38,
+  ARROW_RIGHT: 39,
+  ARROW_DOWN: 40,
+  DELETE: 46,
+}
+
+// Other constants.
+export const INPUT_DEBOUNCE_DELAY = process.env.NODE_ENV === 'testing'
+  ? /* to speed up unit testing */ 10
+  : /* istanbul ignore next */ 200
+export const MIN_INPUT_WIDTH = 5
+export const MENU_BUFFER = 40

package/src/index.js

@@ -0,0 +1,14 @@
+import Treeselect from './components/Treeselect'
+import treeselectMixin from './mixins/treeselectMixin'
+import './style.less'
+
+export default Treeselect
+export { Treeselect, treeselectMixin }
+export {
+  // Delayed loading.
+  LOAD_ROOT_OPTIONS,
+  LOAD_CHILDREN_OPTIONS,
+  ASYNC_SEARCH,
+} from './constants'
+
+export const VERSION = PKG_VERSION