diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx')
-rw-r--r-- | packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx | 43 |
1 files changed, 32 insertions, 11 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx index 87c4c43fb..4ac90ad57 100644 --- a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx +++ b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx @@ -1,6 +1,16 @@ -import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; +import { + AbsoluteTime, + AmountJson, + TranslatedString, +} from "@gnu-taler/taler-util"; import { ComponentChildren, VNode, createContext, h } from "preact"; -import { MutableRef, StateUpdater, useEffect, useRef } from "preact/hooks"; +import { + MutableRef, + StateUpdater, + useEffect, + useRef, + useState, +} from "preact/hooks"; export interface FormType<T> { value: MutableRef<Partial<T>>; @@ -15,6 +25,8 @@ export const FormContext = createContext<FormType<any>>({}); export type FormState<T> = { [field in keyof T]?: T[field] extends AbsoluteTime ? Partial<InputFieldState> + : T[field] extends AmountJson + ? Partial<InputFieldState> : T[field] extends Array<infer P> ? Partial<InputArrayFieldState<P>> : T[field] extends object @@ -40,22 +52,31 @@ export interface InputArrayFieldState<T> extends InputFieldState { export function FormProvider<T>({ children, initialValue, - onUpdate, + onUpdate: notify, onSubmit, computeFormState, }: { initialValue?: Partial<T>; onUpdate?: (v: Partial<T>) => void; - onSubmit: (v: T) => void; + onSubmit?: (v: T) => void; computeFormState?: (v: T) => FormState<T>; children: ComponentChildren; }): VNode { - const value = useRef(initialValue ?? {}); - useEffect(() => { - return function onUnload() { - value.current = initialValue ?? {}; - }; - }); + // 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); + }; return ( <FormContext.Provider value={{ initialValue, value, onUpdate, computeFormState }} @@ -64,7 +85,7 @@ export function FormProvider<T>({ onSubmit={(e) => { e.preventDefault(); //@ts-ignore - onSubmit(value.current); + if (onSubmit) onSubmit(value.current); }} > {children} |