functionality and usability improvements, code updates

- add support of function-type `validations` property. in this case, form calls this function and uses it's return value as object that contains validation rules - update validator's #nested function to check for inner form's ref on parent form itself first, before checking it in form.refs, since the latter becomes deprecated. - rely on `update-js` package for `attrs` updating, since corresponding code was extracted to this package - other minor updates

Author: akuzko

.babelrc

@@ -1,7 +1,7 @@
 {
- presets: [
- 'es2015',
- 'react',
- 'stage-1'
+ "presets": [
+ "es2015",
+ "react",
+ "stage-1"
  ]
 }

.gitignore

@@ -3,4 +3,5 @@ lib
 demo/node_modules
 demo/dist
 
+.vscode
 .idea

CHANGELOG

@@ -1,4 +1,7 @@
 === master
+Migrate from React.PropTypes to prop-types (by @AleksandrZhukov)
+
+Fix flaw in readme code example (by @piton4eg)
 
 More minor code style updates
 

demo/src/components/Source.jsx

@@ -18,7 +18,7 @@ export default class Source extends PureComponent {
 
  componentDidUpdate() {
  if (this.state.open) {
- Prism.highlightElement(this.refs.prism);
+ Prism.highlightElement(this.prism);
  }
  }
 
@@ -39,7 +39,7 @@ export default class Source extends PureComponent {
  </div>
  <div className="source-code">
  {this.state.open &&
- <pre className="language-javascript" ref="prism">
+ <pre className="language-javascript" ref={prism => this.prism = prism}>
  <code className="language-javascript">{children}</code>
  </pre>
  }

demo/src/forms/Form10.jsx

@@ -75,7 +75,7 @@ const SOURCE = [['BaseForm.jsx', `
  {this.map('items', (_item, i) =>
  <div key={i}>
  <ItemForm
- ref={\`itemForm\${i}\`}
+ ref={form => this[\`itemForm\${i}\`] = form}
  {...$.nested(\`items.\${i}\`)}
  validateOnChange
  />
@@ -191,7 +191,7 @@ export default class Form10 extends BaseForm {
  {this.map('items', (_item, i) =>
  <div key={i} className="horizontal-container center bordered-form-item mb-20">
  <ItemForm
- ref={`itemForm${i}`}
+ ref={form => this[`itemForm${i}`] = form}
  {...$.nested(`items.${i}`)}
  validateOnChange
  />

package.json

@@ -7,7 +7,7 @@
  "build": "babel src --out-dir lib",
  "clear": "rimraf lib",
  "rebuild": "npm run clear && npm run build",
- "test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js",
+ "test": "mocha --compilers js:babel-register --require ./test/setup.js",
  "test:watch": "npm test -- --watch",
  "lint": "./node_modules/.bin/eslint src test demo/src --ext .js --ext .jsx"
  },
@@ -44,17 +44,18 @@
  "expect": "^1.20.2",
  "jsdom": "^9.8.0",
  "mocha": "^3.1.2",
- "prop-types": "^15.5.10",
+ "prop-types": "^15.5.7",
  "react": "^15.3.2",
  "react-addons-test-utils": "^15.3.2",
  "react-dom": "^15.3.2",
  "rimraf": "^2.5.4"
  },
  "dependencies": {
  "lodash.get": "^4.4.2",
- "lodash.set": "^4.3.2"
+ "update-js": "^1.0.0"
  },
  "peerDependencies": {
+ "prop-types": "^15.5.7",
  "react": "^0.14.8 || >=15.0.0",
  "react-dom": "^0.14.8 || >=15.0.0"
  }

src/Form.jsx

@@ -1,7 +1,8 @@
 import { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { update, noop, buildFormValidator, buildHandlersCache } from './utils';
+import { noop, buildFormValidator, buildHandlersCache } from './utils';
+import update from 'update-js';
 import get from 'lodash.get';
 
 export default class Form extends (PureComponent || Component) {
@@ -25,7 +26,6 @@ export default class Form extends (PureComponent || Component) {
  };
 
  state = { errors: {} };
- validations = {};
  validator = buildFormValidator(this);
  _handlersCache = buildHandlersCache();
 
@@ -91,15 +91,15 @@ export default class Form extends (PureComponent || Component) {
  _setObject(obj) {
  return this._set((attrs, errors) => {
  for (const name in obj) {
- update(attrs, name, obj[name], false);
+ update.in(attrs, name, obj[name]);
  this._updateErrors(errors, name, obj[name]);
  }
  });
  }
 
  _setAttr(name, value) {
  return this._set((attrs, errors) => {
- update(attrs, name, value, false);
+ update.in(attrs, name, value);
  this._updateErrors(errors, name, value);
  });
  }
@@ -133,7 +133,9 @@ export default class Form extends (PureComponent || Component) {
  }
 
  get _validations() {
- return this.props.validations || this.validations;
+ const validationz = this.props.validations || this.validations || {};
+
+ return typeof validationz === 'function' ? validationz.call(this) : validationz;
  }
 
  ifValid(callback) {
@@ -181,7 +183,7 @@ export default class Form extends (PureComponent || Component) {
  const ary = this.get(name);
 
  return this._set((attrs, errors) => {
- update(attrs, name, [...ary.slice(0, i), ...ary.slice(i + 1)]);
+ update.in(attrs, name, [...ary.slice(0, i), ...ary.slice(i + 1)]);
  this._updateErrors(errors, `${name}.${i}`, null);
  });
  }

src/utils.js

@@ -1,6 +1,4 @@
 /* global WeakMap */
-import set from 'lodash.set';
-
 export function noop(){}
 
 export function bindState(component, key = 'form') {
@@ -10,33 +8,6 @@ export function bindState(component, key = 'form') {
  };
 }
 
-export function update(obj, name, value) {
- _update(obj, name, value);
-
- return obj;
-}
-
-export function updated(obj, name, value) {
- const current = { ...obj };
-
- return update(current, name, value);
-}
-
-function _update(current, name, value) {
- const match = name.match(/^([\w\d]+)\.?(.+)?$/);
- const { 1: key, 2: rest } = match;
-
- if (current[key] === undefined) {
- return set(current, name.split('.'), value);
- }
- if (!rest) {
- return current[key] = value;
- }
-
- current[key] = Array.isArray(current[key]) ? [...current[key]] : { ...current[key] };
- _update(current[key], rest, value);
-}
-
 function wildcard(name) {
  return name.replace(/\d+/g, '*');
 }
@@ -109,7 +80,8 @@ export function buildFormValidator(form) {
  return message;
  },
  nested(ref) {
- const errors = form.refs[ref].performValidation();
+ const nestedForm = form[ref] || form.refs[ref];
+ const errors = nestedForm.performValidation();
 
  if (Object.getOwnPropertyNames(errors).length > 0) {
  this.addError(ref, 'invalid');

test/Form.test.js

@@ -266,6 +266,38 @@ describe('<Form />', function() {
  'foo': 'cannot be blank'
  });
  });
+
+ context('when validations property is a function', function() {
+ beforeEach(function() {
+ TestForm = class extends Form {
+ validations() {
+ return {
+ 'foo'(value) {
+ if (!value) return 'cannot be blank';
+ }
+ };
+ };
+
+ render() {
+ return (
+ <div>
+ <Input {...this.$('foo')} className="foo" />
+ </div>
+ );
+ }
+ };
+
+ this.currentTest.wrapper = mount(<Container />);
+ });
+
+ it('calls validations function and performs validation according to result', function() {
+ this.test.wrapper.instance().refs.form.performValidation();
+
+ expect(this.test.wrapper.instance().refs.form.state.errors).toMatch({
+ 'foo': 'cannot be blank'
+ });
+ });
+ });
  });
 
  context('common case with wildcards', function() {

test/utils.test.js

@@ -1,43 +1,9 @@
 import React, { Component } from 'react';
 import Form from '../src/Form';
-import { bindState, updated, buildHandlersCache } from '../src/utils';
+import { bindState, buildHandlersCache } from '../src/utils';
 import { shallow } from 'enzyme';
 import expect from 'expect';
 
-describe('updated', function() {
- it('carefully sets deeply nested item: deeply nested array', function() {
- const obj = { foo: { bar: { baz: [1, 2, 3] } }, bak: { big: 1 } };
- const upd = updated(obj, 'foo.bar.baz.1', 4);
-
- expect(obj === upd).toBe(false, 'obj should not be updated in place');
- expect(obj.foo === upd.foo).toBe(false, 'obj.foo should not be updated in place');
- expect(obj.foo.bar === upd.foo.bar).toBe(false, 'obj.foo.bar should not be updated in place');
- expect(obj.foo.bar.baz === upd.foo.bar.baz).toBe(false, 'obj.foo.bar.baz should not be updated in place');
- expect(obj.bak === upd.bak).toBe(true, 'obj.bak should not be cloned');
- expect(upd.foo.bar.baz).toMatch([1, 4, 3], 'value under desired name should be updated');
- });
-
- it('carefully sets deeply nested item: deeply nested object', function() {
- const obj = { foo: { bar: [{ baz: 'baz1' }, { baz: 'baz2' }] }, bak: { big: 1 } };
- const upd = updated(obj, 'foo.bar.1.baz', 'baz3');
-
- expect(obj === upd).toBe(false, 'obj should not be updated in place');
- expect(obj.foo === upd.foo).toBe(false, 'obj.foo should not be updated in place');
- expect(obj.foo.bar === upd.foo.bar).toBe(false, 'obj.foo.bar should not be updated in place');
- expect(obj.foo.bar[0] === upd.foo.bar[0]).toBe(true, 'obj.foo.bar items should not be cloned');
- expect(obj.bak === upd.bak).toBe(true, 'obj.bak should not be cloned');
- expect(upd.foo.bar[1]).toMatch({ baz: 'baz3' }, 'value under desired name should be updated');
- });
-
- it('carefully sets deeply nested item, path collections are not defined', function() {
- const obj = { bak: { big: 1 } };
- const upd = updated(obj, 'foo.bar.baz.1', 4);
-
- expect(obj.bak === upd.bak).toBe(true, 'obj.bak should not be cloned');
- expect(upd.foo.bar.baz).toMatch([undefined, 4], 'value under desired name should be updated');
- });
-});
-
 describe('bindState', function() {
  class Page extends Component {
  render() {