From 20353eda268efa962959bead466b59823bfb9b29 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 3 May 2024 08:43:53 -0300 Subject: form hook now takes the shape of the form (do not rely on initial value) --- packages/web-util/src/forms/Caption.tsx | 17 ++--- packages/web-util/src/forms/Group.tsx | 38 +++++----- packages/web-util/src/forms/InputAmount.tsx | 6 +- .../web-util/src/forms/InputChoiceHorizontal.tsx | 8 +-- packages/web-util/src/forms/InputLine.tsx | 83 ++++++++++------------ 5 files changed, 70 insertions(+), 82 deletions(-) (limited to 'packages/web-util/src') diff --git a/packages/web-util/src/forms/Caption.tsx b/packages/web-util/src/forms/Caption.tsx index 8facddec3..be4725ffa 100644 --- a/packages/web-util/src/forms/Caption.tsx +++ b/packages/web-util/src/forms/Caption.tsx @@ -1,27 +1,22 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { VNode, h } from "preact"; -import { - LabelWithTooltipMaybeRequired -} from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired, RenderAddon } from "./InputLine.js"; +import { Addon } from "./FormProvider.js"; interface Props { label: TranslatedString; tooltip?: TranslatedString; help?: TranslatedString; - before?: VNode; - after?: VNode; + before?: Addon; + after?: Addon; } export function Caption({ before, after, label, tooltip, help }: Props): VNode { return (
- {before !== undefined && ( - {before} - )} + {before !== undefined && } - {after !== undefined && ( - {after} - )} + {after !== undefined && } {help && (

{help} diff --git a/packages/web-util/src/forms/Group.tsx b/packages/web-util/src/forms/Group.tsx index 0645f6d97..d5626be1d 100644 --- a/packages/web-util/src/forms/Group.tsx +++ b/packages/web-util/src/forms/Group.tsx @@ -1,41 +1,39 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; +import { LabelWithTooltipMaybeRequired, RenderAddon } from "./InputLine.js"; import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; +import { Addon } from "./FormProvider.js"; interface Props { - before?: TranslatedString; - after?: TranslatedString; - tooltipBefore?: TranslatedString; - tooltipAfter?: TranslatedString; + label: TranslatedString; + tooltip?: TranslatedString; + help?: TranslatedString; + before?: Addon; + after?: Addon; fields: UIFormField[]; } export function Group({ before, after, - tooltipAfter, - tooltipBefore, + label, + tooltip, + help, fields, }: Props): VNode { return (

-
- {before && ( - - )} -
+ {before !== undefined && } + + {after !== undefined && } + {help && ( +

+ {help} +

+ )}
-
- {after && ( - - )} -
); } diff --git a/packages/web-util/src/forms/InputAmount.tsx b/packages/web-util/src/forms/InputAmount.tsx index 31e83350e..e8683468e 100644 --- a/packages/web-util/src/forms/InputAmount.tsx +++ b/packages/web-util/src/forms/InputAmount.tsx @@ -23,15 +23,15 @@ export function InputAmount( type: "text", text: currency as TranslatedString, }} - converter={{ - //@ts-ignore + //@ts-ignore + converter={ props.converter ?? { + fromStringUI: (v): AmountJson => { return ( Amounts.parse(`${currency}:${v}`) ?? Amounts.zeroOfCurrency(currency) ); }, - //@ts-ignore toStringUI: (v: AmountJson) => { return v === undefined ? "" : Amounts.stringifyValue(v); }, diff --git a/packages/web-util/src/forms/InputChoiceHorizontal.tsx b/packages/web-util/src/forms/InputChoiceHorizontal.tsx index 82a7c3115..d8361718d 100644 --- a/packages/web-util/src/forms/InputChoiceHorizontal.tsx +++ b/packages/web-util/src/forms/InputChoiceHorizontal.tsx @@ -12,10 +12,10 @@ export interface ChoiceH { export function InputChoiceHorizontal( props: { - choices: ChoiceH[]; + choices: ChoiceH[]; } & UIFormProps, ): VNode { - const { choices, label, tooltip, help, required } = props; + const { choices, label, tooltip, help, required, converter } = props; //FIXME: remove deprecated const fieldCtx = useField(props.name); const { value, onChange, state } = @@ -38,7 +38,7 @@ export function InputChoiceHorizontal( const isLast = idx === choices.length - 1; let clazz = "relative inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-10"; - if (choice.value === value) { + if (converter?.fromStringUI(choice.value as any) === value) { clazz += " text-white bg-indigo-600 hover:bg-indigo-500 ring-2 ring-indigo-600 hover:ring-indigo-500"; } else { @@ -61,7 +61,7 @@ export function InputChoiceHorizontal( class={clazz} onClick={(e) => { onChange( - (value === choice.value ? undefined : choice.value) as any, + (value === choice.value ? undefined : converter?.fromStringUI(choice.value as any)) as any, ); }} > diff --git a/packages/web-util/src/forms/InputLine.tsx b/packages/web-util/src/forms/InputLine.tsx index ee9150492..eb3238ef9 100644 --- a/packages/web-util/src/forms/InputLine.tsx +++ b/packages/web-util/src/forms/InputLine.tsx @@ -1,6 +1,6 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { ComponentChildren, Fragment, VNode, h } from "preact"; -import { UIFormProps } from "./FormProvider.js"; +import { Addon, UIFormProps } from "./FormProvider.js"; import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; import { useField } from "./useField.js"; @@ -68,6 +68,37 @@ export function LabelWithTooltipMaybeRequired({ return WithTooltip; } +export function RenderAddon({ disabled, addon }: { disabled?: boolean, addon: Addon }): VNode { + switch (addon.type) { + case "text": { + return ( + + {addon.text} + + ); + } + case "icon": { + return ( +
+ {addon.icon} +
+ ); + } + case "button": { + return ( + + ); + } + } +} + function InputWrapper({ children, label, @@ -91,47 +122,11 @@ function InputWrapper({ tooltip={tooltip} />
- {before && - (before.type === "text" ? ( - - {before.text} - - ) : before.type === "icon" ? ( -
- {before.icon} -
- ) : before.type === "button" ? ( - - ) : undefined)} + {before && } {children} - {after && - (after.type === "text" ? ( - - {after.text} - - ) : after.type === "icon" ? ( -
- {after.icon} -
- ) : after.type === "button" ? ( - - ) : undefined)} + {after && }
{error && (

@@ -259,13 +254,13 @@ export function InputLine( name={String(name)} type={type} onChange={(e) => { - onChange(e.currentTarget.value as any); + onChange(fromString(e.currentTarget.value)); }} placeholder={placeholder ? placeholder : undefined} - value={value as string} - onBlur={() => { - onChange(fromString(value as any)); - }} + value={toString(value) ?? ""} + // onBlur={() => { + // onChange(fromString(value as any)); + // }} // defaultValue={toString(value)} disabled={state.disabled} aria-invalid={showError} -- cgit v1.2.3