1.2.0 (dockwa#102) Localization and Typescript

* first stab at multilang support in seperate files

* folder typo

* replace en with fr since en is default

* correct module return

* readme

* will be on master

* spanish support and template example

* camelCase return name

* /min directory in /locale

* version bump

* example to add later

* add link to message option

* words

* template

* feat(ts definition): init

* update index.d.ts

Author: stuyam

License

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2018 Dockwa.
+Copyright (c) 2019 Dockwa.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -24,6 +24,12 @@ Simple React Validator is exactly as it sounds. We wanted to build a validator f
 2. [Setup](#3-easy-steps)
 3. [Rules](#rules)
 4. [Options](#options)
+    1. [Element](#1-element)
+    2. [Class Name](#2-classname)
+    3. [Messages](#3-messages)
+    4. [Validators](#4-validators)
+    5. [Auto Force Update](#5-autoforceupdate)
+    6. [Localization](#6-locale)
 5. [Custom Validators](#custom-validators)
 
 # Usage
@@ -352,7 +358,8 @@ Must be a valid url. Ex. https://dockwa.com or dockwa.com
 
 # Options
 The Simple React Validator can receive an options object when initialized or as the fourth parameter when defining a validator. There are 4 options you can provide.
-1. element: Accepts a block where you can return the default element that you want to wrap the message from a validator message. The default element is `<div className="srv-validation-message">{message}</div>`. If you are using React Native the default will be just the message the gets returned. You can also set `element: false` to just return a message.
+#### 1. element:
+Accepts a block where you can return the default element that you want to wrap the message from a validator message. The default element is `<div className="srv-validation-message">{message}</div>`. If you are using React Native the default will be just the message the gets returned. You can also set `element: false` to just return a message.
   * **Takes 2 params**
   * message: The message coming from the validator.
   * className (optional): Will optionally be provided so you can change the className on a per validation basis.
@@ -361,21 +368,40 @@ this.validator = new SimpleReactValidator({
   element: message => <div>{message}</div>
   // OR
   element: (message, className) => <div className={className}>{message}</div>
-}
+})
 ```
-2. className: String of classes to be passed into an element, default is `srv-validation-message` and can be overriden.
-3. messages: Accepts an object to override validation messages. It also accepts a default which will override all messages.
+#### 2. className:
+String of classes to be passed into an element, default is `srv-validation-message` and can be overriden.
+#### 3. messages:
+Accepts an object to override validation messages. It also accepts a default which will override all messages.
 ```jsx
 this.validator = new SimpleReactValidator({
   messages: {
     email: 'That is not an email.'
     // OR
     default: 'Validation has failed!'  // will override all messages
   },
-}
+})
+```
+#### 4. validators:
+Accepts an object of custom validators. See [Custom Validators](#customvalidators) for more info on defining custom validators.
+#### 5. autoForceUpdate:
+Accepts a react instance and will automatically be called when messages are shown and hidden automatically. [More on autoForceUpdate](#note-autoforceupdate)
+#### 6. locale:
+Accepts a string with the localized messages of your choice. **For this to work, the correct language file also needs to be loaded into your front end.** [Current Supported Languages](https://github.com/dockwa/simple-react-validator/tree/master/src/locale). To contribute to translating the project use [this file as a template.](https://github.com/dockwa/simple-react-validator/blob/master/src/locale/template-en.js)
+```jsx
+// sets french default validation messages.
+this.validator = new SimpleReactValidator({locale: 'fr'});
+```
+You can apply custom messages with the [messages](#3-messages) option. However you can also apply a custom language that you can later select with the `addLocale` class method.
+```jsx
+SimpleReactValidator.addLocale('klingon', {
+  accepted: 'Hab SoSlI’ Quch!',
+  email: 'Heghlu’meH QaQ jajvam'
+});
+...
+this.validator = new SimpleReactValidator({locale: 'klingon'});
 ```
-4. validators: Accepts an object of custom validators. See [Custom Validators](#customvalidators) for more info on defining custom validators.
-5. autoForceUpdate: Accepts a react instance and will automatically be called when messages are shown and hidden automatically. [More on autoForceUpdate](#note-autoforceupdate)
 
 
 # Custom Validators

bower.json

@@ -2,7 +2,7 @@
   "name": "simple-react-validator",
   "description": "A simple react form validator inspired by Laravel validation.",
   "main": "dist/simple-react-validator.min.js",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "authors": [
     "Stuart Yamartino"
   ],

dist/locale/es.js

@@ -0,0 +1,51 @@
+// Simple React Validator v1.2.0 | Created By Dockwa | MIT License | 2017 - Present
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['simple-react-validator'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('simple-react-validator'));
+  } else {
+    root.SimpleReactValidatorLocaleEs = factory(root.SimpleReactValidator);
+  }
+}(this, function(SimpleReactValidator) {
+"use strict";
+
+var es = {
+  accepted: ':attribute debe ser aceptado.',
+  after: ':attribute debe ser una fecha posterior a :date.',
+  after_or_equal: ':attribute debe ser una fecha posterior o igual a :date.',
+  alpha: ':attribute sólo debe contener letras.',
+  // alpha_space          : 'The :attribute may only contain letters and spaces.',
+  // alpha_num            : 'The :attribute may only contain letters and numbers.',
+  // alpha_num_space      : 'The :attribute may only contain letters, numbers, and spaces.',
+  // alpha_num_dash       : 'The :attribute may only contain letters, numbers, and dashes.',
+  // alpha_num_dash_space : 'The :attribute may only contain letters, numbers, dashes, and spaces.',
+  array: ':attribute debe ser un conjunto.',
+  before: ':attribute debe ser una fecha anterior a :date.',
+  before_or_equal: ':attribute debe ser una fecha anterior o igual a :date.',
+  between: ':attribute tiene que estar entre :min - :max:type.',
+  "boolean": 'El campo :attribute debe tener un valor verdadero o falso.',
+  // card_exp             : 'The :attribute must be a valid expiration date.',
+  // card_num             : 'The :attribute must be a valid credit card number.',
+  // currency             : 'The :attribute must be a valid currency.',
+  date: ':attribute no es una fecha válida.',
+  date_equals: ':attribute debe ser una fecha igual a :date.',
+  email: ':attribute no es un correo válido',
+  "in": ':attribute es inválido :values.',
+  integer: ':attribute debe ser un número entero.',
+  max: ':attribute no debe ser mayor a :max:type.',
+  min: 'El tamaño de :attribute debe ser de al menos :min:type.',
+  not_in: ':attribute es inválido :values.',
+  not_regex: 'El formato del campo :attribute no es válido.',
+  numeric: ':attribute debe ser numérico.',
+  // phone                : 'The :attribute must be a valid phone number.',
+  regex: 'El formato de :attribute es inválido.',
+  required: 'El campo :attribute es obligatorio.',
+  size: 'El tamaño de :attribute debe ser :size:type.',
+  string: 'El campo :attribute debe ser una cadena de caracteres.',
+  // typeof               : 'The :attribute is not the correct type of :type.',
+  url: 'El formato :attribute es inválido.'
+};
+SimpleReactValidator.addLocale('es', es);
+return es;
+}));

dist/locale/fr.js

@@ -0,0 +1,51 @@
+// Simple React Validator v1.2.0 | Created By Dockwa | MIT License | 2017 - Present
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['simple-react-validator'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('simple-react-validator'));
+  } else {
+    root.SimpleReactValidatorLocaleFr = factory(root.SimpleReactValidator);
+  }
+}(this, function(SimpleReactValidator) {
+"use strict";
+
+var fr = {
+  accepted: 'Le champ :attribute doit être accepté.',
+  after: 'Le champ :attribute doit être après :date.',
+  after_or_equal: 'Le champ :attribute doit correspondre ou bien être après :date.',
+  alpha: 'Le champ :attribute ne peut contenir que des lettres.',
+  alpha_space: 'Le champ :attribute ne peut contenir que des lettres et des espaces.',
+  alpha_num: 'Le champ :attribute ne peut contenir que des lettres et des chiffres.',
+  alpha_num_space: 'Le champ :attribute ne peut contenir que des lettres, chiffres, et espaces.',
+  alpha_num_dash: 'Le champ :attribute ne peut contenir que des lettres, chiffres, et tirets.',
+  alpha_num_dash_space: 'Le champ :attribute ne peut contenir que des lettres, chiffres, tirets, et espaces.',
+  array: 'Le champ :attribute doit êttre un tableau.',
+  before: 'Le champ :attribute doit être avant :date.',
+  before_or_equal: 'Le champ :attribute doit correspondre ou bien être avant :date.',
+  between: 'Le champ :attribute doit être entre :min et :max:type.',
+  "boolean": 'Le champ :attribute doit être booléen.',
+  card_exp: "Le champ :attribute doit être une date d'expiration valide.",
+  card_num: 'Le champ :attribute doit être un numéro valide de carte de crédit .',
+  currency: 'Le champ :attribute doit être une devise valide.',
+  date: 'Le champ :attribute doit être une date.',
+  date_equals: 'Le champ :attribute doit correspondre à :date.',
+  email: 'Le champ :attribute doit êre une adresse email valide.',
+  "in": 'Le champ selectionné :attribute doit être :values.',
+  integer: 'Le champ :attribute doit être un entier.',
+  max: 'Le champ :attribute ne doit pas dépasser :max:type.',
+  min: 'Le champ :attribute doit au moins être :min:type.',
+  not_in: 'Le champ selectionné :attribute ne doit pas être :values.',
+  not_regex: 'Le champ :attribute ne doit pas correspondre au motif requis.',
+  numeric: 'Le champ :attribute doit être un chiffre.',
+  phone: 'Le champ :attribute doit être un numéro de téléphone valide.',
+  regex: 'Le champ :attribute doit correspondre au motif requis.',
+  required: 'Le champ :attribute est requis.',
+  size: 'Le champ :attribute doit être :size:type.',
+  string: 'Le champ :attribute doit être une chaîne.',
+  "typeof": "Le champ :attribute n'est pas le type correcte de :type.",
+  url: 'Le champ :attribute doit être un url.'
+};
+SimpleReactValidator.addLocale('fr', fr);
+return fr;
+}));

dist/locale/min/es.min.js

@@ -0,0 +1,65 @@
+// Simple React Validator v1.2.0 | Created By Dockwa | MIT License | 2017 - Present
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['simple-react-validator'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('simple-react-validator'));
+  } else {
+    root.SimpleReactValidatorLocaleTemplateEn = factory(root.SimpleReactValidator);
+  }
+}(this, function(SimpleReactValidator) {
+"use strict";
+
+/******* This in an example template ***********
+This file does nothing since English is the default language
+build into simple react validator.
+
+Copy this file to add more
+supported languages. This is a great reference for translations
+of these messages: https://github.com/caouecs/Laravel-lang/tree/master/src
+
+If you don't have a translation for a line, comment out that line
+and move on. It is smart enough to fall back to the default English
+and hopefully someone else will contribute to fill in the gaps later!
+
+Note: the "const" variable name will be the camelCase filename.
+/**********************************************/
+var templateEn = {
+  accepted: 'The :attribute must be accepted.',
+  after: 'The :attribute must be after :date.',
+  after_or_equal: 'The :attribute must be after or on :date.',
+  alpha: 'The :attribute may only contain letters.',
+  alpha_space: 'The :attribute may only contain letters and spaces.',
+  alpha_num: 'The :attribute may only contain letters and numbers.',
+  alpha_num_space: 'The :attribute may only contain letters, numbers, and spaces.',
+  alpha_num_dash: 'The :attribute may only contain letters, numbers, and dashes.',
+  alpha_num_dash_space: 'The :attribute may only contain letters, numbers, dashes, and spaces.',
+  array: 'The :attribute must be an array.',
+  before: 'The :attribute must be before :date.',
+  before_or_equal: 'The :attribute must be before or on :date.',
+  between: 'The :attribute must be between :min and :max:type.',
+  "boolean": 'The :attribute must be a boolean.',
+  card_exp: 'The :attribute must be a valid expiration date.',
+  card_num: 'The :attribute must be a valid credit card number.',
+  currency: 'The :attribute must be a valid currency.',
+  date: 'The :attribute must be a date.',
+  date_equals: 'The :attribute must be on :date.',
+  email: 'The :attribute must be a valid email address.',
+  "in": 'The selected :attribute must be :values.',
+  integer: 'The :attribute must be an integer.',
+  max: 'The :attribute may not be greater than :max:type.',
+  min: 'The :attribute must be at least :min:type.',
+  not_in: 'The selected :attribute must not be :values.',
+  not_regex: 'The :attribute must not match the required pattern.',
+  numeric: 'The :attribute must be a number.',
+  phone: 'The :attribute must be a valid phone number.',
+  regex: 'The :attribute must match the required pattern.',
+  required: 'The :attribute field is required.',
+  size: 'The :attribute must be :size:type.',
+  string: 'The :attribute must be a string.',
+  "typeof": 'The :attribute is not the correct type of :type.',
+  url: 'The :attribute must be a url.'
+};
+SimpleReactValidator.addLocale('en', templateEn);
+return templateEn;
+}));