ant-design-vue/components/vc-tree/src/TreeNode.jsx

import PropTypes from '../../_util/vue-types'
import classNames from 'classnames'
import { getNodeChildren,
  mapChildren,
  warnOnlyTreeNode } from './util'
import { initDefaultProps, filterEmpty, getComponentFromProp } from '../../_util/props-util'
import BaseMixin from '../../_util/BaseMixin'
import getTransitionProps from '../../_util/getTransitionProps'
import { cloneElement } from '../../_util/vnode'

function noop () {}
const ICON_OPEN = 'open'
const ICON_CLOSE = 'close'

const defaultTitle = '---'

const TreeNode = {
  name: 'TreeNode',
  mixins: [BaseMixin],
  __ANT_TREE_NODE: true,
  props: initDefaultProps({
    eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Pass by parent `cloneElement`
    prefixCls: PropTypes.string,
    // className: PropTypes.string,
    root: PropTypes.object,
    // onSelect: PropTypes.func,

    // By parent
    expanded: PropTypes.bool,
    selected: PropTypes.bool,
    checked: PropTypes.bool,
    loaded: PropTypes.bool,
    loading: PropTypes.bool,
    halfChecked: PropTypes.bool,
    title: PropTypes.any,
    pos: PropTypes.string,
    dragOver: PropTypes.bool,
    dragOverGapTop: PropTypes.bool,
    dragOverGapBottom: PropTypes.bool,

    // By user
    isLeaf: PropTypes.bool,
    selectable: PropTypes.bool,
    disabled: PropTypes.bool,
    disableCheckbox: PropTypes.bool,
    icon: PropTypes.any,
    dataRef: PropTypes.object,
    switcherIcon: PropTypes.any,

    label: PropTypes.any,
    value: PropTypes.any,
  }, {}),

  data () {
    return {
      dragNodeHighlight: false,
    }
  },
  inject: {
    vcTree: { default: {}},
    vcTreeNode: { default: {}},
  },
  provide () {
    return {
      vcTreeNode: this,
    }
  },

  // Isomorphic needn't load data in server side
  mounted () {
    this.syncLoadData(this.$props)
  },
  updated () {
    this.syncLoadData(this.$props)
  },

  methods: {
    onSelectorClick (e) {
      // Click trigger before select/check operation
      const { vcTree: { onNodeClick }} = this
      onNodeClick(e, this)
      if (this.isSelectable()) {
        this.onSelect(e)
      } else {
        this.onCheck(e)
      }
    },

    onSelectorDoubleClick (e) {
      const { vcTree: { onNodeDoubleClick }} = this
      onNodeDoubleClick(e, this)
    },

    onSelect (e) {
      if (this.isDisabled()) return

      const { vcTree: { onNodeSelect }} = this
      e.preventDefault()
      onNodeSelect(e, this)
    },

    onCheck (e) {
      if (this.isDisabled()) return

      const { disableCheckbox, checked } = this
      const {
        vcTree: { checkable, onNodeCheck },
      } = this

      if (!checkable || disableCheckbox) return

      e.preventDefault()
      const targetChecked = !checked
      onNodeCheck(e, this, targetChecked)
    },

    onMouseEnter (e) {
      const { vcTree: { onNodeMouseEnter }} = this
      onNodeMouseEnter(e, this)
    },

    onMouseLeave (e) {
      const { vcTree: { onNodeMouseLeave }} = this
      onNodeMouseLeave(e, this)
    },

    onContextMenu  (e) {
      const { vcTree: { onNodeContextMenu }} = this
      onNodeContextMenu(e, this)
    },

    onDragStart  (e) {
      const { vcTree: { onNodeDragStart }} = this

      e.stopPropagation()
      this.setState({
        dragNodeHighlight: true,
      })
      onNodeDragStart(e, this)

      try {
        // ie throw error
        // firefox-need-it
        e.dataTransfer.setData('text/plain', '')
      } catch (error) {
        // empty
      }
    },

    onDragEnter  (e) {
      const { vcTree: { onNodeDragEnter }} = this

      e.preventDefault()
      e.stopPropagation()
      onNodeDragEnter(e, this)
    },

    onDragOver (e) {
      const { vcTree: { onNodeDragOver }} = this

      e.preventDefault()
      e.stopPropagation()
      onNodeDragOver(e, this)
    },

    onDragLeave (e) {
      const { vcTree: { onNodeDragLeave }} = this

      e.stopPropagation()
      onNodeDragLeave(e, this)
    },

    onDragEnd (e) {
      const { vcTree: { onNodeDragEnd }} = this

      e.stopPropagation()
      this.setState({
        dragNodeHighlight: false,
      })
      onNodeDragEnd(e, this)
    },

    onDrop (e) {
      const { vcTree: { onNodeDrop }} = this

      e.preventDefault()
      e.stopPropagation()
      this.setState({
        dragNodeHighlight: false,
      })
      onNodeDrop(e, this)
    },

    // Disabled item still can be switch
    onExpand (e) {
      const { vcTree: { onNodeExpand }} = this
      onNodeExpand(e, this)
    },

    getNodeChildren () {
      const { $slots: { default: children }} = this
      const originList = filterEmpty(children)
      const targetList = getNodeChildren(originList)

      if (originList.length !== targetList.length) {
        warnOnlyTreeNode()
      }

      return targetList
    },

    getNodeState () {
      const { expanded } = this

      if (this.isLeaf2()) {
        return null
      }

      return expanded ? ICON_OPEN : ICON_CLOSE
    },

    isLeaf2 () {
      const { isLeaf, loaded } = this
      const { vcTree: { loadData }} = this

      const hasChildren = this.getNodeChildren().length !== 0
      if (isLeaf === false) {
        return false
      }
      return (
        isLeaf ||
        (!loadData && !hasChildren) ||
        (loadData && loaded && !hasChildren)
      )
    },

    isDisabled  () {
      const { disabled } = this
      const { vcTree: { disabled: treeDisabled }} = this

      // Follow the logic of Selectable
      if (disabled === false) {
        return false
      }

      return !!(treeDisabled || disabled)
    },

    isSelectable () {
      const { selectable } = this
      const { vcTree: { selectable: treeSelectable }} = this

      // Ignore when selectable is undefined or null
      if (typeof selectable === 'boolean') {
        return selectable
      }

      return treeSelectable
    },

    // Load data to avoid default expanded tree without data
    syncLoadData (props) {
      const { expanded, loading, loaded } = props
      const { vcTree: { loadData, onNodeLoad }} = this
      if (loading) return
      // read from state to avoid loadData at same time
      if (loadData && expanded && !this.isLeaf2()) {
        // We needn't reload data when has children in sync logic
        // It's only needed in node expanded
        const hasChildren = this.getNodeChildren().length !== 0
        if (!hasChildren && !loaded) {
          onNodeLoad(this)
        }
      }
    },

    // Switcher
    renderSwitcher () {
      const { expanded } = this
      const { vcTree: { prefixCls }} = this
      const switcherIcon = getComponentFromProp(this, 'switcherIcon', {}, false) || getComponentFromProp(this.vcTree, 'switcherIcon', {}, false)
      if (this.isLeaf2()) {
        return (
          <span key='switcher' class={classNames(`${prefixCls}-switcher`, `${prefixCls}-switcher-noop`)}>
            {typeof switcherIcon === 'function'
              ? cloneElement(switcherIcon({ ...this.$props, isLeaf: true })) : switcherIcon}
          </span>
        )
      }

      const switcherCls = classNames(`${prefixCls}-switcher`, `${prefixCls}-switcher_${expanded ? ICON_OPEN : ICON_CLOSE}`)
      return (
        <span key='switcher' onClick={this.onExpand} class={switcherCls}>
          {typeof switcherIcon === 'function'
            ? cloneElement(switcherIcon({ ...this.$props, isLeaf: false })) : switcherIcon}
        </span>
      )
    },

    // Checkbox
    renderCheckbox () {
      const { checked, halfChecked, disableCheckbox } = this
      const { vcTree: { prefixCls, checkable }} = this
      const disabled = this.isDisabled()

      if (!checkable) return null

      // [Legacy] Custom element should be separate with `checkable` in future
      const $custom = typeof checkable !== 'boolean' ? checkable : null

      return (
        <span
          key='checkbox'
          class={classNames(
            `${prefixCls}-checkbox`,
            checked && `${prefixCls}-checkbox-checked`,
            !checked && halfChecked && `${prefixCls}-checkbox-indeterminate`,
            (disabled || disableCheckbox) && `${prefixCls}-checkbox-disabled`,
          )}
          onClick={this.onCheck}
        >
          {$custom}
        </span>
      )
    },

    renderIcon () {
      const { loading } = this
      const { vcTree: { prefixCls }} = this

      return (
        <span
          key='icon'
          class={classNames(
            `${prefixCls}-iconEle`,
            `${prefixCls}-icon__${this.getNodeState() || 'docu'}`,
            loading && `${prefixCls}-icon_loading`,
          )}
        />
      )
    },

    // Icon + Title
    renderSelector (h) {
      const { selected, icon, loading, dragNodeHighlight } = this
      const { vcTree: { prefixCls, showIcon, icon: treeIcon, draggable, loadData }} = this
      const disabled = this.isDisabled()
      const title = getComponentFromProp(this, 'title') || defaultTitle
      const wrapClass = `${prefixCls}-node-content-wrapper`

      // Icon - Still show loading icon when loading without showIcon
      let $icon

      if (showIcon) {
        const currentIcon = icon || treeIcon
        $icon = currentIcon ? (
          <span
            class={classNames(
              `${prefixCls}-iconEle`,
              `${prefixCls}-icon__customize`,
            )}
          >
            {typeof currentIcon === 'function'
              ? currentIcon({ ...this.$props }, h) : currentIcon}
          </span>
        ) : this.renderIcon()
      } else if (loadData && loading) {
        $icon = this.renderIcon()
      }

      // Title
      const $title = <span class={`${prefixCls}-title`}>{title}</span>

      return (
        <span
          key='selector'
          ref='selectHandle'
          title={typeof title === 'string' ? title : ''}
          class={classNames(
            `${wrapClass}`,
            `${wrapClass}-${this.getNodeState() || 'normal'}`,
            (!disabled && (selected || dragNodeHighlight)) && `${prefixCls}-node-selected`,
            (!disabled && draggable) && 'draggable'
          )}
          draggable={(!disabled && draggable) || undefined}
          aria-grabbed={(!disabled && draggable) || undefined}
          onMouseenter={this.onMouseEnter}
          onMouseleave={this.onMouseLeave}
          onContextmenu={this.onContextMenu}
          onClick={this.onSelectorClick}
          onDoubleclick={this.onSelectorDoubleClick}
          onDragstart={draggable ? this.onDragStart : noop}
        >
          {$icon}{$title}
        </span>
      )
    },

    // Children list wrapped with `Animation`
    renderChildren () {
      const { expanded, pos } = this
      const { vcTree: {
        prefixCls,
        openTransitionName, openAnimation,
        renderTreeNode,
      }} = this

      let animProps = {}
      if (openTransitionName) {
        animProps = getTransitionProps(openTransitionName)
      } else if (typeof openAnimation === 'object') {
        animProps = { ...openAnimation }
        animProps.props = { css: false, ...animProps.props }
      }

      // Children TreeNode
      const nodeList = this.getNodeChildren()

      if (nodeList.length === 0) {
        return null
      }

      let $children
      if (expanded) {
        $children = (
          <ul
            class={classNames(
              `${prefixCls}-child-tree`,
              expanded && `${prefixCls}-child-tree-open`,
            )}
            data-expanded={expanded}
            role='group'
          >
            {mapChildren(nodeList, (node, index) => (
              renderTreeNode(node, index, pos)
            ))}
          </ul>
        )
      }

      return (
        <transition
          {...animProps}
        >
          {$children}
        </transition>
      )
    },
  },

  render (h) {
    const {
      dragOver, dragOverGapTop, dragOverGapBottom,
      isLeaf,
      expanded, selected, checked, halfChecked, loading,
    } = this.$props
    const { vcTree: {
      prefixCls,
      filterTreeNode,
      draggable,
    }} = this
    const disabled = this.isDisabled()
    return (
      <li
        class={{
          [`${prefixCls}-treenode-disabled`]: disabled,
          [`${prefixCls}-treenode-switcher-${expanded ? 'open' : 'close'}`]: !isLeaf,
          [`${prefixCls}-treenode-checkbox-checked`]: checked,
          [`${prefixCls}-treenode-checkbox-indeterminate`]: halfChecked,
          [`${prefixCls}-treenode-selected`]: selected,
          [`${prefixCls}-treenode-loading`]: loading,
          'drag-over': !disabled && dragOver,
          'drag-over-gap-top': !disabled && dragOverGapTop,
          'drag-over-gap-bottom': !disabled && dragOverGapBottom,
          'filter-node': filterTreeNode && filterTreeNode(this),
        }}
        role='treeitem'
        onDragenter={draggable ? this.onDragEnter : noop}
        onDragover={draggable ? this.onDragOver : noop}
        onDragleave={draggable ? this.onDragLeave : noop}
        onDrop={draggable ? this.onDrop : noop}
        onDragend={draggable ? this.onDragEnd : noop}
      >
        {this.renderSwitcher()}
        {this.renderCheckbox()}
        {this.renderSelector(h)}
        {this.renderChildren()}
      </li>
    )
  },
}

TreeNode.isTreeNode = 1

export default TreeNode