sync field ui

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,
   };
 }