@digigov/form 2.0.0-a402a664 → 2.0.0-a64dc016

package/src/FieldArray/FormDialog.tsx

@@ -1,565 +0,0 @@
-import React, { LegacyRef, useEffect, useRef, useState } from 'react';
-import {
-  ErrorOption,
-  useFieldArray,
-  UseFieldArrayMove,
-  UseFormReturn,
-  useWatch,
-} from 'react-hook-form';
-import { FieldProps } from '@digigov/form/Field/types';
-import { FieldObject } from '@digigov/form/FieldObject';
-import { Fieldset } from '@digigov/form/Fieldset';
-import {
-  Modal,
-  ModalAction,
-  ModalContent,
-  ModalHeading,
-  useModal,
-} from '@digigov/ui/app/Modal';
-import {
-  Table,
-  TableBody,
-  TableContainer,
-  TableDataCell,
-  TableHead,
-  TableHeadCell,
-  TableRow,
-} from '@digigov/ui/content';
-import { Button } from '@digigov/ui/form/Button';
-import { StackProps, Grid, Stack } from '@digigov/ui/layouts';
-import Heading from '@digigov/ui/typography/Heading';
-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 interface DialogProps {
-  name: string;
-  heading: string;
-  actions: React.ReactNode;
-  children: React.ReactNode;
-  registerModal: (any) => {};
-}
-
-export const FormDialog: React.FC<FormDialogProps> = React.forwardRef(
-  function FormDialog(
-    {
-      name,
-      trigger,
-      register,
-      control,
-      formState,
-      error,
-      getValues,
-      Field,
-      reset,
-      sortable,
-      ...customField
-    },
-    ref
-  ) {
-    const [isAppending, setIsAppending] = useState(false);
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const { fields, append, remove, update, move } = useFieldArray({
-      control,
-      name,
-    });
-    const { open, close, registerModal } = useModal();
-    const currentLength = fields.length > 0 ? fields.length - 1 : fields.length;
-    const currentName = isAppending
-      ? `${name}.${currentLength}`
-      : `${name}.${currentIndex}`;
-    useEffect(() => {
-      if (isAppending) {
-        setCurrentIndex(currentLength);
-        open(`modal-${name}`);
-      }
-    }, [isAppending]);
-
-    const valuesRef = useRef(null);
-    if (!error) {
-      const values = getValues(currentName);
-      if (typeof values === 'object') {
-        valuesRef.current = { ...values };
-      } else {
-        valuesRef.current = values;
-      }
-    }
-    const values = getValues(name);
-    const ofField = {
-      ...customField.extra?.of,
-      name: currentName,
-    };
-    const defaultValue = getValues(currentName) || ofField.defaultValue;
-    const noValuesCommitted =
-      fields.length === 0 || (fields.length === 1 && isAppending);
-    const titleNumber = customField.extra?.label.object.titleNumbering
-      ? `${currentLength + 1}`
-      : '';
-    return (
-      <>
-        {noValuesCommitted && (
-          <Hint {...customField.extra?.label.object?.nothing_added_props}>
-            {customField.extra?.label.object?.nothing_added}
-          </Hint>
-        )}
-        <ArrayItemModal
-          title={
-            customField.extra?.label.object.title &&
-            `${customField.extra?.label.object.title} ${titleNumber}`
-          }
-          hint={customField.label?.secondary}
-          name={name}
-          defaultValue={defaultValue}
-          currentName={currentName}
-          editOrAppend={async () => {
-            const hasNoErrors = await trigger(
-              ofField.type === 'object'
-                ? ofField.extra.fields.map(({ key }) => `${currentName}.${key}`)
-                : currentName
-            );
-            if (!hasNoErrors) {
-              update(currentIndex, valuesRef.current);
-            }
-            if (hasNoErrors) {
-              const newValues = getValues(currentName);
-              if (isAppending) {
-                setIsAppending(false);
-              }
-              if (newValues === '') {
-                remove(currentIndex);
-              } else {
-                update(currentIndex, newValues);
-              }
-              close();
-            }
-          }}
-          cancel={() => {
-            if (isAppending) {
-              setIsAppending(false);
-              remove(currentIndex);
-              close();
-              return;
-            }
-            update(currentIndex, valuesRef.current);
-            reset(undefined, {
-              keepTouched: true,
-              keepDefaultValues: true,
-              keepIsValid: true,
-              keepIsSubmitted: true,
-              keepValues: true,
-            });
-            close();
-          }}
-          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}
-          control={control}
-          {...registerModal(`modal-${name}`)}
-        >
-          <Fieldset>
-            {ofField?.type === 'object' ? (
-              <FieldObject
-                defaultValue={defaultValue || undefined}
-                error={error && error[currentIndex]}
-                formState={formState}
-                register={register}
-                control={control}
-                {...ofField}
-                key={currentName}
-                Field={Field}
-              />
-            ) : (
-              <Field
-                name={currentName}
-                {...ofField}
-                error={error && error[currentIndex]}
-                key={currentName}
-              />
-            )}
-          </Fieldset>
-        </ArrayItemModal>
-        {!noValuesCommitted && (
-          <TableContainer {...customField.extra?.tableContainer}>
-            <Table
-              ref={ref as LegacyRef<HTMLTableElement>}
-              verticalAlign={customField.extra?.verticalAlign}
-            >
-              {!customField.extra?.noHeader &&
-                !noValuesCommitted &&
-                ofField?.extra &&
-                values?.length > 0 && (
-                  <ArrayItemHeader
-                    labels={
-                      ofField.type === 'object'
-                        ? ofField.extra.fields.map(({ label }) => label.primary)
-                        : [ofField.label.primary]
-                    }
-                    disabled={customField?.editable === false}
-                  />
-                )}
-              <TableBody>
-                {!noValuesCommitted &&
-                  values?.map?.((field, index) => {
-                    return (
-                      <ArrayItemDisplay
-                        key={index}
-                        name={`${name}.${index}`}
-                        index={index}
-                        isFirst={index === 0}
-                        isLast={index === values.length - 1}
-                        data={field}
-                        edit={() => {
-                          setCurrentIndex(index);
-                          open(`modal-${name}`);
-                        }}
-                        stackProps={customField?.extra?.stackProps}
-                        wordBreak={customField?.extra?.wordBreak}
-                        valueDisplay={customField?.extra?.valueDisplay}
-                        remove={() => {
-                          remove(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}
-                      />
-                    );
-                  })}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-        {customField.extra?.editVariant !== 'display' && (
-          <div
-            className={
-              customField.extra?.label.object?.addButtonVariant === 'link'
-                ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400'
-                : ''
-            }
-          >
-            <Button
-              type="button"
-              name={`${name}-add-object`}
-              color="secondary"
-              variant={customField.extra?.label.object?.addButtonVariant}
-              onClick={(ev) => {
-                ev.preventDefault();
-                if (customField?.extra?.of?.type === 'object') {
-                  append({});
-                } else {
-                  append('');
-                }
-                setCurrentIndex(currentLength + 1);
-                setIsAppending(true);
-              }}
-              disabled={
-                customField?.editable === false ||
-                customField.extra?.editVariant === 'noinput' ||
-                fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
-              }
-            >
-              {customField.extra?.label.object?.add}
-            </Button>
-          </div>
-        )}
-      </>
-    );
-  }
-);
-
-export const ArrayItemModal = React.forwardRef(function ArrayItemModal(
-  {
-    type,
-    currentName,
-    title,
-    hint,
-    defaultValue,
-    editOrAppend,
-    cancel,
-    control,
-    addTitle,
-    editLabel,
-    editProps,
-    appendLabel,
-    appendProps,
-    cancelLabel,
-    cancelProps,
-    children,
-    ...props
-  }: {
-    type: 'append' | 'edit';
-    name: string;
-    title?: string;
-    hint?: string;
-    editOrAppend: () => void;
-    cancel: () => void;
-    addTitle?: string;
-    editLabel?: string;
-    editProps?: any;
-    appendLabel?: string;
-    appendProps?: any;
-    cancelLabel?: string;
-    cancelProps?: any;
-    children: React.ReactNode;
-    [key: string]: any;
-  },
-  ref
-) {
-  const value = useWatch({
-    control,
-    name: currentName,
-    defaultValue: defaultValue,
-  });
-  const disabled = value === undefined || value === null || value === '';
-  return (
-    <Modal
-      {...props}
-      ref={ref as LegacyRef<HTMLDivElement>}
-      aria-labelledby="modal-label"
-    >
-      <ModalHeading id="modal-label">
-        {title
-          ? title
-          : type === 'edit'
-            ? 'Επεξεργασία'
-            : addTitle || 'Προσθήκη'}
-      </ModalHeading>
-      <ModalContent>
-        {hint && <Hint>{hint}</Hint>}
-        {children}
-      </ModalContent>
-      <ModalAction>
-        {type === 'edit' ? (
-          <Button
-            color="secondary"
-            {...editProps}
-            type="button"
-            onClick={(e) => {
-              e.preventDefault();
-              editOrAppend();
-            }}
-            disabled={disabled}
-          >
-            {editLabel || 'Αποθήκευση'}
-          </Button>
-        ) : (
-          <Button
-            color="primary"
-            {...appendProps}
-            type="button"
-            onClick={(e) => {
-              e.preventDefault();
-              editOrAppend();
-            }}
-            disabled={disabled}
-          >
-            {appendLabel || 'Προσθήκη'}
-          </Button>
-        )}
-        <Button
-          variant="link"
-          type="button"
-          {...cancelProps}
-          onClick={(e) => {
-            e.preventDefault();
-            cancel();
-          }}
-        >
-          {cancelLabel || 'Ακύρωση'}
-        </Button>
-      </ModalAction>
-    </Modal>
-  );
-});
-
-export const ArrayItemHeader = ({ labels, disabled }) => {
-  return (
-    <TableHead>
-      <TableRow>
-        {labels.map((label, index) => {
-          return <TableHeadCell key={index}>{label}</TableHeadCell>;
-        })}
-        {!disabled && <TableHeadCell>Ενέργειες</TableHeadCell>}
-      </TableRow>
-    </TableHead>
-  );
-};
-
-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',
-  },
-}: {
-  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;
-}) => {
-  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>
-      )}
-    </>
-  );
-};
-
-export default FormDialog;