feat: combine search props (#646)

* feat: combine showSearch

* feat: use hooks (add useSearchConfig)

* feat: change useSearchConfig memo value

* test: add test

* fix: delete inputValue in ShowSearch

* feat: inputValue Use `showSearch.searchValue` instead

* feat: change ts

* feat: change useSearchConfig

* feat: change useSearchConfig1

* feat: change useSearchConfig

* test: test showSearch

* test: test showSearch

* build: Upgrade @rc-component/select to 1.1.0

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>

Author: EmilyyyLiu

package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "classnames": "2.x",
-    "@rc-component/select": "~1.0.7",
+    "@rc-component/select": "~1.1.0",
     "@rc-component/tree": "~1.0.1",
     "@rc-component/util": "^1.2.1"
   },

src/TreeSelect.tsx

@@ -34,11 +34,19 @@ import type {
   FieldNames,
   LegacyDataNode,
 } from './interface';
+import useSearchConfig from './hooks/useSearchConfig';
 
 export type SemanticName = 'input' | 'prefix' | 'suffix';
 export type PopupSemantic = 'item' | 'itemTitle';
+export interface SearchConfig {
+  searchValue?: string;
+  onSearch?: (value: string) => void;
+  autoClearSearchValue?: boolean;
+  filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
+  treeNodeFilterProp?: string;
+}
 export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode>
-  extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles'> {
+  extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles' | 'showSearch'> {
   prefixCls?: string;
   id?: string;
   children?: React.ReactNode;
@@ -54,12 +62,18 @@ export interface TreeSelectProps<ValueType = any, OptionType extends DataNode =
   onChange?: (value: ValueType, labelList: React.ReactNode[], extra: ChangeEventExtra) => void;
 
   // >>> Search
+  showSearch?: boolean | SearchConfig;
+  /** @deprecated Use `showSearch.searchValue` instead */
   searchValue?: string;
-  /** @deprecated Use `searchValue` instead */
+  /** @deprecated Use `showSearch.searchValue` instead */
   inputValue?: string;
+  /** @deprecated Use `showSearch.onSearch` instead */
   onSearch?: (value: string) => void;
+  /** @deprecated Use `showSearch.autoClearSearchValue` instead */
   autoClearSearchValue?: boolean;
+  /** @deprecated Use `showSearch.filterTreeNode` instead */
   filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
+  /** @deprecated Use `showSearch.treeNodeFilterProp` instead */
   treeNodeFilterProp?: string;
 
   // >>> Select
@@ -127,12 +141,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     onDeselect,
 
     // Search
-    searchValue,
-    inputValue,
-    onSearch,
-    autoClearSearchValue = true,
-    filterTreeNode,
-    treeNodeFilterProp = 'value',
+    showSearch,
 
     // Selector
     showCheckedStrategy,
@@ -193,6 +202,15 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   const mergedLabelInValue = treeCheckStrictly || labelInValue;
   const mergedMultiple = mergedCheckable || multiple;
 
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
+  const {
+    searchValue,
+    onSearch,
+    autoClearSearchValue = true,
+    filterTreeNode,
+    treeNodeFilterProp = 'value',
+  } = searchConfig;
+
   const [internalValue, setInternalValue] = useMergedState(defaultValue, { value });
 
   // `multiple` && `!treeCheckable` should be show all
@@ -219,7 +237,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
   // =========================== Search ===========================
   const [mergedSearchValue, setSearchValue] = useMergedState('', {
-    value: searchValue !== undefined ? searchValue : inputValue,
+    value: searchValue,
     postState: search => search || '',
   });
 
@@ -725,6 +743,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
           displayValues={cachedDisplayValues}
           onDisplayValuesChange={onDisplayValuesChange}
           // >>> Search
+          {...searchConfig}
+          showSearch={mergedShowSearch}
           searchValue={mergedSearchValue}
           onSearch={onInternalSearch}
           // >>> Options

src/hooks/useSearchConfig.ts

@@ -0,0 +1,39 @@
+import type { SearchConfig, TreeSelectProps } from '@/TreeSelect';
+import * as React from 'react';
+
+// Convert `showSearch` to unique config
+export default function useSearchConfig(
+  showSearch: boolean | SearchConfig,
+  props: TreeSelectProps,
+) {
+  const {
+    searchValue,
+    inputValue,
+    onSearch,
+    autoClearSearchValue,
+    filterTreeNode,
+    treeNodeFilterProp,
+  } = props;
+  return React.useMemo<[boolean | undefined, SearchConfig]>(() => {
+    const isObject = typeof showSearch === 'object';
+
+    const searchConfig: SearchConfig = {
+      searchValue: searchValue ?? inputValue,
+      onSearch,
+      autoClearSearchValue,
+      filterTreeNode,
+      treeNodeFilterProp,
+      ...(isObject ? showSearch : {}),
+    };
+
+    return [isObject ? true : showSearch, searchConfig];
+  }, [
+    showSearch,
+    searchValue,
+    inputValue,
+    onSearch,
+    autoClearSearchValue,
+    filterTreeNode,
+    treeNodeFilterProp,
+  ]);
+}

tests/Select.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { mount } from 'enzyme';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React from 'react';
@@ -709,4 +709,147 @@ describe('TreeSelect.basic', () => {
     expect(itemTitle).toHaveStyle(customStyles.popup.itemTitle);
     expect(item).toHaveStyle(customStyles.popup.item);
   });
+
+  describe('combine showSearch', () => {
+    const treeData = [
+      { key: '0', value: 'a', title: '0 label' },
+      {
+        key: '1',
+        value: 'b',
+        title: '1 label',
+        children: [
+          { key: '10', value: 'ba', title: '10 label' },
+          { key: '11', value: 'bb', title: '11 label' },
+        ],
+      },
+    ];
+    it('searchValue and onSearch', () => {
+      const currentSearchFn = jest.fn();
+      const legacySearchFn = jest.fn();
+      const { container } = render(
+        <>
+          <div id="test1">
+            <TreeSelect
+              showSearch
+              searchValue="1-10"
+              onSearch={currentSearchFn}
+              open
+              treeDefaultExpandAll
+              treeData={treeData}
+            />
+          </div>
+          <div id="test2">
+            <TreeSelect
+              showSearch={{ searchValue: '1-10', onSearch: legacySearchFn }}
+              open
+              treeDefaultExpandAll
+              treeData={treeData}
+            />
+          </div>
+        </>,
+      );
+      const legacyInput = container.querySelector<HTMLInputElement>('#test1 input');
+      const currentInput = container.querySelector<HTMLInputElement>('#test2 input');
+      fireEvent.change(legacyInput, { target: { value: '2' } });
+      fireEvent.change(currentInput, { target: { value: '2' } });
+      expect(currentSearchFn).toHaveBeenCalledWith('2');
+      expect(legacySearchFn).toHaveBeenCalledWith('2');
+    });
+    it('treeNodeFilterProp and autoClearSearchValue', () => {
+      const { container } = render(
+        <>
+          <div id="test1">
+            <TreeSelect
+              showSearch
+              open
+              treeDefaultExpandAll
+              treeData={treeData}
+              autoClearSearchValue={false}
+              treeNodeFilterProp="value"
+            />
+          </div>
+          <div id="test2">
+            <TreeSelect
+              showSearch={{
+                autoClearSearchValue: false,
+                treeNodeFilterProp: 'value',
+              }}
+              open
+              treeDefaultExpandAll
+              treeData={treeData}
+            />
+          </div>
+        </>,
+      );
+      const legacyInput = container.querySelector<HTMLInputElement>('#test1 input');
+      const currentInput = container.querySelector<HTMLInputElement>('#test2 input');
+      fireEvent.change(legacyInput, { target: { value: 'a' } });
+      fireEvent.change(currentInput, { target: { value: 'a' } });
+      const legacyItem = container.querySelector<HTMLInputElement>(
+        '#test1 .rc-tree-select-tree-title',
+      );
+      const currentItem = container.querySelector<HTMLInputElement>(
+        '#test2 .rc-tree-select-tree-title',
+      );
+
+      expect(legacyInput).toHaveValue('a');
+      expect(currentInput).toHaveValue('a');
+      fireEvent.click(legacyItem);
+      fireEvent.click(currentItem);
+      const valueSpan = container.querySelectorAll<HTMLSpanElement>(
+        ' .rc-tree-select-selection-item',
+      );
+
+      expect(valueSpan[0]).toHaveTextContent('0 label');
+      expect(valueSpan[1]).toHaveTextContent('0 label');
+    });
+    it('filterTreeNode', () => {
+      const { container } = render(
+        <>
+          <div id="test1">
+            <TreeSelect
+              showSearch
+              open
+              treeDefaultExpandAll
+              treeData={treeData}
+              filterTreeNode={(inputValue, node) => node.value === inputValue}
+            />
+          </div>
+          <div id="test2">
+            <TreeSelect
+              showSearch={{
+                filterTreeNode: (inputValue, node) => node.value === inputValue,
+              }}
+              open
+              treeDefaultExpandAll
+              treeData={treeData}
+            />
+          </div>
+        </>,
+      );
+      const legacyInput = container.querySelector<HTMLInputElement>('#test1 input');
+      const currentInput = container.querySelector<HTMLInputElement>('#test2 input');
+      fireEvent.change(legacyInput, { target: { value: 'bb' } });
+      fireEvent.change(currentInput, { target: { value: 'bb' } });
+      const options = container.querySelectorAll<HTMLDivElement>(' .rc-tree-select-tree-title');
+
+      expect(options).toHaveLength(4);
+    });
+    it.each([
+      // [description, props, shouldExist]
+      ['showSearch=false ', { showSearch: false }, false],
+      ['showSearch=undefined ', {}, false],
+      ['showSearch=true', { showSearch: true }, true],
+    ])('%s', (_, props: { showSearch?: boolean; mode?: 'tags' }, shouldExist) => {
+      const { container } = render(
+        <TreeSelect open treeDefaultExpandAll treeData={treeData} {...props} />,
+      );
+      const inputNode = container.querySelector('input');
+      if (shouldExist) {
+        expect(inputNode).not.toHaveAttribute('readonly');
+      } else {
+        expect(inputNode).toHaveAttribute('readonly');
+      }
+    });
+  });
 });