Merge v2.0 branch (#135)

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 />;
  }
 });