d7981eae42
Move Switch to design-system * Move Switch to design-system * Fix Icon import * Fix Caption import... Approved-by: Joakim Jäderberg
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { Switch as AriaSwitch } from 'react-aria-components'
|
|
import { RegisterOptions, useController, useFormContext } from 'react-hook-form'
|
|
|
|
import styles from './switch.module.css'
|
|
import { MaterialIcon } from '../Icons/MaterialIcon'
|
|
import Caption from '../Caption'
|
|
|
|
interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
name: string
|
|
registerOptions?: RegisterOptions
|
|
}
|
|
|
|
export default function Switch({
|
|
className,
|
|
name,
|
|
children,
|
|
registerOptions,
|
|
}: React.PropsWithChildren<SwitchProps>) {
|
|
const { control } = useFormContext()
|
|
const { field, fieldState } = useController({
|
|
control,
|
|
name,
|
|
rules: registerOptions,
|
|
})
|
|
|
|
return (
|
|
<AriaSwitch
|
|
className={`${styles.container} ${className}`}
|
|
isSelected={field.value}
|
|
onChange={field.onChange}
|
|
data-testid={name}
|
|
isDisabled={registerOptions?.disabled}
|
|
excludeFromTabOrder
|
|
>
|
|
{children}
|
|
<span className={styles.switch} tabIndex={0}></span>
|
|
{fieldState.error ? (
|
|
<Caption className={styles.error} fontOnly>
|
|
<MaterialIcon icon="info" color="Icon/Interactive/Accent" />
|
|
{fieldState.error.message}
|
|
</Caption>
|
|
) : null}
|
|
</AriaSwitch>
|
|
)
|
|
}
|