From 063185a1b71a2b9dfe7f2c9e27ca45560dc3ad2a Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Thu, 14 Dec 2023 17:01:50 +0800
Subject: [PATCH] refactor: BaseInput (#55)

---
 src/BaseInput.tsx        | 120 ++++++++++++++++++---------------------
 src/Input.tsx            |   5 +-
 src/interface.ts         |   6 +-
 tests/BaseInput.test.tsx | 101 +++++++++++++++-----------------
 4 files changed, 107 insertions(+), 125 deletions(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index e1ed697..3364328 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -1,12 +1,13 @@
 import clsx from 'classnames';
-import type { FC, ReactElement } from 'react';
+import type { FC, ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { BaseInputProps } from './interface';
 import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
 
 const BaseInput: FC<BaseInputProps> = (props) => {
   const {
-    inputElement,
+    inputElement: inputEl,
+    children,
     prefixCls,
     prefix,
     suffix,
@@ -29,6 +30,8 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     components,
   } = props;
 
+  const inputElement = children ?? inputEl;
+
   const AffixWrapperComponent = components?.affixWrapper || 'span';
   const GroupWrapperComponent = components?.groupWrapper || 'span';
   const WrapperComponent = components?.wrapper || 'span';
@@ -42,63 +45,51 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     }
   };
 
-  // ================== Clear Icon ================== //
-  const getClearIcon = () => {
-    if (!allowClear) {
-      return null;
-    }
-    const needClear = !disabled && !readOnly && value;
-    const clearIconCls = `${prefixCls}-clear-icon`;
-    const iconNode =
-      typeof allowClear === 'object' && allowClear?.clearIcon
-        ? allowClear.clearIcon
-        : '✖';
-
-    return (
-      <span
-        onClick={handleReset}
-        // Do not trigger onBlur when clear input
-        // https://github.com/ant-design/ant-design/issues/31200
-        onMouseDown={(e) => e.preventDefault()}
-        className={clsx(clearIconCls, {
-          [`${clearIconCls}-hidden`]: !needClear,
-          [`${clearIconCls}-has-suffix`]: !!suffix,
-        })}
-        role="button"
-        tabIndex={-1}
-      >
-        {iconNode}
-      </span>
-    );
-  };
-
   let element: ReactElement = cloneElement(inputElement, {
     value,
-    hidden,
-    className:
-      clsx(
-        inputElement.props?.className,
-        !hasPrefixSuffix(props) && !hasAddon(props) && className,
-      ) || null,
-    style: {
-      ...inputElement.props?.style,
-      ...(!hasPrefixSuffix(props) && !hasAddon(props) ? style : {}),
-    },
   });
 
   // ================== Prefix & Suffix ================== //
   if (hasPrefixSuffix(props)) {
+    // ================== Clear Icon ================== //
+    let clearIcon: ReactNode = null;
+    if (allowClear) {
+      const needClear = !disabled && !readOnly && value;
+      const clearIconCls = `${prefixCls}-clear-icon`;
+      const iconNode =
+        typeof allowClear === 'object' && allowClear?.clearIcon
+          ? allowClear.clearIcon
+          : '✖';
+
+      clearIcon = (
+        <span
+          onClick={handleReset}
+          // Do not trigger onBlur when clear input
+          // https://github.com/ant-design/ant-design/issues/31200
+          onMouseDown={(e) => e.preventDefault()}
+          className={clsx(clearIconCls, {
+            [`${clearIconCls}-hidden`]: !needClear,
+            [`${clearIconCls}-has-suffix`]: !!suffix,
+          })}
+          role="button"
+          tabIndex={-1}
+        >
+          {iconNode}
+        </span>
+      );
+    }
+
     const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
     const affixWrapperCls = clsx(
       affixWrapperPrefixCls,
       {
-        [`${affixWrapperPrefixCls}-disabled`]: disabled,
-        [`${affixWrapperPrefixCls}-focused`]: focused,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${affixWrapperPrefixCls}-disabled`]: disabled, // Not used, but keep it
+        [`${affixWrapperPrefixCls}-focused`]: focused, // Not used, but keep it
         [`${affixWrapperPrefixCls}-readonly`]: readOnly,
         [`${affixWrapperPrefixCls}-input-with-clear-btn`]:
           suffix && allowClear && value,
       },
-      !hasAddon(props) && className,
       classes?.affixWrapper,
       classNames?.affixWrapper,
     );
@@ -108,7 +99,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
         className={clsx(`${prefixCls}-suffix`, classNames?.suffix)}
         style={styles?.suffix}
       >
-        {getClearIcon()}
+        {clearIcon}
         {suffix}
       </span>
     );
@@ -116,11 +107,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     element = (
       <AffixWrapperComponent
         className={affixWrapperCls}
-        style={{
-          ...(!hasAddon(props) ? style : undefined),
-          ...styles?.affixWrapper,
-        }}
-        hidden={!hasAddon(props) && hidden}
+        style={styles?.affixWrapper}
         onClick={onInputClick}
         {...dataAttrs?.affixWrapper}
         ref={containerRef}
@@ -133,10 +120,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
             {prefix}
           </span>
         )}
-        {cloneElement(inputElement, {
-          value,
-          hidden: null,
-        })}
+        {element}
         {suffixNode}
       </AffixWrapperComponent>
     );
@@ -151,31 +135,26 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       `${prefixCls}-wrapper`,
       wrapperCls,
       classes?.wrapper,
+      classNames?.wrapper,
     );
 
     const mergedGroupClassName = clsx(
       `${prefixCls}-group-wrapper`,
-      className,
       classes?.group,
+      classNames?.groupWrapper,
     );
 
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
-    return (
-      <GroupWrapperComponent
-        className={mergedGroupClassName}
-        style={style}
-        hidden={hidden}
-      >
+    element = (
+      <GroupWrapperComponent className={mergedGroupClassName}>
         <WrapperComponent className={mergedWrapperClassName}>
           {addonBefore && (
             <GroupAddonComponent className={addonCls}>
               {addonBefore}
             </GroupAddonComponent>
           )}
-          {cloneElement(element, {
-            hidden: null,
-          })}
+          {element}
           {addonAfter && (
             <GroupAddonComponent className={addonCls}>
               {addonAfter}
@@ -185,7 +164,16 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       </GroupWrapperComponent>
     );
   }
-  return element;
+
+  // `className` and `style` are always on the root element
+  return React.cloneElement(element, {
+    className: clsx(element.props?.className, className) || null,
+    style: {
+      ...element.props?.style,
+      ...style,
+    },
+    hidden,
+  });
 };
 
 export default BaseInput;
diff --git a/src/Input.tsx b/src/Input.tsx
index d14311d..abce2a9 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -267,7 +267,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       {...rest}
       prefixCls={prefixCls}
       className={clsx(className, outOfRangeCls)}
-      inputElement={getInputElement()}
       handleReset={handleReset}
       value={formatValue}
       focused={focused}
@@ -277,7 +276,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       classes={classes}
       classNames={classNames}
       styles={styles}
-    />
+    >
+      {getInputElement()}
+    </BaseInput>
   );
 });
 
diff --git a/src/interface.ts b/src/interface.ts
index 3e343ab..c2b289b 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -24,6 +24,8 @@ export interface CommonInputProps {
     affixWrapper?: string;
     prefix?: string;
     suffix?: string;
+    groupWrapper?: string;
+    wrapper?: string;
   };
   styles?: {
     affixWrapper?: CSSProperties;
@@ -39,7 +41,8 @@ export type ValueType = InputHTMLAttributes<HTMLInputElement>['value'] | bigint;
 
 export interface BaseInputProps extends CommonInputProps {
   value?: ValueType;
-  inputElement: ReactElement;
+  /** @deprecated Use `children` instead */
+  inputElement?: ReactElement;
   prefixCls?: string;
   className?: string;
   style?: CSSProperties;
@@ -58,6 +61,7 @@ export interface BaseInputProps extends CommonInputProps {
     wrapper?: 'span' | 'div';
     groupAddon?: 'span' | 'div';
   };
+  children: ReactElement;
 }
 
 export type ShowCountFormatter = (args: {
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 3512eaf..8ca45fd 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -6,7 +6,9 @@ import BaseInput from '../src/BaseInput';
 describe('BaseInput', () => {
   it('should render perfectly', () => {
     const { container } = render(
-      <BaseInput prefixCls="rc-input" inputElement={<input />} />,
+      <BaseInput prefixCls="rc-input">
+        <input />
+      </BaseInput>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -14,18 +16,14 @@ describe('BaseInput', () => {
   it('prefix and suffix should render properly', () => {
     const { container } = render(
       <div>
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          prefix="prefix"
-        />
+        <BaseInput prefixCls="rc-input" prefix="prefix">
+          <input />
+        </BaseInput>
         <br />
         <br />
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          suffix="suffix"
-        />
+        <BaseInput prefixCls="rc-input" suffix="suffix">
+          <input />
+        </BaseInput>
       </div>,
     );
     expect(container).toMatchSnapshot();
@@ -34,18 +32,14 @@ describe('BaseInput', () => {
   it('addon should render properly', () => {
     const { container } = render(
       <div>
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          addonBefore="addonBefore"
-        />
+        <BaseInput prefixCls="rc-input" addonBefore="addonBefore">
+          <input />
+        </BaseInput>
         <br />
         <br />
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          addonAfter="addonAfter"
-        />
+        <BaseInput prefixCls="rc-input" addonAfter="addonAfter">
+          <input />
+        </BaseInput>
       </div>,
     );
     expect(container).toMatchSnapshot();
@@ -72,12 +66,11 @@ describe('BaseInput', () => {
         <BaseInput
           prefixCls="rc-input"
           allowClear={{ clearIcon: '✖' }}
-          inputElement={
-            <input onChange={handleChange} onBlur={onBlur} onFocus={onFocus} />
-          }
           value={value}
           handleReset={handleReset}
-        />
+        >
+          <input onChange={handleChange} onBlur={onBlur} onFocus={onFocus} />
+        </BaseInput>
       );
     };
 
@@ -102,16 +95,16 @@ describe('BaseInput', () => {
 
   it('should display clearIcon correctly', () => {
     const { container, rerender } = render(
-      <BaseInput prefixCls="rc-input" inputElement={<input />} allowClear />,
+      <BaseInput prefixCls="rc-input" allowClear>
+        <input />
+      </BaseInput>,
     );
     const clearIcon = container.querySelector('.rc-input-clear-icon');
     expect(clearIcon?.innerHTML).toBe('✖');
     rerender(
-      <BaseInput
-        prefixCls="rc-input"
-        inputElement={<input />}
-        allowClear={{ clearIcon: 'clear' }}
-      />,
+      <BaseInput prefixCls="rc-input" allowClear={{ clearIcon: 'clear' }}>
+        <input />
+      </BaseInput>,
     );
     expect(clearIcon?.innerHTML).toBe('clear');
   });
@@ -121,10 +114,11 @@ describe('BaseInput', () => {
     const { container } = render(
       <BaseInput
         prefixCls="rc-input"
-        inputElement={<input ref={inputRef} />}
         triggerFocus={() => inputRef.current?.focus()}
         prefix="$"
-      />,
+      >
+        <input ref={inputRef} />
+      </BaseInput>,
     );
     fireEvent.click(container.querySelector('.rc-input-affix-wrapper')!);
     expect(document.activeElement).toBe(container.querySelector('input'));
@@ -140,8 +134,9 @@ describe('BaseInput', () => {
             'data-test': 'test',
           },
         }}
-        inputElement={<input />}
-      />,
+      >
+        <input />
+      </BaseInput>,
     );
     expect(
       container
@@ -152,11 +147,9 @@ describe('BaseInput', () => {
 
   it('should apply className to inputElement', () => {
     const { container } = render(
-      <BaseInput
-        prefixCls="rc-input"
-        className="test-base"
-        inputElement={<input className="test" />}
-      />,
+      <BaseInput prefixCls="rc-input" className="test-base">
+        <input className="test" />
+      </BaseInput>,
     );
     expect(container.querySelector('.test-base')).toBeTruthy();
     expect(container.querySelector('.test')).toBeTruthy();
@@ -164,12 +157,9 @@ describe('BaseInput', () => {
 
   it('should not pass className to inputElement when has addon', () => {
     const { container } = render(
-      <BaseInput
-        prefixCls="rc-input"
-        className="test-base"
-        addonBefore="addon"
-        inputElement={<input className="test" />}
-      />,
+      <BaseInput prefixCls="rc-input" className="test-base" addonBefore="addon">
+        <input className="test" />
+      </BaseInput>,
     );
     expect(
       container.querySelector('input')?.classList.contains('test'),
@@ -181,12 +171,9 @@ describe('BaseInput', () => {
 
   it('should correct render with prefix and addon', () => {
     const { container } = render(
-      <BaseInput
-        prefixCls="rc-input"
-        prefix="prefix"
-        addonBefore="addon"
-        inputElement={<input />}
-      />,
+      <BaseInput prefixCls="rc-input" prefix="prefix" addonBefore="addon">
+        <input />
+      </BaseInput>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -197,14 +184,15 @@ describe('BaseInput', () => {
         prefixCls="rc-input"
         prefix="prefix"
         addonBefore="addon"
-        inputElement={<input />}
         components={{
           affixWrapper: 'div',
           groupWrapper: 'div',
           wrapper: 'div',
           groupAddon: 'div',
         }}
-      />,
+      >
+        <input />
+      </BaseInput>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -215,7 +203,6 @@ describe('BaseInput', () => {
         prefixCls="rc-input"
         prefix="prefix"
         addonBefore="addon"
-        inputElement={<input />}
         styles={{
           affixWrapper: {
             color: 'red',
@@ -224,7 +211,9 @@ describe('BaseInput', () => {
             color: 'blue',
           },
         }}
-      />,
+      >
+        <input />
+      </BaseInput>,
     );
 
     expect(