react-final-form - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/react-final-form.cjs.js

@@ -35,2 +35,18 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
+
+
+
+
+
+
+
+
+
+
 var classCallCheck = function (instance, Constructor) {
@@ -273,4 +289,6 @@ if (!(instance instanceof Constructor)) {
           allowNull = _props.allowNull,
+          subscription = _props.subscription,
+          validate = _props.validate,
           _value = _props.value,
-          rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'value']);
+          rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'subscription', 'validate', 'value']);
       var _state$state = this.state.state,
@@ -315,2 +333,25 @@ blur = _state$state.blur,
 //      
+var shallowEqual = function shallowEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) !== 'object' || !a || (typeof b === 'undefined' ? 'undefined' : _typeof(b)) !== 'object' || !b) {
+    return false;
+  }
+  var keysA = Object.keys(a);
+  var keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx];
+    if (!bHasOwnProperty(key) || a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+//      
 var version$1 = '1.0.0';
@@ -337,3 +378,3 @@
       event.preventDefault();
-      _this.form.submit();
+      return _this.form.submit();
     };
@@ -348,4 +389,5 @@
         render = props.render,
+        subscription = props.subscription,
         validate = props.validate,
-        subscription = props.subscription;
+        validateOnBlur = props.validateOnBlur;
 
@@ -358,3 +400,4 @@ warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
       onSubmit: onSubmit,
-      validate: validate
+      validate: validate,
+      validateOnBlur: validateOnBlur
     };
@@ -386,2 +429,9 @@ try {
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!shallowEqual(this.props.initialValues, nextProps.initialValues)) {
+        this.form.initialize(nextProps.initialValues);
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
@@ -402,3 +452,4 @@ value: function componentWillUnmount() {
           validate = _props.validate,
-          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'mutators', 'onSubmit', 'subscription', 'validate']);
+          validateOnBlur = _props.validateOnBlur,
+          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'mutators', 'onSubmit', 'subscription', 'validate', 'validateOnBlur']);
 
@@ -405,0 +456,0 @@ return renderComponent(_extends({}, props, this.state.state, {

dist/react-final-form.es.js

@@ -29,2 +29,18 @@ import { PureComponent, createElement } from 'react';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
+
+
+
+
+
+
+
+
+
+
 var classCallCheck = function (instance, Constructor) {
@@ -267,4 +283,6 @@ if (!(instance instanceof Constructor)) {
           allowNull = _props.allowNull,
+          subscription = _props.subscription,
+          validate = _props.validate,
           _value = _props.value,
-          rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'value']);
+          rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'subscription', 'validate', 'value']);
       var _state$state = this.state.state,
@@ -309,2 +327,25 @@ blur = _state$state.blur,
 //      
+var shallowEqual = function shallowEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) !== 'object' || !a || (typeof b === 'undefined' ? 'undefined' : _typeof(b)) !== 'object' || !b) {
+    return false;
+  }
+  var keysA = Object.keys(a);
+  var keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx];
+    if (!bHasOwnProperty(key) || a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+//      
 var version$1 = '1.0.0';
@@ -331,3 +372,3 @@
       event.preventDefault();
-      _this.form.submit();
+      return _this.form.submit();
     };
@@ -342,4 +383,5 @@
         render = props.render,
+        subscription = props.subscription,
         validate = props.validate,
-        subscription = props.subscription;
+        validateOnBlur = props.validateOnBlur;
 
@@ -352,3 +394,4 @@ warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
       onSubmit: onSubmit,
-      validate: validate
+      validate: validate,
+      validateOnBlur: validateOnBlur
     };
@@ -380,2 +423,9 @@ try {
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!shallowEqual(this.props.initialValues, nextProps.initialValues)) {
+        this.form.initialize(nextProps.initialValues);
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
@@ -396,3 +446,4 @@ value: function componentWillUnmount() {
           validate = _props.validate,
-          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'mutators', 'onSubmit', 'subscription', 'validate']);
+          validateOnBlur = _props.validateOnBlur,
+          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'mutators', 'onSubmit', 'subscription', 'validate', 'validateOnBlur']);
 
@@ -399,0 +450,0 @@ return renderComponent(_extends({}, props, this.state.state, {

dist/react-final-form.umd.js

@@ -32,2 +32,18 @@ (function (global, factory) {
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
+
+
+
+
+
+
+
+
+
+
 var classCallCheck = function (instance, Constructor) {
@@ -270,4 +286,6 @@ if (!(instance instanceof Constructor)) {
           allowNull = _props.allowNull,
+          subscription = _props.subscription,
+          validate = _props.validate,
           _value = _props.value,
-          rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'value']);
+          rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'subscription', 'validate', 'value']);
       var _state$state = this.state.state,
@@ -312,2 +330,25 @@ blur = _state$state.blur,
 //      
+var shallowEqual = function shallowEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if ((typeof a === 'undefined' ? 'undefined' : _typeof(a)) !== 'object' || !a || (typeof b === 'undefined' ? 'undefined' : _typeof(b)) !== 'object' || !b) {
+    return false;
+  }
+  var keysA = Object.keys(a);
+  var keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx];
+    if (!bHasOwnProperty(key) || a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+//      
 var version$1 = '1.0.0';
@@ -334,3 +375,3 @@
       event.preventDefault();
-      _this.form.submit();
+      return _this.form.submit();
     };
@@ -345,4 +386,5 @@
         render = props.render,
+        subscription = props.subscription,
         validate = props.validate,
-        subscription = props.subscription;
+        validateOnBlur = props.validateOnBlur;
 
@@ -355,3 +397,4 @@ warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
       onSubmit: onSubmit,
-      validate: validate
+      validate: validate,
+      validateOnBlur: validateOnBlur
     };
@@ -383,2 +426,9 @@ try {
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!shallowEqual(this.props.initialValues, nextProps.initialValues)) {
+        this.form.initialize(nextProps.initialValues);
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
@@ -399,3 +449,4 @@ value: function componentWillUnmount() {
           validate = _props.validate,
-          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'mutators', 'onSubmit', 'subscription', 'validate']);
+          validateOnBlur = _props.validateOnBlur,
+          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'mutators', 'onSubmit', 'subscription', 'validate', 'validateOnBlur']);
 
@@ -402,0 +453,0 @@ return renderComponent(_extends({}, props, this.state.state, {

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=f(t,["render","children","component"]);return o?e.createElement(o,c({},a,{children:i})):r?r(c({},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(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=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}}(),c=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},l=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)},f=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},p=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},m="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,b=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},{}),v=function(t){function n(t,e){u(this,n);var r=p(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?b(t,m):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 l(n,t),s(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.value,s=f(t,["name","component","children","allowNull","value"]),l=this.state.state,p=(l.blur,l.change,l.focus,l.value),m=f(l,["blur","change","focus","value"]);(void 0===p||null===p&&!a)&&(p="");var b=c({name:n,value:p},this.handlers);return"checkbox"===s.type?b.checked=!!p:"radio"===s.type&&(b.checked=p===u,b.value=u),"select"===r&&s.multiple&&(b.value=b.value||[]),"function"==typeof o?o(c({input:b,meta:m},s)):"string"==typeof r?e.createElement(r,c({},b,{children:o},s)):i(c({input:b,meta:m,children:o,component:r},s))}}]),n}(e.PureComponent);v.contextTypes={reactFinalForm:n.object};var d=r.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),y=function(t){function e(t){u(this,e);var n=p(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));n.notify=function(t){return n.setState({state:t})},n.handleSubmit=function(t){t.preventDefault(),n.form.submit()};t.children,t.component;var i=t.debug,a=t.initialValues,s=t.mutators,c=t.onSubmit,l=(t.render,t.validate),f=t.subscription,m={debug:i,initialValues:a,mutators:s,onSubmit:c,validate:l};try{n.form=r.createForm(m)}catch(t){o(!1,t.message)}var b=void 0;return n.unsubscribe=n.form&&n.form.subscribe(function(t){b?n.notify(t):b=t},f||d),n.state={state:b},n}return l(e,t),s(e,[{key:"getChildContext",value:function(){return{reactFinalForm:this.form}}},{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,f(t,["debug","initialValues","mutators","onSubmit","subscription","validate"]));return i(c({},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);y.childContextTypes={reactFinalForm:n.object},y.displayName="ReactFinalForm("+r.version+")(1.0.0)";var F=function(t){function e(t,n){u(this,e);var r=p(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||d)},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 l(e,t),s(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,f(t,["subscription"]));return i(c({},e,this.state.state))}}]),e}(e.PureComponent);F.contextTypes={reactFinalForm:n.object},t.Field=v,t.Form=y,t.version="1.0.0",t.FormSpy=F,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 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})});
 //# sourceMappingURL=react-final-form.umd.min.js.map

package.json

 {
   "name": "react-final-form",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description":
@@ -5,0 +5,0 @@ "🏁 High performance subscription-based form state management for React",

README.md

@@ -52,13 +52,12 @@ # 🏁 React Final Form
 
-const MyForm = () =>
+const MyForm = () => (
   <Form
     onSubmit={onSubmit}
     validate={validate}
-    render={({ handleSubmit, pristine, invalid }) =>
+    render={({ handleSubmit, pristine, invalid }) => (
       <form onSubmit={handleSubmit}>
-
         <h2>Simple Default Input</h2>
         <div>
           <label>First Name</label>
-          <Field name="firstName" component="input" placeholder="First Name"/>
+          <Field name="firstName" component="input" placeholder="First Name" />
         </div>
@@ -69,29 +68,35 @@
           <label>Interests</label>
-          <Field name="interests" component={InterestPicker}/>
+          <Field name="interests" component={InterestPicker} />
         </div>
 
         <h2>Render Function</h2>
-        <Field name="bio" render={({ input, meta }) =>
-          <div>
-            <label>Bio</label>
-            <textarea {...input}/>
-            {meta.touched && meta.error && <span>{meta.error}</span>}
-          </div>
-        }>
+        <Field
+          name="bio"
+          render={({ input, meta }) => (
+            <div>
+              <label>Bio</label>
+              <textarea {...input} />
+              {meta.touched && meta.error && <span>{meta.error}</span>}
+            </div>
+          )}
+        />
 
         <h2>Render Function as Children</h2>
         <Field name="phone">
-          {({ input, meta }) =>
+          {({ input, meta }) => (
             <div>
               <label>Phone</label>
-              <input type="text" {...input} placeholder="Phone"/>
+              <input type="text" {...input} placeholder="Phone" />
               {meta.touched && meta.error && <span>{meta.error}</span>}
             </div>
-          }
+          )}
         </Field>
 
-        <button type="submit" disabled={pristine || invalid}>Submit</button>
+        <button type="submit" disabled={pristine || invalid}>
+          Submit
+        </button>
       </form>
-    }
+    )}
   />
+)
 ```
@@ -116,2 +121,4 @@
   * [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
+  * [Loading and Initializing Values](#loading-and-initializing-values)
+  * [Field Arrays](#field-arrays)
 * [Rendering](#rendering)
@@ -230,2 +237,14 @@ * [API](#api)
 
+### [Loading and Initializing Values](https://codesandbox.io/s/91w9ro3x9o)
+
+Demonstrates how a form can be initialized, after fetching data, by passing in
+`initialValues` as a prop.
+
+### [Field Arrays](https://codesandbox.io/s/kx8qv67nk5)
+
+Demostrates how to use the `<FieldArray/>` component, from
+[`react-final-form-arrays`](https://github.com/erikras/react-final-form-arrays),
+to render an array of inputs, as well as use `push`, `pop`, and `remove`
+mutations.
+
 ## Rendering
@@ -232,0 +251,0 @@

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

85198

increased by7.35%

Lines of code

1379

increased by9.53%

Number of lines in readme file

566

increased by3.47%

No dependency changes