Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Support source in the onSearch handler of Input.Search Component when the value had changed #44457

Merged
merged 6 commits into from Aug 28, 2023
Merged

feat: Support source in the onSearch handler of Input.Search Component when the value had changed #44457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a70d1a3
feat: Support source in the onSearch handler of Input Component when …
kiner-tang Aug 28, 2023
2c75ae0
feat: Support source in the onSearch handler of Input Component when …
kiner-tang Aug 28, 2023
9c5441a
feat: Support source in the onSearch handler of Input Component when …
kiner-tang Aug 28, 2023
d78ed8e
feat: optimize code
kiner-tang Aug 28, 2023
62a2cf1
Merge branch 'feature' into feat-search-source
kiner-tang Aug 28, 2023
ad62e71
feat: optimize code
kiner-tang Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 9 additions & 2 deletions components/input/Search.tsx
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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',
});
}
};

Expand Down
16 changes: 8 additions & 8 deletions components/input/__tests__/Search.test.tsx
View file
Open in desktop
Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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);
});

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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();
});

Expand Down
3 changes: 2 additions & 1 deletion components/input/demo/search-input.tsx
View file
Open in desktop
@@ -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;

Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion components/input/index.en-US.md
View file
Open in desktop
Expand Up @@ -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`.

Expand Down
2 changes: 1 addition & 1 deletion components/input/index.zh-CN.md
View file
Open in desktop
Expand Up @@ -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 一致。

Expand Down