@digigov/form 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/src/FieldArray/BaseFieldArray.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useFieldArray } from 'react-hook-form';
+import type { FieldArrayProps } from '@digigov/form/FieldArray';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';
+import { Card } from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+
+type BaseFieldArrayProps = Omit<
+  FieldArrayProps,
+  | 'registerFieldFocus'
+  | 'trigger'
+  | 'clearErrors'
+  | 'setValue'
+  | 'reset'
+  | 'resetField'
+>;
+export const BaseFieldArray = React.forwardRef<
+  HTMLButtonElement,
+  BaseFieldArrayProps
+>(
+  (
+    {
+      name,
+      register,
+      control,
+      formState,
+      error,
+      getValues,
+      Field,
+      ...customField
+    },
+    ref
+  ) => {
+    const { append, remove } = useFieldArray({
+      control,
+      name,
+    });
+    const fields = getValues(name) || [];
+
+    return (
+      <>
+        {fields.map((field, index) => (
+          <Card
+            variant={customField.extra?.border ? 'border' : 'divider'}
+            key={field.id || index}
+          >
+            <Fieldset>
+              <FieldsetLabel>
+                {`${customField.extra?.label.object.title}${!customField.extra?.noIndex ? ' ' + String(index + 1) : ''}`}
+              </FieldsetLabel>
+              <FieldObject
+                name={`${name}.${index}`}
+                error={Array.isArray(error) && error[index]}
+                formState={formState}
+                register={register}
+                control={control}
+                {...customField.extra?.of}
+                Field={Field}
+              />
+              <Button
+                name={`${name}-object-remove`}
+                variant={customField.extra?.label.object?.deleteButtonVariant}
+                type="button"
+                color="warning"
+                onClick={() => remove(index)}
+                disabled={!customField?.editable}
+              >
+                {customField.extra?.label.object?.delete}
+              </Button>
+            </Fieldset>
+          </Card>
+        ))}
+        {customField.editable && (
+          <Button
+            ref={ref}
+            type="button"
+            name={`${name}-add-object`}
+            color="secondary"
+            variant={customField.extra?.label.object?.addButtonVariant}
+            onClick={(ev) => {
+              ev.preventDefault();
+              append({});
+            }}
+            disabled={!customField?.editable}
+          >
+            {customField.extra?.label.object?.add}
+          </Button>
+        )}
+      </>
+    );
+  }
+);
+
+BaseFieldArray.displayName = 'BaseFieldArray';
+
+export default BaseFieldArray;

package/src/FieldArray/FormDialog/ArrayItemDisplay.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import type { UseFieldArrayMove } from 'react-hook-form';
+import { TableDataCell, TableRow } from '@digigov/ui/content';
+import { Button } from '@digigov/ui/form/Button';
+import type { StackProps } from '@digigov/ui/layouts';
+import { Grid, Stack } from '@digigov/ui/layouts';
+import Heading from '@digigov/ui/typography/Heading';
+
+export interface ArrayItemDisplayProps {
+  data: any;
+  name: string;
+  edit: (name: string) => void;
+  remove: (name: string) => void;
+  disabledEdit?: boolean;
+  disabledDelete?: boolean;
+  disabled?: boolean;
+  sortable: boolean;
+  index: number;
+  isFirst: boolean;
+  isLast: boolean;
+  move: UseFieldArrayMove;
+  valueDisplay?: (value) => React.ReactNode;
+  border: boolean;
+  wordBreak?: 'break-all' | 'none';
+  stackProps?: StackProps;
+}
+
+export 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',
+  },
+}: ArrayItemDisplayProps) => {
+  if (data === undefined || data === null) {
+    return null;
+  }
+  if (
+    Object.keys(data).length === 0 ||
+    (Object.keys(data).length === 1 && data.id)
+  ) {
+    return null;
+  }
+  delete data.id;
+  const values: (string | Record<string, any>)[] =
+    typeof data === 'string' ? [data] : Object.values(data || {});
+  const borderVariant = border === false || sortable ? 'none' : 'border';
+  return (
+    <>
+      <TableRow>
+        {values?.map?.((value, valueIndex) => {
+          return (
+            <TableDataCell
+              key={valueIndex}
+              variant={borderVariant}
+              wordBreak={wordBreak}
+              pb={sortable ? 0 : undefined}
+              pt={sortable ? 4 : undefined}
+            >
+              {sortable && valueIndex === 0 && (
+                <Heading size="sm" className="mb-2">
+                  Επιλογή #{index + 1}
+                </Heading>
+              )}
+              {(value as Record<string, any>)?.name ||
+                (Array.isArray(value)
+                  ? value.join('\n')
+                  : valueDisplay
+                    ? valueDisplay(value)
+                    : value) ||
+                ''}
+            </TableDataCell>
+          );
+        })}
+        {disabled === true ||
+        (disabledEdit === true && disabledDelete === true) ? null : (
+          <TableDataCell variant={borderVariant}>
+            <Stack {...stackProps}>
+              {disabledEdit !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => {
+                    edit(name);
+                  }}
+                >
+                  Επεξεργασία
+                </Button>
+              )}
+              {disabledDelete !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => remove(name)}
+                >
+                  Διαγραφή
+                </Button>
+              )}
+            </Stack>
+          </TableDataCell>
+        )}
+      </TableRow>
+      {sortable && (
+        <TableRow>
+          <TableDataCell
+            variant={isLast ? 'none' : 'border'}
+            colSpan={
+              disabled === true ||
+              (disabledEdit === true && disabledDelete === true)
+                ? values.length
+                : values.length + 1
+            }
+          >
+            {sortable && !disabled && !(isFirst && isLast) && (
+              <Grid xs={12} mt={2}>
+                Μετακίνηση{' '}
+                {!isFirst && (
+                  <>
+                    προς τα{' '}
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => move(index, index - 1)}
+                    >
+                      πάνω
+                    </Button>
+                  </>
+                )}
+                {!isFirst && !isLast && ' ή '}
+                {!isLast && (
+                  <>
+                    προς τα{' '}
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => move(index, index + 1)}
+                    >
+                      κάτω
+                    </Button>
+                  </>
+                )}
+              </Grid>
+            )}
+          </TableDataCell>
+        </TableRow>
+      )}
+    </>
+  );
+};

package/src/FieldArray/FormDialog/ArrayItemHeader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableHead, TableHeadCell, TableRow } from '@digigov/ui/content';
+
+export const ArrayItemHeader = ({ labels, disabled }) => {
+  return (
+    <TableHead>
+      <TableRow>
+        {labels.map((label, index) => {
+          return <TableHeadCell key={index}>{label}</TableHeadCell>;
+        })}
+        {!disabled && <TableHeadCell>Ενέργειες</TableHeadCell>}
+      </TableRow>
+    </TableHead>
+  );
+};

package/src/FieldArray/FormDialog/ArrayItemModal.tsx

@@ -0,0 +1,223 @@
+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, 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 ArrayItemModalProps 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 ArrayItemModal = React.forwardRef<
+  HTMLDivElement,
+  ArrayItemModalProps
+>(function ArrayItemModal(
+  {
+    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',
+    shouldUnregister: true,
+  });
+
+  const { setValue, reset } = form;
+
+  // Set the default values of the form when the component mounts
+  useEffect(() => {
+    if (!defaultValue) {
+      reset(undefined, {
+        keepDefaultValues: false,
+        keepValues: false,
+      });
+      return;
+    }
+
+    Object.entries(defaultValue).forEach(([key, value]) => {
+      setValue(key, value);
+    });
+    // modalProps.open is used to reset the form when the modal opens
+  }, [defaultValue, reset, setValue, modalProps.open]);
+
+  const onSubmit = useCallback(
+    (data: FormData): void => {
+      editOrAppend(data);
+    },
+    [editOrAppend]
+  );
+
+  const handleSubmitWithoutPropagation = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+    return form.handleSubmit(onSubmit)(e);
+  };
+
+  const formRef = useRef(null);
+
+  const ctx = {
+    ...parentCtx,
+    // fieldsMap: {},
+    // fieldsetsMap: {},
+    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),
+  };
+
+  const disabled = false;
+  // const disabled = value === undefined || value === null || value === '';
+  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"
+                disabled={disabled}
+              >
+                {editLabel || 'Αποθήκευση'}
+              </Button>
+            ) : (
+              <Button
+                color="primary"
+                {...appendProps}
+                type="submit"
+                disabled={disabled}
+              >
+                {appendLabel || 'Προσθήκη'}
+              </Button>
+            )}
+            <Button
+              variant="link"
+              type="button"
+              {...cancelProps}
+              onClick={(e) => {
+                e.preventDefault();
+                cancel();
+              }}
+            >
+              {cancelLabel || 'Ακύρωση'}
+            </Button>
+          </ModalAction>
+        </form>
+      </FormContext.Provider>
+    </ModalPortal>
+  );
+});
+
+const ModalPortal = (props: any) => {
+  return createPortal(<Modal {...props} />, document.body);
+};