@digigov/form 2.0.0-264e5fff → 2.0.0-290ada95

package/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay.js

@@ -0,0 +1,117 @@
+import react from "react";
+import { omit } from "../../../utils.js";
+import { ErrorMessage } from "@digigov/ui/index.js";
+import { Card, SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, TableDataCell, TableRow } from "@digigov/ui/content/index.js";
+import { Button, ButtonGroup } from "@digigov/ui/form/Button/index.js";
+import { Grid, SectionBreak, Stack } from "@digigov/ui/layouts/index.js";
+import Heading from "@digigov/ui/typography/Heading/index.js";
+import { NormalText } from "@digigov/ui/typography/NormalText/index.js";
+const ArrayItemDisplay = ({ name, data, edit, remove, disabledEdit, disabledDelete, disabled, sortable, index, isFirst, isLast, move, valueDisplay, border = true, wordBreak = 'break-all', stackProps = {
+    spacing: 4,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    direction: 'column'
+}, customField, ofField, fieldArrayValues, error })=>{
+    if (null == data) return null;
+    if (0 === Object.keys(data).length || 1 === Object.keys(data).length && data.id) return null;
+    const values = 'string' == typeof data ? [
+        data
+    ] : Object.values(data ? omit(data, [
+        'id'
+    ]) : {});
+    const borderVariant = false === border || sortable ? 'none' : 'border';
+    const hasItemButtons = !disabled && (!disabledEdit || !disabledDelete);
+    const fieldLabel = ofField?.type === 'object' ? ofField?.extra?.fields.reduce((acc, { key, label })=>({
+            ...acc,
+            [key]: label.primary
+        }), {}) : ofField?.label?.primary;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, customField?.extra?.layout === 'card' ? /*#__PURE__*/ react.createElement(Card, {
+        borderColor: "light",
+        variant: "border",
+        dense: true,
+        ...customField?.extra.cardContainer
+    }, sortable && /*#__PURE__*/ react.createElement(Heading, {
+        size: "sm"
+    }, "Επιλογή #", index + 1), /*#__PURE__*/ react.createElement(SummaryList, {
+        mb: 0,
+        noLastBorder: !hasItemButtons,
+        error: !!error
+    }, error && Object.keys(error).length > 0 && Object.entries(error).map(([fieldKey, fieldError])=>/*#__PURE__*/ react.createElement(ErrorMessage, {
+            key: fieldKey,
+            id: `${name}-error`
+        }, `${ofField?.type === 'object' && ofField?.extra?.fields ? `${fieldLabel[fieldKey] || fieldKey}: ` : ''}`, fieldError.message)), values?.map?.((value, valueIndex)=>{
+        const key = ofField?.type === 'object' ? ofField?.extra?.fields?.[valueIndex]?.key : ofField?.key;
+        const label = ofField?.type === 'object' ? fieldLabel[key] : fieldLabel;
+        const shouldShowKey = !customField?.extra?.noHeader && ofField?.extra && fieldArrayValues?.length > 0;
+        return /*#__PURE__*/ react.createElement(SummaryListItem, {
+            key: valueIndex
+        }, shouldShowKey && /*#__PURE__*/ react.createElement(SummaryListItemKey, {
+            error: !!error && Object.keys(error)?.includes(key)
+        }, label), /*#__PURE__*/ react.createElement(SummaryListItemValue, {
+            error: !shouldShowKey && !!error && Object.keys(error)?.includes(key)
+        }, value?.name || (Array.isArray(value) ? value.join('\n') : valueDisplay ? valueDisplay(value) : value) || ''));
+    })), true === disabled || true === disabledEdit && true === disabledDelete ? null : /*#__PURE__*/ react.createElement(ButtonGroup, {
+        mb: 0,
+        ...customField?.extra?.cardButtonGroup
+    }, true !== disabledEdit && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>{
+            edit(name);
+        }
+    }, "Επεξεργασία"), true !== disabledDelete && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>remove(name)
+    }, "Διαγραφή")), sortable && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SectionBreak, null), sortable && !disabled && !(isFirst && isLast) && /*#__PURE__*/ react.createElement(NormalText, {
+        mb: 0
+    }, "Μετακίνηση", ' ', !isFirst && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index - 1)
+    }, "πάνω")), !isFirst && !isLast && ' ή ', !isLast && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index + 1)
+    }, "κάτω"))))) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(TableRow, null, values?.map?.((value, valueIndex)=>{
+        const fieldKey = ofField?.type === 'object' ? ofField?.extra?.fields?.[valueIndex]?.key : ofField?.key;
+        return /*#__PURE__*/ react.createElement(TableDataCell, {
+            key: valueIndex,
+            variant: borderVariant,
+            wordBreak: wordBreak,
+            pb: sortable ? 0 : void 0,
+            pt: sortable ? 4 : void 0,
+            highlight: !!error && Object.keys(error)?.includes(fieldKey) ? 'error' : void 0
+        }, sortable && 0 === valueIndex && /*#__PURE__*/ react.createElement(Heading, {
+            size: "sm",
+            mb: 2
+        }, "Επιλογή #", index + 1), value?.name || (Array.isArray(value) ? value.join('\n') : valueDisplay ? valueDisplay(value) : value) || '');
+    }), true === disabled || true === disabledEdit && true === disabledDelete ? null : /*#__PURE__*/ react.createElement(TableDataCell, {
+        variant: borderVariant
+    }, /*#__PURE__*/ react.createElement(Stack, stackProps, true !== disabledEdit && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>{
+            edit(name);
+        }
+    }, "Επεξεργασία"), true !== disabledDelete && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>remove(name)
+    }, "Διαγραφή")))), sortable && /*#__PURE__*/ react.createElement(TableRow, null, /*#__PURE__*/ react.createElement(TableDataCell, {
+        variant: isLast ? 'none' : 'border',
+        colSpan: true === disabled || true === disabledEdit && true === disabledDelete ? values.length : values.length + 1
+    }, sortable && !disabled && !(isFirst && isLast) && /*#__PURE__*/ react.createElement(Grid, {
+        xs: 12,
+        mt: 2
+    }, "Μετακίνηση", ' ', !isFirst && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index - 1)
+    }, "πάνω")), !isFirst && !isLast && ' ή ', !isLast && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index + 1)
+    }, "κάτω")))))));
+};
+export { ArrayItemDisplay };

package/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader.js

@@ -0,0 +1,6 @@
+import react from "react";
+import { TableHead, TableHeadCell, TableRow } from "@digigov/ui/content/index.js";
+const ArrayItemHeader = ({ labels, disabled })=>/*#__PURE__*/ react.createElement(TableHead, null, /*#__PURE__*/ react.createElement(TableRow, null, labels.map((label, index)=>/*#__PURE__*/ react.createElement(TableHeadCell, {
+            key: index
+        }, label)), !disabled && /*#__PURE__*/ react.createElement(TableHeadCell, null, "Ενέργειες")));
+export { ArrayItemHeader };

package/FieldArray/FormDialog/ArrayDisplay/index.js

@@ -1,57 +1,32 @@
-import React from "react";
-import { ArrayContainerDisplay } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay";
-import { ArrayItemDisplay } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay";
-const ArrayDisplay = ({
-  fieldArrayName,
-  fieldArrayValues,
-  ofField,
-  customField,
-  onEdit,
-  onRemove,
-  move,
-  sortable,
-  error
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    ArrayContainerDisplay,
-    {
-      fieldArrayValues,
-      ofField,
-      customField
-    },
-    fieldArrayValues?.map?.((field, index) => {
-      return /* @__PURE__ */ React.createElement(
-        ArrayItemDisplay,
-        {
-          error: error && error[index] ? error[index] : void 0,
-          key: index,
-          name: `${fieldArrayName}.${index}`,
-          index,
-          isFirst: index === 0,
-          isLast: index === fieldArrayValues.length - 1,
-          data: field,
-          edit: () => onEdit(index),
-          stackProps: customField?.extra?.stackProps,
-          wordBreak: customField?.extra?.wordBreak,
-          valueDisplay: customField?.extra?.valueDisplay,
-          remove: () => onRemove(index),
-          border: customField.extra?.border,
-          move,
-          sortable,
-          disabledEdit: sortable ? true : customField.extra?.noEdit ?? false,
-          disabledDelete: customField.extra?.noDelete ?? false,
-          disabled: customField?.editable === false,
-          fieldArrayValues,
-          ofField,
-          customField
-        }
-      );
-    })
-  );
-};
-var ArrayDisplay_default = ArrayDisplay;
-export {
-  ArrayDisplay,
-  ArrayDisplay_default as default
-};
-//# sourceMappingURL=index.js.map
+import react from "react";
+import { ArrayContainerDisplay } from "./ArrayContainerDisplay.js";
+import { ArrayItemDisplay } from "./ArrayItemDisplay.js";
+const ArrayDisplay = ({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, error })=>/*#__PURE__*/ react.createElement(ArrayContainerDisplay, {
+        fieldArrayValues: fieldArrayValues,
+        ofField: ofField,
+        customField: customField
+    }, fieldArrayValues?.map?.((field, index)=>/*#__PURE__*/ react.createElement(ArrayItemDisplay, {
+            error: error && error[index] ? error[index] : void 0,
+            key: index,
+            name: `${fieldArrayName}.${index}`,
+            index: index,
+            isFirst: 0 === index,
+            isLast: index === fieldArrayValues.length - 1,
+            data: field,
+            edit: ()=>onEdit(index),
+            stackProps: customField?.extra?.stackProps,
+            wordBreak: customField?.extra?.wordBreak,
+            valueDisplay: customField?.extra?.valueDisplay,
+            remove: ()=>onRemove(index),
+            border: customField.extra?.border,
+            move: move,
+            sortable: sortable,
+            disabledEdit: sortable ? true : customField.extra?.noEdit ?? false,
+            disabledDelete: customField.extra?.noDelete ?? false,
+            disabled: customField?.editable === false,
+            fieldArrayValues: fieldArrayValues,
+            ofField: ofField,
+            customField: customField
+        })));
+const FormDialog_ArrayDisplay = ArrayDisplay;
+export { ArrayDisplay, FormDialog_ArrayDisplay as default };

package/FieldArray/FormDialog/ArrayEditModal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ErrorOption } from 'react-hook-form';
-import type { FieldProps, FormData } from '@digigov/form/Field/types';
+import type { FieldProps, FormData } from '../../Field/types.js';
 import type { ModalProps } from '@digigov/ui/app/Modal';
 export interface ArrayEditModalProps extends Omit<ModalProps, 'children'> {
     type: 'append' | 'edit';

package/FieldArray/FormDialog/ArrayEditModal.js

@@ -0,0 +1,138 @@
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useForm } from "react-hook-form";
+import { FieldObject } from "../../FieldObject/index.js";
+import { Fieldset } from "../../Fieldset/index.js";
+import { FormContext, useFormContext } from "../../FormContext.js";
+import { yupResolver } from "../../utils.js";
+import { useValidationSchema } from "../../validators/index.js";
+import { Modal, ModalAction, ModalContent, ModalHeading } from "@digigov/ui/app/Modal/index.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const ArrayEditModal_ArrayEditModal = /*#__PURE__*/ react.forwardRef(function({ type, title, hint, defaultValue, editOrAppend, cancel, addTitle, editLabel, editProps, appendLabel, appendProps, cancelLabel, cancelProps, ofField, error: customErrors, Field, ...modalProps }, ref) {
+    const parentCtx = useFormContext();
+    const schema = useValidationSchema('object' === ofField.type && ofField.extra.fields ? Object.values(ofField.extra.fields) : [
+        ofField
+    ]);
+    const resolver = useMemo(()=>{
+        if (!schema) return;
+        return yupResolver(schema);
+    }, [
+        schema
+    ]);
+    const parentFormOptions = parentCtx.control._options;
+    const form = useForm({
+        resolver,
+        mode: parentFormOptions.mode,
+        reValidateMode: parentFormOptions.reValidateMode,
+        shouldFocusError: true,
+        criteriaMode: parentFormOptions.criteriaMode
+    });
+    const { reset, setValue, setError } = form;
+    useEffect(()=>{
+        if (modalProps.open) {
+            reset(void 0);
+            if ('edit' === type && customErrors) for (const [key, error] of Object.entries(customErrors))setError(key, 'string' == typeof error ? {
+                message: error
+            } : error);
+            if (defaultValue) Object.entries(defaultValue).forEach(([key, value])=>{
+                setValue(key, value);
+            });
+            if ('append' === type && ofField?.type === 'object' && ofField.extra?.fields) ofField.extra.fields.forEach((field)=>{
+                if (defaultValue && void 0 !== defaultValue[field.key]) return;
+                switch(field.type){
+                    case 'array':
+                        setValue(field.key, []);
+                        break;
+                    case 'object':
+                        setValue(field.key, {});
+                        break;
+                    default:
+                        setValue(field.key, '');
+                }
+            });
+        }
+    }, [
+        modalProps.open,
+        defaultValue,
+        reset,
+        setValue,
+        type,
+        ofField
+    ]);
+    const onSubmit = useCallback((data)=>{
+        editOrAppend(data);
+    }, [
+        editOrAppend
+    ]);
+    const handleSubmitWithoutPropagation = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        return form.handleSubmit(onSubmit)(e);
+    };
+    const formRef = useRef(null);
+    const ctx = {
+        ...parentCtx,
+        control: form.control,
+        register: form.register,
+        watch: form.watch,
+        resetField: form.resetField,
+        registerField: ()=>{},
+        registerFieldFocus: ()=>()=>{},
+        errors: form.formState.errors,
+        formState: form.formState,
+        reset: form.reset,
+        trigger: form.trigger,
+        getFieldState: form.getFieldState,
+        setValue: form.setValue,
+        clearErrors: form.clearErrors,
+        getValues: form.getValues,
+        getValuesFromParentForm: parentCtx.getValues,
+        unregister: form.unregister,
+        setError: form.setError,
+        formRef,
+        submit: form.handleSubmit(onSubmit)
+    };
+    return /*#__PURE__*/ react.createElement(ModalPortal, {
+        ...modalProps,
+        ref: ref,
+        "aria-labelledby": "modal-label"
+    }, /*#__PURE__*/ react.createElement(FormContext.Provider, {
+        value: ctx
+    }, /*#__PURE__*/ react.createElement("form", {
+        onSubmit: handleSubmitWithoutPropagation,
+        ref: formRef
+    }, /*#__PURE__*/ react.createElement(ModalHeading, {
+        id: "modal-label"
+    }, title ? title : 'edit' === type ? 'Επεξεργασία' : addTitle || 'Προσθήκη'), /*#__PURE__*/ react.createElement(ModalContent, null, hint && /*#__PURE__*/ react.createElement(Hint, null, hint), /*#__PURE__*/ react.createElement(Fieldset, null, ofField?.type === 'object' ? /*#__PURE__*/ react.createElement(FieldObject, {
+        ...ofField,
+        defaultValue: defaultValue || void 0,
+        formState: form.formState,
+        register: form.register,
+        control: form.control,
+        name: void 0,
+        Field: Field,
+        error: customErrors
+    }) : /*#__PURE__*/ react.createElement(Field, {
+        error: customErrors,
+        ...ofField
+    }))), /*#__PURE__*/ react.createElement(ModalAction, null, 'edit' === type ? /*#__PURE__*/ react.createElement(Button, {
+        color: "secondary",
+        ...editProps,
+        type: "submit"
+    }, editLabel || 'Αποθήκευση') : /*#__PURE__*/ react.createElement(Button, {
+        color: "primary",
+        ...appendProps,
+        type: "submit"
+    }, appendLabel || 'Προσθήκη'), /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        ...cancelProps,
+        onClick: (e)=>{
+            e.preventDefault();
+            cancel();
+        }
+    }, cancelLabel || 'Ακύρωση')))));
+});
+const ModalPortal = (props)=>/*#__PURE__*/ createPortal(/*#__PURE__*/ react.createElement(Modal, props), document.body);
+export { ArrayEditModal_ArrayEditModal as ArrayEditModal };

package/FieldArray/FormDialog/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ErrorOption, UseFormReturn } from 'react-hook-form';
-import type { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from '../../Field/types.js';
 export interface FormDialogProps extends FieldProps {
     control: UseFormReturn['control'];
     trigger: UseFormReturn['trigger'];