react-final-form - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.d.ts

@@ -65,2 +65,4 @@ import * as React from 'react'
   allowNull?: boolean
+  format: ((value: any, name: string) => any) | null
+  parse: ((value: any, name: string) => any) | null
   name: string
@@ -67,0 +69,0 @@ subscription?: FieldSubscription

dist/react-final-form.cjs.js

@@ -243,4 +243,6 @@ 'use strict';
       onChange: function onChange(event) {
+        var parse = _this.props.parse;
+
         var value = event && event.target ? getValue(event, isReactNative) : event;
-        _this.state.state.change(value === '' ? undefined : value);
+        _this.state.state.change(parse !== null ? parse(value, _this.props.name) : value);
       },
@@ -294,2 +296,4 @@ onFocus: function onFocus(event) {
           children = _props.children,
+          format = _props.format,
+          parse = _props.parse,
           isEqual = _props.isEqual,
@@ -301,3 +305,3 @@ name = _props.name,
           _value = _props.value,
-          rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']);
+          rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'format', 'parse', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']);
       var _state$state = this.state.state,
@@ -311,3 +315,6 @@ blur = _state$state.blur,
 
-      if (value === undefined || value === null && !allowNull) {
+      if (format !== null) {
+        value = format(value, name);
+      }
+      if (value === null && !allowNull) {
         value = '';
@@ -343,2 +350,10 @@ }
 };
+Field.defaultProps = {
+  format: function format(value, name) {
+    return value === undefined ? '' : value;
+  },
+  parse: function parse(value, name) {
+    return value === '' ? undefined : value;
+  }
+};
 
@@ -369,3 +384,3 @@ //
 //      
-var version$1 = '2.0.0';
+var version$1 = '2.1.0';
 
@@ -372,0 +387,0 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {

dist/react-final-form.es.js

@@ -237,4 +237,6 @@ import { PureComponent, createElement } from 'react';
       onChange: function onChange(event) {
+        var parse = _this.props.parse;
+
         var value = event && event.target ? getValue(event, isReactNative) : event;
-        _this.state.state.change(value === '' ? undefined : value);
+        _this.state.state.change(parse !== null ? parse(value, _this.props.name) : value);
       },
@@ -288,2 +290,4 @@ onFocus: function onFocus(event) {
           children = _props.children,
+          format = _props.format,
+          parse = _props.parse,
           isEqual = _props.isEqual,
@@ -295,3 +299,3 @@ name = _props.name,
           _value = _props.value,
-          rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']);
+          rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'format', 'parse', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']);
       var _state$state = this.state.state,
@@ -305,3 +309,6 @@ blur = _state$state.blur,
 
-      if (value === undefined || value === null && !allowNull) {
+      if (format !== null) {
+        value = format(value, name);
+      }
+      if (value === null && !allowNull) {
         value = '';
@@ -337,2 +344,10 @@ }
 };
+Field.defaultProps = {
+  format: function format(value, name) {
+    return value === undefined ? '' : value;
+  },
+  parse: function parse(value, name) {
+    return value === '' ? undefined : value;
+  }
+};
 
@@ -363,3 +378,3 @@ //
 //      
-var version$1 = '2.0.0';
+var version$1 = '2.1.0';
 
@@ -366,0 +381,0 @@ var all$1 = formSubscriptionItems.reduce(function (result, key) {

dist/react-final-form.umd.js

@@ -240,4 +240,6 @@ (function (global, factory) {
       onChange: function onChange(event) {
+        var parse = _this.props.parse;
+
         var value = event && event.target ? getValue(event, isReactNative) : event;
-        _this.state.state.change(value === '' ? undefined : value);
+        _this.state.state.change(parse !== null ? parse(value, _this.props.name) : value);
       },
@@ -291,2 +293,4 @@ onFocus: function onFocus(event) {
           children = _props.children,
+          format = _props.format,
+          parse = _props.parse,
           isEqual = _props.isEqual,
@@ -298,3 +302,3 @@ name = _props.name,
           _value = _props.value,
-          rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']);
+          rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'format', 'parse', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']);
       var _state$state = this.state.state,
@@ -308,3 +312,6 @@ blur = _state$state.blur,
 
-      if (value === undefined || value === null && !allowNull) {
+      if (format !== null) {
+        value = format(value, name);
+      }
+      if (value === null && !allowNull) {
         value = '';
@@ -340,2 +347,10 @@ }
 };
+Field.defaultProps = {
+  format: function format(value, name) {
+    return value === undefined ? '' : value;
+  },
+  parse: function parse(value, name) {
+    return value === '' ? undefined : value;
+  }
+};
 
@@ -366,3 +381,3 @@ //
 //      
-var version$1 = '2.0.0';
+var version$1 = '2.1.0';
 
@@ -369,0 +384,0 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {

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=t&&t.target?h(t,b):t;r.state.state.change(""===e?void 0:e)},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.isEqual,t.name),u=(t.subscription,t.validate,t.validateFields,t.value),s=p(t,["allowNull","component","children","isEqual","name","subscription","validate","validateFields","value"]),c=this.state.state,f=(c.blur,c.change,c.focus,c.value),m=(c.name,p(c,["blur","change","focus","value","name"]));(void 0===f||null===f&&!n)&&(f="");var b=l({name:a,value:f},this.handlers);return"checkbox"===s.type?b.checked=!!f:"radio"===s.type&&(b.checked=f===u,b.value=u),"select"===r&&s.multiple&&(b.value=b.value||[]),"function"==typeof i?i(l({input:b,meta:m},s)):"string"==typeof r?e.createElement(r,l({},b,{children:i},s)):o(l({input:b,meta:m,children:i,component:r},s))}}]),n}(e.PureComponent);v.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,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.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){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.0.0",t.FormSpy=g,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],e):e(t["react-final-form"]={},t.React,t.PropTypes,t.FinalForm)}(this,function(t,e,n,r){"use strict";function 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})});
 //# sourceMappingURL=react-final-form.umd.min.js.map

package.json

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

README.md

@@ -138,4 +138,6 @@ # 🏁 React Final Form
     * [`component?: React.ComponentType<FieldRenderProps>`](#component-reactcomponenttypefieldrenderprops)
+    * [`format?: ((value: any, name: string) => any) | null`](#format-value-any-name-string--any--null)
     * [`isEqual?: (a: any, b: any) => boolean`](#isequal-a-any-b-any--boolean)
     * [`name: string`](#name-string)
+    * [`parse?: ((value: any, name: string) => any) | null`](#parse-value-any-name-string--any--null)
     * [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode)
@@ -172,3 +174,3 @@ * [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
     * [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
-    * [`onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`](#onsubmit-values-object-callback-errors-object--void--object--promiseobject--void)
+    * [`onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`](#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void)
     * [`render?: (props: FormRenderProps) => React.Node`](#render-props-formrenderprops--reactnode)
@@ -350,2 +352,8 @@ * [`subscription?: FormSubscription`](#subscription-formsubscription)
 
+#### `format?: ((value: any, name: string) => any) | null`
+
+A function that takes the value from the form values and the name of the field and formats the value to give to the input. Common use cases include converting javascript `Date` values into a localized date string. Almost always used in conjunction with `parse`.
+
+**Note: If you pass `null` to `format`, it will override the default behavior of converting `undefined` into `''`. If you do this, making sure your inputs are "controlled" is up to you.**
+
 #### `isEqual?: (a: any, b: any) => boolean`
@@ -359,2 +367,8 @@
 
+#### `parse?: ((value: any, name: string) => any) | null`
+
+A function that takes the value from the input and name of the field and converts the value into the value you want stored as this field's value in the form. Common usecases include converting strings into `Number`s or parsing localized dates into actual javascript `Date` objects. Almost always used in conjuction with `format`.
+
+**Note: If you pass `null` to `parse`, it will override the default behavior of converting `''` into `undefined`, thus allowing you to have form values of `''`.**
+
 #### `render?: (props: FieldRenderProps) => React.Node`
@@ -361,0 +375,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

96721

increased by3.11%

Lines of code

1579

increased by2.93%

Number of lines in readme file

643

increased by2.23%

No dependency changes