Pass field meta as the third argument to validators

Author: rvsia

packages/form-state-manager/src/files/compose-validators.ts

@@ -9,12 +9,12 @@ import ComposeValidators from '../types/compose-validators';
  * Synchronous validators are run in synchrounously and sync error is prioritized over async errors.
  * @returns {Function} New validation function
  */
-const composeValidators: ComposeValidators = (validators = []) => (value, allValues) => {
+const composeValidators: ComposeValidators = (validators = []) => (value, allValues, meta) => {
   const promises: Promise<any>[] = [];
   let index = 0;
   let error: any;
   while (validators.length > 0 && !error && index < validators.length) {
-    const result = validators[index](value, allValues);
+    const result = validators[index](value, allValues, meta);
     if (isPromise(result)) {
       promises.push(result as Promise<any>);
     } else {

packages/form-state-manager/src/types/compose-validators.d.ts

@@ -1,5 +1,6 @@
 import { Validator } from './validate';
 import AnyObject from './any-object';
+import { Meta } from './use-field';
 
 export interface WarningObject<T = string | undefined> {
   type: 'warning';
@@ -8,6 +9,6 @@ export interface WarningObject<T = string | undefined> {
 
 export type ComposeValidators<T = WarningObject | string | undefined> = (
   validators: Validator[]
-) => (value: any, allValues: AnyObject) => Promise<T> | T;
+) => (value: any, allValues: AnyObject, meta: Meta) => Promise<T> | T;
 
 export default ComposeValidators;

packages/form-state-manager/src/types/validate.d.ts

@@ -1,19 +1,21 @@
 import AnyObject from './any-object';
 import { ManagerApi } from './manager-api';
+import { Meta } from './use-field';
 
 export interface FormLevelError {
   [key: string]: string;
 }
 
-export type Validator = (value: any, allValues: AnyObject) => undefined | string | Promise<string | undefined>;
+export type Validator = (value: any, allValues: AnyObject, meta: Meta) => undefined | string | Promise<string | undefined>;
 
 export type FormValidator = (allValues: AnyObject) => FormLevelError | Promise<FormLevelError>;
 
 export type FieldLevelValidator = (
   validator: Validator,
   value: any,
   allValues: AnyObject,
-  managerApi: ManagerApi
+  managerApi: ManagerApi,
+  meta: Meta
 ) => string | undefined | Promise<string | undefined>;
 
 export type FormLevelValidator = (validator: FormValidator, allValues: AnyObject, managerApi: ManagerApi) => FormLevelError | Promise<FormLevelError>;

packages/form-state-manager/src/utils/manager-api.ts

@@ -334,7 +334,7 @@ const createManagerApi: CreateManagerApi = ({
         .filter((validator) => validator !== undefined);
 
       if (validators.length > 0) {
-        const result = composeValidators(validators as Validator[])(value, state.values);
+        const result = composeValidators(validators as Validator[])(value, state.values, { ...state.fieldListeners[name].state.meta });
         if (isPromise(result)) {
           handleFieldError(name, true, undefined, true);
           (result as Promise<string | undefined>)

packages/form-state-manager/src/utils/validate.ts

@@ -4,8 +4,8 @@ import { FieldLevelValidator, FormLevelValidator, FormLevelError } from '../type
 export const isPromise = (obj: AnyObject | PromiseLike<unknown> | string | undefined): boolean =>
   !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
 
-export const fieldLevelValidator: FieldLevelValidator = (validator, value, allValues, managerApi) => {
-  const result = validator(value, allValues);
+export const fieldLevelValidator: FieldLevelValidator = (validator, value, allValues, managerApi, meta) => {
+  const result = validator(value, allValues, meta);
   if (isPromise(result)) {
     const asyncResult = result as Promise<string | undefined>;
     managerApi().registerAsyncValidator(asyncResult);

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

@@ -56,106 +56,4 @@ describe('FormRenderer validator', () => {
       wrapper.find('input').simulate('change', { target: { value: VALUE } });
     });
   });
-
-  describe('warning validators', () => {
-    const TextFieldWarning = (props) => {
-      const { input, meta, ...rest } = useFieldApi(props);
-      return (
-        <div>
-          <input {...input} {...rest} />
-          {meta.warning && <div id="warning">{meta.warning}</div>}
-        </div>
-      );
-    };
-
-    let wrapper;
-
-    it('should not convert object validator to warning when warnings are not used', async () => {
-      await act(async () => {
-        wrapper = mount(
-          <FormRenderer
-            FormTemplate={FormTemplate}
-            componentMapper={{
-              [componentTypes.TEXT_FIELD]: TextFieldWarning
-            }}
-            schema={{
-              fields: [{ component: 'text-field', name: NAME, validate: [{ type: 'required', warning: true }] }]
-            }}
-            onSubmit={jest.fn()}
-          />
-        );
-      });
-      wrapper.update();
-
-      expect(wrapper.find('#warning')).toHaveLength(0);
-    });
-
-    it('should convert object validator to warning', async () => {
-      await act(async () => {
-        wrapper = mount(
-          <FormRenderer
-            FormTemplate={FormTemplate}
-            componentMapper={{
-              [componentTypes.TEXT_FIELD]: TextFieldWarning
-            }}
-            schema={{
-              fields: [{ component: 'text-field', name: NAME, validate: [{ type: 'required', warning: true }] }]
-            }}
-            onSubmit={jest.fn()}
-          />
-        );
-      });
-      wrapper.update();
-
-      expect(wrapper.find('#warning').text()).toEqual('Required');
-    });
-
-    it('should convert function validator to warning', async () => {
-      const ERROR = 'SOME-ERROR';
-
-      const customValidator = () => ({ type: 'warning', error: ERROR });
-
-      await act(async () => {
-        wrapper = mount(
-          <FormRenderer
-            FormTemplate={FormTemplate}
-            componentMapper={{
-              [componentTypes.TEXT_FIELD]: TextFieldWarning
-            }}
-            schema={{
-              fields: [{ component: 'text-field', name: NAME, validate: [customValidator] }]
-            }}
-            onSubmit={jest.fn()}
-          />
-        );
-      });
-      wrapper.update();
-
-      expect(wrapper.find('#warning').text()).toEqual(ERROR);
-    });
-
-    it('should convert async function validator to warning', async () => {
-      const ERROR = 'SOME-ERROR';
-
-      const customValidator = () => new Promise((res, rej) => setTimeout(() => rej({ type: 'warning', error: ERROR })));
-
-      await act(async () => {
-        wrapper = mount(
-          <FormRenderer
-            FormTemplate={FormTemplate}
-            componentMapper={{
-              [componentTypes.TEXT_FIELD]: TextFieldWarning
-            }}
-            schema={{
-              fields: [{ component: 'text-field', name: NAME, validate: [customValidator] }]
-            }}
-            onSubmit={jest.fn()}
-          />
-        );
-      });
-      wrapper.update();
-
-      expect(wrapper.find('#warning').text()).toEqual(ERROR);
-    });
-  });
 });