diff options
author | Sebastian <sebasjm@gmail.com> | 2023-09-20 15:16:28 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-09-25 14:50:39 -0300 |
commit | fdbe623e1060efc4b074d213a96e8f5a2ab7498b (patch) | |
tree | 6bbe00f6f36f1910ea99180a6e0d5c53aeb9f34f /packages/web-util/src/forms/useField.ts | |
parent | a5406c5a5dc437e036168eb068db11d88e05bb0f (diff) | |
download | wallet-core-fdbe623e1060efc4b074d213a96e8f5a2ab7498b.tar.xz |
more ui stuff, moved forms to util
Diffstat (limited to 'packages/web-util/src/forms/useField.ts')
-rw-r--r-- | packages/web-util/src/forms/useField.ts | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/packages/web-util/src/forms/useField.ts b/packages/web-util/src/forms/useField.ts new file mode 100644 index 000000000..bf94d2f5d --- /dev/null +++ b/packages/web-util/src/forms/useField.ts @@ -0,0 +1,93 @@ +import { useContext, useState } from "preact/compat"; +import { FormContext, InputFieldState } from "./FormProvider.js"; + +export interface InputFieldHandler<Type> { + value: Type; + onChange: (s: Type) => void; + state: InputFieldState; + isDirty: boolean; +} + +export function useField<T extends object, K extends keyof T>( + name: K, +): InputFieldHandler<T[K]> { + const { + initialValue, + value: formValue, + computeFormState, + onUpdate: notifyUpdate, + } = useContext(FormContext); + + type P = typeof name; + type V = T[P]; + const formState = computeFormState ? computeFormState(formValue.current) : {}; + + const fieldValue = readField(formValue.current, String(name)) as V; + // console.log("USE FIELD", String(name), formValue.current, fieldValue); + const [currentValue, setCurrentValue] = useState<any | undefined>(fieldValue); + const fieldState = + readField<Partial<InputFieldState>>(formState, String(name)) ?? {}; + + //compute default state + const state = { + disabled: fieldState.disabled ?? false, + readonly: fieldState.readonly ?? false, + hidden: fieldState.hidden ?? false, + error: fieldState.error, + elements: "elements" in fieldState ? fieldState.elements ?? [] : [], + }; + + function onChange(value: V): void { + setCurrentValue(value); + formValue.current = setValueDeeper( + formValue.current, + String(name).split("."), + value, + ); + if (notifyUpdate) { + notifyUpdate(formValue.current); + } + } + + return { + value: fieldValue, + onChange, + isDirty: currentValue !== undefined, + state, + }; +} + +/** + * read the field of an object an support accessing it using '.' + * + * @param object + * @param name + * @returns + */ +function readField<T>( + object: any, + name: string, + debug?: boolean, +): T | undefined { + return name.split(".").reduce((prev, current) => { + if (debug) { + console.log( + "READ", + name, + prev, + current, + prev ? prev[current] : undefined, + ); + } + return prev ? prev[current] : undefined; + }, object); +} + +function setValueDeeper(object: any, names: string[], value: any): any { + if (names.length === 0) return value; + const [head, ...rest] = names; + if (object === undefined) { + return { [head]: setValueDeeper({}, rest, value) }; + } + return { ...object, [head]: setValueDeeper(object[head] ?? {}, rest, value) }; +} |