diff --git a/src/fields/checkbox-field/CheckboxInput.mock.tsx b/src/fields/checkbox-field/CheckboxInput.mock.tsx index 2e5330c..3c59fc1 100644 --- a/src/fields/checkbox-field/CheckboxInput.mock.tsx +++ b/src/fields/checkbox-field/CheckboxInput.mock.tsx @@ -1,21 +1,17 @@ -import { ReactNode } from "react"; - -import { CheckboxField } from "./checkboxField"; -import { FieldLabel } from "../../components"; -import { FieldErrors } from "../../components/field-errors"; -import { useCheckboxFieldProps, useRequiredProps } from "../../hooks"; -import { BooleanField } from "../boolean-field"; +import { FieldErrors, FieldLabel } from "../../components"; +import { + type CheckboxFieldProps, + useCheckboxFieldProps, + useRequiredProps, +} from "../../hooks"; export const CheckboxInput = ({ field, label, required, -}: { - field: BooleanField | CheckboxField; - label: ReactNode; - required?: boolean; -}) => { - const props = useCheckboxFieldProps(field); + initialValue, +}: CheckboxFieldProps) => { + const props = useCheckboxFieldProps(field, { initialValue }); const requiredProps = useRequiredProps({ field, required }); return ( diff --git a/src/fields/checkbox-field/checkboxField.stories.tsx b/src/fields/checkbox-field/checkboxField.stories.tsx index 1ea88a1..56cd506 100644 --- a/src/fields/checkbox-field/checkboxField.stories.tsx +++ b/src/fields/checkbox-field/checkboxField.stories.tsx @@ -51,3 +51,26 @@ export const Optional = formStory({ }, }, }); + +export const Initialized = formStory({ + args: { + fields: { + visible: checkboxField({ name: "visible" }).optional(), + }, + children: ({ fields }) => ( + + ), + }, + parameters: { + docs: { + description: { + story: + "This example uses the `initialValue` option passed to the `useCheckboxFieldProps(field, options)`", + }, + }, + }, +}); diff --git a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx index 864534b..47aa8c7 100644 --- a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx +++ b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx @@ -35,4 +35,14 @@ describe("useCheckboxFieldProps()", () => { expect(checkboxProps.result.current.checked).toBe(true); }); + + test("can be initialized", async () => { + const field = checkboxField(); + + const checkboxProps = renderHook(() => + useCheckboxFieldProps(field, { initialValue: true }), + ); + + expect(checkboxProps.result.current.checked).toBe(true); + }); }); diff --git a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts index eb0c004..f1f57e4 100644 --- a/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts +++ b/src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts @@ -1,18 +1,26 @@ +import { UseFieldOptions } from "form-atoms"; import { ChangeEvent, useMemo } from "react"; import { FieldProps, useFieldProps } from "../"; -import { BooleanField, type CheckboxField } from "../../fields"; +import type { + BooleanField, + BooleanFieldValue, + CheckboxField, +} from "../../fields"; export type CheckboxFieldProps = FieldProps; const getChecked = (event: ChangeEvent) => event.currentTarget.checked; -export function useCheckboxFieldProps(field: CheckboxField | BooleanField) { +export function useCheckboxFieldProps( + field: CheckboxField | BooleanField, + options?: UseFieldOptions, +) { // undefined (empty checkbox) is rendered as unchecked input const { value: checked = false, ...props } = useFieldProps< CheckboxField | BooleanField - >(field, getChecked); + >(field, getChecked, options); return useMemo( () => ({