clean array output for all rawValues usage

Author: quentinovega

src/form/arrayStep.tsx

@@ -4,18 +4,19 @@ import classNames from 'classnames';
 import Trash2 from 'react-feather/dist/icons/trash-2.js';
 import { useFormContext, useFieldArray } from "react-hook-form";
 
-import { SchemaEntry } from "./types";
+import { Schema, SchemaEntry } from "./types";
 import { option } from '../Option';
 import { type } from '../type';
-import { defaultVal, getDefaultValues } from './formUtils';
+import { cleanOutputArray, defaultVal, getDefaultValues } from './formUtils';
 
-export const ArrayStep = ({ entry, step, component, disabled, addLabel }:
+export const ArrayStep = ({ entry, step, component, disabled, addLabel, schema }:
   {
     entry: string,
     step: SchemaEntry,
     component: ({ key, defaultValue, value }: { key: string, defaultValue: any, value?: any }, ids: number) => JSX.Element,
     disabled: boolean,
-    addLabel?: string
+    schema: Schema,
+    addLabel?: string,
   }) => {
   const { getValues, setValue, control, trigger, formState } = useFormContext();
 
@@ -45,7 +46,7 @@ export const ArrayStep = ({ entry, step, component, disabled, addLabel }:
                   onClick={() => {
                     remove(idx)
                     option(step.onChange)
-                      .map(onChange => onChange({ rawValues: getValues(), value: getValues(entry), setValue }))
+                      .map(onChange => onChange({ rawValues: cleanOutputArray(getValues(), schema), value: getValues(entry), setValue }))
                     trigger(entry);
                   }}>
                   <Trash2 size={16} />
@@ -62,7 +63,7 @@ export const ArrayStep = ({ entry, step, component, disabled, addLabel }:
             append({ value: step.addableDefaultValue || defaultValues })
             // trigger(entry);
             option(step.onChange)
-              .map(onChange => onChange({ rawValues: getValues(), value: getValues(entry), setValue }))
+              .map(onChange => onChange({ rawValues: cleanOutputArray(getValues(), schema), value: getValues(entry), setValue }))
           }} disabled={disabled}>{addLabel ? addLabel : 'Add'}</button>
       </div>
     </>

src/form/controlledInput.tsx

@@ -8,7 +8,8 @@ import { BasicWrapper } from "./basicWrapper";
 import { option } from '../Option';
 import { type } from '../type';
 import { cleanHash, isDefined } from '../utils';
-import { ConditionnalSchema, Informations, SchemaEntry, SchemaRenderType } from "./types";
+import { ConditionnalSchema, Informations, Schema, SchemaEntry, SchemaRenderType } from "./types";
+import { cleanOutputArray } from "./formUtils";
 
 const CustomizableInput = React.memo(
     (props: {
@@ -46,6 +47,7 @@ interface BaseProps {
     deactivateReactMemo: boolean,
     inputWrapper?: (props: object) => JSX.Element,
     defaultFormValue: any
+    schema: Schema
 }
 
 interface ComponentProps extends BaseProps {
@@ -73,7 +75,7 @@ export const ControlledInput = (inputProps: Props) => {
 
     const functionalProperty = (entry: string, prop: any) => {
         if (typeof prop === 'function') {
-            return prop({ rawValues: getValues(), value: getValues(entry), defaultFormValue, informations, error, getValue: (key: string) => getValues(key) });
+            return prop({ rawValues: cleanOutputArray(getValues(), inputProps.schema), value: getValues(entry), defaultFormValue, informations, error, getValue: (key: string) => getValues(key) });
         } else {
             return prop;
         }
@@ -102,7 +104,7 @@ export const ControlledInput = (inputProps: Props) => {
             })()
             field.onChange(value)
             option(step.onChange)
-                .map(onChange => onChange({ rawValues: getValues(), value, setValue }))
+                .map(onChange => onChange({ rawValues: cleanOutputArray(getValues(), inputProps.schema), value, setValue }))
         },
         value: field.value,
     }
@@ -153,7 +155,7 @@ export const ControlledInput = (inputProps: Props) => {
         <CustomizableInput
             render={step.render}
             step={step}
-            field={{ setValue: (key: string, value: any) => setValue(key, value), rawValues: getValues(), getValue: (key: string) => getValues(key), ...field }}
+            field={{ setValue: (key: string, value: any) => setValue(key, value), rawValues: cleanOutputArray(getValues(), inputProps.schema), getValue: (key: string) => getValues(key), ...field }}
             error={error} errorDisplayed={errorDisplayed}
             informations={informations}
             deactivateReactMemo={deactivateReactMemo}>

src/form/form.tsx

@@ -95,7 +95,7 @@ const FormComponent = <T extends TBaseObject>(props: FormProps<T>, ref: React.Re
   const functionalProperty = <T,>(entry: string, prop: T | ((param: { rawValues: { [x: string]: any }, value: any, informations?: Informations, getValue: (key: string) => any }) => T), informations?: Informations, error?: { [x: string]: any }): T => {
     if (typeof prop === 'function') {
 
-      return (prop as Function)({ rawValues: getValues(), value: getValues(entry), defaultFormValue: value, informations, getValue: (key: string) => getValues(key), error });
+      return (prop as Function)({ rawValues: cleanOutputArray(getValues(), schema), value: getValues(entry), defaultFormValue: value, informations, getValue: (key: string) => getValues(key), error });
     } else {
       return prop;
     }