diff options
Diffstat (limited to 'packages/web-util/src/forms')
-rw-r--r-- | packages/web-util/src/forms/FormProvider.tsx | 3 | ||||
-rw-r--r-- | packages/web-util/src/forms/InputLine.tsx | 31 | ||||
-rw-r--r-- | packages/web-util/src/forms/useField.ts | 10 |
3 files changed, 20 insertions, 24 deletions
diff --git a/packages/web-util/src/forms/FormProvider.tsx b/packages/web-util/src/forms/FormProvider.tsx index de19a6315..f4cdf8a68 100644 --- a/packages/web-util/src/forms/FormProvider.tsx +++ b/packages/web-util/src/forms/FormProvider.tsx @@ -43,8 +43,6 @@ export type FormState<T extends object | undefined> = { * Properties that can be defined by design or by computing state */ export type FieldUIOptions = { - /* text to be shown next to the field */ - error?: TranslatedString; /* instruction to be shown in the field */ placeholder?: TranslatedString; /* long text help to be shown on demand */ @@ -84,6 +82,7 @@ export type UIField = { value: string | undefined; onChange: (s: string) => void; state: FieldUIOptions; + error?: TranslatedString; }; export interface IconAddon { diff --git a/packages/web-util/src/forms/InputLine.tsx b/packages/web-util/src/forms/InputLine.tsx index c7f69dd8a..ee9150492 100644 --- a/packages/web-util/src/forms/InputLine.tsx +++ b/packages/web-util/src/forms/InputLine.tsx @@ -1,9 +1,8 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { ComponentChildren, Fragment, VNode, h } from "preact"; -import { useEffect, useState } from "preact/hooks"; import { UIFormProps } from "./FormProvider.js"; -import { useField } from "./useField.js"; import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; +import { useField } from "./useField.js"; //@ts-ignore const TooltipIcon = ( @@ -163,20 +162,20 @@ export function InputLine<T extends object, K extends keyof T>( const { name, placeholder, before, after, converter, type } = props; //FIXME: remove deprecated const fieldCtx = useField<T, K>(props.name); - const { value, onChange, state } = + const { value, onChange, state, error } = props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name); - const [text, setText] = useState(""); + // const [text, setText] = useState(""); const fromString: (s: string) => any = converter?.fromStringUI ?? defaultFromString; const toString: (s: any) => string = converter?.toStringUI ?? defaultToString; - useEffect(() => { - const newValue = toString(value); - if (newValue) { - setText(newValue); - } - }, [value]); + // useEffect(() => { + // const newValue = toString(value); + // if (newValue) { + // setText(newValue); + // } + // }, [value]); if (state.hidden) return <div />; @@ -214,7 +213,7 @@ export function InputLine<T extends object, K extends keyof T>( } } } - const showError = value !== undefined && state.error; + const showError = value !== undefined && error; if (showError) { clazz += " text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500"; @@ -229,7 +228,7 @@ export function InputLine<T extends object, K extends keyof T>( {...props} help={props.help ?? state.help} disabled={state.disabled ?? false} - error={showError ? state.error : undefined} + error={showError ? error : undefined} > <textarea rows={4} @@ -254,18 +253,18 @@ export function InputLine<T extends object, K extends keyof T>( {...props} help={props.help ?? state.help} disabled={state.disabled ?? false} - error={showError ? state.error : undefined} + error={showError ? error : undefined} > <input name={String(name)} type={type} onChange={(e) => { - setText(e.currentTarget.value); + onChange(e.currentTarget.value as any); }} placeholder={placeholder ? placeholder : undefined} - value={text} + value={value as string} onBlur={() => { - onChange(fromString(text)); + onChange(fromString(value as any)); }} // defaultValue={toString(value)} disabled={state.disabled} diff --git a/packages/web-util/src/forms/useField.ts b/packages/web-util/src/forms/useField.ts index fad53ebac..d30962c6f 100644 --- a/packages/web-util/src/forms/useField.ts +++ b/packages/web-util/src/forms/useField.ts @@ -1,11 +1,12 @@ -import { useContext, useState } from "preact/compat"; +import { useContext } from "preact/compat"; import { FieldUIOptions, FormContext } from "./FormProvider.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; export interface InputFieldHandler<Type> { value: Type; onChange: (s: Type) => void; state: FieldUIOptions; - isDirty: boolean; + error?: TranslatedString | undefined; } /** @@ -33,8 +34,7 @@ export function useField<T extends object, K extends keyof T>( 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<FieldUIOptions>>(formState, String(name)) ?? {}; @@ -42,7 +42,6 @@ export function useField<T extends object, K extends keyof T>( const state = { disabled: readOnlyForm ? true : (fieldState.disabled ?? false), hidden: fieldState.hidden ?? false, - error: fieldState.error, help: fieldState.help, elements: "elements" in fieldState ? fieldState.elements ?? [] : [], }; @@ -62,7 +61,6 @@ export function useField<T extends object, K extends keyof T>( return { value: fieldValue, onChange, - isDirty: fieldValue !== undefined, state, }; } |