feat: Support source in the onSearch handler of Input.Search Componen…

…t when the value had changed (ant-design#44457) * feat: Support source in the onSearch handler of Input Component when the value had changed * feat: Support source in the onSearch handler of Input Component when the value had changed * feat: Support source in the onSearch handler of Input Component when the value had changed * feat: optimize code * feat: optimize code
ammar-knowledge · Aug 28, 2023 · 4a896e9 · 4a896e9
1 parent e7c7601
commit 4a896e9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 13 deletions.
diff --git a/components/input/Search.tsx b/components/input/Search.tsx
@@ -18,6 +18,9 @@ export interface SearchProps extends InputProps {
       | React.ChangeEvent<HTMLInputElement>
       | React.MouseEvent<HTMLElement>
       | React.KeyboardEvent<HTMLInputElement>,
+    info?: {
+      source?: 'clear' | 'input';
+    },
   ) => void;
   enterButton?: React.ReactNode;
   loading?: boolean;
@@ -55,7 +58,9 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e && e.target && e.type === 'click' && customOnSearch) {
-      customOnSearch((e as React.ChangeEvent<HTMLInputElement>).target.value, e);
+      customOnSearch((e as React.ChangeEvent<HTMLInputElement>).target.value, e, {
+        source: 'clear',
+      });
     }
     if (customOnChange) {
       customOnChange(e);
@@ -70,7 +75,9 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
 
   const onSearch = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => {
     if (customOnSearch) {
-      customOnSearch(inputRef.current?.input?.value!, e);
+      customOnSearch(inputRef.current?.input?.value!, e, {
+        source: 'input',
+      });
     }
   };
 

diff --git a/components/input/__tests__/Search.test.tsx b/components/input/__tests__/Search.test.tsx
@@ -52,7 +52,7 @@ describe('Input.Search', () => {
     const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
     fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
   });
 
   it('should trigger onSearch when click search button', () => {
@@ -62,7 +62,7 @@ describe('Input.Search', () => {
     );
     fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
   });
 
   it('should trigger onSearch when click search button with text', () => {
@@ -72,7 +72,7 @@ describe('Input.Search', () => {
     );
     fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
   });
 
   it('should trigger onSearch when click search button with customize button', () => {
@@ -86,7 +86,7 @@ describe('Input.Search', () => {
     );
     fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
   });
 
   it('should trigger onSearch when click search button of native', () => {
@@ -105,7 +105,7 @@ describe('Input.Search', () => {
     );
     fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
     expect(onButtonClick).toHaveBeenCalledTimes(1);
   });
 
@@ -114,7 +114,7 @@ describe('Input.Search', () => {
     const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
     fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
   });
 
   // https://github.com/ant-design/ant-design/issues/34844
@@ -128,7 +128,7 @@ describe('Input.Search', () => {
     fireEvent.compositionEnd(container.querySelector('input')!);
     fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' });
   });
 
   // https://github.com/ant-design/ant-design/issues/14785
@@ -150,7 +150,7 @@ describe('Input.Search', () => {
       <Search allowClear defaultValue="value" onSearch={onSearch} onChange={onChange} />,
     );
     fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
-    expect(onSearch).toHaveBeenLastCalledWith('', expect.anything());
+    expect(onSearch).toHaveBeenLastCalledWith('', expect.anything(), { source: 'clear' });
     expect(onChange).toHaveBeenCalled();
   });
 

diff --git a/components/input/demo/search-input.tsx b/components/input/demo/search-input.tsx
@@ -1,6 +1,7 @@
 import { AudioOutlined } from '@ant-design/icons';
 import React from 'react';
 import { Input, Space } from 'antd';
+import type { SearchProps } from '../Search';
 
 const { Search } = Input;
 
@@ -13,7 +14,7 @@ const suffix = (
   />
 );
 
-const onSearch = (value: string) => console.log(value);
+const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
 
 const App: React.FC = () => (
   <Space direction="vertical">

diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
@@ -97,7 +97,7 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
 | --- | --- | --- | --- |
 | enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false |
 | loading | Search box with loading | boolean | false |
-| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
+| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event, { source: "input" \| "clear" }) | - |
 
 Supports all props of `Input`.
 

diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
@@ -98,7 +98,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
 | --- | --- | --- | --- |
 | enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
 | loading | 搜索 loading | boolean | false |
-| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
+| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
 
 其余属性和 Input 一致。