ant-design/components/input/Search.tsx
afc163 59ad48476b
refactor: add boime lint and fix lint errrors ()
* chore: add boime lint

* fix lint

* use files ignore

* revert change

* ignore clarity.js

* fix some errors

* fix some errors

* fix some errors

* fix some errors

* add yml file

* Update clarity.js

Signed-off-by: afc163 <afc163@gmail.com>

* add npm run lint:biome

* add npm run lint:biome

* fix test case

* fix ts errors

* fix ts errors

* fix lint and add .lintstagedrc

* shorten prop name

* chore: update package.json

* update biome.json

* chore: remove stylelint

* chore: useOptionalChain

* fix lint

* biome format

* prettier all code

* prettier all code

* fix site test

---------

Signed-off-by: afc163 <afc163@gmail.com>
2024-06-22 21:59:12 +08:00

182 lines
4.8 KiB
TypeScript

import * as React from 'react';
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import { cloneElement } from '../_util/reactNode';
import Button from '../button';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import { useCompactItemContext } from '../space/Compact';
import type { InputProps, InputRef } from './Input';
import Input from './Input';
export interface SearchProps extends InputProps {
inputPrefixCls?: string;
onSearch?: (
value: string,
event?:
| React.ChangeEvent<HTMLInputElement>
| React.MouseEvent<HTMLElement>
| React.KeyboardEvent<HTMLInputElement>,
info?: {
source?: 'clear' | 'input';
},
) => void;
enterButton?: React.ReactNode;
loading?: boolean;
}
const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
inputPrefixCls: customizeInputPrefixCls,
className,
size: customizeSize,
suffix,
enterButton = false,
addonAfter,
loading,
disabled,
onSearch: customOnSearch,
onChange: customOnChange,
onCompositionStart,
onCompositionEnd,
...restProps
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const composedRef = React.useRef<boolean>(false);
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const { compactSize } = useCompactItemContext(prefixCls, direction);
const size = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
const inputRef = React.useRef<InputRef>(null);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e?.target && e.type === 'click' && customOnSearch) {
customOnSearch((e as React.ChangeEvent<HTMLInputElement>).target.value, e, {
source: 'clear',
});
}
customOnChange?.(e);
};
const onMouseDown: React.MouseEventHandler<HTMLElement> = (e) => {
if (document.activeElement === inputRef.current?.input) {
e.preventDefault();
}
};
const onSearch = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => {
if (customOnSearch) {
customOnSearch(inputRef.current?.input?.value!, e, {
source: 'input',
});
}
};
const onPressEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (composedRef.current || loading) {
return;
}
onSearch(e);
};
const searchIcon = typeof enterButton === 'boolean' ? <SearchOutlined /> : null;
const btnClassName = `${prefixCls}-button`;
let button: React.ReactNode;
const enterButtonAsElement = (enterButton || {}) as React.ReactElement;
const isAntdButton =
enterButtonAsElement.type && (enterButtonAsElement.type as typeof Button).__ANT_BUTTON === true;
if (isAntdButton || enterButtonAsElement.type === 'button') {
button = cloneElement(enterButtonAsElement, {
onMouseDown,
onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
enterButtonAsElement?.props?.onClick?.(e);
onSearch(e);
},
key: 'enterButton',
...(isAntdButton
? {
className: btnClassName,
size,
}
: {}),
});
} else {
button = (
<Button
className={btnClassName}
type={enterButton ? 'primary' : undefined}
size={size}
disabled={disabled}
key="enterButton"
onMouseDown={onMouseDown}
onClick={onSearch}
loading={loading}
icon={searchIcon}
>
{enterButton}
</Button>
);
}
if (addonAfter) {
button = [
button,
cloneElement(addonAfter, {
key: 'addonAfter',
}),
];
}
const cls = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${size}`]: !!size,
[`${prefixCls}-with-button`]: !!enterButton,
},
className,
);
const handleOnCompositionStart: React.CompositionEventHandler<HTMLInputElement> = (e) => {
composedRef.current = true;
onCompositionStart?.(e);
};
const handleOnCompositionEnd: React.CompositionEventHandler<HTMLInputElement> = (e) => {
composedRef.current = false;
onCompositionEnd?.(e);
};
return (
<Input
ref={composeRef<InputRef>(inputRef, ref)}
onPressEnter={onPressEnter}
{...restProps}
size={size}
onCompositionStart={handleOnCompositionStart}
onCompositionEnd={handleOnCompositionEnd}
prefixCls={inputPrefixCls}
addonAfter={button}
suffix={suffix}
onChange={onChange}
className={cls}
disabled={disabled}
/>
);
});
if (process.env.NODE_ENV !== 'production') {
Search.displayName = 'Search';
}
export default Search;