53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import type { ComponentPropsWithoutRef, CSSProperties } from 'react';
|
|
import { forwardRef } from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import classes from './toggle.module.css';
|
|
import type { CommonFieldWrapperProps } from './wrapper';
|
|
import { FormFieldWrapper } from './wrapper';
|
|
|
|
type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
|
|
size?: number;
|
|
};
|
|
|
|
export const ToggleField = forwardRef<
|
|
HTMLInputElement,
|
|
Props & CommonFieldWrapperProps
|
|
>(({ id, label, hint, hasError, required, ...otherProps }, ref) => (
|
|
<FormFieldWrapper
|
|
label={label}
|
|
hint={hint}
|
|
required={required}
|
|
hasError={hasError}
|
|
inputId={id}
|
|
>
|
|
{(inputProps) => (
|
|
<PlainToggleField {...otherProps} {...inputProps} ref={ref} />
|
|
)}
|
|
</FormFieldWrapper>
|
|
));
|
|
|
|
ToggleField.displayName = 'ToggleField';
|
|
|
|
export const PlainToggleField = forwardRef<HTMLInputElement, Props>(
|
|
({ className, size, ...otherProps }, ref) => (
|
|
<span className={classes.wrapper}>
|
|
<input
|
|
{...otherProps}
|
|
type='checkbox'
|
|
className={classes.input}
|
|
ref={ref}
|
|
/>
|
|
<span
|
|
className={classNames(classes.toggle, className)}
|
|
style={
|
|
{ '--diameter': size ? `${size}px` : undefined } as CSSProperties
|
|
}
|
|
hidden
|
|
/>
|
|
</span>
|
|
),
|
|
);
|
|
PlainToggleField.displayName = 'PlainToggleField';
|