Merge pull request #568 from rvsia/fixValidatorFunc

fix(renderer): memoize do not pass all arguments

Author: Hyperkid123

packages/react-form-renderer/src/files/compose-validators.js

@@ -1,14 +1,17 @@
-const composeValidators = (validators = []) => (value, allValues) => {
+const composeValidators = (validators = []) => (value, allValues, meta) => {
   const [initialValidator, ...sequenceValidators] = validators;
-  const resolveValidator = (error, validator) => error || (typeof validator === 'function' ? validator(value, allValues) : undefined);
+  const resolveValidator = (error, validator) => error || (typeof validator === 'function' ? validator(value, allValues, meta) : undefined);
   if (initialValidator && typeof initialValidator === 'function') {
-    const result = initialValidator(value, allValues);
+    const result = initialValidator(value, allValues, meta);
     if (result && result.then) {
       return result.then(() => sequenceValidators.reduce(resolveValidator, undefined)).catch((error) => error);
     }
   }
 
-  return validators.reduce((error, validator) => error || (typeof validator === 'function' ? validator(value, allValues) : undefined), undefined);
+  return validators.reduce(
+    (error, validator) => error || (typeof validator === 'function' ? validator(value, allValues, meta) : undefined),
+    undefined
+  );
 };
 
 export default composeValidators;

packages/react-form-renderer/src/files/validators.d.ts

@@ -3,7 +3,7 @@ import { AnyObject } from './common';
 
 export type DataTypeValidators = "string" | "integer" | "boolean" | "number" | "float";
 
-export type ValidatorFunction = (value: any, allValues?: object) => Promise<any> | ReactNode | undefined;
+export type ValidatorFunction = (value: any, allValues?: object, meta?: object) => Promise<any> | ReactNode | undefined;
 
 export interface ValidatorConfiguration extends AnyObject {
   type: string;

packages/react-form-renderer/src/tests/form-renderer/validator.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import FormRenderer from '../../files/form-renderer';
+import componentTypes from '../../files/component-types';
+import FormTemplate from '../../../../../__mocks__/mock-form-template';
+import useFieldApi from '../../files/use-field-api';
+import { act } from 'react-dom/test-utils';
+
+describe('FormRenderer validator', () => {
+  const TextField = (props) => {
+    const { input, meta, ...rest } = useFieldApi(props);
+    return (
+      <div>
+        <input {...input} {...rest} />
+        {meta.error && <div id="error">{meta.error}</div>}
+      </div>
+    );
+  };
+
+  it('pass value, allvalues, meta to custom validator func', async () => {
+    expect.assertions(3);
+
+    const VALUE = 'some-value';
+    const NAME = 'field1';
+    const META = expect.any(Object);
+
+    const validator = (value, allValues, meta) => {
+      if (value) {
+        //skip initial validation
+        expect(value).toEqual(VALUE);
+        expect(allValues).toEqual({
+          other: '111',
+          [NAME]: VALUE
+        });
+        expect(meta).toEqual(META);
+      }
+    };
+
+    const wrapper = mount(
+      <FormRenderer
+        FormTemplate={(props) => <FormTemplate {...props} />}
+        componentMapper={{
+          [componentTypes.TEXT_FIELD]: TextField
+        }}
+        schema={{
+          fields: [{ component: 'text-field', name: NAME, validate: [validator] }]
+        }}
+        onSubmit={jest.fn()}
+        initialValues={{ other: '111' }}
+      />
+    );
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: VALUE } });
+    });
+  });
+});

packages/react-form-renderer/src/validators/helpers.d.ts

@@ -1,6 +1,5 @@
 import { ValidatorFunction } from "../files/validators";
 import { ReactNode } from "react";
-import { ValidatorType } from "../files/use-field-api";
 import { MessageTypes } from "./messages";
 
 // tslint:disable-next-line: ban-types

packages/react-form-renderer/src/validators/helpers.js

@@ -30,9 +30,9 @@ export const memoize = (func) => {
     func.cache = {};
   }
 
-  return (options) => {
-    const key = stringify(options);
-    return HAS_PROP.call(func.cache, key) ? func.cache[key] : (func.cache[key] = func(options));
+  return (value, allValues, ...options) => {
+    const key = stringify(value, allValues);
+    return HAS_PROP.call(func.cache, key) ? func.cache[key] : (func.cache[key] = func(value, allValues, ...options));
   };
 };
 

packages/react-renderer-demo/src/pages/renderer/validators.md

@@ -37,7 +37,7 @@ As validator you can provide your custom function:
 
 <CodeExample mode="preview" source="components/validators/custom-function" />
 
-The function takes `value` as an argument and should return undefined when pasess or string as an error message when fails.
+Please see [final form validate prop](https://final-form.org/docs/react-final-form/types/FieldProps#validate). This function takes `value`, `allValues` and `meta` as arguments and returns error message when it fails, otherwise it returns undefined.
 
 ## Async validator