This commit is contained in:
Juan Di Toro 2024-03-05 17:59:16 +01:00
parent cc75bea552
commit 7d25a7a63e
2 changed files with 30 additions and 4 deletions

View File

@ -1,6 +1,6 @@
import { Label } from "@radix-ui/react-label" import { Label } from "@radix-ui/react-label"
import { Input } from "./ui/input" import { Input } from "./ui/input"
import { FieldName } from "@conform-to/react" import { FieldName, useInputControl } from "@conform-to/react"
import { useId } from "react" import { useId } from "react"
import { cn } from "~/utils" import { cn } from "~/utils"
import { Checkbox } from "~/components/ui/checkbox" import { Checkbox } from "~/components/ui/checkbox"
@ -44,12 +44,22 @@ export const FieldCheckbox = ({
className className
}: { }: {
inputProps: { inputProps: {
name: FieldName<string> name: string
form: string
value?: string
} & React.ComponentPropsWithoutRef<typeof Checkbox> } & React.ComponentPropsWithoutRef<typeof Checkbox>
labelProps: React.LabelHTMLAttributes<HTMLLabelElement> labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
errors?: ListOfErrors errors?: ListOfErrors
className?: string className?: string
}) => { }) => {
const { key, defaultChecked, ...checkboxProps } = inputProps
const checkedValue = inputProps.value ?? "on"
const input = useInputControl({
key,
name: inputProps.name,
formId: inputProps.form,
initialValue: defaultChecked ? checkedValue : undefined
})
const fallbackId = useId() const fallbackId = useId()
const id = inputProps.id ?? fallbackId const id = inputProps.id ?? fallbackId
const errorId = errors?.length ? `${id}-error` : undefined const errorId = errors?.length ? `${id}-error` : undefined
@ -58,10 +68,24 @@ export const FieldCheckbox = ({
className={cn("space-x-2 flex items-center text-primary-2", className)} className={cn("space-x-2 flex items-center text-primary-2", className)}
> >
<Checkbox <Checkbox
{...inputProps} {...checkboxProps}
id={id} id={id}
aria-invalid={errorId ? true : undefined} aria-invalid={errorId ? true : undefined}
aria-describedby={errorId} aria-describedby={errorId}
checked={input.value === checkedValue}
onCheckedChange={(state) => {
input.change(state.valueOf() ? checkedValue : "")
inputProps.onCheckedChange?.(state)
}}
onFocus={(event) => {
input.focus()
inputProps.onFocus?.(event)
}}
onBlur={(event) => {
input.blur()
inputProps.onBlur?.(event)
}}
type="button"
/> />
<Label {...labelProps} htmlFor={id} /> <Label {...labelProps} htmlFor={id} />
<div className="min-h-[32px] px-4 pb-3 pt-1"> <div className="min-h-[32px] px-4 pb-3 pt-1">

View File

@ -6,7 +6,9 @@ import { cn } from "~/utils"
const Checkbox = React.forwardRef< const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>, React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
className: string
}
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}