From c9df42cfdf67f7457f595e31cd20808d604a22bd Mon Sep 17 00:00:00 2001 From: Paul Kim Date: Wed, 25 Oct 2023 16:13:41 -0600 Subject: [PATCH] feat(webform): doc initializer --- .../ui/src/components/RHF/FieldArray.tsx | 17 +++++---- .../ui/src/components/RHF/FieldGroup.tsx | 16 ++++---- .../ui/src/components/RHF/FormGroup.tsx | 21 +++++------ src/services/ui/src/components/RHF/Slot.tsx | 24 +++++++----- src/services/ui/src/components/RHF/types.ts | 2 +- src/services/ui/src/components/RHF/utils.ts | 3 +- src/services/ui/src/pages/form/index.tsx | 37 ++++++------------- src/services/ui/src/pages/form/proto.tsx | 13 +++++-- 8 files changed, 65 insertions(+), 68 deletions(-) diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx index ad84769a5e..61744acb0e 100644 --- a/src/services/ui/src/components/RHF/FieldArray.tsx +++ b/src/services/ui/src/components/RHF/FieldArray.tsx @@ -4,6 +4,8 @@ import { Trash2 } from "lucide-react"; import { RHFSlot } from "./Slot"; import { Button, FormField } from "../Inputs"; import { FieldArrayProps } from "./types"; +import { slotReducer } from "./utils"; +import { useEffect } from "react"; export const RHFFieldArray = ( props: FieldArrayProps @@ -11,17 +13,18 @@ export const RHFFieldArray = ( const fieldArr = useFieldArray({ control: props.control, name: props.name, + shouldUnregister: true, }); const onAppend = () => { - fieldArr.append( - props.fields.reduce((ACC, S) => { - ACC[S.name] = ""; - return ACC; - }, {} as any) - ); + fieldArr.append(props.fields.reduce(slotReducer, {}) as any); }; + useEffect(() => { + if (fieldArr.fields.length) return; + fieldArr.append(props.fields.reduce(slotReducer, {}) as any); + }, []); + return (
{fieldArr.fields.map((FLD, index) => { @@ -30,10 +33,10 @@ export const RHFFieldArray = ( {props.fields.map((SLOT) => { return ( ( props: FieldGroupProps @@ -14,14 +16,14 @@ export const FieldGroup = ( }); const onAppend = () => { - fieldArr.append( - props.fields.reduce((ACC, S) => { - ACC[S.name] = ""; - return ACC; - }, {} as any) - ); + fieldArr.append(props.fields.reduce(slotReducer, {}) as any); }; + useEffect(() => { + if (fieldArr.fields.length) return; + fieldArr.append(props.fields.reduce(slotReducer, {}) as any); + }, []); + return (
{fieldArr.fields.map((FLD, index) => { @@ -30,10 +32,10 @@ export const FieldGroup = ( {props.fields.map((SLOT) => { return ( (props: {
)}
- {props.form.slots.map((SLOT) => { - return ( - - - - ); - })} + {props.form.slots.map((SLOT) => ( + + + + ))}
diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx index 5d35710d93..ffec08a39e 100644 --- a/src/services/ui/src/components/RHF/Slot.tsx +++ b/src/services/ui/src/components/RHF/Slot.tsx @@ -118,14 +118,16 @@ export const RHFSlot = < {field.value === OPT.value && OPT.form && - OPT.form.map((FORM: any, index: any) => ( -
- -
- ))} + OPT.form.map((FORM: any, index: any) => { + return ( +
+ +
+ ); + })} {field.value === OPT.value && OPT.slots && OPT.slots.map((SLOT: any, index: any) => ( @@ -136,7 +138,8 @@ export const RHFSlot = < ))} @@ -178,7 +181,8 @@ export const RHFSlot = < ))} diff --git a/src/services/ui/src/components/RHF/types.ts b/src/services/ui/src/components/RHF/types.ts index 4b6eb8d97e..6a9b51453c 100644 --- a/src/services/ui/src/components/RHF/types.ts +++ b/src/services/ui/src/components/RHF/types.ts @@ -20,11 +20,11 @@ export type RHFSlotProps = { labelStyling?: string; description?: ReactElement | string; dependency?: DependencyRule; + rules?: RegisterOptions; } & { [K in keyof RHFComponentMap]: { rhf: K; props?: RHFComponentMap[K]; - rules?: RegisterOptions; fields?: K extends "FieldArray" ? RHFSlotProps[] : K extends "FieldGroup" diff --git a/src/services/ui/src/components/RHF/utils.ts b/src/services/ui/src/components/RHF/utils.ts index 5750699118..8dbfc97c02 100644 --- a/src/services/ui/src/components/RHF/utils.ts +++ b/src/services/ui/src/components/RHF/utils.ts @@ -47,8 +47,7 @@ export const slotReducer = (ACC: GL, SLOT: T.RHFSlotProps): GL => { if (SLOT.rhf === "Checkbox") { if (SLOT.props?.options) { SLOT.props.options.forEach(optionReducer); - const [first] = SLOT.props.options; - ACC[SLOT.name] = first.value; + ACC[SLOT.name] = []; } } diff --git a/src/services/ui/src/pages/form/index.tsx b/src/services/ui/src/pages/form/index.tsx index fce4e8c74b..2d1cc83ac2 100644 --- a/src/services/ui/src/pages/form/index.tsx +++ b/src/services/ui/src/pages/form/index.tsx @@ -1,4 +1,3 @@ -import { ajvResolver } from "@hookform/resolvers/ajv"; import { useForm } from "react-hook-form"; import { Button, Form } from "@/components/Inputs"; @@ -6,35 +5,21 @@ import { RHFDocument } from "@/components/RHF"; import { ABP1 } from "./proto"; import { documentInitializer } from "@/components/RHF"; -export const JsonFormSchema = { - type: "object", - properties: { - alt_benefit_plan_population_name: { - type: "string", - minLength: 1, - maxLength: 20, - errorMessage: { - minLength: "This field is required", - }, - }, - is_enrollment_available: { - type: "string", - }, - }, - required: ["alt_benefit_plan_population_name"], - additionalProperties: true, -}; - export function ExampleForm() { + const defaultValues = documentInitializer(ABP1); + const form = useForm({ - resolver: ajvResolver(JsonFormSchema as any), - // shouldUnregister: true, - defaultValues: documentInitializer(ABP1), + defaultValues, }); - const onSubmit = form.handleSubmit((data) => { - console.log(data); - }); + const onSubmit = form.handleSubmit( + (data) => { + console.log({ data }); + }, + (err) => { + console.log({ err }); + } + ); return (
diff --git a/src/services/ui/src/pages/form/proto.tsx b/src/services/ui/src/pages/form/proto.tsx index 32e9f3a649..757010273c 100644 --- a/src/services/ui/src/pages/form/proto.tsx +++ b/src/services/ui/src/pages/form/proto.tsx @@ -14,9 +14,14 @@ export const ABP1: Document = { rhf: "Input", name: "alt_benefit_plan_population_name", label: "Alternative Benefit Plan population name", - props: { - placeholder: "enter name", + rules: { + required: "*Required", + maxLength: { + value: 20, + message: "Max 20 Characters", + }, }, + props: { placeholder: "enter name" }, dependency: { // example of a value changing field, with multi-conditions conditions: [ @@ -308,7 +313,7 @@ export const ABP1: Document = { slots: [ { rhf: "FieldGroup", - name: "income_definition_specific_statewide_arr", + name: "income_definition_region_statewide_group", props: { appendText: "Add Region", removeText: @@ -317,7 +322,7 @@ export const ABP1: Document = { fields: [ { rhf: "FieldArray", - name: "income_definition_specific_statewide", + name: "income_definition_region_statewide_arr", fields: [ { rhf: "Input",