Merge v2.0 branch (#135)

Author: rkuykendall

lib/Wrapper.js

@@ -232,23 +232,23 @@ exports.default = function (Component) {
       value: function render() {
         var innerRef = this.props.innerRef;
 
-        var propsForElement = _extends({
-          getErrorMessage: this.getErrorMessage,
-          getErrorMessages: this.getErrorMessages,
-          getValue: this.getValue,
-          hasValue: this.hasValue,
-          isFormDisabled: this.isFormDisabled,
-          isValid: this.isValid,
-          isPristine: this.isPristine,
-          isFormSubmitted: this.isFormSubmitted,
-          isRequired: this.isRequired,
+        var propsForElement = _extends({}, this.props, {
+          errorMessage: this.getErrorMessage(),
+          errorMessages: this.getErrorMessages(),
+          hasValue: this.hasValue(),
+          isFormDisabled: this.isFormDisabled(),
+          isFormSubmitted: this.isFormSubmitted(),
+          isPristine: this.isPristine(),
+          isRequired: this.isRequired(),
+          isValid: this.isValid(),
           isValidValue: this.isValidValue,
           resetValue: this.resetValue,
           setValidations: this.setValidations,
           setValue: this.setValue,
-          showRequired: this.showRequired,
-          showError: this.showError
-        }, this.props);
+          showError: this.showError(),
+          showRequired: this.showRequired(),
+          value: this.getValue()
+        });
 
         if (innerRef) {
           propsForElement.ref = innerRef;

lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.withFormsy = exports.validationRules = exports.propTypes = exports.addValidationRule = undefined;
+exports.withFormsy = exports.validationRules = exports.propTypes = exports.addValidationRule = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -300,7 +300,7 @@ var Formsy = function (_React$Component) {
     _this.validate = function (component) {
       // Trigger onChange
       if (_this.state.canChange) {
-        _this.props.onChange(_this.getCurrentValues(), _this.isChanged());
+        _this.props.onChange(_this.getModel(), _this.isChanged());
       }
 
       var validation = _this.runValidation(component);
@@ -516,23 +516,8 @@ var addValidationRule = function addValidationRule(name, func) {
   _validationRules2.default[name] = func;
 };
 
-var withFormsy = _Wrapper2.default;
-
-var didWarnAboutWrapperDeprecation = false;
-
-var deprecatedWrapper = function deprecatedWrapper(Component) {
-  if (!didWarnAboutWrapperDeprecation) {
-    // eslint-disable-next-line no-console
-    console.warn('Wrapper has been renamed to withFormsy. Importing Wrapper from formsy-react is depreacted and will be removed in the future. Please rename your Wrapper imports to withFormsy.');
-    didWarnAboutWrapperDeprecation = true;
-  }
-
-  return withFormsy(Component);
-};
-
 exports.addValidationRule = addValidationRule;
 exports.propTypes = _Wrapper.propTypes;
 exports.validationRules = _validationRules2.default;
-exports.withFormsy = withFormsy;
-exports.Wrapper = deprecatedWrapper;
+exports.withFormsy = _Wrapper2.default;
 exports.default = Formsy;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formsy-react",
-  "version": "1.1.5",
+  "version": "2.0.0-beta.0",
   "description": "A form input builder and validator for React",
   "keywords": [
     "form",

src/Wrapper.js

@@ -175,22 +175,22 @@ export default (Component) => {
     render() {
       const { innerRef } = this.props;
       const propsForElement = {
-        getErrorMessage: this.getErrorMessage,
-        getErrorMessages: this.getErrorMessages,
-        getValue: this.getValue,
-        hasValue: this.hasValue,
-        isFormDisabled: this.isFormDisabled,
-        isValid: this.isValid,
-        isPristine: this.isPristine,
-        isFormSubmitted: this.isFormSubmitted,
-        isRequired: this.isRequired,
+        ...this.props,
+        errorMessage: this.getErrorMessage(),
+        errorMessages: this.getErrorMessages(),
+        hasValue: this.hasValue(),
+        isFormDisabled: this.isFormDisabled(),
+        isFormSubmitted: this.isFormSubmitted(),
+        isPristine: this.isPristine(),
+        isRequired: this.isRequired(),
+        isValid: this.isValid(),
         isValidValue: this.isValidValue,
         resetValue: this.resetValue,
         setValidations: this.setValidations,
         setValue: this.setValue,
-        showRequired: this.showRequired,
-        showError: this.showError,
-        ...this.props,
+        showError: this.showError(),
+        showRequired: this.showRequired(),
+        value: this.getValue(),
       };
 
       if (innerRef) {

src/index.js

@@ -272,7 +272,7 @@ class Formsy extends React.Component {
   validate = (component) => {
     // Trigger onChange
     if (this.state.canChange) {
-      this.props.onChange(this.getCurrentValues(), this.isChanged());
+      this.props.onChange(this.getModel(), this.isChanged());
     }
 
     const validation = this.runValidation(component);
@@ -451,26 +451,11 @@ const addValidationRule = (name, func) => {
   validationRules[name] = func;
 };
 
-const withFormsy = Wrapper;
-
-let didWarnAboutWrapperDeprecation = false;
-
-const deprecatedWrapper = (Component) => {
-  if (!didWarnAboutWrapperDeprecation) {
-    // eslint-disable-next-line no-console
-    console.warn('Wrapper has been renamed to withFormsy. Importing Wrapper from formsy-react is depreacted and will be removed in the future. Please rename your Wrapper imports to withFormsy.');
-    didWarnAboutWrapperDeprecation = true;
-  }
-
-  return withFormsy(Component);
-};
-
 export {
   addValidationRule,
   propTypes,
   validationRules,
-  withFormsy,
-  deprecatedWrapper as Wrapper,
+  Wrapper as withFormsy,
 };
 
 export default Formsy;

tests/Element-spec.js

@@ -3,13 +3,13 @@ import TestUtils from 'react-dom/test-utils';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import sinon from 'sinon';
 
-import Formsy, { withFormsy, Wrapper } from './..';
+import Formsy, { withFormsy } from './..';
 import TestInput, { InputFactory } from './utils/TestInput';
 import immediate from './utils/immediate';
 
 export default {
 
-  'should return passed and setValue() value when using getValue()': function (test) {
+  'should pass down correct value prop after using setValue()': function (test) {
 
     const form = TestUtils.renderIntoDocument(
       <Formsy>
@@ -33,34 +33,7 @@ export default {
             this.props.setValue(event.target.value, false);
         }
         render() {
-            return <input type="text" value={this.props.getValue()} onChange={this.updateValue}/>;
-        }
-    })
-    const form = TestUtils.renderIntoDocument(
-        <Formsy>
-            <Input name="foo" value="foo" innerRef="comp" />
-        </Formsy>
-    );
-    const inputComponent = TestUtils.findRenderedComponentWithType(form, Input);
-    const setStateSpy = sinon.spy(inputComponent, 'setState');
-    const inputElement = TestUtils.findRenderedDOMComponentWithTag(form, 'INPUT');
-
-    test.equal(setStateSpy.called, false);
-    TestUtils.Simulate.change(inputElement, {target: {value: 'foobar'}});
-    test.equal(setStateSpy.calledOnce, true);
-    test.equal(setStateSpy.calledWithExactly({ value: 'foobar' }), true);
-    test.done();
-
-  },
-
-  'Wrapper: should only set the value and not validate when calling setValue(val, false)': function (test) {
-
-    const Input = Wrapper(class TestInput extends React.Component {
-        updateValue = (event) => {
-            this.props.setValue(event.target.value, false);
-        }
-        render() {
-            return <input type="text" value={this.props.getValue()} onChange={this.updateValue}/>;
+            return <input type="text" value={this.props.value} onChange={this.updateValue}/>;
         }
     })
     const form = TestUtils.renderIntoDocument(
@@ -105,10 +78,10 @@ export default {
 
   'should return error message passed when calling getErrorMessage()': function (test) {
 
-    let getErrorMessage = null;
+    let errorMessage = null;
     const Input = InputFactory({
       componentDidMount: function() {
-        getErrorMessage = this.props.getErrorMessage;
+        errorMessage = this.props.errorMessage;
       }
     });
     TestUtils.renderIntoDocument(
@@ -117,7 +90,7 @@ export default {
       </Formsy>
     );
 
-    test.equal(getErrorMessage(), 'Has to be email');
+    test.equal(errorMessage, 'Has to be email');
 
     test.done();
 
@@ -127,8 +100,8 @@ export default {
 
     let isValid = null;
     const Input = InputFactory({
-      componentDidMount: function() {
-        isValid = this.props.isValid;
+      componentWillReceiveProps: function(nextProps) {
+        isValid = nextProps.isValid;
       }
     });
     const form = TestUtils.renderIntoDocument(
@@ -137,10 +110,10 @@ export default {
       </Formsy>
     );
 
-    test.equal(isValid(), false);
+    test.equal(isValid, false);
     const input = TestUtils.findRenderedDOMComponentWithTag(form, 'INPUT');
     TestUtils.Simulate.change(input, {target: {value: '[email protected]'}});
-    test.equal(isValid(), true);
+    test.equal(isValid, true);
 
     test.done();
 
@@ -162,9 +135,9 @@ export default {
       </Formsy>
     );
 
-    test.equal(isRequireds[0](), false);
-    test.equal(isRequireds[1](), true);
-    test.equal(isRequireds[2](), true);
+    test.equal(isRequireds[0], false);
+    test.equal(isRequireds[1], true);
+    test.equal(isRequireds[2], true);
 
     test.done();
 
@@ -186,9 +159,9 @@ export default {
       </Formsy>
     );
 
-    test.equal(showRequireds[0](), false);
-    test.equal(showRequireds[1](), true);
-    test.equal(showRequireds[2](), false);
+    test.equal(showRequireds[0], false);
+    test.equal(showRequireds[1], true);
+    test.equal(showRequireds[2], false);
 
     test.done();
 
@@ -198,8 +171,8 @@ export default {
 
     let isPristine = null;
     const Input = InputFactory({
-      componentDidMount: function() {
-        isPristine = this.props.isPristine;
+      componentWillReceiveProps: function(nextProps) {
+        isPristine = nextProps.isPristine;
       }
     });
     const form = TestUtils.renderIntoDocument(
@@ -208,10 +181,10 @@ export default {
       </Formsy>
     );
 
-    test.equal(isPristine(), true);
+    test.equal(isPristine, true);
     const input = TestUtils.findRenderedDOMComponentWithTag(form, 'INPUT');
     TestUtils.Simulate.change(input, {target: {value: 'foo'}});
-    test.equal(isPristine(), false);
+    test.equal(isPristine, false);
 
     test.done();
 
@@ -618,7 +591,7 @@ export default {
       shouldComponentUpdate: function() { return false },
       render: function() {
         renderSpy();
-        return <input type={this.props.type} value={this.props.getValue()} onChange={this.updateValue}/>;
+        return <input type={this.props.type} value={this.props.value} onChange={this.updateValue}/>;
       }
     });
 
@@ -637,21 +610,10 @@ export default {
   'binds all necessary methods': function (test) {
     const onInputRef = input => {
       [
-        'getErrorMessage',
-        'getErrorMessages',
-        'getValue',
-        'hasValue',
-        'isFormDisabled',
-        'isValid',
-        'isPristine',
-        'isFormSubmitted',
-        'isRequired',
         'isValidValue',
         'resetValue',
         'setValidations',
         'setValue',
-        'showRequired',
-        'showError',
       ].forEach(fnName => {
         const fn = input[fnName];
         try {

tests/Formsy-spec.js

@@ -415,6 +415,40 @@ export default {
 
   },
 
+  'onChange should honor dot notation transformations': function (test) {
+
+    const hasChanged = sinon.spy();
+    class TestForm extends React.Component {
+      state = {
+        showInput: false
+      }
+      addInput() {
+        this.setState({
+          showInput: true
+        })
+      }
+      render() {
+        return (
+          <Formsy onChange={hasChanged}>
+            {
+              this.state.showInput ?
+                <TestInput name="parent.child" value="test"/>
+              :
+                null
+            }
+          </Formsy>);
+      }
+    }
+
+    const form = TestUtils.renderIntoDocument(<TestForm/>);
+    form.addInput();
+    immediate(() => {
+      test.deepEqual(hasChanged.args[0][0], {parent: {child: 'test'}});
+      test.done();
+    });
+
+  },
+
   'Update a form': {
 
     'should allow elements to check if the form is disabled': function (test) {

tests/Rules-equals-spec.js

@@ -7,7 +7,7 @@ import { InputFactory } from './utils/TestInput';
 
 const TestInput = InputFactory({
   render: function() {
-    return <input value={this.props.getValue()} readOnly />;
+    return <input value={this.props.value} readOnly />;
   }
 });
 

tests/Rules-isAlpha-spec.js

@@ -6,7 +6,7 @@ import { InputFactory } from './utils/TestInput';
 
 const TestInput = InputFactory({
   render: function() {
-    return <input value={this.props.getValue()} readOnly />;
+    return <input value={this.props.value} readOnly />;
   }
 });