fix: tree-select not update slots

Author: tangjinzhou

components/tree-select/index.tsx

@@ -12,8 +12,9 @@ import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import CaretDownOutlined from '@ant-design/icons-vue/CaretDownOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
-import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import omit from 'omit.js';
+import { convertChildrenToData } from './utils';
 
 const TreeSelect = defineComponent({
   TreeNode,
@@ -41,7 +42,7 @@ const TreeSelect = defineComponent({
     );
   },
   methods: {
-    saveTreeSelect(node) {
+    saveTreeSelect(node: any) {
       this.vcTreeSelect = node;
     },
     focus() {
@@ -51,7 +52,7 @@ const TreeSelect = defineComponent({
     blur() {
       this.vcTreeSelect.blur();
     },
-    renderSwitcherIcon(prefixCls, { isLeaf, loading }) {
+    renderSwitcherIcon(prefixCls: string, { isLeaf, loading }) {
       if (loading) {
         return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
       }
@@ -60,19 +61,19 @@ const TreeSelect = defineComponent({
       }
       return <CaretDownOutlined class={`${prefixCls}-switcher-icon`} />;
     },
-    handleChange(...args) {
+    handleChange(...args: any[]) {
       this.$emit('update:value', args[0]);
       this.$emit('change', ...args);
     },
-    handleTreeExpand(...args) {
+    handleTreeExpand(...args: any[]) {
       this.$emit('update:treeExpandedKeys', args[0]);
       this.$emit('treeExpand', ...args);
     },
-    handleSearch(...args) {
+    handleSearch(...args: any[]) {
       this.$emit('update:searchValue', args[0]);
       this.$emit('search', ...args);
     },
-    updateTreeData(treeData) {
+    updateTreeData(treeData: any[]) {
       const { $slots } = this;
       const defaultFields = {
         children: 'children',
@@ -164,9 +165,7 @@ const TreeSelect = defineComponent({
 
     const finalRemoveIcon = removeIcon || <CloseOutlined class={`${prefixCls}-remove-icon`} />;
 
-    const finalClearIcon = clearIcon || (
-      <CloseCircleOutlined class={`${prefixCls}-clear-icon`} theme="filled" />
-    );
+    const finalClearIcon = clearIcon || <CloseCircleFilled class={`${prefixCls}-clear-icon`} />;
     const VcTreeSelectProps = {
       ...this.$attrs,
       switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, nodeProps),
@@ -181,13 +180,12 @@ const TreeSelect = defineComponent({
       dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
       treeCheckable: checkable,
       notFoundContent: notFoundContent || renderEmpty('Select'),
-      ...(treeData ? { treeData } : {}),
       class: cls,
       onChange: this.handleChange,
       onSearch: this.handleSearch,
       onTreeExpand: this.handleTreeExpand,
       ref: this.saveTreeSelect,
-      children: getSlot(this),
+      treeData: treeData ? treeData : convertChildrenToData(getSlot(this)),
     };
     return (
       <VcTreeSelect
@@ -206,4 +204,12 @@ TreeSelect.install = function(app: App) {
   return app;
 };
 
-export default TreeSelect;
+export default TreeSelect as typeof TreeSelect & {
+  readonly TreeNode: typeof TreeNode;
+
+  readonly SHOW_ALL: typeof SHOW_ALL;
+
+  readonly SHOW_PARENT: typeof SHOW_PARENT;
+
+  readonly SHOW_CHILD: typeof SHOW_CHILD;
+};

components/tree-select/interface.jsx renamed to components/tree-select/interface.tsx

@@ -5,8 +5,8 @@ import { tuple } from '../_util/type';
 export const TreeData = PropTypes.shape({
   key: PropTypes.string,
   value: PropTypes.string,
-  label: PropTypes.any,
-  scopedSlots: PropTypes.object,
+  label: PropTypes.VNodeChild,
+  slots: PropTypes.object,
   children: PropTypes.array,
 }).loose;
 
@@ -19,7 +19,7 @@ export const TreeSelectProps = () => ({
   labelInValue: PropTypes.looseBool,
   loadData: PropTypes.func,
   maxTagCount: PropTypes.number,
-  maxTagPlaceholder: PropTypes.any,
+  maxTagPlaceholder: PropTypes.VNodeChild,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
@@ -33,11 +33,11 @@ export const TreeSelectProps = () => ({
     PropTypes.number,
   ]),
   multiple: PropTypes.looseBool,
-  notFoundContent: PropTypes.any,
+  notFoundContent: PropTypes.VNodeChild,
   searchPlaceholder: PropTypes.string,
   searchValue: PropTypes.string,
   showCheckedStrategy: PropTypes.oneOf(tuple('SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD')),
-  suffixIcon: PropTypes.any,
+  suffixIcon: PropTypes.VNodeChild,
   treeCheckable: PropTypes.looseBool,
   treeCheckStrictly: PropTypes.looseBool,
   treeData: PropTypes.arrayOf(Object),
@@ -52,8 +52,8 @@ export const TreeSelectProps = () => ({
   treeNodeFilterProp: PropTypes.string,
   treeNodeLabelProp: PropTypes.string,
   replaceFields: PropTypes.object.def({}),
-  clearIcon: PropTypes.any,
-  removeIcon: PropTypes.any,
+  clearIcon: PropTypes.VNodeChild,
+  removeIcon: PropTypes.VNodeChild,
 
   onSelect: PropTypes.func,
   onChange: PropTypes.func,

components/tree-select/utils.tsx

@@ -0,0 +1,34 @@
+import { flattenChildren, isValidElement } from '../_util/props-util';
+
+export function convertChildrenToData(nodes: any[]): any[] {
+  return flattenChildren(nodes)
+    .map(node => {
+      if (!isValidElement(node) || !node.type) {
+        return null;
+      }
+      const { default: d, ...restSlot } = node.children || {};
+      const children = d ? d() : [];
+      const {
+        key,
+        props: { value, ...restProps },
+      } = node;
+
+      const data = {
+        key,
+        value,
+        ...restProps,
+      };
+      Object.keys(restSlot).forEach(p => {
+        if (typeof restSlot[p] === 'function') {
+          data[p] = restSlot[p]();
+        }
+      });
+      const childData = convertChildrenToData(children);
+      if (childData.length) {
+        data.children = childData;
+      }
+
+      return data;
+    })
+    .filter(data => data);
+}

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

@@ -245,12 +245,11 @@ const Select = defineComponent({
             raf(() => {
               const popupNode = findDOMNode(this.popup);
               const triggerContainer = findPopupContainer(popupNode, `${prefixCls}-dropdown`);
-              const searchNode = this.popup.searchRef.current;
 
-              if (domNode && triggerContainer && searchNode) {
+              if (domNode && triggerContainer) {
                 scrollIntoView(domNode, triggerContainer, {
                   onlyScrollIfNeeded: true,
-                  offsetTop: searchNode.offsetHeight,
+                  offsetTop: 0,
                 });
               }
             });