Support React 15.2.0. Update Babel dependencies.

Fixes heilhead#65
Fixes heilhead#66

Author: Paul LeMarquand

.babelrc

@@ -1 +1,4 @@
-{ "presets": ["es2015","react"] }
+{
+    "presets": ["es2015","react"],
+    "plugins": ["transform-object-rest-spread"]
+}

__tests__/ValidationTests.js

@@ -0,0 +1,72 @@
+'use strict';
+import Form from '../src/Form';
+import ValidatedInput from '../src/ValidatedInput';
+import { mount } from 'enzyme';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+// Note: There is an issue with react-bootstrap and mocking. For now the whole node_modules directory has been unmocked.
+describe('React bootstrap validation compilation test', () => {
+    var React = require('react');
+    var TestUtils = require('react-addons-test-utils');
+
+    beforeEach(function() {
+
+    });
+
+    it('Calls onValidSubmit when input is valid', () => {
+        const spy = sinon.spy(), invalidSpy = sinon.spy();
+        const form = mount(
+            <Form onValidSubmit={spy} onInvalidSubmit={invalidSpy}>
+                <ValidatedInput name='foo' type='text' value='bar'></ValidatedInput>
+            </Form>
+        );
+
+        form.simulate('submit');
+
+        expect(spy.calledOnce).to.equal(true);
+        expect(invalidSpy.called).to.equal(false);
+    });
+
+    it('Calls onInvalidSubmit when input is not valid', () => {
+        const spy = sinon.spy(), invalidSpy = sinon.spy();
+        const form = mount(
+            <Form onValidSubmit={invalidSpy} onInvalidSubmit={spy}>
+                <ValidatedInput name='foo' type='text' validate='required' value=''></ValidatedInput>
+            </Form>
+        );
+
+        form.simulate('submit');
+
+        expect(spy.calledOnce).to.equal(true);
+        expect(invalidSpy.called).to.equal(false);
+    });
+
+    it('Validates a checkbox', () => {
+        const spy = sinon.spy(), invalidSpy = sinon.spy();
+        const form = mount(
+            <Form onValidSubmit={spy} onInvalidSubmit={invalidSpy}>
+                <ValidatedInput type='checkbox' name='agree' checked={true} label='I agree to the terms and conditions' validate='isChecked'/>
+            </Form>
+        );
+
+        form.simulate('submit');
+
+        expect(spy.calledOnce).to.equal(true);
+        expect(invalidSpy.called).to.equal(false);
+    });
+
+    it('Validates a file input', () => {
+        const spy = sinon.spy(), invalidSpy = sinon.spy();
+        const form = mount(
+            <Form onValidSubmit={spy} onInvalidSubmit={invalidSpy}>
+                <ValidatedInput name='file' type='file' label='Attachments' multiple/>
+            </Form>
+        );
+
+        form.simulate('submit');
+
+        expect(spy.calledOnce).to.equal(true);
+        expect(invalidSpy.called).to.equal(false);
+    });
+});

gulpfile.js

@@ -45,7 +45,6 @@ var config = {
         devtool: 'source-map'
     },
     babel: {
-        optional: ['runtime']
     }
 };
 

package.json

@@ -42,28 +42,34 @@
   "devDependencies": {
     "babel": "^6.5.2",
     "babel-jest": "^10.0.1",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.9.0",
     "babel-preset-jest": "^10.0.1",
-    "babel-preset-react": "^6.5.0",
-    "browserify": "10.x",
-    "gulp": "3.9.0",
-    "gulp-babel": "^5.1.0",
+    "babel-preset-react": "^6.11.1",
+    "browserify": "^13.0.1",
+    "chai": "^3.5.0",
+    "enzyme": "^2.3.0",
+    "gulp": "^3.9.0",
+    "gulp-babel": "^6.1.2",
     "gulp-rename": "^1.2.2",
     "gulp-sourcemaps": "^1.5.2",
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.6",
     "jest": "^0.1.40",
     "jest-cli": "^0.10.0",
     "react-addons-test-utils": "^0.14.8",
+    "sinon": "^1.17.4",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "webpack": "^1.10.5"
   },
   "dependencies": {
-    "babel-runtime": "^5.1.10",
+    "babel-runtime": "^6.9.2",
+    "browserify": "^13.0.1",
     "classnames": "^2.0.0",
+    "gulp-babel": "^6.1.2",
+    "react-addons-create-fragment": "^0.14.7",
     "react-bootstrap": ">=0.23.0",
-    "validator": "^3.41.3",
-    "react-addons-create-fragment": "^0.14.7"
+    "validator": "^3.41.3"
   }
 }

src/Form.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import InputContainer from './InputContainer';
 import ValidatedInput from './ValidatedInput';
 import RadioGroup from './RadioGroup';
@@ -200,7 +201,7 @@ export default class Form extends InputContainer {
 
 		if (typeof this.props.validateOne === 'function') {
             result = this.props.validateOne(iptName, value, context, result);
-        } 
+        }
         // if result is !== true, it is considered an error
         // it can be either bool or string error
         if (result !== true) {
@@ -296,13 +297,13 @@ export default class Form extends InputContainer {
         }
 
         let value;
-
+        let dom = ReactDOM.findDOMNode(input.refs.control);
         if (input.props.type === 'checkbox') {
-            value = input.getChecked();
+            value = dom.checked;
         } else if (input.props.type === 'file') {
-            value = input.getInputDOMNode().files;
+            value = dom.files;
         } else {
-            value = input.getValue();
+            value = dom.value;
         }
 
         return value;

src/ValidatedInput.js

@@ -1,33 +1,33 @@
 import React from 'react';
-import { Input } from 'react-bootstrap';
+import { FormControl } from 'react-bootstrap';
 
-export default class ValidatedInput extends Input {
+export default class ValidatedInput extends React.Component {
     constructor(props) {
         super(props);
 
-        if (!props._registerInput || !props._unregisterInput) {
+        const {validationEvent, validate, errorHelp, _registerInput, _unregisterInput, ...inputProps} = props;
+        this._registerInput = _registerInput;
+        this._unregisterInput = _unregisterInput;
+        this.inputProps = inputProps;
+        if (!this._registerInput || !this._unregisterInput) {
             throw new Error('Input must be placed inside the Form component');
         }
     }
 
     componentWillMount() {
-        if (Input.prototype.componentWillMount) {
-            super.componentWillMount();
-        }
-
-        this.props._registerInput(this);
+        this._registerInput(this);
     }
 
     componentWillUnmount() {
-        if (Input.prototype.componentWillUnmount) {
-            super.componentWillUnmount();
-        }
+        this._unregisterInput(this);
+    }
 
-        this.props._unregisterInput(this);
+    render() {
+        return <FormControl ref='control' {...this.inputProps}>{this.props.children}</FormControl>;
     }
 }
 
-ValidatedInput.propTypes = Object.assign({}, Input.propTypes, {
+ValidatedInput.propTypes = {
     name           : React.PropTypes.string.isRequired,
     validationEvent: React.PropTypes.oneOf([
         '', 'onChange', 'onBlur', 'onFocus'
@@ -40,8 +40,8 @@ ValidatedInput.propTypes = Object.assign({}, Input.propTypes, {
         React.PropTypes.string,
         React.PropTypes.object
     ])
-});
+};
 
-ValidatedInput.defaultProps = Object.assign({}, Input.defaultProps, {
+ValidatedInput.defaultProps = {
     validationEvent: ''
-});
+};