76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import classNames from 'classnames';
|
|
|
|
import type { Merge } from 'type-fest';
|
|
|
|
import classes from './redesign.module.scss';
|
|
import {
|
|
TextInput as OldTextInput,
|
|
TextInputField as OldTextInputField,
|
|
} from './text_input_field';
|
|
import {
|
|
Toggle as OldToggle,
|
|
ToggleField as OldToggleField,
|
|
} from './toggle_field';
|
|
|
|
type RedesignComponent<
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
T extends React.JSXElementConstructor<any>,
|
|
P = object,
|
|
> = React.FC<Merge<React.ComponentProps<T>, P>>;
|
|
|
|
// Text field
|
|
|
|
export const TextInputField: RedesignComponent<typeof OldTextInputField> = ({
|
|
className,
|
|
wrapperClassName,
|
|
...props
|
|
}) => (
|
|
<OldTextInputField
|
|
{...props}
|
|
className={classNames(className, classes.input)}
|
|
wrapperClassName={classNames(wrapperClassName, classes.inputWrapper)}
|
|
/>
|
|
);
|
|
|
|
export const TextInput: RedesignComponent<typeof OldTextInput> = ({
|
|
className,
|
|
...props
|
|
}) => (
|
|
<OldTextInput {...props} className={classNames(className, classes.input)} />
|
|
);
|
|
|
|
// Toggles
|
|
|
|
interface ToggleProps {
|
|
size?: 'sm' | 'lg';
|
|
}
|
|
|
|
export const Toggle: RedesignComponent<typeof OldToggle, ToggleProps> = ({
|
|
className,
|
|
size,
|
|
...props
|
|
}) => (
|
|
<OldToggle
|
|
{...props}
|
|
className={classNames(
|
|
className,
|
|
classes.toggle,
|
|
size === 'sm' && classes.toggleSmall,
|
|
)}
|
|
/>
|
|
);
|
|
|
|
export const ToggleField: RedesignComponent<
|
|
typeof OldToggleField,
|
|
ToggleProps
|
|
> = ({ className, size, ...props }) => (
|
|
<OldToggleField
|
|
{...props}
|
|
className={classNames(
|
|
className,
|
|
classes.toggle,
|
|
size === 'sm' && classes.toggleSmall,
|
|
)}
|
|
/>
|
|
);
|