FIX #96

README.md

@@ -207,6 +207,7 @@ export const Example = () => {
   }
   ```
 - **constraints**: a JSON array of constraints. see [constraints section](#constraints)
+- **arrayConstraints**: a JSON array of constraints apply to the entire array (use constraints to apply constraints to inner fileds of array). see [constraints section](#constraints)
 - **deps**: In case of the entry need some form values, thestepwill be re-render after all change. To avoid some perf issues, it would be nice to declare a deps array to listen. The array must contains the root path
   ```javascript
   const schema = {

src/form/arrayStep.tsx

@@ -57,7 +57,6 @@ export const ArrayStep = ({ entry, step, component, disabled, addLabel }:
           option(step.onChange)
             .map(onChange => onChange({ rawValues: getValues(), value: getValues(entry), setValue }))
         }} disabled={disabled}>{addLabel ? addLabel : 'Add'}</button>
-        {error && <div className="mrf-invalid-feedback">{error.message}</div>}
       </div>
     </>
   )

src/form/types.ts

@@ -81,6 +81,7 @@ export interface SchemaEntry {
   transformer?: ((v: any) => SelectOption) | { label: string, value: string };
   conditionalSchema?: ConditionnalSchema;
   constraints?: Array<Constraint | { type: TConstraintType, message?: string }>;
+  arrayConstraints?: Array<Constraint | { type: TConstraintType, message?: string }>;
   flow?: Array<string | FlowObject>;
   onAfterChange?: (obj: { entry: string, value: object, rawValues: object, previousValue?: object, getValue: (entry: string) => any, setValue: (entry: string, value: any) => void, onChange: (v: any) => void, reset: (v: any) => void, informations?: Informations }) => void;
   visibleOnCollapse?: boolean;

src/resolvers/utils.ts

@@ -8,7 +8,7 @@ import { ObjectShape } from 'yup/lib/object';
 const resolvers = {
   [type.string]: (typeErrorMessage?: string) => yup.string().nullable().optional().typeError(typeErrorMessage || 'Value must be a string'),
   [type.number]: (typeErrorMessage?: string) => yup.number().nullable().optional()
-    .transform(v => { return isNaN(v) ? null : v})
+    .transform(v => { return isNaN(v) ? null : v })
     .typeError(typeErrorMessage || 'Value must be a number'),
   [type.bool]: () => yup.bool().nullable().optional(),
   [type.object]: () => yup.object().nullable().optional(),
@@ -17,28 +17,31 @@ const resolvers = {
   [type.json]: () => yup.mixed()
 }
 
-export const buildSubResolver = (props: SchemaEntry, key: string, dependencies: Array<[string, string]>, rawValues: {[x: string]: any}): yup.AnySchema => {
+export const buildSubResolver = (props: SchemaEntry, key: string, dependencies: Array<[string, string]>, rawValues: { [x: string]: any }): yup.AnySchema => {
   const { constraints = [] } = props;
   if (props.array || props.isMulti) {
     let subResolver;
     let arrayResolver = yup.array()
 
     if (props.schema) {
-      const deps:Array<[string, string]> = [];
+      const deps: Array<[string, string]> = [];
       subResolver = yup.object().shape(getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, deps, rawValues).shape, deps);
       arrayResolver = arrayResolver.of(yup.object().shape({ value: subResolver }))
+    } else if (props.constraints?.length) {
+      subResolver = props.constraints.reduce((resolver, constraint) => {
+        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies)
+      }, resolvers[props.type]())
+
+      arrayResolver = arrayResolver.of(yup.object().shape({value: subResolver}))
     }
-    // todo: https://github.com/MAIF/react-forms/issues/96
-    // if (props.item?.constraints) {
-    //   subResolver = item?.constraints.reduce((resolver, constraint) => {
-    //     return jsonOrFunctionConstraint(constraint, resolver, key, dependencies)
-    //   }, resolvers[props.type]())
-
-    //   arrayResolver = arrayResolver.of(subResolver)   
-    // }
-    return constraints.reduce((resolver, constraint) => {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies)
-    }, arrayResolver)
+
+    if (props.arrayConstraints?.length) {
+      arrayResolver = props.arrayConstraints.reduce((resolver, constraint) => {
+        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies)
+      }, arrayResolver)
+    }
+
+    return arrayResolver
   } else if (props.type === type.object && props.schema) {
     if (!Object.keys(props.schema).length) {
       return yup.object()
@@ -62,10 +65,10 @@ export const buildSubResolver = (props: SchemaEntry, key: string, dependencies:
 
         return option(filterSwitch)
           .orElse(condiSchema.switch.find(s => s.default))
-          .getOrElse({schema: {}, flow: []})
-          
+          .getOrElse({ schema: {}, flow: [] })
+
       })
-      .getOrElse({schema: {}, flow: []})
+      .getOrElse({ schema: {}, flow: [] })
 
     const realFlow = flow || Object.keys(schema)
     const subResolver = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawValues);
@@ -79,7 +82,7 @@ export const buildSubResolver = (props: SchemaEntry, key: string, dependencies:
   }
 }
 
-const jsonOrFunctionConstraint = (constraint: Constraint | {type: TConstraintType}, resolver: yup.AnySchema, key: string, dependencies: Array<[string, string]>) => {
+const jsonOrFunctionConstraint = (constraint: Constraint | { type: TConstraintType }, resolver: yup.AnySchema, key: string, dependencies: Array<[string, string]>) => {
   if (typeof constraint === 'function') {
     return constraint(resolver, key, dependencies)
   } else {
@@ -88,7 +91,7 @@ const jsonOrFunctionConstraint = (constraint: Constraint | {type: TConstraintTyp
   }
 }
 
-export const getShapeAndDependencies = (flow: Flow, schema: Schema, dependencies:Array<[string, string]> = [], rawData: object = {}): {shape: ObjectShape, dependencies: Array<[string, string]>} => {
+export const getShapeAndDependencies = (flow: Flow, schema: Schema, dependencies: Array<[string, string]> = [], rawData: object = {}): { shape: ObjectShape, dependencies: Array<[string, string]> } => {
   if (!Object.keys(schema).length) {
     return { shape: {}, dependencies }
   }