react-final-form - npm Package Compare versions

Comparing version 3.6.0 to 3.6.1

dist/react-final-form.cjs.js

@@ -8,2 +8,3 @@ 'use strict';
 var React = require('react');
+var reactLifecyclesCompat = require('react-lifecycles-compat');
 var PropTypes = _interopDefault(require('prop-types'));
@@ -392,2 +393,4 @@ var finalForm = require('final-form');
 
+reactLifecyclesCompat.polyfill(Field);
+
 //      
@@ -648,2 +651,5 @@ var shallowEqual = function shallowEqual(a, b) {
 
+
+reactLifecyclesCompat.polyfill(ReactFinalForm);
+
 //      
@@ -793,3 +799,2 @@
 
-
 FormSpy.contextTypes = {
@@ -799,2 +804,4 @@ reactFinalForm: PropTypes.object
 
+reactLifecyclesCompat.polyfill(FormSpy);
+
 //
@@ -801,0 +808,0 @@

dist/react-final-form.es.js

 import { createElement, Component } from 'react';
+import { polyfill } from 'react-lifecycles-compat';
 import PropTypes from 'prop-types';
@@ -385,2 +386,4 @@ import { fieldSubscriptionItems, configOptions, createForm, formSubscriptionItems, version } from 'final-form';
 
+polyfill(Field);
+
 //      
@@ -641,2 +644,5 @@ var shallowEqual = function shallowEqual(a, b) {
 
+
+polyfill(ReactFinalForm);
+
 //      
@@ -786,3 +792,2 @@
 
-
 FormSpy.contextTypes = {
@@ -792,4 +797,6 @@ reactFinalForm: PropTypes.object
 
+polyfill(FormSpy);
+
 //
 
 export { Field, ReactFinalForm as Form, version$1 as version, FormSpy };

dist/react-final-form.umd.js

@@ -9,2 +9,159 @@ (function (global, factory) {
 
+  /**
+   * Copyright (c) 2013-present, Facebook, Inc.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+
+  function componentWillMount() {
+    // Call this.constructor.gDSFP to support sub-classes.
+    var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
+    if (state !== null && state !== undefined) {
+      this.setState(state);
+    }
+  }
+
+  function componentWillReceiveProps(nextProps) {
+    // Call this.constructor.gDSFP to support sub-classes.
+    // Use the setState() updater to ensure state isn't stale in certain edge cases.
+    function updater(prevState) {
+      var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
+      return state !== null && state !== undefined ? state : null;
+    }
+    // Binding "this" is important for shallow renderer support.
+    this.setState(updater.bind(this));
+  }
+
+  function componentWillUpdate(nextProps, nextState) {
+    try {
+      var prevProps = this.props;
+      var prevState = this.state;
+      this.props = nextProps;
+      this.state = nextState;
+      this.__reactInternalSnapshotFlag = true;
+      this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(
+        prevProps,
+        prevState
+      );
+    } finally {
+      this.props = prevProps;
+      this.state = prevState;
+    }
+  }
+
+  // React may warn about cWM/cWRP/cWU methods being deprecated.
+  // Add a flag to suppress these warnings for this special case.
+  componentWillMount.__suppressDeprecationWarning = true;
+  componentWillReceiveProps.__suppressDeprecationWarning = true;
+  componentWillUpdate.__suppressDeprecationWarning = true;
+
+  function polyfill(Component) {
+    var prototype = Component.prototype;
+
+    if (!prototype || !prototype.isReactComponent) {
+      throw new Error('Can only polyfill class components');
+    }
+
+    if (
+      typeof Component.getDerivedStateFromProps !== 'function' &&
+      typeof prototype.getSnapshotBeforeUpdate !== 'function'
+    ) {
+      return Component;
+    }
+
+    // If new component APIs are defined, "unsafe" lifecycles won't be called.
+    // Error if any of these lifecycles are present,
+    // Because they would work differently between older and newer (16.3+) versions of React.
+    var foundWillMountName = null;
+    var foundWillReceivePropsName = null;
+    var foundWillUpdateName = null;
+    if (typeof prototype.componentWillMount === 'function') {
+      foundWillMountName = 'componentWillMount';
+    } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
+      foundWillMountName = 'UNSAFE_componentWillMount';
+    }
+    if (typeof prototype.componentWillReceiveProps === 'function') {
+      foundWillReceivePropsName = 'componentWillReceiveProps';
+    } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
+      foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
+    }
+    if (typeof prototype.componentWillUpdate === 'function') {
+      foundWillUpdateName = 'componentWillUpdate';
+    } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
+      foundWillUpdateName = 'UNSAFE_componentWillUpdate';
+    }
+    if (
+      foundWillMountName !== null ||
+      foundWillReceivePropsName !== null ||
+      foundWillUpdateName !== null
+    ) {
+      var componentName = Component.displayName || Component.name;
+      var newApiName =
+        typeof Component.getDerivedStateFromProps === 'function'
+          ? 'getDerivedStateFromProps()'
+          : 'getSnapshotBeforeUpdate()';
+
+      throw Error(
+        'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
+          componentName +
+          ' uses ' +
+          newApiName +
+          ' but also contains the following legacy lifecycles:' +
+          (foundWillMountName !== null ? '\n  ' + foundWillMountName : '') +
+          (foundWillReceivePropsName !== null
+            ? '\n  ' + foundWillReceivePropsName
+            : '') +
+          (foundWillUpdateName !== null ? '\n  ' + foundWillUpdateName : '') +
+          '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' +
+          'https://fb.me/react-async-component-lifecycle-hooks'
+      );
+    }
+
+    // React <= 16.2 does not support static getDerivedStateFromProps.
+    // As a workaround, use cWM and cWRP to invoke the new static lifecycle.
+    // Newer versions of React will ignore these lifecycles if gDSFP exists.
+    if (typeof Component.getDerivedStateFromProps === 'function') {
+      prototype.componentWillMount = componentWillMount;
+      prototype.componentWillReceiveProps = componentWillReceiveProps;
+    }
+
+    // React <= 16.2 does not support getSnapshotBeforeUpdate.
+    // As a workaround, use cWU to invoke the new lifecycle.
+    // Newer versions of React will ignore that lifecycle if gSBU exists.
+    if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
+      if (typeof prototype.componentDidUpdate !== 'function') {
+        throw new Error(
+          'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'
+        );
+      }
+
+      prototype.componentWillUpdate = componentWillUpdate;
+
+      var componentDidUpdate = prototype.componentDidUpdate;
+
+      prototype.componentDidUpdate = function componentDidUpdatePolyfill(
+        prevProps,
+        prevState,
+        maybeSnapshot
+      ) {
+        // 16.3+ will not execute our will-update method;
+        // It will pass a snapshot value to did-update though.
+        // Older versions will require our polyfilled will-update value.
+        // We need to handle both cases, but can't just check for the presence of "maybeSnapshot",
+        // Because for <= 15.x versions this might be a "prevContext" object.
+        // We also can't just check "__reactInternalSnapshot",
+        // Because get-snapshot might return a falsy value.
+        // So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.
+        var snapshot = this.__reactInternalSnapshotFlag
+          ? this.__reactInternalSnapshot
+          : maybeSnapshot;
+
+        componentDidUpdate.call(this, prevProps, prevState, snapshot);
+      };
+    }
+
+    return Component;
+  }
+
   //      
@@ -390,2 +547,4 @@ function diffSubscription (a, b, keys) {
 
+  polyfill(Field);
+
   //      
@@ -646,2 +805,5 @@ var shallowEqual = function shallowEqual(a, b) {
 
+
+  polyfill(ReactFinalForm);
+
   //      
@@ -791,3 +953,2 @@
 
-
   FormSpy.contextTypes = {
@@ -797,2 +958,4 @@ reactFinalForm: PropTypes.object
 
+  polyfill(FormSpy);
+
   //
@@ -799,0 +962,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,d,e,u){"use strict";function r(e,n,t){return e?!n||t.some(function(t){return e[t]!==n[t]}):!!n}e=e&&e.hasOwnProperty("default")?e.default:e;var c="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},f=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},b=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},n=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)},v=function(t,e){var n={};for(var r in t)0<=e.indexOf(r)||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},l=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};function y(t,e){var n=t.render,r=t.children,i=t.component,o=v(t,["render","children","component"]);return i?d.createElement(i,b({},o,{children:r,render:n})):n?n(b({},o,{children:r})):"function"!=typeof r?null:r(o)}var o="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,s=u.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),i=function(i){function h(t,e){f(this,h);var n=l(this,i.call(this,t,e));a.call(n);var r=void 0;return n.context.reactFinalForm&&n.subscribe(t,function(t){r?n.notify(t):r=t}),n.state={state:r},n}return n(h,i),h.prototype.UNSAFE_componentWillReceiveProps=function(t){var e=t.name,n=t.subscription;(this.props.name!==e||r(this.props.subscription,n,u.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))},h.prototype.componentWillUnmount=function(){this.unsubscribe()},h.prototype.render=function(){var t=this.props,e=t.allowNull,n=t.component,r=t.children,i=t.format,o=t.formatOnBlur,a=(t.parse,t.isEqual,t.name),s=(t.subscription,t.validate,t.validateFields,t.value),u=v(t,["allowNull","component","children","format","formatOnBlur","parse","isEqual","name","subscription","validate","validateFields","value"]),c=this.state.state||{},f=(c.blur,c.change,c.focus,c.value),l=(c.name,v(c,["blur","change","focus","value","name"])),p={active:l.active,data:l.data,dirty:l.dirty,dirtySinceLastSubmit:l.dirtySinceLastSubmit,error:l.error,initial:l.initial,invalid:l.invalid,pristine:l.pristine,submitError:l.submitError,submitFailed:l.submitFailed,submitSucceeded:l.submitSucceeded,touched:l.touched,valid:l.valid,visited:l.visited};o?f=h.defaultProps.format(f,a):i&&(f=i(f,a)),null!==f||e||(f="");var m=b({name:a,value:f},this.handlers);return"checkbox"===u.type?void 0===s?m.checked=!!f:(m.checked=!(!Array.isArray(f)||!~f.indexOf(s)),m.value=s):"radio"===u.type?(m.checked=f===s,m.value=s):"select"===n&&u.multiple&&(m.value=m.value||[]),"function"==typeof r?r(b({input:m,meta:p},u)):"string"==typeof n?d.createElement(n,b({},m,{children:r},u)):y(b({},{input:m,meta:p},{children:r,component:n},u))},h}(d.Component);i.contextTypes={reactFinalForm:e.object},i.defaultProps={format:function(t,e){return void 0===t?"":t},parse:function(t,e){return""===t?void 0:t}};var a=function(){var a=this;this.subscribe=function(t,e){var n=t.isEqual,r=t.name,i=t.subscription,o=t.validateFields;a.unsubscribe=a.context.reactFinalForm.registerField(r,e,i||s,{isEqual:n,getValidator:function(){return a.props.validate},validateFields:o})},this.notify=function(t){return a.setState({state:t})},this.handlers={onBlur:function(t){var e=a.state.state;if(e){var n=a.props,r=n.format,i=n.formatOnBlur;e.blur(),r&&i&&e.change(r(e.value,e.name))}},onChange:function(t){var e=a.props,n=e.parse,r=e.value,i=t&&t.target?function(t,e,n,r){if(!r&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(r&&t.nativeEvent)return t.nativeEvent.text;var i=t.target,o=i.type,a=i.value,s=i.checked;switch(o){case"checkbox":if(void 0!==n){if(s)return Array.isArray(e)?e.concat(n):[n];if(!Array.isArray(e))return e;var u=e.indexOf(n);return u<0?e:e.slice(0,u).concat(e.slice(u+1))}return!!s;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 a}}(t,a.state.state&&a.state.state.value,r,o):t;a.state.state&&a.state.state.change(n?n(i,a.props.name):i)},onFocus:function(t){a.state.state&&a.state.state.focus()}}},p=function(t){return!(!t||"function"!=typeof t.stopPropagation)},m="3.6.0",h={"final-form":u.version,"react-final-form":m},F=u.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),g=function(a){function s(t){f(this,s);var e=l(this,a.call(this,t));e.notify=function(t){e.mounted&&e.setState({state:t}),e.mounted=!0},e.handleSubmit=function(t){return t&&"function"==typeof t.preventDefault&&t.preventDefault(),e.form.submit()};t.children,t.component,t.render;var n=t.subscription,r=t.decorators,i=v(t,["children","component","render","subscription","decorators"]);e.mounted=!1;try{e.form=u.createForm(i)}catch(t){}if(e.unsubscriptions=[],e.form){var o={};e.form.subscribe(function(t){o=t},n||F)(),e.state={state:o}}return r&&r.forEach(function(t){e.unsubscriptions.push(t(e.form))}),e}return n(s,a),s.prototype.getChildContext=function(){return{reactFinalForm:this.form}},s.prototype.UNSAFE_componentWillMount=function(){this.form&&this.form.pauseValidation()},s.prototype.componentDidMount=function(){this.form&&(this.unsubscriptions.push(this.form.subscribe(this.notify,this.props.subscription||F)),this.form.resumeValidation())},s.prototype.UNSAFE_componentWillUpdate=function(){this.form&&(this.resumeValidation=!this.form.isValidationPaused(),this.form.pauseValidation())},s.prototype.componentDidUpdate=function(){this.form&&this.resumeValidation&&this.form.resumeValidation()},s.prototype.UNSAFE_componentWillReceiveProps=function(e){var n=this;e.initialValues&&!function(t,e){if(t===e)return!0;if("object"!==(void 0===t?"undefined":c(t))||!t||"object"!==(void 0===e?"undefined":c(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,e.initialValues)&&this.form.initialize(e.initialValues),u.configOptions.forEach(function(t){n.props[t]!==e[t]&&n.form.setConfig(t,e[t])})},s.prototype.componentWillUnmount=function(){this.unsubscriptions.forEach(function(t){return t()})},s.prototype.render=function(){var n=this,t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,v(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"])),r=b({},this.state?this.state.state:{},{batch:this.form&&function(t){return n.form.batch(t)},blur:this.form&&function(t){return n.form.blur(t)},change:this.form&&function(t,e){return n.form.change(t,e)},focus:this.form&&function(t){return n.form.focus(t)},form:b({},this.form,{reset:function(t){p(t)?n.form.reset():n.form.reset(t)}}),handleSubmit:this.handleSubmit,initialize:this.form&&function(t){return n.form.initialize(t)},mutators:this.form&&Object.keys(this.form.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=n.form.mutators)[e].apply(t,arguments)},t},{}),reset:this.form&&function(t){return n.form.reset(t)}});return y(b({},e,r,{__versions:h}))},s}(d.Component);g.childContextTypes={reactFinalForm:e.object};var S=function(i){function o(e,t){f(this,o);var r=l(this,i.call(this,e,t));r.subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.context.reactFinalForm.subscribe(e,n||F)},r.notify=function(t){r.setState({state:t}),r.props.onChange&&r.props.onChange(t)};var n=void 0;return r.context.reactFinalForm&&r.subscribe(e,function(t){n?r.notify(t):(n=t,e.onChange&&e.onChange(t))}),n&&(r.state={state:n}),r}return n(o,i),o.prototype.UNSAFE_componentWillReceiveProps=function(t){var e=t.subscription;r(this.props.subscription,e,u.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))},o.prototype.componentWillUnmount=function(){this.unsubscribe()},o.prototype.render=function(){var t=this.props,e=t.onChange,n=(t.subscription,v(t,["onChange","subscription"])),r=this.context.reactFinalForm,i={batch:r&&function(t){return r.batch(t)},blur:r&&function(t){return r.blur(t)},change:r&&function(t,e){return r.change(t,e)},focus:r&&function(t){return r.focus(t)},form:b({},r,{reset:function(t){p(t)?r.reset():r.reset(t)}}),initialize:r&&function(t){return r.initialize(t)},mutators:r&&Object.keys(r.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=r.mutators)[e].apply(t,arguments)},t},{}),reset:r&&function(t){return r.reset(t)}};return e?null:y(b({},n,this.state?this.state.state:{},i))},o}(d.Component);S.contextTypes={reactFinalForm:e.object},t.Field=i,t.Form=g,t.version=m,t.FormSpy=S,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,d,e,u){"use strict";function c(){var t=this.constructor.getDerivedStateFromProps(this.props,this.state);null!=t&&this.setState(t)}function l(n){this.setState(function(t){var e=this.constructor.getDerivedStateFromProps(n,t);return null!=e?e:null}.bind(this))}function p(t,e){try{var n=this.props,o=this.state;this.props=t,this.state=e,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,o)}finally{this.props=n,this.state=o}}function n(t){var e=t.prototype;if(!e||!e.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof t.getDerivedStateFromProps&&"function"!=typeof e.getSnapshotBeforeUpdate)return t;var n=null,o=null,r=null;if("function"==typeof e.componentWillMount?n="componentWillMount":"function"==typeof e.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof e.componentWillReceiveProps?o="componentWillReceiveProps":"function"==typeof e.UNSAFE_componentWillReceiveProps&&(o="UNSAFE_componentWillReceiveProps"),"function"==typeof e.componentWillUpdate?r="componentWillUpdate":"function"==typeof e.UNSAFE_componentWillUpdate&&(r="UNSAFE_componentWillUpdate"),null!==n||null!==o||null!==r){var i=t.displayName||t.name,a="function"==typeof t.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+i+" uses "+a+" but also contains the following legacy lifecycles:"+(null!==n?"\n  "+n:"")+(null!==o?"\n  "+o:"")+(null!==r?"\n  "+r:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof t.getDerivedStateFromProps&&(e.componentWillMount=c,e.componentWillReceiveProps=l),"function"==typeof e.getSnapshotBeforeUpdate){if("function"!=typeof e.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");e.componentWillUpdate=p;var s=e.componentDidUpdate;e.componentDidUpdate=function(t,e,n){var o=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;s.call(this,t,e,o)}}return t}function o(e,n,t){return e?!n||t.some(function(t){return e[t]!==n[t]}):!!n}e=e&&e.hasOwnProperty("default")?e.default:e,p.__suppressDeprecationWarning=l.__suppressDeprecationWarning=c.__suppressDeprecationWarning=!0;var f="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},m=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},v=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},b=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)},y=function(t,e){var n={};for(var o in t)0<=e.indexOf(o)||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n},g=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};function F(t,e){var n=t.render,o=t.children,r=t.component,i=y(t,["render","children","component"]);return r?d.createElement(r,v({},i,{children:o,render:n})):n?n(v({},i,{children:o})):"function"!=typeof o?null:o(i)}var i="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,s=u.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),r=function(r){function h(t,e){m(this,h);var n=g(this,r.call(this,t,e));a.call(n);var o=void 0;return n.context.reactFinalForm&&n.subscribe(t,function(t){o?n.notify(t):o=t}),n.state={state:o},n}return b(h,r),h.prototype.UNSAFE_componentWillReceiveProps=function(t){var e=t.name,n=t.subscription;(this.props.name!==e||o(this.props.subscription,n,u.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))},h.prototype.componentWillUnmount=function(){this.unsubscribe()},h.prototype.render=function(){var t=this.props,e=t.allowNull,n=t.component,o=t.children,r=t.format,i=t.formatOnBlur,a=(t.parse,t.isEqual,t.name),s=(t.subscription,t.validate,t.validateFields,t.value),u=y(t,["allowNull","component","children","format","formatOnBlur","parse","isEqual","name","subscription","validate","validateFields","value"]),c=this.state.state||{},l=(c.blur,c.change,c.focus,c.value),p=(c.name,y(c,["blur","change","focus","value","name"])),f={active:p.active,data:p.data,dirty:p.dirty,dirtySinceLastSubmit:p.dirtySinceLastSubmit,error:p.error,initial:p.initial,invalid:p.invalid,pristine:p.pristine,submitError:p.submitError,submitFailed:p.submitFailed,submitSucceeded:p.submitSucceeded,touched:p.touched,valid:p.valid,visited:p.visited};i?l=h.defaultProps.format(l,a):r&&(l=r(l,a)),null!==l||e||(l="");var m=v({name:a,value:l},this.handlers);return"checkbox"===u.type?void 0===s?m.checked=!!l:(m.checked=!(!Array.isArray(l)||!~l.indexOf(s)),m.value=s):"radio"===u.type?(m.checked=l===s,m.value=s):"select"===n&&u.multiple&&(m.value=m.value||[]),"function"==typeof o?o(v({input:m,meta:f},u)):"string"==typeof n?d.createElement(n,v({},m,{children:o},u)):F(v({},{input:m,meta:f},{children:o,component:n},u))},h}(d.Component);r.contextTypes={reactFinalForm:e.object},r.defaultProps={format:function(t,e){return void 0===t?"":t},parse:function(t,e){return""===t?void 0:t}};var a=function(){var a=this;this.subscribe=function(t,e){var n=t.isEqual,o=t.name,r=t.subscription,i=t.validateFields;a.unsubscribe=a.context.reactFinalForm.registerField(o,e,r||s,{isEqual:n,getValidator:function(){return a.props.validate},validateFields:i})},this.notify=function(t){return a.setState({state:t})},this.handlers={onBlur:function(t){var e=a.state.state;if(e){var n=a.props,o=n.format,r=n.formatOnBlur;e.blur(),o&&r&&e.change(o(e.value,e.name))}},onChange:function(t){var e=a.props,n=e.parse,o=e.value,r=t&&t.target?function(t,e,n,o){if(!o&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(o&&t.nativeEvent)return t.nativeEvent.text;var r=t.target,i=r.type,a=r.value,s=r.checked;switch(i){case"checkbox":if(void 0!==n){if(s)return Array.isArray(e)?e.concat(n):[n];if(!Array.isArray(e))return e;var u=e.indexOf(n);return u<0?e:e.slice(0,u).concat(e.slice(u+1))}return!!s;case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var o=t[n];o.selected&&e.push(o.value)}return e}(t.target.options);default:return a}}(t,a.state.state&&a.state.state.value,o,i):t;a.state.state&&a.state.state.change(n?n(r,a.props.name):r)},onFocus:function(t){a.state.state&&a.state.state.focus()}}};n(r);var h=function(t){return!(!t||"function"!=typeof t.stopPropagation)},S="3.6.0",E={"final-form":u.version,"react-final-form":S},_=u.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),w=function(a){function s(t){m(this,s);var e=g(this,a.call(this,t));e.notify=function(t){e.mounted&&e.setState({state:t}),e.mounted=!0},e.handleSubmit=function(t){return t&&"function"==typeof t.preventDefault&&t.preventDefault(),e.form.submit()};t.children,t.component,t.render;var n=t.subscription,o=t.decorators,r=y(t,["children","component","render","subscription","decorators"]);e.mounted=!1;try{e.form=u.createForm(r)}catch(t){}if(e.unsubscriptions=[],e.form){var i={};e.form.subscribe(function(t){i=t},n||_)(),e.state={state:i}}return o&&o.forEach(function(t){e.unsubscriptions.push(t(e.form))}),e}return b(s,a),s.prototype.getChildContext=function(){return{reactFinalForm:this.form}},s.prototype.UNSAFE_componentWillMount=function(){this.form&&this.form.pauseValidation()},s.prototype.componentDidMount=function(){this.form&&(this.unsubscriptions.push(this.form.subscribe(this.notify,this.props.subscription||_)),this.form.resumeValidation())},s.prototype.UNSAFE_componentWillUpdate=function(){this.form&&(this.resumeValidation=!this.form.isValidationPaused(),this.form.pauseValidation())},s.prototype.componentDidUpdate=function(){this.form&&this.resumeValidation&&this.form.resumeValidation()},s.prototype.UNSAFE_componentWillReceiveProps=function(e){var n=this;e.initialValues&&!function(t,e){if(t===e)return!0;if("object"!==(void 0===t?"undefined":f(t))||!t||"object"!==(void 0===e?"undefined":f(e))||!e)return!1;var n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(var r=Object.prototype.hasOwnProperty.bind(e),i=0;i<n.length;i++){var a=n[i];if(!r(a)||t[a]!==e[a])return!1}return!0}(this.props.initialValues,e.initialValues)&&this.form.initialize(e.initialValues),u.configOptions.forEach(function(t){n.props[t]!==e[t]&&n.form.setConfig(t,e[t])})},s.prototype.componentWillUnmount=function(){this.unsubscriptions.forEach(function(t){return t()})},s.prototype.render=function(){var n=this,t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,y(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"])),o=v({},this.state?this.state.state:{},{batch:this.form&&function(t){return n.form.batch(t)},blur:this.form&&function(t){return n.form.blur(t)},change:this.form&&function(t,e){return n.form.change(t,e)},focus:this.form&&function(t){return n.form.focus(t)},form:v({},this.form,{reset:function(t){h(t)?n.form.reset():n.form.reset(t)}}),handleSubmit:this.handleSubmit,initialize:this.form&&function(t){return n.form.initialize(t)},mutators:this.form&&Object.keys(this.form.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=n.form.mutators)[e].apply(t,arguments)},t},{}),reset:this.form&&function(t){return n.form.reset(t)}});return F(v({},e,o,{__versions:E}))},s}(d.Component);w.childContextTypes={reactFinalForm:e.object},n(w);var U=function(r){function i(e,t){m(this,i);var o=g(this,r.call(this,e,t));o.subscribe=function(t,e){var n=t.subscription;o.unsubscribe=o.context.reactFinalForm.subscribe(e,n||_)},o.notify=function(t){o.setState({state:t}),o.props.onChange&&o.props.onChange(t)};var n=void 0;return o.context.reactFinalForm&&o.subscribe(e,function(t){n?o.notify(t):(n=t,e.onChange&&e.onChange(t))}),n&&(o.state={state:n}),o}return b(i,r),i.prototype.UNSAFE_componentWillReceiveProps=function(t){var e=t.subscription;o(this.props.subscription,e,u.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))},i.prototype.componentWillUnmount=function(){this.unsubscribe()},i.prototype.render=function(){var t=this.props,e=t.onChange,n=(t.subscription,y(t,["onChange","subscription"])),o=this.context.reactFinalForm,r={batch:o&&function(t){return o.batch(t)},blur:o&&function(t){return o.blur(t)},change:o&&function(t,e){return o.change(t,e)},focus:o&&function(t){return o.focus(t)},form:v({},o,{reset:function(t){h(t)?o.reset():o.reset(t)}}),initialize:o&&function(t){return o.initialize(t)},mutators:o&&Object.keys(o.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=o.mutators)[e].apply(t,arguments)},t},{}),reset:o&&function(t){return o.reset(t)}};return e?null:F(v({},n,this.state?this.state.state:{},r))},i}(d.Component);U.contextTypes={reactFinalForm:e.object},n(U),t.Field=r,t.Form=w,t.version=S,t.FormSpy=U,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=react-final-form.umd.min.js.map

package.json

 {
   "name": "react-final-form",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "description": "🏁 High performance subscription-based form state management for React",
@@ -5,0 +5,0 @@ "main": "dist/react-final-form.cjs.js",

README.md

@@ -151,2 +151,4 @@ # 🏁 React Final Form
   * [AsyncTypeahead and Redux](#asynctypeahead-and-redux)
+  * [Format On Blur](#format-on-blur)
+  * [Styling with 🍭 Smooth-UI](#styling-with--smooth-ui)
 * [Rendering](#rendering)
@@ -393,2 +395,10 @@ * [API](#api)
 
+### [Format On Blur](https://codesandbox.io/s/3rp260ly51)
+
+Demonstrates how to use the `formatOnBlur` prop to postpone the formatting of a form field value until the field loses focus. Very useful for formatting numbers, like currencies.
+
+### [Styling with 🍭 Smooth-UI](https://codesandbox.io/s/40o45po3l4)
+
+Demonstrates how to use the Smooth-UI styling library to make your forms look fabulous! All you really need is a higher order component that adapts The 🍭 Smooth-UI form controls to work with 🏁 React Final Form.
+
 ## Rendering
@@ -395,0 +405,0 @@

No alert changes

Improved metrics

Total package byte prevSize

155064

increased by6.75%

Lines of code

2371

increased by7.24%

Number of lines in readme file

859

increased by1.18%

No dependency changes