feat: update tree-select

components/tree-select/index.en-US.md

@@ -19,6 +19,7 @@
 | placeholder | Placeholder of the select input | string\|slot | - |
 | searchPlaceholder | Placeholder of the search input | string\|slot | - |
 | searchValue(.sync) | work with `search` event to make search value controlled. | string | - |
+| treeIcon | 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 |
 | showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
 | showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false |
 | size | To set the size of the select input, options: `large` `small` | string | 'default' |

components/tree-select/index.jsx

@@ -1,7 +1,6 @@
 import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
 import classNames from 'classnames';
 import { TreeSelectProps } from './interface';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import warning from '../_util/warning';
 import {
   initDefaultProps,
@@ -10,9 +9,8 @@ import {
   filterEmpty,
   isValidElement,
 } from '../_util/props-util';
-
+import { ConfigConsumerProps } from '../config-provider';
 export { TreeData, TreeSelectProps } from './interface';
-
 import Icon from '../icon';
 import omit from 'omit.js';
 import { cloneElement } from '../_util/vnode';
@@ -24,7 +22,6 @@ const TreeSelect = {
   SHOW_CHILD,
   name: 'ATreeSelect',
   props: initDefaultProps(TreeSelectProps(), {
-    prefixCls: 'ant-select',
     transitionName: 'slide-up',
     choiceTransitionName: 'zoom',
     showSearch: false,
@@ -50,8 +47,7 @@ const TreeSelect = {
     blur() {
       this.$refs.vcTreeSelect.blur();
     },
-    renderSwitcherIcon({ isLeaf, loading }) {
+    renderSwitcherIcon(prefixCls, { isLeaf, loading }) {
-      const { prefixCls } = this.$props;
       if (loading) {
         return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`} />;
       }
@@ -83,18 +79,26 @@ const TreeSelect = {
         Object.assign(list[i], item);
       }
     },
-    renderTreeSelect(locale) {
+  },
-      const props = getOptionProps(this);
 
+  render(h) {
+    const props = getOptionProps(this);
       const {
-        prefixCls,
+        prefixCls: customizePrefixCls,
         size,
-        notFoundContent,
         dropdownStyle,
         dropdownClassName,
         getPopupContainer,
         ...restProps
       } = props;
+      const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+      const prefixCls = getPrefixCls('select', customizePrefixCls);
+
+      const renderEmpty = (
+        this.configProvider.renderEmpty &&
+        this.configProvider.renderEmpty()
+      ) || ConfigConsumerProps.renderEmpty;
+      const notFoundContent = getComponentFromProp(this, 'notFoundContent');
       const { getPopupContainer: getContextPopupContainer } = this.configProvider;
       const rest = omit(restProps, [
         'inputIcon',
@@ -126,10 +130,9 @@ const TreeSelect = {
       const clearIcon = (
         <Icon type="close-circle" class={`${prefixCls}-clear-icon`} theme="filled" />
       );
-
       const VcTreeSelectProps = {
         props: {
-          switcherIcon: this.renderSwitcherIcon,
+          switcherIcon: (nodeProps) => this.renderSwitcherIcon(prefixCls, nodeProps),
           inputIcon,
           removeIcon,
           clearIcon,
@@ -139,7 +142,7 @@ const TreeSelect = {
           prefixCls,
           dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
           treeCheckable: checkable,
-          notFoundContent: notFoundContent || locale.notFoundContent,
+          notFoundContent: notFoundContent || renderEmpty(h, 'Select'),
           __propsSymbol__: Symbol(),
         },
         class: cls,
@@ -148,17 +151,6 @@ const TreeSelect = {
         scopedSlots: this.$scopedSlots,
       };
       return <VcTreeSelect {...VcTreeSelectProps}>{filterEmpty(this.$slots.default)}</VcTreeSelect>;
-    },
-  },
-
-  render() {
-    return (
-      <LocaleReceiver
-        componentName="Select"
-        defaultLocale={{}}
-        scopedSlots={{ default: this.renderTreeSelect }}
-      />
-    );
   },
 };
 

components/tree-select/index.zh-CN.md

@@ -19,6 +19,7 @@
 | placeholder | 选择框默认文字 | string\|slot | - |
 | searchPlaceholder | 搜索框默认文字 | string\|slot | - |
 | searchValue(.sync) | 搜索框的值，可以通过 `search` 事件获取用户输入 | string | - |
+| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
 | showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
 | showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false |
 | size | 选择框大小，可选 `large` `small` | string | 'default' |

components/tree-select/interface.jsx

@@ -22,6 +22,7 @@ export const TreeSelectProps = () => ({
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
   multiple: PropTypes.bool,
+  notFoundContent: PropTypes.any,
   // onSelect: (value: any) => void,
   // onChange: (value: any, label: any) => void,
   // onSearch: (value: any) => void,
@@ -29,7 +30,7 @@ export const TreeSelectProps = () => ({
   searchValue: PropTypes.string,
   showCheckedStrategy: PropTypes.oneOf(['SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD']),
   suffixIcon: PropTypes.any,
-  treeCheckable: PropTypes.bool,
+  treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]),
   treeCheckStrictly: PropTypes.bool,
   treeData: PropTypes.arrayOf(Object),
   treeDataSimpleMode: PropTypes.oneOfType([Boolean, Object]),
@@ -38,6 +39,7 @@ export const TreeSelectProps = () => ({
   dropdownMatchSelectWidth: PropTypes.bool,
   treeDefaultExpandAll: PropTypes.bool,
   treeExpandedKeys: PropTypes.array,
+  treeIcon: PropTypes.bool,
   treeDefaultExpandedKeys: PropTypes.array,
   treeNodeFilterProp: PropTypes.string,
   treeNodeLabelProp: PropTypes.string,

components/vc-tree-select/src/Select.jsx

@@ -104,7 +104,7 @@ const Select = {
       treeDataSimpleMode: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
       treeNodeFilterProp: PropTypes.string,
       treeNodeLabelProp: PropTypes.string,
-      treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]),
+      treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.object, PropTypes.bool]),
       // treeCheckable: PropTypes.any,
       treeCheckStrictly: PropTypes.bool,
       treeIcon: PropTypes.bool,