Feat: support 'treeExpandAction' prop for TreeSelect

Author: NE-SmallTown

README.md

@@ -81,6 +81,7 @@ online example: https://tree-select-react-component.vercel.app/
 |treeDefaultExpandAll | default expand all treeNode | bool | false |
 |treeDefaultExpandedKeys | default expanded treeNode keys | Array<String> | - |
 |treeExpandedKeys | set tree expanded keys | Array<String> | - |
+|treeExpandAction | Tree open logic, optional: false \| `click` \| `doubleClick`, same as `expandAction` of `rc-tree` | string \| boolean | `click` |
 |treeCheckable | whether tree show checkbox (select callback will not fire) | bool | false |
 |treeCheckStrictly | check node precisely, parent and children nodes are not associated| bool | false |
 |filterTreeNode | whether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's value | bool/Function(inputValue:string, treeNode:TreeNode) | Function |

package.json

@@ -69,7 +69,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
     "rc-select": "~14.1.0",
-    "rc-tree": "~5.5.0",
+    "rc-tree": "~5.6.1",
     "rc-util": "^5.16.1"
   }
 }

src/OptionList.tsx

@@ -41,6 +41,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
     fieldNames,
     onSelect,
     dropdownMatchSelectWidth,
+    treeExpandAction,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -244,6 +245,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
         onExpand={onInternalExpand}
         onLoad={onTreeLoad}
         filterTreeNode={filterTreeNode}
+        expandAction={treeExpandAction}
       />
     </div>
   );

src/TreeSelect.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BaseSelect } from 'rc-select';
 import type { IconType } from 'rc-tree/lib/interface';
+import type { ExpandAction } from 'rc-tree/lib/Tree';
 import type {
   BaseSelectRef,
   BaseSelectPropsWithoutPrivate,
@@ -152,6 +153,7 @@ export interface TreeSelectProps<
   treeExpandedKeys?: React.Key[];
   treeDefaultExpandedKeys?: React.Key[];
   onTreeExpand?: (expandedKeys: React.Key[]) => void;
+  treeExpandAction: ExpandAction;
 
   // >>> Options
   virtual?: boolean;
@@ -217,6 +219,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeExpandedKeys,
     treeDefaultExpandedKeys,
     onTreeExpand,
+    treeExpandAction,
 
     // Options
     virtual,
@@ -647,6 +650,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       treeData: filteredTreeData,
       fieldNames: mergedFieldNames,
       onSelect: onOptionSelect,
+      treeExpandAction,
     }),
     [
       virtual,
@@ -656,6 +660,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       filteredTreeData,
       mergedFieldNames,
       onOptionSelect,
+      treeExpandAction,
     ],
   );
 

src/TreeSelectContext.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ExpandAction } from 'rc-tree/lib/Tree';
 import type { DefaultOptionType, InternalFieldName, OnInternalSelect } from './TreeSelect';
 
 export interface TreeSelectContextProps {
@@ -9,6 +10,7 @@ export interface TreeSelectContextProps {
   treeData: DefaultOptionType[];
   fieldNames: InternalFieldName;
   onSelect: OnInternalSelect;
+  treeExpandAction: ExpandAction;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.tree.treeExpandAction.js

@@ -0,0 +1,151 @@
+/* eslint-disable no-undef, react/no-multi-comp, no-console */
+import React from 'react';
+import { mount } from 'enzyme';
+import { resetWarned } from 'rc-util/lib/warning';
+import TreeSelect, { TreeNode as SelectNode } from '../src';
+
+describe('treeExpandAction with selectable props', () => {
+  const createSelect = props => {
+    const { selectable = false } = props;
+
+    return (
+      <TreeSelect {...props}>
+        <SelectNode key="0-0" value="0-0" title="0-0" selectable={selectable}>
+          <SelectNode key="0-0-0" value="0-0-0" title="0-0-0" selectable={selectable}>
+            <SelectNode key="0-0-0-0" value="0-0-0-0" title="0-0-0-0" selectable={selectable} />
+            <SelectNode key="0-0-0-1" title="0-0-0-1" selectable={selectable} />
+            invalid element
+          </SelectNode>
+          <SelectNode key="0-0-1" value="0-0-1" title="0-0-1" selectable={selectable}>
+            <SelectNode key="0-0-1-0" value="0-0-1-0" title="0-0-1-0" selectable={selectable} />
+            <SelectNode key="0-0-1-1" value="0-0-1-1" title="0-0-1-1" selectable={selectable} />
+          </SelectNode>
+        </SelectNode>
+      </TreeSelect>
+    );
+  };
+
+  it('title expandable when selectable is false and treeExpandAction is "click"', () => {
+    const onSelect = jest.fn();
+
+    class Test extends React.Component {
+      state = {
+        treeExpandedKeys: [],
+      };
+
+      onTreeExpand = treeExpandedKeys => {
+        this.setState({
+          treeExpandedKeys,
+        });
+      };
+
+      render() {
+        const { treeExpandedKeys } = this.state;
+
+        return createSelect({
+          open: true,
+          treeExpandedKeys,
+          onTreeExpand: this.onTreeExpand,
+          treeExpandAction: 'click',
+          onSelect,
+        });
+      }
+    }
+
+    const wrapper = mount(<Test />);
+
+    wrapper.clickNodeTitle('0-0');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0']);
+
+    onSelect.mockReset();
+
+    wrapper.clickNodeTitle('0-0-1');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0', '0-0-1']);
+
+    onSelect.mockReset();
+    wrapper.clickNodeTitle('0-0-1');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0']);
+  });
+
+  it('title expandable when selectable is false and treeExpandAction is "doubleClick"', () => {
+    const onSelect = jest.fn();
+
+    class Test extends React.Component {
+      state = {
+        treeExpandedKeys: [],
+      };
+
+      onTreeExpand = treeExpandedKeys => {
+        this.setState({
+          treeExpandedKeys,
+        });
+      };
+
+      render() {
+        const { treeExpandedKeys } = this.state;
+
+        return createSelect({
+          open: true,
+          treeExpandedKeys,
+          onTreeExpand: this.onTreeExpand,
+          treeExpandAction: 'doubleClick',
+          onSelect,
+        });
+      }
+    }
+
+    const wrapper = mount(<Test />);
+
+    wrapper.doubleClickNodeTitle('0-0');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0']);
+
+    onSelect.mockReset();
+
+    wrapper.doubleClickNodeTitle('0-0-1');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0', '0-0-1']);
+
+    onSelect.mockReset();
+    wrapper.doubleClickNodeTitle('0-0-1');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0']);
+  });
+
+  it('title un-expandable when selectable is false and treeExpandAction is false', () => {
+    const onSelect = jest.fn();
+
+    class Test extends React.Component {
+      state = {
+        treeExpandedKeys: ['0-0'],
+      };
+
+      onTreeExpand = treeExpandedKeys => {
+        this.setState({
+          treeExpandedKeys,
+        });
+      };
+
+      render() {
+        const { treeExpandedKeys } = this.state;
+
+        return createSelect({
+          open: true,
+          treeExpandedKeys,
+          onTreeExpand: this.onTreeExpand,
+          treeExpandAction: false,
+          onSelect,
+        });
+      }
+    }
+
+    const wrapper = mount(<Test />);
+
+    wrapper.clickNodeTitle('0-0-1');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(wrapper.find('Tree').props().expandedKeys).toEqual(['0-0']);
+  });
+});

tests/setup.js

@@ -14,14 +14,16 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     this.find('.rc-tree-select-selector').simulate('mousedown');
   },
   selectNode(index = 0) {
-    this.find('.rc-tree-select-tree-node-content-wrapper')
-      .at(index)
-      .simulate('click');
+    this.find('.rc-tree-select-tree-node-content-wrapper').at(index).simulate('click');
   },
   switchNode(index = 0) {
-    this.find('.rc-tree-select-tree-switcher')
-      .at(index)
-      .simulate('click');
+    this.find('.rc-tree-select-tree-switcher').at(index).simulate('click');
+  },
+  clickNodeTitle(title) {
+    this.find(`[title="${title}"]`).hostNodes().simulate('click');
+  },
+  doubleClickNodeTitle(title) {
+    this.find(`[title="${title}"]`).hostNodes().simulate('doubleClick');
   },
   getSelection(index) {
     const selections = this.find('.rc-tree-select-selection-item');
@@ -41,17 +43,12 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
       .simulate('click');
   },
   clearAll() {
-    return this.find('.rc-tree-select-clear')
-      .first()
-      .simulate('mouseDown');
+    return this.find('.rc-tree-select-clear').first().simulate('mouseDown');
   },
   search(text) {
-    this.find('input.rc-tree-select-selection-search-input').simulate(
-      'change',
-      {
-        target: { value: text },
-      },
-    );
+    this.find('input.rc-tree-select-selection-search-input').simulate('change', {
+      target: { value: text },
+    });
   },
   isOpen() {
     return this.find('.rc-tree-select').hasClass('rc-tree-select-open');