feat: update tree

components/config-provider/index.jsx

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import PropTypes from '../_util/vue-types';
-import { filterEmpty } from '../_util/props-util';
+import { filterEmpty, getComponentFromProp } from '../_util/props-util';
 import defaultRenderEmpty from './renderEmpty';
 
 function getWatch(keys = []) {
@@ -46,7 +46,7 @@ const ConfigProvider = {
   },
   methods: {
     renderEmptyComponent() {
-      const customRender = (this.$scopedSlots && this.$scopedSlots['renderEmpty']) || this.$slots['renderEmpty'];
+      const customRender = getComponentFromProp(this,'renderEmpty');
       return this.$props.renderEmpty || customRender || defaultRenderEmpty;
     },
     getPrefixCls(suffixCls, customizePrefixCls) {

components/tree/DirectoryTree.jsx

@@ -7,6 +7,7 @@ import { calcRangeKeys, getFullKeyList } from './util';
 import Icon from '../icon';
 import BaseMixin from '../_util/BaseMixin';
 import { initDefaultProps, getOptionProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 // export type ExpandAction = false | 'click' | 'doubleClick';
 
@@ -37,7 +38,6 @@ export default {
   props: initDefaultProps(
     { ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleclick']) },
     {
-      prefixCls: 'ant-tree',
       showIcon: true,
       expandAction: 'click',
     },
@@ -49,7 +49,9 @@ export default {
   // // Shift click usage
   // lastSelectedKey?: string;
   // cachedSelectedKeys?: string[];
-
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     const props = getOptionProps(this);
     const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys } = props;
@@ -181,7 +183,9 @@ export default {
   },
 
   render() {
-    const { prefixCls, ...props } = getOptionProps(this);
+    const { prefixCls: customizePrefixCls, ...props } = getOptionProps(this);
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('tree', customizePrefixCls);
     const { _expandedKeys: expandedKeys, _selectedKeys: selectedKeys } = this.$data;
     const treeProps = {
       props: {

components/tree/Tree.jsx

@@ -2,7 +2,9 @@ import warning from 'warning';
 import { Tree as VcTree, TreeNode } from '../vc-tree';
 import animation from '../_util/openAnimation';
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps, filterEmpty } from '../_util/props-util';
+import { initDefaultProps, getOptionProps, filterEmpty, getComponentFromProp, getClass } from '../_util/props-util';
+import { cloneElement } from '../_util/vnode';
+import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
 
 function TreeProps() {
@@ -73,6 +75,7 @@ function TreeProps() {
     // onDrop: (options: AntTreeNodeMouseEvent) => void,
     showIcon: PropTypes.bool,
     icon: PropTypes.func,
+    switcherIcon: PropTypes.any,
     prefixCls: PropTypes.string,
     filterTreeNode: PropTypes.func,
     openAnimation: PropTypes.any,
@@ -90,7 +93,6 @@ export default {
     event: 'check',
   },
   props: initDefaultProps(TreeProps(), {
-    prefixCls: 'ant-tree',
     checkable: false,
     showIcon: false,
     openAnimation: {
@@ -98,6 +100,9 @@ export default {
       props: { appear: null },
     },
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   created() {
     warning(
       !('treeNodes' in getOptionProps(this)),
@@ -106,8 +111,8 @@ export default {
   },
   TreeNode,
   methods: {
-    renderSwitcherIcon({ isLeaf, expanded, loading }) {
-      const { prefixCls, showLine } = this.$props;
+    renderSwitcherIcon(prefixCls, switcherIcon, { isLeaf, expanded, loading }) {
+      const { showLine } = this.$props;
       if (loading) {
         return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`} />;
       }
@@ -123,10 +128,20 @@ export default {
           />
         );
       } else {
+        const switcherCls = `${prefixCls}-switcher-icon`;
         if (isLeaf) {
           return null;
+        }else if (switcherIcon) {
+          const switcherOriginCls = getClass(switcherIcon[0]);
+          return cloneElement(switcherIcon, {
+            class: {
+              ...switcherOriginCls,
+              [switcherCls]: true,
+            },
+          });
+        } else {
+          return <Icon type="caret-down" class={`${prefixCls}-switcher-icon`} theme="filled" />;
         }
-        return <Icon type="caret-down" class={`${prefixCls}-switcher-icon`} theme="filled" />;
       }
     },
     updateTreeData(treeData) {
@@ -167,7 +182,10 @@ export default {
   },
   render() {
     const props = getOptionProps(this);
-    const { prefixCls, showIcon, treeNodes } = props;
+    const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('tree', customizePrefixCls);
+    const switcherIcon = getComponentFromProp(this, 'switcherIcon');
     const checkable = props.checkable;
     let treeData = props.treeData || treeNodes;
     if (treeData) {
@@ -176,10 +194,11 @@ export default {
     const vcTreeProps = {
       props: {
         ...props,
+        prefixCls,
         checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`} /> : checkable,
         children: filterEmpty(this.$slots.default || []),
         __propsSymbol__: Symbol(),
-        switcherIcon: this.renderSwitcherIcon,
+        switcherIcon: (nodeProps) => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
       },
       on: this.$listeners,
       ref: 'tree',

components/tree/demo/customized-icon.md

@@ -16,6 +16,7 @@ You can customize icons for different nodes.
     defaultExpandAll
     :defaultSelectedKeys="['0-0-0']"
   >
+    <a-icon type="down" slot="switcherIcon" />
     <a-icon slot="smile" type="smile-o" />
     <a-icon slot="meh" type="smile-o" />
     <template slot="custom" slot-scope="{selected}">

components/tree/index.en-US.md

@@ -24,6 +24,7 @@
 | multiple | Allows selecting multiple treeNodes | boolean | false |
 | selectedKeys(.sync) | (Controlled) Specifies the keys of the selected treeNodes | string\[] \| number\[] | - |
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
+| switcherIcon | customize collapse/expand icon of tree node | slot(vnode) | - |
 | showLine | Shows a connecting line | boolean | false |
 
 ### Events
@@ -66,3 +67,9 @@ One of the Tree `treeNode` prop for describing the tree's node, TreeNode has the
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | expandAction | Directory open logic, optional `false` `'click'` `'doubleclick'` | string | click |
+
+## FAQ
+
+### How to hide file icon when use showLine?
+
+File icon realize by using switcherIcon. You can overwrite the style to hide it

components/tree/index.zh-CN.md

@@ -24,6 +24,7 @@
 | multiple | 支持点选多个节点（节点本身） | boolean | false |
 | selectedKeys(.sync) | （受控）设置选中的树节点 | string\[] \| number\[] | - |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
+| switcherIcon | 自定义树节点的展开/折叠图标 | slot(vnode) | - |
 | showLine | 是否展示连接线 | boolean | false |
 
 
@@ -68,5 +69,11 @@
 | --- | --- | --- | --- |
 | expandAction | 目录展开逻辑，可选 `false` `'click'` `'doubleclick'` | string | click |
 
+## FAQ
+
+### 在 showLine 时，如何隐藏子节点图标？
+
+文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式
+