feat: classNames support variant

react-component · Dec 15, 2023 · dae6063 · dae6063
1 parent 374d975
commit dae6063
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
@@ -45,8 +45,13 @@ 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 ================== //
@@ -92,6 +97,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       },
       classes?.affixWrapper,
       classNames?.affixWrapper,
+      classNames?.variant,
     );
 
     const suffixNode = (suffix || allowClear) && (

diff --git a/src/interface.ts b/src/interface.ts
@@ -26,6 +26,7 @@ export interface CommonInputProps {
     suffix?: string;
     groupWrapper?: string;
     wrapper?: string;
+    variant?: string;
   };
   styles?: {
     affixWrapper?: CSSProperties;

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