Updated the validatory dependency to a peerDependency. Updated the te…

…sts/app accordingly. Fixed an issue with the React controlled components' values.

CHANGELOG.md

@@ -5,6 +5,8 @@ This changelog references the relevant changes done between versions.
 To get the diff for a specific change, go to https://github.com/LIN3S/FrontFoundation/commit/XXX where XXX is the change hash
 To get the diff between two versions, go to https://github.com/LIN3S/FrontFoundation/compare/v0.5.0...v0.6.0
 
+* 0.19.1
+    * Added the `validatory` dependency as a peerDependency.
 * 0.19.0
     * Added custom error messages via props to the FormGroupInput and FormGroupSelect React components.
 * 0.18.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lin3s-front-foundation",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "author": "LIN3S",
   "license": "MIT",
   "description": "Library that provides a sort of commonly used front-end components in LIN3S projects",
@@ -61,11 +61,11 @@
   "peerDependencies": {
     "prop-types": ">=15.0",
     "react": ">=15.0",
-    "react-dom": ">=15.0"
+    "react-dom": ">=15.0",
+    "validatory": "^0.2.5||^0.3.0"
   },
   "dependencies": {
     "foes-scrollproxy": "^0.8.0",
-    "lin3s-event-bus": "^0.10.0",
-    "validatory": "^0.2.5"
+    "lin3s-event-bus": "^0.10.0"
   }
 }

tests/app/app.js

@@ -118,7 +118,7 @@ const testValidatory = () => {
     };
   init({
     formSelector: '#validatory-form',
-    formElementSelector: '#validatory-form input, #validatory-form select, #validatory-form textarea',
+    formElementSelector: 'input, select, textarea',
     onFormValidationStateChanged: formValidationStateChangedCallback,
     onFormElementValidationStateChanged: formElementValidationStateChangedCallback
   });
@@ -127,13 +127,13 @@ const testValidatory = () => {
   /*
   Event.validatory.initWithEvents({
     formSelector: '#validatory-form',
-    formElementSelector: '#validatory-form input, #validatory-form select, #validatory-form textarea'
+    formElementSelector: 'input, select, textarea'
   });
   */
 
   init({
     formSelector: '#validatory-form-react',
-    formElementSelector: '#validatory-form-react input, #validatory-form-react select, #validatory-form-react textarea'
+    formElementSelector: 'input, select, textarea'
   });
 
   onFormValidationStateChanged(

tests/app/package.json

@@ -56,12 +56,12 @@
     "foes-scrollproxy": "^0.8.0",
     "jquery": "^3.2.1",
     "lin3s-event-bus": "^0.10.0",
-    "lin3s-front-foundation": "^0.18.0",
+    "lin3s-front-foundation": "^0.19.1",
     "lodash.debounce": "^4.0.8",
     "parsleyjs": "^2.7.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "validatory": "^0.2.3"
+    "validatory": "^0.3.0"
   }
 }

tests/app/src/js/React/ReactEmailInput.js

@@ -14,22 +14,40 @@ import PropTypes from 'prop-types';
 import {Ui} from 'lin3s-front-foundation';
 import {Patterns} from 'validatory';
 
-class ReactEmailInput extends React.PureComponent {
+class ReactEmailInput extends React.Component {
 
   static propTypes = {
     domNode: PropTypes.any.isRequired
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: ''
+    };
+
+    this.onChanged = this.onChanged.bind(this);
+  }
+
+  onChanged(value) {
+    this.setState({value});
+  }
+
   render() {
+    const {value} = this.state;
+
     return <Ui.React.FormGroupInput
       id="react-form-group-input-email"
       label="Email:"
+      onChanged={this.onChanged}
       required={true}
       type="email"
       validationEnabled={true}
       validationMessageNotValid="The entered email is not valid"
       validationMessageRequired="This field is required"
-      validationPattern={Patterns.email}/>;
+      validationPattern={Patterns.email}
+      value={value}/>;
   }
 }
 

tests/app/src/js/React/ReactPhoneInput.js

@@ -14,22 +14,40 @@ import PropTypes from 'prop-types';
 import {Ui} from 'lin3s-front-foundation';
 import {Patterns} from 'validatory';
 
-class ReactFormInput extends React.PureComponent {
+class ReactFormInput extends React.Component {
 
   static propTypes = {
     domNode: PropTypes.any.isRequired
   };
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: ''
+    };
+
+    this.onChanged = this.onChanged.bind(this);
+  }
+
+  onChanged(value) {
+    this.setState({value});
+  }
+
   render() {
+    const {value} = this.state;
+
     return <Ui.React.FormGroupInput
       id="react-form-group-input-phone"
       label="Phone:"
+      onChanged={this.onChanged}
       required={true}
       type="tel"
       validationEnabled={true}
       validationMessageNotValid="The entered phone is not valid"
       validationMessageRequired="This field is required"
-      validationPattern={Patterns.phone}/>;
+      validationPattern={Patterns.phone}
+      value={value}/>;
   }
 }
 

tests/app/yarn.lock

@@ -3819,9 +3819,9 @@ lin3s-event-bus@^0.10.0:
   dependencies:
     lodash.debounce "^4.0.8"
 
-lin3s-front-foundation@^0.18.0:
-  version "0.18.9"
-  resolved "https://registry.yarnpkg.com/lin3s-front-foundation/-/lin3s-front-foundation-0.18.9.tgz#f21d9352ba2fee8a8dab87a0ef56b7e3920d7163"
+lin3s-front-foundation@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/lin3s-front-foundation/-/lin3s-front-foundation-0.19.0.tgz#194e8fff21422340cc5db446fa9cac8384633402"
   dependencies:
     foes-scrollproxy "^0.8.0"
     lin3s-event-bus "^0.10.0"
@@ -7235,14 +7235,14 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
-validatory@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/validatory/-/validatory-0.2.3.tgz#432fe8278becc5194c1089b77ecc491fa8802559"
-
 validatory@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/validatory/-/validatory-0.2.5.tgz#3a19d79436425b5ae99d5193854f809b967ec59f"
 
+validatory@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/validatory/-/validatory-0.3.0.tgz#2bbde6245360c04789795c6fa86de1bf9c7ac63f"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"