feat: Input support clearIcon (#34325)

* feat: Input support clearIcon

* docs: update Input api
This commit is contained in:
MadCcc 2022-03-07 14:02:37 +08:00 committed by GitHub
parent 8d7f137a09
commit 77960c3f75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 2 deletions

View File

@ -113,7 +113,7 @@ export function triggerFocus(
export interface InputProps export interface InputProps
extends Omit< extends Omit<
RcInputProps, RcInputProps,
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName' | 'clearIcon' 'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName'
> { > {
size?: SizeType; size?: SizeType;
status?: InputStatus; status?: InputStatus;
@ -129,6 +129,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
onBlur, onBlur,
onFocus, onFocus,
suffix, suffix,
clearIcon,
...rest ...rest
} = props; } = props;
const { getPrefixCls, direction, input } = React.useContext(ConfigContext); const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
@ -207,7 +208,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
onBlur={handleBlur} onBlur={handleBlur}
onFocus={handleFocus} onFocus={handleFocus}
suffix={suffixNode} suffix={suffixNode}
clearIcon={<CloseCircleFilled />} clearIcon={clearIcon || <CloseCircleFilled />}
inputClassName={classNames( inputClassName={classNames(
!withPrefixSuffix && { !withPrefixSuffix && {
[`${prefixCls}-sm`]: mergedSize === 'small', [`${prefixCls}-sm`]: mergedSize === 'small',

View File

@ -22,6 +22,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
| allowClear | If allow to remove input content with clear icon | boolean | false | | | allowClear | If allow to remove input content with clear icon | boolean | false | |
| bordered | Whether has border style | boolean | true | 4.5.0 | | bordered | Whether has border style | boolean | true | 4.5.0 |
| clearIcon | Icon displayed when `allowClear` is enabled | ReactNode | <CloseCircleFilled /> | 4.19.0 |
| defaultValue | The initial input content | string | - | | | defaultValue | The initial input content | string | - | |
| disabled | Whether the input is disabled | boolean | false | | | disabled | Whether the input is disabled | boolean | false | |
| id | The ID for input | string | - | | | id | The ID for input | string | - | |

View File

@ -23,6 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
| addonBefore | 带标签的 input设置前置标签 | ReactNode | - | | | addonBefore | 带标签的 input设置前置标签 | ReactNode | - | |
| allowClear | 可以点击清除图标删除内容 | boolean | - | | | allowClear | 可以点击清除图标删除内容 | boolean | - | |
| bordered | 是否有边框 | boolean | true | 4.5.0 | | bordered | 是否有边框 | boolean | true | 4.5.0 |
| clearIcon | 清除按钮,与 `allowClear` 一同使用 | ReactNode | <CloseCircleFilled /> | 4.19.0 |
| defaultValue | 输入框默认内容 | string | - | | | defaultValue | 输入框默认内容 | string | - | |
| disabled | 是否禁用状态,默认为 false | boolean | false | | | disabled | 是否禁用状态,默认为 false | boolean | false | |
| id | 输入框的 id | string | - | | | id | 输入框的 id | string | - | |