@digigov/form 2.0.0-555d1027 → 2.0.0-5e7a6790

package/src/FieldArray/FormDialog/ArrayEditModal.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { ErrorOption, UseFormProps } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import type {
+  FieldProps,
+  FieldSpec,
+  FormData,
+} from '@digigov/form/Field/types';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { Fieldset } from '@digigov/form/Fieldset';
+import { FormContext, useFormContext } from '@digigov/form/FormContext';
+import { yupResolver } from '@digigov/form/utils';
+import { useValidationSchema } from '@digigov/form/validators';
+import type { ModalProps } from '@digigov/ui/app/Modal';
+import {
+  Modal,
+  ModalAction,
+  ModalContent,
+  ModalHeading,
+} from '@digigov/ui/app/Modal';
+import { Button } from '@digigov/ui/form/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export interface ArrayEditModalProps extends Omit<ModalProps, 'children'> {
+  type: 'append' | 'edit';
+  name: string;
+  title?: string;
+  hint?: string;
+  editOrAppend: (data: FormData) => void;
+  cancel: () => void;
+  addTitle?: string;
+  editLabel?: string;
+  editProps?: any;
+  appendLabel?: string;
+  appendProps?: any;
+  cancelLabel?: string;
+  cancelProps?: any;
+  ofField?: any;
+  arrayItemName: string;
+  defaultValue?: any;
+  Field: React.FC<FieldProps>;
+  error?: ErrorOption;
+  currentIndex: number;
+}
+
+export const ArrayEditModal = React.forwardRef<
+  HTMLDivElement,
+  ArrayEditModalProps
+>(function ArrayEditModal(
+  {
+    type,
+    title,
+    hint,
+    defaultValue,
+    editOrAppend,
+    cancel,
+    addTitle,
+    editLabel,
+    editProps,
+    appendLabel,
+    appendProps,
+    cancelLabel,
+    cancelProps,
+    ofField,
+    error,
+    Field,
+    currentIndex,
+    ...modalProps
+  },
+  ref
+) {
+  const parentCtx = useFormContext();
+  const schema = useValidationSchema(
+    ofField.type === 'object' && ofField.extra.fields
+      ? Object.values(ofField.extra.fields)
+      : [ofField]
+  );
+
+  const resolver: UseFormProps['resolver'] = useMemo(() => {
+    if (!schema) return;
+
+    return yupResolver(schema);
+  }, [schema]);
+
+  const form = useForm({
+    resolver,
+    mode: 'onSubmit',
+    reValidateMode: 'onSubmit',
+    shouldFocusError: true,
+    criteriaMode: 'all',
+  });
+
+  const { reset, setValue } = form;
+
+  // Reset form and set default values when modal opens
+  useEffect(() => {
+    if (modalProps.open) {
+      // Reset form first to clear any previous values
+      reset(undefined);
+
+      // Set default values if they exist
+      if (defaultValue) {
+        Object.entries(defaultValue).forEach(([key, value]) => {
+          setValue(key, value);
+        });
+      }
+
+      if (
+        type === 'append' &&
+        ofField?.type === 'object' &&
+        ofField.extra?.fields
+      ) {
+        // For append mode, set empty values for all fields in case no defaultValue is provided
+        ofField.extra.fields.forEach((field: FieldSpec) => {
+          if (defaultValue && defaultValue[field.key] !== undefined) return;
+          switch (field.type) {
+            case 'array':
+              setValue(field.key, []);
+              break;
+            case 'object':
+              setValue(field.key, {});
+              break;
+            default:
+              // TODO: This replicates legacy behaviour. Maybe reconsider this?
+              setValue(field.key, '');
+          }
+        });
+      }
+    }
+  }, [modalProps.open, defaultValue, reset, setValue, type, ofField]);
+
+  const onSubmit = useCallback(
+    (data: FormData): void => {
+      editOrAppend(data);
+    },
+    [editOrAppend]
+  );
+
+  const handleSubmitWithoutPropagation = (e: React.FormEvent) => {
+    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: () => {}, // If we use parent registerField, validation breaks
+    registerFieldFocus: () => {
+      return () => {};
+    },
+    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 (
+    <ModalPortal {...modalProps} ref={ref} aria-labelledby="modal-label">
+      <FormContext.Provider value={ctx}>
+        <form onSubmit={handleSubmitWithoutPropagation} ref={formRef}>
+          <ModalHeading id="modal-label">
+            {title
+              ? title
+              : type === 'edit'
+                ? 'Επεξεργασία'
+                : addTitle || 'Προσθήκη'}
+          </ModalHeading>
+          <ModalContent>
+            {hint && <Hint>{hint}</Hint>}
+            <Fieldset>
+              {ofField?.type === 'object' ? (
+                <FieldObject
+                  {...ofField}
+                  defaultValue={defaultValue || undefined}
+                  error={error && error[currentIndex]}
+                  formState={form.formState}
+                  register={form.register}
+                  control={form.control}
+                  name={undefined}
+                  Field={Field}
+                />
+              ) : (
+                <Field error={error && error[currentIndex]} {...ofField} />
+              )}
+            </Fieldset>
+          </ModalContent>
+          <ModalAction>
+            {type === 'edit' ? (
+              <Button color="secondary" {...editProps} type="submit">
+                {editLabel || 'Αποθήκευση'}
+              </Button>
+            ) : (
+              <Button color="primary" {...appendProps} type="submit">
+                {appendLabel || 'Προσθήκη'}
+              </Button>
+            )}
+            <Button
+              variant="link"
+              type="button"
+              {...cancelProps}
+              onClick={(e) => {
+                e.preventDefault();
+                cancel();
+              }}
+            >
+              {cancelLabel || 'Ακύρωση'}
+            </Button>
+          </ModalAction>
+        </form>
+      </FormContext.Provider>
+    </ModalPortal>
+  );
+});
+
+const ModalPortal = (props: ModalProps) => {
+  return createPortal(<Modal {...props} />, document.body);
+};

package/src/FieldArray/FormDialog/index.tsx

@@ -0,0 +1,247 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import type { FieldProps, FormData } from '@digigov/form/Field/types';
+import { ArrayDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay';
+import { ArrayEditModal } from '@digigov/form/FieldArray/FormDialog/ArrayEditModal';
+import { useModal } from '@digigov/ui/app/Modal';
+import { Button } from '@digigov/ui/form/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export interface FormDialogProps extends FieldProps {
+  control: UseFormReturn['control'];
+  trigger: UseFormReturn['trigger'];
+  register: UseFormReturn['register'];
+  clearErrors: UseFormReturn['clearErrors'];
+  formState: UseFormReturn['formState'];
+  error?: ErrorOption;
+  getValues: UseFormReturn['getValues'];
+  setValue: UseFormReturn['setValue'];
+  reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
+  sortable: boolean;
+  Field: React.FC<FieldProps>;
+}
+
+export const FormDialog = React.forwardRef<HTMLButtonElement, FormDialogProps>(
+  (
+    {
+      name: fieldArrayName,
+      control,
+      error,
+      getValues,
+      Field,
+      sortable,
+      ...customField
+    },
+    ref
+  ) => {
+    const [isAppending, setIsAppending] = useState(false);
+    const [editingIndex, setEditingIndex] = useState(0);
+    const { fields, append, remove, update, move } = useFieldArray({
+      control,
+      name: fieldArrayName,
+    });
+    const { open, close, registerModal } = useModal();
+    const currentLength = fields.length;
+    const arrayItemName = isAppending
+      ? `${fieldArrayName}.${currentLength}`
+      : `${fieldArrayName}.${editingIndex}`;
+
+    useEffect(() => {
+      if (isAppending) {
+        open(`modal-${fieldArrayName}`);
+      }
+    }, [isAppending, fieldArrayName, open]);
+
+    const fieldArrayValues = getValues(fieldArrayName);
+    const ofField = {
+      ...customField.extra?.of,
+      name: arrayItemName,
+    };
+    if (ofField.type !== 'object') {
+      ofField.name = ofField.key ?? fieldArrayName;
+      ofField.key = ofField.key ?? fieldArrayName;
+    }
+
+    const defaultValue = useMemo(() => {
+      // If appending, use default value from field spec
+      if (isAppending) {
+        if (ofField.type === 'object') return ofField.defaultValue;
+        else return { [ofField.name]: ofField.defaultValue };
+      }
+
+      if (ofField.type === 'object') return getValues(ofField.name);
+      else return { [ofField.name]: fieldArrayValues?.[editingIndex] };
+    }, [
+      editingIndex,
+      fieldArrayValues,
+      getValues,
+      isAppending,
+      ofField.defaultValue,
+      ofField.name,
+      ofField.type,
+    ]);
+
+    const hasCommitedValues = fields.length > 0 || !!fieldArrayValues?.length;
+
+    const title = useMemo(() => {
+      if (!customField.extra?.label.object.title) return null;
+
+      let title = customField.extra.label.object.title;
+      if (customField.extra.label.object.titleNumbering)
+        title += ` ${currentLength + 1}`;
+
+      return title;
+    }, [
+      currentLength,
+      customField.extra?.label.object.title,
+      customField.extra?.label.object.titleNumbering,
+    ]);
+
+    const focusReturnRef = useRef<HTMLElement | null>(null);
+
+    /** Handle closing the modal and restoring focus */
+    const closeModal = useCallback(() => {
+      close();
+      // Return focus to the element that was focused before the modal opened
+      if (focusReturnRef.current) {
+        focusReturnRef.current.focus();
+        focusReturnRef.current = null;
+      }
+    }, [close]);
+
+    /** Handle modal form submission */
+    const handleEditOrAppend = useCallback(
+      (data: FormData) => {
+        if (isAppending) {
+          setIsAppending(false);
+          if (ofField.type === 'object') append(data);
+          else if (data) append(data[ofField.key ?? fieldArrayName]);
+        } else {
+          if (ofField.type === 'object') update(editingIndex, data);
+          else if (data)
+            update(editingIndex, data[ofField.key ?? fieldArrayName]);
+        }
+        closeModal();
+      },
+      [
+        append,
+        closeModal,
+        editingIndex,
+        fieldArrayName,
+        isAppending,
+        ofField.key,
+        ofField.type,
+        update,
+      ]
+    );
+
+    /** Handle cancelling the modal operation */
+    const handleCancel = useCallback(() => {
+      if (isAppending) setIsAppending(false);
+      closeModal();
+    }, [closeModal, isAppending]);
+
+    /** Handle opening the modal to edit an existing item */
+    const handleEdit = useCallback(
+      (index: number) => {
+        // Store the currently focused element to restore focus later
+        if (document.activeElement instanceof HTMLElement) {
+          focusReturnRef.current = document.activeElement;
+        }
+        setEditingIndex(index);
+        open(`modal-${fieldArrayName}`);
+      },
+      [fieldArrayName, open]
+    );
+
+    /** Handle opening the modal to add a new item */
+    const handleAddClick = useCallback((ev: React.MouseEvent) => {
+      ev.preventDefault();
+      // Store the currently focused element to restore focus later
+      if (document.activeElement instanceof HTMLElement) {
+        focusReturnRef.current = document.activeElement;
+      }
+      setIsAppending(true);
+    }, []);
+
+    return (
+      <>
+        {!hasCommitedValues && (
+          <Hint {...customField.extra?.label.object?.nothing_added_props}>
+            {customField.extra?.label.object?.nothing_added}
+          </Hint>
+        )}
+        <ArrayEditModal
+          editOrAppend={handleEditOrAppend}
+          cancel={handleCancel}
+          type={isAppending ? 'append' : 'edit'}
+          appendLabel={customField.extra?.label.object.append.label}
+          appendProps={customField.extra?.label.object.append.props}
+          editLabel={customField.extra?.label.object.edit.label}
+          editProps={customField.extra?.label.object.edit.props}
+          cancelLabel={customField.extra?.label.object.cancel.label}
+          cancelProps={customField.extra?.label.object.cancel.props}
+          ofField={ofField}
+          title={title}
+          hint={customField.label?.secondary}
+          name={fieldArrayName}
+          defaultValue={defaultValue || undefined}
+          arrayItemName={arrayItemName}
+          Field={Field}
+          error={error && error[editingIndex]}
+          currentIndex={editingIndex}
+          {...registerModal(`modal-${fieldArrayName}`)}
+        />
+        {hasCommitedValues && (
+          <ArrayDisplay
+            fieldArrayName={fieldArrayName}
+            fieldArrayValues={fieldArrayValues}
+            ofField={ofField}
+            customField={customField}
+            onEdit={handleEdit}
+            onRemove={remove}
+            move={move}
+            sortable={sortable}
+          />
+        )}
+        {customField.extra?.editVariant !== 'display' && (
+          <div
+            className={
+              customField.extra?.label.object?.addButtonVariant === 'link'
+                ? 'my-2 px-2 py-2 bg-gray-200 border-t border-b border-gray-400'
+                : ''
+            }
+          >
+            <Button
+              ref={ref}
+              type="button"
+              name={`${fieldArrayName}-add-object`}
+              color="secondary"
+              variant={customField.extra?.label.object?.addButtonVariant}
+              onClick={handleAddClick}
+              disabled={
+                customField?.editable === false ||
+                customField.extra?.editVariant === 'noinput' ||
+                fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
+              }
+            >
+              {customField.extra?.label.object?.add}
+            </Button>
+          </div>
+        )}
+      </>
+    );
+  }
+);
+
+FormDialog.displayName = 'FormDialog';
+
+export default FormDialog;