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>
ant-design · Jun 6, 2022 · 4dd6fca · 4dd6fca
1 parent 2c1d512
commit 4dd6fca
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/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

diff --git a/components/tree-select/index.en-US.md b/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
 

diff --git a/components/tree-select/index.tsx b/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}
  />
  );
 };

diff --git a/components/tree-select/index.zh-CN.md b/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 方法
 

diff --git a/components/tree/DirectoryTree.tsx b/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}

diff --git a/package.json b/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",