refactor: move clearIcon into allowClear object (#12)

* refactor: move clearIcon into allowClear object * chore: code clean * test: update test
react-component · Mar 7, 2022 · 279b2e8 · 279b2e8
1 parent 96782af
commit 279b2e8
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 21 deletions.
diff --git a/docs/examples/allow-clear.tsx b/docs/examples/allow-clear.tsx
@@ -12,18 +12,12 @@ const Demo: FC = () => {
 
   return (
     <div>
-      <Input
-        prefixCls="rc-input"
-        allowClear
-        clearIcon="✖"
-        placeholder="uncontrolled"
-      />
+      <Input prefixCls="rc-input" allowClear placeholder="uncontrolled" />
       <br />
       <br />
       <Input
         prefixCls="rc-input"
-        allowClear
-        clearIcon="✖"
+        allowClear={{ clearIcon: '✖' }}
         onChange={handleChange}
         value={value}
         placeholder="controlled"

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
@@ -22,7 +22,6 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     focused,
     triggerFocus,
     allowClear,
-    clearIcon,
     value,
     handleReset,
     hidden,
@@ -43,6 +42,11 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     }
     const needClear = !disabled && !readOnly && value;
     const clearIconCls = `${prefixCls}-clear-icon`;
+    const iconNode =
+      typeof allowClear === 'object' && allowClear?.clearIcon
+        ? allowClear.clearIcon
+        : '✖';
+
     return (
       <span
         onClick={handleReset}
@@ -56,7 +60,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
         role="button"
         tabIndex={-1}
       >
-        {clearIcon}
+        {iconNode}
       </span>
     );
   };

diff --git a/src/Input.tsx b/src/Input.tsx
@@ -125,7 +125,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       'inputClassName',
       'wrapperClassName',
       'htmlSize',
-      'clearIcon',
     ]);
     return (
       <input

diff --git a/src/interface.ts b/src/interface.ts
@@ -18,8 +18,7 @@ export interface CommonInputProps {
   groupClassName?: string;
   wrapperClassName?: string;
   inputClassName?: string;
-  allowClear?: boolean;
-  clearIcon?: ReactNode;
+  allowClear?: boolean | { clearIcon?: ReactNode };
 }
 
 export interface BaseInputProps extends CommonInputProps {

diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
@@ -71,8 +71,7 @@ describe('BaseInput', () => {
       return (
         <BaseInput
           prefixCls="rc-input"
-          allowClear
-          clearIcon="✖"
+          allowClear={{ clearIcon: '✖' }}
           inputElement={
             <input onChange={handleChange} onBlur={onBlur} onFocus={onFocus} />
           }
@@ -100,4 +99,20 @@ describe('BaseInput', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(inputEl!.value).toBe('');
   });
+
+  it('should display clearIcon correctly', () => {
+    const { container, rerender } = render(
+      <BaseInput prefixCls="rc-input" inputElement={<input />} allowClear />,
+    );
+    const clearIcon = container.querySelector('.rc-input-clear-icon');
+    expect(clearIcon?.innerHTML).toBe('✖');
+    rerender(
+      <BaseInput
+        prefixCls="rc-input"
+        inputElement={<input />}
+        allowClear={{ clearIcon: 'clear' }}
+      />,
+    );
+    expect(clearIcon?.innerHTML).toBe('clear');
+  });
 });
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,9 @@ exports[`Input allowClear should change type when click 1`] = `
         class="rc-input-clear-icon"
         role="button"
         tabindex="-1"
-      />
+      >
+        ✖
+      </span>
     </span>
   </span>
 </div>
@@ -40,7 +42,9 @@ exports[`Input allowClear should change type when click 2`] = `
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
         role="button"
         tabindex="-1"
-      />
+      >
+        ✖
+      </span>
     </span>
   </span>
 </div>
@@ -63,7 +67,9 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
         role="button"
         tabindex="-1"
-      />
+      >
+        ✖
+      </span>
     </span>
   </span>
 </div>
@@ -86,7 +92,9 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
         role="button"
         tabindex="-1"
-      />
+      >
+        ✖
+      </span>
     </span>
   </span>
 </div>
@@ -109,7 +117,9 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
         role="button"
         tabindex="-1"
-      />
+      >
+        ✖
+      </span>
     </span>
   </span>
 </div>
@@ -132,7 +142,9 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
         role="button"
         tabindex="-1"
-      />
+      >
+        ✖
+      </span>
     </span>
   </span>
 </div>