Patch for React >=6.3 to release v3.0.0

.babelrc

@@ -5,10 +5,7 @@
     "test": {
       "plugins": [
         ["istanbul", {
-          "exclude": [
-            "**/*.spec.js",
-            ".tmp/**/*"
-          ]
+          "exclude": ["**/*.spec.js", ".tmp/**/*"]
         }]
       ]
     }

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+max_line_length = 120
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintignore

@@ -1,2 +1,6 @@
-test/coverage/
+__test__/coverage/
+node_modules/
 dist/
+build/
+static/
+.tmp/

.eslintrc

@@ -1,9 +1,20 @@
 {
-  "extends" : "eslint-config-availity/react",
+  "extends": "availity/browser",
   "rules": {
-    "semi" : [2, "always"],
-    "no-unused-vars": ["error", { "varsIgnorePattern": "^(unused|omit)" }],
-    "comma-dangle": [2, "always-multiline"]
+    "semi": [2, "always"],
+    "no-unused-vars": ["error", {
+      "varsIgnorePattern": "^(unused|omit)"
+    }],
+    "comma-dangle": [2, "always-multiline", {
+      "functions": "never"
+    }],
+    "no-unused-expressions": ["error", {
+      "allowShortCircuit": true
+    }],
+    "camelcase": ["warn", {
+      "properties": "never"
+    }],
+    "react/no-unused-state": "warn"
   },
   "parserOptions": {
     "sourceType": "module",

.gitignore

@@ -1,6 +1,7 @@
 /__test__/coverage
-node_modules
+node_modules/
 /dist
 /build
 /lib
-/.tmp
+/.nyc_output
+/.tmp

README.md

@@ -4,7 +4,6 @@
 
 Easy to use React validation components compatible for reactstrap.
 
-
 ## Installation
 
 Install `availity-reactstrap-validation` via NPM
@@ -13,7 +12,7 @@ Install `availity-reactstrap-validation` via NPM
 npm install --save availity-reactstrap-validation
 ```
 
-If applicable, install a `Promise` polyfill.  For example:
+If applicable, install a `Promise` polyfill. For example:
 
 ```sh
 npm install es6-promise --save
@@ -32,34 +31,35 @@ import { AvField } from 'availity-reactstrap-validation';
 Install dependencies:
 
 ```sh
-npm install
+yarn install
 ```
 
 Run examples at [http://localhost:8080/](http://localhost:8080/) with Webpack dev server:
 
 ```sh
-npm start
+yarn start
 ```
 
 Run tests:
 
 ```sh
-npm test
+yarn test
 ```
 
 Run tests & coverage report:
 
 ```sh
-npm run test:coverage
+yarn test:coverage
 ```
 
 Watch tests:
 
 ```sh
-npm run test:watch
+yarn test:watch
 ```
 
 ## Disclaimer
+
 Open source software components distributed or made available in the Availity Materials are licensed to Company under the terms of the applicable open source license agreements, which may be found in text files included in the Availity Materials.
 
 ## LICENSE [MIT](LICENSE)

__test__/.eslintrc

@@ -1,21 +1,23 @@
 {
-  "extends" : "eslint-config-availity/react",
   "env": {
     "mocha": true,
     "node": true
   },
   "globals": {
     "sinon": true,
-    "expect": true
+    "expect": true,
+    "shallow": true,
+    "mount": true
   },
   "rules": {
-    "semi" : [2, "always"],
-    "comma-dangle": [2, "always-multiline"]
+    "func-names": 0,
+    "no-unused-expressions": 0
   },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.test.config.js"
+      }
     }
   }
 }

__test__/.setup.js

@@ -5,24 +5,29 @@ var sinon = require('sinon');
 var sinonChai = require('sinon-chai');
 var chaiAsPromised = require('chai-as-promised');
 var chaiEnzyme = require('chai-enzyme');
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
 
+enzyme.configure({ adapter: new Adapter() });
 var exposedProperties = ['window', 'navigator', 'document'];
 
 chai.use(sinonChai);
 chai.use(chaiAsPromised);
 chai.use(chaiEnzyme());
 
 chai.config.includeStack = true;
-global.expect = chai.expect;
+
 global.AssertionError = chai.AssertionError;
 global.Assertion = chai.Assertion;
 global.assert = chai.assert;
 global.expect = chai.expect;
 global.sinon = sinon;
 
-const { document } = new JSDOM('', {
-  url: 'http://localhost/'
-}).window;
+global.render = enzyme.render;
+global.shallow = enzyme.shallow;
+global.mount = enzyme.mount;
+
+const { document } = new JSDOM('', { url: 'http://localhost/' }).window;
 global.document = document;
 global.window = document.defaultView;
 Object.keys(document.defaultView).forEach(property => {
@@ -33,5 +38,5 @@ Object.keys(document.defaultView).forEach(property => {
 });
 
 global.navigator = {
-  userAgent: 'node.js'
+  userAgent: 'node.js',
 };

__test__/AvBaseInput.spec.js

@@ -1,6 +1,6 @@
 import { AvBaseInput } from 'availity-reactstrap-validation';
 
-describe('BaseInput', function() {
+describe('BaseInput', function () {
   let touched;
   let dirty;
   let bad;
@@ -48,6 +48,7 @@ describe('BaseInput', function() {
     };
     this.component = new AvBaseInput(this.props);
     this.component.context = this.context;
+    // eslint-disable-next-line no-multi-assign
     this.setStateSpy = this.component.setState = sinon.spy();
   });
 
@@ -74,41 +75,41 @@ describe('BaseInput', function() {
   describe('component will mount', () => {
     it('should get the default value', () => {
       const spy = sinon.spy(this.component, 'getDefaultValue');
-      this.component.componentWillMount();
+      this.component.UNSAFE_componentWillMount();
       expect(spy).to.have.been.calledOnce;
     });
 
     it('should set the value to the default value', () => {
       const defaultValue = 'some value';
       this.component.props.defaultValue = defaultValue;
-      this.component.componentWillMount();
+      this.component.UNSAFE_componentWillMount();
       expect(this.component.value).to.equal(defaultValue);
     });
 
     it('should set the state value to the default value', () => {
       const defaultValue = 'some value';
       this.component.props.defaultValue = defaultValue;
-      this.component.componentWillMount();
+      this.component.UNSAFE_componentWillMount();
       expect(this.setStateSpy).to.have.been.calledWithMatch({ value: defaultValue });
     });
 
     it('should set the value to the value prop if provided', () => {
       const defaultValue = 'some value';
       this.component.props.value = defaultValue;
-      this.component.componentWillMount();
+      this.component.UNSAFE_componentWillMount();
       expect(this.component.value).to.equal(defaultValue);
     });
 
     it('should set the state value to the value prop if provided', () => {
       const defaultValue = 'some value';
       this.component.props.value = defaultValue;
-      this.component.componentWillMount();
+      this.component.UNSAFE_componentWillMount();
       expect(this.setStateSpy).to.have.been.calledWithMatch({ value: defaultValue });
     });
 
-    it('should trigger validation', () => {
-      const spy = sinon.spy(this.component, 'validate');
-      this.component.componentWillMount();
+    it('should not trigger validation', () => {
+      const spy = sinon.spy(this.component, 'updateValidations');
+      this.component.UNSAFE_componentWillMount();
       expect(spy).to.have.been.calledOnce;
     });
   });
@@ -117,41 +118,42 @@ describe('BaseInput', function() {
     it('should do nothing if the value has not changed', () => {
       this.props.value = 123;
       const spy = sinon.spy(this.component, 'validate');
-      this.component.componentWillReceiveProps(this.props);
+      this.component.UNSAFE_componentWillReceiveProps(this.props);
       expect(this.setStateSpy).to.not.have.been.called;
       expect(spy).to.not.have.been.called;
     });
 
     describe('when the value changed', () => {
       it('should set the value to the new value', () => {
         const newValue = 2342;
-        this.component.componentWillReceiveProps({ value: newValue });
+        this.component.UNSAFE_componentWillReceiveProps({ value: newValue });
         expect(this.component.value).to.equal(newValue);
       });
 
       it('should set the state value to the default value', () => {
         const newValue = 2342;
-        this.component.componentWillReceiveProps({ value: newValue });
+        this.component.UNSAFE_componentWillReceiveProps({ value: newValue });
         expect(this.setStateSpy).to.have.been.calledWithMatch({ value: newValue });
       });
 
       it('should trigger validation', () => {
         const newValue = 2342;
         const spy = sinon.spy(this.component, 'validate');
-        this.component.componentWillReceiveProps({ value: newValue });
+        this.component._isMounted = true;
+        this.component.UNSAFE_componentWillReceiveProps({ value: newValue });
         expect(spy).to.have.been.calledOnce;
       });
 
       it('should reset the value if multiple has changed from false to true', () => {
         this.props.multiple = false;
-        this.component.componentWillReceiveProps({multiple: true});
+        this.component.UNSAFE_componentWillReceiveProps({ multiple: true });
         expect(this.component.value).to.be.empty;
         expect(this.component.state.value).to.be.empty;
       });
 
       it('should reset the value if multiple has changed from true to false', () => {
         this.props.multiple = true;
-        this.component.componentWillReceiveProps({multiple: false});
+        this.component.UNSAFE_componentWillReceiveProps({ multiple: false });
         expect(this.component.value).to.equal('');
       });
     });
@@ -160,7 +162,7 @@ describe('BaseInput', function() {
       describe('when the checked prop changes', () => {
         it('should set the value to the trueValue when the next props checked prop is true', () => {
           this.props.checked = false;
-          this.component.componentWillReceiveProps({
+          this.component.UNSAFE_componentWillReceiveProps({
             type: 'checkbox',
             checked: true,
             trueValue: true,
@@ -171,7 +173,7 @@ describe('BaseInput', function() {
 
         it('should set the value to the falseValue when the next props checked prop is false', () => {
           this.props.checked = true;
-          this.component.componentWillReceiveProps({
+          this.component.UNSAFE_componentWillReceiveProps({
             type: 'checkbox',
             checked: false,
             trueValue: true,
@@ -182,20 +184,18 @@ describe('BaseInput', function() {
 
         it('should set the state to the new value', () => {
           this.props.checked = false;
-          this.component.componentWillReceiveProps({
+          this.component.UNSAFE_componentWillReceiveProps({
             type: 'checkbox',
             checked: true,
             trueValue: true,
             falseValue: false,
           });
           expect(this.setStateSpy).to.have.been.calledWithMatch({ value: this.props.trueValue });
         });
-      });
 
-      describe('when the checked prop changes', () => {
         it('should not set the state', () => {
           this.props.checked = true;
-          this.component.componentWillReceiveProps({
+          this.component.UNSAFE_componentWillReceiveProps({
             type: 'checkbox',
             checked: true,
             trueValue: true,
@@ -215,6 +215,7 @@ describe('BaseInput', function() {
 
     it('should trigger validation', () => {
       const spy = sinon.spy(this.component, 'validate');
+      this.component._isMounted = true;
       this.component.updateValidations();
       expect(spy).to.have.been.calledOnce;
     });
@@ -581,9 +582,16 @@ describe('BaseInput', function() {
     it('should give the selected options', () => {
       this.props.type = 'select';
       this.props.multiple = true;
-      const event = { target: { options: [ { value: 'selected', selected: true }, { value: 'notSelected', selected: false } ] } };
+      const event = {
+        target: {
+          options: [
+            { value: 'selected', selected: true },
+            { value: 'notSelected', selected: false },
+          ],
+        },
+      };
       const result = this.component.getFieldValue(event);
-      expect(result).to.deep.equal([ 'selected' ]);
+      expect(result).to.deep.equal(['selected']);
     });
   });