diff options
Diffstat (limited to 'packages/web-util/src/forms/InputArray.tsx')
-rw-r--r-- | packages/web-util/src/forms/InputArray.tsx | 29 |
1 files changed, 23 insertions, 6 deletions
diff --git a/packages/web-util/src/forms/InputArray.tsx b/packages/web-util/src/forms/InputArray.tsx index 7d9a1b378..ac4617c8c 100644 --- a/packages/web-util/src/forms/InputArray.tsx +++ b/packages/web-util/src/forms/InputArray.tsx @@ -71,6 +71,14 @@ function Option({ ); } +export function noHandlerPropsAndNoContextForField( + field: string | number | symbol, +): never { + throw Error( + `Field ${field.toString()} doesn't have handler and is not in a form provider context.`, + ); +} + export function InputArray<T extends object, K extends keyof T>( props: { fields: UIFormField[]; @@ -78,7 +86,15 @@ export function InputArray<T extends object, K extends keyof T>( } & UIFormProps<T, K>, ): VNode { const { fields, labelField, name, label, required, tooltip } = props; - const { value, onChange, state } = useField<T, K>(name); + // const { value, onChange, state } = useField<T, K>(name); + //FIXME: remove deprecated + const fieldCtx = useField<T, K>(props.name); + if (!props.handler && !fieldCtx) { + throw Error(""); + } + const { value, onChange, state } = + props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name); + const list = (value ?? []) as Array<Record<string, string | undefined>>; const [selectedIndex, setSelected] = useState<number | undefined>(undefined); const selected = @@ -97,6 +113,7 @@ export function InputArray<T extends object, K extends keyof T>( return ( <Option label={v[labelField] as TranslatedString} + key={idx} isSelected={selectedIndex === idx} isLast={idx === list.length - 1} disabled={selectedIndex !== undefined && selectedIndex !== idx} @@ -107,7 +124,7 @@ export function InputArray<T extends object, K extends keyof T>( /> ); })} - {!state.disabled && + {!state.disabled && ( <div class="pt-2"> <Option label={"Add..." as TranslatedString} @@ -124,7 +141,7 @@ export function InputArray<T extends object, K extends keyof T>( }} /> </div> - } + )} </div> {selectedIndex !== undefined && ( /** @@ -145,13 +162,13 @@ export function InputArray<T extends object, K extends keyof T>( onSubmit={(v) => { const newValue = [...list]; newValue.splice(selectedIndex, 1, v); - onChange(newValue as T[K]); + onChange(newValue as any); setSelected(undefined); }} onUpdate={(v) => { const newValue = [...list]; newValue.splice(selectedIndex, 1, v); - onChange(newValue as T[K]); + onChange(newValue as any); }} > <div class="px-4 py-6"> @@ -170,7 +187,7 @@ export function InputArray<T extends object, K extends keyof T>( onClick={() => { const newValue = [...list]; newValue.splice(selectedIndex, 1); - onChange(newValue as T[K]); + onChange(newValue as any); setSelected(undefined); }} class="block rounded-md bg-red-600 px-3 py-2 text-center text-sm text-white shadow-sm hover:bg-red-500 " |