Bugfixes 1.0.0

dist/components/Field.js

@@ -39,7 +39,6 @@ var Field = function (_React$Component) {
       debounce: Math.floor(Math.pow(Math.pow(+props.debounce, 2), 0.5)) || 0, //eslint-disable-line
       validators: (0, _utilities.assembleValidators)(props)
     };
-
     _this.finalValue = null;
 
     _this.onChange = _this.onChange.bind(_this);
@@ -81,21 +80,24 @@ var Field = function (_React$Component) {
     key: 'onChange',
     value: function onChange(e) {
       var value = e.target.value;
+      this.finalValue = value;
 
       var validators = (0, _utilities.getValuesOf)(this.state.validators);
 
-      this.setState({ value: value, valid: (0, _utilities.isValid)(value, validators), pristine: false });
-      this.finalValue = value;
-      this.debouncedBroadcastChange();
+      this.setState({
+        value: value,
+        valid: (0, _utilities.isValid)(value, validators),
+        pristine: false
+      }, this.debouncedBroadcastChange);
     }
   }, {
     key: 'broadcastChange',
     value: function broadcastChange() {
       if (this.props.onChange) {
         this.props.onChange({
           name: this.props.name,
-          value: this.finalValue,
-          status: this.state.valid,
+          value: this.state.value,
+          valid: this.state.valid,
           pristine: this.state.pristine
         });
       }
@@ -123,14 +125,18 @@ var Field = function (_React$Component) {
 
       if (!childCount) {
         return _react2.default.createElement(
-          'label',
-          { htmlFor: this.props.name },
-          _react2.default.createElement('input', inputProps)
+          'div',
+          null,
+          _react2.default.createElement(
+            'label',
+            { htmlFor: this.props.name },
+            _react2.default.createElement('input', inputProps)
+          )
         );
       }
       return _react2.default.createElement(
         'div',
-        { htmlFor: this.props.name },
+        null,
         _react2.default.Children.map(this.props.children, function (child) {
           return (0, _utilities.mapPropsToChild)(child, 'input', inputProps);
         })

dist/components/Form.js

@@ -16,6 +16,8 @@ var _utilities = require('../helpers/utilities');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -32,6 +34,7 @@ var Form = function (_React$Component) {
 
     _this.addFieldToState = _utilities.addFieldToState.bind(_this);
     _this.onSubmit = _this.onSubmit.bind(_this);
+    _this.onFieldChange = _this.onFieldChange.bind(_this);
 
     _this.state = {};
     var fieldsToAdd = _react2.default.Children.toArray(props.children).filter(function (child) {
@@ -42,6 +45,16 @@ var Form = function (_React$Component) {
   }
 
   _createClass(Form, [{
+    key: 'onFieldChange',
+    value: function onFieldChange(_ref) {
+      var name = _ref.name,
+          value = _ref.value,
+          valid = _ref.valid,
+          pristine = _ref.pristine;
+
+      this.setState(_defineProperty({}, name, { value: value, valid: valid, pristine: pristine }));
+    }
+  }, {
     key: 'onSubmit',
     value: function onSubmit(e) {
       e.preventDefault();
@@ -56,11 +69,7 @@ var Form = function (_React$Component) {
         'form',
         { onSubmit: this.onSubmit },
         _react2.default.Children.map(this.props.children, function (child) {
-          var name = child.props.name;
-
-          var value = _this2.state[name].value;
-          var fieldProps = { key: child.props.name, value: value, name: name };
-          return (0, _utilities.mapPropsToChild)(child, 'Field', fieldProps);
+          return (0, _utilities.mapPropsToChild)(child, 'Field', (0, _utilities.makeFieldProps)(child, _this2.onFieldChange, _this2.state));
         })
       );
     }

dist/helpers/utilities.js

@@ -11,6 +11,7 @@ exports.updateValidators = updateValidators;
 exports.isValid = isValid;
 exports.addFieldToState = addFieldToState;
 exports.getValuesOf = getValuesOf;
+exports.makeFieldProps = makeFieldProps;
 exports.mapPropsToChild = mapPropsToChild;
 
 var _react = require('react');
@@ -92,7 +93,7 @@ function addFieldToState(field) {
         valid = _field$props.valid,
         pristine = _field$props.pristine;
 
-    var newState = { value: '', valid: false, pristine: false };
+    var newState = { value: '', valid: false, pristine: true };
 
     if (value !== undefined) Object.assign(newState, { value: value });
     if (valid !== undefined) Object.assign(newState, { valid: valid });
@@ -110,6 +111,14 @@ function getValuesOf() {
   });
 }
 
+function makeFieldProps(child, onChange, state) {
+  if (typeof child.type === 'function' && child.type.name === 'Field') {
+    var name = child.props.name;
+    return { name: name, onChange: onChange, key: name, value: state[name].value };
+  }
+  return null;
+}
+
 function mapPropsToChild(child, type, props) {
   if (child.type === type || typeof child.type === 'function' && child.type.name === type) {
     return _react2.default.cloneElement(child, props);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formulize-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A simple form validation library for React.js which wires up custom, controlled inputs through a declarative API.",
   "main": "dist/index",
   "keywords": [

src/components/Field.jsx

@@ -19,7 +19,6 @@ const Field = class extends React.Component {
       debounce: Math.floor(Math.pow(Math.pow(+props.debounce, 2), 0.5)) || 0, //eslint-disable-line
       validators: assembleValidators(props),
     };
-
     this.finalValue = null;
 
     this.onChange = this.onChange.bind(this);
@@ -55,20 +54,24 @@ const Field = class extends React.Component {
   }
 
   onChange(e) {
-    const { value } = e.target;
+    const value = e.target.value;
+    this.finalValue = value;
+
     const validators = getValuesOf(this.state.validators);
 
-    this.setState({ value, valid: isValid(value, validators), pristine: false });
-    this.finalValue = value;
-    this.debouncedBroadcastChange();
+    this.setState({
+      value,
+      valid: isValid(value, validators),
+      pristine: false,
+    }, this.debouncedBroadcastChange);
   }
 
   broadcastChange() {
     if (this.props.onChange) {
       this.props.onChange({
         name: this.props.name,
-        value: this.finalValue,
-        status: this.state.valid,
+        value: this.state.value,
+        valid: this.state.valid,
         pristine: this.state.pristine,
       });
     }
@@ -94,13 +97,15 @@ const Field = class extends React.Component {
 
     if (!childCount) {
       return (
-        <label htmlFor={this.props.name}>
-          <input {...inputProps} />
-        </label>
+        <div>
+          <label htmlFor={this.props.name}>
+            <input {...inputProps} />
+          </label>
+        </div>
       );
     }
     return (
-      <div htmlFor={this.props.name}>
+      <div>
         {React.Children
           .map(this.props.children, child => mapPropsToChild(child, 'input', inputProps))}
       </div>

src/components/Form.jsx

@@ -1,19 +1,26 @@
 import React from 'react';
-import { addFieldToState, mapPropsToChild } from '../helpers/utilities';
+import { addFieldToState, mapPropsToChild, makeFieldProps } from '../helpers/utilities';
 
 const Form = class extends React.Component {
   constructor(props) {
     super(props);
 
     this.addFieldToState = addFieldToState.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
+    this.onFieldChange = this.onFieldChange.bind(this);
 
     this.state = {};
     const fieldsToAdd = React.Children.toArray(props.children)
       .filter(child => (child.type.name === 'Field'));
     this.addFieldToState(fieldsToAdd);
   }
 
+  onFieldChange({ name, value, valid, pristine }) {
+    this.setState({
+      [name]: { value, valid, pristine },
+    });
+  }
+
   onSubmit(e) {
     e.preventDefault();
     if (this.props.onSubmit) this.props.onSubmit({ ...this.state });
@@ -23,12 +30,8 @@ const Form = class extends React.Component {
     return (
       <form onSubmit={this.onSubmit}>
         {React.Children
-          .map(this.props.children, (child) => {
-            const { name } = child.props;
-            const value = this.state[name].value;
-            const fieldProps = { key: child.props.name, value, name };
-            return mapPropsToChild(child, 'Field', fieldProps);
-          })}
+          .map(this.props.children, child =>
+            mapPropsToChild(child, 'Field', makeFieldProps(child, this.onFieldChange, this.state)))}
       </form>
     );
   }

src/helpers/utilities.jsx

@@ -43,7 +43,7 @@ export function addFieldToState(field) {
     field.forEach(name => this.addFieldToState(name));
   } else if (typeof field === 'object') {
     const { name, value, valid, pristine } = field.props;
-    const newState = { value: '', valid: false, pristine: false };
+    const newState = { value: '', valid: false, pristine: true };
 
     if (value !== undefined) Object.assign(newState, { value });
     if (valid !== undefined) Object.assign(newState, { valid });
@@ -57,6 +57,14 @@ export function getValuesOf(obj = {}) {
   return Object.keys(obj).map(key => obj[key]);
 }
 
+export function makeFieldProps(child, onChange, state) {
+  if (typeof child.type === 'function' && child.type.name === 'Field') {
+    const name = child.props.name;
+    return { name, onChange, key: name, value: state[name].value };
+  }
+  return null;
+}
+
 export function mapPropsToChild(child, type, props) {
   if (child.type === type || (typeof child.type === 'function' && child.type.name === type)) {
     return React.cloneElement(child, props);

tests/components/Field.spec.js

@@ -5,7 +5,7 @@ import { expect } from 'chai'; // eslint-disable-line
 import { shallow, mount } from 'enzyme'; // eslint-disable-line
 
 import { Field } from '../../dist/index';
-import { updateInput, simulateChange } from '../spec_helpers';
+import { updateInput } from '../spec_helpers';
 
 describe('<Field /> Higher-Order-Component', () => {
   const nameField = { name: 'name', value: 'Test Name' };
@@ -166,7 +166,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(renderSpy.callCount).to.equal(1);
       expect(wrapper.state()).to.have.property('value', 'firstValue');
 
-      simulateChange(wrapper, 'secondValue');
+      updateInput(wrapper, 'secondValue');
 
       expect(shouldUpdateSpy.callCount).to.equal(1);
       expect(shouldUpdateSpy.calledBefore(willUpdateSpy)).to.equal(true);
@@ -182,7 +182,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(wrapper.state()).to.have.property('value', 'firstValue');
       expect(wrapper.instance()).to.have.property('finalValue', null);
 
-      simulateChange(wrapper, 'firstValue');
+      updateInput(wrapper, 'firstValue');
 
       expect(shouldUpdateSpy.callCount).to.equal(1);
       expect(shouldUpdateSpy.calledBefore(willUpdateSpy)).to.equal(true);
@@ -198,7 +198,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(wrapper.state()).to.have.property('value', 'firstValue');
       expect(wrapper.instance()).to.have.property('finalValue', null);
 
-      simulateChange(wrapper, 'secondValue');
+      updateInput(wrapper, 'secondValue');
 
       expect(shouldUpdateSpy.callCount).to.equal(1);
       expect(shouldUpdateSpy.calledBefore(willUpdateSpy)).to.equal(true);
@@ -217,7 +217,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(wrapper.state()).to.have.property('value', 'firstValue');
       expect(wrapper.instance()).to.have.property('finalValue', null);
 
-      simulateChange(wrapper, 'secondValue');
+      updateInput(wrapper, 'secondValue');
 
       expect(renderSpy.callCount).to.equal(2);
       expect(willUpdateSpy.callCount).to.equal(1);
@@ -241,7 +241,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(wrapper.state()).to.have.property('value', 'firstValue');
       expect(wrapper.instance()).to.have.property('finalValue', null);
 
-      simulateChange(wrapper, 'secondValue');
+      updateInput(wrapper, 'secondValue');
 
       expect(willUnmountSpy.callCount).to.equal(0);
       expect(cancelBroadcastSpy.callCount).to.equal(0);
@@ -282,7 +282,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(wrapper.state()).to.have.property('value', 'firstValue');
       expect(wrapper.state()).to.have.property('debounce', 300);
 
-      simulateChange(wrapper, 'secondValue');
+      updateInput(wrapper, 'secondValue');
 
       expect(wrapper.state()).to.have.property('value', 'secondValue');
       expect(willUpdateSpy.callCount).to.equal(1);
@@ -298,7 +298,7 @@ describe('<Field /> Higher-Order-Component', () => {
       expect(wrapper.state()).to.have.property('value', 'firstValue');
       expect(wrapper.state()).to.have.property('debounce', debounce);
 
-      simulateChange(wrapper, 'secondValue');
+      updateInput(wrapper, 'secondValue');
 
       expect(wrapper.state()).to.have.property('value', 'secondValue');
       expect(onChangeSpy.callCount).to.equal(0);