react-final-form - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/react-final-form.cjs.js

@@ -303,2 +303,13 @@ 'use strict';
 
+    _this.subscribe = function (_ref, listener) {
+      var name = _ref.name,
+          subscription = _ref.subscription;
+
+      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all$1, _this.validate);
+    };
+
+    _this.validate = function (value, allValues) {
+      return _this.props.validate && _this.props.validate(value, allValues);
+    };
+
     _this.notify = function (state) {
@@ -320,4 +331,2 @@ return _this.setState(state);
     };
-    var name = props.name,
-        subscription = props.subscription;
 
@@ -328,3 +337,3 @@ var initialState = void 0;
       // avoid error, warning will alert developer to their mistake
-      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, function (state) {
+      _this.subscribe(props, function (state) {
         if (initialState) {
@@ -335,3 +344,3 @@ _this.notify(state);
         }
-      }, subscription || all$1);
+      });
     }
@@ -352,3 +361,3 @@ _this.state = initialState || {};
           this.unsubscribe();
-          this.unsubscribe = this.context.reactFinalForm.registerField(name, this.notify, subscription || all$1);
+          this.subscribe(nextProps, this.notify);
         }
@@ -355,0 +364,0 @@ }

dist/react-final-form.es.js

@@ -297,2 +297,13 @@ import { PureComponent, createElement } from 'react';
 
+    _this.subscribe = function (_ref, listener) {
+      var name = _ref.name,
+          subscription = _ref.subscription;
+
+      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all$1, _this.validate);
+    };
+
+    _this.validate = function (value, allValues) {
+      return _this.props.validate && _this.props.validate(value, allValues);
+    };
+
     _this.notify = function (state) {
@@ -314,4 +325,2 @@ return _this.setState(state);
     };
-    var name = props.name,
-        subscription = props.subscription;
 
@@ -322,3 +331,3 @@ var initialState = void 0;
       // avoid error, warning will alert developer to their mistake
-      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, function (state) {
+      _this.subscribe(props, function (state) {
         if (initialState) {
@@ -329,3 +338,3 @@ _this.notify(state);
         }
-      }, subscription || all$1);
+      });
     }
@@ -346,3 +355,3 @@ _this.state = initialState || {};
           this.unsubscribe();
-          this.unsubscribe = this.context.reactFinalForm.registerField(name, this.notify, subscription || all$1);
+          this.subscribe(nextProps, this.notify);
         }
@@ -349,0 +358,0 @@ }

dist/react-final-form.umd.js

@@ -300,2 +300,13 @@ (function (global, factory) {
 
+    _this.subscribe = function (_ref, listener) {
+      var name = _ref.name,
+          subscription = _ref.subscription;
+
+      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all$1, _this.validate);
+    };
+
+    _this.validate = function (value, allValues) {
+      return _this.props.validate && _this.props.validate(value, allValues);
+    };
+
     _this.notify = function (state) {
@@ -317,4 +328,2 @@ return _this.setState(state);
     };
-    var name = props.name,
-        subscription = props.subscription;
 
@@ -325,3 +334,3 @@ var initialState = void 0;
       // avoid error, warning will alert developer to their mistake
-      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, function (state) {
+      _this.subscribe(props, function (state) {
         if (initialState) {
@@ -332,3 +341,3 @@ _this.notify(state);
         }
-      }, subscription || all$1);
+      });
     }
@@ -349,3 +358,3 @@ _this.state = initialState || {};
           this.unsubscribe();
-          this.unsubscribe = this.context.reactFinalForm.registerField(name, this.notify, subscription || all$1);
+          this.subscribe(nextProps, this.notify);
         }
@@ -352,0 +361,0 @@ }

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

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

package.json

 {
   "name": "react-final-form",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description":
@@ -43,3 +43,3 @@ "High performance subscription-based form state management for React",
     "eslint-plugin-react": "^7.4.0",
-    "final-form": "0.0.2",
+    "final-form": "0.0.3",
     "flow": "^0.2.3",
@@ -67,3 +67,3 @@ "flow-bin": "^0.59.0",
   "peerDependencies": {
-    "final-form": "0.0.1",
+    "final-form": "^0.0.3",
     "prop-types": "^15.6.0",
@@ -70,0 +70,0 @@ "react": "^15.0.0-0 || ^16.0.0-0"

README.md

@@ -12,3 +12,3 @@ # 🏁 React Final Form
 
-✅ 💥 **2.07k gzipped** 💥
+✅ 💥 **2.09k gzipped** 💥
 
@@ -100,2 +100,6 @@ ---
 
+* [Examples](#examples)
+  * [Simple Example](#simple-example)
+  * [Synchronous Record-Level Validation](#synchronous-record-level-validation)
+  * [Synchronous Field-Level Validation](#synchronous-field-level-validation)
 * [Rendering](#rendering)
@@ -113,2 +117,3 @@ * [API](#api)
     * [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
+    * [`validate?: (value: ?any, allValues: Object) => ?any`](#validate-value-any-allvalues-object--any)
     * [`value?: any`](#value-any)
@@ -141,3 +146,4 @@ * [`FieldRenderProps`](#fieldrenderprops)
     * [`subscription?: FormSubscription`](#subscription-formsubscription)
-    * [`validate?: (values: Object, callback: ?(errors: Object) => void) => Object | void`](#validate-values-object-callback-errors-object--void--object--void)
+    * [`validate?: (values: Object) => void) => Object | Promise<Object>`](#validate-values-object--void--object--promiseobject)
+    * [`validateOnBlur?: boolean`](#validateonblur-boolean)
   * [`FormRenderProps`](#formrenderprops)
@@ -156,2 +162,15 @@ * [`batch: (() => void) => void`](#batch---void--void)
 
+Uses the built-in React inputs: `input`, `select`, and `textarea` to build a
+form with no validation.
+
+### [Synchronous Record-Level Validation](https://codesandbox.io/s/yk1zx56y5j)
+
+Introduces a whole-record validation function and demonstrates how to display
+errors next to fields using child render functions.
+
+### [Synchronous Field-Level Validation](https://codesandbox.io/s/2k054qp40)
+
+Introduces field-level validation functions and demonstrates how to display
+errors next to fields using child render functions.
+
 ## Rendering
@@ -225,2 +244,7 @@
 
+#### `validate?: (value: ?any, allValues: Object) => ?any`
+
+A function that takes the field value, and all the values of the form and
+returns an error if the value is invalid, or `undefined` if the value is valid.
+
 #### `value?: any`
@@ -236,4 +260,4 @@
 provides to your render function or component. This object separates out the
-values and callbacks intended to be given to the input component from the `meta`
-data about the field. The `input` can be destructured directly into an
+values and event handlers intended to be given to the input component from the
+`meta` data about the field. The `input` can be destructured directly into an
 `<input/>` like so: `<input {...props.input}/>`. Keep in mind that **the values
@@ -360,6 +384,10 @@ in `meta` are dependent on you having subscribed to them** with the
 
-#### `validate?: (values: Object, callback: ?(errors: Object) => void) => Object | void`
+#### `validate?: (values: Object) => void) => Object | Promise<Object>`
 
-[See the 🏁 Final Form docs on `validate`](https://github.com/erikras/final-form#validate-values-object-callback-errors-object--void--object--void).
+[See the 🏁 Final Form docs on `validate`](https://github.com/erikras/final-form#validate-values-object--void--object--promiseobject).
 
+#### `validateOnBlur?: boolean`
+
+[See the 🏁 Final Form docs on `validateOnBlur`](https://github.com/erikras/final-form#validateonblur-boolean).
+
 ### `FormRenderProps`
@@ -366,0 +394,0 @@

No alert changes

Improved metrics

Total package byte prevSize

63077

increased by3.15%

Lines of code

1057

increased by1.73%

Number of lines in readme file

418

increased by7.18%

No dependency changes