feat: classNames support variant (#57)

* feat: classNames support variant

* chore: code clean

Author: MadCcc

src/BaseInput.tsx

@@ -45,12 +45,17 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     }
   };
 
+  const hasAffix = hasPrefixSuffix(props);
+
   let element: ReactElement = cloneElement(inputElement, {
     value,
+    className:
+      clsx(inputElement.props.className, !hasAffix && classNames?.variant) ||
+      null,
   });
 
   // ================== Prefix & Suffix ================== //
-  if (hasPrefixSuffix(props)) {
+  if (hasAffix) {
     // ================== Clear Icon ================== //
     let clearIcon: ReactNode = null;
     if (allowClear) {
@@ -92,6 +97,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       },
       classes?.affixWrapper,
       classNames?.affixWrapper,
+      classNames?.variant,
     );
 
     const suffixNode = (suffix || allowClear) && (

src/interface.ts

@@ -26,6 +26,7 @@ export interface CommonInputProps {
     suffix?: string;
     groupWrapper?: string;
     wrapper?: string;
+    variant?: string;
   };
   styles?: {
     affixWrapper?: CSSProperties;

tests/BaseInput.test.tsx

@@ -236,4 +236,35 @@ describe('BaseInput', () => {
 
     expect(container.firstChild).toHaveClass('rc-input-group-wrapper-disabled');
   });
+
+  it('variant cls', () => {
+    const { container, rerender } = render(
+      <BaseInput
+        prefixCls="rc-input"
+        prefix="$"
+        classNames={{ variant: 'test-variant' }}
+        disabled
+      >
+        <input />
+      </BaseInput>,
+    );
+
+    expect(container.querySelector('.rc-input-affix-wrapper')).toHaveClass(
+      'test-variant',
+    );
+    expect(container.querySelector('input')).not.toHaveClass('test-variant');
+
+    rerender(
+      <BaseInput
+        prefixCls="rc-input"
+        classNames={{ variant: 'test-variant' }}
+        disabled
+      >
+        <input />
+      </BaseInput>,
+    );
+
+    expect(container.querySelector('.rc-input-affix-wrapper')).toBeFalsy();
+    expect(container.querySelector('input')).toHaveClass('test-variant');
+  });
 });