Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
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 6.0.1 to 6.1.0

680

dist/react-final-form.cjs.js

@@ -41,2 +41,329 @@ 'use strict';

function useWhenValueChanges(value, callback, isEqual) {
if (isEqual === void 0) {
isEqual = function isEqual(a, b) {
return a === b;
};
}
var previous = React__default.useRef(value);
React__default.useEffect(function () {
if (!isEqual(value, previous.current)) {
callback();
previous.current = value;
}
});
}
/**
* A simple hook to create a constant value that lives for
* the lifetime of the component.
*
* Plagiarized from https://github.com/Andarist/use-constant
*
* Do NOT reuse this code unless you know what you're doing.
* Use Andarist's hook; it's more fault tolerant to things like
* falsy values.
*
* @param {Function} init - A function to generate the value
*/
function useConstant(init) {
var ref = React__default.useRef();
if (!ref.current) {
ref.current = init();
}
return ref.current;
}
var shallowEqual = function shallowEqual(a, b) {
if (a === b) {
return true;
}
if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
return false;
}
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
for (var idx = 0; idx < keysA.length; idx++) {
var key = keysA[idx];
if (!bHasOwnProperty(key) || a[key] !== b[key]) {
return false;
}
}
return true;
};
var isSyntheticEvent = function isSyntheticEvent(candidate) {
return !!(candidate && typeof candidate.stopPropagation === 'function');
};
var instance;
function getContext() {
if (!instance) {
instance = React.createContext();
}
return instance;
}
function useLatest(value) {
var ref = React__default.useRef(value);
React__default.useEffect(function () {
ref.current = value;
});
return ref;
}
var version = '6.1.0';
var versions = {
'final-form': finalForm.version,
'react-final-form': version
};
var all = finalForm.formSubscriptionItems.reduce(function (result, key) {
result[key] = true;
return result;
}, {});
function ReactFinalForm(_ref) {
var debug = _ref.debug,
decorators = _ref.decorators,
destroyOnUnregister = _ref.destroyOnUnregister,
alternateFormApi = _ref.form,
initialValues = _ref.initialValues,
initialValuesEqual = _ref.initialValuesEqual,
keepDirtyOnReinitialize = _ref.keepDirtyOnReinitialize,
mutators = _ref.mutators,
onSubmit = _ref.onSubmit,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription,
validate = _ref.validate,
validateOnBlur = _ref.validateOnBlur,
rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
var ReactFinalFormContext = getContext();
var config = {
debug: debug,
destroyOnUnregister: destroyOnUnregister,
initialValues: initialValues,
keepDirtyOnReinitialize: keepDirtyOnReinitialize,
mutators: mutators,
onSubmit: onSubmit,
validate: validate,
validateOnBlur: validateOnBlur
};
var form = useConstant(function () {
var f = alternateFormApi || finalForm.createForm(config);
f.pauseValidation();
return f;
}); // synchronously register and unregister to query form state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1]; // save a copy of state that can break through the closure
// on the shallowEqual() line below.
var stateRef = useLatest(state);
React.useEffect(function () {
// We have rendered, so all fields are no registered, so we can unpause validation
form.isValidationPaused() && form.resumeValidation();
var unsubscriptions = [form.subscribe(function (s) {
if (!shallowEqual(s, stateRef.current)) {
setState(s);
}
}, subscription)].concat(decorators ? decorators.map(function (decorator) {
return (// this noop ternary is to appease the flow gods
// istanbul ignore next
decorator(form)
);
}) : []);
return function () {
unsubscriptions.forEach(function (unsubscribe) {
return unsubscribe();
});
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [decorators]); // warn about decorator changes
// istanbul ignore next
if (process.env.NODE_ENV !== 'production') {
// You're never supposed to use hooks inside a conditional, but in this
// case we can be certain that you're not going to be changing your
// NODE_ENV between renders, so this is safe.
// eslint-disable-next-line react-hooks/rules-of-hooks
useWhenValueChanges(decorators, function () {
console.error('Form decorators should not change from one render to the next as new values will be ignored');
}, shallowEqual);
} // allow updatable config
useWhenValueChanges(debug, function () {
form.setConfig('debug', debug);
});
useWhenValueChanges(destroyOnUnregister, function () {
form.setConfig('destroyOnUnregister', destroyOnUnregister);
});
useWhenValueChanges(initialValues, function () {
form.setConfig('initialValues', initialValues);
}, initialValuesEqual || shallowEqual);
useWhenValueChanges(keepDirtyOnReinitialize, function () {
form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
});
useWhenValueChanges(mutators, function () {
form.setConfig('mutators', mutators);
});
useWhenValueChanges(onSubmit, function () {
form.setConfig('onSubmit', onSubmit);
});
useWhenValueChanges(validate, function () {
form.setConfig('validate', validate);
});
useWhenValueChanges(validateOnBlur, function () {
form.setConfig('validateOnBlur', validateOnBlur);
});
var handleSubmit = function handleSubmit(event) {
if (event) {
// sometimes not true, e.g. React Native
if (typeof event.preventDefault === 'function') {
event.preventDefault();
}
if (typeof event.stopPropagation === 'function') {
// prevent any outer forms from receiving the event too
event.stopPropagation();
}
}
return form.submit();
};
var renderProps = _extends({}, state, {
form: _extends({}, form, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
form.reset();
} else {
form.reset(eventOrValues);
}
}
}),
handleSubmit: handleSubmit
});
return React.createElement(ReactFinalFormContext.Provider, {
value: form
}, renderComponent(_extends({}, rest, renderProps, {
__versions: versions
}), 'ReactFinalForm'));
}
function useForm(componentName) {
var ReactFinalFormContext = getContext();
var form = React.useContext(ReactFinalFormContext);
if (!form) {
throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
}
return form;
}
function useFormState(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
onChange = _ref.onChange,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription;
var form = useForm('useFormState');
var firstRender = React.useRef(true); // synchronously register and unregister to query field state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
if (onChange) {
onChange(initialState);
}
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1];
React.useEffect(function () {
return form.subscribe(function (newState) {
if (firstRender.current) {
firstRender.current = false;
} else {
setState(newState);
if (onChange) {
onChange(newState);
}
}
}, subscription);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[]);
return state;
}
function FormSpy(_ref) {
var onChange = _ref.onChange,
subscription = _ref.subscription,
rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
var ReactFinalFormContext = getContext();
var reactFinalForm = React.useContext(ReactFinalFormContext);
if (!reactFinalForm) {
throw new Error('FormSpy must be used inside of a ReactFinalForm component');
}
var state = useFormState({
onChange: onChange,
subscription: subscription
});
if (onChange) {
return null;
}
var renderProps = {
form: _extends({}, reactFinalForm, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
reactFinalForm.reset();
} else {
reactFinalForm.reset(eventOrValues);
}
}
})
};
return renderComponent(_extends({}, rest, state, renderProps), 'FormSpy');
}
var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';

@@ -109,15 +436,3 @@

var ReactFinalFormContext = React.createContext();
var useForm = function useForm(componentName) {
var form = React.useContext(ReactFinalFormContext);
if (!form) {
throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
}
return form;
};
var all = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
var all$1 = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
result[key] = true;

@@ -135,3 +450,3 @@ return result;

var useField = function useField(name, _temp) {
function useField(name, _temp) {
var _ref = _temp === void 0 ? {} : _temp,

@@ -152,3 +467,3 @@ afterSubmit = _ref.afterSubmit,

_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription,
type = _ref.type,

@@ -159,9 +474,15 @@ validate = _ref.validate,

var form = useForm('useField'); // keep ref to most recent copy of validate function
var form = useForm('useField');
var validateRef = useLatest(validate);
var beforeSubmitRef = useLatest(function () {
if (formatOnBlur) {
var formatted = format(state.value, state.name);
var validateRef = React.useRef(validate);
React.useEffect(function () {
validateRef.current = validate;
if (formatted !== state.value) {
state.change(formatted);
}
}
return beforeSubmit && beforeSubmit();
});
var beforeSubmitRef = React.useRef();

@@ -172,3 +493,3 @@ var register = function register(callback) {

beforeSubmit: function beforeSubmit() {
return beforeSubmitRef.current && beforeSubmitRef.current();
return beforeSubmitRef.current();
},

@@ -197,14 +518,2 @@ defaultValue: defaultValue,

beforeSubmitRef.current = function () {
if (formatOnBlur) {
var formatted = format(state.value, state.name);
if (formatted !== state.value) {
state.change(formatted);
}
}
return beforeSubmit && beforeSubmit();
};
React.useEffect(function () {

@@ -325,3 +634,3 @@ return register(function (state) {

return renderProps;
};
}

@@ -386,304 +695,12 @@ var Field = function Field(_ref) {

function useWhenValueChanges(value, callback, isEqual) {
if (isEqual === void 0) {
isEqual = function isEqual(a, b) {
return a === b;
};
}
var previous = React__default.useRef(value);
React__default.useEffect(function () {
if (!isEqual(value, previous.current)) {
callback();
previous.current = value;
}
});
function withTypes() {
return {
Form: ReactFinalForm,
FormSpy: FormSpy
};
}
/**
* A simple hook to create a constant value that lives for
* the lifetime of the component.
*
* Plagiarized from https://github.com/Andarist/use-constant
*
* Do NOT reuse this code unless you know what you're doing.
* Use Andarist's hook; it's more fault tolerant to things like
* falsy values.
*
* @param {Function} init - A function to generate the value
*/
function useConstant(init) {
var ref = React__default.useRef();
if (!ref.current) {
ref.current = init();
}
return ref.current;
}
var shallowEqual = function shallowEqual(a, b) {
if (a === b) {
return true;
}
if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
return false;
}
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
for (var idx = 0; idx < keysA.length; idx++) {
var key = keysA[idx];
if (!bHasOwnProperty(key) || a[key] !== b[key]) {
return false;
}
}
return true;
};
var isSyntheticEvent = function isSyntheticEvent(candidate) {
return !!(candidate && typeof candidate.stopPropagation === 'function');
};
var version = '6.0.1';
var versions = {
'final-form': finalForm.version,
'react-final-form': version
};
var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
result[key] = true;
return result;
}, {});
var ReactFinalForm = function ReactFinalForm(_ref) {
var debug = _ref.debug,
decorators = _ref.decorators,
destroyOnUnregister = _ref.destroyOnUnregister,
initialValues = _ref.initialValues,
initialValuesEqual = _ref.initialValuesEqual,
keepDirtyOnReinitialize = _ref.keepDirtyOnReinitialize,
mutators = _ref.mutators,
onSubmit = _ref.onSubmit,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription,
validate = _ref.validate,
validateOnBlur = _ref.validateOnBlur,
rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
var config = {
debug: debug,
destroyOnUnregister: destroyOnUnregister,
initialValues: initialValues,
keepDirtyOnReinitialize: keepDirtyOnReinitialize,
mutators: mutators,
onSubmit: onSubmit,
validate: validate,
validateOnBlur: validateOnBlur
};
var form = useConstant(function () {
var f = finalForm.createForm(config);
f.pauseValidation();
return f;
}); // synchronously register and unregister to query form state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1]; // save a copy of state that can break through the closure
// on the shallowEqual() line below.
var stateRef = React.useRef(state);
stateRef.current = state;
React.useEffect(function () {
// We have rendered, so all fields are no registered, so we can unpause validation
form.isValidationPaused() && form.resumeValidation();
var unsubscriptions = [form.subscribe(function (s) {
if (!shallowEqual(s, stateRef.current)) {
setState(s);
}
}, subscription)].concat(decorators ? decorators.map(function (decorator) {
return (// this noop ternary is to appease the flow gods
// istanbul ignore next
decorator(form)
);
}) : []);
return function () {
unsubscriptions.forEach(function (unsubscribe) {
return unsubscribe();
});
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [decorators]); // warn about decorator changes
// istanbul ignore next
if (process.env.NODE_ENV !== 'production') {
// You're never supposed to use hooks inside a conditional, but in this
// case we can be certain that you're not going to be changing your
// NODE_ENV between renders, so this is safe.
// eslint-disable-next-line react-hooks/rules-of-hooks
useWhenValueChanges(decorators, function () {
console.error('Form decorators should not change from one render to the next as new values will be ignored');
}, shallowEqual);
} // allow updatable config
useWhenValueChanges(debug, function () {
form.setConfig('debug', debug);
});
useWhenValueChanges(destroyOnUnregister, function () {
form.setConfig('destroyOnUnregister', destroyOnUnregister);
});
useWhenValueChanges(initialValues, function () {
form.setConfig('initialValues', initialValues);
}, initialValuesEqual || shallowEqual);
useWhenValueChanges(keepDirtyOnReinitialize, function () {
form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
});
useWhenValueChanges(mutators, function () {
form.setConfig('mutators', mutators);
});
useWhenValueChanges(onSubmit, function () {
form.setConfig('onSubmit', onSubmit);
});
useWhenValueChanges(validate, function () {
form.setConfig('validate', validate);
});
useWhenValueChanges(validateOnBlur, function () {
form.setConfig('validateOnBlur', validateOnBlur);
});
var handleSubmit = function handleSubmit(event) {
if (event) {
// sometimes not true, e.g. React Native
if (typeof event.preventDefault === 'function') {
event.preventDefault();
}
if (typeof event.stopPropagation === 'function') {
// prevent any outer forms from receiving the event too
event.stopPropagation();
}
}
return form.submit();
};
var renderProps = _extends({}, state, {
form: _extends({}, form, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
form.reset();
} else {
form.reset(eventOrValues);
}
}
}),
handleSubmit: handleSubmit
});
return React.createElement(ReactFinalFormContext.Provider, {
value: form
}, renderComponent(_extends({}, rest, renderProps, {
__versions: versions
}), 'ReactFinalForm'));
};
var useFormState = function useFormState(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
onChange = _ref.onChange,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription;
var form = useForm('useFormState');
var firstRender = React.useRef(true); // synchronously register and unregister to query field state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
if (onChange) {
onChange(initialState);
}
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1];
React.useEffect(function () {
return form.subscribe(function (newState) {
if (firstRender.current) {
firstRender.current = false;
} else {
setState(newState);
if (onChange) {
onChange(newState);
}
}
}, subscription);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[]);
return state;
};
var FormSpy = function FormSpy(_ref) {
var onChange = _ref.onChange,
subscription = _ref.subscription,
rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
var reactFinalForm = React.useContext(ReactFinalFormContext);
if (!reactFinalForm) {
throw new Error('FormSpy must be used inside of a ReactFinalForm component');
}
var state = useFormState({
onChange: onChange,
subscription: subscription
});
if (onChange) {
return null;
}
var renderProps = {
form: _extends({}, reactFinalForm, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
reactFinalForm.reset();
} else {
reactFinalForm.reset(eventOrValues);
}
}
})
};
return renderComponent(_extends({}, rest, state, renderProps), 'FormSpy');
};
exports.Field = Field;
exports.Form = ReactFinalForm;
exports.FormSpy = FormSpy;
exports.ReactFinalFormContext = ReactFinalFormContext;
exports.context = ReactFinalFormContext;
exports.useField = useField;

@@ -693,1 +710,2 @@ exports.useForm = useForm;

exports.version = version;
exports.withTypes = withTypes;

684

dist/react-final-form.es.js
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import React__default, { createElement, createContext, useContext, useRef, useEffect, useState, useCallback } from 'react';
import { fieldSubscriptionItems, formSubscriptionItems, createForm, version as version$1 } from 'final-form';
import * as React from 'react';
import React__default, { createElement, createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
import { formSubscriptionItems, createForm, version as version$1, fieldSubscriptionItems } from 'final-form';

@@ -34,2 +35,329 @@ // shared logic between components that use either render prop,

function useWhenValueChanges(value, callback, isEqual) {
if (isEqual === void 0) {
isEqual = function isEqual(a, b) {
return a === b;
};
}
var previous = React__default.useRef(value);
React__default.useEffect(function () {
if (!isEqual(value, previous.current)) {
callback();
previous.current = value;
}
});
}
/**
* A simple hook to create a constant value that lives for
* the lifetime of the component.
*
* Plagiarized from https://github.com/Andarist/use-constant
*
* Do NOT reuse this code unless you know what you're doing.
* Use Andarist's hook; it's more fault tolerant to things like
* falsy values.
*
* @param {Function} init - A function to generate the value
*/
function useConstant(init) {
var ref = React__default.useRef();
if (!ref.current) {
ref.current = init();
}
return ref.current;
}
var shallowEqual = function shallowEqual(a, b) {
if (a === b) {
return true;
}
if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
return false;
}
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
for (var idx = 0; idx < keysA.length; idx++) {
var key = keysA[idx];
if (!bHasOwnProperty(key) || a[key] !== b[key]) {
return false;
}
}
return true;
};
var isSyntheticEvent = function isSyntheticEvent(candidate) {
return !!(candidate && typeof candidate.stopPropagation === 'function');
};
var instance;
function getContext() {
if (!instance) {
instance = createContext();
}
return instance;
}
function useLatest(value) {
var ref = React__default.useRef(value);
React__default.useEffect(function () {
ref.current = value;
});
return ref;
}
var version = '6.1.0';
var versions = {
'final-form': version$1,
'react-final-form': version
};
var all = formSubscriptionItems.reduce(function (result, key) {
result[key] = true;
return result;
}, {});
function ReactFinalForm(_ref) {
var debug = _ref.debug,
decorators = _ref.decorators,
destroyOnUnregister = _ref.destroyOnUnregister,
alternateFormApi = _ref.form,
initialValues = _ref.initialValues,
initialValuesEqual = _ref.initialValuesEqual,
keepDirtyOnReinitialize = _ref.keepDirtyOnReinitialize,
mutators = _ref.mutators,
onSubmit = _ref.onSubmit,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription,
validate = _ref.validate,
validateOnBlur = _ref.validateOnBlur,
rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
var ReactFinalFormContext = getContext();
var config = {
debug: debug,
destroyOnUnregister: destroyOnUnregister,
initialValues: initialValues,
keepDirtyOnReinitialize: keepDirtyOnReinitialize,
mutators: mutators,
onSubmit: onSubmit,
validate: validate,
validateOnBlur: validateOnBlur
};
var form = useConstant(function () {
var f = alternateFormApi || createForm(config);
f.pauseValidation();
return f;
}); // synchronously register and unregister to query form state for our subscription on first render
var _React$useState = useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1]; // save a copy of state that can break through the closure
// on the shallowEqual() line below.
var stateRef = useLatest(state);
useEffect(function () {
// We have rendered, so all fields are no registered, so we can unpause validation
form.isValidationPaused() && form.resumeValidation();
var unsubscriptions = [form.subscribe(function (s) {
if (!shallowEqual(s, stateRef.current)) {
setState(s);
}
}, subscription)].concat(decorators ? decorators.map(function (decorator) {
return (// this noop ternary is to appease the flow gods
// istanbul ignore next
decorator(form)
);
}) : []);
return function () {
unsubscriptions.forEach(function (unsubscribe) {
return unsubscribe();
});
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [decorators]); // warn about decorator changes
// istanbul ignore next
if (process.env.NODE_ENV !== 'production') {
// You're never supposed to use hooks inside a conditional, but in this
// case we can be certain that you're not going to be changing your
// NODE_ENV between renders, so this is safe.
// eslint-disable-next-line react-hooks/rules-of-hooks
useWhenValueChanges(decorators, function () {
console.error('Form decorators should not change from one render to the next as new values will be ignored');
}, shallowEqual);
} // allow updatable config
useWhenValueChanges(debug, function () {
form.setConfig('debug', debug);
});
useWhenValueChanges(destroyOnUnregister, function () {
form.setConfig('destroyOnUnregister', destroyOnUnregister);
});
useWhenValueChanges(initialValues, function () {
form.setConfig('initialValues', initialValues);
}, initialValuesEqual || shallowEqual);
useWhenValueChanges(keepDirtyOnReinitialize, function () {
form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
});
useWhenValueChanges(mutators, function () {
form.setConfig('mutators', mutators);
});
useWhenValueChanges(onSubmit, function () {
form.setConfig('onSubmit', onSubmit);
});
useWhenValueChanges(validate, function () {
form.setConfig('validate', validate);
});
useWhenValueChanges(validateOnBlur, function () {
form.setConfig('validateOnBlur', validateOnBlur);
});
var handleSubmit = function handleSubmit(event) {
if (event) {
// sometimes not true, e.g. React Native
if (typeof event.preventDefault === 'function') {
event.preventDefault();
}
if (typeof event.stopPropagation === 'function') {
// prevent any outer forms from receiving the event too
event.stopPropagation();
}
}
return form.submit();
};
var renderProps = _extends({}, state, {
form: _extends({}, form, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
form.reset();
} else {
form.reset(eventOrValues);
}
}
}),
handleSubmit: handleSubmit
});
return createElement(ReactFinalFormContext.Provider, {
value: form
}, renderComponent(_extends({}, rest, renderProps, {
__versions: versions
}), 'ReactFinalForm'));
}
function useForm(componentName) {
var ReactFinalFormContext = getContext();
var form = useContext(ReactFinalFormContext);
if (!form) {
throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
}
return form;
}
function useFormState(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
onChange = _ref.onChange,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription;
var form = useForm('useFormState');
var firstRender = useRef(true); // synchronously register and unregister to query field state for our subscription on first render
var _React$useState = useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
if (onChange) {
onChange(initialState);
}
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1];
useEffect(function () {
return form.subscribe(function (newState) {
if (firstRender.current) {
firstRender.current = false;
} else {
setState(newState);
if (onChange) {
onChange(newState);
}
}
}, subscription);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[]);
return state;
}
function FormSpy(_ref) {
var onChange = _ref.onChange,
subscription = _ref.subscription,
rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
var ReactFinalFormContext = getContext();
var reactFinalForm = useContext(ReactFinalFormContext);
if (!reactFinalForm) {
throw new Error('FormSpy must be used inside of a ReactFinalForm component');
}
var state = useFormState({
onChange: onChange,
subscription: subscription
});
if (onChange) {
return null;
}
var renderProps = {
form: _extends({}, reactFinalForm, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
reactFinalForm.reset();
} else {
reactFinalForm.reset(eventOrValues);
}
}
})
};
return renderComponent(_extends({}, rest, state, renderProps), 'FormSpy');
}
var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';

@@ -102,15 +430,3 @@

var ReactFinalFormContext = createContext();
var useForm = function useForm(componentName) {
var form = useContext(ReactFinalFormContext);
if (!form) {
throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
}
return form;
};
var all = fieldSubscriptionItems.reduce(function (result, key) {
var all$1 = fieldSubscriptionItems.reduce(function (result, key) {
result[key] = true;

@@ -128,3 +444,3 @@ return result;

var useField = function useField(name, _temp) {
function useField(name, _temp) {
var _ref = _temp === void 0 ? {} : _temp,

@@ -145,3 +461,3 @@ afterSubmit = _ref.afterSubmit,

_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription,
type = _ref.type,

@@ -152,9 +468,15 @@ validate = _ref.validate,

var form = useForm('useField'); // keep ref to most recent copy of validate function
var form = useForm('useField');
var validateRef = useLatest(validate);
var beforeSubmitRef = useLatest(function () {
if (formatOnBlur) {
var formatted = format(state.value, state.name);
var validateRef = useRef(validate);
useEffect(function () {
validateRef.current = validate;
if (formatted !== state.value) {
state.change(formatted);
}
}
return beforeSubmit && beforeSubmit();
});
var beforeSubmitRef = useRef();

@@ -165,3 +487,3 @@ var register = function register(callback) {

beforeSubmit: function beforeSubmit() {
return beforeSubmitRef.current && beforeSubmitRef.current();
return beforeSubmitRef.current();
},

@@ -190,14 +512,2 @@ defaultValue: defaultValue,

beforeSubmitRef.current = function () {
if (formatOnBlur) {
var formatted = format(state.value, state.name);
if (formatted !== state.value) {
state.change(formatted);
}
}
return beforeSubmit && beforeSubmit();
};
useEffect(function () {

@@ -318,3 +628,3 @@ return register(function (state) {

return renderProps;
};
}

@@ -379,299 +689,9 @@ var Field = function Field(_ref) {

function useWhenValueChanges(value, callback, isEqual) {
if (isEqual === void 0) {
isEqual = function isEqual(a, b) {
return a === b;
};
}
var previous = React__default.useRef(value);
React__default.useEffect(function () {
if (!isEqual(value, previous.current)) {
callback();
previous.current = value;
}
});
function withTypes() {
return {
Form: ReactFinalForm,
FormSpy: FormSpy
};
}
/**
* A simple hook to create a constant value that lives for
* the lifetime of the component.
*
* Plagiarized from https://github.com/Andarist/use-constant
*
* Do NOT reuse this code unless you know what you're doing.
* Use Andarist's hook; it's more fault tolerant to things like
* falsy values.
*
* @param {Function} init - A function to generate the value
*/
function useConstant(init) {
var ref = React__default.useRef();
if (!ref.current) {
ref.current = init();
}
return ref.current;
}
var shallowEqual = function shallowEqual(a, b) {
if (a === b) {
return true;
}
if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
return false;
}
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
for (var idx = 0; idx < keysA.length; idx++) {
var key = keysA[idx];
if (!bHasOwnProperty(key) || a[key] !== b[key]) {
return false;
}
}
return true;
};
var isSyntheticEvent = function isSyntheticEvent(candidate) {
return !!(candidate && typeof candidate.stopPropagation === 'function');
};
var version = '6.0.1';
var versions = {
'final-form': version$1,
'react-final-form': version
};
var all$1 = formSubscriptionItems.reduce(function (result, key) {
result[key] = true;
return result;
}, {});
var ReactFinalForm = function ReactFinalForm(_ref) {
var debug = _ref.debug,
decorators = _ref.decorators,
destroyOnUnregister = _ref.destroyOnUnregister,
initialValues = _ref.initialValues,
initialValuesEqual = _ref.initialValuesEqual,
keepDirtyOnReinitialize = _ref.keepDirtyOnReinitialize,
mutators = _ref.mutators,
onSubmit = _ref.onSubmit,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription,
validate = _ref.validate,
validateOnBlur = _ref.validateOnBlur,
rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
var config = {
debug: debug,
destroyOnUnregister: destroyOnUnregister,
initialValues: initialValues,
keepDirtyOnReinitialize: keepDirtyOnReinitialize,
mutators: mutators,
onSubmit: onSubmit,
validate: validate,
validateOnBlur: validateOnBlur
};
var form = useConstant(function () {
var f = createForm(config);
f.pauseValidation();
return f;
}); // synchronously register and unregister to query form state for our subscription on first render
var _React$useState = useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1]; // save a copy of state that can break through the closure
// on the shallowEqual() line below.
var stateRef = useRef(state);
stateRef.current = state;
useEffect(function () {
// We have rendered, so all fields are no registered, so we can unpause validation
form.isValidationPaused() && form.resumeValidation();
var unsubscriptions = [form.subscribe(function (s) {
if (!shallowEqual(s, stateRef.current)) {
setState(s);
}
}, subscription)].concat(decorators ? decorators.map(function (decorator) {
return (// this noop ternary is to appease the flow gods
// istanbul ignore next
decorator(form)
);
}) : []);
return function () {
unsubscriptions.forEach(function (unsubscribe) {
return unsubscribe();
});
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [decorators]); // warn about decorator changes
// istanbul ignore next
if (process.env.NODE_ENV !== 'production') {
// You're never supposed to use hooks inside a conditional, but in this
// case we can be certain that you're not going to be changing your
// NODE_ENV between renders, so this is safe.
// eslint-disable-next-line react-hooks/rules-of-hooks
useWhenValueChanges(decorators, function () {
console.error('Form decorators should not change from one render to the next as new values will be ignored');
}, shallowEqual);
} // allow updatable config
useWhenValueChanges(debug, function () {
form.setConfig('debug', debug);
});
useWhenValueChanges(destroyOnUnregister, function () {
form.setConfig('destroyOnUnregister', destroyOnUnregister);
});
useWhenValueChanges(initialValues, function () {
form.setConfig('initialValues', initialValues);
}, initialValuesEqual || shallowEqual);
useWhenValueChanges(keepDirtyOnReinitialize, function () {
form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
});
useWhenValueChanges(mutators, function () {
form.setConfig('mutators', mutators);
});
useWhenValueChanges(onSubmit, function () {
form.setConfig('onSubmit', onSubmit);
});
useWhenValueChanges(validate, function () {
form.setConfig('validate', validate);
});
useWhenValueChanges(validateOnBlur, function () {
form.setConfig('validateOnBlur', validateOnBlur);
});
var handleSubmit = function handleSubmit(event) {
if (event) {
// sometimes not true, e.g. React Native
if (typeof event.preventDefault === 'function') {
event.preventDefault();
}
if (typeof event.stopPropagation === 'function') {
// prevent any outer forms from receiving the event too
event.stopPropagation();
}
}
return form.submit();
};
var renderProps = _extends({}, state, {
form: _extends({}, form, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
form.reset();
} else {
form.reset(eventOrValues);
}
}
}),
handleSubmit: handleSubmit
});
return createElement(ReactFinalFormContext.Provider, {
value: form
}, renderComponent(_extends({}, rest, renderProps, {
__versions: versions
}), 'ReactFinalForm'));
};
var useFormState = function useFormState(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
onChange = _ref.onChange,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription;
var form = useForm('useFormState');
var firstRender = useRef(true); // synchronously register and unregister to query field state for our subscription on first render
var _React$useState = useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
if (onChange) {
onChange(initialState);
}
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1];
useEffect(function () {
return form.subscribe(function (newState) {
if (firstRender.current) {
firstRender.current = false;
} else {
setState(newState);
if (onChange) {
onChange(newState);
}
}
}, subscription);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[]);
return state;
};
var FormSpy = function FormSpy(_ref) {
var onChange = _ref.onChange,
subscription = _ref.subscription,
rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
var reactFinalForm = useContext(ReactFinalFormContext);
if (!reactFinalForm) {
throw new Error('FormSpy must be used inside of a ReactFinalForm component');
}
var state = useFormState({
onChange: onChange,
subscription: subscription
});
if (onChange) {
return null;
}
var renderProps = {
form: _extends({}, reactFinalForm, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
reactFinalForm.reset();
} else {
reactFinalForm.reset(eventOrValues);
}
}
})
};
return renderComponent(_extends({}, rest, state, renderProps), 'FormSpy');
};
export { Field, ReactFinalForm as Form, FormSpy, ReactFinalFormContext, ReactFinalFormContext as context, useField, useForm, useFormState, version };
export { Field, ReactFinalForm as Form, FormSpy, useField, useForm, useFormState, version, withTypes };

680

dist/react-final-form.umd.js

@@ -70,2 +70,329 @@ (function (global, factory) {

function useWhenValueChanges(value, callback, isEqual) {
if (isEqual === void 0) {
isEqual = function isEqual(a, b) {
return a === b;
};
}
var previous = React__default.useRef(value);
React__default.useEffect(function () {
if (!isEqual(value, previous.current)) {
callback();
previous.current = value;
}
});
}
/**
* A simple hook to create a constant value that lives for
* the lifetime of the component.
*
* Plagiarized from https://github.com/Andarist/use-constant
*
* Do NOT reuse this code unless you know what you're doing.
* Use Andarist's hook; it's more fault tolerant to things like
* falsy values.
*
* @param {Function} init - A function to generate the value
*/
function useConstant(init) {
var ref = React__default.useRef();
if (!ref.current) {
ref.current = init();
}
return ref.current;
}
var shallowEqual = function shallowEqual(a, b) {
if (a === b) {
return true;
}
if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
return false;
}
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
for (var idx = 0; idx < keysA.length; idx++) {
var key = keysA[idx];
if (!bHasOwnProperty(key) || a[key] !== b[key]) {
return false;
}
}
return true;
};
var isSyntheticEvent = function isSyntheticEvent(candidate) {
return !!(candidate && typeof candidate.stopPropagation === 'function');
};
var instance;
function getContext() {
if (!instance) {
instance = React.createContext();
}
return instance;
}
function useLatest(value) {
var ref = React__default.useRef(value);
React__default.useEffect(function () {
ref.current = value;
});
return ref;
}
var version = '6.1.0';
var versions = {
'final-form': finalForm.version,
'react-final-form': version
};
var all = finalForm.formSubscriptionItems.reduce(function (result, key) {
result[key] = true;
return result;
}, {});
function ReactFinalForm(_ref) {
var debug = _ref.debug,
decorators = _ref.decorators,
destroyOnUnregister = _ref.destroyOnUnregister,
alternateFormApi = _ref.form,
initialValues = _ref.initialValues,
initialValuesEqual = _ref.initialValuesEqual,
keepDirtyOnReinitialize = _ref.keepDirtyOnReinitialize,
mutators = _ref.mutators,
onSubmit = _ref.onSubmit,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription,
validate = _ref.validate,
validateOnBlur = _ref.validateOnBlur,
rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "form", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
var ReactFinalFormContext = getContext();
var config = {
debug: debug,
destroyOnUnregister: destroyOnUnregister,
initialValues: initialValues,
keepDirtyOnReinitialize: keepDirtyOnReinitialize,
mutators: mutators,
onSubmit: onSubmit,
validate: validate,
validateOnBlur: validateOnBlur
};
var form = useConstant(function () {
var f = alternateFormApi || finalForm.createForm(config);
f.pauseValidation();
return f;
}); // synchronously register and unregister to query form state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1]; // save a copy of state that can break through the closure
// on the shallowEqual() line below.
var stateRef = useLatest(state);
React.useEffect(function () {
// We have rendered, so all fields are no registered, so we can unpause validation
form.isValidationPaused() && form.resumeValidation();
var unsubscriptions = [form.subscribe(function (s) {
if (!shallowEqual(s, stateRef.current)) {
setState(s);
}
}, subscription)].concat(decorators ? decorators.map(function (decorator) {
return (// this noop ternary is to appease the flow gods
// istanbul ignore next
decorator(form)
);
}) : []);
return function () {
unsubscriptions.forEach(function (unsubscribe) {
return unsubscribe();
});
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [decorators]); // warn about decorator changes
// istanbul ignore next
{
// You're never supposed to use hooks inside a conditional, but in this
// case we can be certain that you're not going to be changing your
// NODE_ENV between renders, so this is safe.
// eslint-disable-next-line react-hooks/rules-of-hooks
useWhenValueChanges(decorators, function () {
console.error('Form decorators should not change from one render to the next as new values will be ignored');
}, shallowEqual);
} // allow updatable config
useWhenValueChanges(debug, function () {
form.setConfig('debug', debug);
});
useWhenValueChanges(destroyOnUnregister, function () {
form.setConfig('destroyOnUnregister', destroyOnUnregister);
});
useWhenValueChanges(initialValues, function () {
form.setConfig('initialValues', initialValues);
}, initialValuesEqual || shallowEqual);
useWhenValueChanges(keepDirtyOnReinitialize, function () {
form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
});
useWhenValueChanges(mutators, function () {
form.setConfig('mutators', mutators);
});
useWhenValueChanges(onSubmit, function () {
form.setConfig('onSubmit', onSubmit);
});
useWhenValueChanges(validate, function () {
form.setConfig('validate', validate);
});
useWhenValueChanges(validateOnBlur, function () {
form.setConfig('validateOnBlur', validateOnBlur);
});
var handleSubmit = function handleSubmit(event) {
if (event) {
// sometimes not true, e.g. React Native
if (typeof event.preventDefault === 'function') {
event.preventDefault();
}
if (typeof event.stopPropagation === 'function') {
// prevent any outer forms from receiving the event too
event.stopPropagation();
}
}
return form.submit();
};
var renderProps = _extends({}, state, {
form: _extends({}, form, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
form.reset();
} else {
form.reset(eventOrValues);
}
}
}),
handleSubmit: handleSubmit
});
return React.createElement(ReactFinalFormContext.Provider, {
value: form
}, renderComponent(_extends({}, rest, renderProps, {
__versions: versions
}), 'ReactFinalForm'));
}
function useForm(componentName) {
var ReactFinalFormContext = getContext();
var form = React.useContext(ReactFinalFormContext);
if (!form) {
throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
}
return form;
}
function useFormState(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
onChange = _ref.onChange,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription;
var form = useForm('useFormState');
var firstRender = React.useRef(true); // synchronously register and unregister to query field state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
if (onChange) {
onChange(initialState);
}
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1];
React.useEffect(function () {
return form.subscribe(function (newState) {
if (firstRender.current) {
firstRender.current = false;
} else {
setState(newState);
if (onChange) {
onChange(newState);
}
}
}, subscription);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[]);
return state;
}
function FormSpy(_ref) {
var onChange = _ref.onChange,
subscription = _ref.subscription,
rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
var ReactFinalFormContext = getContext();
var reactFinalForm = React.useContext(ReactFinalFormContext);
if (!reactFinalForm) {
throw new Error('FormSpy must be used inside of a ReactFinalForm component');
}
var state = useFormState({
onChange: onChange,
subscription: subscription
});
if (onChange) {
return null;
}
var renderProps = {
form: _extends({}, reactFinalForm, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
reactFinalForm.reset();
} else {
reactFinalForm.reset(eventOrValues);
}
}
})
};
return renderComponent(_extends({}, rest, state, renderProps), 'FormSpy');
}
var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';

@@ -138,15 +465,3 @@

var ReactFinalFormContext = React.createContext();
var useForm = function useForm(componentName) {
var form = React.useContext(ReactFinalFormContext);
if (!form) {
throw new Error((componentName || 'useForm') + " must be used inside of a <Form> component");
}
return form;
};
var all = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
var all$1 = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
result[key] = true;

@@ -164,3 +479,3 @@ return result;

var useField = function useField(name, _temp) {
function useField(name, _temp) {
var _ref = _temp === void 0 ? {} : _temp,

@@ -181,3 +496,3 @@ afterSubmit = _ref.afterSubmit,

_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all : _ref$subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription,
type = _ref.type,

@@ -188,9 +503,15 @@ validate = _ref.validate,

var form = useForm('useField'); // keep ref to most recent copy of validate function
var form = useForm('useField');
var validateRef = useLatest(validate);
var beforeSubmitRef = useLatest(function () {
if (formatOnBlur) {
var formatted = format(state.value, state.name);
var validateRef = React.useRef(validate);
React.useEffect(function () {
validateRef.current = validate;
if (formatted !== state.value) {
state.change(formatted);
}
}
return beforeSubmit && beforeSubmit();
});
var beforeSubmitRef = React.useRef();

@@ -201,3 +522,3 @@ var register = function register(callback) {

beforeSubmit: function beforeSubmit() {
return beforeSubmitRef.current && beforeSubmitRef.current();
return beforeSubmitRef.current();
},

@@ -226,14 +547,2 @@ defaultValue: defaultValue,

beforeSubmitRef.current = function () {
if (formatOnBlur) {
var formatted = format(state.value, state.name);
if (formatted !== state.value) {
state.change(formatted);
}
}
return beforeSubmit && beforeSubmit();
};
React.useEffect(function () {

@@ -354,3 +663,3 @@ return register(function (state) {

return renderProps;
};
}

@@ -415,304 +724,12 @@ var Field = function Field(_ref) {

function useWhenValueChanges(value, callback, isEqual) {
if (isEqual === void 0) {
isEqual = function isEqual(a, b) {
return a === b;
};
}
var previous = React__default.useRef(value);
React__default.useEffect(function () {
if (!isEqual(value, previous.current)) {
callback();
previous.current = value;
}
});
function withTypes() {
return {
Form: ReactFinalForm,
FormSpy: FormSpy
};
}
/**
* A simple hook to create a constant value that lives for
* the lifetime of the component.
*
* Plagiarized from https://github.com/Andarist/use-constant
*
* Do NOT reuse this code unless you know what you're doing.
* Use Andarist's hook; it's more fault tolerant to things like
* falsy values.
*
* @param {Function} init - A function to generate the value
*/
function useConstant(init) {
var ref = React__default.useRef();
if (!ref.current) {
ref.current = init();
}
return ref.current;
}
var shallowEqual = function shallowEqual(a, b) {
if (a === b) {
return true;
}
if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
return false;
}
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if (keysA.length !== keysB.length) {
return false;
}
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b);
for (var idx = 0; idx < keysA.length; idx++) {
var key = keysA[idx];
if (!bHasOwnProperty(key) || a[key] !== b[key]) {
return false;
}
}
return true;
};
var isSyntheticEvent = function isSyntheticEvent(candidate) {
return !!(candidate && typeof candidate.stopPropagation === 'function');
};
var version = '6.0.1';
var versions = {
'final-form': finalForm.version,
'react-final-form': version
};
var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
result[key] = true;
return result;
}, {});
var ReactFinalForm = function ReactFinalForm(_ref) {
var debug = _ref.debug,
decorators = _ref.decorators,
destroyOnUnregister = _ref.destroyOnUnregister,
initialValues = _ref.initialValues,
initialValuesEqual = _ref.initialValuesEqual,
keepDirtyOnReinitialize = _ref.keepDirtyOnReinitialize,
mutators = _ref.mutators,
onSubmit = _ref.onSubmit,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription,
validate = _ref.validate,
validateOnBlur = _ref.validateOnBlur,
rest = _objectWithoutPropertiesLoose(_ref, ["debug", "decorators", "destroyOnUnregister", "initialValues", "initialValuesEqual", "keepDirtyOnReinitialize", "mutators", "onSubmit", "subscription", "validate", "validateOnBlur"]);
var config = {
debug: debug,
destroyOnUnregister: destroyOnUnregister,
initialValues: initialValues,
keepDirtyOnReinitialize: keepDirtyOnReinitialize,
mutators: mutators,
onSubmit: onSubmit,
validate: validate,
validateOnBlur: validateOnBlur
};
var form = useConstant(function () {
var f = finalForm.createForm(config);
f.pauseValidation();
return f;
}); // synchronously register and unregister to query form state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1]; // save a copy of state that can break through the closure
// on the shallowEqual() line below.
var stateRef = React.useRef(state);
stateRef.current = state;
React.useEffect(function () {
// We have rendered, so all fields are no registered, so we can unpause validation
form.isValidationPaused() && form.resumeValidation();
var unsubscriptions = [form.subscribe(function (s) {
if (!shallowEqual(s, stateRef.current)) {
setState(s);
}
}, subscription)].concat(decorators ? decorators.map(function (decorator) {
return (// this noop ternary is to appease the flow gods
// istanbul ignore next
decorator(form)
);
}) : []);
return function () {
unsubscriptions.forEach(function (unsubscribe) {
return unsubscribe();
});
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [decorators]); // warn about decorator changes
// istanbul ignore next
{
// You're never supposed to use hooks inside a conditional, but in this
// case we can be certain that you're not going to be changing your
// NODE_ENV between renders, so this is safe.
// eslint-disable-next-line react-hooks/rules-of-hooks
useWhenValueChanges(decorators, function () {
console.error('Form decorators should not change from one render to the next as new values will be ignored');
}, shallowEqual);
} // allow updatable config
useWhenValueChanges(debug, function () {
form.setConfig('debug', debug);
});
useWhenValueChanges(destroyOnUnregister, function () {
form.setConfig('destroyOnUnregister', destroyOnUnregister);
});
useWhenValueChanges(initialValues, function () {
form.setConfig('initialValues', initialValues);
}, initialValuesEqual || shallowEqual);
useWhenValueChanges(keepDirtyOnReinitialize, function () {
form.setConfig('keepDirtyOnReinitialize', keepDirtyOnReinitialize);
});
useWhenValueChanges(mutators, function () {
form.setConfig('mutators', mutators);
});
useWhenValueChanges(onSubmit, function () {
form.setConfig('onSubmit', onSubmit);
});
useWhenValueChanges(validate, function () {
form.setConfig('validate', validate);
});
useWhenValueChanges(validateOnBlur, function () {
form.setConfig('validateOnBlur', validateOnBlur);
});
var handleSubmit = function handleSubmit(event) {
if (event) {
// sometimes not true, e.g. React Native
if (typeof event.preventDefault === 'function') {
event.preventDefault();
}
if (typeof event.stopPropagation === 'function') {
// prevent any outer forms from receiving the event too
event.stopPropagation();
}
}
return form.submit();
};
var renderProps = _extends({}, state, {
form: _extends({}, form, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
form.reset();
} else {
form.reset(eventOrValues);
}
}
}),
handleSubmit: handleSubmit
});
return React.createElement(ReactFinalFormContext.Provider, {
value: form
}, renderComponent(_extends({}, rest, renderProps, {
__versions: versions
}), 'ReactFinalForm'));
};
var useFormState = function useFormState(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
onChange = _ref.onChange,
_ref$subscription = _ref.subscription,
subscription = _ref$subscription === void 0 ? all$1 : _ref$subscription;
var form = useForm('useFormState');
var firstRender = React.useRef(true); // synchronously register and unregister to query field state for our subscription on first render
var _React$useState = React.useState(function () {
var initialState = {};
form.subscribe(function (state) {
initialState = state;
}, subscription)();
if (onChange) {
onChange(initialState);
}
return initialState;
}),
state = _React$useState[0],
setState = _React$useState[1];
React.useEffect(function () {
return form.subscribe(function (newState) {
if (firstRender.current) {
firstRender.current = false;
} else {
setState(newState);
if (onChange) {
onChange(newState);
}
}
}, subscription);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[]);
return state;
};
var FormSpy = function FormSpy(_ref) {
var onChange = _ref.onChange,
subscription = _ref.subscription,
rest = _objectWithoutPropertiesLoose(_ref, ["onChange", "subscription"]);
var reactFinalForm = React.useContext(ReactFinalFormContext);
if (!reactFinalForm) {
throw new Error('FormSpy must be used inside of a ReactFinalForm component');
}
var state = useFormState({
onChange: onChange,
subscription: subscription
});
if (onChange) {
return null;
}
var renderProps = {
form: _extends({}, reactFinalForm, {
reset: function reset(eventOrValues) {
if (isSyntheticEvent(eventOrValues)) {
// it's a React SyntheticEvent, call reset with no arguments
reactFinalForm.reset();
} else {
reactFinalForm.reset(eventOrValues);
}
}
})
};
return renderComponent(_extends({}, rest, state, renderProps), 'FormSpy');
};
exports.Field = Field;
exports.Form = ReactFinalForm;
exports.FormSpy = FormSpy;
exports.ReactFinalFormContext = ReactFinalFormContext;
exports.context = ReactFinalFormContext;
exports.useField = useField;

@@ -722,2 +739,3 @@ exports.useForm = useForm;

exports.version = version;
exports.withTypes = withTypes;

@@ -724,0 +742,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

2

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("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],t):t((e=e||self)["react-final-form"]={},e.React,e.FinalForm)}(this,function(e,D,S){"use strict";var O="default"in D?D.default:D;function N(){return(N=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}).apply(this,arguments)}function z(e,t){if(null==e)return{};var n,r,i={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],0<=t.indexOf(n)||(i[n]=e[n]);return i}function E(e,t){var n=e.render,r=e.children,i=e.component,u=z(e,["render","children","component"]);if(i)return D.createElement(i,N({},u,{children:r,render:n}));if(n)return n(void 0===r?u:N({},u,{children:r}));if("function"!=typeof r)throw new Error("Must specify either a render prop, a render function as children, or a component prop to "+t);return r(u)}function U(e){var t=D.useContext(C);if(!t)throw new Error((e||"useForm")+" must be used inside of a <Form> component");return t}function _(e,t){return void 0===e?"":e}function I(e,t){return""===e?void 0:e}function w(n,e){var t=void 0===e?{}:e,r=t.afterSubmit,i=t.allowNull,u=t.beforeSubmit,a=t.component,o=t.defaultValue,c=t.format,l=void 0===c?_:c,f=t.formatOnBlur,s=t.initialValue,d=t.isEqual,v=t.multiple,m=t.parse,p=void 0===m?I:m,b=t.subscription,g=void 0===b?M:b,h=t.type,y=t.validate,F=t.validateFields,S=t.value,O=U("useField"),E=D.useRef(y);function w(e){return O.registerField(n,e,g,{afterSubmit:r,beforeSubmit:function(){return C.current&&C.current()},defaultValue:o,getValidator:function(){return E.current},initialValue:s,isEqual:d,validateFields:F})}D.useEffect(function(){E.current=y});var C=D.useRef(),V=D.useRef(!0),k=D.useState(function(){var t={};return w(function(e){t=e})(),t}),x=k[0],R=k[1];C.current=function(){if(f){var e=l(x.value,x.name);e!==x.value&&x.change(e)}return u&&u()},D.useEffect(function(){return w(function(e){V.current?V.current=!1:R(e)})},[n,o,s,d]);var j={onBlur:D.useCallback(function(e){x.blur(),f&&x.change(l(x.value,x.name))},[x.name,x.value,l,f]),onChange:D.useCallback(function(e){var t=e&&e.target?function(e,t,n,r){if(!r&&e.nativeEvent&&void 0!==e.nativeEvent.text)return e.nativeEvent.text;if(r&&e.nativeEvent)return e.nativeEvent.text;var i=e.target,u=i.type,a=i.value,o=i.checked;switch(u){case"checkbox":if(void 0===n)return!!o;if(o)return Array.isArray(t)?t.concat(n):[n];if(!Array.isArray(t))return t;var c=t.indexOf(n);return c<0?t:t.slice(0,c).concat(t.slice(c+1));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 a}}(e,x.value,S,L):e;x.change(p(t,n))},[S,n,p,x.change,x.value,h]),onFocus:D.useCallback(function(e){x.focus()},[])},q=(x.blur,x.change,x.focus,x.value),B=(x.name,z(x,["blur","change","focus","value","name"])),P={active:B.active,data:B.data,dirty:B.dirty,dirtySinceLastSubmit:B.dirtySinceLastSubmit,error:B.error,initial:B.initial,invalid:B.invalid,length:B.length,modified:B.modified,pristine:B.pristine,submitError:B.submitError,submitFailed:B.submitFailed,submitSucceeded:B.submitSucceeded,submitting:B.submitting,touched:B.touched,valid:B.valid,visited:B.visited};f?"input"===a&&(q=_(q)):q=l(q,n),null!==q||i||(q="");var A=N({name:n,value:q,type:h},j);return"checkbox"===h?void 0===S?A.checked=!!q:(A.checked=!(!Array.isArray(q)||!~q.indexOf(S)),A.value=S):"radio"===h?(A.checked=q===S,A.value=S):"select"===a&&v&&(A.value=A.value||[],A.multiple=!0),{input:A,meta:P}}var L="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,C=D.createContext(),M=S.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});function V(e,t,n){void 0===n&&(n=function(e,t){return e===t});var r=O.useRef(e);O.useEffect(function(){n(e,r.current)||(t(),r.current=e)})}function k(e,t){if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(var i=Object.prototype.hasOwnProperty.bind(t),u=0;u<n.length;u++){var a=n[u];if(!i(a)||e[a]!==t[a])return!1}return!0}function x(e){return!(!e||"function"!=typeof e.stopPropagation)}function a(e){var t=void 0===e?{}:e,n=t.onChange,r=t.subscription,i=void 0===r?j:r,u=U("useFormState"),a=D.useRef(!0),o=D.useState(function(){var t={};return u.subscribe(function(e){t=e},i)(),n&&n(t),t}),c=o[0],l=o[1];return D.useEffect(function(){return u.subscribe(function(e){a.current?a.current=!1:(l(e),n&&n(e))},i)},[]),c}var t="6.0.1",R={"final-form":S.version,"react-final-form":t},j=S.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});e.Field=function(e){var t=e.afterSubmit,n=e.allowNull,r=e.beforeSubmit,i=e.children,u=e.component,a=e.defaultValue,o=e.format,c=e.formatOnBlur,l=e.initialValue,f=e.isEqual,s=e.multiple,d=e.name,v=e.parse,m=e.subscription,p=e.type,b=e.validate,g=e.validateFields,h=e.value,y=z(e,["afterSubmit","allowNull","beforeSubmit","children","component","defaultValue","format","formatOnBlur","initialValue","isEqual","multiple","name","parse","subscription","type","validate","validateFields","value"]),F=w(d,{afterSubmit:t,allowNull:n,beforeSubmit:r,children:i,component:u,defaultValue:a,format:o,formatOnBlur:c,initialValue:l,isEqual:f,multiple:s,parse:v,subscription:m,type:p,validate:b,validateFields:g,value:h});return"function"==typeof i?i(N({},F,y)):"string"==typeof u?D.createElement(u,N({},F.input,{children:i},y)):E(N({},F,{children:i,component:u},y),"Field("+d+")")},e.Form=function(e){var t=e.debug,n=e.decorators,r=e.destroyOnUnregister,i=e.initialValues,u=e.initialValuesEqual,a=e.keepDirtyOnReinitialize,o=e.mutators,c=e.onSubmit,l=e.subscription,f=void 0===l?j:l,s=e.validate,d=e.validateOnBlur,v=z(e,["debug","decorators","destroyOnUnregister","initialValues","initialValuesEqual","keepDirtyOnReinitialize","mutators","onSubmit","subscription","validate","validateOnBlur"]),m={debug:t,destroyOnUnregister:r,initialValues:i,keepDirtyOnReinitialize:a,mutators:o,onSubmit:c,validate:s,validateOnBlur:d},p=function(e){var t=O.useRef();return t.current||(t.current=e()),t.current}(function(){var e=S.createForm(m);return e.pauseValidation(),e}),b=D.useState(function(){var t={};return p.subscribe(function(e){t=e},f)(),t}),g=b[0],h=b[1],y=D.useRef(g);y.current=g,D.useEffect(function(){p.isValidationPaused()&&p.resumeValidation();var e=[p.subscribe(function(e){k(e,y.current)||h(e)},f)].concat(n?n.map(function(e){return e(p)}):[]);return function(){e.forEach(function(e){return e()})}},[n]),V(t,function(){p.setConfig("debug",t)}),V(r,function(){p.setConfig("destroyOnUnregister",r)}),V(i,function(){p.setConfig("initialValues",i)},u||k),V(a,function(){p.setConfig("keepDirtyOnReinitialize",a)}),V(o,function(){p.setConfig("mutators",o)}),V(c,function(){p.setConfig("onSubmit",c)}),V(s,function(){p.setConfig("validate",s)}),V(d,function(){p.setConfig("validateOnBlur",d)});var F=N({},g,{form:N({},p,{reset:function(e){x(e)?p.reset():p.reset(e)}}),handleSubmit:function(e){return e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),p.submit()}});return D.createElement(C.Provider,{value:p},E(N({},v,F,{__versions:R}),"ReactFinalForm"))},e.FormSpy=function(e){var t=e.onChange,n=e.subscription,r=z(e,["onChange","subscription"]),i=D.useContext(C);if(!i)throw new Error("FormSpy must be used inside of a ReactFinalForm component");var u=a({onChange:t,subscription:n});return t?null:E(N({},r,u,{form:N({},i,{reset:function(e){x(e)?i.reset():i.reset(e)}})}),"FormSpy")},e.ReactFinalFormContext=C,e.context=C,e.useField=w,e.useForm=U,e.useFormState=a,e.version=t,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],t):t((e=e||self)["react-final-form"]={},e.React,e.FinalForm)}(this,function(e,D,E){"use strict";var w="default"in D?D.default:D;function N(){return(N=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}).apply(this,arguments)}function z(e,t){if(null==e)return{};var n,r,i={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],0<=t.indexOf(n)||(i[n]=e[n]);return i}function V(e,t){var n=e.render,r=e.children,i=e.component,u=z(e,["render","children","component"]);if(i)return D.createElement(i,N({},u,{children:r,render:n}));if(n)return n(void 0===r?u:N({},u,{children:r}));if("function"!=typeof r)throw new Error("Must specify either a render prop, a render function as children, or a component prop to "+t);return r(u)}function C(e,t,n){void 0===n&&(n=function(e,t){return e===t});var r=w.useRef(e);w.useEffect(function(){n(e,r.current)||(t(),r.current=e)})}var t,k=function(e,t){if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(var i=Object.prototype.hasOwnProperty.bind(t),u=0;u<n.length;u++){var a=n[u];if(!i(a)||e[a]!==t[a])return!1}return!0},x=function(e){return!(!e||"function"!=typeof e.stopPropagation)};function R(){return t||(t=D.createContext()),t}function U(e){var t=w.useRef(e);return w.useEffect(function(){t.current=e}),t}var n="6.1.0",j={"final-form":E.version,"react-final-form":n},q=E.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});function r(e){var t=e.debug,n=e.decorators,r=e.destroyOnUnregister,i=e.form,u=e.initialValues,a=e.initialValuesEqual,o=e.keepDirtyOnReinitialize,c=e.mutators,l=e.onSubmit,f=e.subscription,s=void 0===f?q:f,d=e.validate,v=e.validateOnBlur,m=z(e,["debug","decorators","destroyOnUnregister","form","initialValues","initialValuesEqual","keepDirtyOnReinitialize","mutators","onSubmit","subscription","validate","validateOnBlur"]),p=R(),b={debug:t,destroyOnUnregister:r,initialValues:u,keepDirtyOnReinitialize:o,mutators:c,onSubmit:l,validate:d,validateOnBlur:v},y=function(e){var t=w.useRef();return t.current||(t.current=e()),t.current}(function(){var e=i||E.createForm(b);return e.pauseValidation(),e}),g=D.useState(function(){var t={};return y.subscribe(function(e){t=e},s)(),t}),h=g[0],S=g[1],F=U(h);D.useEffect(function(){y.isValidationPaused()&&y.resumeValidation();var e=[y.subscribe(function(e){k(e,F.current)||S(e)},s)].concat(n?n.map(function(e){return e(y)}):[]);return function(){e.forEach(function(e){return e()})}},[n]),C(t,function(){y.setConfig("debug",t)}),C(r,function(){y.setConfig("destroyOnUnregister",r)}),C(u,function(){y.setConfig("initialValues",u)},a||k),C(o,function(){y.setConfig("keepDirtyOnReinitialize",o)}),C(c,function(){y.setConfig("mutators",c)}),C(l,function(){y.setConfig("onSubmit",l)}),C(d,function(){y.setConfig("validate",d)}),C(v,function(){y.setConfig("validateOnBlur",v)});var O=N({},h,{form:N({},y,{reset:function(e){x(e)?y.reset():y.reset(e)}}),handleSubmit:function(e){return e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),y.submit()}});return D.createElement(p.Provider,{value:y},V(N({},m,O,{__versions:j}),"ReactFinalForm"))}function _(e){var t=R(),n=D.useContext(t);if(!n)throw new Error((e||"useForm")+" must be used inside of a <Form> component");return n}function o(e){var t=void 0===e?{}:e,n=t.onChange,r=t.subscription,i=void 0===r?q:r,u=_("useFormState"),a=D.useRef(!0),o=D.useState(function(){var t={};return u.subscribe(function(e){t=e},i)(),n&&n(t),t}),c=o[0],l=o[1];return D.useEffect(function(){return u.subscribe(function(e){a.current?a.current=!1:(l(e),n&&n(e))},i)},[]),c}function i(e){var t=e.onChange,n=e.subscription,r=z(e,["onChange","subscription"]),i=R(),u=D.useContext(i);if(!u)throw new Error("FormSpy must be used inside of a ReactFinalForm component");var a=o({onChange:t,subscription:n});return t?null:V(N({},r,a,{form:N({},u,{reset:function(e){x(e)?u.reset():u.reset(e)}})}),"FormSpy")}function I(e,t){return void 0===e?"":e}function L(e,t){return""===e?void 0:e}var M="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,T=E.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});function F(n,e){function r(e){return E.registerField(n,e,g,{afterSubmit:i,beforeSubmit:function(){return V.current()},defaultValue:c,getValidator:function(){return w.current},initialValue:d,isEqual:v,validateFields:F})}var t=void 0===e?{}:e,i=t.afterSubmit,u=t.allowNull,a=t.beforeSubmit,o=t.component,c=t.defaultValue,l=t.format,f=void 0===l?I:l,s=t.formatOnBlur,d=t.initialValue,v=t.isEqual,m=t.multiple,p=t.parse,b=void 0===p?L:p,y=t.subscription,g=void 0===y?T:y,h=t.type,S=t.validate,F=t.validateFields,O=t.value,E=_("useField"),w=U(S),V=U(function(){if(s){var e=f(x.value,x.name);e!==x.value&&x.change(e)}return a&&a()}),C=D.useRef(!0),k=D.useState(function(){var t={};return r(function(e){t=e})(),t}),x=k[0],R=k[1];D.useEffect(function(){return r(function(e){C.current?C.current=!1:R(e)})},[n,c,d,v]);var j={onBlur:D.useCallback(function(e){x.blur(),s&&x.change(f(x.value,x.name))},[x.name,x.value,f,s]),onChange:D.useCallback(function(e){var t=e&&e.target?function(e,t,n,r){if(!r&&e.nativeEvent&&void 0!==e.nativeEvent.text)return e.nativeEvent.text;if(r&&e.nativeEvent)return e.nativeEvent.text;var i=e.target,u=i.type,a=i.value,o=i.checked;switch(u){case"checkbox":if(void 0===n)return!!o;if(o)return Array.isArray(t)?t.concat(n):[n];if(!Array.isArray(t))return t;var c=t.indexOf(n);return c<0?t:t.slice(0,c).concat(t.slice(c+1));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 a}}(e,x.value,O,M):e;x.change(b(t,n))},[O,n,b,x.change,x.value,h]),onFocus:D.useCallback(function(e){x.focus()},[])},q=(x.blur,x.change,x.focus,x.value),B=(x.name,z(x,["blur","change","focus","value","name"])),P={active:B.active,data:B.data,dirty:B.dirty,dirtySinceLastSubmit:B.dirtySinceLastSubmit,error:B.error,initial:B.initial,invalid:B.invalid,length:B.length,modified:B.modified,pristine:B.pristine,submitError:B.submitError,submitFailed:B.submitFailed,submitSucceeded:B.submitSucceeded,submitting:B.submitting,touched:B.touched,valid:B.valid,visited:B.visited};s?"input"===o&&(q=I(q)):q=f(q,n),null!==q||u||(q="");var A=N({name:n,value:q,type:h},j);return"checkbox"===h?void 0===O?A.checked=!!q:(A.checked=!(!Array.isArray(q)||!~q.indexOf(O)),A.value=O):"radio"===h?(A.checked=q===O,A.value=O):"select"===o&&m&&(A.value=A.value||[],A.multiple=!0),{input:A,meta:P}}e.Field=function(e){var t=e.afterSubmit,n=e.allowNull,r=e.beforeSubmit,i=e.children,u=e.component,a=e.defaultValue,o=e.format,c=e.formatOnBlur,l=e.initialValue,f=e.isEqual,s=e.multiple,d=e.name,v=e.parse,m=e.subscription,p=e.type,b=e.validate,y=e.validateFields,g=e.value,h=z(e,["afterSubmit","allowNull","beforeSubmit","children","component","defaultValue","format","formatOnBlur","initialValue","isEqual","multiple","name","parse","subscription","type","validate","validateFields","value"]),S=F(d,{afterSubmit:t,allowNull:n,beforeSubmit:r,children:i,component:u,defaultValue:a,format:o,formatOnBlur:c,initialValue:l,isEqual:f,multiple:s,parse:v,subscription:m,type:p,validate:b,validateFields:y,value:g});return"function"==typeof i?i(N({},S,h)):"string"==typeof u?D.createElement(u,N({},S.input,{children:i},h)):V(N({},S,{children:i,component:u},h),"Field("+d+")")},e.Form=r,e.FormSpy=i,e.useField=F,e.useForm=_,e.useFormState=o,e.version=n,e.withTypes=function(){return{Form:r,FormSpy:i}},Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=react-final-form.umd.min.js.map

6

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

@@ -64,3 +64,3 @@ "main": "dist/react-final-form.cjs.js",

"fast-deep-equal": "^2.0.1",
"final-form": "^4.13.0",
"final-form": "^4.14.0",
"flow-bin": "^0.98.1",

@@ -92,3 +92,3 @@ "glow": "^1.2.2",

"peerDependencies": {
"final-form": "^4.13.0",
"final-form": "^4.14.0",
"react": "^16.8.0"

@@ -95,0 +95,0 @@ },

16

README.md

@@ -132,3 +132,4 @@ # 🏁 React Final Form

- [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
- [Independent Error Component](#independent-error-component)
- [Independent Error Component (with Render Props)](#independent-error-component-with-render-props)
- [Independent Error Component (with Hooks)](#independent-error-component-with-hooks)
- [Loading and Initializing Values](#loading-and-initializing-values)

@@ -178,3 +179,3 @@ - [Field Arrays](#field-arrays)

- [`defaultValue?: any`](#defaultvalue-any)
- [`format?: ((value: any, name: string) => any) | null`](#format-value-any-name-string--any--null)
- [`format?: ((value: any, name: string) => any)`](#format-value-any-name-string--any)
- [`formatOnBlur?: boolean`](#formatonblur-boolean)

@@ -184,3 +185,3 @@ - [`initialValue?: any`](#initialvalue-any)

- [`name: string`](#name-string)
- [`parse?: ((value: any, name: string) => any) | null`](#parse-value-any-name-string--any--null)
- [`parse?: ((value: any, name: string) => any)`](#parse-value-any-name-string--any)
- [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode)

@@ -322,3 +323,3 @@ - [`subscription?: FieldSubscription`](#subscription-fieldsubscription)

### [Independent Error Component](https://codesandbox.io/s/xoo3xq654p)
### [Independent Error Component (with Render Props)](https://codesandbox.io/s/xoo3xq654p)

@@ -328,2 +329,7 @@ Demonstrates how to make an independent Error component to subscribe to and

### [Independent Error Component (with Hooks)](https://codesandbox.io/s/react-final-form-independent-error-component-with-hooks-y1grn)
Demonstrates how to make an independent Error component, using Hooks, to subscribe to and
display the error for any form field.
### [Loading and Initializing Values](https://codesandbox.io/s/91w9ro3x9o)

@@ -552,3 +558,3 @@

[See the 🏁 Final Form docs on `initialValue`](https://github.com/final-form/final-form# #initialvalue-any)
[See the 🏁 Final Form docs on `initialValue`](https://github.com/final-form/final-form#initialvalue-any)

@@ -555,0 +561,0 @@ #### `isEqual?: (a: any, b: any) => boolean`

43

typescript/index.d.ts

@@ -16,4 +16,4 @@ import * as React from 'react';

export interface ReactContext {
reactFinalForm: FormApi;
export interface ReactContext<FormValues> {
reactFinalForm: FormApi<FormValues>;
}

@@ -42,4 +42,4 @@

export interface FormRenderProps extends FormState {
form: FormApi;
export interface FormRenderProps<FormValues> extends FormState<FormValues> {
form: FormApi<FormValues>;
handleSubmit: (

@@ -50,4 +50,4 @@ event?: React.SyntheticEvent<HTMLFormElement>

export interface FormSpyRenderProps extends FormState {
form: FormApi;
export interface FormSpyRenderProps<FormValues> extends FormState<FormValues> {
form: FormApi<FormValues>;
}

@@ -61,7 +61,8 @@

export interface FormProps<FormData = object>
extends Config<FormData>,
RenderableProps<FormRenderProps> {
export interface FormProps<FormValues = object>
extends Config<FormValues>,
RenderableProps<FormRenderProps<FormValues>> {
subscription?: FormSubscription;
decorators?: Decorator[];
form?: FormApi<FormValues>;
initialValuesEqual?: (a?: object, b?: object) => boolean;

@@ -95,14 +96,14 @@ }

export interface UseFormStateParams {
onChange?: (formState: FormState) => void;
export interface UseFormStateParams<FormValues = object> {
onChange?: (formState: FormState<FormValues>) => void;
subscription?: FormSubscription;
}
export interface FormSpyProps
extends UseFormStateParams,
RenderableProps<FormSpyRenderProps> {}
export interface FormSpyProps<FormValues>
extends UseFormStateParams<FormValues>,
RenderableProps<FormSpyRenderProps<FormValues>> {}
export const Field: React.FC<FieldProps<any>>;
export const Form: React.FC<FormProps<object>>;
export const FormSpy: React.FC<FormSpyProps>;
export const FormSpy: React.FC<FormSpyProps<object>>;
export function useField<T extends HTMLElement>(

@@ -112,4 +113,12 @@ name: string,

): FieldRenderProps<T>;
export function useForm(componentName?: string): FormApi;
export function useFormState(params?: UseFormStateParams): FormState;
export function useForm<FormValues = object>(
componentName?: string
): FormApi<FormValues>;
export function useFormState<FormValues = object>(
params?: UseFormStateParams
): FormState<FormValues>;
export function withTypes<FormValues>(): {
Form: React.FC<FormProps<FormValues>>;
FormSpy: React.FC<FormSpyProps<FormValues>>;
};
export const version: string;
dist/index.js.flow

Sorry, the diff of this file is not supported yet

dist/react-final-form.cjs.js.flow

Sorry, the diff of this file is not supported yet

dist/react-final-form.es.js.flow

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/react-final-form.umd.min.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