@digigov/form 2.0.0-13876dba → 2.0.0-16da9467

package/src/Field/FieldBaseContainer.tsx

@@ -1,60 +1,80 @@
-import React from 'react';
+import React, { ComponentRef } from 'react';
 import { FieldContainerProps } from '@digigov/form/Field/types';
 import Label from '@digigov/form/inputs/Label';
 import { ErrorMessage } from '@digigov/react-core/ErrorMessage';
 import FieldContainer from '@digigov/react-core/FieldContainer';
-import CoreFieldset from '@digigov/react-core/Fieldset';
+import Fieldset from '@digigov/react-core/Fieldset';
 import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
-  name,
-  wrapper,
-  label,
-  children,
-  error,
-  hasError,
-  layout,
-}) => {
-  const { t } = useTranslation();
-  const errorMessage = error?.message.key
-    ? error.message.key
-    : error?.message || '';
-  const errorContext = error?.message.context || {};
-  if (wrapper === 'fieldset') {
-    return (
-      <FieldContainer error={hasError} {...layout}>
-        <CoreFieldset>
-          <FieldsetLegend size="sm">{label && label.primary}</FieldsetLegend>
-          {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
-          {error && (
-            <ErrorMessage id={`${name}-error`}>
-              {t(errorMessage, errorContext)}
-            </ErrorMessage>
-          )}
-          {children}
-          {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </CoreFieldset>
-      </FieldContainer>
-    );
-  } else {
-    return (
-      <FieldContainer error={hasError} {...layout}>
-        <LabelContainer>
-          {label && <Label label={label} />}
-          {error && (
-            <ErrorMessage id={`${name}-error`}>
-              {t(errorMessage, errorContext)}
-            </ErrorMessage>
-          )}
-          {children}
-          {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </LabelContainer>
-      </FieldContainer>
-    );
+export const FieldBaseContainer = React.forwardRef<
+  ComponentRef<typeof Fieldset>,
+  FieldContainerProps
+>(
+  (
+    {
+      name,
+      wrapper,
+      label,
+      children,
+      error,
+      hasError,
+      layout,
+      controlled,
+      labelSize = 'sm',
+    },
+    ref
+  ) => {
+    const { t } = useTranslation();
+    const errorMessage = error?.message.key
+      ? error.message.key
+      : error?.message || '';
+    const errorContext = error?.message.context || {};
+    if (wrapper === 'fieldset') {
+      return (
+        <FieldContainer error={hasError} {...layout}>
+          <Fieldset
+            ref={ref}
+            className="outline-none"
+            {...(controlled && {
+              tabIndex: -1,
+            })}
+          >
+            <FieldsetLegend size={labelSize}>
+              {label && label.primary}
+            </FieldsetLegend>
+            {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            {error && (
+              <ErrorMessage id={`${name}-error`}>
+                {t(errorMessage, errorContext)}
+              </ErrorMessage>
+            )}
+            {children}
+            {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
+          </Fieldset>
+        </FieldContainer>
+      );
+    } else {
+      return (
+        <FieldContainer error={hasError} {...layout}>
+          <LabelContainer>
+            {label && <Label label={label} />}
+            {error && (
+              <ErrorMessage id={`${name}-error`}>
+                {t(errorMessage, errorContext)}
+              </ErrorMessage>
+            )}
+            {children}
+            {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
+          </LabelContainer>
+        </FieldContainer>
+      );
+    }
   }
-};
+);
+
+FieldBaseContainer.displayName = 'FieldBaseContainer';
 
 export default FieldBaseContainer;

package/src/Field/FieldConditional.tsx

@@ -13,6 +13,7 @@ const ChildFieldMemo = React.memo(
     field,
     control,
     reset,
+    resetField,
     register,
     error,
     Field,
@@ -27,6 +28,7 @@ const ChildFieldMemo = React.memo(
         Field={Field}
         name={newField.key}
         reset={reset}
+        resetField={resetField}
         control={control}
         register={register}
         error={error}
@@ -54,6 +56,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
   field,
   register,
   reset,
+  resetField,
   error,
   Field,
 }) => {
@@ -76,6 +79,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
       control={control}
       register={register}
       reset={reset}
+      resetField={resetField}
       error={error}
       Field={Field}
     />

package/src/Field/index.tsx

@@ -16,7 +16,6 @@ import FieldArray from '@digigov/form/FieldArray';
 import Multiplicity from '@digigov/form/MultiplicityField';
 export const Field: React.FC<FieldProps> = ({
   name,
-  disabled,
   children,
   ...customField
 }) => {
@@ -25,6 +24,7 @@ export const Field: React.FC<FieldProps> = ({
     control,
     register,
     reset,
+    resetField,
     error,
     componentRegistry,
     formState,
@@ -47,12 +47,12 @@ export const Field: React.FC<FieldProps> = ({
       ),
     [field]
   );
-
   if (calculatedField.condition) {
     return (
       <FieldConditional
         control={control}
         reset={reset}
+        resetField={resetField}
         register={register}
         field={calculatedField as FieldWithCondition}
         error={error}
@@ -68,12 +68,15 @@ export const Field: React.FC<FieldProps> = ({
         trigger={trigger}
         register={register}
         clearErrors={clearErrors}
-        error={error}
+        error={
+          formState.isSubmitted && !formState.isSubmitting ? error : undefined
+        }
         getValues={getValues}
         setValue={setValue}
         formState={formState}
         Field={Field}
         reset={reset}
+        resetField={resetField}
         {...calculatedField}
       />
     );
@@ -94,20 +97,27 @@ export const Field: React.FC<FieldProps> = ({
         setValue={setValue}
         getValues={getValues}
         unregister={unregister}
+        resetField={resetField}
         Field={Field}
         {...calculatedField}
       />
     );
   }
+  const editable =
+    customField.editable === false || customField.disabled === true
+      ? false
+      : true;
+  const customError = error ? error : formState?.errors[name];
   return (
     <FieldBase
       {...calculatedField}
+      editable={editable}
       name={name}
-      disabled={disabled}
       control={control}
       register={register}
       reset={reset}
-      error={error}
+      error={customError}
+      resetField={resetField}
       Field={Field}
     />
   );

package/src/Field/types.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
 import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
 import { GridProps } from '@digigov/ui/layouts/Grid';
 
 export interface FieldLabelProps {
@@ -25,6 +26,7 @@ export interface FieldSpec {
     | 'datetime'
     | 'otp'
     | 'afm'
+    | 'amka'
     | 'iban'
     | 'file'
     | 'image'
@@ -45,7 +47,7 @@ export interface FieldSpec {
   variant?: 'inline' | 'dialog';
   required?: boolean;
   enabled?: boolean;
-  disabled?: boolean;
+  disabled?: boolean; // TODO: keep disabled or editable
   layout?: Record<
     string,
     | GridProps['xs']
@@ -80,6 +82,7 @@ export interface FieldConditionalProps {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   Field: React.FC<FieldProps>;
 }
@@ -93,12 +96,15 @@ export interface FieldComponentItem {
 
 export interface FieldContainerProps {
   name?: FieldSpec['key'];
+  register: FieldBaseProps['register'];
   layout?: FieldSpec['layout'];
   label?: FieldSpec['label'];
   error?: ErrorOption | Record<string, any>;
   hasError?: boolean;
   children?: React.ReactNode;
+  controlled?: boolean;
   wrapper?: FieldSpec['wrapper'];
+  labelSize?: FieldsetLegendProps['size'];
 }
 
 export type FieldComponentRegistry = Record<string, FieldComponentItem>;
@@ -117,7 +123,7 @@ export interface ControlledFieldProps {
   error?: boolean;
   name?: string;
   disabled?: boolean;
-  Field: React.FC<FieldProps>;
+  Field?: React.FC<FieldProps>;
 }
 
 export interface UncontrolledFieldProps {
@@ -145,7 +151,8 @@ export interface FieldBaseProps extends CalculatedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
-  Field: React.FC<FieldProps>;
+  resetField?: UseFormReturn['resetField'];
+  Field?: React.FC<FieldProps>;
 }
 
 export interface FieldProps extends FieldSpec {
@@ -158,6 +165,7 @@ export interface UseFieldProps {
   control: FieldBaseProps['control'];
   register: FieldBaseProps['register'];
   reset: FieldBaseProps['reset'];
+  resetField: FieldBaseProps['resetField'];
   watch: UseFormReturn['watch'];
   formState: UseFormReturn['formState'];
   getFieldState: UseFormReturn['getFieldState'];

package/src/Field/utils/index.ts

@@ -20,10 +20,12 @@ export const FIELD_COMPONENTS: FieldComponentRegistry = {
   file: {
     wrapper: 'fieldset',
     component: FileInput,
+    // controlled: true,
   },
   image: {
     wrapper: 'fieldset',
     component: ImageInput,
+    controlled: true,
   },
   date: {
     wrapper: 'fieldset',

package/src/Field/utils/useField.ts

@@ -11,6 +11,7 @@ export const useField = (
     control,
     register,
     reset,
+    resetField,
     trigger,
     clearErrors,
     errors,
@@ -30,11 +31,17 @@ export const useField = (
     `);
   }
   let error = errors[name];
-  const nameIndexRegex = name.match(/^(.*?)\.(\d+)$/);
+
+  const nameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\]*$/);
   if (nameIndexRegex) {
     const [, fieldArrayName, indexStr] = nameIndexRegex;
     error = errors[fieldArrayName]?.[Number(indexStr)];
   }
+  const nestedNameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\.(.*?)\]*$/);
+  if (nestedNameIndexRegex) {
+    const [, fieldArrayName, indexStr, fieldItemName] = nestedNameIndexRegex;
+    error = errors[fieldArrayName]?.[Number(indexStr)]?.[fieldItemName];
+  }
   useMemo(
     () => customField?.type && registerField({ ...customField, key: name }),
     [customField, name, registerField]
@@ -44,6 +51,7 @@ export const useField = (
     control,
     register,
     reset,
+    resetField,
     trigger,
     watch,
     componentRegistry,