react-final-form - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/react-final-form.cjs.js

@@ -297,3 +297,4 @@ 'use strict';
           value = _state$state.value,
-          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value']);
+          ignoreName = _state$state.name,
+          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value', 'name']);
 
@@ -304,2 +305,3 @@ if (value === undefined || value === null && !allowNull) {
       var input = _extends({ name: name, value: value }, this.handlers);
+      warning(!_value || rest.type === 'radio' && component === 'input', 'The value prop on Field is ONLY for use with component="input" and type="radio".');
       if (rest.type === 'checkbox') {
@@ -356,3 +358,3 @@ input.checked = !!value;
 //      
-var version$1 = '1.0.0';
+var version$1 = '1.2.0';
 
@@ -384,2 +386,3 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
         debug = props.debug,
+        decorators = props.decorators,
         initialValues = props.initialValues,
@@ -408,10 +411,18 @@ mutators = props.mutators,
     var initialState = void 0;
-    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
-      if (initialState) {
-        _this.notify(state);
-      } else {
-        initialState = state;
-      }
-    }, subscription || all$1);
+    _this.unsubscriptions = [];
+    if (_this.form) {
+      _this.unsubscriptions.push(_this.form.subscribe(function (state) {
+        if (initialState) {
+          _this.notify(state);
+        } else {
+          initialState = state;
+        }
+      }, subscription || all$1));
+    }
     _this.state = { state: initialState };
+    if (decorators) {
+      decorators.forEach(function (decorator) {
+        _this.unsubscriptions.push(decorator(_this.form));
+      });
+    }
     return _this;
@@ -437,3 +448,5 @@ }
     value: function componentWillUnmount() {
-      this.unsubscribe();
+      this.unsubscriptions.forEach(function (unsubscribe) {
+        return unsubscribe();
+      });
     }
@@ -490,3 +503,6 @@ }, {
     _this.notify = function (state) {
-      return _this.setState({ state: state });
+      _this.setState({ state: state });
+      if (_this.props.onChange) {
+        _this.props.onChange(state);
+      }
     };
@@ -503,2 +519,5 @@
           initialState = state;
+          if (props.onChange) {
+            props.onChange(state);
+          }
         }
@@ -533,6 +552,7 @@ });
       var _props = this.props,
+          onChange = _props.onChange,
           subscription = _props.subscription,
-          rest = objectWithoutProperties(_props, ['subscription']);
+          rest = objectWithoutProperties(_props, ['onChange', 'subscription']);
 
-      return renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+      return onChange ? null : renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
     }
@@ -539,0 +559,0 @@ }]);

dist/react-final-form.es.js

@@ -291,3 +291,4 @@ import { PureComponent, createElement } from 'react';
           value = _state$state.value,
-          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value']);
+          ignoreName = _state$state.name,
+          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value', 'name']);
 
@@ -298,2 +299,3 @@ if (value === undefined || value === null && !allowNull) {
       var input = _extends({ name: name, value: value }, this.handlers);
+      warning(!_value || rest.type === 'radio' && component === 'input', 'The value prop on Field is ONLY for use with component="input" and type="radio".');
       if (rest.type === 'checkbox') {
@@ -350,3 +352,3 @@ input.checked = !!value;
 //      
-var version$1 = '1.0.0';
+var version$1 = '1.2.0';
 
@@ -378,2 +380,3 @@ var all$1 = formSubscriptionItems.reduce(function (result, key) {
         debug = props.debug,
+        decorators = props.decorators,
         initialValues = props.initialValues,
@@ -402,10 +405,18 @@ mutators = props.mutators,
     var initialState = void 0;
-    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
-      if (initialState) {
-        _this.notify(state);
-      } else {
-        initialState = state;
-      }
-    }, subscription || all$1);
+    _this.unsubscriptions = [];
+    if (_this.form) {
+      _this.unsubscriptions.push(_this.form.subscribe(function (state) {
+        if (initialState) {
+          _this.notify(state);
+        } else {
+          initialState = state;
+        }
+      }, subscription || all$1));
+    }
     _this.state = { state: initialState };
+    if (decorators) {
+      decorators.forEach(function (decorator) {
+        _this.unsubscriptions.push(decorator(_this.form));
+      });
+    }
     return _this;
@@ -431,3 +442,5 @@ }
     value: function componentWillUnmount() {
-      this.unsubscribe();
+      this.unsubscriptions.forEach(function (unsubscribe) {
+        return unsubscribe();
+      });
     }
@@ -484,3 +497,6 @@ }, {
     _this.notify = function (state) {
-      return _this.setState({ state: state });
+      _this.setState({ state: state });
+      if (_this.props.onChange) {
+        _this.props.onChange(state);
+      }
     };
@@ -497,2 +513,5 @@
           initialState = state;
+          if (props.onChange) {
+            props.onChange(state);
+          }
         }
@@ -527,6 +546,7 @@ });
       var _props = this.props,
+          onChange = _props.onChange,
           subscription = _props.subscription,
-          rest = objectWithoutProperties(_props, ['subscription']);
+          rest = objectWithoutProperties(_props, ['onChange', 'subscription']);
 
-      return renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+      return onChange ? null : renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
     }
@@ -533,0 +553,0 @@ }]);

dist/react-final-form.umd.js

@@ -294,3 +294,4 @@ (function (global, factory) {
           value = _state$state.value,
-          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value']);
+          ignoreName = _state$state.name,
+          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value', 'name']);
 
@@ -301,2 +302,3 @@ if (value === undefined || value === null && !allowNull) {
       var input = _extends({ name: name, value: value }, this.handlers);
+      warning(!_value || rest.type === 'radio' && component === 'input', 'The value prop on Field is ONLY for use with component="input" and type="radio".');
       if (rest.type === 'checkbox') {
@@ -353,3 +355,3 @@ input.checked = !!value;
 //      
-var version$1 = '1.0.0';
+var version$1 = '1.2.0';
 
@@ -381,2 +383,3 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
         debug = props.debug,
+        decorators = props.decorators,
         initialValues = props.initialValues,
@@ -405,10 +408,18 @@ mutators = props.mutators,
     var initialState = void 0;
-    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
-      if (initialState) {
-        _this.notify(state);
-      } else {
-        initialState = state;
-      }
-    }, subscription || all$1);
+    _this.unsubscriptions = [];
+    if (_this.form) {
+      _this.unsubscriptions.push(_this.form.subscribe(function (state) {
+        if (initialState) {
+          _this.notify(state);
+        } else {
+          initialState = state;
+        }
+      }, subscription || all$1));
+    }
     _this.state = { state: initialState };
+    if (decorators) {
+      decorators.forEach(function (decorator) {
+        _this.unsubscriptions.push(decorator(_this.form));
+      });
+    }
     return _this;
@@ -434,3 +445,5 @@ }
     value: function componentWillUnmount() {
-      this.unsubscribe();
+      this.unsubscriptions.forEach(function (unsubscribe) {
+        return unsubscribe();
+      });
     }
@@ -487,3 +500,6 @@ }, {
     _this.notify = function (state) {
-      return _this.setState({ state: state });
+      _this.setState({ state: state });
+      if (_this.props.onChange) {
+        _this.props.onChange(state);
+      }
     };
@@ -500,2 +516,5 @@
           initialState = state;
+          if (props.onChange) {
+            props.onChange(state);
+          }
         }
@@ -530,6 +549,7 @@ });
       var _props = this.props,
+          onChange = _props.onChange,
           subscription = _props.subscription,
-          rest = objectWithoutProperties(_props, ['subscription']);
+          rest = objectWithoutProperties(_props, ['onChange', 'subscription']);
 
-      return renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+      return onChange ? null : renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
     }
@@ -536,0 +556,0 @@ }]);

dist/react-final-form.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],e):e(t["react-final-form"]={},t.React,t.PropTypes,t.FinalForm)}(this,function(t,e,n,r){"use strict";function i(t,n){var r=t.render,i=t.children,o=t.component,a=p(t,["render","children","component"]);return o?e.createElement(o,l({},a,{children:i})):r?r(l({},a,{children:i})):"function"!=typeof i?null:i(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var o=function(t,e){},a=function(t,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e},u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},p=function(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},m=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,v=function(t,e){if(!e&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(e&&t.nativeEvent)return t.nativeEvent.text;var n=t.target,r=n.type,i=n.value,o=n.checked;switch(r){case"checkbox":return!!o;case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var r=t[n];r.selected&&e.push(r.value)}return e}(t.target.options);default:return i}},h=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),d=function(t){function n(t,e){s(this,n);var r=m(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,e));r.subscribe=function(t,e){var n=t.name,i=t.subscription;r.unsubscribe=r.context.reactFinalForm.registerField(n,e,i||h,r.validate)},r.validate=function(t,e){return r.props.validate&&r.props.validate(t,e)},r.notify=function(t){return r.setState({state:t})},r.handlers={onBlur:function(t){r.state.state.blur()},onChange:function(t){var e=t&&t.target?v(t,b):t;r.state.state.change(""===e?void 0:e)},onFocus:function(t){r.state.state.focus()}};var i=void 0;return o(e.reactFinalForm,"Field must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){i?r.notify(t):i=t}),r.state={state:i||{}},r}return f(n,t),c(n,[{key:"componentWillReceiveProps",value:function(t){var e=t.name,n=t.subscription;(this.props.name!==e||a(this.props.subscription,n,r.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,n=t.name,r=t.component,o=t.children,a=t.allowNull,u=(t.subscription,t.validate,t.value),s=p(t,["name","component","children","allowNull","subscription","validate","value"]),c=this.state.state,f=(c.blur,c.change,c.focus,c.value),m=p(c,["blur","change","focus","value"]);(void 0===f||null===f&&!a)&&(f="");var b=l({name:n,value:f},this.handlers);return"checkbox"===s.type?b.checked=!!f:"radio"===s.type&&(b.checked=f===u,b.value=u),"select"===r&&s.multiple&&(b.value=b.value||[]),"function"==typeof o?o(l({input:b,meta:m},s)):"string"==typeof r?e.createElement(r,l({},b,{children:o},s)):i(l({input:b,meta:m,children:o,component:r},s))}}]),n}(e.PureComponent);d.contextTypes={reactFinalForm:n.object};var y=r.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),F=function(t){function e(t){s(this,e);var n=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));n.notify=function(t){return n.setState({state:t})},n.handleSubmit=function(t){return t.preventDefault(),n.form.submit()};t.children,t.component;var i=t.debug,a=t.initialValues,u=t.mutators,c=t.onSubmit,l=(t.render,t.subscription),f={debug:i,initialValues:a,mutators:u,onSubmit:c,validate:t.validate,validateOnBlur:t.validateOnBlur};try{n.form=r.createForm(f)}catch(t){o(!1,t.message)}var p=void 0;return n.unsubscribe=n.form&&n.form.subscribe(function(t){p?n.notify(t):p=t},l||y),n.state={state:p},n}return f(e,t),c(e,[{key:"getChildContext",value:function(){return{reactFinalForm:this.form}}},{key:"componentWillReceiveProps",value:function(t){(function(t,e){if(t===e)return!0;if("object"!==(void 0===t?"undefined":u(t))||!t||"object"!==(void 0===e?"undefined":u(e))||!e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var i=Object.prototype.hasOwnProperty.bind(e),o=0;o<n.length;o++){var a=n[o];if(!i(a)||t[a]!==e[a])return!1}return!0})(this.props.initialValues,t.initialValues)||this.form.initialize(t.initialValues)}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,p(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"]));return i(l({},e,this.state.state,{mutators:this.form&&this.form.mutators,batch:this.form&&this.form.batch,blur:this.form&&this.form.blur,change:this.form&&this.form.change,focus:this.form&&this.form.focus,handleSubmit:this.handleSubmit,initialize:this.form&&this.form.initialize,reset:this.form&&this.form.reset}))}}]),e}(e.PureComponent);F.childContextTypes={reactFinalForm:n.object},F.displayName="ReactFinalForm("+r.version+")(1.0.0)";var g=function(t){function e(t,n){s(this,e);var r=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));r.subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.context.reactFinalForm.subscribe(e,n||y)},r.notify=function(t){return r.setState({state:t})};var i=void 0;return o(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){i?r.notify(t):i=t}),r.state={state:i},r}return f(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;a(this.props.subscription,e,r.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=(t.subscription,p(t,["subscription"]));return i(l({},e,this.state.state))}}]),e}(e.PureComponent);g.contextTypes={reactFinalForm:n.object},t.Field=d,t.Form=F,t.version="1.0.0",t.FormSpy=g,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],e):e(t["react-final-form"]={},t.React,t.PropTypes,t.FinalForm)}(this,function(t,e,n,r){"use strict";function o(t,n){var r=t.render,o=t.children,i=t.component,a=p(t,["render","children","component"]);return i?e.createElement(i,l({},a,{children:o})):r?r(l({},a,{children:o})):"function"!=typeof o?null:o(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(t,e){},a=function(t,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e},u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},p=function(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},m=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,h=function(t,e){if(!e&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(e&&t.nativeEvent)return t.nativeEvent.text;var n=t.target,r=n.type,o=n.value,i=n.checked;switch(r){case"checkbox":return!!i;case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var r=t[n];r.selected&&e.push(r.value)}return e}(t.target.options);default:return o}},v=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),d=function(t){function n(t,e){s(this,n);var r=m(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,e));r.subscribe=function(t,e){var n=t.name,o=t.subscription;r.unsubscribe=r.context.reactFinalForm.registerField(n,e,o||v,r.validate)},r.validate=function(t,e){return r.props.validate&&r.props.validate(t,e)},r.notify=function(t){return r.setState({state:t})},r.handlers={onBlur:function(t){r.state.state.blur()},onChange:function(t){var e=t&&t.target?h(t,b):t;r.state.state.change(""===e?void 0:e)},onFocus:function(t){r.state.state.focus()}};var o=void 0;return i(e.reactFinalForm,"Field must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){o?r.notify(t):o=t}),r.state={state:o||{}},r}return f(n,t),c(n,[{key:"componentWillReceiveProps",value:function(t){var e=t.name,n=t.subscription;(this.props.name!==e||a(this.props.subscription,n,r.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,n=t.name,r=t.component,i=t.children,a=t.allowNull,u=(t.subscription,t.validate,t.value),s=p(t,["name","component","children","allowNull","subscription","validate","value"]),c=this.state.state,f=(c.blur,c.change,c.focus,c.value),m=(c.name,p(c,["blur","change","focus","value","name"]));(void 0===f||null===f&&!a)&&(f="");var b=l({name:n,value:f},this.handlers);return"checkbox"===s.type?b.checked=!!f:"radio"===s.type&&(b.checked=f===u,b.value=u),"select"===r&&s.multiple&&(b.value=b.value||[]),"function"==typeof i?i(l({input:b,meta:m},s)):"string"==typeof r?e.createElement(r,l({},b,{children:i},s)):o(l({input:b,meta:m,children:i,component:r},s))}}]),n}(e.PureComponent);d.contextTypes={reactFinalForm:n.object};var y=r.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),F=function(t){function e(t){s(this,e);var n=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));n.notify=function(t){return n.setState({state:t})},n.handleSubmit=function(t){return t.preventDefault(),n.form.submit()};t.children,t.component;var o=t.debug,a=t.decorators,u=t.initialValues,c=t.mutators,l=t.onSubmit,f=(t.render,t.subscription),p={debug:o,initialValues:u,mutators:c,onSubmit:l,validate:t.validate,validateOnBlur:t.validateOnBlur};try{n.form=r.createForm(p)}catch(t){i(!1,t.message)}var b=void 0;return n.unsubscriptions=[],n.form&&n.unsubscriptions.push(n.form.subscribe(function(t){b?n.notify(t):b=t},f||y)),n.state={state:b},a&&a.forEach(function(t){n.unsubscriptions.push(t(n.form))}),n}return f(e,t),c(e,[{key:"getChildContext",value:function(){return{reactFinalForm:this.form}}},{key:"componentWillReceiveProps",value:function(t){(function(t,e){if(t===e)return!0;if("object"!==(void 0===t?"undefined":u(t))||!t||"object"!==(void 0===e?"undefined":u(e))||!e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var o=Object.prototype.hasOwnProperty.bind(e),i=0;i<n.length;i++){var a=n[i];if(!o(a)||t[a]!==e[a])return!1}return!0})(this.props.initialValues,t.initialValues)||this.form.initialize(t.initialValues)}},{key:"componentWillUnmount",value:function(){this.unsubscriptions.forEach(function(t){return t()})}},{key:"render",value:function(){var t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,p(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"]));return o(l({},e,this.state.state,{mutators:this.form&&this.form.mutators,batch:this.form&&this.form.batch,blur:this.form&&this.form.blur,change:this.form&&this.form.change,focus:this.form&&this.form.focus,handleSubmit:this.handleSubmit,initialize:this.form&&this.form.initialize,reset:this.form&&this.form.reset}))}}]),e}(e.PureComponent);F.childContextTypes={reactFinalForm:n.object},F.displayName="ReactFinalForm("+r.version+")(1.2.0)";var g=function(t){function e(t,n){s(this,e);var r=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));r.subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.context.reactFinalForm.subscribe(e,n||y)},r.notify=function(t){r.setState({state:t}),r.props.onChange&&r.props.onChange(t)};var o=void 0;return i(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(e){o?r.notify(e):(o=e,t.onChange&&t.onChange(e))}),r.state={state:o},r}return f(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;a(this.props.subscription,e,r.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=t.onChange,n=(t.subscription,p(t,["onChange","subscription"]));return e?null:o(l({},n,this.state.state))}}]),e}(e.PureComponent);g.contextTypes={reactFinalForm:n.object},t.Field=d,t.Form=F,t.version="1.2.0",t.FormSpy=g,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=react-final-form.umd.min.js.map

package.json

 {
   "name": "react-final-form",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description":
@@ -20,8 +20,8 @@ "🏁 High performance subscription-based form state management for React",
     "type": "git",
-    "url": "https://github.com/erikras/react-final-form.git"
+    "url": "https://github.com/final-form/react-final-form.git"
   },
   "bugs": {
-    "url": "https://github.com/erikras/react-final-form/issues"
+    "url": "https://github.com/final-form/react-final-form/issues"
   },
-  "homepage": "https://github.com/erikras/react-final-form#readme",
+  "homepage": "https://github.com/final-form/react-final-form#readme",
   "devDependencies": {
@@ -44,3 +44,3 @@ "babel-eslint": "^8.0.3",
     "eslint-plugin-react": "^7.4.0",
-    "final-form": "^1.2.0",
+    "final-form": "^1.3.0",
     "flow": "^0.2.3",
@@ -68,3 +68,3 @@ "flow-bin": "^0.60.1",
   "peerDependencies": {
-    "final-form": "^1.2.0",
+    "final-form": "^1.3.0",
     "prop-types": "^15.6.0",
@@ -71,0 +71,0 @@ "react": "^15.0.0-0 || ^16.0.0-0"

README.md

@@ -7,4 +7,4 @@ # 🏁 React Final Form
 [![NPM Downloads](https://img.shields.io/npm/dm/react-final-form.svg?style=flat)](https://www.npmjs.com/package/react-final-form)
-[![Build Status](https://img.shields.io/travis/erikras/react-final-form/v6.svg?style=flat)](https://travis-ci.org/erikras/react-final-form)
-[![codecov.io](https://codecov.io/gh/erikras/react-final-form/branch/master/graph/badge.svg)](https://codecov.io/gh/erikras/react-final-form)
+[![Build Status](https://travis-ci.org/final-form/react-final-form.svg?branch=master)](https://travis-ci.org/final-form/react-final-form)
+[![codecov.io](https://codecov.io/gh/final-form/react-final-form/branch/master/graph/badge.svg)](https://codecov.io/gh/final-form/react-final-form)
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
@@ -15,7 +15,7 @@
 ✅ Only peer dependencies: React and
-[🏁 Final Form](https://github.com/erikras/final-form#-final-form)
+[🏁 Final Form](https://github.com/final-form/final-form#-final-form)
 
 ✅ Opt-in subscriptions - only update on the state you need!
 
-✅ 💥 **2.2k gzipped** 💥
+✅ 💥 **2.5k gzipped** 💥
 
@@ -121,2 +121,3 @@ ---
   * [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
+  * [Independent Error Component](#independent-error-component)
   * [Loading and Initializing Values](#loading-and-initializing-values)
@@ -163,2 +164,3 @@ * [Field Arrays](#field-arrays)
     * [`debug?: DebugFunction`](#debug-debugfunction)
+    * [`decorators?: Decorator[]`](#decorators-decorator)
     * [`initialValues?: Object`](#initialvalues-object)
@@ -183,4 +185,5 @@ * [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
     * [`component?: React.ComponentType<FormSpyRenderProps>`](#component-reactcomponenttypeformspyrenderprops)
+    * [`onChange?: (formState: FormState) => void`](#onchange-formstate-formstate--void)
     * [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
-    * [`formSubscription?: FormSubscription`](#formsubscription-formsubscription)
+    * [`subscription?: FormSubscription`](#subscription-formsubscription-1)
   * [`FormSpyRenderProps`](#formspyrenderprops)
@@ -239,2 +242,7 @@
 
+### [Independent Error Component](https://codesandbox.io/s/xoo3xq654p)
+
+Demonstrates how to make an independent Error component to subscribe to and
+display the error for any form field.
+
 ### [Loading and Initializing Values](https://codesandbox.io/s/91w9ro3x9o)
@@ -248,3 +256,3 @@
 Demostrates how to use the `<FieldArray/>` component, from
-[`react-final-form-arrays`](https://github.com/erikras/react-final-form-arrays),
+[`react-final-form-arrays`](https://github.com/final-form/react-final-form-arrays),
 to render an array of inputs, as well as use `push`, `pop`, and `remove`
@@ -325,7 +333,7 @@ mutations.
 A
-[`FieldSubscription`](https://github.com/erikras/final-form#fieldsubscription--string-boolean-)
+[`FieldSubscription`](https://github.com/final-form/final-form#fieldsubscription--string-boolean-)
 that selects of all the items of
-[`FieldState`](https://github.com/erikras/final-form#fieldstate) that you wish
-to update for. If you don't pass a `subscription` prop, it defaults to _all_ of
-[`FieldState`](https://github.com/erikras/final-form#fieldstate).
+[`FieldState`](https://github.com/final-form/final-form#fieldstate) that you
+wish to update for. If you don't pass a `subscription` prop, it defaults to
+_all_ of [`FieldState`](https://github.com/final-form/final-form#fieldstate).
 
@@ -382,51 +390,51 @@ #### `validate?: (value: ?any, allValues: Object) => ?any`
 
-[See the 🏁 Final Form docs on `active`](https://github.com/erikras/final-form#active-boolean).
+[See the 🏁 Final Form docs on `active`](https://github.com/final-form/final-form#active-boolean).
 
 #### `meta.data: Object`
 
-[See the 🏁 Final Form docs on `data`](https://github.com/erikras/final-form#data-object).
+[See the 🏁 Final Form docs on `data`](https://github.com/final-form/final-form#data-object).
 
 #### `meta.dirty?: boolean`
 
-[See the 🏁 Final Form docs on `dirty`](https://github.com/erikras/final-form#dirty-boolean).
+[See the 🏁 Final Form docs on `dirty`](https://github.com/final-form/final-form#dirty-boolean).
 
 #### `meta.error?: any`
 
-[See the 🏁 Final Form docs on `error`](https://github.com/erikras/final-form#error-any).
+[See the 🏁 Final Form docs on `error`](https://github.com/final-form/final-form#error-any).
 
 #### `meta.initial?: any`
 
-[See the 🏁 Final Form docs on `initial`](https://github.com/erikras/final-form#initial-any).
+[See the 🏁 Final Form docs on `initial`](https://github.com/final-form/final-form#initial-any).
 
 #### `meta.invalid?: boolean`
 
-[See the 🏁 Final Form docs on `invalid`](https://github.com/erikras/final-form#invalid-boolean).
+[See the 🏁 Final Form docs on `invalid`](https://github.com/final-form/final-form#invalid-boolean).
 
 #### `meta.pristine?: boolean`
 
-[See the 🏁 Final Form docs on `pristine`](https://github.com/erikras/final-form#pristine-boolean).
+[See the 🏁 Final Form docs on `pristine`](https://github.com/final-form/final-form#pristine-boolean).
 
 #### `meta.submitError?: any`
 
-[See the 🏁 Final Form docs on `submitError`](https://github.com/erikras/final-form#submiterror-any).
+[See the 🏁 Final Form docs on `submitError`](https://github.com/final-form/final-form#submiterror-any).
 
 #### `meta.submitFailed?: boolean`
 
-[See the 🏁 Final Form docs on `submitFailed`](https://github.com/erikras/final-form#submitfailed-boolean).
+[See the 🏁 Final Form docs on `submitFailed`](https://github.com/final-form/final-form#submitfailed-boolean).
 
 #### `meta.submitSucceeded?: boolean`
 
-[See the 🏁 Final Form docs on `submitSucceeded`](https://github.com/erikras/final-form#submitsucceeded-boolean).
+[See the 🏁 Final Form docs on `submitSucceeded`](https://github.com/final-form/final-form#submitsucceeded-boolean).
 
 #### `meta.touched?: boolean`
 
-[See the 🏁 Final Form docs on `touched`](https://github.com/erikras/final-form#touched-boolean).
+[See the 🏁 Final Form docs on `touched`](https://github.com/final-form/final-form#touched-boolean).
 
 #### `meta.valid?: boolean`
 
-[See the 🏁 Final Form docs on `valid`](https://github.com/erikras/final-form#valid-boolean).
+[See the 🏁 Final Form docs on `valid`](https://github.com/final-form/final-form#valid-boolean).
 
 #### `meta.visited?: boolean`
 
-[See the 🏁 Final Form docs on `visited`](https://github.com/erikras/final-form#visited-boolean).
+[See the 🏁 Final Form docs on `visited`](https://github.com/final-form/final-form#visited-boolean).
 
@@ -451,15 +459,20 @@ ### `FormProps`
 
-[See the 🏁 Final Form docs on `debug`](https://github.com/erikras/final-form#debug-debugfunction).
+[See the 🏁 Final Form docs on `debug`](https://github.com/final-form/final-form#debug-debugfunction).
 
+#### `decorators?: Decorator[]`
+
+[`Decorator`](https://github.com/final-form/final-form#decorator-form-formapi--unsubscribe)s
+to apply to the form.
+
 #### `initialValues?: Object`
 
-[See the 🏁 Final Form docs on `initialValues`](https://github.com/erikras/final-form#initialvalues-object).
+[See the 🏁 Final Form docs on `initialValues`](https://github.com/final-form/final-form#initialvalues-object).
 
 #### `mutators?: { [string]: Mutator }`
 
-[See the 🏁 Final Form docs on `mutators`](https://github.com/erikras/final-form#mutators--string-function-).
+[See the 🏁 Final Form docs on `mutators`](https://github.com/final-form/final-form#mutators--string-function-).
 
 #### `onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`
 
-[See the 🏁 Final Form docs on `onSubmit`](https://github.com/erikras/final-form#onsubmit-values-object-callback-errors-object--void--object--promiseobject--void).
+[See the 🏁 Final Form docs on `onSubmit`](https://github.com/final-form/final-form#onsubmit-values-object-callback-errors-object--void--object--promiseobject--void).
 
@@ -474,15 +487,15 @@ #### `render?: (props: FormRenderProps) => React.Node`
 A
-[`FormSubscription`](https://github.com/erikras/final-form#formsubscription--string-boolean-)
+[`FormSubscription`](https://github.com/final-form/final-form#formsubscription--string-boolean-)
 that selects of all the items of
-[`FormState`](https://github.com/erikras/final-form#formstate) that you wish to
-update for. If you don't pass a `subscription` prop, it defaults to _all_ of
-[`FormState`](https://github.com/erikras/final-form#formstate).
+[`FormState`](https://github.com/final-form/final-form#formstate) that you wish
+to update for. If you don't pass a `subscription` prop, it defaults to _all_ of
+[`FormState`](https://github.com/final-form/final-form#formstate).
 
 #### `validate?: (values: Object) => Object | Promise<Object>`
 
-[See the 🏁 Final Form docs on `validate`](https://github.com/erikras/final-form#validate-values-object--object--promiseobject).
+[See the 🏁 Final Form docs on `validate`](https://github.com/final-form/final-form#validate-values-object--object--promiseobject).
 
 #### `validateOnBlur?: boolean`
 
-[See the 🏁 Final Form docs on `validateOnBlur`](https://github.com/erikras/final-form#validateonblur-boolean).
+[See the 🏁 Final Form docs on `validateOnBlur`](https://github.com/final-form/final-form#validateonblur-boolean).
 
@@ -494,7 +507,7 @@ ### `FormRenderProps`
 receive here are dependent upon which values of
-[`FormState`](https://github.com/erikras/final-form#formstate) you have
+[`FormState`](https://github.com/final-form/final-form#formstate) you have
 subscribed to with the
-[`subscription` prop](https://github.com/erikras/react-final-form#subscription-formsubscription).
+[`subscription` prop](https://github.com/final-form/react-final-form#subscription-formsubscription).
 This object contains everything in
-[🏁 Final Form's `FormState`](https://github.com/erikras/final-form#formstate)
+[🏁 Final Form's `FormState`](https://github.com/final-form/final-form#formstate)
 as well as:
@@ -505,3 +518,3 @@
 A function that allows batch updates to be done to the form state.
-[See the 🏁 Final Form docs on `batch`](https://github.com/erikras/final-form#batch-fn---void--void).
+[See the 🏁 Final Form docs on `batch`](https://github.com/final-form/final-form#batch-fn---void--void).
 
@@ -528,7 +541,7 @@ #### `blur: (name: string) => void`
 A function that initializes the form values.
-[See the 🏁 Final Form docs on `initialize`](https://github.com/erikras/final-form#initialize-values-object--void).
+[See the 🏁 Final Form docs on `initialize`](https://github.com/final-form/final-form#initialize-values-object--void).
 
 #### `mutators?: { [string]: Function }`
 
-[See the 🏁 Final Form docs on `mutators`](https://github.com/erikras/final-form#mutators--string-function-).
+[See the 🏁 Final Form docs on `mutators`](https://github.com/final-form/final-form#mutators--string-function-).
 
@@ -538,3 +551,3 @@ #### `reset: () => void`
 A function that resets the form values to their last initialized values.
-[See the 🏁 Final Form docs on `reset`](https://github.com/erikras/final-form#reset---void).
+[See the 🏁 Final Form docs on `reset`](https://github.com/final-form/final-form#reset---void).
 
@@ -550,3 +563,4 @@ ### `FormSpyProps`
 A render function that is given [`FormSpyRenderProps`](#formspyrenderprops), as
-well as any non-API props passed into the `<FormSpy/>` component.
+well as any non-API props passed into the `<FormSpy/>` component. Will not be
+called if an `onChange` prop is provided.
 
@@ -556,17 +570,25 @@ #### `component?: React.ComponentType<FormSpyRenderProps>`
 A component that is given [`FormSpyRenderProps`](#formspyrenderprops) as props,
-as well as any non-API props passed into the `<FormSpy/>` component.
+as well as any non-API props passed into the `<FormSpy/>` component. Will not be
+called if an `onChange` prop is provided.
 
+#### `onChange?: (formState: FormState) => void`
+
+A change listener that will be called with form state whenever the form state,
+as subscribed to by the `subscription` prop, has changed. When an `onChange`
+prop is provided, the `<FormSpy/>` will not render anything.
+
 #### `render?: (props: FormSpyRenderProps) => React.Node`
 
 A render function that is given [`FormSpyRenderProps`](#formspyrenderprops), as
-well as any non-API props passed into the `<FormSpy/>` component.
+well as any non-API props passed into the `<FormSpy/>` component. Will not be
+called if an `onChange` prop is provided.
 
-#### `formSubscription?: FormSubscription`
+#### `subscription?: FormSubscription`
 
 A
-[`FormSubscription`](https://github.com/erikras/final-form#formsubscription--string-boolean-)
+[`FormSubscription`](https://github.com/final-form/final-form#formsubscription--string-boolean-)
 that selects of all the items of
-[`FormState`](https://github.com/erikras/final-form#formstate) that you wish to
-update for. If you don't pass a `subscription` prop, it defaults to _all_ of
-[`FormState`](https://github.com/erikras/final-form#formstate).
+[`FormState`](https://github.com/final-form/final-form#formstate) that you wish
+to update for. If you don't pass a `subscription` prop, it defaults to _all_ of
+[`FormState`](https://github.com/final-form/final-form#formstate).
 
@@ -578,6 +600,6 @@ ### `FormSpyRenderProps`
 function or component. These props are of type
-[`FormState`](https://github.com/erikras/final-form#formstate). Keep in mind
+[`FormState`](https://github.com/final-form/final-form#formstate). Keep in mind
 that the values you receive here are dependent upon which values of
-[`FormState`](https://github.com/erikras/final-form#formstate) you have
+[`FormState`](https://github.com/final-form/final-form#formstate) you have
 subscribed to with the
-[`subscription` prop](https://github.com/erikras/react-final-form#subscription-formsubscription).
+[`subscription` prop](https://github.com/final-form/react-final-form#subscription-formsubscription).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88906

increased by4.35%

Lines of code

1440

increased by4.42%

Number of lines in readme file

588

increased by3.89%

No dependency changes