diff options
author | Sebastian <sebasjm@gmail.com> | 2024-05-03 08:43:53 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-05-03 08:44:07 -0300 |
commit | 20353eda268efa962959bead466b59823bfb9b29 (patch) | |
tree | 868d016693f09b40e2c55893d3aed72eca505ecb /packages/web-util/src/forms/Group.tsx | |
parent | fa4c7039f4ebeb6ad3cf19237ad7b138519ac142 (diff) | |
download | wallet-core-20353eda268efa962959bead466b59823bfb9b29.tar.xz |
form hook now takes the shape of the form (do not rely on initial value)
Diffstat (limited to 'packages/web-util/src/forms/Group.tsx')
-rw-r--r-- | packages/web-util/src/forms/Group.tsx | 38 |
1 files changed, 18 insertions, 20 deletions
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 ( <div class="sm:col-span-6 p-4 rounded-lg border-r-2 border-2 bg-gray-50"> - <div class="pb-4"> - {before && ( - <LabelWithTooltipMaybeRequired - label={before} - tooltip={tooltipBefore} - /> - )} - </div> + {before !== undefined && <RenderAddon addon={before} />} + <LabelWithTooltipMaybeRequired label={label} tooltip={tooltip} /> + {after !== undefined && <RenderAddon addon={after} />} + {help && ( + <p class="mt-2 text-sm text-gray-500" id="email-description"> + {help} + </p> + )} <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-6"> <RenderAllFieldsByUiConfig fields={fields} /> </div> - <div class="pt-4"> - {after && ( - <LabelWithTooltipMaybeRequired label={after} tooltip={tooltipAfter} /> - )} - </div> </div> ); } |