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