feat: BaseInput support components (#41)

Author: MadCcc

src/BaseInput.tsx

@@ -26,9 +26,15 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     classNames,
     dataAttrs,
     styles,
+    components,
   } = props;
 
-  const containerRef = useRef<HTMLSpanElement>(null);
+  const AffixWrapperComponent = components?.affixWrapper || 'span';
+  const GroupWrapperComponent = components?.groupWrapper || 'span';
+  const WrapperComponent = components?.wrapper || 'span';
+  const GroupAddonComponent = components?.groupAddon || 'span';
+
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const onInputClick: React.MouseEventHandler = (e) => {
     if (containerRef.current?.contains(e.target as Element)) {
@@ -94,6 +100,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       },
       !hasAddon(props) && className,
       classes?.affixWrapper,
+      classNames?.affixWrapper,
     );
 
     const suffixNode = (suffix || allowClear) && (
@@ -107,7 +114,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     );
 
     element = (
-      <span
+      <AffixWrapperComponent
         className={affixWrapperCls}
         style={!hasAddon(props) ? style : undefined}
         hidden={!hasAddon(props) && hidden}
@@ -128,7 +135,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
           hidden: null,
         })}
         {suffixNode}
-      </span>
+      </AffixWrapperComponent>
     );
   }
 
@@ -152,15 +159,27 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
     return (
-      <span className={mergedGroupClassName} style={style} hidden={hidden}>
-        <span className={mergedWrapperClassName}>
-          {addonBefore && <span className={addonCls}>{addonBefore}</span>}
+      <GroupWrapperComponent
+        className={mergedGroupClassName}
+        style={style}
+        hidden={hidden}
+      >
+        <WrapperComponent className={mergedWrapperClassName}>
+          {addonBefore && (
+            <GroupAddonComponent className={addonCls}>
+              {addonBefore}
+            </GroupAddonComponent>
+          )}
           {cloneElement(element, {
             hidden: null,
           })}
-          {addonAfter && <span className={addonCls}>{addonAfter}</span>}
-        </span>
-      </span>
+          {addonAfter && (
+            <GroupAddonComponent className={addonCls}>
+              {addonAfter}
+            </GroupAddonComponent>
+          )}
+        </WrapperComponent>
+      </GroupWrapperComponent>
     );
   }
   return element;

src/interface.ts

@@ -14,16 +14,19 @@ export interface CommonInputProps {
   suffix?: ReactNode;
   addonBefore?: ReactNode;
   addonAfter?: ReactNode;
+  /** @deprecated Use `classNames` instead */
   classes?: {
     affixWrapper?: string;
     group?: string;
     wrapper?: string;
   };
   classNames?: {
+    affixWrapper?: string;
     prefix?: string;
     suffix?: string;
   };
   styles?: {
+    affixWrapper?: CSSProperties;
     prefix?: CSSProperties;
     suffix?: CSSProperties;
   };
@@ -47,6 +50,12 @@ export interface BaseInputProps extends CommonInputProps {
   dataAttrs?: {
     affixWrapper?: DataAttr;
   };
+  components?: {
+    affixWrapper?: 'span' | 'div';
+    groupWrapper?: 'span' | 'div';
+    wrapper?: 'span' | 'div';
+    groupAddon?: 'span' | 'div';
+  };
 }
 
 export interface ShowCountProps {

tests/BaseInput.test.tsx

@@ -190,4 +190,22 @@ describe('BaseInput', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('support use div as basic element', () => {
+    const { container } = render(
+      <BaseInput
+        prefixCls="rc-input"
+        prefix="prefix"
+        addonBefore="addon"
+        inputElement={<input />}
+        components={{
+          affixWrapper: 'div',
+          groupWrapper: 'div',
+          wrapper: 'div',
+          groupAddon: 'div',
+        }}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

tests/__snapshots__/BaseInput.test.tsx.snap

@@ -111,3 +111,33 @@ exports[`BaseInput should render perfectly 1`] = `
   />
 </div>
 `;
+
+exports[`BaseInput support use div as basic element 1`] = `
+<div>
+  <div
+    class="rc-input-group-wrapper"
+  >
+    <div
+      class="rc-input-wrapper rc-input-group"
+    >
+      <div
+        class="rc-input-group-addon"
+      >
+        addon
+      </div>
+      <div
+        class="rc-input-affix-wrapper"
+      >
+        <span
+          class="rc-input-prefix"
+        >
+          prefix
+        </span>
+        <input
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;