diff options
Diffstat (limited to 'packages/web-util/src/forms')
18 files changed, 212 insertions, 133 deletions
diff --git a/packages/web-util/src/forms/Calendar.tsx b/packages/web-util/src/forms/Calendar.tsx index a0df639f3..b08129f56 100644 --- a/packages/web-util/src/forms/Calendar.tsx +++ b/packages/web-util/src/forms/Calendar.tsx @@ -1,20 +1,40 @@ -import { AbsoluteTime } from "@gnu-taler/taler-util" -import { add as dateAdd, sub as dateSub, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek } from "date-fns" -import { VNode, h } from "preact" -import { useState } from "preact/hooks" -import { useTranslationContext } from "../index.browser.js" +import { AbsoluteTime } from "@gnu-taler/taler-util"; +import { + add as dateAdd, + sub as dateSub, + eachDayOfInterval, + endOfMonth, + endOfWeek, + format, + getMonth, + getYear, + isSameDay, + isSameMonth, + startOfDay, + startOfMonth, + startOfWeek, +} from "date-fns"; +import { VNode, h } from "preact"; +import { useState } from "preact/hooks"; +import { useTranslationContext } from "../index.browser.js"; -export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined, onChange: (v: AbsoluteTime) => void }): VNode { - const today = startOfDay(new Date()) - const selected = !value ? today : new Date(AbsoluteTime.toStampMs(value)) - const [showingDate, setShowingDate] = useState(selected) - const month = getMonth(showingDate) - const year = getYear(showingDate) +export function Calendar({ + value, + onChange, +}: { + value: AbsoluteTime | undefined; + onChange: (v: AbsoluteTime) => void; +}): VNode { + const today = startOfDay(new Date()); + const selected = !value ? today : new Date(AbsoluteTime.toStampMs(value)); + const [showingDate, setShowingDate] = useState(selected); + const month = getMonth(showingDate); + const year = getYear(showingDate); const start = startOfWeek(startOfMonth(showingDate)); const end = endOfWeek(endOfMonth(showingDate)); const daysInMonth = eachDayOfInterval({ start, end }); - const { i18n } = useTranslationContext() + const { i18n } = useTranslationContext(); const monthNames = [ i18n.str`January`, i18n.str`February`, @@ -28,92 +48,139 @@ export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined, i18n.str`October`, i18n.str`November`, i18n.str`December`, - ] - return <div class="text-center p-2"> - <div class="flex items-center text-gray-900"> - <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm" - onClick={() => { - setShowingDate(dateSub(showingDate, { years: 1 })) - }}> - <span class="sr-only"> - {i18n.str`Previous year`} - </span> - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> - </svg> - </button> - <div class="flex-auto text-sm font-semibold">{year}</div> - <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm" - onClick={() => { - setShowingDate(dateAdd(showingDate, { years: 1 })) - }}> - <span class="sr-only"> - {i18n.str`Next year`} - </span> - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> - </svg> - </button> - </div> - <div class="mt-4 flex items-center text-gray-900"> - <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm" - onClick={() => { - setShowingDate(dateSub(showingDate, { months: 1 })) - }}> - <span class="sr-only"> - {i18n.str`Previous month`} - </span> - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> - </svg> - </button> - <div class="flex-auto text-sm font-semibold">{monthNames[month]}</div> - <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 rounded-sm " - onClick={() => { - setShowingDate(dateAdd(showingDate, { months: 1 })) - }}> - <span class="sr-only"> - {i18n.str`Next month`} - </span> - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> - </svg> - </button> - </div> - <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500"> - <div>M</div> - <div>T</div> - <div>W</div> - <div>T</div> - <div>F</div> - <div>S</div> - <div>S</div> - </div> - <div class="isolate mt-2"> - <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"> - {daysInMonth.map(current => ( - <button type="button" - data-month={isSameMonth(current, showingDate)} - data-today={isSameDay(current, today)} - data-selected={isSameDay(current, selected)} - onClick={() => { - onChange(AbsoluteTime.fromStampMs(current.getTime())) - }} - class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 + ]; + return ( + <div class="text-center p-2"> + <div class="flex items-center text-gray-900"> + <button + type="button" + class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm" + onClick={() => { + setShowingDate(dateSub(showingDate, { years: 1 })); + }} + > + <span class="sr-only">{i18n.str`Previous year`}</span> + <svg + class="h-5 w-5" + viewBox="0 0 20 20" + fill="currentColor" + aria-hidden="true" + > + <path + fill-rule="evenodd" + d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" + clip-rule="evenodd" + /> + </svg> + </button> + <div class="flex-auto text-sm font-semibold">{year}</div> + <button + type="button" + class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm" + onClick={() => { + setShowingDate(dateAdd(showingDate, { years: 1 })); + }} + > + <span class="sr-only">{i18n.str`Next year`}</span> + <svg + class="h-5 w-5" + viewBox="0 0 20 20" + fill="currentColor" + aria-hidden="true" + > + <path + fill-rule="evenodd" + d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" + clip-rule="evenodd" + /> + </svg> + </button> + </div> + <div class="mt-4 flex items-center text-gray-900"> + <button + type="button" + class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm" + onClick={() => { + setShowingDate(dateSub(showingDate, { months: 1 })); + }} + > + <span class="sr-only">{i18n.str`Previous month`}</span> + <svg + class="h-5 w-5" + viewBox="0 0 20 20" + fill="currentColor" + aria-hidden="true" + > + <path + fill-rule="evenodd" + d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" + clip-rule="evenodd" + /> + </svg> + </button> + <div class="flex-auto text-sm font-semibold">{monthNames[month]}</div> + <button + type="button" + class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 rounded-sm " + onClick={() => { + setShowingDate(dateAdd(showingDate, { months: 1 })); + }} + > + <span class="sr-only">{i18n.str`Next month`}</span> + <svg + class="h-5 w-5" + viewBox="0 0 20 20" + fill="currentColor" + aria-hidden="true" + > + <path + fill-rule="evenodd" + d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" + clip-rule="evenodd" + /> + </svg> + </button> + </div> + <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500"> + <div>M</div> + <div>T</div> + <div>W</div> + <div>T</div> + <div>F</div> + <div>S</div> + <div>S</div> + </div> + <div class="isolate mt-2"> + <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"> + {daysInMonth.map((current, idx) => ( + <button + type="button" + key={idx} + data-month={isSameMonth(current, showingDate)} + data-today={isSameDay(current, today)} + data-selected={isSameDay(current, selected)} + onClick={() => { + onChange(AbsoluteTime.fromStampMs(current.getTime())); + }} + class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 data-[month=false]:bg-gray-100 data-[month=true]:bg-white data-[today=true]:font-semibold data-[month=true]:text-gray-900 data-[today=true]:bg-red-300 data-[today=true]:hover:bg-red-200 data-[month=true]:hover:bg-gray-200 - data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 "> - <time dateTime={format(current, "yyyy-MM-dd")} - class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full"> - {format(current, "dd")} - </time> - </button> - ))} + data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 " + > + <time + dateTime={format(current, "yyyy-MM-dd")} + class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full" + > + {format(current, "dd")} + </time> + </button> + ))} + </div> + {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined} </div> - {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined} </div> - </div> + ); } diff --git a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx index 6245cf27c..3887efe37 100644 --- a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx +++ b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "absoluteTime", - props: { + properties: { label: "label of the field" as TranslatedString, name: "today", pattern: "dd/MM/yyyy HH:mm" diff --git a/packages/web-util/src/forms/InputAbsoluteTime.tsx b/packages/web-util/src/forms/InputAbsoluteTime.tsx index 772ab1813..f5fd4fc50 100644 --- a/packages/web-util/src/forms/InputAbsoluteTime.tsx +++ b/packages/web-util/src/forms/InputAbsoluteTime.tsx @@ -10,15 +10,15 @@ import { useField } from "./useField.js"; import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; export function InputAbsoluteTime<T extends object, K extends keyof T>( - props: { pattern?: string } & UIFormProps<T, K>, + properties: { pattern?: string } & UIFormProps<T, K>, ): VNode { - const pattern = props.pattern ?? "dd/MM/yyyy"; + const pattern = properties.pattern ?? "dd/MM/yyyy"; const [open, setOpen] = useState(false); //FIXME: remove deprecated - const fieldCtx = useField<T, K>(props.name); + const fieldCtx = useField<T, K>(properties.name); const { value, onChange } = - props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name); + properties.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(properties.name); return ( <Fragment> <InputLine<T, K> @@ -66,7 +66,7 @@ export function InputAbsoluteTime<T extends object, K extends keyof T>( : format(v.t_ms, pattern); }, }} - {...props} + {...properties} /> {open && ( <Dialog onClose={() => setOpen(false)}> diff --git a/packages/web-util/src/forms/InputAmount.stories.tsx b/packages/web-util/src/forms/InputAmount.stories.tsx index c9f12a437..d5073ed86 100644 --- a/packages/web-util/src/forms/InputAmount.stories.tsx +++ b/packages/web-util/src/forms/InputAmount.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "amount", - props: { + properties: { label: "label of the field" as TranslatedString, name: "amount", }, diff --git a/packages/web-util/src/forms/InputArray.stories.tsx b/packages/web-util/src/forms/InputArray.stories.tsx index 8dbd3ff07..eb61b04e3 100644 --- a/packages/web-util/src/forms/InputArray.stories.tsx +++ b/packages/web-util/src/forms/InputArray.stories.tsx @@ -54,18 +54,18 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "array", - props: { + properties: { label: "People" as TranslatedString, name: "comment", fields: [{ type: "text", - props: { + properties: { label: "the name" as TranslatedString, name: "name", } }, { type: "integer", - props: { + properties: { label: "the age" as TranslatedString, name: "age", } diff --git a/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx b/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx index b950d3d02..e1da89353 100644 --- a/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx +++ b/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "choiceHorizontal", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", choices: [{ diff --git a/packages/web-util/src/forms/InputChoiceStacked.stories.tsx b/packages/web-util/src/forms/InputChoiceStacked.stories.tsx index ed5170d17..89f252e96 100644 --- a/packages/web-util/src/forms/InputChoiceStacked.stories.tsx +++ b/packages/web-util/src/forms/InputChoiceStacked.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "choiceStacked", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", choices: [{ diff --git a/packages/web-util/src/forms/InputFile.stories.tsx b/packages/web-util/src/forms/InputFile.stories.tsx index ba06debf9..9d9ad0bd7 100644 --- a/packages/web-util/src/forms/InputFile.stories.tsx +++ b/packages/web-util/src/forms/InputFile.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "file", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", required: true, diff --git a/packages/web-util/src/forms/InputInteger.stories.tsx b/packages/web-util/src/forms/InputInteger.stories.tsx index bd1a467ab..04a6d1049 100644 --- a/packages/web-util/src/forms/InputInteger.stories.tsx +++ b/packages/web-util/src/forms/InputInteger.stories.tsx @@ -43,7 +43,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "integer", - props: { + properties: { label: "label of the field" as TranslatedString, name: "age", tooltip: "just numbers" as TranslatedString, diff --git a/packages/web-util/src/forms/InputLine.stories.tsx b/packages/web-util/src/forms/InputLine.stories.tsx index da41a221e..1c62a6164 100644 --- a/packages/web-util/src/forms/InputLine.stories.tsx +++ b/packages/web-util/src/forms/InputLine.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "text", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", }, diff --git a/packages/web-util/src/forms/InputSelectMultiple.stories.tsx b/packages/web-util/src/forms/InputSelectMultiple.stories.tsx index 6ce5445c0..b1649fecf 100644 --- a/packages/web-util/src/forms/InputSelectMultiple.stories.tsx +++ b/packages/web-util/src/forms/InputSelectMultiple.stories.tsx @@ -50,7 +50,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "selectMultiple", - props: { + properties: { label: "allow diplicates" as TranslatedString, name: "pets", placeholder: "search..." as TranslatedString, @@ -67,7 +67,7 @@ const form: FlexibleForm<TargetObject> = { }, }, { type: "selectMultiple", - props: { + properties: { label: "unique values" as TranslatedString, name: "things", unique: true, diff --git a/packages/web-util/src/forms/InputSelectMultiple.tsx b/packages/web-util/src/forms/InputSelectMultiple.tsx index 972389cb3..12e88fcc1 100644 --- a/packages/web-util/src/forms/InputSelectMultiple.tsx +++ b/packages/web-util/src/forms/InputSelectMultiple.tsx @@ -1,10 +1,10 @@ import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { UIFormProps } from "./FormProvider.js"; +import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; import { ChoiceS } from "./InputChoiceStacked.js"; import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; -import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; export function InputSelectMultiple<T extends object, K extends keyof T>( props: { diff --git a/packages/web-util/src/forms/InputSelectOne.stories.tsx b/packages/web-util/src/forms/InputSelectOne.stories.tsx index 9e9029a77..f87aeda66 100644 --- a/packages/web-util/src/forms/InputSelectOne.stories.tsx +++ b/packages/web-util/src/forms/InputSelectOne.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "selectOne", - props: { + properties: { label: "label of the field" as TranslatedString, name: "things", placeholder: "search..." as TranslatedString, diff --git a/packages/web-util/src/forms/InputText.stories.tsx b/packages/web-util/src/forms/InputText.stories.tsx index 04ab8a1c6..8eced7736 100644 --- a/packages/web-util/src/forms/InputText.stories.tsx +++ b/packages/web-util/src/forms/InputText.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "text", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", }, diff --git a/packages/web-util/src/forms/InputTextArea.stories.tsx b/packages/web-util/src/forms/InputTextArea.stories.tsx index c8c3eb088..6713548a8 100644 --- a/packages/web-util/src/forms/InputTextArea.stories.tsx +++ b/packages/web-util/src/forms/InputTextArea.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "text", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", }, diff --git a/packages/web-util/src/forms/InputToggle.stories.tsx b/packages/web-util/src/forms/InputToggle.stories.tsx index ca6857618..e10098718 100644 --- a/packages/web-util/src/forms/InputToggle.stories.tsx +++ b/packages/web-util/src/forms/InputToggle.stories.tsx @@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = { title: "this is a simple form" as TranslatedString, fields: [{ type: "toggle", - props: { + properties: { label: "label of the field" as TranslatedString, name: "comment", }, diff --git a/packages/web-util/src/forms/InputToggle.tsx b/packages/web-util/src/forms/InputToggle.tsx index c56efec3a..58386045c 100644 --- a/packages/web-util/src/forms/InputToggle.tsx +++ b/packages/web-util/src/forms/InputToggle.tsx @@ -1,8 +1,8 @@ import { VNode, h } from "preact"; import { UIFormProps } from "./FormProvider.js"; +import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; import { useField } from "./useField.js"; -import { noHandlerPropsAndNoContextForField } from "./InputArray.js"; export function InputToggle<T extends object, K extends keyof T>( props: UIFormProps<T, K>, diff --git a/packages/web-util/src/forms/forms.ts b/packages/web-util/src/forms/forms.ts index d2ff9c37e..6bda2f674 100644 --- a/packages/web-util/src/forms/forms.ts +++ b/packages/web-util/src/forms/forms.ts @@ -38,20 +38,32 @@ type FieldType<T extends object = any, K extends keyof T = any> = { * List all the form fields so typescript can type-check the form instance */ export type UIFormField = - | { type: "group"; props: FieldType["group"] } - | { type: "caption"; props: FieldType["caption"] } - | { type: "array"; props: FieldType["array"] } - | { type: "file"; props: FieldType["file"] } - | { type: "amount"; props: FieldType["amount"] } - | { type: "selectOne"; props: FieldType["selectOne"] } - | { type: "selectMultiple"; props: FieldType["selectMultiple"] } - | { type: "text"; props: FieldType["text"] } - | { type: "textArea"; props: FieldType["textArea"] } - | { type: "choiceStacked"; props: FieldType["choiceStacked"] } - | { type: "choiceHorizontal"; props: FieldType["choiceHorizontal"] } - | { type: "integer"; props: FieldType["integer"] } - | { type: "toggle"; props: FieldType["toggle"] } - | { type: "absoluteTime"; props: FieldType["absoluteTime"] }; + | { type: "group"; properties: FieldType["group"] } + | { type: "caption"; properties: FieldType["caption"] } + | { type: "array"; properties: FieldType["array"] } + | { type: "file"; properties: FieldType["file"] } + | { type: "amount"; properties: FieldType["amount"] } + | { type: "selectOne"; properties: FieldType["selectOne"] } + | { + type: "selectMultiple"; + properties: FieldType["selectMultiple"]; + } + | { type: "text"; properties: FieldType["text"] } + | { type: "textArea"; properties: FieldType["textArea"] } + | { + type: "choiceStacked"; + properties: FieldType["choiceStacked"]; + } + | { + type: "choiceHorizontal"; + properties: FieldType["choiceHorizontal"]; + } + | { type: "integer"; properties: FieldType["integer"] } + | { type: "toggle"; properties: FieldType["toggle"] } + | { + type: "absoluteTime"; + properties: FieldType["absoluteTime"]; + }; type FieldComponentFunction<key extends keyof FieldType> = ( props: FieldType[key], @@ -102,7 +114,7 @@ export function RenderAllFieldsByUiConfig({ const Component = UIFormConfiguration[ field.type ] as FieldComponentFunction<any>; - return Component(field.props); + return Component(field.properties); }), ); } @@ -115,8 +127,8 @@ export function RenderAllFieldsByUiConfig({ /** * Helper function that created a typed object. - * - * @returns + * + * @returns */ // export function createNewForm<T extends object>() { // const res: FormSet<T> = { |