diff options
26 files changed, 103 insertions, 103 deletions
diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx b/packages/aml-backoffice-ui/src/Dashboard.tsx index 2d75de660..a38391efb 100644 --- a/packages/aml-backoffice-ui/src/Dashboard.tsx +++ b/packages/aml-backoffice-ui/src/Dashboard.tsx @@ -84,6 +84,9 @@ const versionText = VERSION * also fundations * also life insurance * + * no all state are handled by all the inputs + * all the input implementation should respect + * ui props and state */ export function ExchangeAmlFrame({ diff --git a/packages/aml-backoffice-ui/src/forms/902_11e.ts b/packages/aml-backoffice-ui/src/forms/902_11e.ts index a604b560e..7ed3ea42b 100644 --- a/packages/aml-backoffice-ui/src/forms/902_11e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_11e.ts @@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js"; import { Simplest, resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({ - versionId: "2023-05-15", design: [ { title: @@ -49,8 +48,8 @@ export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({ { type: "array", props: { - name: "businessEstablisher", - label: "Persons" as TranslatedString, + name: "people", + label: "People" as TranslatedString, required: true, placeholder: "this is the placeholder" as TranslatedString, fields: [ @@ -111,13 +110,12 @@ export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({ v: Partial<Form902_11.Form>, ): FormState<Form902_11.Form> { return { - person: { - hidden: - v.declares !== "controlling-in-other-ways" && + people: { + hidden: v.declares !== "controlling-in-other-ways" && v.declares !== "managing-director", - }, + } }; - }, + } }); namespace Form902_11 { @@ -129,7 +127,7 @@ namespace Form902_11 { export interface Form extends BaseForm { contractingPartner: string; declares: "25-or-more" | "controlling-in-other-ways" | "managing-director"; - person: Person[]; + people: Person[]; fiduciaryAssets: "no" | "yes"; signature: string; } diff --git a/packages/aml-backoffice-ui/src/forms/902_12e.ts b/packages/aml-backoffice-ui/src/forms/902_12e.ts index 12e885e8f..3cfe69f88 100644 --- a/packages/aml-backoffice-ui/src/forms/902_12e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_12e.ts @@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_12.Form> => ({ - versionId: "2023-05-15", design: [ { title: "Foundations" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_13e.ts b/packages/aml-backoffice-ui/src/forms/902_13e.ts index f03364de0..045246fc6 100644 --- a/packages/aml-backoffice-ui/src/forms/902_13e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_13e.ts @@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_13.Form> => ({ - versionId: "2023-05-15", design: [ { title: "Declaration for trusts" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_15e.ts b/packages/aml-backoffice-ui/src/forms/902_15e.ts index b9796add8..0d90d82ee 100644 --- a/packages/aml-backoffice-ui/src/forms/902_15e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_15e.ts @@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js"; import { Simplest, resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_15.Form> => ({ - versionId: "2023-05-15", design: [ { title: @@ -156,8 +155,7 @@ export const v1 = (current: BaseForm): FlexibleForm<Form902_15.Form> => ({ behavior: function formBehavior( v: Partial<Form902_15.Form>, ): FormState<Form902_15.Form> { - return { - }; + return {}; }, }); diff --git a/packages/aml-backoffice-ui/src/forms/902_1e.ts b/packages/aml-backoffice-ui/src/forms/902_1e.ts index 2cd16b840..7fcabe829 100644 --- a/packages/aml-backoffice-ui/src/forms/902_1e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_1e.ts @@ -5,7 +5,6 @@ import { FlexibleForm, languageList } from "./index.js"; import { resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_1.Form> => ({ - versionId: "2023-05-15", design: [ { title: "Information on customer" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_4e.ts b/packages/aml-backoffice-ui/src/forms/902_4e.ts index 041f08c98..6f82302f3 100644 --- a/packages/aml-backoffice-ui/src/forms/902_4e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_4e.ts @@ -7,7 +7,6 @@ import { Simplest, resolutionSection } from "./simplest.js"; import { ArrowRightIcon, ChevronRightIcon } from "../pages/Cases.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_4.Form> => ({ - versionId: "2023-05-15", design: [ { title: "Risk Profile AMLA" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_5e.ts b/packages/aml-backoffice-ui/src/forms/902_5e.ts index c3948e1c7..d695c94b4 100644 --- a/packages/aml-backoffice-ui/src/forms/902_5e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_5e.ts @@ -5,7 +5,6 @@ import { FlexibleForm, currencyList } from "./index.js"; import { resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_5.Form> => ({ - versionId: "2023-05-15", design: [ { title: "Customer Profile" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_9e.ts b/packages/aml-backoffice-ui/src/forms/902_9e.ts index a5753d5d0..e52531bcb 100644 --- a/packages/aml-backoffice-ui/src/forms/902_9e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_9e.ts @@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm<Form902_9.Form> => ({ - versionId: "2023-05-15", design: [ { title: diff --git a/packages/aml-backoffice-ui/src/forms/index.ts b/packages/aml-backoffice-ui/src/forms/index.ts index c236bbaa3..8feef0c49 100644 --- a/packages/aml-backoffice-ui/src/forms/index.ts +++ b/packages/aml-backoffice-ui/src/forms/index.ts @@ -3,7 +3,6 @@ import { FormState } from "../handlers/FormProvider.js"; import { DoubleColumnForm } from "../handlers/forms.js"; export interface FlexibleForm<T extends object> { - versionId: string; design: DoubleColumnForm; behavior: (form: Partial<T>) => FormState<T>; } diff --git a/packages/aml-backoffice-ui/src/forms/simplest.ts b/packages/aml-backoffice-ui/src/forms/simplest.ts index 9b462e1c5..5acb58201 100644 --- a/packages/aml-backoffice-ui/src/forms/simplest.ts +++ b/packages/aml-backoffice-ui/src/forms/simplest.ts @@ -13,7 +13,6 @@ import { FlexibleForm } from "./index.js"; import { amlStateConverter } from "../pages/ShowConsolidated.js"; export const v1 = (current: BaseForm): FlexibleForm<Simplest.Form> => ({ - versionId: "2023-05-25", design: [ { title: "Simple form" as TranslatedString, @@ -33,6 +32,9 @@ export const v1 = (current: BaseForm): FlexibleForm<Simplest.Form> => ({ v: Partial<Simplest.Form>, ): FormState<Simplest.Form> { return { + comment: { + help: ((v.comment?.length ?? 0) > 10 ? "too long" : "") as TranslatedString + }, threshold: { disabled: v.state === AmlExchangeBackend.AmlState.frozen, }, diff --git a/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx b/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx index 310954bd0..2d9eec164 100644 --- a/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx +++ b/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx @@ -10,7 +10,7 @@ import { useState } from "preact/hooks"; -export interface FormType<T> { +export interface FormType<T extends object> { value: MutableRef<Partial<T>>; initialValue?: Partial<T>; readOnly?: boolean; @@ -21,18 +21,20 @@ export interface FormType<T> { //@ts-ignore export const FormContext = createContext<FormType<any>>({}); -export type FormState<T> = { +export type FormState<T extends object> = { [field in keyof T]?: T[field] extends AbsoluteTime - ? Partial<InputFieldState> + ? BehaviorResult : T[field] extends AmountJson - ? Partial<InputFieldState> - : T[field] extends Array<infer P> - ? Partial<InputArrayFieldState<P>> + ? BehaviorResult + : T[field] extends Array<infer P extends object> + ? InputArrayFieldState<P> : T[field] extends (object | undefined) ? FormState<T[field]> - : Partial<InputFieldState>; + : BehaviorResult; }; +export type BehaviorResult = Partial<InputFieldState> & FieldUIOptions + export interface InputFieldState { /* should show the error */ error?: TranslatedString; @@ -44,11 +46,46 @@ export interface InputFieldState { hidden: boolean; } -export interface InputArrayFieldState<T> extends InputFieldState { - elements: FormState<T>[]; +export interface IconAddon { + type: "icon"; + icon: VNode; +} +export interface ButtonAddon { + type: "button"; + onClick: () => void; + children: ComponentChildren; +} +export interface TextAddon { + type: "text"; + text: TranslatedString; } +export type Addon = IconAddon | ButtonAddon | TextAddon; -export function FormProvider<T>({ +export interface StringConverter<T> { + toStringUI: (v?: T) => string; + fromStringUI: (v?: string) => T; +} + +type FieldUIOptions = { + placeholder?: TranslatedString; + tooltip?: TranslatedString; + help?: TranslatedString; + required?: boolean; +} + +export interface UIFormProps<T extends object, K extends keyof T> extends FieldUIOptions { + name: K; + label: TranslatedString; + before?: Addon; + after?: Addon; + converter?: StringConverter<T[K]>; +} + +export interface InputArrayFieldState<P extends object> extends BehaviorResult { + elements?: FormState<P>[]; +} + +export function FormProvider<T extends object>({ children, initialValue, onUpdate: notify, @@ -63,18 +100,10 @@ export function FormProvider<T>({ readOnly?: boolean; children: ComponentChildren; }): VNode { - // const value = useRef(initialValue ?? {}); - // useEffect(() => { - // return function onUnload() { - // value.current = initialValue ?? {}; - // }; - // }); - // const onUpdate = notify + const [state, setState] = useState<Partial<T>>(initialValue ?? {}); const value = { current: state }; - // console.log("RENDER", initialValue, value); const onUpdate = (v: typeof state) => { - // console.log("updated"); setState(v); if (notify) notify(v); }; diff --git a/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx b/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx index b6cc78adb..29ec43525 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx @@ -1,7 +1,8 @@ import { AmountJson, Amounts, TranslatedString } from "@gnu-taler/taler-util"; import { VNode, h } from "preact"; -import { InputLine, UIFormProps } from "./InputLine.js"; +import { InputLine } from "./InputLine.js"; import { useField } from "./useField.js"; +import { UIFormProps } from "./FormProvider.js"; export function InputAmount<T extends object, K extends keyof T>( props: { currency?: string } & UIFormProps<T, K>, diff --git a/packages/aml-backoffice-ui/src/handlers/InputArray.tsx b/packages/aml-backoffice-ui/src/handlers/InputArray.tsx index d229b35de..38c399e66 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputArray.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputArray.tsx @@ -1,10 +1,10 @@ +import { TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, VNode, h } from "preact"; -import { useEffect, useState } from "preact/hooks"; -import { FormProvider, InputArrayFieldState } from "./FormProvider.js"; -import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { useState } from "preact/hooks"; +import { FormProvider, UIFormProps } from "./FormProvider.js"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; import { useField } from "./useField.js"; -import { TranslatedString } from "@gnu-taler/taler-util"; function Option({ label, diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx index a5f263615..312e014c5 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx @@ -1,7 +1,8 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; +import { UIFormProps } from "./FormProvider.js"; export interface Choice<V> { label: TranslatedString; diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx index 29c596994..48d367ff2 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx @@ -1,7 +1,8 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; +import { UIFormProps } from "./FormProvider.js"; export interface Choice<V> { label: TranslatedString; diff --git a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx b/packages/aml-backoffice-ui/src/handlers/InputDate.tsx index 7fcc16b33..794bfd7a2 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputDate.tsx @@ -1,11 +1,12 @@ import { AbsoluteTime } from "@gnu-taler/taler-util"; -import { InputLine, UIFormProps } from "./InputLine.js"; +import { InputLine } from "./InputLine.js"; import { Fragment, VNode, h } from "preact"; import { format, parse } from "date-fns"; import { Dialog } from "./Dialog.js"; import { Calendar } from "./Calendar.js"; import { useState } from "preact/hooks"; import { useField } from "./useField.js"; +import { UIFormProps } from "./FormProvider.js"; export function InputDate<T extends object, K extends keyof T>( props: { pattern?: string } & UIFormProps<T, K>, diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx index d9af03f86..bc460f370 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx @@ -1,6 +1,7 @@ import { Fragment, VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; +import { UIFormProps, BehaviorResult } from "./FormProvider.js"; export function InputFile<T extends object, K extends keyof T>( props: { maxBites: number; accept?: string } & UIFormProps<T, K>, @@ -11,12 +12,12 @@ export function InputFile<T extends object, K extends keyof T>( placeholder, tooltip, required, - help, + help: propsHelp, maxBites, accept, } = props; const { value, onChange, state } = useField<T, K>(name); - + const help = propsHelp ?? state.help if (state.hidden) { return <div />; } diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx index fb04e3852..a6a02ad43 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx @@ -1,5 +1,6 @@ import { VNode, h } from "preact"; -import { InputLine, UIFormProps } from "./InputLine.js"; +import { InputLine } from "./InputLine.js"; +import { UIFormProps } from "./FormProvider.js"; export function InputInteger<T extends object, K extends keyof T>( props: UIFormProps<T, K>, diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx index f6c709d94..890bb54cb 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx @@ -2,42 +2,7 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { useField } from "./useField.js"; import { useEffect, useState } from "preact/hooks"; - -export interface IconAddon { - type: "icon"; - icon: VNode; -} -interface ButtonAddon { - type: "button"; - onClick: () => void; - children: ComponentChildren; -} -interface TextAddon { - type: "text"; - text: TranslatedString; -} -type Addon = IconAddon | ButtonAddon | TextAddon; - -interface StringConverter<T> { - toStringUI: (v?: T) => string; - fromStringUI: (v?: string) => T; -} - -export interface UIFormProps<T extends object, K extends keyof T> { - name: K; - label: TranslatedString; - placeholder?: TranslatedString; - tooltip?: TranslatedString; - help?: TranslatedString; - before?: Addon; - after?: Addon; - required?: boolean; - converter?: StringConverter<T[K]>; -} - -export type FormErrors<T> = { - [P in keyof T]?: string | FormErrors<T[P]>; -}; +import { UIFormProps } from "./FormProvider.js"; //@ts-ignore const TooltipIcon = ( @@ -201,10 +166,7 @@ export function InputLine<T extends object, K extends keyof T>( useEffect(() => { const newValue = toString(value) if (newValue) { - setText(newValue) - } else { - console.log("invalid") } }, [value]) @@ -257,7 +219,8 @@ export function InputLine<T extends object, K extends keyof T>( return ( <InputWrapper<T, K> {...props} - disabled={state.disabled} + help={props.help ?? state.help} + disabled={state.disabled ?? false} error={showError ? state.error : undefined} > <textarea @@ -279,7 +242,10 @@ export function InputLine<T extends object, K extends keyof T>( } return ( - <InputWrapper<T, K> {...props} disabled={state.disabled} error={showError ? state.error : undefined}> + <InputWrapper<T, K> {...props} + help={props.help ?? state.help} + disabled={state.disabled ?? false} error={showError ? state.error : undefined} + > <input name={String(name)} type={type} diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx index 6e6186a88..06eb91bb3 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx @@ -1,8 +1,9 @@ import { Fragment, VNode, h } from "preact"; import { Choice } from "./InputChoiceStacked.js"; -import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; import { useState } from "preact/hooks"; +import { UIFormProps } from "./FormProvider.js"; export function InputSelectMultiple<T extends object, K extends keyof T>( props: { diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx index b0e2277d3..98430306e 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx @@ -1,8 +1,9 @@ import { Fragment, VNode, h } from "preact"; import { Choice } from "./InputChoiceStacked.js"; -import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; import { useState } from "preact/hooks"; +import { UIFormProps } from "./FormProvider.js"; export function InputSelectOne<T extends object, K extends keyof T>( props: { @@ -22,8 +23,8 @@ export function InputSelectOne<T extends object, K extends keyof T>( filter === undefined ? undefined : choices.filter((v) => { - return regex.test(v.label); - }); + return regex.test(v.label); + }); return ( <div class="sm:col-span-6"> <LabelWithTooltipMaybeRequired @@ -104,7 +105,7 @@ export function InputSelectOne<T extends object, K extends keyof T>( onChange(v.value as T[K]); }} - // tabindex="-1" + // tabindex="-1" > {/* <!-- Selected: "font-semibold" --> */} <span class="block truncate">{v.label}</span> diff --git a/packages/aml-backoffice-ui/src/handlers/InputText.tsx b/packages/aml-backoffice-ui/src/handlers/InputText.tsx index 1b37ee6fb..7ad36b737 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputText.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputText.tsx @@ -1,5 +1,6 @@ import { VNode, h } from "preact"; -import { InputLine, UIFormProps } from "./InputLine.js"; +import { InputLine } from "./InputLine.js"; +import { UIFormProps } from "./FormProvider.js"; export function InputText<T extends object, K extends keyof T>( props: UIFormProps<T, K>, diff --git a/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx b/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx index 45229951e..6b76d8329 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx @@ -1,5 +1,6 @@ import { VNode, h } from "preact"; -import { InputLine, UIFormProps } from "./InputLine.js"; +import { InputLine } from "./InputLine.js"; +import { UIFormProps } from "./FormProvider.js"; export function InputTextArea<T extends object, K extends keyof T>( props: UIFormProps<T, K>, diff --git a/packages/aml-backoffice-ui/src/handlers/useField.ts b/packages/aml-backoffice-ui/src/handlers/useField.ts index 7eec5c5f8..651778628 100644 --- a/packages/aml-backoffice-ui/src/handlers/useField.ts +++ b/packages/aml-backoffice-ui/src/handlers/useField.ts @@ -1,10 +1,10 @@ import { useContext, useState } from "preact/compat"; -import { FormContext, InputFieldState } from "./FormProvider.js"; +import { BehaviorResult, FormContext, InputFieldState } from "./FormProvider.js"; export interface InputFieldHandler<Type> { value: Type; onChange: (s: Type) => void; - state: InputFieldState; + state: BehaviorResult; isDirty: boolean; } @@ -27,7 +27,7 @@ export function useField<T extends object, K extends keyof T>( // console.log("USE FIELD", String(name), formValue.current, fieldValue); const [currentValue, setCurrentValue] = useState<any | undefined>(fieldValue); const fieldState = - readField<Partial<InputFieldState>>(formState, String(name)) ?? {}; + readField<Partial<BehaviorResult>>(formState, String(name)) ?? {}; //compute default state const state = { @@ -35,6 +35,7 @@ export function useField<T extends object, K extends keyof T>( readonly: readOnlyForm ? true : (fieldState.readonly ?? false), hidden: fieldState.hidden ?? false, error: fieldState.error, + help: fieldState.help, elements: "elements" in fieldState ? fieldState.elements ?? [] : [], }; diff --git a/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx b/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx index 214c17648..d53ac27c1 100644 --- a/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx +++ b/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx @@ -82,7 +82,7 @@ export function NewFormEntry({ function SelectForm({ account }: { account: string }) { return ( <div> - <pre>New form for account: {account}</pre> + <pre>New form for account: {account.substring(0, 16)}...</pre> {allForms.map((form, idx) => { return ( <a |