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 4.0.2 to 4.1.0

typescript/index.d.ts
typescript/index.tsx
typescript/tsconfig.json

103

dist/react-final-form.cjs.js

@@ -5,44 +5,10 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
var React = require('react');
var finalForm = require('final-form');
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
//

@@ -167,29 +133,34 @@ function diffSubscription (a, b, keys) {

var ReactFinalFormContext = React.createContext(null);
var getDisplayName = function getDisplayName(Component) {
var displayName = Component.displayName || Component.name || 'Component';
return "ReactFinalForm(" + displayName + ")";
};
var withReactFinalForm = function withReactFinalForm(Component) {
return (
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(_class, _React$Component);
var _class, _temp;
function _class() {
return _React$Component.apply(this, arguments) || this;
}
return _temp = _class =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(_class, _React$Component);
var _proto = _class.prototype;
function _class() {
return _React$Component.apply(this, arguments) || this;
}
_proto.render = function render() {
var _this = this;
var _proto = _class.prototype;
return React.createElement(ReactFinalFormContext.Consumer, {
children: function children(reactFinalForm) {
return React.createElement(Component, _extends({
reactFinalForm: reactFinalForm
}, _this.props));
}
});
};
_proto.render = function render() {
var _this = this;
return _class;
}(React.Component)
);
return React.createElement(ReactFinalFormContext.Consumer, {
children: function children(reactFinalForm) {
return React.createElement(Component, _extends({
reactFinalForm: reactFinalForm
}, _this.props));
}
});
};
return _class;
}(React.Component), _class.displayName = getDisplayName(Component), _temp;
};

@@ -213,3 +184,5 @@

_this.subscribe = function (_ref, listener) {
var isEqual = _ref.isEqual,
var defaultValue = _ref.defaultValue,
initialValue = _ref.initialValue,
isEqual = _ref.isEqual,
name = _ref.name,

@@ -219,6 +192,8 @@ subscription = _ref.subscription,

_this.unsubscribe = _this.props.reactFinalForm.registerField(name, listener, subscription || all, {
isEqual: isEqual,
defaultValue: defaultValue,
getValidator: function getValidator() {
return _this.props.validate;
},
initialValue: initialValue,
isEqual: isEqual,
validateFields: validateFields

@@ -353,2 +328,3 @@ });

invalid: otherState.invalid,
modified: otherState.modified,
pristine: otherState.pristine,

@@ -466,3 +442,3 @@ submitError: otherState.submitError,

var version = '4.0.2';
var version = '4.1.0';
var versions = {

@@ -884,1 +860,2 @@ 'final-form': finalForm.version,

exports.withReactFinalForm = withReactFinalForm;
exports.ReactFinalFormContext = ReactFinalFormContext;

112

dist/react-final-form.es.js

@@ -1,43 +0,7 @@

import { createElement, Component, createContext } from 'react';
import { fieldSubscriptionItems, configOptions, createForm, formSubscriptionItems, version } from 'final-form';
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
import { createElement, createContext, Component } from 'react';
import { fieldSubscriptionItems, formSubscriptionItems, createForm, configOptions, version as version$1 } from 'final-form';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
//

@@ -162,29 +126,34 @@ function diffSubscription (a, b, keys) {

var ReactFinalFormContext = createContext(null);
var withReactFinalForm = function withReactFinalForm(Component$$1) {
return (
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(_class, _React$Component);
var getDisplayName = function getDisplayName(Component) {
var displayName = Component.displayName || Component.name || 'Component';
return "ReactFinalForm(" + displayName + ")";
};
var withReactFinalForm = function withReactFinalForm(Component$1) {
var _class, _temp;
function _class() {
return _React$Component.apply(this, arguments) || this;
}
return _temp = _class =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(_class, _React$Component);
var _proto = _class.prototype;
function _class() {
return _React$Component.apply(this, arguments) || this;
}
_proto.render = function render() {
var _this = this;
var _proto = _class.prototype;
return createElement(ReactFinalFormContext.Consumer, {
children: function children(reactFinalForm) {
return createElement(Component$$1, _extends({
reactFinalForm: reactFinalForm
}, _this.props));
}
});
};
_proto.render = function render() {
var _this = this;
return _class;
}(Component)
);
return createElement(ReactFinalFormContext.Consumer, {
children: function children(reactFinalForm) {
return createElement(Component$1, _extends({
reactFinalForm: reactFinalForm
}, _this.props));
}
});
};
return _class;
}(Component), _class.displayName = getDisplayName(Component$1), _temp;
};

@@ -208,3 +177,5 @@

_this.subscribe = function (_ref, listener) {
var isEqual = _ref.isEqual,
var defaultValue = _ref.defaultValue,
initialValue = _ref.initialValue,
isEqual = _ref.isEqual,
name = _ref.name,

@@ -214,6 +185,8 @@ subscription = _ref.subscription,

_this.unsubscribe = _this.props.reactFinalForm.registerField(name, listener, subscription || all, {
isEqual: isEqual,
defaultValue: defaultValue,
getValidator: function getValidator() {
return _this.props.validate;
},
initialValue: initialValue,
isEqual: isEqual,
validateFields: validateFields

@@ -348,2 +321,3 @@ });

invalid: otherState.invalid,
modified: otherState.modified,
pristine: otherState.pristine,

@@ -461,6 +435,6 @@ submitError: otherState.submitError,

var version$1 = '4.0.2';
var version = '4.1.0';
var versions = {
'final-form': version,
'react-final-form': version$1
'final-form': version$1,
'react-final-form': version
};

@@ -874,2 +848,2 @@ var all$1 = formSubscriptionItems.reduce(function (result, key) {

export { Field$1 as Field, ReactFinalForm as Form, version$1 as version, FormSpy$1 as FormSpy, withReactFinalForm };
export { Field$1 as Field, ReactFinalForm as Form, version, FormSpy$1 as FormSpy, withReactFinalForm, ReactFinalFormContext };

77

dist/react-final-form.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('final-form')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'final-form'], factory) :
(factory((global['react-final-form'] = {}),global.React,global.FinalForm));
}(this, (function (exports,React,finalForm) { 'use strict';
(global = global || self, factory(global['react-final-form'] = {}, global.React, global.FinalForm));
}(this, function (exports, React, finalForm) { 'use strict';

@@ -25,8 +25,2 @@ function _extends() {

function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -47,2 +41,8 @@ if (source == null) return {};

function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
//

@@ -167,29 +167,34 @@ function diffSubscription (a, b, keys) {

var ReactFinalFormContext = React.createContext(null);
var getDisplayName = function getDisplayName(Component) {
var displayName = Component.displayName || Component.name || 'Component';
return "ReactFinalForm(" + displayName + ")";
};
var withReactFinalForm = function withReactFinalForm(Component) {
return (
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(_class, _React$Component);
var _class, _temp;
function _class() {
return _React$Component.apply(this, arguments) || this;
}
return _temp = _class =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(_class, _React$Component);
var _proto = _class.prototype;
function _class() {
return _React$Component.apply(this, arguments) || this;
}
_proto.render = function render() {
var _this = this;
var _proto = _class.prototype;
return React.createElement(ReactFinalFormContext.Consumer, {
children: function children(reactFinalForm) {
return React.createElement(Component, _extends({
reactFinalForm: reactFinalForm
}, _this.props));
}
});
};
_proto.render = function render() {
var _this = this;
return _class;
}(React.Component)
);
return React.createElement(ReactFinalFormContext.Consumer, {
children: function children(reactFinalForm) {
return React.createElement(Component, _extends({
reactFinalForm: reactFinalForm
}, _this.props));
}
});
};
return _class;
}(React.Component), _class.displayName = getDisplayName(Component), _temp;
};

@@ -213,3 +218,5 @@

_this.subscribe = function (_ref, listener) {
var isEqual = _ref.isEqual,
var defaultValue = _ref.defaultValue,
initialValue = _ref.initialValue,
isEqual = _ref.isEqual,
name = _ref.name,

@@ -219,6 +226,8 @@ subscription = _ref.subscription,

_this.unsubscribe = _this.props.reactFinalForm.registerField(name, listener, subscription || all, {
isEqual: isEqual,
defaultValue: defaultValue,
getValidator: function getValidator() {
return _this.props.validate;
},
initialValue: initialValue,
isEqual: isEqual,
validateFields: validateFields

@@ -353,2 +362,3 @@ });

invalid: otherState.invalid,
modified: otherState.modified,
pristine: otherState.pristine,

@@ -466,3 +476,3 @@ submitError: otherState.submitError,

var version = '4.0.2';
var version = '4.1.0';
var versions = {

@@ -884,6 +894,7 @@ 'final-form': finalForm.version,

exports.withReactFinalForm = withReactFinalForm;
exports.ReactFinalFormContext = ReactFinalFormContext;
Object.defineProperty(exports, '__esModule', { value: true });
})));
}));
//# sourceMappingURL=react-final-form.umd.js.map

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("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],e):e(t["react-final-form"]={},t.React,t.FinalForm)}(this,function(t,h,s){"use strict";function v(){return(v=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}).apply(this,arguments)}function r(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function b(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],0<=e.indexOf(n)||(i[n]=t[n]);return i}function i(e,n,t){return e?!n||t.some(function(t){return e[t]!==n[t]}):!!n}function y(t,e){var n=t.render,r=t.children,i=t.component,o=b(t,["render","children","component"]);return i?h.createElement(i,v({},o,{children:r,render:n})):n?n(v({},o,{children:r})):"function"!=typeof r?null:r(o)}var o="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,u=h.createContext(null),e=function(n){return function(t){function e(){return t.apply(this,arguments)||this}return r(e,t),e.prototype.render=function(){var e=this;return h.createElement(u.Consumer,{children:function(t){return h.createElement(n,v({reactFinalForm:t},e.props))}})},e}(h.Component)},c=s.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),n=function(n){function d(t){var a,e;return(a=n.call(this,t)||this).subscribe=function(t,e){var n=t.isEqual,r=t.name,i=t.subscription,o=t.validateFields;a.unsubscribe=a.props.reactFinalForm.registerField(r,e,i||c,{isEqual:n,getValidator:function(){return a.props.validate},validateFields:o})},a.notify=function(t){return a.setState({state:t})},a.handlers={onBlur:function(t){var e=a.state.state;if(e){var n=a.props,r=n.format,i=n.formatOnBlur;e.blur(),r&&i&&e.change(r(e.value,e.name))}},onChange:function(t){var e=a.props,n=e.parse,r=e.value,i=t&&t.target?function(t,e,n,r){if(!r&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(r&&t.nativeEvent)return t.nativeEvent.text;var i=t.target,o=i.type,a=i.value,s=i.checked;switch(o){case"checkbox":if(void 0===n)return!!s;if(s)return Array.isArray(e)?e.concat(n):[n];if(!Array.isArray(e))return e;var u=e.indexOf(n);return u<0?e:e.slice(0,u).concat(e.slice(u+1));case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var r=t[n];r.selected&&e.push(r.value)}return e}(t.target.options);default:return a}}(t,a.state.state&&a.state.state.value,r,o):t;a.state.state&&a.state.state.change(n?n(i,a.props.name):i)},onFocus:function(t){a.state.state&&a.state.state.focus()}},a.props.reactFinalForm&&a.subscribe(t,function(t){e?a.notify(t):e=t}),a.state={state:e},a}r(d,n);var t=d.prototype;return t.componentDidUpdate=function(t){var e=this.props,n=e.name,r=e.subscription;(t.name!==n||i(t.subscription,r,s.fieldSubscriptionItems))&&this.props.reactFinalForm&&(this.unsubscribe(),this.subscribe(this.props,this.notify))},t.componentWillUnmount=function(){this.unsubscribe()},t.render=function(){var t=this.props,e=t.allowNull,n=t.component,r=t.children,i=t.format,o=t.formatOnBlur,a=(t.parse,t.isEqual,t.name),s=(t.subscription,t.validate,t.validateFields,t.reactFinalForm,t.value),u=b(t,["allowNull","component","children","format","formatOnBlur","parse","isEqual","name","subscription","validate","validateFields","reactFinalForm","value"]),c=this.state.state||{},f=(c.blur,c.change,c.focus,c.value),l=(c.name,b(c,["blur","change","focus","value","name"])),p={active:l.active,data:l.data,dirty:l.dirty,dirtySinceLastSubmit:l.dirtySinceLastSubmit,error:l.error,initial:l.initial,invalid:l.invalid,pristine:l.pristine,submitError:l.submitError,submitFailed:l.submitFailed,submitSucceeded:l.submitSucceeded,submitting:l.submitting,touched:l.touched,valid:l.valid,visited:l.visited};o?f=d.defaultProps.format(f,a):i&&(f=i(f,a)),null!==f||e||(f="");var m=v({name:a,value:f},this.handlers);return"checkbox"===u.type?void 0===s?m.checked=!!f:(m.checked=!(!Array.isArray(f)||!~f.indexOf(s)),m.value=s):"radio"===u.type?(m.checked=f===s,m.value=s):"select"===n&&u.multiple&&(m.value=m.value||[]),"function"==typeof r?r(v({input:m,meta:p},u)):"string"==typeof n?h.createElement(n,v({},m,{children:r},u)):y(v({},{input:m,meta:p},{children:r,component:n},u))},d}(h.Component);n.defaultProps={format:function(t,e){return void 0===t?"":t},parse:function(t,e){return""===t?void 0:t}};var a=e(n),f=function(t){return!(!t||"function"!=typeof t.stopPropagation)},l="4.0.2",p={"final-form":s.version,"react-final-form":l},m=s.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),d=function(a){function t(t){var e;(e=a.call(this,t)||this).notify=function(t){e.mounted&&e.setState({state:t}),e.mounted=!0},e.handleSubmit=function(t){return t&&("function"==typeof t.preventDefault&&t.preventDefault(),"function"==typeof t.stopPropagation&&t.stopPropagation()),e.form.submit()};t.children,t.component,t.render;var n=t.subscription,r=t.decorators,i=b(t,["children","component","render","subscription","decorators"]);e.mounted=!1;try{e.form=s.createForm(i)}catch(t){}if(e.unsubscriptions=[],e.form){var o={};e.form.subscribe(function(t){o=t},n||m)(),e.state={state:o}}return r&&r.forEach(function(t){e.unsubscriptions.push(t(e.form))}),e}r(t,a);var e=t.prototype;return e.componentWillMount=function(){this.form&&this.form.pauseValidation()},e.componentDidMount=function(){this.form&&(this.unsubscriptions.push(this.form.subscribe(this.notify,this.props.subscription||m)),this.form.resumeValidation())},e.componentWillUpdate=function(){this.form&&(this.resumeValidation=this.resumeValidation||!this.form.isValidationPaused(),this.form.pauseValidation())},e.componentDidUpdate=function(e){var n=this;this.form&&this.resumeValidation&&this.form.resumeValidation(),this.props.initialValues&&!(this.props.initialValuesEqual||function(t,e){if(t===e)return!0;if("object"!=typeof t||!t||"object"!=typeof 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})(e.initialValues,this.props.initialValues)&&this.form.initialize(this.props.initialValues),s.configOptions.forEach(function(t){"initialValues"!==t&&e[t]!==n.props[t]&&n.form.setConfig(t,n.props[t])})},e.componentWillUnmount=function(){this.unsubscriptions.forEach(function(t){return t()})},e.render=function(){var n=this,t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,b(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"])),r=v({},this.state?this.state.state:{},{batch:this.form&&function(t){return n.form.batch(t)},blur:this.form&&function(t){return n.form.blur(t)},change:this.form&&function(t,e){return n.form.change(t,e)},focus:this.form&&function(t){return n.form.focus(t)},form:v({},this.form,{reset:function(t){f(t)?n.form.reset():n.form.reset(t)}}),handleSubmit:this.handleSubmit,initialize:this.form&&function(t){return n.form.initialize(t)},mutators:this.form&&Object.keys(this.form.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=n.form.mutators)[e].apply(t,arguments)},t},{}),reset:this.form&&function(t){return n.form.reset(t)}});return h.createElement(u.Provider,{value:this.form},y(v({},e,r,{__versions:p})))},t}(h.Component),g=e(function(t){function e(e){var r,n;return(r=t.call(this,e)||this).subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.props.reactFinalForm.subscribe(e,n||m)},r.notify=function(t){r.setState({state:t}),r.props.onChange&&r.props.onChange(t)},r.props.reactFinalForm&&r.subscribe(e,function(t){n?r.notify(t):(n=t,e.onChange&&e.onChange(t))}),n&&(r.state={state:n}),r}r(e,t);var n=e.prototype;return n.componentDidUpdate=function(t){var e=this.props.subscription;i(t.subscription,e,s.formSubscriptionItems)&&this.props.reactFinalForm&&(this.unsubscribe(),this.subscribe(this.props,this.notify))},n.componentWillUnmount=function(){this.unsubscribe()},n.render=function(){var t=this.props,e=t.onChange,n=t.reactFinalForm,r=b(t,["onChange","reactFinalForm"]),i={batch:n&&function(t){return n.batch(t)},blur:n&&function(t){return n.blur(t)},change:n&&function(t,e){return n.change(t,e)},focus:n&&function(t){return n.focus(t)},form:v({},n,{reset:function(t){f(t)?n.reset():n.reset(t)}}),initialize:n&&function(t){return n.initialize(t)},mutators:n&&Object.keys(n.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=n.mutators)[e].apply(t,arguments)},t},{}),reset:n&&function(t){return n.reset(t)}};return e?null:y(v({},r,this.state?this.state.state:{},i))},e}(h.Component));t.Field=a,t.Form=d,t.version=l,t.FormSpy=g,t.withReactFinalForm=e,Object.defineProperty(t,"__esModule",{value:!0})});
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],e):e((t=t||self)["react-final-form"]={},t.React,t.FinalForm)}(this,function(t,h,s){"use strict";function v(){return(v=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}).apply(this,arguments)}function b(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],0<=e.indexOf(n)||(i[n]=t[n]);return i}function i(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function o(e,n,t){return e?!n||t.some(function(t){return e[t]!==n[t]}):!!n}function y(t,e){var n=t.render,r=t.children,i=t.component,o=b(t,["render","children","component"]);return i?h.createElement(i,v({},o,{children:r,render:n})):n?n(v({},o,{children:r})):"function"!=typeof r?null:r(o)}var a="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,u=h.createContext(null),e=function(n){var t,e,r;return e=t=function(t){function e(){return t.apply(this,arguments)||this}return i(e,t),e.prototype.render=function(){var e=this;return h.createElement(u.Consumer,{children:function(t){return h.createElement(n,v({reactFinalForm:t},e.props))}})},e}(h.Component),t.displayName="ReactFinalForm("+((r=n).displayName||r.name||"Component")+")",e},c=s.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),n=function(n){function d(t){var u,e;return(u=n.call(this,t)||this).subscribe=function(t,e){var n=t.defaultValue,r=t.initialValue,i=t.isEqual,o=t.name,a=t.subscription,s=t.validateFields;u.unsubscribe=u.props.reactFinalForm.registerField(o,e,a||c,{defaultValue:n,getValidator:function(){return u.props.validate},initialValue:r,isEqual:i,validateFields:s})},u.notify=function(t){return u.setState({state:t})},u.handlers={onBlur:function(t){var e=u.state.state;if(e){var n=u.props,r=n.format,i=n.formatOnBlur;e.blur(),r&&i&&e.change(r(e.value,e.name))}},onChange:function(t){var e=u.props,n=e.parse,r=e.value,i=t&&t.target?function(t,e,n,r){if(!r&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(r&&t.nativeEvent)return t.nativeEvent.text;var i=t.target,o=i.type,a=i.value,s=i.checked;switch(o){case"checkbox":if(void 0===n)return!!s;if(s)return Array.isArray(e)?e.concat(n):[n];if(!Array.isArray(e))return e;var u=e.indexOf(n);return u<0?e:e.slice(0,u).concat(e.slice(u+1));case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var r=t[n];r.selected&&e.push(r.value)}return e}(t.target.options);default:return a}}(t,u.state.state&&u.state.state.value,r,a):t;u.state.state&&u.state.state.change(n?n(i,u.props.name):i)},onFocus:function(t){u.state.state&&u.state.state.focus()}},u.props.reactFinalForm&&u.subscribe(t,function(t){e?u.notify(t):e=t}),u.state={state:e},u}i(d,n);var t=d.prototype;return t.componentDidUpdate=function(t){var e=this.props,n=e.name,r=e.subscription;(t.name!==n||o(t.subscription,r,s.fieldSubscriptionItems))&&this.props.reactFinalForm&&(this.unsubscribe(),this.subscribe(this.props,this.notify))},t.componentWillUnmount=function(){this.unsubscribe()},t.render=function(){var t=this.props,e=t.allowNull,n=t.component,r=t.children,i=t.format,o=t.formatOnBlur,a=(t.parse,t.isEqual,t.name),s=(t.subscription,t.validate,t.validateFields,t.reactFinalForm,t.value),u=b(t,["allowNull","component","children","format","formatOnBlur","parse","isEqual","name","subscription","validate","validateFields","reactFinalForm","value"]),c=this.state.state||{},f=(c.blur,c.change,c.focus,c.value),l=(c.name,b(c,["blur","change","focus","value","name"])),p={active:l.active,data:l.data,dirty:l.dirty,dirtySinceLastSubmit:l.dirtySinceLastSubmit,error:l.error,initial:l.initial,invalid:l.invalid,modified:l.modified,pristine:l.pristine,submitError:l.submitError,submitFailed:l.submitFailed,submitSucceeded:l.submitSucceeded,submitting:l.submitting,touched:l.touched,valid:l.valid,visited:l.visited};o?f=d.defaultProps.format(f,a):i&&(f=i(f,a)),null!==f||e||(f="");var m=v({name:a,value:f},this.handlers);return"checkbox"===u.type?void 0===s?m.checked=!!f:(m.checked=!(!Array.isArray(f)||!~f.indexOf(s)),m.value=s):"radio"===u.type?(m.checked=f===s,m.value=s):"select"===n&&u.multiple&&(m.value=m.value||[]),"function"==typeof r?r(v({input:m,meta:p},u)):"string"==typeof n?h.createElement(n,v({},m,{children:r},u)):y(v({},{input:m,meta:p},{children:r,component:n},u))},d}(h.Component);n.defaultProps={format:function(t,e){return void 0===t?"":t},parse:function(t,e){return""===t?void 0:t}};var r=e(n),f=function(t){return!(!t||"function"!=typeof t.stopPropagation)},l="4.1.0",p={"final-form":s.version,"react-final-form":l},m=s.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),d=function(a){function t(t){var e;(e=a.call(this,t)||this).notify=function(t){e.mounted&&e.setState({state:t}),e.mounted=!0},e.handleSubmit=function(t){return t&&("function"==typeof t.preventDefault&&t.preventDefault(),"function"==typeof t.stopPropagation&&t.stopPropagation()),e.form.submit()};t.children,t.component,t.render;var n=t.subscription,r=t.decorators,i=b(t,["children","component","render","subscription","decorators"]);e.mounted=!1;try{e.form=s.createForm(i)}catch(t){}if(e.unsubscriptions=[],e.form){var o={};e.form.subscribe(function(t){o=t},n||m)(),e.state={state:o}}return r&&r.forEach(function(t){e.unsubscriptions.push(t(e.form))}),e}i(t,a);var e=t.prototype;return e.componentWillMount=function(){this.form&&this.form.pauseValidation()},e.componentDidMount=function(){this.form&&(this.unsubscriptions.push(this.form.subscribe(this.notify,this.props.subscription||m)),this.form.resumeValidation())},e.componentWillUpdate=function(){this.form&&(this.resumeValidation=this.resumeValidation||!this.form.isValidationPaused(),this.form.pauseValidation())},e.componentDidUpdate=function(e){var n=this;this.form&&this.resumeValidation&&this.form.resumeValidation(),this.props.initialValues&&!(this.props.initialValuesEqual||function(t,e){if(t===e)return!0;if("object"!=typeof t||!t||"object"!=typeof 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})(e.initialValues,this.props.initialValues)&&this.form.initialize(this.props.initialValues),s.configOptions.forEach(function(t){"initialValues"!==t&&e[t]!==n.props[t]&&n.form.setConfig(t,n.props[t])})},e.componentWillUnmount=function(){this.unsubscriptions.forEach(function(t){return t()})},e.render=function(){var n=this,t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,b(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"])),r=v({},this.state?this.state.state:{},{batch:this.form&&function(t){return n.form.batch(t)},blur:this.form&&function(t){return n.form.blur(t)},change:this.form&&function(t,e){return n.form.change(t,e)},focus:this.form&&function(t){return n.form.focus(t)},form:v({},this.form,{reset:function(t){f(t)?n.form.reset():n.form.reset(t)}}),handleSubmit:this.handleSubmit,initialize:this.form&&function(t){return n.form.initialize(t)},mutators:this.form&&Object.keys(this.form.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=n.form.mutators)[e].apply(t,arguments)},t},{}),reset:this.form&&function(t){return n.form.reset(t)}});return h.createElement(u.Provider,{value:this.form},y(v({},e,r,{__versions:p})))},t}(h.Component),F=e(function(t){function e(e){var r,n;return(r=t.call(this,e)||this).subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.props.reactFinalForm.subscribe(e,n||m)},r.notify=function(t){r.setState({state:t}),r.props.onChange&&r.props.onChange(t)},r.props.reactFinalForm&&r.subscribe(e,function(t){n?r.notify(t):(n=t,e.onChange&&e.onChange(t))}),n&&(r.state={state:n}),r}i(e,t);var n=e.prototype;return n.componentDidUpdate=function(t){var e=this.props.subscription;o(t.subscription,e,s.formSubscriptionItems)&&this.props.reactFinalForm&&(this.unsubscribe(),this.subscribe(this.props,this.notify))},n.componentWillUnmount=function(){this.unsubscribe()},n.render=function(){var t=this.props,e=t.onChange,n=t.reactFinalForm,r=b(t,["onChange","reactFinalForm"]),i={batch:n&&function(t){return n.batch(t)},blur:n&&function(t){return n.blur(t)},change:n&&function(t,e){return n.change(t,e)},focus:n&&function(t){return n.focus(t)},form:v({},n,{reset:function(t){f(t)?n.reset():n.reset(t)}}),initialize:n&&function(t){return n.initialize(t)},mutators:n&&Object.keys(n.mutators).reduce(function(t,e){return t[e]=function(){var t;(t=n.mutators)[e].apply(t,arguments)},t},{}),reset:n&&function(t){return n.reset(t)}};return e?null:y(v({},r,this.state?this.state.state:{},i))},e}(h.Component));t.Field=r,t.Form=d,t.version=l,t.FormSpy=F,t.withReactFinalForm=e,t.ReactFinalFormContext=u,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=react-final-form.umd.min.js.map

97

package.json
{
"name": "react-final-form",
"version": "4.0.2",
"version": "4.1.0",
"description": "🏁 High performance subscription-based form state management for React",

@@ -8,6 +8,7 @@ "main": "dist/react-final-form.cjs.js",

"module": "dist/react-final-form.es.js",
"typings": "dist/index.d.ts",
"typings": "typescript/index.d.ts",
"files": [
"dist",
"scripts"
"scripts",
"typescript"
],

@@ -20,3 +21,3 @@ "scripts": {

"prepublish": "npm start validate",
"postinstall": "node ./scripts/postinstall.js || exit 0"
"postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mUsing react-final-form at work? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/final-form/donate\\u001b[0m')\""
},

@@ -34,58 +35,57 @@ "author": "Erik Rasmussen <rasmussenerik@gmail.com> (http://github.com/erikras)",

"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-flow-strip-types": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.0.0",
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/plugin-proposal-export-namespace-from": "^7.2.0",
"@babel/plugin-proposal-function-sent": "^7.2.0",
"@babel/plugin-proposal-json-strings": "^7.2.0",
"@babel/plugin-proposal-numeric-separator": "^7.2.0",
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-transform-flow-strip-types": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@types/react": "^16.4.16",
"@types/react": "^16.8.6",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"bundlesize": "^0.17.0",
"doctoc": "^1.3.0",
"eslint": "^5.6.1",
"eslint-config-react-app": "^3.0.3",
"babel-jest": "^24.1.0",
"bundlesize": "^0.17.1",
"doctoc": "^1.4.0",
"dtslint": "^0.5.3",
"eslint": "^5.13.0",
"eslint-config-react-app": "^3.0.6",
"eslint-plugin-babel": "^5.2.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-flowtype": "^3.4.2",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"fast-deep-equal": "^2.0.1",
"final-form": "^4.10.0",
"flow-bin": "^0.86.0",
"final-form": "^4.12.0",
"flow-bin": "^0.94.0",
"glow": "^1.2.2",
"husky": "^1.1.1",
"jest": "^23.6.0",
"lint-staged": "^8.0.4",
"nps": "^5.9.3",
"husky": "^1.3.1",
"jest": "^24.1.0",
"lint-staged": "^8.1.5",
"nps": "^5.9.4",
"nps-utils": "^1.7.0",
"opencollective": "^1.0.3",
"prettier": "^1.14.3",
"prettier": "^1.16.4",
"prettier-eslint-cli": "^4.7.1",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"rollup": "^0.67.1",
"rollup-plugin-babel": "^4.0.1",
"rollup-plugin-commonjs": "^9.2.0",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"rollup": "^1.4.1",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.2.1",
"rollup-plugin-flow": "^1.1.1",
"rollup-plugin-node-resolve": "^3.4.0",
"rollup-plugin-node-resolve": "^4.0.1",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-uglify": "^6.0.0",
"tslint": "^5.11.0",
"typescript": "^3.1.2"
"rollup-plugin-uglify": "^6.0.2",
"tslint": "^5.13.1",
"typescript": "^3.3.3333"
},
"peerDependencies": {
"final-form": "^4.11.0",
"prop-types": "^15.6.0",
"react": "^16.3.0"

@@ -100,3 +100,6 @@ },

"jest": {
"testEnvironment": "jsdom"
"testEnvironment": "jsdom",
"testPathIgnorePatterns": [
".*\\.ts"
]
},

@@ -122,4 +125,4 @@ "bundlesize": [

"dependencies": {
"@babel/runtime": "^7.1.2"
"@babel/runtime": "^7.3.4"
}
}

68

README.md

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

✅ 💥 [**2.9k gzipped**](https://bundlephobia.com/result?p=react-final-form) 💥
✅ 💥 [**3.0k gzipped**](https://bundlephobia.com/result?p=react-final-form) 💥

@@ -118,2 +118,6 @@ ---

- [Videos](#videos)
- [Helper Libraries](#helper-libraries)
- [Define Form and React Define Form](#define-form-and-react-define-form)
- [🏁 React Final Form HTML5 Validation](#-react-final-form-html5-validation)
- [Final Form Material UI](#final-form-material-ui)
- [Examples](#examples)

@@ -123,2 +127,3 @@ - [Simple Example](#simple-example)

- [Synchronous Field-Level Validation](#synchronous-field-level-validation)
- [Synchronous Record-Level Validation (with delayed error render)](#synchronous-record-level-validation-with-delayed-error-render)
- [Asynchronous Field-Level Validation](#asynchronous-field-level-validation)

@@ -128,3 +133,3 @@ - [Hybrid Synchronous/Asynchronous Record-Level Validation](#hybrid-synchronousasynchronous-record-level-validation)

- [Third Party Components](#third-party-components)
- [Material-UI 1.0](#material-ui-10)
- [Material-UI 3.0](#material-ui-30)
- [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)

@@ -134,2 +139,3 @@ - [Independent Error Component](#independent-error-component)

- [Field Arrays](#field-arrays)
- [Fields Component](#fields-component)
- [Calculated Fields](#calculated-fields)

@@ -175,3 +181,3 @@ - [Field Warnings](#field-warnings)

- [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
- [`validate?: (value: ?any, allValues: Object, meta: FieldState) => ?any`](#validate-value-any-allvalues-object--any)
- [`validate?: (value: ?any, allValues: Object, meta: ?FieldState) => ?any`](#validate-value-any-allvalues-object-meta-fieldstate--any)
- [`validateFields?: string[]`](#validatefields-string)

@@ -246,6 +252,22 @@ - [`value?: any`](#value-any)

| [![Next Generation Forms with 🏁 React Final Form – React Alicante 2018](docs/ReactAlicante2018.gif)](https://youtu.be/WoSzy-4mviQ) |
| :---------------------------------------------------------------------------------------------------------------------------------: |
| **Next Generation Forms with 🏁 React Final Form – React Alicante 2018** |
| [![🏁Final Form: Form state management via Observers - HolyJS 2018, Moscow, Russia](https://github.com/final-form/react-final-form/raw/master/docs/HolyJS2018.gif)](https://youtu.be/fxEW4jgoX-4) |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| **🏁 Final Form: Form state management via Observers - HolyJS 2018, Moscow, Russia** |
| [![Next Generation Forms with 🏁 React Final Form – React Alicante 2018, Alicante, Spain](https://github.com/final-form/react-final-form/raw/master/docs/ReactAlicante2018.gif)](https://youtu.be/WoSzy-4mviQ) |
| **Next Generation Forms with 🏁 React Final Form – React Alicante 2018, Alicante, Spain** |
## Helper Libraries
### [Define Form](https://github.com/ForbesLindesay/define-form/tree/master/packages/define-form) and [React Define Form](https://github.com/ForbesLindesay/define-form/tree/master/packages/react-define-form)
Define Form offers alternative typescript bindings for 🏁 Final Form. The key difference is that _the form data is now a strongly typed object_, rather than an `any`. This makes the `initialValues` config option required.
### [🏁 React Final Form HTML5 Validation](https://github.com/final-form/react-final-form-html5-validation)
A swap-in replacement for 🏁 React Final Form's `<Field>` component to provide HTML5 Validation.
### [Final Form Material UI](https://github.com/Deadly0/final-form-material-ui#readme)
A set of adaptor components to facilitate using Material-UI with 🏁 React Final Form.
## Examples

@@ -268,2 +290,6 @@

### [Synchronous Record-Level Validation (with delayed error render)](https://codesandbox.io/s/z2zqr008pm)
Sometimes you want to give your user a chance to make it through a brief invalid value on their way to a valid one, e.g. a date string that needs two numbers on either side of a slash. With a simple delayed rendering component, this becomes easy. Plus, the error will disappear immediately when the user fixes the problem.
### [Asynchronous Field-Level Validation](https://codesandbox.io/s/wy7z7q5zx5)

@@ -293,5 +319,5 @@

### [Material-UI 1.0](https://codesandbox.io/s/2z5y03y81r)
### [Material-UI 3.0](https://codesandbox.io/s/9ywq085k9w)
Demonstrates how to use Material-UI 1.0 input components.
Demonstrates how to use Material-UI 3.0 input components.

@@ -323,2 +349,8 @@ ### 💥 [Performance Optimization Through Subscriptions](https://codesandbox.io/s/32r824vxy1) 💥

### [Fields Component](https://codesandbox.io/s/pyrwplknom)
Wondering how to get field state from multiple fields at once?
People coming from Redux-Form might be wondering where the equivalent of Redux Form's `Fields` component is, as a way to get state from several fields at once. The answer is that it's not included in the library because it's so easy to write one recursively composing `Field` components together.
### [Calculated Fields](https://codesandbox.io/s/oq52p6v96y)

@@ -476,5 +508,11 @@

A component that is given [`FieldRenderProps`](#fieldrenderprops) as props, as
A component that is given [`FieldRenderProps`](#fieldrenderprops) as props, children and render props, as
well as any non-API props passed into the `<Field/>` component.
#### `defaultValue?: any`
⚠️ You probably want `initialValue`! ⚠️
_**Before using this prop, read and understand the 🏁 Final Form documentation on [`initialValue`](https://github.com/final-form/final-form#initialvalue-any) and [`defaultValue`](https://github.com/final-form/final-form#defaultvalue-any)!**_
#### `format?: ((value: any, name: string) => any) | null`

@@ -490,2 +528,6 @@

#### `initialValue?: any`
[See the 🏁 Final Form docs on `initialValue`](https://github.com/final-form/final-form# #initialvalue-any)
#### `isEqual?: (a: any, b: any) => boolean`

@@ -507,3 +549,3 @@

A render function that is given [`FieldRenderProps`](#fieldrenderprops), as well
A render function that is given [`FieldRenderProps`](#fieldrenderprops), children prop, as well
as any non-API props passed into the `<Field/>` component.

@@ -520,3 +562,3 @@

#### `validate?: (value: ?any, allValues: Object, meta: FieldState) => ?any`
#### `validate?: (value: ?any, allValues: Object, meta: ?FieldState) => ?any`

@@ -600,2 +642,6 @@ A function that takes the field value, all the values of the form and the `meta` data about the field and

#### `meta.modified?: boolean`
[See the 🏁 Final Form docs on `modified`](https://github.com/final-form/final-form#modified-boolean).
#### `meta.pristine?: boolean`

@@ -602,0 +648,0 @@ 

dist/index.d.ts
scripts/postinstall.js
dist/react-final-form.umd.js.map

Sorry, the diff of this file is not supported yet

dist/types.js.flow

Sorry, the diff of this file is not supported yet

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