diff options
author | Sebastian <sebasjm@gmail.com> | 2023-05-25 18:08:20 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-05-26 09:26:09 -0300 |
commit | 64e3705669e7c12b8013704654f17cf8eaf659d4 (patch) | |
tree | b0572d228b34740f307da4c59e6e5fa0e3e1f808 /packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx | |
parent | dad7d48ed2d7cd6f17466889395b49023e4b5097 (diff) |
cases, account details and new-form screen
Diffstat (limited to 'packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx')
-rw-r--r-- | packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx index 3bce0123f..c37984368 100644 --- a/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx +++ b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx @@ -3,15 +3,15 @@ import { Fragment, VNode, h } from "preact"; import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; import { useField } from "./useField.js"; -export interface Choice { +export interface Choice<V> { label: TranslatedString; description?: TranslatedString; - value: string; + value: V; } export function InputChoiceStacked<T extends object, K extends keyof T>( props: { - choices: Choice[]; + choices: Choice<T[K]>[]; } & UIFormProps<T, K>, ): VNode { const { @@ -41,6 +41,10 @@ export function InputChoiceStacked<T extends object, K extends keyof T>( <fieldset class="mt-2"> <div class="space-y-4"> {choices.map((choice) => { + // const currentValue = !converter + // ? choice.value + // : converter.fromStringUI(choice.value) ?? ""; + let clazz = "border relative block cursor-pointer rounded-lg bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between"; if (choice.value === value) { @@ -49,12 +53,18 @@ export function InputChoiceStacked<T extends object, K extends keyof T>( } else { clazz += " border-gray-300"; } + return ( <label class={clazz}> <input type="radio" name="server-size" - defaultValue={choice.value} + // defaultValue={choice.value} + value={ + (!converter + ? (choice.value as string) + : converter?.toStringUI(choice.value)) ?? "" + } onClick={(e) => { onChange( (value === choice.value |