@digigov/form 2.0.0-85c27c19 → 2.0.0-8e254888

package/src/Field/types.tsx

@@ -3,10 +3,11 @@ import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
 import { ValidatorSchema } from '@digigov/form/validators/types';
 import { GridProps } from '@digigov/ui/layouts/Grid';
 
-export type FieldLabelProps = {
+export interface FieldLabelProps {
   primary?: string;
   secondary?: string;
-};
+  hint?: string;
+}
 
 export interface FieldSpec {
   key: string; // !TODO rename key to name;
@@ -21,6 +22,7 @@ export interface FieldSpec {
     | 'choice:single'
     | 'mobile_phone'
     | 'date'
+    | 'datetime'
     | 'otp'
     | 'afm'
     | 'iban'
@@ -30,15 +32,16 @@ export interface FieldSpec {
     | 'phone_number'
     | 'array'
     | 'object';
+  trim?: boolean;
   component?: any;
+  autoComplete?: string;
   maxLength?: number;
   condition?: Record<string, FieldCondition>;
   controlled?: boolean;
   label?: FieldLabelProps;
-  extra?: {
-    [key: string]: any;
-  };
+  extra?: Record<string, any>;
   editable?: boolean;
+  variant?: 'inline' | 'dialog';
   required?: boolean;
   enabled?: boolean;
   disabled?: boolean;
@@ -77,20 +80,22 @@ export interface FieldConditionalProps {
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 
-export type FieldComponentItem = {
+export interface FieldComponentItem {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: any;
   controlled?: boolean;
   wrapper?: FieldSpec['wrapper'];
-};
+}
 
 export interface FieldContainerProps {
   name?: FieldSpec['key'];
   layout?: FieldSpec['layout'];
   label?: FieldSpec['label'];
   error?: ErrorOption | Record<string, any>;
+  hasError?: boolean;
   children?: React.ReactNode;
   wrapper?: FieldSpec['wrapper'];
 }
@@ -111,6 +116,7 @@ export interface ControlledFieldProps {
   error?: boolean;
   name?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
 }
 
 export interface UncontrolledFieldProps {
@@ -121,6 +127,7 @@ export interface UncontrolledFieldProps {
   extra?: Record<string, never>;
   type?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
 }
 
 export interface CalculatedField extends OmittedFieldSpec {
@@ -137,7 +144,7 @@ export interface FieldBaseProps extends CalculatedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
-  fieldComponent?: React.FC<FieldBaseProps>;
+  Field: React.FC<FieldProps>;
 }
 
 export interface FieldProps extends FieldSpec {

package/src/Field/utils/index.ts

@@ -2,11 +2,12 @@ import { FieldComponentRegistry } from '@digigov/form/Field/types';
 import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
 import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import DateInput from '@digigov/form/inputs/DateInput';
+import DateTimeInput from '@digigov/form/inputs/DateTimeInput';
 import FileInput from '@digigov/form/inputs/FileInput';
 import ImageInput from '@digigov/form/inputs/ImageInput';
 import Input from '@digigov/form/inputs/Input';
 import OtpInput from '@digigov/form/inputs/OtpInput';
-import Radio from '@digigov/form/inputs/Radio';
+import Radio, { ControlledRadioButtonsGroup } from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 
 export const FIELD_COMPONENTS: FieldComponentRegistry = {
@@ -29,6 +30,11 @@ export const FIELD_COMPONENTS: FieldComponentRegistry = {
     controlled: true,
     component: DateInput,
   },
+  datetime: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateTimeInput,
+  },
   otp: {
     wrapper: 'fieldset',
     controlled: true,
@@ -57,3 +63,20 @@ export const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
     wrapper: 'fieldset',
   },
 };
+
+export const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry = {
+  ...FIELD_COMPONENTS,
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: ControlledRadioButtonsGroup,
+  },
+  text: {
+    component: Input,
+    controlled: true,
+  },
+  string: {
+    component: Input,
+    controlled: true,
+  },
+};

package/src/Field/utils/useField.ts

@@ -23,14 +23,18 @@ export const useField = (
     unregister,
     formState,
   } = useContext(FormContext);
-
   if (!registerField) {
     throw new Error(`
       You can't use the Field component without wrapping it in FormBuilder.
       https://devs.pages.grnet.gr/digigov/digigov-sdk/sdk-docs/forms/create-simple-form/
     `);
   }
-
+  let error = errors[name];
+  const nameIndexRegex = name.match(/^(.*?)\.(\d+)$/);
+  if (nameIndexRegex) {
+    const [, fieldArrayName, indexStr] = nameIndexRegex;
+    error = errors[fieldArrayName]?.[Number(indexStr)];
+  }
   useMemo(
     () => customField?.type && registerField({ ...customField, key: name }),
     [customField, name, registerField]
@@ -49,6 +53,6 @@ export const useField = (
     getValues,
     unregister,
     formState,
-    error: errors[name],
+    error,
   };
 };

package/src/FieldArray/FieldArray.stories.js

@@ -5,4 +5,5 @@ export default {
   displayName: 'FieldArray',
 };
 export { Default } from '@digigov/form/FieldArray/__stories__/Default';
+export { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
 export { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';

package/src/FieldArray/FormDialog.tsx

@@ -0,0 +1,378 @@
+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
+}) => {
+  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 === false}
+            />
+          )}
+          <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;

package/src/FieldArray/__stories__/Default.tsx

@@ -15,6 +15,7 @@ const fields = [
   {
     key: 'multiplicity',
     type: 'array',
+    editable: true,
     label: {
       primary: 'Συνυπογράφοντες',
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',

package/src/FieldArray/__stories__/WithExactLength.tsx

@@ -15,6 +15,7 @@ const fields = [
   {
     key: 'multiplicity',
     type: 'array',
+    editable: true,
     label: {
       primary: 'Συνυπογράφοντες',
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',