commit e3546f7c4e414b23b007e8606e8465cadce8449c parent 76701580ce8a44271bfe9d464bd7a1f668ea1b0d Author: Sebastian <sebasjm@gmail.com> Date: Mon, 10 Mar 2025 15:28:14 -0300 hidden values should not count into the form state Diffstat:
15 files changed, 197 insertions(+), 172 deletions(-)
diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx @@ -390,7 +390,6 @@ function JumpByIdForm({ handler={{ onChange: onTog, value: fitered, - state: {}, }} /> </div> diff --git a/packages/web-util/src/forms/FormProvider.tsx b/packages/web-util/src/forms/FormProvider.tsx @@ -11,7 +11,7 @@ export interface FormType<T extends object> { initial?: Partial<T>; readOnly?: boolean; onUpdate?: (v: Partial<T>) => void; - computeFormState?: (v: Partial<T>) => FormState<T>; + // computeFormState?: (v: Partial<T>) => FormState<T>; } export const FormContext = createContext<FormType<any> | undefined>(undefined); @@ -27,24 +27,25 @@ export const FormContext = createContext<FormType<any> | undefined>(undefined); * - object => recurse into * - array => behavior result and element field */ -export type FormState<T extends object | undefined> = { - [field in keyof T]?: T[field] extends AbsoluteTime - ? FieldUIOptions - : T[field] extends AmountJson - ? FieldUIOptions - : T[field] extends Array<infer P extends object> - ? InputArrayFieldState<P> - : T[field] extends object | undefined - ? FormState<T[field]> - : FieldUIOptions; -}; +// export type FormState<T extends object | undefined> = { +// [field in keyof T]?: T[field] extends AbsoluteTime +// ? FieldUIOptions +// : T[field] extends AmountJson +// ? FieldUIOptions +// : T[field] extends Array<infer P extends object> +// ? InputArrayFieldState<P> +// : T[field] extends object | undefined +// ? FormState<T[field]> +// : FieldUIOptions; +// }; /** - * Properties that can be defined by design or by computing state - * - * @deprecated + * properties only to be defined on design time */ -export type FieldUIOptions = { +export interface UIFormProps<T extends object, K extends keyof T> { + // property name of the object + name: K; + /* instruction to be shown in the field */ placeholder?: TranslatedString; /* long text help to be shown on demand */ @@ -60,15 +61,6 @@ export type FieldUIOptions = { focus?: boolean; /* show a mark as required*/ required?: boolean; -}; - -/** - * properties only to be defined on design time - */ -export interface UIFormProps<T extends object, K extends keyof T> - extends FieldUIOptions { - // property name of the object - name: K; // label if the field label: TranslatedString; @@ -84,8 +76,9 @@ export interface UIFormProps<T extends object, K extends keyof T> export type UIFieldHandler<T = any> = { value: T | undefined; onChange: (s: T) => void; - state: FieldUIOptions; + // state: FieldUIOptions; error?: TranslatedString; + parentRef?: any; }; export interface IconAddon { @@ -108,11 +101,11 @@ export interface StringConverter<T> { fromStringUI: (v?: string) => T; } -export interface InputArrayFieldState<P extends object> extends FieldUIOptions { - elements?: FormState<P>[]; -} +// export interface InputArrayFieldState<P extends object> extends FieldUIOptions { +// elements?: FormState<P>[]; +// } -export type FormProviderProps<T extends object> = Omit<FormType<T>, "value"> & { - onSubmit?: (v: Partial<T>, s: FormState<T> | undefined) => void; - children?: ComponentChildren; -}; +// export type FormProviderProps<T extends object> = Omit<FormType<T>, "value"> & { +// onSubmit?: (v: Partial<T>, s: FormState<T> | undefined) => void; +// children?: ComponentChildren; +// }; diff --git a/packages/web-util/src/forms/fields/InputArray.tsx b/packages/web-util/src/forms/fields/InputArray.tsx @@ -1,6 +1,6 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; +import { useState } from "preact/hooks"; import { getValueFromPath, RecursivePartial, @@ -11,8 +11,8 @@ import { useTranslationContext, } from "../../index.browser.js"; import { UIFormProps } from "../FormProvider.js"; +import { UIFormElementConfig } from "../forms-types.js"; import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; -import { UIFormElementConfig, UIHandlerId } from "../forms-types.js"; export function noHandlerPropsAndNoContextForField( field: string | number | symbol, @@ -109,7 +109,7 @@ export function InputArray<T extends object, K extends keyof T>( const { fields, labelField, label, required, tooltip, hidden, help } = props; const { i18n } = useTranslationContext(); - const { value, onChange, state, error } = + const { value, onChange, error } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); const [dirty, setDirty] = useState<boolean>(); // FIXME: dirty state should come from handler @@ -164,7 +164,7 @@ export function InputArray<T extends object, K extends keyof T>( /> ); })} - {!state.disabled && ( + {!props.disabled && ( <div class="pt-2"> <Option label={i18n.str`Add new...`} diff --git a/packages/web-util/src/forms/fields/InputChoiceHorizontal.tsx b/packages/web-util/src/forms/fields/InputChoiceHorizontal.tsx @@ -14,10 +14,10 @@ export function InputChoiceHorizontal<T extends object, K extends keyof T>( choices: ChoiceH<string>[]; } & UIFormProps<T, K>, ): VNode { - const { choices, label, tooltip, help, required, converter } = props; - const { value, onChange, state } = + const { hidden, choices, label, tooltip, help, required, converter } = props; + const { value, onChange } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); - if (state.hidden) { + if (hidden) { return <Fragment />; } @@ -55,7 +55,7 @@ export function InputChoiceHorizontal<T extends object, K extends keyof T>( <button type="button" key={idx} - disabled={state.disabled} + disabled={props.disabled} label={choice.label} class={clazz} onClick={(e) => { diff --git a/packages/web-util/src/forms/fields/InputChoiceStacked.tsx b/packages/web-util/src/forms/fields/InputChoiceStacked.tsx @@ -15,23 +15,13 @@ export function InputChoiceStacked<T extends object, K extends keyof T>( choices: ChoiceS<T[K]>[]; } & UIFormProps<T, K>, ): VNode { - const { - choices, - name, - label, - tooltip, - help, - placeholder, - required, - before, - after, - converter, - } = props; + const { choices, name, label, tooltip, help, hidden, required, converter } = + props; - const { value, onChange, state } = + const { value, onChange } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); - if (state.hidden) { + if (hidden) { return <Fragment />; } @@ -65,7 +55,7 @@ export function InputChoiceStacked<T extends object, K extends keyof T>( type="radio" name="server-size" // defaultValue={choice.value} - disabled={state.disabled} + disabled={props.disabled} value={ (!converter ? (choice.value as string) diff --git a/packages/web-util/src/forms/fields/InputDuration.tsx b/packages/web-util/src/forms/fields/InputDuration.tsx @@ -11,7 +11,7 @@ export function InputDuration<T extends object, K extends keyof T>( ): VNode { const { name, placeholder, before, after, converter, disabled } = props; const { i18n } = useTranslationContext(); - const { value, onChange, state, error } = + const { value, onChange, error } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); const specDuration = !value ? undefined : Duration.toSpec(value as Duration); @@ -83,7 +83,7 @@ export function InputDuration<T extends object, K extends keyof T>( yearsRef.current.value = strYears; }, [strYears]); - if (state.hidden) { + if (props.hidden) { return <Fragment />; } @@ -132,7 +132,7 @@ export function InputDuration<T extends object, K extends keyof T>( return ( <InputWrapper<T, K> {...props} - help={props.help ?? state.help} + help={props.help} disabled={disabled ?? false} error={showError ? error : undefined} > diff --git a/packages/web-util/src/forms/fields/InputFile.tsx b/packages/web-util/src/forms/fields/InputFile.tsx @@ -7,11 +7,11 @@ export function InputFile<T extends object, K extends keyof T>( props: { maxBites: number; accept?: string } & UIFormProps<T, K>, ): VNode { const { label, tooltip, required, help: propsHelp, maxBites, accept } = props; - const { value, onChange, state } = + const { value, onChange } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); - const help = propsHelp ?? state.help; - if (state.hidden) { + const help = propsHelp; + if (props.hidden) { return <Fragment />; } @@ -51,7 +51,7 @@ export function InputFile<T extends object, K extends keyof T>( clip-rule="evenodd" /> </svg> - {!state.disabled && ( + {!props.disabled && ( <div class="my-2 flex text-sm leading-6 text-gray-600"> <label for={String(props.name)} @@ -139,7 +139,7 @@ export function InputFile<T extends object, K extends keyof T>( </div> )} - {!state.disabled && ( + {!props.disabled && ( <div class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer " onClick={() => { diff --git a/packages/web-util/src/forms/fields/InputLine.tsx b/packages/web-util/src/forms/fields/InputLine.tsx @@ -1,9 +1,9 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { ComponentChildren, Fragment, VNode, h } from "preact"; +import { useEffect, useRef, useState } from "preact/hooks"; +import { composeRef, saveRef } from "../../components/utils.js"; import { Addon, UIFormProps } from "../FormProvider.js"; import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; -import { useEffect, useRef } from "preact/hooks"; -import { composeRef, doAutoFocus, saveRef } from "../../components/utils.js"; //@ts-ignore const TooltipIcon = ( @@ -169,10 +169,19 @@ type InputType = "text" | "text-area" | "password" | "email" | "number"; export function InputLine<T extends object, K extends keyof T>( props: { type: InputType } & UIFormProps<T, K>, ): VNode { - const { name, placeholder, before, after, converter, type, disabled } = props; + const { + name, + placeholder, + before, + after, + converter, + type, + disabled, + hidden, + } = props; const input = useRef<HTMLTextAreaElement | HTMLInputElement>(); - const { value, onChange, state, error } = + const { value, onChange, error } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); const fromString: (s: string) => any = @@ -185,7 +194,8 @@ export function InputLine<T extends object, K extends keyof T>( input.current.value = !value ? "" : toString(value); }, [value]); - if (state.hidden) { + // useHiddenHandler(name as string, hidden ?? false, value, onChange); + if (hidden) { return <Fragment />; } @@ -236,7 +246,7 @@ export function InputLine<T extends object, K extends keyof T>( return ( <InputWrapper<T, K> {...props} - help={props.help ?? state.help} + help={props.help} disabled={disabled ?? false} error={showError ? error : undefined} > @@ -263,7 +273,7 @@ export function InputLine<T extends object, K extends keyof T>( return ( <InputWrapper<T, K> {...props} - help={props.help ?? state.help} + help={props.help} disabled={disabled ?? false} error={showError ? error : undefined} > diff --git a/packages/web-util/src/forms/fields/InputSelectMultiple.tsx b/packages/web-util/src/forms/fields/InputSelectMultiple.tsx @@ -26,7 +26,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>( max, } = props; const { i18n } = useTranslationContext(); - const { value, onChange, state } = + const { value, onChange } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); const [filter, setFilter] = useState<string | undefined>(undefined); @@ -61,7 +61,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>( name={props.name as string} /> - {!state.disabled && ( + {!props.disabled && ( <div class="relative mt-2"> <input id="combobox" @@ -79,7 +79,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>( /> <button type="button" - disabled={state.disabled} + disabled={props.disabled} onClick={() => { setFilter(filter === undefined ? "" : undefined); setDirty(true); @@ -157,7 +157,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>( {choiceMap[v]} <button type="button" - disabled={state.disabled} + disabled={props.disabled} onClick={() => { const newValue = [...list]; newValue.splice(idx, 1); diff --git a/packages/web-util/src/forms/fields/InputToggle.tsx b/packages/web-util/src/forms/fields/InputToggle.tsx @@ -7,25 +7,14 @@ import { useState } from "preact/hooks"; export function InputToggle<T extends object, K extends keyof T>( props: { threeState: boolean } & UIFormProps<T, K>, ): VNode { - const { - name, - label, - tooltip, - help, - placeholder, - required, - before, - after, - converter, - threeState, - } = props; - const { value, onChange, error, state } = + const { label, tooltip, help, required, threeState } = props; + const { value, onChange, error } = props.handler ?? noHandlerPropsAndNoContextForField(props.name); const [dirty, setDirty] = useState<boolean>(); const isOn = !!value; - if (state.hidden) { + if (props.hidden) { return <Fragment />; } diff --git a/packages/web-util/src/forms/forms-types.ts b/packages/web-util/src/forms/forms-types.ts @@ -46,7 +46,7 @@ export type DoubleColumnFormSection = { return if the field should be hidden. receives the value after conversion and the root of the form. */ - hide?: (root: undefined | Record<string, any>) => boolean | undefined; + // hide?: (root: undefined | Record<string, any>) => boolean | undefined; }; export type UIFormElementConfig = diff --git a/packages/web-util/src/forms/forms-ui.tsx b/packages/web-util/src/forms/forms-ui.tsx @@ -1,4 +1,4 @@ -import { Fragment, h, h as create, VNode } from "preact"; +import { h as create, Fragment, h, VNode } from "preact"; import { ErrorAndLabel, FormErrors, @@ -6,19 +6,19 @@ import { useForm, } from "../hooks/useForm.js"; // import { getConverterById, useTranslationContext } from "../index.browser.js"; -import { convertFormConfigToUiField } from "./forms-utils.js"; -import { - DoubleColumnFormSection, - FormDesign, - UIFormElementConfig, -} from "./forms-types.js"; +import { useState } from "preact/hooks"; +import { useTranslationContext } from "../index.browser.js"; import { FieldComponentFunction, UIFormConfiguration, UIFormField, } from "./field-types.js"; -import { useTranslationContext } from "../index.browser.js"; -import { useState } from "preact/hooks"; +import { + DoubleColumnFormSection, + FormDesign, + UIFormElementConfig, +} from "./forms-types.js"; +import { convertFormConfigToUiField } from "./forms-utils.js"; export function DefaultForm<T>({ design, @@ -106,7 +106,7 @@ export function DoubleColumnFormSectionUI<T>({ return "hidden" in v.properties && !!v.properties.hidden; }); if (allHidden) { - return <Fragment />; + return <RenderAllFieldsByUiConfig key="fields" fields={fs} focus={focus} />; } return ( <form @@ -126,7 +126,7 @@ export function DoubleColumnFormSectionUI<T>({ <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-md md:col-span-2"> <div class="p-3"> <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> - <RenderAllFieldsByUiConfig fields={fs} focus={focus} /> + <RenderAllFieldsByUiConfig key="fields" fields={fs} focus={focus} /> </div> </div> </div> @@ -176,7 +176,16 @@ export function RenderAllFieldsByUiConfig({ const Component = UIFormConfiguration[ field.type ] as FieldComponentFunction<any>; + // if ("handler" in field.properties && field.properties.handler) { + // if ( + // field.properties.name === + // TalerFormAttributes.VQF_902_1.CUSTOMER_NATURAL_FULL_NAME.id + // ) { + // console.log("QWEQWE", field.properties.name, field.properties.hidden); + // } + // } const p = { ...field.properties, focus: !!focus && i === 0 }; + return <Component key={i} {...p} />; }), ); diff --git a/packages/web-util/src/forms/forms-utils.ts b/packages/web-util/src/forms/forms-utils.ts @@ -84,6 +84,17 @@ export function convertFormConfigToUiField( return resp; } } + const names = config.id.split("."); + const handler = getValueDeeper2(form, names); + const name = names[names.length - 1]; + //FIXME: first computed prop, all should be computed + const hidden = + config.hidden === true + ? true + : config.hide + ? config.hide(handler.value, handler.parentRef) + : undefined; + // Input Fields switch (config.type) { case "array": { @@ -92,18 +103,14 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), labelField: config.labelFieldId, fields: config.fields, - // convertFormConfigToUiField( - // i18n_, - // config.fields, - // (form as any)[config.id].value ?? {}, - // getConverterByFieldType, - // ), + hidden, }, } as UIFormField; } @@ -113,10 +120,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -126,10 +135,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -139,10 +150,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, currency: config.currency, }, } as UIFormField; @@ -153,10 +166,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, choices: config.choices, }, } as UIFormField; @@ -167,10 +182,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, choices: config.choices, }, } as UIFormField; @@ -181,10 +198,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, accept: config.accept, maxBites: config.maxBytes, }, @@ -196,10 +215,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -209,10 +230,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -222,10 +245,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, choices: config.choices, unique: config.unique, }, @@ -237,10 +262,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, choices: config.choices, }, } as UIFormField; @@ -251,10 +278,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -264,10 +293,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -277,10 +308,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -290,10 +323,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, }, } as UIFormField; } @@ -303,10 +338,12 @@ export function convertFormConfigToUiField( properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps( - form, + name, + handler, config, getConverterByFieldType(config.type, config), ), + hidden, threeState: config.threeState, }, } as UIFormField; @@ -343,29 +380,27 @@ function getConverterByFieldType( * handler, since the input value can change the * some states like hidden or disabled. * @param form - * @param p + * @param config * @param converter * @returns */ function converInputFieldsProps( - form: object, - p: UIFormFieldBaseConfig, + name: string, + handler: UIFieldHandler, + config: UIFormFieldBaseConfig, converter: StringConverter<unknown>, ) { - const names = p.id.split("."); - // console.log("NAMES", names, getValueDeeper2(form, names), form) - const h = getValueDeeper2(form, names); return { converter, - handler: h, - hidden: h.state.hidden, - required: h.state.required, - disabled: h.state.disabled, - name: names[names.length - 1], - help: p.help, - placeholder: p.placeholder, - tooltip: p.tooltip, - label: p.label as TranslatedString, + handler, + name, + hidden: config.hidden, + required: config.required, + disabled: config.disabled, + help: config.help, + placeholder: config.placeholder, + tooltip: config.tooltip, + label: config.label as TranslatedString, }; } diff --git a/packages/web-util/src/hooks/useForm.ts b/packages/web-util/src/hooks/useForm.ts @@ -107,21 +107,18 @@ export function useForm<T>( validateRequiredFields(formValue, design, i18n), ); - const handler = constructFormHandler( + const { handler, result } = constructFormHandler( design, formValue, formUpdateHandler, errors, ); - const status = - errors === undefined - ? { status: "ok" as const, result: formValue as any, errors: undefined } - : { - status: "fail" as const, - result: formValue as any, - errors, - }; + const status = { + status: errors === undefined ? "ok" : "fail", + result, + errors, + } as FormStatus<T>; return { handler, @@ -257,13 +254,11 @@ function constructFormHandler<T>( formValue: RecursivePartial<FormValues<T>>, onValueChange: (d: RecursivePartial<FormValues<T>>) => void, errors: FormErrors<T> | undefined, -): FormHandler<T> { - let formHandler: FormHandler<T> = {}; +): { handler: FormHandler<T>; result: FormStatus<T> } { + let handler: FormHandler<T> = {}; + let result = {} as FormStatus<T>; - function createFieldHandler( - formElement: UIFormElementConfig, - hiddenSection: boolean | undefined, - ): void { + function createFieldHandler(formElement: UIFormElementConfig): void { if (!("id" in formElement)) { return; } @@ -285,36 +280,40 @@ function constructFormHandler<T>( undefined, ); - const isHidden = !!hiddenSection - ? true - : formElement.hide - ? formElement.hide(currentValue, formValue) - : formElement.hidden; - const field: UIFieldHandler = { error: currentError?.message, - value: isHidden ? undefined : currentValue, + value: currentValue, onChange: updater, - state: { - hidden: isHidden, - required: formElement.required, - disabled: formElement.disabled, - }, + parentRef: result, }; - formHandler = setValueIntoPath(formHandler, path, field); + handler = setValueIntoPath(handler, path, field); + const hidden = + formElement.hidden === true || + (formElement.hide && formElement.hide(field.value, result) === true); + + // console.log( + // "KPM", + // path, + // hidden, + // currentValue, + // formElement.hidden, + // !formElement.hide ? undefined : formElement.hide(field.value, result), + // ); + if (!hidden) { + result = setValueIntoPath(result, path, field.value); + } } switch (design.type) { case "double-column": { design.sections.forEach((sec) => { - const hidden = sec.hide ? sec.hide(formValue) : undefined; - sec.fields.forEach((f) => createFieldHandler(f, hidden)); + sec.fields.forEach((f) => createFieldHandler(f)); }); break; } case "single-column": { - design.fields.forEach((f) => createFieldHandler(f, undefined)); + design.fields.forEach((f) => createFieldHandler(f)); break; } default: { @@ -322,5 +321,5 @@ function constructFormHandler<T>( } } - return formHandler; + return { handler, result }; } diff --git a/packages/web-util/src/stories.html b/packages/web-util/src/stories.html @@ -16,7 +16,8 @@ <!-- FIXME: remove this --> <!-- this is an easy setup of tailwind to test out the form fields --> <!-- the css must be build locally and prevent the requirement of internet access for development --> - <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script> + <!-- <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script> --> + <link rel="stylesheet" href="app/main.css" /> </head> <body> <taler-stories id="container"></taler-stories>