react-final-form
Advanced tools
Comparing version 1.2.1 to 2.0.0
import * as React from 'react' | ||
import { Api, Config, Decorator, FormState, FormSubscription, FieldSubscription } from 'final-form' | ||
import { | ||
FormApi, | ||
Config, | ||
Decorator, | ||
FormState, | ||
FormSubscription, | ||
FieldSubscription | ||
} from 'final-form' | ||
export type ReactContext = { | ||
reactFinalForm: Api | ||
reactFinalForm: FormApi | ||
} | ||
@@ -10,21 +17,21 @@ | ||
input: { | ||
name: string, | ||
onBlur: <T>(event?: React.FocusEvent<T>) => void, | ||
onChange: <T>(event: React.ChangeEvent<T> | any) => void, | ||
onFocus: <T>(event?: React.FocusEvent<T>) => void, | ||
name: string | ||
onBlur: <T>(event?: React.FocusEvent<T>) => void | ||
onChange: <T>(event: React.ChangeEvent<T> | any) => void | ||
onFocus: <T>(event?: React.FocusEvent<T>) => void | ||
value: any | ||
}, | ||
} | ||
meta: Partial<{ | ||
// TODO: Make a diff of `FieldState` without all the functions | ||
active: boolean, | ||
dirty: boolean, | ||
error: boolean, | ||
initial: boolean, | ||
invalid: boolean, | ||
pristine: boolean, | ||
submitError: boolean, | ||
submitFailed: boolean, | ||
submitSucceeded: boolean, | ||
touched: boolean, | ||
valid: boolean, | ||
active: boolean | ||
dirty: boolean | ||
error: boolean | ||
initial: boolean | ||
invalid: boolean | ||
pristine: boolean | ||
submitError: boolean | ||
submitFailed: boolean | ||
submitSucceeded: boolean | ||
touched: boolean | ||
valid: boolean | ||
visited: boolean | ||
@@ -35,7 +42,7 @@ }> | ||
export type FormRenderProps = { | ||
blur: (name: string) => void, | ||
change: (name: string, value: any) => void, | ||
focus: (name: string) => void, | ||
handleSubmit: (event: React.SyntheticEvent<HTMLFormElement>) => void, | ||
initialize: (values: object) => void, | ||
blur: (name: string) => void | ||
change: (name: string, value: any) => void | ||
focus: (name: string) => void | ||
handleSubmit: (event: React.SyntheticEvent<HTMLFormElement>) => void | ||
initialize: (values: object) => void | ||
reset: () => void | ||
@@ -47,4 +54,4 @@ } & FormState | ||
export type RenderableProps<T> = Partial<{ | ||
children: ((props: T) => React.ReactNode) | React.ReactNode, | ||
component: React.ComponentType, | ||
children: ((props: T) => React.ReactNode) | React.ReactNode | ||
component: React.ComponentType | ||
render: (props: T) => React.ReactNode | ||
@@ -54,3 +61,3 @@ }> | ||
export type FormProps = { | ||
subscription?: FormSubscription, | ||
subscription?: FormSubscription | ||
decorators?: Decorator[] | ||
@@ -61,6 +68,6 @@ } & Config & | ||
export type FieldProps = { | ||
allowNull?: boolean, | ||
name: string, | ||
subscription?: FieldSubscription, | ||
validate?: (value: any, allValues: object) => any, | ||
allowNull?: boolean | ||
name: string | ||
subscription?: FieldSubscription | ||
validate?: (value: any, allValues: object) => any | ||
value?: any | ||
@@ -70,3 +77,3 @@ } & RenderableProps<FieldRenderProps> | ||
export type FormSpyProps = { | ||
onChange?: (formState: FormState) => void, | ||
onChange?: (formState: FormState) => void | ||
subscription?: FormSubscription | ||
@@ -73,0 +80,0 @@ } & RenderableProps<FormSpyRenderProps> |
@@ -20,3 +20,3 @@ 'use strict'; | ||
// | ||
var diffSubscription = function (a, b, keys) { | ||
function diffSubscription (a, b, keys) { | ||
if (a) { | ||
@@ -34,3 +34,3 @@ if (b) { | ||
} | ||
}; | ||
} | ||
@@ -153,3 +153,3 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
if (component) { | ||
return React.createElement(component, _extends({}, rest, { children: children })); // inject children back in | ||
return React.createElement(component, _extends({}, rest, { children: children, render: render })); | ||
} | ||
@@ -221,6 +221,12 @@ if (render) { | ||
_this.subscribe = function (_ref, listener) { | ||
var name = _ref.name, | ||
subscription = _ref.subscription; | ||
var isEqual = _ref.isEqual, | ||
name = _ref.name, | ||
subscription = _ref.subscription, | ||
validateFields = _ref.validateFields; | ||
_this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, _this.validate); | ||
_this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, { | ||
isEqual: isEqual, | ||
validate: _this.validate, | ||
validateFields: validateFields | ||
}); | ||
}; | ||
@@ -288,10 +294,12 @@ | ||
var _props = this.props, | ||
name = _props.name, | ||
allowNull = _props.allowNull, | ||
component = _props.component, | ||
children = _props.children, | ||
allowNull = _props.allowNull, | ||
isEqual = _props.isEqual, | ||
name = _props.name, | ||
subscription = _props.subscription, | ||
validate = _props.validate, | ||
validateFields = _props.validateFields, | ||
_value = _props.value, | ||
rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'subscription', 'validate', 'value']); | ||
rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']); | ||
var _state$state = this.state.state, | ||
@@ -361,3 +369,3 @@ blur = _state$state.blur, | ||
// | ||
var version$1 = '1.2.0'; | ||
var version$1 = '2.0.0'; | ||
@@ -364,0 +372,0 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) { |
@@ -14,3 +14,3 @@ import { PureComponent, createElement } from 'react'; | ||
// | ||
var diffSubscription = function (a, b, keys) { | ||
function diffSubscription (a, b, keys) { | ||
if (a) { | ||
@@ -28,3 +28,3 @@ if (b) { | ||
} | ||
}; | ||
} | ||
@@ -147,3 +147,3 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
if (component) { | ||
return createElement(component, _extends({}, rest, { children: children })); // inject children back in | ||
return createElement(component, _extends({}, rest, { children: children, render: render })); | ||
} | ||
@@ -215,6 +215,12 @@ if (render) { | ||
_this.subscribe = function (_ref, listener) { | ||
var name = _ref.name, | ||
subscription = _ref.subscription; | ||
var isEqual = _ref.isEqual, | ||
name = _ref.name, | ||
subscription = _ref.subscription, | ||
validateFields = _ref.validateFields; | ||
_this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, _this.validate); | ||
_this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, { | ||
isEqual: isEqual, | ||
validate: _this.validate, | ||
validateFields: validateFields | ||
}); | ||
}; | ||
@@ -282,10 +288,12 @@ | ||
var _props = this.props, | ||
name = _props.name, | ||
allowNull = _props.allowNull, | ||
component = _props.component, | ||
children = _props.children, | ||
allowNull = _props.allowNull, | ||
isEqual = _props.isEqual, | ||
name = _props.name, | ||
subscription = _props.subscription, | ||
validate = _props.validate, | ||
validateFields = _props.validateFields, | ||
_value = _props.value, | ||
rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'subscription', 'validate', 'value']); | ||
rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']); | ||
var _state$state = this.state.state, | ||
@@ -355,3 +363,3 @@ blur = _state$state.blur, | ||
// | ||
var version$1 = '1.2.0'; | ||
var version$1 = '2.0.0'; | ||
@@ -358,0 +366,0 @@ var all$1 = formSubscriptionItems.reduce(function (result, key) { |
@@ -17,3 +17,3 @@ (function (global, factory) { | ||
// | ||
var diffSubscription = function (a, b, keys) { | ||
function diffSubscription (a, b, keys) { | ||
if (a) { | ||
@@ -31,3 +31,3 @@ if (b) { | ||
} | ||
}; | ||
} | ||
@@ -150,3 +150,3 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
if (component) { | ||
return React.createElement(component, _extends({}, rest, { children: children })); // inject children back in | ||
return React.createElement(component, _extends({}, rest, { children: children, render: render })); | ||
} | ||
@@ -218,6 +218,12 @@ if (render) { | ||
_this.subscribe = function (_ref, listener) { | ||
var name = _ref.name, | ||
subscription = _ref.subscription; | ||
var isEqual = _ref.isEqual, | ||
name = _ref.name, | ||
subscription = _ref.subscription, | ||
validateFields = _ref.validateFields; | ||
_this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, _this.validate); | ||
_this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, { | ||
isEqual: isEqual, | ||
validate: _this.validate, | ||
validateFields: validateFields | ||
}); | ||
}; | ||
@@ -285,10 +291,12 @@ | ||
var _props = this.props, | ||
name = _props.name, | ||
allowNull = _props.allowNull, | ||
component = _props.component, | ||
children = _props.children, | ||
allowNull = _props.allowNull, | ||
isEqual = _props.isEqual, | ||
name = _props.name, | ||
subscription = _props.subscription, | ||
validate = _props.validate, | ||
validateFields = _props.validateFields, | ||
_value = _props.value, | ||
rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'subscription', 'validate', 'value']); | ||
rest = objectWithoutProperties(_props, ['allowNull', 'component', 'children', 'isEqual', 'name', 'subscription', 'validate', 'validateFields', 'value']); | ||
var _state$state = this.state.state, | ||
@@ -358,3 +366,3 @@ blur = _state$state.blur, | ||
// | ||
var version$1 = '1.2.0'; | ||
var version$1 = '2.0.0'; | ||
@@ -361,0 +369,0 @@ var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) { |
@@ -1,2 +0,2 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],e):e(t["react-final-form"]={},t.React,t.PropTypes,t.FinalForm)}(this,function(t,e,n,r){"use strict";function o(t,n){var r=t.render,o=t.children,i=t.component,a=p(t,["render","children","component"]);return i?e.createElement(i,l({},a,{children:o})):r?r(l({},a,{children:o})):"function"!=typeof o?null:o(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(t,e){},a=function(t,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e},u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},p=function(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},m=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,h=function(t,e){if(!e&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(e&&t.nativeEvent)return t.nativeEvent.text;var n=t.target,r=n.type,o=n.value,i=n.checked;switch(r){case"checkbox":return!!i;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 o}},v=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),d=function(t){function n(t,e){s(this,n);var r=m(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,e));r.subscribe=function(t,e){var n=t.name,o=t.subscription;r.unsubscribe=r.context.reactFinalForm.registerField(n,e,o||v,r.validate)},r.validate=function(t,e){return r.props.validate&&r.props.validate(t,e)},r.notify=function(t){return r.setState({state:t})},r.handlers={onBlur:function(t){r.state.state.blur()},onChange:function(t){var e=t&&t.target?h(t,b):t;r.state.state.change(""===e?void 0:e)},onFocus:function(t){r.state.state.focus()}};var o=void 0;return i(e.reactFinalForm,"Field must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){o?r.notify(t):o=t}),r.state={state:o||{}},r}return f(n,t),c(n,[{key:"componentWillReceiveProps",value:function(t){var e=t.name,n=t.subscription;(this.props.name!==e||a(this.props.subscription,n,r.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,n=t.name,r=t.component,i=t.children,a=t.allowNull,u=(t.subscription,t.validate,t.value),s=p(t,["name","component","children","allowNull","subscription","validate","value"]),c=this.state.state,f=(c.blur,c.change,c.focus,c.value),m=(c.name,p(c,["blur","change","focus","value","name"]));(void 0===f||null===f&&!a)&&(f="");var b=l({name:n,value:f},this.handlers);return"checkbox"===s.type?b.checked=!!f:"radio"===s.type&&(b.checked=f===u,b.value=u),"select"===r&&s.multiple&&(b.value=b.value||[]),"function"==typeof i?i(l({input:b,meta:m},s)):"string"==typeof r?e.createElement(r,l({},b,{children:i},s)):o(l({input:b,meta:m,children:i,component:r},s))}}]),n}(e.PureComponent);d.contextTypes={reactFinalForm:n.object};var y=r.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),F=function(t){function e(t){s(this,e);var n=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));n.notify=function(t){return n.setState({state:t})},n.handleSubmit=function(t){return t.preventDefault(),n.form.submit()};t.children,t.component;var o=t.debug,a=t.decorators,u=t.initialValues,c=t.mutators,l=t.onSubmit,f=(t.render,t.subscription),p={debug:o,initialValues:u,mutators:c,onSubmit:l,validate:t.validate,validateOnBlur:t.validateOnBlur};try{n.form=r.createForm(p)}catch(t){i(!1,t.message)}var b=void 0;return n.unsubscriptions=[],n.form&&n.unsubscriptions.push(n.form.subscribe(function(t){b?n.notify(t):b=t},f||y)),n.state={state:b},a&&a.forEach(function(t){n.unsubscriptions.push(t(n.form))}),n}return f(e,t),c(e,[{key:"getChildContext",value:function(){return{reactFinalForm:this.form}}},{key:"componentWillReceiveProps",value:function(t){(function(t,e){if(t===e)return!0;if("object"!==(void 0===t?"undefined":u(t))||!t||"object"!==(void 0===e?"undefined":u(e))||!e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var o=Object.prototype.hasOwnProperty.bind(e),i=0;i<n.length;i++){var a=n[i];if(!o(a)||t[a]!==e[a])return!1}return!0})(this.props.initialValues,t.initialValues)||this.form.initialize(t.initialValues)}},{key:"componentWillUnmount",value:function(){this.unsubscriptions.forEach(function(t){return t()})}},{key:"render",value:function(){var t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,p(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"]));return o(l({},e,this.state.state,{mutators:this.form&&this.form.mutators,batch:this.form&&this.form.batch,blur:this.form&&this.form.blur,change:this.form&&this.form.change,focus:this.form&&this.form.focus,handleSubmit:this.handleSubmit,initialize:this.form&&this.form.initialize,reset:this.form&&this.form.reset}))}}]),e}(e.PureComponent);F.childContextTypes={reactFinalForm:n.object},F.displayName="ReactFinalForm("+r.version+")(1.2.0)";var g=function(t){function e(t,n){s(this,e);var r=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));r.subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.context.reactFinalForm.subscribe(e,n||y)},r.notify=function(t){r.setState({state:t}),r.props.onChange&&r.props.onChange(t)};var o=void 0;return i(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(e){o?r.notify(e):(o=e,t.onChange&&t.onChange(e))}),r.state={state:o},r}return f(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;a(this.props.subscription,e,r.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=t.onChange,n=(t.subscription,p(t,["onChange","subscription"]));return e?null:o(l({},n,this.state.state))}}]),e}(e.PureComponent);g.contextTypes={reactFinalForm:n.object},t.Field=d,t.Form=F,t.version="1.2.0",t.FormSpy=g,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],e):e(t["react-final-form"]={},t.React,t.PropTypes,t.FinalForm)}(this,function(t,e,n,r){"use strict";function i(t,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e}function o(t,n){var r=t.render,i=t.children,o=t.component,a=p(t,["render","children","component"]);return o?e.createElement(o,l({},a,{children:i,render:r})):r?r(l({},a,{children:i})):"function"!=typeof i?null:i(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var a=function(t,e){},u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},p=function(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},m=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,h=function(t,e){if(!e&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(e&&t.nativeEvent)return t.nativeEvent.text;var n=t.target,r=n.type,i=n.value,o=n.checked;switch(r){case"checkbox":return!!o;case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var r=t[n];r.selected&&e.push(r.value)}return e}(t.target.options);default:return i}},d=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),v=function(t){function n(t,e){s(this,n);var r=m(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,e));r.subscribe=function(t,e){var n=t.isEqual,i=t.name,o=t.subscription,a=t.validateFields;r.unsubscribe=r.context.reactFinalForm.registerField(i,e,o||d,{isEqual:n,validate:r.validate,validateFields:a})},r.validate=function(t,e){return r.props.validate&&r.props.validate(t,e)},r.notify=function(t){return r.setState({state:t})},r.handlers={onBlur:function(t){r.state.state.blur()},onChange:function(t){var e=t&&t.target?h(t,b):t;r.state.state.change(""===e?void 0:e)},onFocus:function(t){r.state.state.focus()}};var i=void 0;return a(e.reactFinalForm,"Field must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){i?r.notify(t):i=t}),r.state={state:i||{}},r}return f(n,t),c(n,[{key:"componentWillReceiveProps",value:function(t){var e=t.name,n=t.subscription;(this.props.name!==e||i(this.props.subscription,n,r.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,n=t.allowNull,r=t.component,i=t.children,a=(t.isEqual,t.name),u=(t.subscription,t.validate,t.validateFields,t.value),s=p(t,["allowNull","component","children","isEqual","name","subscription","validate","validateFields","value"]),c=this.state.state,f=(c.blur,c.change,c.focus,c.value),m=(c.name,p(c,["blur","change","focus","value","name"]));(void 0===f||null===f&&!n)&&(f="");var b=l({name:a,value:f},this.handlers);return"checkbox"===s.type?b.checked=!!f:"radio"===s.type&&(b.checked=f===u,b.value=u),"select"===r&&s.multiple&&(b.value=b.value||[]),"function"==typeof i?i(l({input:b,meta:m},s)):"string"==typeof r?e.createElement(r,l({},b,{children:i},s)):o(l({input:b,meta:m,children:i,component:r},s))}}]),n}(e.PureComponent);v.contextTypes={reactFinalForm:n.object};var y=r.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),F=function(t){function e(t){s(this,e);var n=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));n.notify=function(t){return n.setState({state:t})},n.handleSubmit=function(t){return t.preventDefault(),n.form.submit()};t.children,t.component;var i=t.debug,o=t.decorators,u=t.initialValues,c=t.mutators,l=t.onSubmit,f=(t.render,t.subscription),p={debug:i,initialValues:u,mutators:c,onSubmit:l,validate:t.validate,validateOnBlur:t.validateOnBlur};try{n.form=r.createForm(p)}catch(t){a(!1,t.message)}var b=void 0;return n.unsubscriptions=[],n.form&&n.unsubscriptions.push(n.form.subscribe(function(t){b?n.notify(t):b=t},f||y)),n.state={state:b},o&&o.forEach(function(t){n.unsubscriptions.push(t(n.form))}),n}return f(e,t),c(e,[{key:"getChildContext",value:function(){return{reactFinalForm:this.form}}},{key:"componentWillReceiveProps",value:function(t){(function(t,e){if(t===e)return!0;if("object"!==(void 0===t?"undefined":u(t))||!t||"object"!==(void 0===e?"undefined":u(e))||!e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var i=Object.prototype.hasOwnProperty.bind(e),o=0;o<n.length;o++){var a=n[o];if(!i(a)||t[a]!==e[a])return!1}return!0})(this.props.initialValues,t.initialValues)||this.form.initialize(t.initialValues)}},{key:"componentWillUnmount",value:function(){this.unsubscriptions.forEach(function(t){return t()})}},{key:"render",value:function(){var t=this.props,e=(t.debug,t.initialValues,t.mutators,t.onSubmit,t.subscription,t.validate,t.validateOnBlur,p(t,["debug","initialValues","mutators","onSubmit","subscription","validate","validateOnBlur"]));return o(l({},e,this.state.state,{mutators:this.form&&this.form.mutators,batch:this.form&&this.form.batch,blur:this.form&&this.form.blur,change:this.form&&this.form.change,focus:this.form&&this.form.focus,handleSubmit:this.handleSubmit,initialize:this.form&&this.form.initialize,reset:this.form&&this.form.reset}))}}]),e}(e.PureComponent);F.childContextTypes={reactFinalForm:n.object},F.displayName="ReactFinalForm("+r.version+")(2.0.0)";var g=function(t){function e(t,n){s(this,e);var r=m(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));r.subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.context.reactFinalForm.subscribe(e,n||y)},r.notify=function(t){r.setState({state:t}),r.props.onChange&&r.props.onChange(t)};var i=void 0;return a(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(e){i?r.notify(e):(i=e,t.onChange&&t.onChange(e))}),r.state={state:i},r}return f(e,t),c(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;i(this.props.subscription,e,r.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=t.onChange,n=(t.subscription,p(t,["onChange","subscription"]));return e?null:o(l({},n,this.state.state))}}]),e}(e.PureComponent);g.contextTypes={reactFinalForm:n.object},t.Field=v,t.Form=F,t.version="2.0.0",t.FormSpy=g,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
//# sourceMappingURL=react-final-form.umd.min.js.map |
{ | ||
"name": "react-final-form", | ||
"version": "1.2.1", | ||
"version": "2.0.0", | ||
"description": | ||
@@ -9,2 +9,3 @@ "🏁 High performance subscription-based form state management for React", | ||
"module": "dist/react-final-form.es.js", | ||
"typings": "dist/index.d.ts", | ||
"files": ["dist"], | ||
@@ -28,4 +29,5 @@ "scripts": { | ||
"devDependencies": { | ||
"@types/react": "^16.0.29", | ||
"babel-eslint": "^8.0.3", | ||
"babel-jest": "^21.2.0", | ||
"babel-jest": "^22.0.0", | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
@@ -45,7 +47,7 @@ "babel-plugin-transform-flow-strip-types": "^6.22.0", | ||
"eslint-plugin-react": "^7.4.0", | ||
"final-form": "^1.3.2", | ||
"final-form": "^3.0.0", | ||
"flow": "^0.2.3", | ||
"flow-bin": "^0.60.1", | ||
"flow-bin": "^0.61.0", | ||
"husky": "^0.14.3", | ||
"jest": "^21.2.1", | ||
"jest": "^22.0.0", | ||
"lint-staged": "^6.0.0", | ||
@@ -59,3 +61,2 @@ "nps": "^5.7.1", | ||
"react": "^16.2.0", | ||
"@types/react": "^16.0.29", | ||
"react-dom": "^16.2.0", | ||
@@ -71,5 +72,5 @@ "rollup": "^0.52.0", | ||
"peerDependencies": { | ||
"final-form": "^1.3.2", | ||
"final-form": "^3.0.0", | ||
"prop-types": "^15.6.0", | ||
"react": "^15.0.0-0 || ^16.0.0-0" | ||
"react": "^15.3.0 || ^16.0.0-0" | ||
}, | ||
@@ -80,3 +81,3 @@ "jest": { | ||
"lint-staged": { | ||
"*.{js,json,md,css}": ["prettier --write", "git add"] | ||
"*.{js*,ts,json,md,css}": ["prettier --write", "git add"] | ||
}, | ||
@@ -83,0 +84,0 @@ "bundlesize": [ |
@@ -124,2 +124,5 @@ # 🏁 React Final Form | ||
* [Field Warnings](#field-warnings) | ||
* [Reusable Field Groups](#reusable-field-groups) | ||
* [External Submit](#external-submit) | ||
* [Wizard Form](#wizard-form) | ||
* [Rendering](#rendering) | ||
@@ -136,2 +139,3 @@ * [API](#api) | ||
* [`component?: React.ComponentType<FieldRenderProps>`](#component-reactcomponenttypefieldrenderprops) | ||
* [`isEqual?: (a: any, b: any) => boolean`](#isequal-a-any-b-any--boolean) | ||
* [`name: string`](#name-string) | ||
@@ -141,2 +145,3 @@ * [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode) | ||
* [`validate?: (value: ?any, allValues: Object) => ?any`](#validate-value-any-allvalues-object--any) | ||
* [`validateFields?: string[]`](#validatefields-string) | ||
* [`value?: any`](#value-any) | ||
@@ -271,2 +276,17 @@ * [`FieldRenderProps`](#fieldrenderprops) | ||
### [Reusable Field Groups](https://codesandbox.io/s/8z5jm6x80) | ||
Demonstrates how fields can be grouped into reusable components. | ||
### [External Submit](https://codesandbox.io/s/1y7noyrlmq) | ||
Demonstrates how you can use `document.getElementById()` or a closure to trigger | ||
a submit from outside of the form. For more information, see | ||
[How can I trigger a submit from outside the form?](docs/faq.md#how-can-i-trigger-a-submit-from-outside-my-form) | ||
### [Wizard Form](https://codesandbox.io/s/km2n35kq3v) | ||
Demonstrates how to use 🏁 React Final Form to create a multi-page "wizard" | ||
form, with validation on each page. | ||
## Rendering | ||
@@ -332,2 +352,6 @@ | ||
#### `isEqual?: (a: any, b: any) => boolean` | ||
[See the 🏁 Final Form docs on `isEqual`](https://github.com/final-form/final-form#isequal-a-any-b-any--boolean). | ||
#### `name: string` | ||
@@ -356,2 +380,6 @@ | ||
#### `validateFields?: string[]` | ||
[See the 🏁 Final Form docs on `validateFields`](https://github.com/final-form/final-form#validatefields-string). | ||
#### `value?: any` | ||
@@ -485,5 +513,5 @@ | ||
#### `onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void` | ||
#### `onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void` | ||
[See the 🏁 Final Form docs on `onSubmit`](https://github.com/final-form/final-form#onsubmit-values-object-callback-errors-object--void--object--promiseobject--void). | ||
[See the 🏁 Final Form docs on `onSubmit`](https://github.com/final-form/final-form#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void). | ||
@@ -543,4 +571,3 @@ #### `render?: (props: FormRenderProps) => React.Node` | ||
A function intended for you to give directly to the `<form>` tag: `<form | ||
onSubmit={handleSubmit}/>`. | ||
A function intended for you to give directly to the `<form>` tag: `<form onSubmit={handleSubmit}/>`. | ||
@@ -547,0 +574,0 @@ #### `initialize: (values: Object) => void` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
93806
1534
629