Feat: support 'treeExpandAction' prop for TreeSelect (#35618)

* Feat: support 'treeExpandAction' prop for TreeSelect

* chore: bump rc-tree

* chore: fix lint

* fix: fix directory tree duplicate expandAction

* fix: fix directory tree duplicate expandAction

* fix: fix directory tree duplicate expandAction

* chore: add docs

Co-authored-by: zombiej <smith3816@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
+import type { FieldDataNode } from 'rc-tree';
 import FilterFilled from '@ant-design/icons/FilterFilled';
 import Button from '../../../button';
 import Menu from '../../../menu';
 import type { MenuProps } from '../../../menu';
 import Tree from '../../../tree';
-import type { DataNode, EventDataNode } from '../../../tree';
+import type { EventDataNode } from '../../../tree';
 import Checkbox from '../../../checkbox';
 import type { CheckboxChangeEvent } from '../../../checkbox';
 import Radio from '../../../radio';
@@ -27,6 +28,8 @@ import { flattenKeys } from '.';
 import useSyncState from '../../../_util/hooks/useSyncState';
 import { ConfigContext } from '../../../config-provider/context';
 
+type FilterTreeDataNode = FieldDataNode<{ title: React.ReactNode; key: React.Key }>;
+
 interface FilterRestProps {
   confirm?: Boolean;
   closeDropdown?: Boolean;
@@ -160,7 +163,10 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     setFilteredKeysSync(selectedKeys);
   };
 
-  const onCheck = (keys: Key[], { node, checked }: { node: EventDataNode; checked: boolean }) => {
+  const onCheck = (
+    keys: Key[],
+    { node, checked }: { node: EventDataNode<FilterTreeDataNode>; checked: boolean },
+  ) => {
     if (!filterMultiple) {
       onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
     } else {
@@ -286,7 +292,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   const getTreeData = ({ filters }: { filters?: ColumnFilterItem[] }) =>
     (filters || []).map((filter, index) => {
       const key = String(filter.value);
-      const item: DataNode = {
+      const item: FilterTreeDataNode = {
         title: filter.text,
         key: filter.value !== undefined ? key : index,
       };
@@ -351,7 +357,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
                   {locale.filterCheckall}
                 </Checkbox>
               ) : null}
-              <Tree
+              <Tree<FilterTreeDataNode>
                 checkable
                 selectable={false}
                 blockNode

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

@@ -66,6 +66,7 @@ Tree selection control.
 | onSearch | A callback function, can be executed when the search input changes | function(value: string) | - |  |
 | onSelect | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - |  |
 | onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - |  |
+| treeExpandAction | Tree title open logic when click, optional: false \| `click` \| `doubleClick` | string \| boolean | false |  |
 
 ### Tree Methods
 

components/tree-select/index.tsx

@@ -77,6 +77,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     choiceTransitionName = '',
     status: customStatus,
     showArrow,
+    treeExpandAction,
     ...props
   }: TreeSelectProps<OptionType>,
   ref: React.Ref<BaseSelectRef>,
@@ -208,6 +209,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
         transitionName,
       )}
       showArrow={hasFeedback || showArrow}
+      treeExpandAction={treeExpandAction}
     />
   );
 };

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

@@ -67,6 +67,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | onSearch | 文本框值变化时回调 | function(value: string) | - |  |
 | onSelect | 被选中时调用 | function(value, node, extra) | - |  |
 | onTreeExpand | 展示节点时调用 | function(expandedKeys) | - |  |
+| treeExpandAction | 点击节点 title 时的展开逻辑，可选：false \| `click` \| `doubleClick` | string \| boolean | false |  |
 
 ### Tree 方法
 

components/tree/DirectoryTree.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import type RcTree from 'rc-tree';
 import debounce from 'lodash/debounce';
 import { conductExpandParent } from 'rc-tree/lib/util';
+import omit from 'rc-util/lib/omit';
 import type { EventDataNode, DataNode, Key } from 'rc-tree/lib/interface';
 import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil';
 import FileOutlined from '@ant-design/icons/FileOutlined';
@@ -104,7 +105,7 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
   const onExpand = (
     keys: Key[],
     info: {
-      node: EventDataNode;
+      node: EventDataNode<any>;
       expanded: boolean;
       nativeEvent: MouseEvent;
     },
@@ -116,7 +117,7 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
     return props.onExpand?.(keys, info);
   };
 
-  const onClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode) => {
+  const onClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode<any>) => {
     const { expandAction } = props;
 
     // Expand the tree
@@ -127,7 +128,7 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
     props.onClick?.(event, node);
   };
 
-  const onDoubleClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode) => {
+  const onDoubleClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode<any>) => {
     const { expandAction } = props;
 
     // Expand the tree
@@ -218,7 +219,7 @@ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps>
       icon={getIcon}
       ref={treeRef}
       blockNode
-      {...otherProps}
+      {...omit(otherProps, ['expandAction'])}
       prefixCls={prefixCls}
       className={connectClassName}
       expandedKeys={expandedKeys}

package.json

@@ -123,7 +123,7 @@
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "moment": "^2.29.2",
-    "rc-cascader": "~3.5.0",
+    "rc-cascader": "~3.6.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.3.0",
     "rc-dialog": "~8.8.2",
@@ -151,8 +151,8 @@
     "rc-tabs": "~11.16.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.1.1",
-    "rc-tree": "~5.5.0",
-    "rc-tree-select": "~5.3.0",
+    "rc-tree": "~5.6.4",
+    "rc-tree-select": "~5.4.0",
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.20.0",