@digigov/form 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/src/FieldArray/FormDialog.tsx

@@ -1,379 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } 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, ButtonGroup } 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'];
-  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> = ({
-  name,
-  trigger,
-  register,
-  control,
-  formState,
-  error,
-  getValues,
-  Field,
-  reset,
-  ...customField
-}) => {
-  console.log({ customField });
-  const [isAppending, setIsAppending] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const { fields, append, remove, update } = 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);
-  return (
-    <>
-      <ArrayItemModal
-        title={
-          customField.extra?.label.object.title &&
-          `${customField.extra?.label.object.title} ${currentLength + 1}`
-        }
-        hint={customField.label?.secondary}
-        name={name}
-        editOrAppend={async () => {
-          const hasNoErrors = await trigger(
-            customField.extra?.of.extra
-              ? customField.extra?.of.extra.fields.map(
-                  ({ key }) => `${currentName}.${key}`
-                )
-              : currentName
-          );
-          if (hasNoErrors) {
-            const newValues = getValues(currentName);
-            if (isAppending) {
-              setIsAppending(false);
-            }
-            if (customField?.extra?.of?.extra) {
-              update(currentIndex, newValues);
-            } 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}
-        {...registerModal(`modal-${name}`)}
-      >
-        <Fieldset>
-          {customField.extra?.of?.type === 'object' ? (
-            <FieldObject
-              defaultValue={getValues(currentName) || undefined}
-              name={currentName}
-              error={error && error[currentIndex]}
-              formState={formState}
-              register={register}
-              control={control}
-              {...customField.extra?.of}
-              Field={Field}
-            />
-          ) : (
-            <Field
-              name={currentName}
-              {...customField.extra?.of}
-              error={error && error[currentIndex]}
-              key={currentName}
-            />
-          )}
-        </Fieldset>
-      </ArrayItemModal>
-      <TableContainer>
-        <Table>
-          {!customField.extra?.noHeader && customField.extra?.of?.extra && (
-            <ArrayItemHeader
-              labels={customField.extra?.of.extra.fields.map(
-                ({ label }) => label.primary
-              )}
-              disabled={!customField.extra?.editable}
-            />
-          )}
-          <TableBody>
-            {values?.map((field, index) => {
-              return (
-                <ArrayItemDisplay
-                  key={index}
-                  name={`${name}.${index}`}
-                  data={field}
-                  edit={() => {
-                    setCurrentIndex(index);
-                    open(`modal-${name}`);
-                  }}
-                  remove={() => {
-                    remove(index);
-                  }}
-                  disabledEdit={customField.extra?.noEdit ?? false}
-                  disabledDelete={customField.extra?.noDelete ?? false}
-                  disabled={customField.extra?.editable ?? false}
-                />
-              );
-            })}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <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?.extra) {
-              append({});
-            } else {
-              append('');
-            }
-            setCurrentIndex(currentLength + 1);
-            setIsAppending(true);
-          }}
-          disabled={!customField?.editable}
-        >
-          {customField.extra?.label.object?.add}
-        </Button>
-      </div>
-    </>
-  );
-};
-
-export const ArrayItemModal = ({
-  type,
-  name,
-  title,
-  hint,
-  editOrAppend,
-  cancel,
-  editLabel,
-  editProps,
-  appendLabel,
-  appendProps,
-  cancelLabel,
-  cancelProps,
-  children,
-  ...props
-}: {
-  type: 'append' | 'edit';
-  name: string;
-  title?: string;
-  hint?: string;
-  editOrAppend: (name: string) => void;
-  cancel: (name: string) => void;
-  editLabel?: string;
-  editProps?: any;
-  appendLabel?: string;
-  appendProps?: any;
-  cancelLabel?: string;
-  cancelProps?: any;
-  children: React.ReactNode;
-  [key: string]: any;
-}) => {
-  return (
-    <Modal {...props} aria-labelledby="modal-label">
-      <ModalHeading id="modal-label">
-        {title ? title : type === 'edit' ? 'Επεξεργασία' : 'Προσθήκη'}
-      </ModalHeading>
-      <ModalContent>
-        {hint && <Hint>{hint}</Hint>}
-        {children}
-      </ModalContent>
-      <ModalAction>
-        {type === 'edit' ? (
-          <Button
-            color="secondary"
-            {...editProps}
-            onClick={async (e) => {
-              e.preventDefault();
-              editOrAppend(name);
-            }}
-          >
-            {editLabel || 'Αποθήκευση'}
-          </Button>
-        ) : (
-          <Button
-            color="primary"
-            {...appendProps}
-            onClick={async (e) => {
-              e.preventDefault();
-              editOrAppend(name);
-            }}
-          >
-            {appendLabel || 'Προσθήκη'}
-          </Button>
-        )}
-        <Button
-          variant="link"
-          {...cancelProps}
-          onClick={(e) => {
-            e.preventDefault();
-            cancel(name);
-          }}
-        >
-          {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,
-}: {
-  data: any;
-  name: string;
-  edit: (name: string) => void;
-  remove: (name: string) => void;
-  disabledEdit?: boolean;
-  disabledDelete?: boolean;
-  disabled?: boolean;
-}) => {
-  if (
-    Object.keys(data).length === 0 ||
-    (Object.keys(data).length === 1 && data.id)
-  ) {
-    return null;
-  }
-  delete data.id;
-  const values: string[] =
-    typeof data === 'string' ? [data] : Object.values(data);
-  return (
-    <TableRow>
-      {values.map((value, index) => {
-        return <TableDataCell key={index}>{value || ''}</TableDataCell>;
-      })}
-      {disabled === true ||
-      (disabledEdit === true && disabledDelete === true) ? null : (
-        <TableDataCell>
-          <ButtonGroup>
-            {disabledEdit !== true && (
-              <Button
-                variant="link"
-                type="button"
-                onClick={() => {
-                  edit(name);
-                }}
-              >
-                Επεξεργασία
-              </Button>
-            )}
-            {disabledDelete !== true && (
-              <Button variant="link" type="button" onClick={() => remove(name)}>
-                Διαγραφή
-              </Button>
-            )}
-          </ButtonGroup>
-        </TableDataCell>
-      )}
-    </TableRow>
-  );
-};
-
-export default FormDialog;