diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx')
-rw-r--r-- | packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx new file mode 100644 index 000000000..4019fbc89 --- /dev/null +++ b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx @@ -0,0 +1,59 @@ +import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; +import { ComponentChildren, VNode, createContext, h } from "preact"; +import { MutableRef, StateUpdater, useRef } from "preact/hooks"; + +export interface FormType<T> { + value: MutableRef<Partial<T>>; + initialValue?: Partial<T>; + onUpdate?: StateUpdater<T>; + computeFormState?: (v: T) => FormState<T>; +} + +//@ts-ignore +export const FormContext = createContext<FormType<any>>({}); + +export type FormState<T> = { + [field in keyof T]?: T[field] extends AbsoluteTime + ? Partial<InputFieldState> + : T[field] extends Array<infer P> + ? Partial<InputArrayFieldState<P>> + : T[field] extends object + ? FormState<T[field]> + : Partial<InputFieldState>; +}; + +export interface InputFieldState { + /* should show the error */ + error?: TranslatedString; + /* should not allow to edit */ + readonly: boolean; + /* should show as disable */ + disabled: boolean; + /* should not show */ + hidden: boolean; +} + +export interface InputArrayFieldState<T> extends InputFieldState { + elements: FormState<T>[]; +} + +export function FormProvider<T>({ + children, + initialValue, + onUpdate, + computeFormState, +}: { + initialValue?: Partial<T>; + onUpdate?: (v: Partial<T>) => void; + computeFormState?: (v: T) => FormState<T>; + children: ComponentChildren; +}): VNode { + const value = useRef(initialValue ?? {}); + return ( + <FormContext.Provider + value={{ initialValue, value, onUpdate, computeFormState }} + > + <form>{children}</form> + </FormContext.Provider> + ); +} |