feat: combine search props

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,49 @@
+import type { SearchConfig } from '@/TreeSelect';
+import * as React from 'react';
+const legacySearchProps = [
+  'searchValue',
+  'onSearch',
+  'autoClearSearchValue',
+  'filterTreeNode',
+  'treeNodeFilterProp',
+];
+// Convert `showSearch` to unique config
+export default function useSearchConfig(showSearch: boolean | SearchConfig, props: any) {
+  const {
+    searchValue,
+    inputValue,
+    onSearch,
+    autoClearSearchValue,
+    filterTreeNode,
+    treeNodeFilterProp,
+  } = props;
+  return React.useMemo<[boolean, SearchConfig]>(() => {
+    const legacyShowSearch: SearchConfig = {};
+    legacySearchProps.forEach(name => {
+      const val = props?.[name];
+      if (val !== undefined) {
+        legacyShowSearch[name] = val;
+      }
+      if (name === 'searchValue') {
+        legacyShowSearch[name] = val ?? props?.inputValue;
+      }
+    });
+    const searchConfig: SearchConfig =
+      typeof showSearch === 'object' ? showSearch : legacyShowSearch;
+    if (showSearch === undefined) {
+      return [undefined, searchConfig];
+    }
+    if (!showSearch) {
+      return [false, {}];
+    }
+    return [true, 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,131 @@ 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);
+    });
+  });
 });