aboutsummaryrefslogtreecommitdiff
path: root/packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2023-05-16 01:23:44 -0300
committerSebastian <sebasjm@gmail.com>2023-05-16 01:23:44 -0300
commit245ab840baf1926ef2c03a8965fce85012887d92 (patch)
tree1acec43e991100292f82db241eec70d073b6365b /packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx
parent02fb71c0ff69d293911f4b0945ab964a87402d0c (diff)
one form left
Diffstat (limited to 'packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx')
-rw-r--r--packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx93
1 files changed, 0 insertions, 93 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx b/packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx
deleted file mode 100644
index b19a0d82e..000000000
--- a/packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { TranslatedString } from "@gnu-taler/taler-util";
-import { Fragment, VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
-import { useField } from "./useField.js";
-
-export interface Choice {
- label: TranslatedString;
- description?: TranslatedString;
- value: string;
-}
-
-export function InputChoiceStacked(
- props: {
- choices: Choice[];
- } & UIFormProps<string>,
-): VNode {
- const {
- choices,
- name,
- label,
- tooltip,
- placeholder,
- required,
- before,
- after,
- converter,
- } = props;
- const { value, onChange, state, isDirty } = useField<{
- [s: string]: undefined | string;
- }>(name);
- if (state.hidden) {
- return <Fragment />;
- }
-
- return (
- <div class="sm:col-span-6">
- <LabelWithTooltipMaybeRequired
- label={label}
- required={required}
- tooltip={tooltip}
- />
- <fieldset class="mt-2">
- <div class="space-y-4">
- {choices.map((choice) => {
- 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) {
- clazz +=
- " border-transparent border-indigo-600 ring-2 ring-indigo-600";
- } else {
- clazz += " border-gray-300";
- }
- return (
- <label class={clazz}>
- <input
- type="radio"
- name="server-size"
- defaultValue={choice.value}
- onClick={(e) => {
- onChange(value === choice.value ? undefined : choice.value);
- }}
- class="sr-only"
- aria-labelledby="server-size-0-label"
- aria-describedby="server-size-0-description-0 server-size-0-description-1"
- />
- <span class="flex items-center">
- <span class="flex flex-col text-sm">
- <span
- id="server-size-0-label"
- class="font-medium text-gray-900"
- >
- {choice.label}
- </span>
- {choice.description !== undefined && (
- <span
- id="server-size-0-description-0"
- class="text-gray-500"
- >
- <span class="block sm:inline">
- {choice.description}
- </span>
- </span>
- )}
- </span>
- </span>
- </label>
- );
- })}
- </div>
- </fieldset>
- </div>
- );
-}