diff --git a/.travis.yml b/.travis.yml index 50a1d86..e616d52 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,6 @@ language: node_js node_js: - - "0.12" - - "0.11" - - "0.10" + - 'iojs' + - '0.12' + - '0.11' + - '0.10' diff --git a/README.md b/README.md index 560a5ec..cfb203b 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,11 @@ This code results in a form with a submit button that will run the `submit` meth ``` The form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value. +## Related projects +- [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form +- ... +- Send PR for adding your project to this list! + ## Contribute - Fork repo - `npm install` diff --git a/examples/custom-validation/app.js b/examples/custom-validation/app.js index 6262315..72ad9fe 100644 --- a/examples/custom-validation/app.js +++ b/examples/custom-validation/app.js @@ -1,5 +1,5 @@ var React = require('react'); -var Formsy = require('./../..'); +var Formsy = require('formsy-react'); var currentYear = new Date().getFullYear(); @@ -120,4 +120,4 @@ var Validations = React.createClass({ } }); -React.render(, document.getElementById('example')); \ No newline at end of file +React.render(, document.getElementById('example')); diff --git a/examples/login/app.js b/examples/login/app.js index 8b1a4f7..24439c2 100644 --- a/examples/login/app.js +++ b/examples/login/app.js @@ -1,5 +1,5 @@ var React = require('react'); -var Formsy = require('./../..'); +var Formsy = require('formsy-react'); var App = React.createClass({ getInitialState: function() { @@ -34,7 +34,7 @@ var MyOwnInput = React.createClass({ // Add the Formsy Mixin mixins: [Formsy.Mixin], - // setValue() will set the value of the component, which in + // setValue() will set the value of the component, which in // turn will validate it and the rest of the form changeValue: function (event) { this.setValue(event.currentTarget.value); @@ -42,9 +42,9 @@ var MyOwnInput = React.createClass({ render: function () { // Set a specific className based on the validation - // state of this component. showRequired() is true - // when the value is empty and the required prop is - // passed to the input. showError() is true when the + // state of this component. showRequired() is true + // when the value is empty and the required prop is + // passed to the input. showError() is true when the // value typed is invalid var className = this.props.className + ' ' + (this.showRequired() ? 'required' : this.showError() ? 'error' : null); @@ -62,4 +62,4 @@ var MyOwnInput = React.createClass({ } }); -React.render(, document.getElementById('example')); \ No newline at end of file +React.render(, document.getElementById('example')); diff --git a/examples/webpack.config.js b/examples/webpack.config.js index eb06ae3..ca9992b 100644 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -13,8 +13,9 @@ module.exports = { entry: fs.readdirSync(__dirname).reduce(function (entries, dir) { var isDraft = dir.charAt(0) === '_'; - if (!isDraft && isDirectory(path.join(__dirname, dir))) + if (!isDraft && isDirectory(path.join(__dirname, dir))) { entries[dir] = path.join(__dirname, dir, 'app.js'); + } return entries; }, {}), @@ -28,13 +29,13 @@ module.exports = { module: { loaders: [ - { test: /\.js$/, exclude: /node_modules/, loader: 'jsx-loader' } + { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }, resolve: { alias: { - 'react-router': '../../modules/index' + 'formsy-react': '../../src/main' } }, @@ -45,4 +46,4 @@ module.exports = { }) ] -}; \ No newline at end of file +}; diff --git a/specs/Utils-spec.jsx b/specs/Utils-spec.jsx index 8829524..c8dbe7c 100644 --- a/specs/Utils-spec.jsx +++ b/specs/Utils-spec.jsx @@ -11,9 +11,21 @@ describe('Utils', function() { var objD = [{ foo: ['bar'] }]; + var objE, objF; + var objG = null; + var objH = null; + expect(utils.isSame(objA, objB)).toBe(true); expect(utils.isSame(objC, objD)).toBe(true); expect(utils.isSame(objA, objD)).toBe(false); + + expect(utils.isSame(objE, objF)).toBe(true); + expect(utils.isSame(objA, objF)).toBe(false); + expect(utils.isSame(objE, objA)).toBe(false); + + expect(utils.isSame(objG, objH)).toBe(true); + expect(utils.isSame(objA, objH)).toBe(false); + expect(utils.isSame(objG, objA)).toBe(false); }); diff --git a/src/main.js b/src/main.js index 8d96a98..f6d94e7 100644 --- a/src/main.js +++ b/src/main.js @@ -136,7 +136,7 @@ Formsy.Form = React.createClass({ var component = this.inputs[name]; if (!component) { - throw new Error('You are trying to update an input that does not exists. Verify errors object with input names. ' + JSON.stringify(errors)); + throw new Error('You are trying to update an input that does not exist. Verify errors object with input names. ' + JSON.stringify(errors)); } var args = [{ diff --git a/src/utils.js b/src/utils.js index e8018ea..074885d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -12,6 +12,7 @@ module.exports = { } return isDifferent; }, + objectsDiffer: function (a, b) { var isDifferent = false; if (Object.keys(a).length !== Object.keys(b).length) { @@ -23,13 +24,15 @@ module.exports = { } }, this); } - return isDifferent; + return isDifferent; }, - isSame: function (a, b) { - if (Array.isArray(a)) { + isSame: function (a, b) { + if (typeof a !== typeof b) { + return false; + } else if (Array.isArray(a)) { return !this.arraysDiffer(a, b); - } else if (typeof a === 'object' && a !== null) { + } else if (typeof a === 'object' && a !== null && b !== null) { return !this.objectsDiffer(a, b); }