feat: support allowClear

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 {

docs/api.md

@@ -117,6 +117,18 @@ nav:
           <td>Number</td>
           <td></td>
           <td>Specifies the defaultValue of an InputNumber</td>
+        </tr>
+         <tr>
+          <td>allowClear</td>
+          <td>boolean | { clearIcon?: React.ReactNode; clearValue?: T }</td>
+          <td>false</td>
+          <td>If allow to remove input content with clear icon</td>
+        </tr>
+        <tr>
+          <td>onClear</td>
+          <td>Function</td>
+          <td></td>
+          <td>Called when value of an InputNumber cleared</td>
         </tr>
         <tr>
           <td>onChange</td>

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<string | number>(100);
+
+  const onChange = (val: number) => {
+    console.log('onChange:', val, typeof val);
+    setValue(val);
+  };
+
+  return (
+    <div style={{ margin: 10 }}>
+      <InputNumber style={{ width: 200 }} value={value} onChange={onChange} allowClear={true} />
+
+      <hr />
+      <h3>with suffix</h3>
+
+      <InputNumber
+        style={{ width: 200 }}
+        value={value}
+        onChange={onChange}
+        prefix="¥"
+        suffix="RMB"
+        allowClear={true}
+      />
+
+      <hr />
+      <h3>with custom clear value</h3>
+
+      <InputNumber
+        style={{ width: 200 }}
+        value={value}
+        onChange={onChange}
+        prefix="¥"
+        suffix="RMB"
+        allowClear={{ clearValue: 1 }}
+      />
+
+      <hr />
+      <h3>with custom clear icon</h3>
+
+      <InputNumber
+        style={{ width: 200 }}
+        value={value}
+        onChange={onChange}
+        prefix="¥"
+        suffix="RMB"
+        allowClear={{ clearIcon: <span style={{ color: 'red' }}>clear</span> }}
+      />
+    </div>
+  );
+};

docs/example.md

@@ -60,3 +60,7 @@ nav:
 ## spinner
 
 <code src="./demo/spinner.tsx"></code>
+
+## allow-clear
+
+<code src="./demo/allow-clear.tsx"></code>

src/InputNumber.tsx

@@ -96,6 +96,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   step?: ValueType;
   tabIndex?: number;
   controls?: boolean;
+  allowClear?: boolean | { clearIcon?: React.ReactNode; clearValue?: T };
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   classNames?: Partial<Record<SemanticName, string>>;
@@ -119,6 +120,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   onInput?: (text: string) => void;
   onChange?: (value: T | null) => void;
   onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+  onClear?: () => void;
 
   onStep?: (
     value: T,
@@ -155,6 +157,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
 
     prefix,
     suffix,
+    allowClear,
     stringMode,
 
     parser,
@@ -165,6 +168,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
     onChange,
     onInput,
     onPressEnter,
+    onClear,
     onStep,
 
     // Mouse Events
@@ -655,6 +659,35 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
     </StepHandler>
   );
 
+  let clearButton: React.ReactNode = null;
+  if (allowClear) {
+    const needClear = !disabled && !readOnly && !decimalValue.isEmpty();
+    const clearIconCls = `${prefixCls}-clear-icon`;
+    const clearOptions = typeof allowClear === 'object' ? allowClear : {};
+    const { clearIcon = '✖', clearValue } = clearOptions;
+
+    const onInternalClear = () => {
+      const value = getMiniDecimal(clearValue);
+      triggerValueUpdate(value, false);
+      onClear?.();
+    };
+
+    clearButton = (
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={onInternalClear}
+        onMouseDown={(e) => e.preventDefault()}
+        className={clsx(`${prefixCls}-clear-icon`, {
+          [`${clearIconCls}-hidden`]: !needClear,
+          [`${clearIconCls}-has-suffix`]: !!suffix,
+        })}
+      >
+        {clearIcon}
+      </button>
+    );
+  }
+
   // >>>>>> Render
   return (
     <div
@@ -709,6 +742,8 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
         {...restProps}
       />
 
+      {clearButton}
+
       {suffix !== undefined && (
         <div className={clsx(`${prefixCls}-suffix`, classNames?.suffix)} style={styles?.suffix}>
           {suffix}