@digigov/form 2.0.0-555d1027 → 2.0.0-599965f0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Field/FieldBaseContainer/index.js +36 -34
- package/Field/FieldBaseContainer.d.ts +1 -1
- package/Field/FieldBaseContainer.js.map +2 -2
- package/FieldArray/FormDialog/index.js +1 -3
- package/FieldArray/FormDialog.d.ts +1 -2
- package/FieldArray/FormDialog.js.map +2 -2
- package/FieldArray/index.js +20 -1
- package/FieldArray/index.js.map +2 -2
- package/cjs/Field/FieldBaseContainer/index.js +36 -34
- package/cjs/Field/FieldBaseContainer.js.map +2 -2
- package/cjs/FieldArray/FormDialog/index.js +1 -3
- package/cjs/FieldArray/FormDialog.js.map +2 -2
- package/cjs/FieldArray/index.js +19 -0
- package/cjs/FieldArray/index.js.map +2 -2
- package/cjs/validators/utils/date/index.js +6 -1
- package/cjs/validators/utils/date.js.map +2 -2
- package/cjs/validators/utils/datetime/index.js +6 -1
- package/cjs/validators/utils/datetime.js.map +2 -2
- package/index.js +1 -1
- package/package.json +4 -4
- package/src/Field/FieldBaseContainer.tsx +67 -58
- package/src/FieldArray/FormDialog.tsx +1 -4
- package/src/FieldArray/index.tsx +28 -1
- package/src/FormBuilder/scenarios.test.tsx +759 -1
- package/src/validators/utils/date.ts +6 -1
- package/src/validators/utils/datetime.ts +6 -1
- package/validators/utils/date/index.js +6 -1
- package/validators/utils/date.js.map +2 -2
- package/validators/utils/datetime/index.js +6 -1
- package/validators/utils/datetime.js.map +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/FieldArray/FormDialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { LegacyRef, useEffect, useRef, useState } from 'react';\nimport {\n ErrorOption,\n useFieldArray,\n UseFieldArrayMove,\n UseFormReturn,\n useWatch,\n} from 'react-hook-form';\nimport { FieldProps } from '@digigov/form/Field/types';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { Fieldset } from '@digigov/form/Fieldset';\nimport {\n Modal,\n ModalAction,\n ModalContent,\n ModalHeading,\n useModal,\n} from '@digigov/ui/app/Modal';\nimport {\n Table,\n TableBody,\n TableContainer,\n TableDataCell,\n TableHead,\n TableHeadCell,\n TableRow,\n} from '@digigov/ui/content';\nimport { Button } from '@digigov/ui/form/Button';\nimport { StackProps, Grid, Stack } from '@digigov/ui/layouts';\nimport Heading from '@digigov/ui/typography/Heading';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface FormDialogProps extends FieldProps {\n control: UseFormReturn['control'];\n trigger: UseFormReturn['trigger'];\n register: UseFormReturn['register'];\n clearErrors: UseFormReturn['clearErrors'];\n formState: UseFormReturn['formState'];\n error?: ErrorOption;\n getValues: UseFormReturn['getValues'];\n setValue: UseFormReturn['setValue'];\n reset: UseFormReturn['reset'];\n resetField?: UseFormReturn['resetField'];\n sortable: boolean;\n Field: React.FC<FieldProps>;\n}\n\nexport interface DialogProps {\n name: string;\n heading: string;\n actions: React.ReactNode;\n children: React.ReactNode;\n registerModal: (any) => {};\n}\n\nexport const FormDialog: React.FC<FormDialogProps> = React.forwardRef(\n function FormDialog(\n {\n name,\n trigger,\n register,\n control,\n formState,\n error,\n getValues,\n Field,\n reset,\n sortable,\n ...customField\n },\n ref\n ) {\n const [isAppending, setIsAppending] = useState(false);\n const [currentIndex, setCurrentIndex] = useState(0);\n const { fields, append, remove, update, move } = useFieldArray({\n control,\n name,\n });\n const { open, close, registerModal } = useModal();\n const currentLength = fields.length > 0 ? fields.length - 1 : fields.length;\n const currentName = isAppending\n ? `${name}.${currentLength}`\n : `${name}.${currentIndex}`;\n useEffect(() => {\n if (isAppending) {\n setCurrentIndex(currentLength);\n open(`modal-${name}`);\n }\n }, [isAppending]);\n\n const valuesRef = useRef(null);\n if (!error) {\n const values = getValues(currentName);\n if (typeof values === 'object') {\n valuesRef.current = { ...values };\n } else {\n valuesRef.current = values;\n }\n }\n const values = getValues(name);\n const ofField = {\n ...customField.extra?.of,\n name: currentName,\n };\n const defaultValue = getValues(currentName) || ofField.defaultValue;\n const noValuesCommitted =\n fields.length === 0 || (fields.length === 1 && isAppending);\n const titleNumber = customField.extra?.label.object.titleNumbering\n ? `${currentLength + 1}`\n : '';\n return (\n <>\n {noValuesCommitted && (\n <Hint {...customField.extra?.label.object?.nothing_added_props}>\n {customField.extra?.label.object?.nothing_added}\n </Hint>\n )}\n <ArrayItemModal\n title={\n customField.extra?.label.object.title &&\n `${customField.extra?.label.object.title} ${titleNumber}`\n }\n hint={customField.label?.secondary}\n name={name}\n defaultValue={defaultValue}\n currentName={currentName}\n editOrAppend={async () => {\n const hasNoErrors = await trigger(\n ofField.type === 'object'\n ? ofField.extra.fields.map(({ key }) => `${currentName}.${key}`)\n : currentName\n );\n if (!hasNoErrors) {\n update(currentIndex, valuesRef.current);\n }\n if (hasNoErrors) {\n const newValues = getValues(currentName);\n if (isAppending) {\n setIsAppending(false);\n }\n if (newValues === '') {\n remove(currentIndex);\n } else {\n update(currentIndex, newValues);\n }\n close();\n }\n }}\n cancel={() => {\n if (isAppending) {\n setIsAppending(false);\n remove(currentIndex);\n close();\n return;\n }\n update(currentIndex, valuesRef.current);\n reset(undefined, {\n keepTouched: true,\n keepDefaultValues: true,\n keepIsValid: true,\n keepIsSubmitted: true,\n keepValues: true,\n });\n close();\n }}\n type={isAppending ? 'append' : 'edit'}\n appendLabel={customField.extra?.label.object.append.label}\n appendProps={customField.extra?.label.object.append.props}\n editLabel={customField.extra?.label.object.edit.label}\n editProps={customField.extra?.label.object.edit.props}\n cancelLabel={customField.extra?.label.object.cancel.label}\n cancelProps={customField.extra?.label.object.cancel.props}\n control={control}\n {...registerModal(`modal-${name}`)}\n >\n <Fieldset>\n {ofField?.type === 'object' ? (\n <FieldObject\n defaultValue={defaultValue || undefined}\n error={error && error[currentIndex]}\n formState={formState}\n register={register}\n control={control}\n {...ofField}\n key={currentName}\n Field={Field}\n />\n ) : (\n <Field\n name={currentName}\n {...ofField}\n error={error && error[currentIndex]}\n key={currentName}\n />\n )}\n </Fieldset>\n </ArrayItemModal>\n {!noValuesCommitted && (\n <TableContainer {...customField.extra?.tableContainer}>\n <Table\n ref={ref as LegacyRef<HTMLTableElement>}\n verticalAlign={customField.extra?.verticalAlign}\n >\n {!customField.extra?.noHeader &&\n !noValuesCommitted &&\n ofField?.extra &&\n values?.length > 0 && (\n <ArrayItemHeader\n labels={\n ofField.type === 'object'\n ? ofField.extra.fields.map(({ label }) => label.primary)\n : [ofField.label.primary]\n }\n disabled={customField?.editable === false}\n />\n )}\n <TableBody>\n {!noValuesCommitted &&\n values?.map?.((field, index) => {\n return (\n <ArrayItemDisplay\n key={index}\n name={`${name}.${index}`}\n register={register}\n index={index}\n isFirst={index === 0}\n isLast={index === values.length - 1}\n data={field}\n edit={() => {\n setCurrentIndex(index);\n open(`modal-${name}`);\n }}\n stackProps={customField?.extra?.stackProps}\n wordBreak={customField?.extra?.wordBreak}\n valueDisplay={customField?.extra?.valueDisplay}\n remove={() => {\n remove(index);\n }}\n border={customField.extra?.border}\n move={move}\n sortable={sortable}\n disabledEdit={\n sortable ? true : (customField.extra?.noEdit ?? false)\n }\n disabledDelete={customField.extra?.noDelete ?? false}\n disabled={customField?.editable === false}\n />\n );\n })}\n </TableBody>\n </Table>\n </TableContainer>\n )}\n {customField.extra?.editVariant !== 'display' && (\n <div\n className={\n customField.extra?.label.object?.addButtonVariant === 'link'\n ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400'\n : ''\n }\n >\n <Button\n type=\"button\"\n name={`${name}-add-object`}\n color=\"secondary\"\n variant={customField.extra?.label.object?.addButtonVariant}\n onClick={(ev) => {\n ev.preventDefault();\n if (customField?.extra?.of?.type === 'object') {\n append({});\n } else {\n append('');\n }\n setCurrentIndex(currentLength + 1);\n setIsAppending(true);\n }}\n disabled={\n customField?.editable === false ||\n customField.extra?.editVariant === 'noinput' ||\n fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)\n }\n >\n {customField.extra?.label.object?.add}\n </Button>\n </div>\n )}\n </>\n );\n }\n);\n\nexport const ArrayItemModal = React.forwardRef(function ArrayItemModal(\n {\n type,\n currentName,\n title,\n hint,\n defaultValue,\n editOrAppend,\n cancel,\n control,\n addTitle,\n editLabel,\n editProps,\n appendLabel,\n appendProps,\n cancelLabel,\n cancelProps,\n children,\n ...props\n }: {\n type: 'append' | 'edit';\n name: string;\n title?: string;\n hint?: string;\n editOrAppend: () => void;\n cancel: () => void;\n addTitle?: string;\n editLabel?: string;\n editProps?: any;\n appendLabel?: string;\n appendProps?: any;\n cancelLabel?: string;\n cancelProps?: any;\n children: React.ReactNode;\n [key: string]: any;\n },\n ref\n) {\n const value = useWatch({\n control,\n name: currentName,\n defaultValue: defaultValue,\n });\n const disabled = value === undefined || value === null || value === '';\n return (\n <Modal\n {...props}\n ref={ref as LegacyRef<HTMLDivElement>}\n aria-labelledby=\"modal-label\"\n >\n <ModalHeading id=\"modal-label\">\n {title\n ? title\n : type === 'edit'\n ? '\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1'\n : addTitle || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n </ModalHeading>\n <ModalContent>\n {hint && <Hint>{hint}</Hint>}\n {children}\n </ModalContent>\n <ModalAction>\n {type === 'edit' ? (\n <Button\n color=\"secondary\"\n {...editProps}\n type=\"button\"\n onClick={(e) => {\n e.preventDefault();\n editOrAppend();\n }}\n disabled={disabled}\n >\n {editLabel || '\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7'}\n </Button>\n ) : (\n <Button\n color=\"primary\"\n {...appendProps}\n type=\"button\"\n onClick={(e) => {\n e.preventDefault();\n editOrAppend();\n }}\n disabled={disabled}\n >\n {appendLabel || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n </Button>\n )}\n <Button\n variant=\"link\"\n type=\"button\"\n {...cancelProps}\n onClick={(e) => {\n e.preventDefault();\n cancel();\n }}\n >\n {cancelLabel || '\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7'}\n </Button>\n </ModalAction>\n </Modal>\n );\n});\n\nexport const ArrayItemHeader = ({ labels, disabled }) => {\n return (\n <TableHead>\n <TableRow>\n {labels.map((label, index) => {\n return <TableHeadCell key={index}>{label}</TableHeadCell>;\n })}\n {!disabled && <TableHeadCell>\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2</TableHeadCell>}\n </TableRow>\n </TableHead>\n );\n};\n\nexport const ArrayItemDisplay = ({\n name,\n data,\n register,\n edit,\n remove,\n disabledEdit,\n disabledDelete,\n disabled,\n sortable,\n index,\n isFirst,\n isLast,\n move,\n valueDisplay,\n border = true,\n wordBreak = 'break-all',\n stackProps = {\n spacing: 4,\n alignItems: 'flex-end',\n justifyContent: 'flex-end',\n direction: 'column',\n },\n}: {\n data: any;\n name: string;\n edit: (name: string) => void;\n remove: (name: string) => void;\n register: (name: string) => void;\n disabledEdit?: boolean;\n disabledDelete?: boolean;\n disabled?: boolean;\n sortable: boolean;\n index: number;\n isFirst: boolean;\n isLast: boolean;\n move: UseFieldArrayMove;\n valueDisplay?: (value) => React.ReactNode;\n border: boolean;\n wordBreak?: 'break-all' | 'none';\n stackProps?: StackProps;\n}) => {\n if (data === undefined || data === null) {\n return null;\n }\n if (\n Object.keys(data).length === 0 ||\n (Object.keys(data).length === 1 && data.id)\n ) {\n return null;\n }\n delete data.id;\n const values: (string | Record<string, any>)[] =\n typeof data === 'string' ? [data] : Object.values(data || {});\n const borderVariant = border === false || sortable ? 'none' : 'border';\n return (\n <>\n <TableRow {...(register(name) as any)}>\n {values?.map?.((value, valueIndex) => {\n return (\n <TableDataCell\n key={valueIndex}\n variant={borderVariant}\n wordBreak={wordBreak}\n pb={sortable ? 0 : undefined}\n pt={sortable ? 4 : undefined}\n >\n {sortable && valueIndex === 0 && (\n <Heading size=\"sm\" className=\"mb-2\">\n \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE #{index + 1}\n </Heading>\n )}\n {(value as Record<string, any>)?.name ||\n (Array.isArray(value)\n ? value.join('\\n')\n : valueDisplay\n ? valueDisplay(value)\n : value) ||\n ''}\n </TableDataCell>\n );\n })}\n {disabled === true ||\n (disabledEdit === true && disabledDelete === true) ? null : (\n <TableDataCell variant={borderVariant}>\n <Stack {...stackProps}>\n {disabledEdit !== true && (\n <Button\n variant=\"link\"\n type=\"button\"\n onClick={() => {\n edit(name);\n }}\n >\n \u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1\n </Button>\n )}\n {disabledDelete !== true && (\n <Button\n variant=\"link\"\n type=\"button\"\n onClick={() => remove(name)}\n >\n \u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE\n </Button>\n )}\n </Stack>\n </TableDataCell>\n )}\n </TableRow>\n {sortable && (\n <TableRow>\n <TableDataCell\n variant={isLast ? 'none' : 'border'}\n colSpan={\n disabled === true ||\n (disabledEdit === true && disabledDelete === true)\n ? values.length\n : values.length + 1\n }\n >\n {sortable && !disabled && !(isFirst && isLast) && (\n <Grid xs={12} mt={2}>\n \u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7{' '}\n {!isFirst && (\n <>\n \u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1{' '}\n <Button\n type=\"button\"\n variant=\"link\"\n onClick={() => move(index, index - 1)}\n >\n \u03C0\u03AC\u03BD\u03C9\n </Button>\n </>\n )}\n {!isFirst && !isLast && ' \u03AE '}\n {!isLast && (\n <>\n \u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1{' '}\n <Button\n type=\"button\"\n variant=\"link\"\n onClick={() => move(index, index + 1)}\n >\n \u03BA\u03AC\u03C4\u03C9\n </Button>\n </>\n )}\n </Grid>\n )}\n </TableDataCell>\n </TableRow>\n )}\n </>\n );\n};\n\nexport default FormDialog;\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { LegacyRef, useEffect, useRef, useState } from 'react';\nimport {\n ErrorOption,\n useFieldArray,\n UseFieldArrayMove,\n UseFormReturn,\n useWatch,\n} from 'react-hook-form';\nimport { FieldProps } from '@digigov/form/Field/types';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { Fieldset } from '@digigov/form/Fieldset';\nimport {\n Modal,\n ModalAction,\n ModalContent,\n ModalHeading,\n useModal,\n} from '@digigov/ui/app/Modal';\nimport {\n Table,\n TableBody,\n TableContainer,\n TableDataCell,\n TableHead,\n TableHeadCell,\n TableRow,\n} from '@digigov/ui/content';\nimport { Button } from '@digigov/ui/form/Button';\nimport { StackProps, Grid, Stack } from '@digigov/ui/layouts';\nimport Heading from '@digigov/ui/typography/Heading';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface FormDialogProps extends FieldProps {\n control: UseFormReturn['control'];\n trigger: UseFormReturn['trigger'];\n register: UseFormReturn['register'];\n clearErrors: UseFormReturn['clearErrors'];\n formState: UseFormReturn['formState'];\n error?: ErrorOption;\n getValues: UseFormReturn['getValues'];\n setValue: UseFormReturn['setValue'];\n reset: UseFormReturn['reset'];\n resetField?: UseFormReturn['resetField'];\n sortable: boolean;\n Field: React.FC<FieldProps>;\n}\n\nexport interface DialogProps {\n name: string;\n heading: string;\n actions: React.ReactNode;\n children: React.ReactNode;\n registerModal: (any) => {};\n}\n\nexport const FormDialog: React.FC<FormDialogProps> = React.forwardRef(\n function FormDialog(\n {\n name,\n trigger,\n register,\n control,\n formState,\n error,\n getValues,\n Field,\n reset,\n sortable,\n ...customField\n },\n ref\n ) {\n const [isAppending, setIsAppending] = useState(false);\n const [currentIndex, setCurrentIndex] = useState(0);\n const { fields, append, remove, update, move } = useFieldArray({\n control,\n name,\n });\n const { open, close, registerModal } = useModal();\n const currentLength = fields.length > 0 ? fields.length - 1 : fields.length;\n const currentName = isAppending\n ? `${name}.${currentLength}`\n : `${name}.${currentIndex}`;\n useEffect(() => {\n if (isAppending) {\n setCurrentIndex(currentLength);\n open(`modal-${name}`);\n }\n }, [isAppending]);\n\n const valuesRef = useRef(null);\n if (!error) {\n const values = getValues(currentName);\n if (typeof values === 'object') {\n valuesRef.current = { ...values };\n } else {\n valuesRef.current = values;\n }\n }\n const values = getValues(name);\n const ofField = {\n ...customField.extra?.of,\n name: currentName,\n };\n const defaultValue = getValues(currentName) || ofField.defaultValue;\n const noValuesCommitted =\n fields.length === 0 || (fields.length === 1 && isAppending);\n const titleNumber = customField.extra?.label.object.titleNumbering\n ? `${currentLength + 1}`\n : '';\n return (\n <>\n {noValuesCommitted && (\n <Hint {...customField.extra?.label.object?.nothing_added_props}>\n {customField.extra?.label.object?.nothing_added}\n </Hint>\n )}\n <ArrayItemModal\n title={\n customField.extra?.label.object.title &&\n `${customField.extra?.label.object.title} ${titleNumber}`\n }\n hint={customField.label?.secondary}\n name={name}\n defaultValue={defaultValue}\n currentName={currentName}\n editOrAppend={async () => {\n const hasNoErrors = await trigger(\n ofField.type === 'object'\n ? ofField.extra.fields.map(({ key }) => `${currentName}.${key}`)\n : currentName\n );\n if (!hasNoErrors) {\n update(currentIndex, valuesRef.current);\n }\n if (hasNoErrors) {\n const newValues = getValues(currentName);\n if (isAppending) {\n setIsAppending(false);\n }\n if (newValues === '') {\n remove(currentIndex);\n } else {\n update(currentIndex, newValues);\n }\n close();\n }\n }}\n cancel={() => {\n if (isAppending) {\n setIsAppending(false);\n remove(currentIndex);\n close();\n return;\n }\n update(currentIndex, valuesRef.current);\n reset(undefined, {\n keepTouched: true,\n keepDefaultValues: true,\n keepIsValid: true,\n keepIsSubmitted: true,\n keepValues: true,\n });\n close();\n }}\n type={isAppending ? 'append' : 'edit'}\n appendLabel={customField.extra?.label.object.append.label}\n appendProps={customField.extra?.label.object.append.props}\n editLabel={customField.extra?.label.object.edit.label}\n editProps={customField.extra?.label.object.edit.props}\n cancelLabel={customField.extra?.label.object.cancel.label}\n cancelProps={customField.extra?.label.object.cancel.props}\n control={control}\n {...registerModal(`modal-${name}`)}\n >\n <Fieldset>\n {ofField?.type === 'object' ? (\n <FieldObject\n defaultValue={defaultValue || undefined}\n error={error && error[currentIndex]}\n formState={formState}\n register={register}\n control={control}\n {...ofField}\n key={currentName}\n Field={Field}\n />\n ) : (\n <Field\n name={currentName}\n {...ofField}\n error={error && error[currentIndex]}\n key={currentName}\n />\n )}\n </Fieldset>\n </ArrayItemModal>\n {!noValuesCommitted && (\n <TableContainer {...customField.extra?.tableContainer}>\n <Table\n ref={ref as LegacyRef<HTMLTableElement>}\n verticalAlign={customField.extra?.verticalAlign}\n >\n {!customField.extra?.noHeader &&\n !noValuesCommitted &&\n ofField?.extra &&\n values?.length > 0 && (\n <ArrayItemHeader\n labels={\n ofField.type === 'object'\n ? ofField.extra.fields.map(({ label }) => label.primary)\n : [ofField.label.primary]\n }\n disabled={customField?.editable === false}\n />\n )}\n <TableBody>\n {!noValuesCommitted &&\n values?.map?.((field, index) => {\n return (\n <ArrayItemDisplay\n key={index}\n name={`${name}.${index}`}\n index={index}\n isFirst={index === 0}\n isLast={index === values.length - 1}\n data={field}\n edit={() => {\n setCurrentIndex(index);\n open(`modal-${name}`);\n }}\n stackProps={customField?.extra?.stackProps}\n wordBreak={customField?.extra?.wordBreak}\n valueDisplay={customField?.extra?.valueDisplay}\n remove={() => {\n remove(index);\n }}\n border={customField.extra?.border}\n move={move}\n sortable={sortable}\n disabledEdit={\n sortable ? true : (customField.extra?.noEdit ?? false)\n }\n disabledDelete={customField.extra?.noDelete ?? false}\n disabled={customField?.editable === false}\n />\n );\n })}\n </TableBody>\n </Table>\n </TableContainer>\n )}\n {customField.extra?.editVariant !== 'display' && (\n <div\n className={\n customField.extra?.label.object?.addButtonVariant === 'link'\n ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400'\n : ''\n }\n >\n <Button\n type=\"button\"\n name={`${name}-add-object`}\n color=\"secondary\"\n variant={customField.extra?.label.object?.addButtonVariant}\n onClick={(ev) => {\n ev.preventDefault();\n if (customField?.extra?.of?.type === 'object') {\n append({});\n } else {\n append('');\n }\n setCurrentIndex(currentLength + 1);\n setIsAppending(true);\n }}\n disabled={\n customField?.editable === false ||\n customField.extra?.editVariant === 'noinput' ||\n fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)\n }\n >\n {customField.extra?.label.object?.add}\n </Button>\n </div>\n )}\n </>\n );\n }\n);\n\nexport const ArrayItemModal = React.forwardRef(function ArrayItemModal(\n {\n type,\n currentName,\n title,\n hint,\n defaultValue,\n editOrAppend,\n cancel,\n control,\n addTitle,\n editLabel,\n editProps,\n appendLabel,\n appendProps,\n cancelLabel,\n cancelProps,\n children,\n ...props\n }: {\n type: 'append' | 'edit';\n name: string;\n title?: string;\n hint?: string;\n editOrAppend: () => void;\n cancel: () => void;\n addTitle?: string;\n editLabel?: string;\n editProps?: any;\n appendLabel?: string;\n appendProps?: any;\n cancelLabel?: string;\n cancelProps?: any;\n children: React.ReactNode;\n [key: string]: any;\n },\n ref\n) {\n const value = useWatch({\n control,\n name: currentName,\n defaultValue: defaultValue,\n });\n const disabled = value === undefined || value === null || value === '';\n return (\n <Modal\n {...props}\n ref={ref as LegacyRef<HTMLDivElement>}\n aria-labelledby=\"modal-label\"\n >\n <ModalHeading id=\"modal-label\">\n {title\n ? title\n : type === 'edit'\n ? '\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1'\n : addTitle || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n </ModalHeading>\n <ModalContent>\n {hint && <Hint>{hint}</Hint>}\n {children}\n </ModalContent>\n <ModalAction>\n {type === 'edit' ? (\n <Button\n color=\"secondary\"\n {...editProps}\n type=\"button\"\n onClick={(e) => {\n e.preventDefault();\n editOrAppend();\n }}\n disabled={disabled}\n >\n {editLabel || '\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7'}\n </Button>\n ) : (\n <Button\n color=\"primary\"\n {...appendProps}\n type=\"button\"\n onClick={(e) => {\n e.preventDefault();\n editOrAppend();\n }}\n disabled={disabled}\n >\n {appendLabel || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n </Button>\n )}\n <Button\n variant=\"link\"\n type=\"button\"\n {...cancelProps}\n onClick={(e) => {\n e.preventDefault();\n cancel();\n }}\n >\n {cancelLabel || '\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7'}\n </Button>\n </ModalAction>\n </Modal>\n );\n});\n\nexport const ArrayItemHeader = ({ labels, disabled }) => {\n return (\n <TableHead>\n <TableRow>\n {labels.map((label, index) => {\n return <TableHeadCell key={index}>{label}</TableHeadCell>;\n })}\n {!disabled && <TableHeadCell>\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2</TableHeadCell>}\n </TableRow>\n </TableHead>\n );\n};\n\nexport const ArrayItemDisplay = ({\n name,\n data,\n edit,\n remove,\n disabledEdit,\n disabledDelete,\n disabled,\n sortable,\n index,\n isFirst,\n isLast,\n move,\n valueDisplay,\n border = true,\n wordBreak = 'break-all',\n stackProps = {\n spacing: 4,\n alignItems: 'flex-end',\n justifyContent: 'flex-end',\n direction: 'column',\n },\n}: {\n data: any;\n name: string;\n edit: (name: string) => void;\n remove: (name: string) => void;\n disabledEdit?: boolean;\n disabledDelete?: boolean;\n disabled?: boolean;\n sortable: boolean;\n index: number;\n isFirst: boolean;\n isLast: boolean;\n move: UseFieldArrayMove;\n valueDisplay?: (value) => React.ReactNode;\n border: boolean;\n wordBreak?: 'break-all' | 'none';\n stackProps?: StackProps;\n}) => {\n if (data === undefined || data === null) {\n return null;\n }\n if (\n Object.keys(data).length === 0 ||\n (Object.keys(data).length === 1 && data.id)\n ) {\n return null;\n }\n delete data.id;\n const values: (string | Record<string, any>)[] =\n typeof data === 'string' ? [data] : Object.values(data || {});\n const borderVariant = border === false || sortable ? 'none' : 'border';\n return (\n <>\n <TableRow>\n {values?.map?.((value, valueIndex) => {\n return (\n <TableDataCell\n key={valueIndex}\n variant={borderVariant}\n wordBreak={wordBreak}\n pb={sortable ? 0 : undefined}\n pt={sortable ? 4 : undefined}\n >\n {sortable && valueIndex === 0 && (\n <Heading size=\"sm\" className=\"mb-2\">\n \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE #{index + 1}\n </Heading>\n )}\n {(value as Record<string, any>)?.name ||\n (Array.isArray(value)\n ? value.join('\\n')\n : valueDisplay\n ? valueDisplay(value)\n : value) ||\n ''}\n </TableDataCell>\n );\n })}\n {disabled === true ||\n (disabledEdit === true && disabledDelete === true) ? null : (\n <TableDataCell variant={borderVariant}>\n <Stack {...stackProps}>\n {disabledEdit !== true && (\n <Button\n variant=\"link\"\n type=\"button\"\n onClick={() => {\n edit(name);\n }}\n >\n \u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1\n </Button>\n )}\n {disabledDelete !== true && (\n <Button\n variant=\"link\"\n type=\"button\"\n onClick={() => remove(name)}\n >\n \u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE\n </Button>\n )}\n </Stack>\n </TableDataCell>\n )}\n </TableRow>\n {sortable && (\n <TableRow>\n <TableDataCell\n variant={isLast ? 'none' : 'border'}\n colSpan={\n disabled === true ||\n (disabledEdit === true && disabledDelete === true)\n ? values.length\n : values.length + 1\n }\n >\n {sortable && !disabled && !(isFirst && isLast) && (\n <Grid xs={12} mt={2}>\n \u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7{' '}\n {!isFirst && (\n <>\n \u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1{' '}\n <Button\n type=\"button\"\n variant=\"link\"\n onClick={() => move(index, index - 1)}\n >\n \u03C0\u03AC\u03BD\u03C9\n </Button>\n </>\n )}\n {!isFirst && !isLast && ' \u03AE '}\n {!isLast && (\n <>\n \u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1{' '}\n <Button\n type=\"button\"\n variant=\"link\"\n onClick={() => move(index, index + 1)}\n >\n \u03BA\u03AC\u03C4\u03C9\n </Button>\n </>\n )}\n </Grid>\n )}\n </TableDataCell>\n </TableRow>\n )}\n </>\n );\n};\n\nexport default FormDialog;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "FormDialog", "values", "ArrayItemModal", "Heading"]
|
|
7
7
|
}
|
package/cjs/FieldArray/index.js
CHANGED
|
@@ -61,12 +61,31 @@ const FieldArray = ({
|
|
|
61
61
|
name
|
|
62
62
|
});
|
|
63
63
|
const fields = getValues(name) || [];
|
|
64
|
+
const containerRef = (0, import_react.useRef)(null);
|
|
65
|
+
const { errors } = formState;
|
|
66
|
+
(0, import_react.useEffect)(() => {
|
|
67
|
+
if (!containerRef.current) return;
|
|
68
|
+
const fieldErrors = Object.keys(errors);
|
|
69
|
+
if (!fieldErrors.length) return;
|
|
70
|
+
if (
|
|
71
|
+
// Check if there are errors related to the current field array
|
|
72
|
+
fieldErrors.some((key) => {
|
|
73
|
+
const fieldArrayName = key.split(".")[0];
|
|
74
|
+
return fieldArrayName === name;
|
|
75
|
+
})
|
|
76
|
+
) {
|
|
77
|
+
if (containerRef.current && errors[name]) {
|
|
78
|
+
containerRef.current.focus();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, [errors, name]);
|
|
64
82
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
65
83
|
import_FieldBaseContainer.FieldBaseContainer,
|
|
66
84
|
{
|
|
67
85
|
label,
|
|
68
86
|
layout,
|
|
69
87
|
register,
|
|
88
|
+
ref: containerRef,
|
|
70
89
|
error: error?.message && error ? error : void 0,
|
|
71
90
|
hasError: formState.isSubmitted && !formState.isSubmitting && !!error,
|
|
72
91
|
wrapper: "fieldset",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/FieldArray/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';\nimport { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';\nimport { FieldProps } from '@digigov/form/Field/types';\nimport { FormDialog } from '@digigov/form/FieldArray/FormDialog';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';\nimport { Card } from '@digigov/ui/content/Card';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport interface FieldArrayProps extends FieldProps {\n control: UseFormReturn['control'];\n trigger: UseFormReturn['trigger'];\n register: UseFormReturn['register'];\n clearErrors: UseFormReturn['clearErrors'];\n formState: UseFormReturn['formState'];\n error?: ErrorOption;\n getValues: UseFormReturn['getValues'];\n setValue: UseFormReturn['setValue'];\n reset: UseFormReturn['reset'];\n resetField?: UseFormReturn['resetField'];\n Field: React.FC<FieldProps>;\n}\nexport const FieldArray: React.FC<FieldArrayProps> = ({\n name,\n trigger,\n register,\n clearErrors,\n control,\n formState,\n error,\n getValues,\n setValue,\n layout,\n reset,\n resetField,\n label,\n Field,\n ...customField\n}) => {\n const { append, remove } = useFieldArray({\n control,\n name,\n });\n const fields = getValues(name) || [];\n return (\n <FieldBaseContainer\n label={label}\n layout={layout}\n register={register}\n error={error?.message && error ? error : undefined}\n hasError={formState.isSubmitted && !formState.isSubmitting && !!error}\n wrapper=\"fieldset\"\n name={name}\n labelSize={customField.extra?.labelSize}\n controlled={true}\n >\n {customField.extra?.variant === 'dialog' ? (\n <FormDialog\n name={name}\n trigger={trigger}\n register={register}\n clearErrors={clearErrors}\n control={control}\n formState={formState}\n error={error}\n getValues={getValues}\n setValue={setValue}\n layout={layout}\n label={label}\n Field={Field}\n reset={reset}\n resetField={resetField}\n sortable={customField.extra.sortable}\n {...customField}\n />\n ) : (\n <>\n {fields.map((field, index) => (\n <Card\n variant={customField.extra?.border ? 'border' : 'divider'}\n key={field.id || index}\n >\n <Fieldset>\n <FieldsetLabel>\n {customField.extra?.label.object.title}{' '}\n {!customField.extra?.noIndex && index + 1}\n </FieldsetLabel>\n <FieldObject\n name={`${name}.${index}`}\n error={Array.isArray(error) && error[index]}\n formState={formState}\n register={register}\n control={control}\n {...customField.extra?.of}\n Field={Field}\n />\n <Button\n name={`${name}-object-remove`}\n variant={customField.extra?.label.object?.deleteButtonVariant}\n type=\"button\"\n color=\"warning\"\n onClick={() => remove(index)}\n disabled={!customField?.editable}\n >\n {customField.extra?.label.object?.delete}\n </Button>\n </Fieldset>\n </Card>\n ))}\n {customField.editable && (\n <Button\n type=\"button\"\n name={`${name}-add-object`}\n color=\"secondary\"\n variant={customField.extra?.label.object?.addButtonVariant}\n onClick={(ev) => {\n ev.preventDefault();\n append({});\n }}\n disabled={!customField?.editable}\n >\n {customField.extra?.label.object?.add}\n </Button>\n )}\n </>\n )}\n </FieldBaseContainer>\n );\n};\n\nexport default FieldArray;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';\nimport { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';\nimport { FieldProps } from '@digigov/form/Field/types';\nimport { FormDialog } from '@digigov/form/FieldArray/FormDialog';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';\nimport { Card } from '@digigov/ui/content/Card';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport interface FieldArrayProps extends FieldProps {\n control: UseFormReturn['control'];\n trigger: UseFormReturn['trigger'];\n register: UseFormReturn['register'];\n clearErrors: UseFormReturn['clearErrors'];\n formState: UseFormReturn['formState'];\n error?: ErrorOption;\n getValues: UseFormReturn['getValues'];\n setValue: UseFormReturn['setValue'];\n reset: UseFormReturn['reset'];\n resetField?: UseFormReturn['resetField'];\n Field: React.FC<FieldProps>;\n}\nexport const FieldArray: React.FC<FieldArrayProps> = ({\n name,\n trigger,\n register,\n clearErrors,\n control,\n formState,\n error,\n getValues,\n setValue,\n layout,\n reset,\n resetField,\n label,\n Field,\n ...customField\n}) => {\n const { append, remove } = useFieldArray({\n control,\n name,\n });\n const fields = getValues(name) || [];\n\n /** The ref of the FieldBaseContainer. */\n const containerRef = useRef<HTMLFieldSetElement | null>(null);\n\n const { errors } = formState;\n\n // Focus the fieldset when there are errors related to this field array\n useEffect(() => {\n if (!containerRef.current) return;\n const fieldErrors = Object.keys(errors);\n // no errors\n if (!fieldErrors.length) return;\n\n if (\n // Check if there are errors related to the current field array\n fieldErrors.some((key) => {\n const fieldArrayName = key.split('.')[0];\n return fieldArrayName === name;\n })\n ) {\n if (containerRef.current && errors[name]) {\n containerRef.current.focus();\n }\n }\n }, [errors, name]);\n\n return (\n <FieldBaseContainer\n label={label}\n layout={layout}\n register={register}\n ref={containerRef}\n error={error?.message && error ? error : undefined}\n hasError={formState.isSubmitted && !formState.isSubmitting && !!error}\n wrapper=\"fieldset\"\n name={name}\n labelSize={customField.extra?.labelSize}\n controlled={true}\n >\n {customField.extra?.variant === 'dialog' ? (\n <FormDialog\n name={name}\n trigger={trigger}\n register={register}\n clearErrors={clearErrors}\n control={control}\n formState={formState}\n error={error}\n getValues={getValues}\n setValue={setValue}\n layout={layout}\n label={label}\n Field={Field}\n reset={reset}\n resetField={resetField}\n sortable={customField.extra.sortable}\n {...customField}\n />\n ) : (\n <>\n {fields.map((field, index) => (\n <Card\n variant={customField.extra?.border ? 'border' : 'divider'}\n key={field.id || index}\n >\n <Fieldset>\n <FieldsetLabel>\n {customField.extra?.label.object.title}{' '}\n {!customField.extra?.noIndex && index + 1}\n </FieldsetLabel>\n <FieldObject\n name={`${name}.${index}`}\n error={Array.isArray(error) && error[index]}\n formState={formState}\n register={register}\n control={control}\n {...customField.extra?.of}\n Field={Field}\n />\n <Button\n name={`${name}-object-remove`}\n variant={customField.extra?.label.object?.deleteButtonVariant}\n type=\"button\"\n color=\"warning\"\n onClick={() => remove(index)}\n disabled={!customField?.editable}\n >\n {customField.extra?.label.object?.delete}\n </Button>\n </Fieldset>\n </Card>\n ))}\n {customField.editable && (\n <Button\n type=\"button\"\n name={`${name}-add-object`}\n color=\"secondary\"\n variant={customField.extra?.label.object?.addButtonVariant}\n onClick={(ev) => {\n ev.preventDefault();\n append({});\n }}\n disabled={!customField?.editable}\n >\n {customField.extra?.label.object?.add}\n </Button>\n )}\n </>\n )}\n </FieldBaseContainer>\n );\n};\n\nexport default FieldArray;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -37,6 +37,7 @@ var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat")
|
|
|
37
37
|
import_dayjs.default.extend(import_customParseFormat.default);
|
|
38
38
|
const VALID_DATE_FORMATS = ["DD/MM/YYYY"];
|
|
39
39
|
const DATE_CACHE = {};
|
|
40
|
+
const onlyNumbersRegex = /^\d+$/;
|
|
40
41
|
const getDate = (v) => {
|
|
41
42
|
return DATE_CACHE[v] ? DATE_CACHE[v] : (0, import_dayjs.default)(v, VALID_DATE_FORMATS, true);
|
|
42
43
|
};
|
|
@@ -66,7 +67,11 @@ const checkPartialDate = (value) => {
|
|
|
66
67
|
if (day && month) {
|
|
67
68
|
const dayNum = parseInt(day);
|
|
68
69
|
const monthNum = parseInt(month);
|
|
69
|
-
const
|
|
70
|
+
const validYear = onlyNumbersRegex.test(year) ? year : void 0;
|
|
71
|
+
if (!validYear || year.length < 4) {
|
|
72
|
+
return "form.error.date.invalid";
|
|
73
|
+
}
|
|
74
|
+
const yearNum = parseInt(validYear);
|
|
70
75
|
const maxDay = getDaysInMonth(monthNum, yearNum);
|
|
71
76
|
if (dayNum < 1 || dayNum > maxDay) {
|
|
72
77
|
return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/validators/utils/date.ts"],
|
|
4
|
-
"sourcesContent": ["import dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { FieldSpec } from '@digigov/form/types';\nimport { ValidatorSchema } from '@digigov/form/validators/types';\n\ndayjs.extend(customParseFormat);\n\nconst VALID_DATE_FORMATS = ['DD/MM/YYYY'];\nconst DATE_CACHE = {};\n\nconst getDate = (v: string) => {\n return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);\n};\n\nconst getDaysInMonth = (month: number, year: number): number => {\n return dayjs(`${year}-${month}-01`).daysInMonth(); // e.g. 29 for Feb 2024\n};\n\n// Function to check partial date completion\nconst checkPartialDate = (value: string) => {\n const [day, month, year] = value.split('/');\n if (day && !month && !year) {\n return 'form.error.date.invalid_month_year';\n }\n if (!day && month && !year) {\n return 'form.error.date.invalid_day_year';\n }\n if (!day && !month && year) {\n return 'form.error.date.invalid_day_month';\n }\n if (day && month && !year) {\n return 'form.error.date.invalid_year';\n }\n if (day && !month && year) {\n return 'form.error.date.invalid_month';\n }\n if (!day && month && year) {\n return 'form.error.date.invalid_day';\n }\n if (day && month) {\n const dayNum = parseInt(day);\n const monthNum = parseInt(month);\n const yearNum = parseInt(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA8B;AAI9B,aAAAA,QAAM,OAAO,yBAAAC,OAAiB;AAE9B,MAAM,qBAAqB,CAAC,YAAY;AACxC,MAAM,aAAa,CAAC;
|
|
4
|
+
"sourcesContent": ["import dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { FieldSpec } from '@digigov/form/types';\nimport { ValidatorSchema } from '@digigov/form/validators/types';\n\ndayjs.extend(customParseFormat);\n\nconst VALID_DATE_FORMATS = ['DD/MM/YYYY'];\nconst DATE_CACHE = {};\nconst onlyNumbersRegex = /^\\d+$/;\n\nconst getDate = (v: string) => {\n return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);\n};\n\nconst getDaysInMonth = (month: number, year: number): number => {\n return dayjs(`${year}-${month}-01`).daysInMonth(); // e.g. 29 for Feb 2024\n};\n\n// Function to check partial date completion\nconst checkPartialDate = (value: string) => {\n const [day, month, year] = value.split('/');\n if (day && !month && !year) {\n return 'form.error.date.invalid_month_year';\n }\n if (!day && month && !year) {\n return 'form.error.date.invalid_day_year';\n }\n if (!day && !month && year) {\n return 'form.error.date.invalid_day_month';\n }\n if (day && month && !year) {\n return 'form.error.date.invalid_year';\n }\n if (day && !month && year) {\n return 'form.error.date.invalid_month';\n }\n if (!day && month && year) {\n return 'form.error.date.invalid_day';\n }\n if (day && month) {\n const dayNum = parseInt(day);\n const monthNum = parseInt(month);\n const validYear = onlyNumbersRegex.test(year) ? year : undefined;\n if (!validYear || year.length < 4) {\n return 'form.error.date.invalid';\n }\n const yearNum = parseInt(validYear);\n const maxDay = getDaysInMonth(monthNum, yearNum);\n if (dayNum < 1 || dayNum > maxDay) {\n return {\n key: 'form.error.date.invalid_day_range',\n context: {\n maxDay: maxDay,\n },\n };\n }\n if (monthNum < 1 || monthNum > 12) {\n return 'form.error.datetime.invalid_month_range';\n }\n }\n return 'form.error.date.invalid';\n};\n\nexport const LATER_THAN_VALIDATOR = (field: FieldSpec): ValidatorSchema => {\n let minDate;\n const params = field.extra || {};\n if (params.min === 'now') {\n const today = new Date();\n minDate = new Date(today);\n } else {\n minDate = getDate(params.min).toDate();\n }\n const minPreviousDate = new Date(minDate);\n minPreviousDate.setDate(minDate.getDate() - 1);\n return {\n name: 'later-than',\n message: {\n key: 'form.error.date.later_than',\n context: {\n minDate: minPreviousDate.toLocaleDateString(),\n },\n },\n test: function (value: string) {\n if (!value) return true;\n const date = getDate(value);\n const isValid = +date.toDate() > +minDate;\n return isValid;\n },\n };\n};\n\nexport const EARLIER_THAN_VALIDATOR = (field: FieldSpec): ValidatorSchema => {\n let maxDate;\n const params = field.extra || {};\n if (params.max === 'now') {\n const today = new Date();\n maxDate = new Date(today);\n } else {\n maxDate = getDate(params.max).toDate();\n }\n const maxNextDate = new Date(maxDate);\n maxNextDate.setDate(maxDate.getDate() + 1);\n return {\n name: 'earlier-than',\n message: {\n key: 'form.error.date.earlier_than',\n context: {\n maxDate: maxNextDate.toLocaleDateString(),\n },\n },\n test: function (value: string) {\n if (!value) return true;\n const date = getDate(value);\n const isValid = +date.toDate() < +maxDate;\n return isValid;\n },\n };\n};\n\nexport const DATE_VALIDATOR = {\n name: 'date-validator',\n message: (v): string | object => {\n return checkPartialDate(v.value);\n },\n test: function (value: string) {\n if (!value) return true;\n const date = getDate(value);\n return date.isValid();\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["dayjs", "customParseFormat"]
|
|
7
7
|
}
|
|
@@ -37,6 +37,7 @@ var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat")
|
|
|
37
37
|
import_dayjs.default.extend(import_customParseFormat.default);
|
|
38
38
|
const VALID_DATETIME_FORMATS = ["DD/MM/YYYY HH:mm"];
|
|
39
39
|
const DATETIME_CACHE = {};
|
|
40
|
+
const onlyNumbersRegex = /^\d+$/;
|
|
40
41
|
const getDateTime = (v) => {
|
|
41
42
|
return DATETIME_CACHE[v] ? DATETIME_CACHE[v] : (0, import_dayjs.default)(v, VALID_DATETIME_FORMATS, true);
|
|
42
43
|
};
|
|
@@ -148,7 +149,11 @@ const checkPartialDateTime = (value) => {
|
|
|
148
149
|
if (day && month) {
|
|
149
150
|
const dayNum = parseInt(day);
|
|
150
151
|
const monthNum = parseInt(month);
|
|
151
|
-
const
|
|
152
|
+
const validYear = onlyNumbersRegex.test(year) ? year : void 0;
|
|
153
|
+
if (!validYear || year.length < 4) {
|
|
154
|
+
return "form.error.datetime.invalid";
|
|
155
|
+
}
|
|
156
|
+
const yearNum = parseInt(validYear);
|
|
152
157
|
const maxDay = getDaysInMonth(monthNum, yearNum);
|
|
153
158
|
if (dayNum < 1 || dayNum > maxDay) {
|
|
154
159
|
return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/validators/utils/datetime.ts"],
|
|
4
|
-
"sourcesContent": ["import dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { FieldSpec } from '@digigov/form/types';\nimport { ValidatorSchema } from '@digigov/form/validators/types';\n\ndayjs.extend(customParseFormat);\n\nconst VALID_DATETIME_FORMATS = ['DD/MM/YYYY HH:mm'];\nconst DATETIME_CACHE = {};\n\nconst getDateTime = (v: string) => {\n return DATETIME_CACHE[v]\n ? DATETIME_CACHE[v]\n : dayjs(v, VALID_DATETIME_FORMATS, true);\n};\n\nconst getDaysInMonth = (month: number, year: number): number => {\n return dayjs(`${year}-${month}-01`).daysInMonth(); // e.g. 29 for Feb 2024\n};\n\nconst checkPartialDateTime = (value: string) => {\n const [datePart, timePart] = value.split(' ');\n const [day, month, year] = datePart?.split('/') ?? [];\n const [hours, minutes] = timePart?.split(':') ?? [];\n\n const hasDay = Boolean(day);\n const hasMonth = Boolean(month);\n const hasYear = Boolean(year);\n const hasHours = Boolean(hours);\n const hasMinutes = Boolean(minutes);\n\n if (hasDay && !hasMonth && !hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_year_hours_minutes';\n }\n if (!hasDay && hasMonth && !hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_year_hours_minutes';\n }\n if (!hasDay && !hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_month_hours_minutes';\n }\n if (hasDay && hasMonth && !hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_year_hours_minutes';\n }\n if (hasDay && !hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_hours_minutes';\n }\n if (!hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_hours_minutes';\n }\n if (hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid__hours_minutes';\n }\n if (hasDay && hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_minutes';\n }\n if (hasDay && hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_hours';\n }\n if (hasDay && !hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_year_minutes';\n }\n if (hasDay && !hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month_year_hours';\n }\n if (hasDay && !hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month_year';\n }\n if (!hasDay && hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_year_minutes';\n }\n if (!hasDay && hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_year_hours';\n }\n if (!hasDay && hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_year';\n }\n if (!hasDay && !hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_month_minutes';\n }\n if (!hasDay && !hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month_hours';\n }\n if (!hasDay && !hasMonth && hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month';\n }\n if (!hasDay && !hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month_year';\n }\n if (!hasDay && !hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month_year_hours';\n }\n if (hasDay && hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_year_minutes';\n }\n if (hasDay && hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_year_hours';\n }\n if (hasDay && hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_year';\n }\n if (hasDay && !hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_minutes';\n }\n if (hasDay && !hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month_hours';\n }\n if (hasDay && !hasMonth && hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month';\n }\n if (!hasDay && hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_minutes';\n }\n if (!hasDay && hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_hours';\n }\n if (!hasDay && hasMonth && hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day';\n }\n if (!hasDay && !hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_month_year_minutes';\n }\n if (hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_hours_minutes';\n }\n if (day && month) {\n const dayNum = parseInt(day);\n const monthNum = parseInt(month);\n const yearNum = parseInt(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA8B;AAI9B,aAAAA,QAAM,OAAO,yBAAAC,OAAiB;AAE9B,MAAM,yBAAyB,CAAC,kBAAkB;AAClD,MAAM,iBAAiB,CAAC;
|
|
4
|
+
"sourcesContent": ["import dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { FieldSpec } from '@digigov/form/types';\nimport { ValidatorSchema } from '@digigov/form/validators/types';\n\ndayjs.extend(customParseFormat);\n\nconst VALID_DATETIME_FORMATS = ['DD/MM/YYYY HH:mm'];\nconst DATETIME_CACHE = {};\nconst onlyNumbersRegex = /^\\d+$/;\n\nconst getDateTime = (v: string) => {\n return DATETIME_CACHE[v]\n ? DATETIME_CACHE[v]\n : dayjs(v, VALID_DATETIME_FORMATS, true);\n};\n\nconst getDaysInMonth = (month: number, year: number): number => {\n return dayjs(`${year}-${month}-01`).daysInMonth(); // e.g. 29 for Feb 2024\n};\n\nconst checkPartialDateTime = (value: string) => {\n const [datePart, timePart] = value.split(' ');\n const [day, month, year] = datePart?.split('/') ?? [];\n const [hours, minutes] = timePart?.split(':') ?? [];\n\n const hasDay = Boolean(day);\n const hasMonth = Boolean(month);\n const hasYear = Boolean(year);\n const hasHours = Boolean(hours);\n const hasMinutes = Boolean(minutes);\n\n if (hasDay && !hasMonth && !hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_year_hours_minutes';\n }\n if (!hasDay && hasMonth && !hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_year_hours_minutes';\n }\n if (!hasDay && !hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_month_hours_minutes';\n }\n if (hasDay && hasMonth && !hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_year_hours_minutes';\n }\n if (hasDay && !hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_hours_minutes';\n }\n if (!hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_hours_minutes';\n }\n if (hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid__hours_minutes';\n }\n if (hasDay && hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_minutes';\n }\n if (hasDay && hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_hours';\n }\n if (hasDay && !hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_year_minutes';\n }\n if (hasDay && !hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month_year_hours';\n }\n if (hasDay && !hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month_year';\n }\n if (!hasDay && hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_year_minutes';\n }\n if (!hasDay && hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_year_hours';\n }\n if (!hasDay && hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_year';\n }\n if (!hasDay && !hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_month_minutes';\n }\n if (!hasDay && !hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month_hours';\n }\n if (!hasDay && !hasMonth && hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month';\n }\n if (!hasDay && !hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month_year';\n }\n if (!hasDay && !hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_month_year_hours';\n }\n if (hasDay && hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_year_minutes';\n }\n if (hasDay && hasMonth && !hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_year_hours';\n }\n if (hasDay && hasMonth && !hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_year';\n }\n if (hasDay && !hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_month_minutes';\n }\n if (hasDay && !hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month_hours';\n }\n if (hasDay && !hasMonth && hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_month';\n }\n if (!hasDay && hasMonth && hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_minutes';\n }\n if (!hasDay && hasMonth && hasYear && !hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day_hours';\n }\n if (!hasDay && hasMonth && hasYear && hasHours && hasMinutes) {\n return 'form.error.datetime.invalid_day';\n }\n if (!hasDay && !hasMonth && !hasYear && hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_day_month_year_minutes';\n }\n if (hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {\n return 'form.error.datetime.invalid_hours_minutes';\n }\n if (day && month) {\n const dayNum = parseInt(day);\n const monthNum = parseInt(month);\n const validYear = onlyNumbersRegex.test(year) ? year : undefined;\n if (!validYear || year.length < 4) {\n return 'form.error.datetime.invalid';\n }\n const yearNum = parseInt(validYear);\n const maxDay = getDaysInMonth(monthNum, yearNum);\n if (dayNum < 1 || dayNum > maxDay) {\n return {\n key: 'form.error.datetime.invalid_day_range',\n context: {\n maxDay: maxDay,\n },\n };\n }\n if (monthNum < 1 || monthNum > 12) {\n return 'form.error.datetime.invalid_month_range';\n }\n }\n if (hours && minutes) {\n const hoursNum = parseInt(hours);\n const minutesNum = parseInt(minutes);\n if (hoursNum < 0 || hoursNum > 23) {\n return 'form.error.datetime.invalid_hours_range';\n }\n if (minutesNum < 0 || minutesNum > 59) {\n return 'form.error.datetime.invalid_minutes_range';\n }\n }\n return 'form.error.datetime.invalid';\n};\n\nexport const LATER_THAN_DATETIME_VALIDATOR = (\n field: FieldSpec\n): ValidatorSchema => {\n let minDateTime;\n const params = field.extra || {};\n if (params.min === 'now') {\n minDateTime = dayjs();\n } else {\n minDateTime = getDateTime(params.min);\n }\n return {\n name: 'later-than-datetime',\n message: {\n key: 'form.error.datetime.later_than',\n context: {\n minDateTime: minDateTime.format('DD/MM/YYYY HH:mm'),\n },\n },\n test: function (value: string) {\n if (!value) return true;\n const datetime = getDateTime(value);\n return datetime.isValid() && datetime.isAfter(minDateTime);\n },\n };\n};\n\nexport const EARLIER_THAN_DATETIME_VALIDATOR = (\n field: FieldSpec\n): ValidatorSchema => {\n let maxDateTime;\n const params = field.extra || {};\n if (params.max === 'now') {\n maxDateTime = dayjs();\n } else {\n maxDateTime = getDateTime(params.max);\n }\n return {\n name: 'earlier-than-datetime',\n message: {\n key: 'form.error.datetime.earlier_than',\n context: {\n maxDateTime: maxDateTime.format('DD/MM/YYYY HH:mm'),\n },\n },\n test: function (value: string) {\n if (!value) return true;\n const datetime = getDateTime(value);\n return datetime.isValid() && datetime.isBefore(maxDateTime);\n },\n };\n};\n\nexport const DATETIME_VALIDATOR = {\n name: 'datetime-validator',\n message: (v): string | object => {\n return checkPartialDateTime(v.value);\n },\n test: function (value: string) {\n if (!value) return true;\n const datetime = getDateTime(value);\n return datetime.isValid();\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["dayjs", "customParseFormat"]
|
|
7
7
|
}
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digigov/form",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-599965f0",
|
|
4
4
|
"description": "@digigov form builder",
|
|
5
5
|
"author": "GRNET Developers <devs@lists.grnet.gr>",
|
|
6
6
|
"license": "BSD-2-Clause",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"yup": "0.32.11",
|
|
15
15
|
"dayjs": "1.10.4",
|
|
16
16
|
"@hookform/resolvers": "5.0.1",
|
|
17
|
-
"@digigov/react-icons": "2.0.0-
|
|
17
|
+
"@digigov/react-icons": "2.0.0-599965f0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@digigov/ui": "2.0.0-
|
|
21
|
-
"@digigov/react-core": "2.0.0-
|
|
20
|
+
"@digigov/ui": "2.0.0-599965f0",
|
|
21
|
+
"@digigov/react-core": "2.0.0-599965f0",
|
|
22
22
|
"clsx": "1.1.1",
|
|
23
23
|
"react": "^18.3.0 || ^19.1.0",
|
|
24
24
|
"react-dom": "^18.3.0 || ^19.1.0"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ComponentRef } from 'react';
|
|
2
2
|
import { FieldContainerProps } from '@digigov/form/Field/types';
|
|
3
3
|
import Label from '@digigov/form/inputs/Label';
|
|
4
4
|
import { ErrorMessage } from '@digigov/react-core/ErrorMessage';
|
|
@@ -9,63 +9,72 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
|
|
|
9
9
|
import { useTranslation } from '@digigov/ui/i18n';
|
|
10
10
|
import { Hint } from '@digigov/ui/typography/Hint';
|
|
11
11
|
|
|
12
|
-
export const FieldBaseContainer
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
12
|
+
export const FieldBaseContainer = React.forwardRef<
|
|
13
|
+
ComponentRef<typeof Fieldset>,
|
|
14
|
+
FieldContainerProps
|
|
15
|
+
>(
|
|
16
|
+
(
|
|
17
|
+
{
|
|
18
|
+
name,
|
|
19
|
+
wrapper,
|
|
20
|
+
label,
|
|
21
|
+
children,
|
|
22
|
+
error,
|
|
23
|
+
hasError,
|
|
24
|
+
layout,
|
|
25
|
+
controlled,
|
|
26
|
+
labelSize = 'sm',
|
|
27
|
+
},
|
|
28
|
+
ref
|
|
29
|
+
) => {
|
|
30
|
+
const { t } = useTranslation();
|
|
31
|
+
const errorMessage = error?.message.key
|
|
32
|
+
? error.message.key
|
|
33
|
+
: error?.message || '';
|
|
34
|
+
const errorContext = error?.message.context || {};
|
|
35
|
+
if (wrapper === 'fieldset') {
|
|
36
|
+
return (
|
|
37
|
+
<FieldContainer error={hasError} {...layout}>
|
|
38
|
+
<Fieldset
|
|
39
|
+
ref={ref}
|
|
40
|
+
className="outline-none"
|
|
41
|
+
{...(controlled && {
|
|
42
|
+
tabIndex: -1,
|
|
43
|
+
})}
|
|
44
|
+
>
|
|
45
|
+
<FieldsetLegend size={labelSize}>
|
|
46
|
+
{label && label.primary}
|
|
47
|
+
</FieldsetLegend>
|
|
48
|
+
{label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
|
|
49
|
+
{error && (
|
|
50
|
+
<ErrorMessage id={`${name}-error`}>
|
|
51
|
+
{t(errorMessage, errorContext)}
|
|
52
|
+
</ErrorMessage>
|
|
53
|
+
)}
|
|
54
|
+
{children}
|
|
55
|
+
{label && label.hint && <Hint size="sm">{label.hint}</Hint>}
|
|
56
|
+
</Fieldset>
|
|
57
|
+
</FieldContainer>
|
|
58
|
+
);
|
|
59
|
+
} else {
|
|
60
|
+
return (
|
|
61
|
+
<FieldContainer error={hasError} {...layout}>
|
|
62
|
+
<LabelContainer>
|
|
63
|
+
{label && <Label label={label} />}
|
|
64
|
+
{error && (
|
|
65
|
+
<ErrorMessage id={`${name}-error`}>
|
|
66
|
+
{t(errorMessage, errorContext)}
|
|
67
|
+
</ErrorMessage>
|
|
68
|
+
)}
|
|
69
|
+
{children}
|
|
70
|
+
{label && label.hint && <Hint size="sm">{label.hint}</Hint>}
|
|
71
|
+
</LabelContainer>
|
|
72
|
+
</FieldContainer>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
68
75
|
}
|
|
69
|
-
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
FieldBaseContainer.displayName = 'FieldBaseContainer';
|
|
70
79
|
|
|
71
80
|
export default FieldBaseContainer;
|
|
@@ -221,7 +221,6 @@ export const FormDialog: React.FC<FormDialogProps> = React.forwardRef(
|
|
|
221
221
|
<ArrayItemDisplay
|
|
222
222
|
key={index}
|
|
223
223
|
name={`${name}.${index}`}
|
|
224
|
-
register={register}
|
|
225
224
|
index={index}
|
|
226
225
|
isFirst={index === 0}
|
|
227
226
|
isLast={index === values.length - 1}
|
|
@@ -410,7 +409,6 @@ export const ArrayItemHeader = ({ labels, disabled }) => {
|
|
|
410
409
|
export const ArrayItemDisplay = ({
|
|
411
410
|
name,
|
|
412
411
|
data,
|
|
413
|
-
register,
|
|
414
412
|
edit,
|
|
415
413
|
remove,
|
|
416
414
|
disabledEdit,
|
|
@@ -435,7 +433,6 @@ export const ArrayItemDisplay = ({
|
|
|
435
433
|
name: string;
|
|
436
434
|
edit: (name: string) => void;
|
|
437
435
|
remove: (name: string) => void;
|
|
438
|
-
register: (name: string) => void;
|
|
439
436
|
disabledEdit?: boolean;
|
|
440
437
|
disabledDelete?: boolean;
|
|
441
438
|
disabled?: boolean;
|
|
@@ -464,7 +461,7 @@ export const ArrayItemDisplay = ({
|
|
|
464
461
|
const borderVariant = border === false || sortable ? 'none' : 'border';
|
|
465
462
|
return (
|
|
466
463
|
<>
|
|
467
|
-
<TableRow
|
|
464
|
+
<TableRow>
|
|
468
465
|
{values?.map?.((value, valueIndex) => {
|
|
469
466
|
return (
|
|
470
467
|
<TableDataCell
|
package/src/FieldArray/index.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
2
|
import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
|
|
3
3
|
import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
|
|
4
4
|
import { FieldProps } from '@digigov/form/Field/types';
|
|
@@ -43,11 +43,38 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
|
|
|
43
43
|
name,
|
|
44
44
|
});
|
|
45
45
|
const fields = getValues(name) || [];
|
|
46
|
+
|
|
47
|
+
/** The ref of the FieldBaseContainer. */
|
|
48
|
+
const containerRef = useRef<HTMLFieldSetElement | null>(null);
|
|
49
|
+
|
|
50
|
+
const { errors } = formState;
|
|
51
|
+
|
|
52
|
+
// Focus the fieldset when there are errors related to this field array
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
if (!containerRef.current) return;
|
|
55
|
+
const fieldErrors = Object.keys(errors);
|
|
56
|
+
// no errors
|
|
57
|
+
if (!fieldErrors.length) return;
|
|
58
|
+
|
|
59
|
+
if (
|
|
60
|
+
// Check if there are errors related to the current field array
|
|
61
|
+
fieldErrors.some((key) => {
|
|
62
|
+
const fieldArrayName = key.split('.')[0];
|
|
63
|
+
return fieldArrayName === name;
|
|
64
|
+
})
|
|
65
|
+
) {
|
|
66
|
+
if (containerRef.current && errors[name]) {
|
|
67
|
+
containerRef.current.focus();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}, [errors, name]);
|
|
71
|
+
|
|
46
72
|
return (
|
|
47
73
|
<FieldBaseContainer
|
|
48
74
|
label={label}
|
|
49
75
|
layout={layout}
|
|
50
76
|
register={register}
|
|
77
|
+
ref={containerRef}
|
|
51
78
|
error={error?.message && error ? error : undefined}
|
|
52
79
|
hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
|
|
53
80
|
wrapper="fieldset"
|