feat: support onClear callback (#71)

* feat: support onClear callback

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

Author: li-jia-nan

docs/examples/addon.tsx

@@ -1,7 +1,7 @@
+import Input from 'rc-input';
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';
-import Input from 'rc-input';
 
 const Demo: FC = () => {
   return (

src/BaseInput.tsx

@@ -33,6 +33,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
     dataAttrs,
     styles,
     components,
+    onClear,
   } = props;
 
   const inputElement = children ?? inputEl;
@@ -80,7 +81,10 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
 
       clearIcon = (
         <span
-          onClick={handleReset}
+          onClick={(event) => {
+            handleReset?.(event);
+            onClear?.();
+          }}
           // Do not trigger onBlur when clear input
           // https://github.com/ant-design/ant-design/issues/31200
           onMouseDown={(e) => e.preventDefault()}

src/Input.tsx

@@ -8,7 +8,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import BaseInput, { HolderRef } from './BaseInput';
+import type { HolderRef } from './BaseInput';
+import BaseInput from './BaseInput';
 import useCount from './hooks/useCount';
 import type { ChangeEventInfo, InputProps, InputRef } from './interface';
 import type { InputFocusOptions } from './utils/commonUtils';

src/interface.ts

@@ -52,6 +52,7 @@ export interface BaseInputProps extends CommonInputProps {
   triggerFocus?: () => void;
   readOnly?: boolean;
   handleReset?: MouseEventHandler;
+  onClear?: () => void;
   hidden?: boolean;
   dataAttrs?: {
     affixWrapper?: DataAttr;
@@ -136,6 +137,7 @@ export interface InputProps
     count?: CSSProperties;
   };
   count?: CountConfig;
+  onClear?: () => void;
 }
 
 export interface InputRef {

tests/BaseInput.test.tsx

@@ -311,5 +311,18 @@ describe('BaseInput', () => {
         container.querySelector('.rc-input-group-wrapper'),
       );
     });
+
+    it('support onClear', () => {
+      const onClear = jest.fn();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" onClear={onClear} allowClear>
+          <input defaultValue="test" />
+        </BaseInput>,
+      );
+      fireEvent.click(
+        container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
+      );
+      expect(onClear).toHaveBeenCalled();
+    });
   });
 });

tests/index.test.tsx

@@ -392,6 +392,17 @@ describe('Input ref', () => {
     expect(ref.current?.input).toBe(inputEl);
     expect(ref.current?.nativeElement).toBe(inputEl);
   });
+
+  it('support onClear', () => {
+    const onClear = jest.fn();
+    const { container } = render(
+      <Input onClear={onClear} defaultValue="test" allowClear />,
+    );
+    fireEvent.click(
+      container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
+    );
+    expect(onClear).toHaveBeenCalled();
+  });
 });
 
 describe('resolveChange should work', () => {