feat: Merge searchValue,autoClearSearchValue and onSearch into the showSearch field (#593)

* feat: Merge searchValue and onSearch into the showSearch field

* feat: change ts( ShowSearchType=>SearchConfig) and combine autoClearSearchValue

* feat: combine autoClearSearchValue ,and add test,add doc

* docs: showSearch describe

---------

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

README.md

@@ -114,12 +114,6 @@ React.render(
   </tr>
   </thead>
   <tbody>
-    <tr>
-      <td>autoClearSearchValue</td>
-      <td>boolean</td>
-      <td>true</td>
-      <td>Whether the current search will be cleared on selecting an item. Only applies when checkable</td>
-    </tr>
     <tr>
       <td>options</td>
       <td>Object</td>
@@ -234,9 +228,28 @@ React.render(
       <td>>true</td>
       <td>hide popup on select</td>
     </tr>
+     <tr>
+      <td>showSearch</td>
+      <td>boolean | object</td>
+      <td>false</td>
+      <td>Whether show search input in single mode</td>
+    </tr>
   </tbody>
 </table>
 
+### showSearch
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when checkable| boolean | true |
+| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - |  |
+| limit | Set the count of filtered items | number \| false | 50 |  |
+| matchInputWidth | Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779)) | boolean | true |  |
+| render | Used to render filtered options | function(inputValue, path): ReactNode | - |  |
+| sort | Used to sort filtered options | function(a, b, inputValue) | - |  |
+| searchValue | The current input "search" text | string | - | - |
+| onSearch | called when input changed | function | - | - |
+
 ### option
 
 <table class="table table-bordered table-striped">

src/Cascader.tsx

@@ -40,7 +40,7 @@ export interface BaseOptionType {
 
 export type DefaultOptionType = BaseOptionType & Record<string, any>;
 
-export interface ShowSearchType<
+export interface SearchConfig<
   OptionType extends DefaultOptionType = DefaultOptionType,
   ValueField extends keyof OptionType = keyof OptionType,
 > {
@@ -63,6 +63,9 @@ export interface ShowSearchType<
   ) => number;
   matchInputWidth?: boolean;
   limit?: number | false;
+  searchValue?: string;
+  onSearch?: (value: string) => void;
+  autoClearSearchValue?: boolean;
 }
 
 export type ShowCheckedStrategy = typeof SHOW_PARENT | typeof SHOW_CHILD;
@@ -88,9 +91,12 @@ interface BaseCascaderProps<
   showCheckedStrategy?: ShowCheckedStrategy;
 
   // Search
+  /** @deprecated please use showSearch.autoClearSearchValue */
   autoClearSearchValue?: boolean;
-  showSearch?: boolean | ShowSearchType<OptionType>;
+  showSearch?: boolean | SearchConfig<OptionType>;
+  /** @deprecated please use showSearch.searchValue */
   searchValue?: string;
+  /** @deprecated please use showSearch.onSearch */
   onSearch?: (value: string) => void;
 
   // Trigger
@@ -205,9 +211,6 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     checkable,
 
     // Search
-    autoClearSearchValue = true,
-    searchValue,
-    onSearch,
     showSearch,
 
     // Trigger
@@ -267,21 +270,20 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   );
 
   // =========================== Search ===========================
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
+  const { autoClearSearchValue = true, searchValue, onSearch } = searchConfig;
   const [mergedSearchValue, setSearchValue] = useMergedState('', {
     value: searchValue,
     postState: search => search || '',
   });
 
   const onInternalSearch: BaseSelectProps['onSearch'] = (searchText, info) => {
     setSearchValue(searchText);
-
     if (info.source !== 'blur' && onSearch) {
       onSearch(searchText);
     }
   };
 
-  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch);
-
   const searchOptions = useSearchOptions(
     mergedSearchValue,
     mergedOptions,

src/hooks/useSearchConfig.ts

@@ -1,17 +1,21 @@
 import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
-import type { CascaderProps, ShowSearchType } from '../Cascader';
+import type { CascaderProps, SearchConfig } from '../Cascader';
 
 // Convert `showSearch` to unique config
-export default function useSearchConfig(showSearch?: CascaderProps['showSearch']) {
-  return React.useMemo<[boolean, ShowSearchType]>(() => {
+export default function useSearchConfig(showSearch?: CascaderProps['showSearch'], props?: any) {
+  const { autoClearSearchValue, searchValue, onSearch } = props;
+  return React.useMemo<[boolean, SearchConfig]>(() => {
     if (!showSearch) {
       return [false, {}];
     }
 
-    let searchConfig: ShowSearchType = {
+    let searchConfig: SearchConfig = {
       matchInputWidth: true,
       limit: 50,
+      autoClearSearchValue,
+      searchValue,
+      onSearch,
     };
 
     if (showSearch && typeof showSearch === 'object') {
@@ -30,5 +34,5 @@ export default function useSearchConfig(showSearch?: CascaderProps['showSearch']
     }
 
     return [true, searchConfig];
-  }, [showSearch]);
+  }, [showSearch, autoClearSearchValue, searchValue, onSearch]);
 }

src/hooks/useSearchOptions.ts

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import type { DefaultOptionType, InternalFieldNames, ShowSearchType } from '../Cascader';
+import type { DefaultOptionType, InternalFieldNames, SearchConfig } from '../Cascader';
 
 export const SEARCH_MARK = '__rc_cascader_search_mark__';
 
-const defaultFilter: ShowSearchType['filter'] = (search, options, { label = '' }) =>
+const defaultFilter: SearchConfig['filter'] = (search, options, { label = '' }) =>
   options.some(opt => String(opt[label]).toLowerCase().includes(search.toLowerCase()));
 
-const defaultRender: ShowSearchType['render'] = (inputValue, path, prefixCls, fieldNames) =>
+const defaultRender: SearchConfig['render'] = (inputValue, path, prefixCls, fieldNames) =>
   path.map(opt => opt[fieldNames.label as string]).join(' / ');
 
 const useSearchOptions = (
   search: string,
   options: DefaultOptionType[],
   fieldNames: InternalFieldNames,
   prefixCls: string,
-  config: ShowSearchType,
+  config: SearchConfig,
   enableHalfPath?: boolean,
 ) => {
   const { filter = defaultFilter, render = defaultRender, limit = 50, sort } = config;

src/index.tsx

@@ -6,7 +6,7 @@ export type {
   DefaultOptionType,
   CascaderProps,
   FieldNames,
-  ShowSearchType,
+  SearchConfig,
   CascaderRef,
 } from './Cascader';
 export { Panel };

tests/search.spec.tsx

@@ -308,6 +308,7 @@ describe('Cascader.Search', () => {
       <Cascader
         open
         searchValue="little"
+        showSearch
         options={[
           {
             label: 'bamboo',
@@ -352,4 +353,79 @@ describe('Cascader.Search', () => {
       '{"label":"bamboo","disabled":true,"value":"bamboo"}',
     );
   });
+
+  it('onSearch and searchValue in showSearch', () => {
+    const onSearch = jest.fn();
+    const wrapper = mount(<Cascader options={options} open showSearch={{ onSearch }} />);
+
+    // Leaf
+    doSearch(wrapper, 'toy');
+    let itemList = wrapper.find('div.rc-cascader-menu-item-content');
+    expect(itemList).toHaveLength(2);
+    expect(itemList.at(0).text()).toEqual('Label Bamboo / Label Little / Toy Fish');
+    expect(itemList.at(1).text()).toEqual('Label Bamboo / Label Little / Toy Cards');
+    expect(onSearch).toHaveBeenCalledWith('toy');
+
+    // Parent
+    doSearch(wrapper, 'Label Little');
+    itemList = wrapper.find('div.rc-cascader-menu-item-content');
+    expect(itemList).toHaveLength(2);
+    expect(itemList.at(0).text()).toEqual('Label Bamboo / Label Little / Toy Fish');
+    expect(itemList.at(1).text()).toEqual('Label Bamboo / Label Little / Toy Cards');
+    expect(onSearch).toHaveBeenCalledWith('Label Little');
+  });
+
+  it('searchValue in showSearch', () => {
+    const { container } = render(
+      <Cascader
+        open
+        showSearch={{ searchValue: 'little' }}
+        options={[
+          {
+            label: 'bamboo',
+            value: 'bamboo',
+            children: [
+              {
+                label: 'little',
+                value: 'little',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+    expect(container.querySelectorAll('.rc-cascader-menu-item')).toHaveLength(1);
+    expect(
+      (container.querySelector('.rc-cascader-selection-search-input') as HTMLInputElement)?.value,
+    ).toBe('little');
+  });
+  it('autoClearSearchValue in showSearch', () => {
+    const { container } = render(
+      <Cascader
+        open
+        checkable
+        showSearch={{ autoClearSearchValue: false }}
+        options={[
+          {
+            label: 'bamboo',
+            value: 'bamboo',
+            children: [
+              {
+                label: 'little',
+                value: 'little',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    const inputNode = container.querySelector<HTMLInputElement>(
+      '.rc-cascader-selection-search-input',
+    );
+    fireEvent.change(inputNode as HTMLInputElement, { target: { value: 'little' } });
+    expect(inputNode).toHaveValue('little');
+    fireEvent.click(document.querySelector('.rc-cascader-checkbox') as HTMLElement);
+    expect(inputNode).toHaveValue('little');
+  });
 });