diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/form/useField.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/form/useField.tsx | 65 |
1 files changed, 35 insertions, 30 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/useField.tsx b/packages/merchant-backoffice-ui/src/components/form/useField.tsx index 6b685d722..dffb0cc66 100644 --- a/packages/merchant-backoffice-ui/src/components/form/useField.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/useField.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { ComponentChildren, VNode } from "preact"; import { useFormContext } from "./FormProvider.js"; @@ -29,26 +29,29 @@ interface Use<V> { initial: any; onChange: (v: V) => void; toStr: (f: V | undefined) => string; - fromStr: (v: string) => V + fromStr: (v: string) => V; } export function useField<T>(name: keyof T): Use<T[typeof name]> { - const { errors, object, initialObject, toStr, fromStr, valueHandler } = useFormContext<T>() - type P = typeof name - type V = T[P] + const { errors, object, initialObject, toStr, fromStr, valueHandler } = + useFormContext<T>(); + type P = typeof name; + type V = T[P]; - const updateField = (field: P) => (value: V): void => { - return valueHandler((prev) => { - return setValueDeeper(prev, String(field).split('.'), value) - }) - } + const updateField = + (field: P) => + (value: V): void => { + return valueHandler((prev) => { + return setValueDeeper(prev, String(field).split("."), value); + }); + }; - const defaultToString = ((f?: V): string => String(!f ? '' : f)) - const defaultFromString = ((v: string): V => v as any) - const value = readField(object, String(name)) - const initial = readField(initialObject, String(name)) - const isDirty = value !== initial - const hasError = readField(errors, String(name)) + const defaultToString = (f?: V): string => String(!f ? "" : f); + const defaultFromString = (v: string): V => v as any; + const value = readField(object, String(name)); + const initial = readField(initialObject, String(name)); + const isDirty = value !== initial; + const hasError = readField(errors, String(name)); return { error: isDirty ? hasError : undefined, required: !isDirty && hasError, @@ -57,24 +60,26 @@ export function useField<T>(name: keyof T): Use<T[typeof name]> { onChange: updateField(name) as any, toStr: toStr[name] ? toStr[name]! : defaultToString, fromStr: fromStr[name] ? fromStr[name]! : defaultFromString, - } + }; } /** * read the field of an object an support accessing it using '.' - * - * @param object - * @param name - * @returns + * + * @param object + * @param name + * @returns */ const readField = (object: any, name: string) => { - return name.split('.').reduce((prev, current) => prev && prev[current], object) -} + return name + .split(".") + .reduce((prev, current) => prev && prev[current], object); +}; const setValueDeeper = (object: any, names: string[], value: any): any => { - if (names.length === 0) return value - const [head, ...rest] = names - return { ...object, [head]: setValueDeeper(object[head] || {}, rest, value) } -} + if (names.length === 0) return value; + const [head, ...rest] = names; + return { ...object, [head]: setValueDeeper(object[head] || {}, rest, value) }; +}; export interface InputProps<T> { name: T; @@ -83,4 +88,4 @@ export interface InputProps<T> { tooltip?: ComponentChildren; readonly?: boolean; help?: ComponentChildren; -}
\ No newline at end of file +} |