Skip to content

Commit

Permalink
feat: classNames support variant (#57)
Browse files Browse the repository at this point in the history
* feat: classNames support variant

* chore: code clean
  • Loading branch information
MadCcc authored Dec 15, 2023
1 parent 374d975 commit ebbe8d4
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/BaseInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -92,6 +97,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
},
classes?.affixWrapper,
classNames?.affixWrapper,
classNames?.variant,
);

const suffixNode = (suffix || allowClear) && (
Expand Down
1 change: 1 addition & 0 deletions src/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface CommonInputProps {
suffix?: string;
groupWrapper?: string;
wrapper?: string;
variant?: string;
};
styles?: {
affixWrapper?: CSSProperties;
Expand Down
31 changes: 31 additions & 0 deletions tests/BaseInput.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});

0 comments on commit ebbe8d4

Please sign in to comment.