diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/forms/InputArray.tsx')
| -rw-r--r-- | packages/exchange-backoffice-ui/src/forms/InputArray.tsx | 191 |
1 files changed, 103 insertions, 88 deletions
diff --git a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx index 2447c9989..b2905a2a7 100644 --- a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx +++ b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx @@ -4,6 +4,72 @@ import { FormProvider } from "./FormProvider.js"; import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; import { useField } from "./useField.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; + +function Option({ + label, + disabled, + isFirst, + isLast, + isSelected, + onClick, +}: { + label: TranslatedString; + isFirst?: boolean; + isLast?: boolean; + isSelected?: boolean; + disabled?: boolean; + onClick: () => void; +}): VNode { + let clazz = "relative flex border p-4 focus:outline-none disabled:text-grey"; + if (isFirst) { + clazz += " rounded-tl-md rounded-tr-md "; + } + if (isLast) { + clazz += " rounded-bl-md rounded-br-md "; + } + if (isSelected) { + clazz += " z-10 border-indigo-200 bg-indigo-50 "; + } else { + clazz += " border-gray-200"; + } + if (disabled) { + clazz += + " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200 text-gray"; + } else { + clazz += " cursor-pointer"; + } + return ( + <label class={clazz}> + <input + type="radio" + name="privacy-setting" + checked={isSelected} + disabled={disabled} + onClick={onClick} + class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 focus:ring-indigo-600" + aria-labelledby="privacy-setting-0-label" + aria-describedby="privacy-setting-0-description" + /> + <span class="ml-3 flex flex-col"> + <span + id="privacy-setting-0-label" + disabled + class="block text-sm font-medium" + > + {label} + </span> + {/* <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> */} + {/* <span + id="privacy-setting-0-description" + class="block text-sm" + > + This project would be available to anyone who has the link + </span> */} + </span> + </label> + ); +} export function InputArray( props: { @@ -17,10 +83,7 @@ export function InputArray( const [selectedIndex, setSelected] = useState<number | undefined>(undefined); const selected = selectedIndex === undefined ? undefined : list[selectedIndex]; - const [subForm, updateSubForm] = useState(selected ?? {}); - useEffect(() => { - updateSubForm(selected); - }, [selected]); + return ( <div class="sm:col-span-6"> <LabelWithTooltipMaybeRequired @@ -29,95 +92,47 @@ export function InputArray( tooltip={tooltip} /> - <div class="flex mb-4 items-center pt-3"> - <div class="flex-auto"> - {selectedIndex !== undefined && ( - <button - type="button" - onClick={() => { - setSelected(undefined); - }} - class="block rounded-md bg-white px-3 py-2 text-center text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" - > - Cancel - </button> - )} - </div> - <div class="flex-none"> - {selectedIndex === undefined && ( - <button - type="button" - onClick={() => { - setSelected(list.length); - }} - class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm text-white shadow-sm hover:bg-indigo-500 " - > - Add - </button> - )} - </div> - </div> <div class="-space-y-px rounded-md bg-white "> {list.map((v, idx) => { - const isFirst = idx === 0; - const isLast = idx === list.length - 1; - const isSelected = selectedIndex === idx; - const disabled = selectedIndex !== undefined && !isSelected; - let clazz = - "relative flex border p-4 focus:outline-none disabled:text-grey"; - if (isFirst) { - clazz += " rounded-tl-md rounded-tr-md "; - } - if (isLast) { - clazz += " rounded-bl-md rounded-br-md "; - } - if (isSelected) { - clazz += " z-10 border-indigo-200 bg-indigo-50 "; - } else { - clazz += " border-gray-200"; - } - if (disabled) { - clazz += - " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200 text-gray"; - } else { - clazz += " cursor-pointer"; - } return ( - <label class={clazz}> - <Fragment> - <input - type="radio" - name="privacy-setting" - checked={isSelected} - disabled={disabled} - onClick={() => setSelected(idx)} - class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 focus:ring-indigo-600" - aria-labelledby="privacy-setting-0-label" - aria-describedby="privacy-setting-0-description" - /> - <span class="ml-3 flex flex-col"> - <span - id="privacy-setting-0-label" - disabled - class="block text-sm font-medium" - > - {v[labelField]} - </span> - {/* <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> */} - {/* <span - id="privacy-setting-0-description" - class="block text-sm" - > - This project would be available to anyone who has the link - </span> */} - </span> - </Fragment> - </label> + <Option + label={v[labelField]} + isSelected={selectedIndex === idx} + isLast={idx === list.length - 1} + disabled={selectedIndex !== undefined && selectedIndex !== idx} + isFirst={idx === 0} + onClick={() => { + setSelected(selectedIndex === idx ? undefined : idx); + }} + /> ); })} + <div class="pt-2"> + <Option + label={"Add..." as TranslatedString} + isSelected={selectedIndex === list.length} + isLast + isFirst + disabled={ + selectedIndex !== undefined && selectedIndex !== list.length + } + onClick={() => { + setSelected( + selectedIndex === list.length ? undefined : list.length, + ); + }} + /> + </div> </div> {selectedIndex !== undefined && ( - <FormProvider initialValue={subForm} onUpdate={updateSubForm}> + <FormProvider + initialValue={selected} + onUpdate={(v) => { + const newValue = [...list]; + newValue.splice(selectedIndex, 1, v); + onChange(newValue); + }} + > <div class="px-4 py-6"> <div class="grid grid-cols-1 gap-y-8 "> <RenderAllFieldsByUiConfig fields={fields} /> @@ -143,7 +158,7 @@ export function InputArray( </button> )} </div> - <div class="flex-none"> + {/* <div class="flex-none"> <button type="button" onClick={() => { @@ -156,7 +171,7 @@ export function InputArray( > Confirm </button> - </div> + </div> */} </div> )} </div> |