Socket
Socket
Sign inDemoInstall

react-final-form

Package Overview
Dependencies
Maintainers
1
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-final-form - npm Package Compare versions

Comparing version 0.0.6 to 1.0.0

2

dist/react-final-form.cjs.js

@@ -310,3 +310,3 @@ 'use strict';

//
var version$1 = '0.0.6';
var version$1 = '1.0.0';

@@ -313,0 +313,0 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {

2

dist/react-final-form.es.js

@@ -304,3 +304,3 @@ import { PureComponent, createElement } from 'react';

//
var version$1 = '0.0.6';
var version$1 = '1.0.0';

@@ -307,0 +307,0 @@ var all$1 = formSubscriptionItems.reduce(function (result, key) {

2

dist/react-final-form.umd.js

@@ -307,3 +307,3 @@ (function (global, factory) {

//
var version$1 = '0.0.6';
var version$1 = '1.0.0';

@@ -310,0 +310,0 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {

2

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

@@ -1,2 +0,2 @@

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

8

package.json
{
"name": "react-final-form",
"version": "0.0.6",
"version": "1.0.0",
"description":
"High performance subscription-based form state management for React",
"🏁 High performance subscription-based form state management for React",
"main": "dist/react-final-form.cjs.js",

@@ -43,3 +43,3 @@ "jsnext:main": "dist/react-final-form.es.js",

"eslint-plugin-react": "^7.4.0",
"final-form": "0.0.3",
"final-form": "^1.0.0",
"flow": "^0.2.3",

@@ -67,3 +67,3 @@ "flow-bin": "^0.59.0",

"peerDependencies": {
"final-form": "^0.0.3",
"final-form": "^1.0.0",
"prop-types": "^15.6.0",

@@ -70,0 +70,0 @@ "react": "^15.0.0-0 || ^16.0.0-0"

13

README.md

@@ -12,3 +12,3 @@ # 🏁 React Final Form

✅ 💥 **2.09k gzipped** 💥
✅ 💥 **2.2k gzipped** 💥

@@ -108,2 +108,3 @@ ---

* [Third Party Components](#third-party-components)
* [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
* [Rendering](#rendering)

@@ -208,2 +209,10 @@ * [API](#api)

### 💥 [Performance Optimization Through Subscriptions](https://codesandbox.io/s/32r824vxy1) 💥
Demonstrates how, by restricting which parts of form state the form component
needs to render, it reduce the number of times the whole form has to rerender.
Yet, if some part of form state is needed inside of it, the
[`FormSpy`](#formspy--reactcomponenttypeformspyprops) component can be used to
attain it.
## Rendering

@@ -221,3 +230,3 @@

The following can be imported from `final-form`.
The following can be imported from `react-final-form`.

@@ -224,0 +233,0 @@ ### `Form : React.ComponentType<FormProps>`

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc