feat: support onClear callback (#71)

* feat: support onClear callback * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix
react-component · Jul 16, 2024 · fe176c3 · fe176c3
1 parent c18cc42
commit fe176c3
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 3 deletions.
diff --git a/docs/examples/addon.tsx b/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 (

diff --git a/src/BaseInput.tsx b/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()}

diff --git a/src/Input.tsx b/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';

diff --git a/src/interface.ts b/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 {

diff --git a/tests/BaseInput.test.tsx b/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();
+    });
   });
 });
diff --git a/tests/index.test.tsx b/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', () => {