From 5f1a94052c15d054080e49dd45462279675d1704 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sat, 26 Sep 2020 16:02:08 +0200
Subject: [PATCH 1/5] Added access to validator, area and provider (when used)
 within validation rules

---
 __tests__/Area.test.tsx              | 128 +++++++++++++++++++++++++++
 __tests__/Validator.test.tsx         |  17 +++-
 src/Rule.ts                          |  15 +++-
 src/Validator.ts                     |  40 +++++++--
 src/ValidatorContext.ts              |   5 +-
 src/components/ValidatorArea.tsx     |  43 ++++++---
 src/components/ValidatorProvider.tsx |  22 ++++-
 7 files changed, 249 insertions(+), 21 deletions(-)

diff --git a/__tests__/Area.test.tsx b/__tests__/Area.test.tsx
index d69e904..814840a 100644
--- a/__tests__/Area.test.tsx
+++ b/__tests__/Area.test.tsx
@@ -2,6 +2,14 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Validator } from '@/Validator';
 import { ValidatorArea, ValidatorAreaProps } from '@/components/ValidatorArea';
+import ValidatorProvider, { ValidatorProviderProps } from '@/components/ValidatorProvider';
+import { ProviderScope } from '@/ProviderScope';
+
+const tick = () => {
+    return new Promise(resolve => {
+        setTimeout(resolve, 0);
+    })
+}
 
 describe('test ValidatorProvider', () => {
     beforeEach(() => {
@@ -111,4 +119,124 @@ describe('test ValidatorProvider', () => {
         area.find('input').simulate('blur');
         expect(mockFn).toBeCalled();
     });
+
+    it('should get all input refs from the provider', async () => {
+        Validator.extend('test_all', (validator: Validator) => ({
+            passed(): boolean {
+                return validator.refs().length === 2;
+            },
+            message(): string {
+                return 'test';
+            }
+        }))
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider rules="test_all">
+                {({ validate }: ProviderScope) => (
+                    <>
+                        <ValidatorArea name="test1">
+                            <input value="" />
+                        </ValidatorArea>
+                        <ValidatorArea>
+                            <input value="" name="test2" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).toHaveBeenCalled()
+    });
+
+    it('should get spcific input refs from the provider', async () => {
+        Validator.extend('test_specific', (validator: Validator) => ({
+            passed(): boolean {
+                return validator.refs('test1').length === 2
+                && validator.refs('test2').length === 1;
+            },
+            message(): string {
+                return 'test';
+            }
+        }))
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider rules="test_specific">
+                {({ validate }: ProviderScope) => (
+                    <>
+                        <ValidatorArea name="test1">
+                            <input value="" />
+                            <input value="" />
+                        </ValidatorArea>
+                        <ValidatorArea>
+                            <input value="" name="test2" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).toHaveBeenCalled()
+    });
+
+    it('should return empty array when undefined area name is fetched', async () => {
+        Validator.extend('test_not_existing', (validator: Validator) => ({
+            passed(): boolean {
+                return validator.refs('not_existing').length === 0;
+            },
+            message(): string {
+                return 'test';
+            }
+        }))
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider rules="test_not_existing">
+                {({ validate }: ProviderScope) => (
+                    <>
+                        <ValidatorArea name="test1">
+                            <input value="" />
+                        </ValidatorArea>
+                        <ValidatorArea>
+                            <input value="" name="test2" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).toHaveBeenCalled();
+    });
+
+    it('should not be able to get all refs when not wrapped in provider', () => {
+        Validator.extend('no_other_areas', (validator: Validator) => ({
+            passed(): boolean {
+                return validator.refs('not_existing').length === 0
+                    && validator.refs().length === 0;
+            },
+            message(): string {
+                return 'test';
+            }
+        }))
+        const mockFn = jest.fn();
+
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules="no_other_areas">
+                <input name="test" onBlur={mockFn} />
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(mockFn).toBeCalled();
+    });
 })
diff --git a/__tests__/Validator.test.tsx b/__tests__/Validator.test.tsx
index 548ea1d..16a4c52 100644
--- a/__tests__/Validator.test.tsx
+++ b/__tests__/Validator.test.tsx
@@ -1,5 +1,5 @@
 import { Rule } from '../src/Rule';
-import { Validator } from '../src';
+import { Validator } from '@/Validator';
 
 describe('test validator', () => {
     beforeEach(() => {
@@ -103,5 +103,20 @@ describe('test validator', () => {
     it('should merge rules', () => {
         const rules = Validator.mergeRules(['rule_one', 'rule_two'], 'rule_tree|rule_four', ['rule_five|rule_six']);
         expect(rules.length).toBe(6);
+    });
+
+    it('should throw an error when trying to get area when not in area', () => {
+        const throws = () => {
+            const validator = new Validator(
+                [
+                    document.createElement<'input'>('input')
+                ],
+                [],
+                'test'
+            );
+            validator.getArea();
+        }
+
+        expect(() => throws()).toThrowError('Areas are only available when validating React components.')
     })
 });
diff --git a/src/Rule.ts b/src/Rule.ts
index 6ea1920..5bb6d0a 100644
--- a/src/Rule.ts
+++ b/src/Rule.ts
@@ -1,6 +1,15 @@
-import { ValidationElement } from './ValidationElement';
+import { Validator } from '@/Validator';
+import { ValidationElement } from '@/ValidationElement';
 
-export type Rule = {
+/**
+ * Function to access validator using the rule
+ */
+export type RuleFunction = (validator: Validator) => RuleObject;
+
+/**
+ * Object structure rules must implement
+ */
+export type RuleObject = {
     /**
      * Returns whether the rule passed with the given element(s)
      */
@@ -10,3 +19,5 @@ export type Rule = {
      */
     message(): string;
 }
+
+export type Rule = RuleObject | RuleFunction;
diff --git a/src/Validator.ts b/src/Validator.ts
index c5ded9f..5c692f3 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -4,10 +4,11 @@ import {
     IntlCache,
     IntlShape
 } from '@formatjs/intl'
-import { Rule } from './Rule';
+import { Rule, RuleFunction, RuleObject } from '@/Rule';
 import { ValidationElement } from '@/ValidationElement';
 import { RuleOptions } from '@/RuleOptions';
 import { capitalize } from '@/utils/utils';
+import { ValidatorArea } from '@/components/ValidatorArea';
 
 export class Validator {
     /**
@@ -18,12 +19,12 @@ export class Validator {
     /**
      * The elements to be validated
      */
-    private readonly elements: ValidationElement[];
+    private elements: ValidationElement[] = [];
 
     /**
      * The rules to validate the elements with
      */
-    private readonly validationRules: RuleOptions;
+    private validationRules: RuleOptions = [];
 
     /**
      * Validation errors when elements are invalid
@@ -33,7 +34,7 @@ export class Validator {
     /**
      * Name used to specify error messages
      */
-    private readonly name: string | null;
+    private name: string | null = null;
 
     /**
      * Intl cache to prevent memory leaks
@@ -45,6 +46,8 @@ export class Validator {
      */
     private intl: IntlShape<string>;
 
+    private area?: ValidatorArea;
+
     public constructor(
         elements: ValidationElement[],
         rules: RuleOptions,
@@ -86,13 +89,22 @@ export class Validator {
             .length;
     }
 
+    /**
+     * Indicated whether a given rule name is a rule function
+     */
+    private static isRuleFunction(rule: string): boolean {
+        return typeof Validator.rules[rule] === 'function';
+    }
+
     /**
      * Validate a specific rule
      */
     private validateRule(rule: string): boolean {
         const [ruleName, ruleArgs = ''] = rule.split(':');
         if (Validator.hasRule(ruleName)) {
-            const ruleObj = Validator.rules[ruleName];
+            const ruleObj: RuleObject = Validator.isRuleFunction(ruleName)
+                ? (Validator.rules[ruleName] as RuleFunction)(this) : Validator.rules[ruleName] as RuleObject;
+
             const ruleArgsArray = ruleArgs.split(',');
 
             if(!ruleObj.passed(this.elements, ...ruleArgsArray)) {
@@ -126,6 +138,24 @@ export class Validator {
         return this.errors;
     }
 
+    public setArea(area: ValidatorArea): Validator {
+        this.area = area;
+
+        return this;
+    }
+
+    public getArea(): ValidatorArea {
+        if (this.area) {
+            return this.area;
+        }
+
+        throw new Error('Areas are only available when validating React components.');
+    }
+
+    public refs(name?: string): ValidationElement[] {
+        return this.getArea().context.getRefs(name);
+    }
+
     /**
      * Merges rules from different sources into one array
      */
diff --git a/src/ValidatorContext.ts b/src/ValidatorContext.ts
index 509e32f..b945968 100644
--- a/src/ValidatorContext.ts
+++ b/src/ValidatorContext.ts
@@ -1,13 +1,16 @@
 import React from 'react';
 import { RuleOptions } from '@/RuleOptions';
 import { ValidatorArea } from '@/components/ValidatorArea';
+import { ValidationElement } from '@/ValidationElement';
 
 export interface ValidatorContextProps {
     rules: RuleOptions;
     addArea: (name: string, ref: ValidatorArea) => void;
+    getRefs: (name?: string) => ValidationElement[];
 }
 
 export const ValidatorContext = React.createContext<ValidatorContextProps>({
     rules: [],
-    addArea: () => undefined
+    addArea: () => undefined,
+    getRefs: () => []
 });
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 7260104..1513b32 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -26,19 +26,49 @@ interface ValidatorAreaComponentsProps {
 }
 
 export class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaState> {
+    /**
+     * @inheritDoc
+     */
     public static contextType = ValidatorContext;
+
+    /**
+     * @inheritDoc
+     */
     public context!: React.ContextType<typeof ValidatorContext>;
+
+    /**
+     * References to elements within the area to be validated
+     */
     private inputRefs: ValidationElement[] = [];
+
+    /**
+     * Indicates whether the area is dirty
+     */
     private dirty = false;
 
+    /**
+     * @inheritDoc
+     */
     public readonly state: ValidatorAreaState = {
         errors: []
     }
 
+    /**
+     * Default props when not provided in the component
+     */
     public static defaultProps: Partial<ValidatorAreaProps> = {
         rules: []
     }
 
+    /**
+     * @inheritDoc
+     */
+    public componentDidMount(): void {
+        const { addArea } = this.context;
+
+        addArea(this.getName(), this);
+    }
+
     /**
      * Validate the area, or a given element when provided
      */
@@ -58,6 +88,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     rules,
                     ref ? ref.getAttribute('name') : this.getName()
                 );
+                validator.setArea(this);
 
                 this.dirty = !validator.validate();
 
@@ -74,15 +105,6 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
         })
     }
 
-    /**
-     * @inheritDoc
-     */
-    public componentDidMount(): void {
-        const { addArea } = this.context;
-
-        addArea(this.getName(), this);
-    }
-
     private getName(): string {
         if (this.inputRefs.length === 1 && this.inputRefs[0].getAttribute('name')) {
             return this.inputRefs[0].getAttribute('name') as string;
@@ -135,7 +157,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                                 this.validate(ref);
                             },
                             ref: (node: ValidationElement) => {
-                                if (node) {
+                                if (node && !this.inputRefs.includes(node)) {
                                     ref = node;
                                     this.inputRefs.push(ref);
                                 }
@@ -172,7 +194,6 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      */
     public render(): React.ReactNode {
         let { children } = this.props;
-        this.inputRefs = [];
 
         if (typeof children === 'function') {
             children = (children as (scope: AreaScope) => React.ReactNode)(
diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index ab3f74e..aa58a1c 100644
--- a/src/components/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -4,6 +4,7 @@ import { RuleOptions } from '@/RuleOptions';
 import { ProviderScope } from '@/ProviderScope';
 import { ValidatorContext } from '@/ValidatorContext';
 import { ValidatorArea } from '@/components/ValidatorArea';
+import { ValidationElement } from '@/ValidationElement';
 
 export interface ValidatorProviderProps {
     rules?: RuleOptions;
@@ -63,6 +64,24 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
         };
     }
 
+    private getRefs(name?: string): ValidationElement[] {
+        const refs: ValidationElement[] = [];
+
+        if (name && Object.prototype.hasOwnProperty.call(this.state.areas, name)) {
+            this.state.areas[name].getInputRefs().forEach((ref: ValidationElement) => {
+                refs.push(ref);
+            })
+        } else if (name === undefined) {
+            Object.values(this.state.areas).forEach((area: ValidatorArea) => {
+                area.getInputRefs().forEach((ref) => {
+                    refs.push(ref);
+                });
+            });
+        }
+
+        return refs;
+    }
+
     /**
      * @inheritDoc
      */
@@ -85,7 +104,8 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
             <ValidatorContext.Provider
                 value={{
                     rules: rules || [],
-                    addArea: (name: string, ref: ValidatorArea): void => this.addArea(name, ref)
+                    addArea: (name: string, ref: ValidatorArea): void => this.addArea(name, ref),
+                    getRefs: (name?: string) => this.getRefs(name)
                 }}
             >
                 {children}

From 2e4e7e3606450c380255d27a184035eff75896fd Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sat, 26 Sep 2020 16:35:33 +0200
Subject: [PATCH 2/5] Added missing doc

---
 src/components/ValidatorProvider.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index aa58a1c..46aee72 100644
--- a/src/components/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -64,6 +64,9 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
         };
     }
 
+    /**
+     * Returns an array of input refs, either all or for a specific area
+     */
     private getRefs(name?: string): ValidationElement[] {
         const refs: ValidationElement[] = [];
 

From 0683e51e105d3e20d97e1d51020fcb26f7ee6166 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sat, 26 Sep 2020 16:39:13 +0200
Subject: [PATCH 3/5] Minor fixes

---
 src/Validator.ts                     | 15 ++++++++++++---
 src/components/ValidatorProvider.tsx |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/Validator.ts b/src/Validator.ts
index 5c692f3..9c2f6bc 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -19,12 +19,12 @@ export class Validator {
     /**
      * The elements to be validated
      */
-    private elements: ValidationElement[] = [];
+    private readonly elements: ValidationElement[] = [];
 
     /**
      * The rules to validate the elements with
      */
-    private validationRules: RuleOptions = [];
+    private readonly validationRules: RuleOptions = [];
 
     /**
      * Validation errors when elements are invalid
@@ -34,7 +34,7 @@ export class Validator {
     /**
      * Name used to specify error messages
      */
-    private name: string | null = null;
+    private readonly name: string | null = null;
 
     /**
      * Intl cache to prevent memory leaks
@@ -138,12 +138,18 @@ export class Validator {
         return this.errors;
     }
 
+    /**
+     * Sets the current area
+     */
     public setArea(area: ValidatorArea): Validator {
         this.area = area;
 
         return this;
     }
 
+    /**
+     * Gets the area where this validator instance is used
+     */
     public getArea(): ValidatorArea {
         if (this.area) {
             return this.area;
@@ -152,6 +158,9 @@ export class Validator {
         throw new Error('Areas are only available when validating React components.');
     }
 
+    /**
+     * Gets a list of validation element refs, optionally specified by area name
+     */
     public refs(name?: string): ValidationElement[] {
         return this.getArea().context.getRefs(name);
     }
diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index 46aee72..43b4334 100644
--- a/src/components/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -65,7 +65,7 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
     }
 
     /**
-     * Returns an array of input refs, either all or for a specific area
+     * Gets a list of validation element refs, optionally specified by area name
      */
     private getRefs(name?: string): ValidationElement[] {
         const refs: ValidationElement[] = [];

From 6b9f0e487088cde52a0d243ee90185483e63a871 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sat, 26 Sep 2020 20:07:34 +0200
Subject: [PATCH 4/5] Unneeded initial value fixes

---
 src/Validator.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Validator.ts b/src/Validator.ts
index 9c2f6bc..49e0de6 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -19,12 +19,12 @@ export class Validator {
     /**
      * The elements to be validated
      */
-    private readonly elements: ValidationElement[] = [];
+    private readonly elements: ValidationElement[];
 
     /**
      * The rules to validate the elements with
      */
-    private readonly validationRules: RuleOptions = [];
+    private readonly validationRules: RuleOptions;
 
     /**
      * Validation errors when elements are invalid
@@ -34,7 +34,7 @@ export class Validator {
     /**
      * Name used to specify error messages
      */
-    private readonly name: string | null = null;
+    private readonly name: string;
 
     /**
      * Intl cache to prevent memory leaks
@@ -46,12 +46,15 @@ export class Validator {
      */
     private intl: IntlShape<string>;
 
+    /**
+     * Validator area used to access other areas and the provider
+     */
     private area?: ValidatorArea;
 
     public constructor(
         elements: ValidationElement[],
         rules: RuleOptions,
-        name: string | null,
+        name: string,
     ) {
         this.elements = elements;
         this.validationRules = rules;

From e580f4fc226f5c7d9cd386e38d754b3945efb272 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sat, 26 Sep 2020 20:22:42 +0200
Subject: [PATCH 5/5] Re-added missing null type for name

---
 src/Validator.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Validator.ts b/src/Validator.ts
index 49e0de6..e6f1a17 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -34,7 +34,7 @@ export class Validator {
     /**
      * Name used to specify error messages
      */
-    private readonly name: string;
+    private readonly name: string | null;
 
     /**
      * Intl cache to prevent memory leaks
@@ -54,7 +54,7 @@ export class Validator {
     public constructor(
         elements: ValidationElement[],
         rules: RuleOptions,
-        name: string,
+        name: string | null,
     ) {
         this.elements = elements;
         this.validationRules = rules;