Feature/localization

__tests__/suits/Validator.test.tsx

@@ -149,5 +149,23 @@ describe('test validator', () => {
         await validator.validate();
 
         expect(validator.getErrors()[0]).toBe('Value is false negative required');
-    })
+    });
+
+    it('should change locale if it exists', () => {
+        const messages = {
+            test: {
+                foo: 'bar'
+            }
+        };
+
+        Validator.setLocale('test', messages);
+
+        expect(Validator.getLocale()).toBe('test');
+    });
+
+    it('should default to en if changing to an non-existing locale', () => {
+        Validator.setLocale('not_existing');
+
+        expect(Validator.getLocale()).toBe('en');
+    });
 });

src/LocaleMessages.ts

@@ -0,0 +1,3 @@
+export type LocaleMessages = Record<string, string>;
+
+export type LocaleMessagesMap = Record<string, LocaleMessages>;

src/Validator.ts

@@ -3,13 +3,15 @@ import {
     createIntlCache,
     IntlCache,
     IntlShape
-} from '@formatjs/intl'
+} from '@formatjs/intl';
 import { Rule, RuleFunction, RuleObject } from './Rule';
 import { RuleOptions } from './RuleOptions';
-import { capitalize } from './common/utils';
 import { ValidatorArea } from './components/ValidatorArea';
 import required from './rules/required';
 import { getValue, isCanvasElement } from './common/dom';
+import { LocaleMessagesMap } from './LocaleMessages';
+import { capitalize } from './common/utils';
+import en from './locale/en';
 
 export class Validator {
     public static VALIDATABLE_ELEMENTS: string[] = [
@@ -63,6 +65,16 @@ export class Validator {
      */
     private validationName?: string;
 
+    /**
+     * The active locale
+     */
+    private static locale = 'en';
+
+    /**
+     * Map with messages keyed with locales, containing EN as default
+     */
+    private static messages: LocaleMessagesMap = en;
+
     public constructor(
         elements: HTMLElement[],
         rules: RuleOptions,
@@ -83,7 +95,8 @@ export class Validator {
      */
     private createIntl(): IntlShape<string> {
         return createIntl({
-            locale: 'en'
+            locale: Validator.locale,
+            messages: Validator.messages[Validator.locale]
         }, this.intlCache);
     }
 
@@ -252,4 +265,42 @@ export class Validator {
     public static ruleExists(name: string): boolean {
         return Object.prototype.hasOwnProperty.call(Validator.rules, name);
     }
+
+    public static hasLocale(locale: string): boolean {
+        return !!Object.prototype.hasOwnProperty.call(Validator.messages, locale);
+    }
+
+    /**
+     * Adds a locale map to the messages map, keyed by locale
+     */
+    public static addLocale(messages: LocaleMessagesMap): void {
+        Validator.messages = {
+            ...Validator.messages,
+            ...messages
+        };
+    }
+
+    /**
+     * Sets the given locale for all the new created validator instance or defaults to English if the locale does not
+     * exist
+     */
+    public static setLocale(locale: string, messages?: LocaleMessagesMap): void {
+        if (!messages) {
+            if (Validator.hasLocale(locale)) {
+                Validator.locale = locale;
+            } else {
+                Validator.locale = 'en';
+            }
+        } else {
+            Validator.addLocale(messages);
+            Validator.setLocale(locale);
+        }
+    }
+
+    /**
+     * Gets the current locale of the validator
+     */
+    public static getLocale(): string {
+        return Validator.locale;
+    }
 }

src/locale/en.ts

@@ -0,0 +1,14 @@
+import { LocaleMessagesMap } from '../LocaleMessages';
+
+const en: LocaleMessagesMap = {
+    en: {
+        activeUrl: '{name} is not an active url',
+        checked: '{name} is not checked',
+        max: '{name} should be not greater than {0}',
+        min: '{name} should be at least {0}',
+        regex: '{name} doesn\'t have a valid format',
+        required: '{name} is required'
+    }
+}
+
+export default en;

src/locale/nl.ts

@@ -0,0 +1,15 @@
+import { LocaleMessagesMap } from '../LocaleMessages';
+
+const nl: LocaleMessagesMap = {
+    nl: {
+        activeUrl: '{} is geen actieve URL',
+        checked: '{name} is niet aangevinkt.',
+        max: '{name} max niet meer zijn dan {0}',
+        min: '{name} moet minstens {0} zijn',
+        regex: '{name} heeft geen geldig formaat',
+        required: '{name} is verplicht'
+    }
+}
+
+export default nl;
+

src/rules/activeUrl.ts

@@ -29,6 +29,6 @@ export default {
             .length;
     },
     message(): string {
-        return 'Not an active url'
+        return 'activeUrl';
     }
 }

src/rules/checked.ts

@@ -28,6 +28,6 @@ export default {
         })
     },
     message(): string {
-        return '{name} is not checked.';
+        return 'checked';
     }
 };

src/rules/max.ts

@@ -34,6 +34,6 @@ export default {
         })
     },
     message(): string {
-        return `{name} should be not greater than {0}`
+        return 'max';
     }
 };

src/rules/min.ts

@@ -34,6 +34,6 @@ export default {
         })
     },
     message(): string {
-        return `{name} should be at least {0}`
+        return 'min';
     }
 };

src/rules/regex.ts

@@ -16,6 +16,6 @@ export default {
         })
     },
     message(): string {
-        return '{name} heeft een ongeldig formaat';
+        return 'regex';
     }
 }

src/rules/required.ts

@@ -27,6 +27,6 @@ export default {
     },
 
     message(): string {
-        return `{name} is required`;
+        return 'required';
     }
 };