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
extends Omit<
RcInputProps,
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName' | 'clearIcon'
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName'
> {
size?: SizeType;
status?: InputStatus;
@ -129,6 +129,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
onBlur,
onFocus,
suffix,
clearIcon,
...rest
} = props;
const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
@ -207,7 +208,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
onBlur={handleBlur}
onFocus={handleFocus}
suffix={suffixNode}
clearIcon={<CloseCircleFilled />}
clearIcon={clearIcon || <CloseCircleFilled />}
inputClassName={classNames(
!withPrefixSuffix && {
[`${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 | - | |
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| 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 | - | |
| disabled | Whether the input is disabled | boolean | false | |
| 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 | - | |
| allowClear | 可以点击清除图标删除内容 | boolean | - | |
| bordered | 是否有边框 | boolean | true | 4.5.0 |
| clearIcon | 清除按钮,与 `allowClear` 一同使用 | ReactNode | <CloseCircleFilled /> | 4.19.0 |
| defaultValue | 输入框默认内容 | string | - | |
| disabled | 是否禁用状态,默认为 false | boolean | false | |
| id | 输入框的 id | string | - | |