feat: tree add blockNode selectable

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'tree-select', // dev components
+    componentName: 'tree', // dev components
   },
 };

components/tree/DirectoryTree.jsx

@@ -4,7 +4,12 @@ import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import { conductExpandParent, convertTreeToEntities } from '../vc-tree/src/util';
 import Tree, { TreeProps } from './Tree';
-import { calcRangeKeys, getFullKeyList } from './util';
+import {
+  calcRangeKeys,
+  getFullKeyList,
+  convertDirectoryKeysToNodes,
+  getFullKeyListByTreeData,
+} from './util';
 import Icon from '../icon';
 import BaseMixin from '../_util/BaseMixin';
 import {
@@ -64,7 +69,11 @@ export default {
 
     // Expanded keys
     if (defaultExpandAll) {
-      state._expandedKeys = getFullKeyList(this.$slots.default);
+      if (props.treeData) {
+        state._expandedKeys = getFullKeyListByTreeData(props.treeData);
+      } else {
+        state._expandedKeys = getFullKeyList(this.$slots.default);
+      }
     } else if (defaultExpandParent) {
       state._expandedKeys = conductExpandParent(expandedKeys || defaultExpandedKeys, keyEntities);
     } else {
@@ -125,6 +134,13 @@ export default {
       const { eventKey = '' } = node;
 
       const newState = {};
+
+      // We need wrap this event since some value is not same
+      const newEvent = {
+        ...event,
+        selected: true, // Directory selected always true
+      };
+
       // Windows / Mac single pick
       const ctrlPick = nativeEvent.ctrlKey || nativeEvent.metaKey;
       const shiftPick = nativeEvent.shiftKey;
@@ -136,6 +152,7 @@ export default {
         newSelectedKeys = keys;
         this.lastSelectedKey = eventKey;
         this.cachedSelectedKeys = newSelectedKeys;
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(children, newSelectedKeys);
       } else if (multiple && shiftPick) {
         // Shift click
         newSelectedKeys = Array.from(
@@ -144,16 +161,18 @@ export default {
             ...calcRangeKeys(children, expandedKeys, eventKey, this.lastSelectedKey),
           ]),
         );
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(children, newSelectedKeys);
       } else {
         // Single click
         newSelectedKeys = [eventKey];
         this.lastSelectedKey = eventKey;
         this.cachedSelectedKeys = newSelectedKeys;
+        newEvent.selectedNodes = [event.node];
       }
       newState._selectedKeys = newSelectedKeys;
 
       this.$emit('update:selectedKeys', newSelectedKeys);
-      this.$emit('select', newSelectedKeys, event);
+      this.$emit('select', newSelectedKeys, newEvent);
 
       this.setUncontrolledState(newState);
     },

components/tree/Tree.jsx

@@ -93,6 +93,7 @@ function TreeProps() {
      * 替换treeNode中 title,key,children字段为treeData中对应的字段
      */
     replaceFields: PropTypes.object,
+    blockNode: PropTypes.bool,
   };
 }
 
@@ -111,6 +112,7 @@ export default {
       on: animation,
       props: { appear: null },
     },
+    blockNode: false,
   }),
   inject: {
     configProvider: { default: () => ConfigConsumerProps },
@@ -128,32 +130,27 @@ export default {
       if (loading) {
         return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`} />;
       }
-      if (showLine) {
-        if (isLeaf) {
-          return <Icon type="file" class={`${prefixCls}-switcher-line-icon`} />;
-        }
-        return (
-          <Icon
-            type={expanded ? 'minus-square' : 'plus-square'}
-            class={`${prefixCls}-switcher-line-icon`}
-            theme="outlined"
-          />
-        );
-      } else {
-        const switcherCls = `${prefixCls}-switcher-icon`;
-        if (isLeaf) {
-          return null;
-        } else if (switcherIcon) {
-          const switcherOriginCls = getClass(switcherIcon[0]);
-          return cloneElement(switcherIcon, {
-            class: {
-              [switcherCls]: true,
-            },
-          });
-        } else {
-          return <Icon type="caret-down" class={`${prefixCls}-switcher-icon`} theme="filled" />;
-        }
+
+      if (isLeaf) {
+        return showLine ? <Icon type="file" class={`${prefixCls}-switcher-line-icon`} /> : null;
       }
+      const switcherCls = `${prefixCls}-switcher-icon`;
+      if (switcherIcon) {
+        return cloneElement(switcherIcon, {
+          class: {
+            [switcherCls]: true,
+          },
+        });
+      }
+      return showLine ? (
+        <Icon
+          type={expanded ? 'minus-square' : 'plus-square'}
+          class={`${prefixCls}-switcher-line-icon`}
+          theme="outlined"
+        />
+      ) : (
+        <Icon type="caret-down" class={switcherCls} theme="filled" />
+      );
     },
     updateTreeData(treeData) {
       const { $slots, $scopedSlots } = this;
@@ -166,12 +163,17 @@ export default {
         const treeNodeProps = {
           ...restProps,
           icon:
-            $slots[slots.icon] ||
             ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon](item)) ||
+            $slots[slots.icon] ||
             restProps.icon,
+          switcherIcon:
+            ($scopedSlots[scopedSlots.switcherIcon] &&
+              $scopedSlots[scopedSlots.switcherIcon](item)) ||
+            $slots[slots.switcherIcon] ||
+            restProps.switcherIcon,
           title:
-            $slots[slots.title] ||
             ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) ||
+            $slots[slots.title] ||
             restProps[replaceFields.title],
           dataRef: item,
           on,
@@ -188,7 +190,8 @@ export default {
   },
   render() {
     const props = getOptionProps(this);
-    const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props;
+    const { $slots, $scopedSlots } = this;
+    const { prefixCls: customizePrefixCls, showIcon, treeNodes, blockNode } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('tree', customizePrefixCls);
     const switcherIcon = getComponentFromProp(this, 'switcherIcon');
@@ -202,13 +205,16 @@ export default {
         ...props,
         prefixCls,
         checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`} /> : checkable,
-        children: filterEmpty(this.$slots.default || []),
+        children: filterEmpty($scopedSlots.default ? $scopedSlots.default() : $slots.default),
         __propsSymbol__: Symbol(),
         switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
       },
       on: getListeners(this),
       ref: 'tree',
-      class: !showIcon && `${prefixCls}-icon-hide`,
+      class: {
+        [`${prefixCls}-icon-hide`]: !showIcon,
+        [`${prefixCls}-block-node`]: blockNode,
+      },
     };
     if (treeData) {
       vcTreeProps.props.treeData = treeData;