react-final-form - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

dist/index.d.ts

@@ -11,7 +11,7 @@ import * as React from 'react'
 
-export type ReactContext = {
+export interface ReactContext {
   reactFinalForm: FormApi
 }
 
-export type FieldRenderProps = {
+export interface FieldRenderProps {
   input: {
@@ -41,26 +41,37 @@ name: string
 
-export type FormRenderProps = {
+export interface SubsetFormApi {
+  batch: (fn: () => void) => void
   blur: (name: string) => void
   change: (name: string, value: any) => void
   focus: (name: string) => void
-  handleSubmit: (event: React.SyntheticEvent<HTMLFormElement>) => void
   initialize: (values: object) => void
+  mutators?: { [key: string]: Function }
   reset: () => void
-} & FormState
+}
 
-export type FormSpyRenderProps = FormState
+export interface FormRenderProps extends FormState, SubsetFormApi {
+  batch: (fn: () => void) => void
+  blur: (name: string) => void
+  change: (name: string, value: any) => void
+  focus: (name: string) => void
+  handleSubmit: (event?: React.SyntheticEvent<HTMLFormElement>) => void
+  initialize: (values: object) => void
+  mutators?: { [key: string]: Function }
+  reset: () => void
+}
 
-export type RenderableProps<T> = Partial<{
-  children: ((props: T) => React.ReactNode) | React.ReactNode
-  component: React.ComponentType
-  render: (props: T) => React.ReactNode
-}>
+export interface FormSpyRenderProps extends FormState, SubsetFormApi {}
 
-export type FormProps = {
+export interface RenderableProps<T> {
+  children?: ((props: T) => React.ReactNode) | React.ReactNode
+  component?: React.ComponentType<FieldRenderProps> | string
+  render?: (props: T) => React.ReactNode
+}
+
+export interface FormProps extends Config, RenderableProps<FormRenderProps> {
   subscription?: FormSubscription
   decorators?: Decorator[]
-} & Config &
-  RenderableProps<FormRenderProps>
+}
 
-export type FieldProps = {
+export interface FieldProps extends RenderableProps<FieldRenderProps> {
   allowNull?: boolean
@@ -73,8 +84,9 @@ format?: ((value: any, name: string) => any) | null
   value?: any
-} & RenderableProps<FieldRenderProps>
+  [otherProp: string]: any
+}
 
-export type FormSpyProps = {
+export interface FormSpyProps extends RenderableProps<FormSpyRenderProps> {
   onChange?: (formState: FormState) => void
   subscription?: FormSubscription
-} & RenderableProps<FormSpyRenderProps>
+}
 
@@ -81,0 +93,0 @@ export var Field: React.ComponentType<FieldProps>

dist/react-final-form.cjs.js

@@ -180,3 +180,3 @@ 'use strict';
 
-var getValue = function getValue(event, isReactNative) {
+var getValue = function getValue(event, currentValue, isReactNative) {
   if (!isReactNative && event.nativeEvent && event.nativeEvent.text !== undefined) {
@@ -196,3 +196,23 @@ return event.nativeEvent.text;
     case 'checkbox':
-      return !!checked;
+      if (value !== undefined) {
+        // we are maintaining an array, not just a boolean
+        if (checked) {
+          // add value to current array value
+          return Array.isArray(currentValue) ? currentValue.concat(value) : [value];
+        } else {
+          // remove value from current array value
+          if (!Array.isArray(currentValue)) {
+            return currentValue;
+          }
+          var index = currentValue.indexOf(value);
+          if (index < 0) {
+            return currentValue;
+          } else {
+            return currentValue.slice(0, index).concat(currentValue.slice(index + 1));
+          }
+        }
+      } else {
+        // it's just a boolean
+        return !!checked;
+      }
     case 'select-multiple':
@@ -247,3 +267,3 @@ return getSelectedValues(event.target.options);
 
-        var value = event && event.target ? getValue(event, isReactNative) : event;
+        var value = event && event.target ? getValue(event, _this.state.state.value, isReactNative) : event;
         _this.state.state.change(parse !== null ? parse(value, _this.props.name) : value);
@@ -322,5 +342,10 @@ },
       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".');
+      warning(!_value || (rest.type === 'radio' || rest.type === 'checkbox') && component === 'input', 'The value prop on Field is ONLY for use with component="input" and type="radio" or type="checkbox".');
       if (rest.type === 'checkbox') {
-        input.checked = !!value;
+        if (_value === undefined) {
+          input.checked = !!value;
+        } else {
+          input.checked = Array.isArray(value) && ~value.indexOf(_value);
+          input.value = _value;
+        }
       } else if (rest.type === 'radio') {
@@ -403,3 +428,3 @@ input.checked = value === _value;
     _this.handleSubmit = function (event) {
-      event.preventDefault();
+      event && event.preventDefault();
       return _this.form.submit();
@@ -575,4 +600,13 @@ };
           rest = objectWithoutProperties(_props, ['onChange', 'subscription']);
+      var reactFinalForm = this.context.reactFinalForm;
 
-      return onChange ? null : renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+      return onChange ? null : renderComponent(_extends({}, rest, this.state.state, {
+        mutators: reactFinalForm && reactFinalForm.mutators,
+        batch: reactFinalForm && reactFinalForm.batch,
+        blur: reactFinalForm && reactFinalForm.blur,
+        change: reactFinalForm && reactFinalForm.change,
+        focus: reactFinalForm && reactFinalForm.focus,
+        initialize: reactFinalForm && reactFinalForm.initialize,
+        reset: reactFinalForm && reactFinalForm.reset
+      }), 'FormSpy');
     }
@@ -579,0 +613,0 @@ }]);

dist/react-final-form.es.js

@@ -174,3 +174,3 @@ import { PureComponent, createElement } from 'react';
 
-var getValue = function getValue(event, isReactNative) {
+var getValue = function getValue(event, currentValue, isReactNative) {
   if (!isReactNative && event.nativeEvent && event.nativeEvent.text !== undefined) {
@@ -190,3 +190,23 @@ return event.nativeEvent.text;
     case 'checkbox':
-      return !!checked;
+      if (value !== undefined) {
+        // we are maintaining an array, not just a boolean
+        if (checked) {
+          // add value to current array value
+          return Array.isArray(currentValue) ? currentValue.concat(value) : [value];
+        } else {
+          // remove value from current array value
+          if (!Array.isArray(currentValue)) {
+            return currentValue;
+          }
+          var index = currentValue.indexOf(value);
+          if (index < 0) {
+            return currentValue;
+          } else {
+            return currentValue.slice(0, index).concat(currentValue.slice(index + 1));
+          }
+        }
+      } else {
+        // it's just a boolean
+        return !!checked;
+      }
     case 'select-multiple':
@@ -241,3 +261,3 @@ return getSelectedValues(event.target.options);
 
-        var value = event && event.target ? getValue(event, isReactNative) : event;
+        var value = event && event.target ? getValue(event, _this.state.state.value, isReactNative) : event;
         _this.state.state.change(parse !== null ? parse(value, _this.props.name) : value);
@@ -316,5 +336,10 @@ },
       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".');
+      warning(!_value || (rest.type === 'radio' || rest.type === 'checkbox') && component === 'input', 'The value prop on Field is ONLY for use with component="input" and type="radio" or type="checkbox".');
       if (rest.type === 'checkbox') {
-        input.checked = !!value;
+        if (_value === undefined) {
+          input.checked = !!value;
+        } else {
+          input.checked = Array.isArray(value) && ~value.indexOf(_value);
+          input.value = _value;
+        }
       } else if (rest.type === 'radio') {
@@ -397,3 +422,3 @@ input.checked = value === _value;
     _this.handleSubmit = function (event) {
-      event.preventDefault();
+      event && event.preventDefault();
       return _this.form.submit();
@@ -569,4 +594,13 @@ };
           rest = objectWithoutProperties(_props, ['onChange', 'subscription']);
+      var reactFinalForm = this.context.reactFinalForm;
 
-      return onChange ? null : renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+      return onChange ? null : renderComponent(_extends({}, rest, this.state.state, {
+        mutators: reactFinalForm && reactFinalForm.mutators,
+        batch: reactFinalForm && reactFinalForm.batch,
+        blur: reactFinalForm && reactFinalForm.blur,
+        change: reactFinalForm && reactFinalForm.change,
+        focus: reactFinalForm && reactFinalForm.focus,
+        initialize: reactFinalForm && reactFinalForm.initialize,
+        reset: reactFinalForm && reactFinalForm.reset
+      }), 'FormSpy');
     }
@@ -573,0 +607,0 @@ }]);

dist/react-final-form.umd.js

@@ -177,3 +177,3 @@ (function (global, factory) {
 
-var getValue = function getValue(event, isReactNative) {
+var getValue = function getValue(event, currentValue, isReactNative) {
   if (!isReactNative && event.nativeEvent && event.nativeEvent.text !== undefined) {
@@ -193,3 +193,23 @@ return event.nativeEvent.text;
     case 'checkbox':
-      return !!checked;
+      if (value !== undefined) {
+        // we are maintaining an array, not just a boolean
+        if (checked) {
+          // add value to current array value
+          return Array.isArray(currentValue) ? currentValue.concat(value) : [value];
+        } else {
+          // remove value from current array value
+          if (!Array.isArray(currentValue)) {
+            return currentValue;
+          }
+          var index = currentValue.indexOf(value);
+          if (index < 0) {
+            return currentValue;
+          } else {
+            return currentValue.slice(0, index).concat(currentValue.slice(index + 1));
+          }
+        }
+      } else {
+        // it's just a boolean
+        return !!checked;
+      }
     case 'select-multiple':
@@ -244,3 +264,3 @@ return getSelectedValues(event.target.options);
 
-        var value = event && event.target ? getValue(event, isReactNative) : event;
+        var value = event && event.target ? getValue(event, _this.state.state.value, isReactNative) : event;
         _this.state.state.change(parse !== null ? parse(value, _this.props.name) : value);
@@ -319,5 +339,10 @@ },
       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".');
+      warning(!_value || (rest.type === 'radio' || rest.type === 'checkbox') && component === 'input', 'The value prop on Field is ONLY for use with component="input" and type="radio" or type="checkbox".');
       if (rest.type === 'checkbox') {
-        input.checked = !!value;
+        if (_value === undefined) {
+          input.checked = !!value;
+        } else {
+          input.checked = Array.isArray(value) && ~value.indexOf(_value);
+          input.value = _value;
+        }
       } else if (rest.type === 'radio') {
@@ -400,3 +425,3 @@ input.checked = value === _value;
     _this.handleSubmit = function (event) {
-      event.preventDefault();
+      event && event.preventDefault();
       return _this.form.submit();
@@ -572,4 +597,13 @@ };
           rest = objectWithoutProperties(_props, ['onChange', 'subscription']);
+      var reactFinalForm = this.context.reactFinalForm;
 
-      return onChange ? null : renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+      return onChange ? null : renderComponent(_extends({}, rest, this.state.state, {
+        mutators: reactFinalForm && reactFinalForm.mutators,
+        batch: reactFinalForm && reactFinalForm.batch,
+        blur: reactFinalForm && reactFinalForm.blur,
+        change: reactFinalForm && reactFinalForm.change,
+        focus: reactFinalForm && reactFinalForm.focus,
+        initialize: reactFinalForm && reactFinalForm.initialize,
+        reset: reactFinalForm && reactFinalForm.reset
+      }), 'FormSpy');
     }
@@ -576,0 +610,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,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e}function o(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,render:r})):r?r(l({},a,{children:i})):"function"!=typeof i?null:i(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var a=function(t,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,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}},d=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),v=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.isEqual,i=t.name,o=t.subscription,a=t.validateFields;r.unsubscribe=r.context.reactFinalForm.registerField(i,e,o||d,{isEqual:n,validate:r.validate,validateFields:a})},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=r.props.parse,n=t&&t.target?h(t,b):t;r.state.state.change(null!==e?e(n,r.props.name):n)},onFocus:function(t){r.state.state.focus()}};var i=void 0;return a(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||i(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.allowNull,r=t.component,i=t.children,a=t.format,u=(t.parse,t.isEqual,t.name),s=(t.subscription,t.validate,t.validateFields,t.value),c=p(t,["allowNull","component","children","format","parse","isEqual","name","subscription","validate","validateFields","value"]),f=this.state.state,m=(f.blur,f.change,f.focus,f.value),b=(f.name,p(f,["blur","change","focus","value","name"]));null!==a&&(m=a(m,u)),null!==m||n||(m="");var h=l({name:u,value:m},this.handlers);return"checkbox"===c.type?h.checked=!!m:"radio"===c.type&&(h.checked=m===s,h.value=s),"select"===r&&c.multiple&&(h.value=h.value||[]),"function"==typeof i?i(l({input:h,meta:b},c)):"string"==typeof r?e.createElement(r,l({},h,{children:i},c)):o(l({input:h,meta:b,children:i,component:r},c))}}]),n}(e.PureComponent);v.contextTypes={reactFinalForm:n.object},v.defaultProps={format:function(t,e){return void 0===t?"":t},parse:function(t,e){return""===t?void 0:t}};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,o=t.decorators,u=t.initialValues,c=t.mutators,l=t.onSubmit,f=(t.render,t.subscription),p={debug:i,initialValues:u,mutators:c,onSubmit:l,validate:t.validate,validateOnBlur:t.validateOnBlur};try{n.form=r.createForm(p)}catch(t){a(!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},o&&o.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 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.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+")(2.1.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 i=void 0;return a(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(e){i?r.notify(e):(i=e,t.onChange&&t.onChange(e))}),r.state={state:i},r}return f(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;i(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=v,t.Form=F,t.version="2.1.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 i(t,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e}function o(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,render:r})):r?r(l({},a,{children:i})):"function"!=typeof i?null:i(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var a=function(t,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,n){if(!n&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(n&&t.nativeEvent)return t.nativeEvent.text;var r=t.target,i=r.type,o=r.value,a=r.checked;switch(i){case"checkbox":if(void 0!==o){if(a)return Array.isArray(e)?e.concat(o):[o];if(!Array.isArray(e))return e;var u=e.indexOf(o);return u<0?e:e.slice(0,u).concat(e.slice(u+1))}return!!a;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}},d=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),v=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.isEqual,i=t.name,o=t.subscription,a=t.validateFields;r.unsubscribe=r.context.reactFinalForm.registerField(i,e,o||d,{isEqual:n,validate:r.validate,validateFields:a})},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=r.props.parse,n=t&&t.target?h(t,r.state.state.value,b):t;r.state.state.change(null!==e?e(n,r.props.name):n)},onFocus:function(t){r.state.state.focus()}};var i=void 0;return a(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||i(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.allowNull,r=t.component,i=t.children,a=t.format,u=(t.parse,t.isEqual,t.name),s=(t.subscription,t.validate,t.validateFields,t.value),c=p(t,["allowNull","component","children","format","parse","isEqual","name","subscription","validate","validateFields","value"]),f=this.state.state,m=(f.blur,f.change,f.focus,f.value),b=(f.name,p(f,["blur","change","focus","value","name"]));null!==a&&(m=a(m,u)),null!==m||n||(m="");var h=l({name:u,value:m},this.handlers);return"checkbox"===c.type?void 0===s?h.checked=!!m:(h.checked=Array.isArray(m)&&~m.indexOf(s),h.value=s):"radio"===c.type&&(h.checked=m===s,h.value=s),"select"===r&&c.multiple&&(h.value=h.value||[]),"function"==typeof i?i(l({input:h,meta:b},c)):"string"==typeof r?e.createElement(r,l({},h,{children:i},c)):o(l({input:h,meta:b,children:i,component:r},c))}}]),n}(e.PureComponent);v.contextTypes={reactFinalForm:n.object},v.defaultProps={format:function(t,e){return void 0===t?"":t},parse:function(t,e){return""===t?void 0:t}};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&&t.preventDefault(),n.form.submit()};t.children,t.component;var i=t.debug,o=t.decorators,u=t.initialValues,c=t.mutators,l=t.onSubmit,f=(t.render,t.subscription),p={debug:i,initialValues:u,mutators:c,onSubmit:l,validate:t.validate,validateOnBlur:t.validateOnBlur};try{n.form=r.createForm(p)}catch(t){a(!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},o&&o.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 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.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+")(2.1.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 i=void 0;return a(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(e){i?r.notify(e):(i=e,t.onChange&&t.onChange(e))}),r.state={state:i},r}return f(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;i(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"])),r=this.context.reactFinalForm;return e?null:o(l({},n,this.state.state,{mutators:r&&r.mutators,batch:r&&r.batch,blur:r&&r.blur,change:r&&r.change,focus:r&&r.focus,initialize:r&&r.initialize,reset:r&&r.reset}))}}]),e}(e.PureComponent);g.contextTypes={reactFinalForm:n.object},t.Field=v,t.Form=F,t.version="2.1.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": "2.1.1",
+  "version": "2.2.0",
   "description":
@@ -68,3 +68,3 @@ "🏁 High performance subscription-based form state management for React",
   "peerDependencies": {
-    "final-form": "^3.0.0",
+    "final-form": ">=3.0.1",
     "prop-types": "^15.6.0",
@@ -71,0 +71,0 @@ "react": "^15.3.0 || ^16.0.0-0"

README.md

@@ -18,3 +18,3 @@ # 🏁 React Final Form
 
-✅ 💥 **2.7k gzipped** 💥
+✅ 💥 **2.8k gzipped** 💥
 
@@ -129,2 +129,4 @@ ---
   * [Parse and Format (and Normalize)](#parse-and-format-and-normalize)
+  * [Auto-Save with Debounce](#auto-save-with-debounce)
+  * [Auto-Save on Field Blur](#auto-save-on-field-blur)
 * [Rendering](#rendering)
@@ -186,3 +188,3 @@ * [API](#api)
     * [`focus: (name: string) => void`](#focus-name-string--void)
-    * [`handleSubmit: (SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
+    * [`handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
     * [`initialize: (values: Object) => void`](#initialize-values-object--void)
@@ -198,2 +200,9 @@ * [`mutators?: { [string]: Function }`](#mutators--string-function-)
   * [`FormSpyRenderProps`](#formspyrenderprops)
+    * [`batch: (fn: () => void) => void)`](#batch-fn---void--void-1)
+    * [`blur: (name: string) => void`](#blur-name-string--void-1)
+    * [`change: (name: string, value: any) => void`](#change-name-string-value-any--void-1)
+    * [`focus: (name: string) => void`](#focus-name-string--void-1)
+    * [`initialize: (values: Object) => void`](#initialize-values-object--void-1)
+    * [`mutators?: { [string]: Function }`](#mutators--string-function--1)
+    * [`reset: () => void`](#reset---void-1)
 
@@ -299,2 +308,10 @@ <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+### [Auto-Save with Debounce](https://codesandbox.io/s/5w4yrpyo7k)
+
+Demonstrates how to use a `FormSpy` component to listen for value changes and automatically submit different values after a debounce period.
+
+### [Auto-Save on Field Blur](https://codesandbox.io/s/7k742qpo36)
+
+Demonstrates how to use a `FormSpy` component to listen for values and active field changes to automatically submit values when fields are blurred.
+
 ## Rendering
@@ -405,6 +422,9 @@
 
-**This is only used for radio buttons!** The value of the radio button. The
-radio button will render as `checked` if and only if the value given here `===`
-the value for the field in the form.
+**This is only used for checkboxes radio buttons!**
 
+* Radio Buttons: The value of the radio button. The radio button will render as `checked` if and only if the value given here `===` the value for the field in the form.
+* Checkboxes:
+  * `value` is specified: the checkbox will be `checked` if the value given in `value` is contained in the array that is the value for the field for the form. Checking the box will add the value to the array, and unchecking the checkbox will remove the value from the array.
+  * no `value` is specified: the checkbox will be `checked` if the value is truthy. Checking the box will set the value to `true`, and unchecking the checkbox will set the value to `false`.
+
 ### `FieldRenderProps`
@@ -587,3 +607,3 @@
 
-#### `handleSubmit: (SyntheticEvent<HTMLFormElement>) => void`
+#### `handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`
 
@@ -654,2 +674,33 @@ A function intended for you to give directly to the `<form>` tag: `<form onSubmit={handleSubmit}/>`.
 subscribed to with the
-[`subscription` prop](https://github.com/final-form/react-final-form#subscription-formsubscription).
+[`subscription` prop](https://github.com/final-form/react-final-form#subscription-formsubscription). Also included will be many of the same props provided to [`FormRenderProps`](#formrenderprops):
+
+#### `batch: (fn: () => void) => void)`
+
+A function that allows batch updates to be done to the form state.
+[See the 🏁 Final Form docs on `batch`](https://github.com/final-form/final-form#batch-fn---void--void).
+
+#### `blur: (name: string) => void`
+
+A function to blur (mark inactive) any field.
+
+#### `change: (name: string, value: any) => void`
+
+A function to change the value of any field.
+
+#### `focus: (name: string) => void`
+
+A function to focus (mark active) any field.
+
+#### `initialize: (values: Object) => void`
+
+A function that initializes the form values.
+[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/final-form/final-form#mutators--string-function-).
+
+#### `reset: () => void`
+
+A function that resets the form values to their last initialized values.
+[See the 🏁 Final Form docs on `reset`](https://github.com/final-form/final-form#reset---void).

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

105158

increased by8.29%

Lines of code

1694

increased by7.28%

Number of lines in readme file

699

increased by7.87%

No dependency changes