From a497a8d06be197d661b93108e9aa0d472208df78 Mon Sep 17 00:00:00 2001 From: Foo Haw Wei Date: Sun, 7 Dec 2025 08:54:03 +0800 Subject: [PATCH 1/5] feat: add allowClear --- assets/index.less | 11 +++++++++++ src/InputNumber.tsx | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/assets/index.less b/assets/index.less index 08cebed8..becd71c2 100644 --- a/assets/index.less +++ b/assets/index.less @@ -105,6 +105,17 @@ } } + &-clear-icon { + padding: 0; + font-size: 12px; + background: none; + border: none; + + &-hidden { + display: none; + } + } + .handler-disabled() { opacity: 0.3; &:hover { diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 7ffc2bdc..0e5f358c 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -96,6 +96,7 @@ export interface InputNumberProps step?: ValueType; tabIndex?: number; controls?: boolean; + allowClear?: boolean | { clearIcon?: React.ReactNode; clearValue: T }; prefix?: React.ReactNode; suffix?: React.ReactNode; classNames?: Partial>; @@ -119,6 +120,7 @@ export interface InputNumberProps onInput?: (text: string) => void; onChange?: (value: T | null) => void; onPressEnter?: React.KeyboardEventHandler; + onClear?: () => void; onStep?: ( value: T, @@ -155,6 +157,7 @@ const InputNumber = React.forwardRef((props, r prefix, suffix, + allowClear, stringMode, parser, @@ -165,6 +168,7 @@ const InputNumber = React.forwardRef((props, r onChange, onInput, onPressEnter, + onClear, onStep, // Mouse Events @@ -655,6 +659,38 @@ const InputNumber = React.forwardRef((props, r ); + let clearButton: React.ReactNode = null; + if (allowClear) { + const needClear = !disabled && !readOnly && !decimalValue.isEmpty(); + const clearIconCls = `${prefixCls}-clear-icon`; + const iconNode = + typeof allowClear === 'object' && allowClear.clearIcon ? allowClear.clearIcon : '✖'; + + const onInternalClear = () => { + const value = getMiniDecimal(typeof allowClear === 'object' && allowClear.clearValue); + + triggerValueUpdate(value, false); + }; + + clearButton = ( + + ); + } + // >>>>>> Render return (
((props, r {...restProps} /> + {clearButton} + {suffix !== undefined && (
{suffix} From 5a8fb150aec5e004245f2546f2a43cb948af2168 Mon Sep 17 00:00:00 2001 From: Foo Haw Wei Date: Sun, 7 Dec 2025 09:10:14 +0800 Subject: [PATCH 2/5] fix: allowClear type definition --- src/InputNumber.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 0e5f358c..c52976fc 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -96,7 +96,7 @@ export interface InputNumberProps step?: ValueType; tabIndex?: number; controls?: boolean; - allowClear?: boolean | { clearIcon?: React.ReactNode; clearValue: T }; + allowClear?: boolean | { clearIcon?: React.ReactNode; clearValue?: T }; prefix?: React.ReactNode; suffix?: React.ReactNode; classNames?: Partial>; From 65a6681a001144191e750bb847e8d52f9b20ab5a Mon Sep 17 00:00:00 2001 From: Foo Haw Wei Date: Sun, 7 Dec 2025 09:10:43 +0800 Subject: [PATCH 3/5] docs: add allowClear documentation & examples --- docs/api.md | 12 +++++++++ docs/demo/allow-clear.tsx | 55 +++++++++++++++++++++++++++++++++++++++ docs/example.md | 4 +++ 3 files changed, 71 insertions(+) create mode 100644 docs/demo/allow-clear.tsx diff --git a/docs/api.md b/docs/api.md index 97406ba4..e289638f 100644 --- a/docs/api.md +++ b/docs/api.md @@ -117,6 +117,18 @@ nav: Number Specifies the defaultValue of an InputNumber + + + allowClear + boolean | { clearIcon?: React.ReactNode; clearValue: T } + false + If allow to remove input content with clear icon + + + onClear + Function + + Called when value of an InputNumber cleared onChange diff --git a/docs/demo/allow-clear.tsx b/docs/demo/allow-clear.tsx new file mode 100644 index 00000000..970ecc19 --- /dev/null +++ b/docs/demo/allow-clear.tsx @@ -0,0 +1,55 @@ +/* eslint no-console:0 */ +import InputNumber from '@rc-component/input-number'; +import React from 'react'; +import '../../assets/index.less'; + +export default () => { + const [value, setValue] = React.useState(100); + + const onChange = (val: number) => { + console.log('onChange:', val, typeof val); + setValue(val); + }; + + return ( +
+ + +
+

with suffix

+ + + +
+

with custom clear value

+ + + +
+

with custom clear icon

+ + clear }} + /> +
+ ); +}; diff --git a/docs/example.md b/docs/example.md index 7b2ec5d6..24b4fb11 100644 --- a/docs/example.md +++ b/docs/example.md @@ -60,3 +60,7 @@ nav: ## spinner + +## allow-clear + + From 3c7572ddd501f8c184b5684ba043aa81c58e6f63 Mon Sep 17 00:00:00 2001 From: Foo Haw Wei Date: Sun, 7 Dec 2025 09:20:59 +0800 Subject: [PATCH 4/5] docs: update allowClear type definition --- docs/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api.md b/docs/api.md index e289638f..7114974e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -120,7 +120,7 @@ nav: allowClear - boolean | { clearIcon?: React.ReactNode; clearValue: T } + boolean | { clearIcon?: React.ReactNode; clearValue?: T } false If allow to remove input content with clear icon From b9afe24cd7f8d27777c4cf40291fecfb781b7391 Mon Sep 17 00:00:00 2001 From: Foo Haw Wei Date: Sun, 7 Dec 2025 09:23:55 +0800 Subject: [PATCH 5/5] fix: improve clear button logic --- src/InputNumber.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index c52976fc..7ef5a420 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -663,30 +663,27 @@ const InputNumber = React.forwardRef((props, r if (allowClear) { const needClear = !disabled && !readOnly && !decimalValue.isEmpty(); const clearIconCls = `${prefixCls}-clear-icon`; - const iconNode = - typeof allowClear === 'object' && allowClear.clearIcon ? allowClear.clearIcon : '✖'; + const clearOptions = typeof allowClear === 'object' ? allowClear : {}; + const { clearIcon = '✖', clearValue } = clearOptions; const onInternalClear = () => { - const value = getMiniDecimal(typeof allowClear === 'object' && allowClear.clearValue); - + const value = getMiniDecimal(clearValue); triggerValueUpdate(value, false); + onClear?.(); }; clearButton = ( ); }