🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

redux-form

Package Overview
Dependencies
Maintainers
1
Versions
236
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-form - npm Package Compare versions

Comparing version

0.2.3
to
0.2.4

.idea/dictionaries/erik.xml
lib/bindSliceKey.js

258

dist/redux-form.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

root["ReduxForm"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_6__) {
})(this, function(__WEBPACK_EXTERNAL_MODULE_7__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -64,12 +64,20 @@ /******/ // The module cache

var _createFormReducer = __webpack_require__(3);
var _createFormReducer = __webpack_require__(4);
var _createFormReducer2 = _interopRequireDefault(_createFormReducer);
var _reduxForm = __webpack_require__(4);
var _reduxForm = __webpack_require__(5);
var _reduxForm2 = _interopRequireDefault(_reduxForm);
var _bindSliceKey = __webpack_require__(3);
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _actions = __webpack_require__(2);
var initializeWithKey = function initializeWithKey(form, key, data) {
return _bindSliceKey2['default'](_actions.initialize, key)(form, data);
};
exports['default'] = _reduxForm2['default'];

@@ -80,2 +88,3 @@ exports.blur = _actions.blur;

exports.initialize = _actions.initialize;
exports.initializeWithKey = initializeWithKey;
exports.reset = _actions.reset;

@@ -106,4 +115,8 @@ exports.startAsyncValidation = _actions.startAsyncValidation;

exports.START_ASYNC_VALIDATION = START_ASYNC_VALIDATION;
var START_SUBMIT = 'redux-form/START_SUBMIT';
exports.START_SUBMIT = START_SUBMIT;
var STOP_ASYNC_VALIDATION = 'redux-form/STOP_ASYNC_VALIDATION';
exports.STOP_ASYNC_VALIDATION = STOP_ASYNC_VALIDATION;
var STOP_SUBMIT = 'redux-form/STOP_SUBMIT';
exports.STOP_SUBMIT = STOP_SUBMIT;
var TOUCH = 'redux-form/TOUCH';

@@ -130,3 +143,5 @@ exports.TOUCH = TOUCH;

exports.startAsyncValidation = startAsyncValidation;
exports.startSubmit = startSubmit;
exports.stopAsyncValidation = stopAsyncValidation;
exports.stopSubmit = stopSubmit;
exports.touch = touch;

@@ -140,49 +155,33 @@ exports.touchAll = touchAll;

function blur(form, field, value) {
return {
type: _actionTypes.BLUR,
form: form,
field: field,
value: value
};
return { type: _actionTypes.BLUR, form: form, field: field, value: value };
}
function change(form, field, value) {
return {
type: _actionTypes.CHANGE,
form: form,
field: field,
value: value
};
return { type: _actionTypes.CHANGE, form: form, field: field, value: value };
}
function initialize(form, data) {
return {
type: _actionTypes.INITIALIZE,
form: form,
data: data
};
return { type: _actionTypes.INITIALIZE, form: form, data: data };
}
function reset(form) {
return {
type: _actionTypes.RESET,
form: form
};
return { type: _actionTypes.RESET, form: form };
}
function startAsyncValidation(form) {
return {
type: _actionTypes.START_ASYNC_VALIDATION,
form: form
};
return { type: _actionTypes.START_ASYNC_VALIDATION, form: form };
}
function startSubmit(form) {
return { type: _actionTypes.START_SUBMIT, form: form };
}
function stopAsyncValidation(form, errors) {
return {
type: _actionTypes.STOP_ASYNC_VALIDATION,
form: form,
errors: errors
};
return { type: _actionTypes.STOP_ASYNC_VALIDATION, form: form, errors: errors };
}
function stopSubmit(form) {
return { type: _actionTypes.STOP_SUBMIT, form: form };
}
function touch(form) {

@@ -193,14 +192,7 @@ for (var _len = arguments.length, fields = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

return {
type: _actionTypes.TOUCH,
form: form,
fields: fields
};
return { type: _actionTypes.TOUCH, form: form, fields: fields };
}
function touchAll(form) {
return {
type: _actionTypes.TOUCH_ALL,
form: form
};
return { type: _actionTypes.TOUCH_ALL, form: form };
}

@@ -213,14 +205,7 @@

return {
type: _actionTypes.UNTOUCH,
form: form,
fields: fields
};
return { type: _actionTypes.UNTOUCH, form: form, fields: fields };
}
function untouchAll(form) {
return {
type: _actionTypes.UNTOUCH_ALL,
form: form
};
return { type: _actionTypes.UNTOUCH_ALL, form: form };
}

@@ -230,2 +215,30 @@

/* 3 */
/***/ function(module, exports) {
/**
* Adds a 'key' property to the results of the function or map of functions passed
*/
'use strict';
exports.__esModule = true;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports['default'] = bindSliceKey;
function bindSliceKey(action, key) {
return typeof action === 'function' ? function () {
return _extends({}, action.apply(undefined, arguments), {
key: key
});
} : Object.keys(action).reduce(function (accumulator, i) {
accumulator[i] = bindSliceKey(action[i], key);
return accumulator;
}, {});
}
module.exports = exports['default'];
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

@@ -245,2 +258,12 @@

var initialState = {
initial: {},
data: {},
touched: {},
asyncValidating: false,
asyncErrors: { valid: true },
submitting: false
};
exports.initialState = initialState;
/**

@@ -280,5 +303,3 @@ * Creates a state structure like:

return function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? { initial: {}, data: {}, touched: {}, asyncValidating: false, asyncErrors: { valid: true } } : arguments[0];
var reducer = function reducer(s) {
var _extends2, _extends4;

@@ -288,5 +309,3 @@

if (action.form !== name) {
return state;
}
var state = s || initialState;
switch (action.type) {

@@ -343,2 +362,6 @@ case _actionTypes.BLUR:

});
case _actionTypes.START_SUBMIT:
return _extends({}, state, {
submitting: true
});
case _actionTypes.STOP_ASYNC_VALIDATION:

@@ -349,2 +372,6 @@ return _extends({}, state, {

});
case _actionTypes.STOP_SUBMIT:
return _extends({}, state, {
submitting: false
});
case _actionTypes.TOUCH:

@@ -388,8 +415,20 @@ var touchDiff = {};

};
return function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
if (action.form !== name) {
return state;
}
if (action.key) {
var _extends6;
return _extends({}, state, (_extends6 = {}, _extends6[action.key] = reducer(state ? state[action.key] : undefined, action), _extends6));
}
return reducer(state, action);
};
}
module.exports = exports['default'];
/***/ },
/* 4 */
/* 5 */
/***/ function(module, exports, __webpack_require__) {

@@ -407,2 +446,4 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -416,3 +457,3 @@

var _react = __webpack_require__(6);
var _react = __webpack_require__(7);

@@ -423,4 +464,12 @@ var _react2 = _interopRequireDefault(_react);

var _util = __webpack_require__(5);
var formActions = _interopRequireWildcard(_actions);
var _util = __webpack_require__(6);
var _bindSliceKey = __webpack_require__(3);
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _createFormReducer = __webpack_require__(4);
function createReduxFormDecorator(sliceName, syncValidate, asyncValidate, asyncBlurFields) {

@@ -452,10 +501,28 @@ function combineValidationErrors(form) {

var sliceName = _props.sliceName;
var sliceKey = _props.sliceKey;
var dispatch = _props.dispatch;
var passableProps = _objectWithoutProperties(_props, ['form', 'sliceName', 'dispatch']);
var passableProps = _objectWithoutProperties(_props, ['form', 'sliceName', 'sliceKey', 'dispatch']);
// eslint-disable-line no-shadow
var reslicedForm = (sliceKey && form ? form[sliceKey] : form) || _createFormReducer.initialState;
var _ref = sliceKey ? _bindSliceKey2['default'](formActions, sliceKey) : formActions;
var blur = _ref.blur;
var change = _ref.change;
var initialize = _ref.initialize;
var reset = _ref.reset;
var startAsyncValidation = _ref.startAsyncValidation;
var startSubmit = _ref.startSubmit;
var stopAsyncValidation = _ref.stopAsyncValidation;
var stopSubmit = _ref.stopSubmit;
var touch = _ref.touch;
var touchAll = _ref.touchAll;
var untouch = _ref.untouch;
var untouchAll = _ref.untouchAll;
var runAsyncValidation = asyncValidate ? function () {
dispatch(_actions.startAsyncValidation(sliceName));
var promise = asyncValidate(form.data);
dispatch(startAsyncValidation(sliceName, sliceKey));
var promise = asyncValidate(reslicedForm.data);
if (!promise || typeof promise.then !== 'function') {

@@ -465,3 +532,3 @@ throw new Error('asyncValidate function passed to reduxForm must return a promise!');

return promise.then(function (asyncErrors) {
dispatch(_actions.stopAsyncValidation(sliceName, asyncErrors));
dispatch(stopAsyncValidation(sliceName, asyncErrors, sliceKey));
return !!asyncErrors.valid;

@@ -473,7 +540,7 @@ });

var fieldValue = value || event.target.value;
dispatch(_actions.blur(sliceName, name, fieldValue));
dispatch(blur(sliceName, name, fieldValue, sliceKey));
if (runAsyncValidation && ~asyncBlurFields.indexOf(name)) {
var _extends2;
var syncError = syncValidate(_extends({}, form.data, (_extends2 = {}, _extends2[name] = fieldValue, _extends2)))[name];
var syncError = syncValidate(_extends({}, reslicedForm.data, (_extends2 = {}, _extends2[name] = fieldValue, _extends2)))[name];
// only dispatch async call if all synchronous client-side validation passes for this field

@@ -486,5 +553,5 @@ if (!syncError) {

};
var pristine = _util.isPristine(form.initial, form.data);
var pristine = _util.isPristine(reslicedForm.initial, reslicedForm.data);
var _combineValidationErrors = combineValidationErrors(form);
var _combineValidationErrors = combineValidationErrors(reslicedForm);

@@ -497,3 +564,3 @@ var valid = _combineValidationErrors.valid;

return function (event) {
return dispatch(_actions.change(sliceName, name, value || event.target.value));
return dispatch(change(sliceName, name, value || event.target.value, sliceKey));
};

@@ -507,11 +574,23 @@ };

}
dispatch(_actions.touchAll(sliceName));
var submitWithPromiseCheck = function submitWithPromiseCheck() {
var result = submit(reslicedForm.data);
if (result && typeof result.then === 'function') {
// you're showing real promise, kid!
var stopAndReturn = function stopAndReturn(x) {
dispatch(stopSubmit(sliceName));
return x;
};
dispatch(startSubmit(sliceName));
result.then(stopAndReturn, stopAndReturn);
}
};
dispatch(touchAll(sliceName, sliceKey));
if (runAsyncValidation) {
runAsyncValidation().then(function (asyncValid) {
return runAsyncValidation().then(function (asyncValid) {
if (valid && asyncValid) {
submit(form.data);
return submitWithPromiseCheck(reslicedForm.data);
}
});
} else if (valid) {
submit(form.data);
return submitWithPromiseCheck(reslicedForm.data);
}

@@ -532,4 +611,4 @@ };

asyncValidate: runAsyncValidation,
asyncValidating: form.asyncValidating,
data: form.data,
asyncValidating: reslicedForm.asyncValidating,
data: reslicedForm.data,
dirty: !pristine,

@@ -542,3 +621,3 @@ dispatch: dispatch,

initializeForm: function (data) {
return dispatch(_actions.initialize(sliceName, data));
return dispatch(initialize(sliceName, data, sliceKey));
},

@@ -548,4 +627,6 @@ invalid: !valid,

resetForm: function () {
return dispatch(_actions.reset(sliceName));
return dispatch(reset(sliceName, sliceKey));
},
sliceKey: sliceKey,
submitting: reslicedForm.submitting,
touch: function () {

@@ -556,7 +637,7 @@ for (var _len = arguments.length, touchFields = Array(_len), _key = 0; _key < _len; _key++) {

return dispatch(_actions.touch.apply(undefined, [sliceName].concat(touchFields)));
return dispatch(touch.apply(undefined, [sliceName].concat(touchFields, [sliceKey])));
},
touched: form.touched,
touched: reslicedForm.touched,
touchAll: function () {
return dispatch(_actions.touchAll(sliceName));
return dispatch(touchAll(sliceName, sliceKey));
},

@@ -568,6 +649,6 @@ untouch: function () {

return dispatch(_actions.untouch.apply(undefined, [sliceName].concat(untouchFields)));
return dispatch(untouch.apply(undefined, [sliceName].concat(untouchFields, [sliceKey])));
},
untouchAll: function () {
return dispatch(_actions.untouchAll(sliceName));
return dispatch(untouchAll(sliceName, sliceKey));
},

@@ -590,3 +671,4 @@ valid: valid

sliceName: _react.PropTypes.string,
form: _react.PropTypes.object.isRequired,
sliceKey: _react.PropTypes.string,
form: _react.PropTypes.object,
onSubmit: _react.PropTypes.func,

@@ -629,3 +711,3 @@ dispatch: _react.PropTypes.func.isRequired

/***/ },
/* 5 */
/* 6 */
/***/ function(module, exports) {

@@ -660,6 +742,6 @@

/***/ },
/* 6 */
/* 7 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;

@@ -666,0 +748,0 @@ /***/ }

2

dist/redux-form.min.js

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

!function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.ReduxForm=r(require("react")):t.ReduxForm=r(t.React)}(this,function(t){return function(t){function r(n){if(e[n])return e[n].exports;var a=e[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,r),a.loaded=!0,a.exports}var e={};return r.m=t,r.c=e,r.p="",r(0)}([function(t,r,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}r.__esModule=!0;var a=e(3),u=n(a),o=e(4),i=n(o),c=e(2);r.default=i.default,r.blur=c.blur,r.change=c.change,r.createFormReducer=u.default,r.initialize=c.initialize,r.reset=c.reset,r.startAsyncValidation=c.startAsyncValidation,r.stopAsyncValidation=c.stopAsyncValidation,r.touch=c.touch,r.touchAll=c.touchAll,r.untouch=c.untouch,r.untouchAll=c.untouchAll},function(t,r){"use strict";r.__esModule=!0;var e="redux-form/BLUR";r.BLUR=e;var n="redux-form/CHANGE";r.CHANGE=n;var a="redux-form/INITIALIZE";r.INITIALIZE=a;var u="redux-form/RESET";r.RESET=u;var o="redux-form/START_ASYNC_VALIDATION";r.START_ASYNC_VALIDATION=o;var i="redux-form/STOP_ASYNC_VALIDATION";r.STOP_ASYNC_VALIDATION=i;var c="redux-form/TOUCH";r.TOUCH=c;var s="redux-form/TOUCH_ALL";r.TOUCH_ALL=s;var l="redux-form/UNTOUCH";r.UNTOUCH=l;var f="redux-form/UNTOUCH_ALL";r.UNTOUCH_ALL=f},function(t,r,e){"use strict";function n(t,r,e){return{type:p.BLUR,form:t,field:r,value:e}}function a(t,r,e){return{type:p.CHANGE,form:t,field:r,value:e}}function u(t,r){return{type:p.INITIALIZE,form:t,data:r}}function o(t){return{type:p.RESET,form:t}}function i(t){return{type:p.START_ASYNC_VALIDATION,form:t}}function c(t,r){return{type:p.STOP_ASYNC_VALIDATION,form:t,errors:r}}function s(t){for(var r=arguments.length,e=Array(r>1?r-1:0),n=1;r>n;n++)e[n-1]=arguments[n];return{type:p.TOUCH,form:t,fields:e}}function l(t){return{type:p.TOUCH_ALL,form:t}}function f(t){for(var r=arguments.length,e=Array(r>1?r-1:0),n=1;r>n;n++)e[n-1]=arguments[n];return{type:p.UNTOUCH,form:t,fields:e}}function d(t){return{type:p.UNTOUCH_ALL,form:t}}r.__esModule=!0,r.blur=n,r.change=a,r.initialize=u,r.reset=o,r.startAsyncValidation=i,r.stopAsyncValidation=c,r.touch=s,r.touchAll=l,r.untouch=f,r.untouchAll=d;var p=e(1)},function(t,r,e){"use strict";function n(t,r){var e={};for(var n in t)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}function a(t,r){var e=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],a=e.touchOnBlur,i=void 0===a?!0:a,c=e.touchOnChange,s=void 0===c?!1:c;return function(){var e,a,c=arguments.length<=0||void 0===arguments[0]?{initial:{},data:{},touched:{},asyncValidating:!1,asyncErrors:{valid:!0}}:arguments[0],l=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];if(l.form!==t)return c;switch(l.type){case o.BLUR:var f={data:u({},c.data,(e={},e[l.field]=l.value,e))};if(i){var d;f.touched=u({},c.touched,(d={},d[l.field]=!0,d))}return u({},c,f);case o.CHANGE:var p=c.asyncErrors,m=(p[l.field],p.valid,n(p,[l.field,"valid"])),h={data:u({},c.data,(a={},a[l.field]=l.value,a)),asyncErrors:u({},m,{valid:!Object.keys(m).length})};if(delete h.asyncErrors[l.field],s){var v;h.touched=u({},c.touched,(v={},v[l.field]=!0,v))}return u({},c,h);case o.INITIALIZE:return{initial:l.data,data:l.data,asyncValidating:!1,asyncErrors:{},touched:{}};case o.RESET:return{initial:c.initial,data:c.initial,touched:{},asyncValidating:!1,asyncErrors:{}};case o.START_ASYNC_VALIDATION:return u({},c,{asyncValidating:!0});case o.STOP_ASYNC_VALIDATION:return u({},c,{asyncValidating:!1,asyncErrors:l.errors});case o.TOUCH:var y={};return l.fields.forEach(function(t){if("string"!=typeof t)throw new Error("fields passed to touch() must be strings");y[t]=!0}),u({},c,{touched:u({},c.touched,y)});case o.TOUCH_ALL:var A={};return r.forEach(function(t){return A[t]=!0}),u({},c,{touched:A});case o.UNTOUCH:var g={};return l.fields.forEach(function(t){if("string"!=typeof t)throw new Error("fields passed to untouch() must be strings");g[t]=!1}),u({},c,{touched:u({},c.touched,g)});case o.UNTOUCH_ALL:return u({},c,{touched:{}});default:return c}}}r.__esModule=!0;var u=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t};r.default=a;var o=e(1);t.exports=r.default},function(t,r,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function a(t,r){var e={};for(var n in t)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}function u(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}function o(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);t.prototype=Object.create(r&&r.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(t,r):t.__proto__=r)}function i(t,r,e,n){function i(t){var e=r(t.data),n=l({valid:!0},t.asyncErrors),a=!(!e.valid||!n.valid);return l({},e,n,{valid:a})}return function(c){return function(h){function v(){u(this,v),h.apply(this,arguments)}return o(v,h),v.prototype.render=function(){var t=this,u=this.props,o=u.form,s=u.sliceName,f=u.dispatch,h=a(u,["form","sliceName","dispatch"]),v=e?function(){f(p.startAsyncValidation(s));var t=e(o.data);if(!t||"function"!=typeof t.then)throw new Error("asyncValidate function passed to reduxForm must return a promise!");return t.then(function(t){return f(p.stopAsyncValidation(s,t)),!!t.valid})}:void 0,y=function(t,e){return function(a){var u=e||a.target.value;if(f(p.blur(s,t,u)),v&&~n.indexOf(t)){var i,c=r(l({},o.data,(i={},i[t]=u,i)))[t];c||v()}}},A=m.isPristine(o.initial,o.data),g=i(o),O=g.valid,T=a(g,["valid"]),_=function(t,r){return function(e){return f(p.change(s,t,r||e.target.value))}},b=function(r){var e=function(t){return function(r){r&&r.preventDefault(),f(p.touchAll(s)),v?v().then(function(r){O&&r&&t(o.data)}):O&&t(o.data)}};if("function"==typeof r)return e(r);var n=t.props.onSubmit;if(!n)throw new Error("You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop");e(n)(r)};return d.default.createElement(c,l({asyncValidate:v,asyncValidating:o.asyncValidating,data:o.data,dirty:!A,dispatch:f,errors:T,handleBlur:y,handleChange:_,handleSubmit:b,initializeForm:function(t){return f(p.initialize(s,t))},invalid:!O,pristine:A,resetForm:function(){return f(p.reset(s))},touch:function(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return f(p.touch.apply(void 0,[s].concat(r)))},touched:o.touched,touchAll:function(){return f(p.touchAll(s))},untouch:function(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return f(p.untouch.apply(void 0,[s].concat(r)))},untouchAll:function(){return f(p.untouchAll(s))},valid:O},h))},s(v,null,[{key:"displayName",value:"ReduxForm("+m.getDisplayName(c)+")",enumerable:!0},{key:"DecoratedComponent",value:c,enumerable:!0},{key:"propTypes",value:{sliceName:f.PropTypes.string,form:f.PropTypes.object.isRequired,onSubmit:f.PropTypes.func,dispatch:f.PropTypes.func.isRequired},enumerable:!0},{key:"defaultProps",value:{sliceName:t},enumerable:!0}]),v}(f.Component)}}function c(t){var r=arguments.length<=1||void 0===arguments[1]?function(){return{valid:!0}}:arguments[1],e=i(t,r);return e.async=function(e){for(var n=arguments.length,a=Array(n>1?n-1:0),u=1;n>u;u++)a[u-1]=arguments[u];var o=Array.isArray(a[0])?a[0]:a;return i(t,r,e,o)},e}r.__esModule=!0;var s=function(){function t(t,r){for(var e=0;e<r.length;e++){var n=r[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(r,e,n){return e&&t(r.prototype,e),n&&t(r,n),r}}(),l=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t};r.default=c;var f=e(6),d=n(f),p=e(2),m=e(5);t.exports=r.default},function(t,r){"use strict";function e(t){return t.displayName||t.name||"Component"}function n(t,r){if(t===r)return!0;for(var e=Object.keys(r),n=0;n<e.length;n++){var a=e[n],u=r[a],o=t[a];if((u||o)&&u!==o)return!1}return!0}r.__esModule=!0,r.getDisplayName=e,r.isPristine=n},function(r,e){r.exports=t}])});
!function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.ReduxForm=r(require("react")):t.ReduxForm=r(t.React)}(this,function(t){return function(t){function r(n){if(e[n])return e[n].exports;var a=e[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,r),a.loaded=!0,a.exports}var e={};return r.m=t,r.c=e,r.p="",r(0)}([function(t,r,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}r.__esModule=!0;var a=e(4),u=n(a),o=e(5),i=n(o),c=e(3),s=n(c),f=e(2),l=function(t,r,e){return s.default(f.initialize,r)(t,e)};r.default=i.default,r.blur=f.blur,r.change=f.change,r.createFormReducer=u.default,r.initialize=f.initialize,r.initializeWithKey=l,r.reset=f.reset,r.startAsyncValidation=f.startAsyncValidation,r.stopAsyncValidation=f.stopAsyncValidation,r.touch=f.touch,r.touchAll=f.touchAll,r.untouch=f.untouch,r.untouchAll=f.untouchAll},function(t,r){"use strict";r.__esModule=!0;var e="redux-form/BLUR";r.BLUR=e;var n="redux-form/CHANGE";r.CHANGE=n;var a="redux-form/INITIALIZE";r.INITIALIZE=a;var u="redux-form/RESET";r.RESET=u;var o="redux-form/START_ASYNC_VALIDATION";r.START_ASYNC_VALIDATION=o;var i="redux-form/START_SUBMIT";r.START_SUBMIT=i;var c="redux-form/STOP_ASYNC_VALIDATION";r.STOP_ASYNC_VALIDATION=c;var s="redux-form/STOP_SUBMIT";r.STOP_SUBMIT=s;var f="redux-form/TOUCH";r.TOUCH=f;var l="redux-form/TOUCH_ALL";r.TOUCH_ALL=l;var d="redux-form/UNTOUCH";r.UNTOUCH=d;var p="redux-form/UNTOUCH_ALL";r.UNTOUCH_ALL=p},function(t,r,e){"use strict";function n(t,r,e){return{type:y.BLUR,form:t,field:r,value:e}}function a(t,r,e){return{type:y.CHANGE,form:t,field:r,value:e}}function u(t,r){return{type:y.INITIALIZE,form:t,data:r}}function o(t){return{type:y.RESET,form:t}}function i(t){return{type:y.START_ASYNC_VALIDATION,form:t}}function c(t){return{type:y.START_SUBMIT,form:t}}function s(t,r){return{type:y.STOP_ASYNC_VALIDATION,form:t,errors:r}}function f(t){return{type:y.STOP_SUBMIT,form:t}}function l(t){for(var r=arguments.length,e=Array(r>1?r-1:0),n=1;r>n;n++)e[n-1]=arguments[n];return{type:y.TOUCH,form:t,fields:e}}function d(t){return{type:y.TOUCH_ALL,form:t}}function p(t){for(var r=arguments.length,e=Array(r>1?r-1:0),n=1;r>n;n++)e[n-1]=arguments[n];return{type:y.UNTOUCH,form:t,fields:e}}function m(t){return{type:y.UNTOUCH_ALL,form:t}}r.__esModule=!0,r.blur=n,r.change=a,r.initialize=u,r.reset=o,r.startAsyncValidation=i,r.startSubmit=c,r.stopAsyncValidation=s,r.stopSubmit=f,r.touch=l,r.touchAll=d,r.untouch=p,r.untouchAll=m;var y=e(1)},function(t,r){"use strict";function e(t,r){return"function"==typeof t?function(){return n({},t.apply(void 0,arguments),{key:r})}:Object.keys(t).reduce(function(n,a){return n[a]=e(t[a],r),n},{})}r.__esModule=!0;var n=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t};r.default=e,t.exports=r.default},function(t,r,e){"use strict";function n(t,r){var e={};for(var n in t)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}function a(t,r){var e=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],a=e.touchOnBlur,c=void 0===a?!0:a,s=e.touchOnChange,f=void 0===s?!1:s,l=function(t){var e,a,s=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],l=t||i;switch(s.type){case o.BLUR:var d={data:u({},l.data,(e={},e[s.field]=s.value,e))};if(c){var p;d.touched=u({},l.touched,(p={},p[s.field]=!0,p))}return u({},l,d);case o.CHANGE:var m=l.asyncErrors,y=(m[s.field],m.valid,n(m,[s.field,"valid"])),v={data:u({},l.data,(a={},a[s.field]=s.value,a)),asyncErrors:u({},y,{valid:!Object.keys(y).length})};if(delete v.asyncErrors[s.field],f){var h;v.touched=u({},l.touched,(h={},h[s.field]=!0,h))}return u({},l,v);case o.INITIALIZE:return{initial:s.data,data:s.data,asyncValidating:!1,asyncErrors:{},touched:{}};case o.RESET:return{initial:l.initial,data:l.initial,touched:{},asyncValidating:!1,asyncErrors:{}};case o.START_ASYNC_VALIDATION:return u({},l,{asyncValidating:!0});case o.START_SUBMIT:return u({},l,{submitting:!0});case o.STOP_ASYNC_VALIDATION:return u({},l,{asyncValidating:!1,asyncErrors:s.errors});case o.STOP_SUBMIT:return u({},l,{submitting:!1});case o.TOUCH:var g={};return s.fields.forEach(function(t){if("string"!=typeof t)throw new Error("fields passed to touch() must be strings");g[t]=!0}),u({},l,{touched:u({},l.touched,g)});case o.TOUCH_ALL:var A={};return r.forEach(function(t){return A[t]=!0}),u({},l,{touched:A});case o.UNTOUCH:var T={};return s.fields.forEach(function(t){if("string"!=typeof t)throw new Error("fields passed to untouch() must be strings");T[t]=!1}),u({},l,{touched:u({},l.touched,T)});case o.UNTOUCH_ALL:return u({},l,{touched:{}});default:return l}};return function(){var r=arguments.length<=0||void 0===arguments[0]?null:arguments[0],e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];if(e.form!==t)return r;if(e.key){var n;return u({},r,(n={},n[e.key]=l(r?r[e.key]:void 0,e),n))}return l(r,e)}}r.__esModule=!0;var u=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t};r.default=a;var o=e(1),i={initial:{},data:{},touched:{},asyncValidating:!1,asyncErrors:{valid:!0},submitting:!1};r.initialState=i},function(t,r,e){"use strict";function n(t){if(t&&t.__esModule)return t;var r={};if(null!=t)for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(r[e]=t[e]);return r.default=t,r}function a(t){return t&&t.__esModule?t:{"default":t}}function u(t,r){var e={};for(var n in t)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}function o(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}function i(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);t.prototype=Object.create(r&&r.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(t,r):t.__proto__=r)}function c(t,r,e,n){function a(t){var e=r(t.data),n=l({valid:!0},t.asyncErrors),a=!(!e.valid||!n.valid);return l({},e,n,{valid:a})}return function(c){return function(s){function m(){o(this,m),s.apply(this,arguments)}return i(m,s),m.prototype.render=function(){var t=this,o=this.props,i=o.form,s=o.sliceName,f=o.sliceKey,d=o.dispatch,m=u(o,["form","sliceName","sliceKey","dispatch"]),h=(f&&i?i[f]:i)||A.initialState,T=f?g.default(y,f):y,O=T.blur,_=T.change,b=T.initialize,S=T.reset,I=T.startAsyncValidation,N=T.startSubmit,U=T.stopAsyncValidation,C=T.stopSubmit,E=T.touch,x=T.touchAll,L=T.untouch,P=T.untouchAll,V=e?function(){d(I(s,f));var t=e(h.data);if(!t||"function"!=typeof t.then)throw new Error("asyncValidate function passed to reduxForm must return a promise!");return t.then(function(t){return d(U(s,t,f)),!!t.valid})}:void 0,R=function(t,e){return function(a){var u=e||a.target.value;if(d(O(s,t,u,f)),V&&~n.indexOf(t)){var o,i=r(l({},h.data,(o={},o[t]=u,o)))[t];i||V()}}},w=v.isPristine(h.initial,h.data),j=a(h),H=j.valid,M=u(j,["valid"]),B=function(t,r){return function(e){return d(_(s,t,r||e.target.value,f))}},k=function(r){var e=function(t){return function(r){r&&r.preventDefault();var e=function(){var r=t(h.data);if(r&&"function"==typeof r.then){var e=function(t){return d(C(s)),t};d(N(s)),r.then(e,e)}};return d(x(s,f)),V?V().then(function(t){return H&&t?e(h.data):void 0}):H?e(h.data):void 0}};if("function"==typeof r)return e(r);var n=t.props.onSubmit;if(!n)throw new Error("You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop");e(n)(r)};return p.default.createElement(c,l({asyncValidate:V,asyncValidating:h.asyncValidating,data:h.data,dirty:!w,dispatch:d,errors:M,handleBlur:R,handleChange:B,handleSubmit:k,initializeForm:function(t){return d(b(s,t,f))},invalid:!H,pristine:w,resetForm:function(){return d(S(s,f))},sliceKey:f,submitting:h.submitting,touch:function(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return d(E.apply(void 0,[s].concat(r,[f])))},touched:h.touched,touchAll:function(){return d(x(s,f))},untouch:function(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return d(L.apply(void 0,[s].concat(r,[f])))},untouchAll:function(){return d(P(s,f))},valid:H},m))},f(m,null,[{key:"displayName",value:"ReduxForm("+v.getDisplayName(c)+")",enumerable:!0},{key:"DecoratedComponent",value:c,enumerable:!0},{key:"propTypes",value:{sliceName:d.PropTypes.string,sliceKey:d.PropTypes.string,form:d.PropTypes.object,onSubmit:d.PropTypes.func,dispatch:d.PropTypes.func.isRequired},enumerable:!0},{key:"defaultProps",value:{sliceName:t},enumerable:!0}]),m}(d.Component)}}function s(t){var r=arguments.length<=1||void 0===arguments[1]?function(){return{valid:!0}}:arguments[1],e=c(t,r);return e.async=function(e){for(var n=arguments.length,a=Array(n>1?n-1:0),u=1;n>u;u++)a[u-1]=arguments[u];var o=Array.isArray(a[0])?a[0]:a;return c(t,r,e,o)},e}r.__esModule=!0;var f=function(){function t(t,r){for(var e=0;e<r.length;e++){var n=r[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(r,e,n){return e&&t(r.prototype,e),n&&t(r,n),r}}(),l=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t};r.default=s;var d=e(7),p=a(d),m=e(2),y=n(m),v=e(6),h=e(3),g=a(h),A=e(4);t.exports=r.default},function(t,r){"use strict";function e(t){return t.displayName||t.name||"Component"}function n(t,r){if(t===r)return!0;for(var e=Object.keys(r),n=0;n<e.length;n++){var a=e[n],u=r[a],o=t[a];if((u||o)&&u!==o)return!1}return!0}r.__esModule=!0,r.getDisplayName=e,r.isPristine=n},function(r,e){r.exports=t}])});

68

lib/actions.js

@@ -9,3 +9,5 @@ 'use strict';

exports.startAsyncValidation = startAsyncValidation;
exports.startSubmit = startSubmit;
exports.stopAsyncValidation = stopAsyncValidation;
exports.stopSubmit = stopSubmit;
exports.touch = touch;

@@ -19,49 +21,33 @@ exports.touchAll = touchAll;

function blur(form, field, value) {
return {
type: _actionTypes.BLUR,
form: form,
field: field,
value: value
};
return { type: _actionTypes.BLUR, form: form, field: field, value: value };
}
function change(form, field, value) {
return {
type: _actionTypes.CHANGE,
form: form,
field: field,
value: value
};
return { type: _actionTypes.CHANGE, form: form, field: field, value: value };
}
function initialize(form, data) {
return {
type: _actionTypes.INITIALIZE,
form: form,
data: data
};
return { type: _actionTypes.INITIALIZE, form: form, data: data };
}
function reset(form) {
return {
type: _actionTypes.RESET,
form: form
};
return { type: _actionTypes.RESET, form: form };
}
function startAsyncValidation(form) {
return {
type: _actionTypes.START_ASYNC_VALIDATION,
form: form
};
return { type: _actionTypes.START_ASYNC_VALIDATION, form: form };
}
function startSubmit(form) {
return { type: _actionTypes.START_SUBMIT, form: form };
}
function stopAsyncValidation(form, errors) {
return {
type: _actionTypes.STOP_ASYNC_VALIDATION,
form: form,
errors: errors
};
return { type: _actionTypes.STOP_ASYNC_VALIDATION, form: form, errors: errors };
}
function stopSubmit(form) {
return { type: _actionTypes.STOP_SUBMIT, form: form };
}
function touch(form) {

@@ -72,14 +58,7 @@ for (var _len = arguments.length, fields = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

return {
type: _actionTypes.TOUCH,
form: form,
fields: fields
};
return { type: _actionTypes.TOUCH, form: form, fields: fields };
}
function touchAll(form) {
return {
type: _actionTypes.TOUCH_ALL,
form: form
};
return { type: _actionTypes.TOUCH_ALL, form: form };
}

@@ -92,14 +71,7 @@

return {
type: _actionTypes.UNTOUCH,
form: form,
fields: fields
};
return { type: _actionTypes.UNTOUCH, form: form, fields: fields };
}
function untouchAll(form) {
return {
type: _actionTypes.UNTOUCH_ALL,
form: form
};
return { type: _actionTypes.UNTOUCH_ALL, form: form };
}

4

lib/actionTypes.js

@@ -14,4 +14,8 @@ 'use strict';

exports.START_ASYNC_VALIDATION = START_ASYNC_VALIDATION;
var START_SUBMIT = 'redux-form/START_SUBMIT';
exports.START_SUBMIT = START_SUBMIT;
var STOP_ASYNC_VALIDATION = 'redux-form/STOP_ASYNC_VALIDATION';
exports.STOP_ASYNC_VALIDATION = STOP_ASYNC_VALIDATION;
var STOP_SUBMIT = 'redux-form/STOP_SUBMIT';
exports.STOP_SUBMIT = STOP_SUBMIT;
var TOUCH = 'redux-form/TOUCH';

@@ -18,0 +22,0 @@ exports.TOUCH = TOUCH;

42

lib/createFormReducer.js

@@ -13,2 +13,12 @@ 'use strict';

var initialState = {
initial: {},
data: {},
touched: {},
asyncValidating: false,
asyncErrors: { valid: true },
submitting: false
};
exports.initialState = initialState;
/**

@@ -48,5 +58,3 @@ * Creates a state structure like:

return function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? { initial: {}, data: {}, touched: {}, asyncValidating: false, asyncErrors: { valid: true } } : arguments[0];
var reducer = function reducer(s) {
var _extends2, _extends4;

@@ -56,5 +64,3 @@

if (action.form !== name) {
return state;
}
var state = s || initialState;
switch (action.type) {

@@ -111,2 +117,6 @@ case _actionTypes.BLUR:

});
case _actionTypes.START_SUBMIT:
return _extends({}, state, {
submitting: true
});
case _actionTypes.STOP_ASYNC_VALIDATION:

@@ -117,2 +127,6 @@ return _extends({}, state, {

});
case _actionTypes.STOP_SUBMIT:
return _extends({}, state, {
submitting: false
});
case _actionTypes.TOUCH:

@@ -156,4 +170,16 @@ var touchDiff = {};

};
}
return function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
module.exports = exports['default'];
if (action.form !== name) {
return state;
}
if (action.key) {
var _extends6;
return _extends({}, state, (_extends6 = {}, _extends6[action.key] = reducer(state ? state[action.key] : undefined, action), _extends6));
}
return reducer(state, action);
};
}

9

lib/index.js

@@ -15,4 +15,12 @@ 'use strict';

var _bindSliceKey = require('./bindSliceKey');
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _actions = require('./actions');
var initializeWithKey = function initializeWithKey(form, key, data) {
return _bindSliceKey2['default'](_actions.initialize, key)(form, data);
};
exports['default'] = _reduxForm2['default'];

@@ -23,2 +31,3 @@ exports.blur = _actions.blur;

exports.initialize = _actions.initialize;
exports.initializeWithKey = initializeWithKey;
exports.reset = _actions.reset;

@@ -25,0 +34,0 @@ exports.startAsyncValidation = _actions.startAsyncValidation;

89

lib/reduxForm.js

@@ -11,2 +11,4 @@ 'use strict';

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -26,4 +28,12 @@

var formActions = _interopRequireWildcard(_actions);
var _util = require('./util');
var _bindSliceKey = require('./bindSliceKey');
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _createFormReducer = require('./createFormReducer');
function createReduxFormDecorator(sliceName, syncValidate, asyncValidate, asyncBlurFields) {

@@ -55,10 +65,28 @@ function combineValidationErrors(form) {

var sliceName = _props.sliceName;
var sliceKey = _props.sliceKey;
var dispatch = _props.dispatch;
var passableProps = _objectWithoutProperties(_props, ['form', 'sliceName', 'dispatch']);
var passableProps = _objectWithoutProperties(_props, ['form', 'sliceName', 'sliceKey', 'dispatch']);
// eslint-disable-line no-shadow
var reslicedForm = (sliceKey && form ? form[sliceKey] : form) || _createFormReducer.initialState;
var _ref = sliceKey ? _bindSliceKey2['default'](formActions, sliceKey) : formActions;
var blur = _ref.blur;
var change = _ref.change;
var initialize = _ref.initialize;
var reset = _ref.reset;
var startAsyncValidation = _ref.startAsyncValidation;
var startSubmit = _ref.startSubmit;
var stopAsyncValidation = _ref.stopAsyncValidation;
var stopSubmit = _ref.stopSubmit;
var touch = _ref.touch;
var touchAll = _ref.touchAll;
var untouch = _ref.untouch;
var untouchAll = _ref.untouchAll;
var runAsyncValidation = asyncValidate ? function () {
dispatch(_actions.startAsyncValidation(sliceName));
var promise = asyncValidate(form.data);
dispatch(startAsyncValidation(sliceName, sliceKey));
var promise = asyncValidate(reslicedForm.data);
if (!promise || typeof promise.then !== 'function') {

@@ -68,3 +96,3 @@ throw new Error('asyncValidate function passed to reduxForm must return a promise!');

return promise.then(function (asyncErrors) {
dispatch(_actions.stopAsyncValidation(sliceName, asyncErrors));
dispatch(stopAsyncValidation(sliceName, asyncErrors, sliceKey));
return !!asyncErrors.valid;

@@ -76,7 +104,7 @@ });

var fieldValue = value || event.target.value;
dispatch(_actions.blur(sliceName, name, fieldValue));
dispatch(blur(sliceName, name, fieldValue, sliceKey));
if (runAsyncValidation && ~asyncBlurFields.indexOf(name)) {
var _extends2;
var syncError = syncValidate(_extends({}, form.data, (_extends2 = {}, _extends2[name] = fieldValue, _extends2)))[name];
var syncError = syncValidate(_extends({}, reslicedForm.data, (_extends2 = {}, _extends2[name] = fieldValue, _extends2)))[name];
// only dispatch async call if all synchronous client-side validation passes for this field

@@ -89,5 +117,5 @@ if (!syncError) {

};
var pristine = _util.isPristine(form.initial, form.data);
var pristine = _util.isPristine(reslicedForm.initial, reslicedForm.data);
var _combineValidationErrors = combineValidationErrors(form);
var _combineValidationErrors = combineValidationErrors(reslicedForm);

@@ -100,3 +128,3 @@ var valid = _combineValidationErrors.valid;

return function (event) {
return dispatch(_actions.change(sliceName, name, value || event.target.value));
return dispatch(change(sliceName, name, value || event.target.value, sliceKey));
};

@@ -110,11 +138,23 @@ };

}
dispatch(_actions.touchAll(sliceName));
var submitWithPromiseCheck = function submitWithPromiseCheck() {
var result = submit(reslicedForm.data);
if (result && typeof result.then === 'function') {
// you're showing real promise, kid!
var stopAndReturn = function stopAndReturn(x) {
dispatch(stopSubmit(sliceName));
return x;
};
dispatch(startSubmit(sliceName));
result.then(stopAndReturn, stopAndReturn);
}
};
dispatch(touchAll(sliceName, sliceKey));
if (runAsyncValidation) {
runAsyncValidation().then(function (asyncValid) {
return runAsyncValidation().then(function (asyncValid) {
if (valid && asyncValid) {
submit(form.data);
return submitWithPromiseCheck(reslicedForm.data);
}
});
} else if (valid) {
submit(form.data);
return submitWithPromiseCheck(reslicedForm.data);
}

@@ -135,4 +175,4 @@ };

asyncValidate: runAsyncValidation,
asyncValidating: form.asyncValidating,
data: form.data,
asyncValidating: reslicedForm.asyncValidating,
data: reslicedForm.data,
dirty: !pristine,

@@ -145,3 +185,3 @@ dispatch: dispatch,

initializeForm: function (data) {
return dispatch(_actions.initialize(sliceName, data));
return dispatch(initialize(sliceName, data, sliceKey));
},

@@ -151,4 +191,6 @@ invalid: !valid,

resetForm: function () {
return dispatch(_actions.reset(sliceName));
return dispatch(reset(sliceName, sliceKey));
},
sliceKey: sliceKey,
submitting: reslicedForm.submitting,
touch: function () {

@@ -159,7 +201,7 @@ for (var _len = arguments.length, touchFields = Array(_len), _key = 0; _key < _len; _key++) {

return dispatch(_actions.touch.apply(undefined, [sliceName].concat(touchFields)));
return dispatch(touch.apply(undefined, [sliceName].concat(touchFields, [sliceKey])));
},
touched: form.touched,
touched: reslicedForm.touched,
touchAll: function () {
return dispatch(_actions.touchAll(sliceName));
return dispatch(touchAll(sliceName, sliceKey));
},

@@ -171,6 +213,6 @@ untouch: function () {

return dispatch(_actions.untouch.apply(undefined, [sliceName].concat(untouchFields)));
return dispatch(untouch.apply(undefined, [sliceName].concat(untouchFields, [sliceKey])));
},
untouchAll: function () {
return dispatch(_actions.untouchAll(sliceName));
return dispatch(untouchAll(sliceName, sliceKey));
},

@@ -193,3 +235,4 @@ valid: valid

sliceName: _react.PropTypes.string,
form: _react.PropTypes.object.isRequired,
sliceKey: _react.PropTypes.string,
form: _react.PropTypes.object,
onSubmit: _react.PropTypes.func,

@@ -196,0 +239,0 @@ dispatch: _react.PropTypes.func.isRequired

2

package.json
{
"name": "redux-form",
"version": "0.2.3",
"version": "0.2.4",
"description": "A higher order component generator for forms using Redux and React",

@@ -5,0 +5,0 @@ "main": "./lib/index.js",

429

README.md

@@ -9,4 +9,32 @@ #redux-form

`redux-form` works with [React Redux](https://github.com/gaearon/react-redux) to enable an html form in [React](https://github.com/facebook/react) to use [Redux](https://github.com/gaearon/redux) to store all of its state.
`redux-form` works with [React Redux](https://github.com/gaearon/react-redux) to enable an html form in
[React](https://github.com/facebook/react) to use [Redux](https://github.com/gaearon/redux) to store all of its state.
## Table of Contents
* [Installation](#installation)
* [Release Notes](https://github.com/erikras/redux-form/releases)
* [Benefits](#benefits) - Why use this library?
* [Unidirectional Data Flow](#unidirectonal-data-flow)
* [Redux Dev Tools](#redux-dev-tools)
* [Stateless Components](#stateless-components)
* [Implementation Guide](#implementation-guide) <-------------- **Start here!**
* [A Simple Form Component](#a-simple-form-component)
* [ES7 Decorator Sugar](#es7-decorator-sugar) - :warning: Experimental! :warning:
* [Binding Action Creators](#binding-action-creators)
* [Synchronous Validation](#synchronous-validation) - Client Side
* [Asynchronous Validation](#asynchronous-validation) - Server Side
* [Submitting Your Form](#submitting-your-form)
* [Responding to Other Actions](#responding-to-other-actions)
* [Editing Multiple Records](#editing-multiple-records)
* [API](#api)
* [`createFormReducer(sliceName, fields, config?)`](#createformreducerslicenamestring-fieldsarraystring-configobject)
* [`reduxForm(sliceName, validate?)`](#reduxformslicenamestring-validatefunction)
* [`reduxForm().async(asyncValidate, ...fields?)`](#reduxformasyncasyncvalidatefunction-fieldsstring)
* [`props`](#props) - The props passed in to your form component by `redux-form`
* [Action Creators](#action-creators) - Advanced
* [Working Demo](#working-demo)
---
## Installation

@@ -18,19 +46,28 @@

## Release Notes
This project follows [SemVer](http://semver.org) and each release is posted on the
[Release Notes](https://github.com/erikras/redux-form/releases) page.
## Benefits
Why would anyone want to do this, you ask? React a perfectly good way of keeping state in each component! The reasons are threefold.
Why would anyone want to do this, you ask? React a perfectly good way of keeping state in each component! The
reasons are threefold.
#### Unidirectional Data Flow
For the same reason that React and Flux is superior to Angular's bidirectional data binding. Tracking down bugs is much simpler when the data all flows through one dispatcher.
For the same reason that React and Flux is superior to Angular's bidirectional data binding. Tracking down bugs
is much simpler when the data all flows through one dispatcher.
#### Redux Dev Tools
When used in conjunction with [Redux Dev Tools](https://github.com/gaearon/redux-devtools), you can fast forward and rewind through your form data entry to better find bugs.
When used in conjunction with [Redux Dev Tools](https://github.com/gaearon/redux-devtools), you can fast forward
and rewind through your form data entry to better find bugs.
#### Stateless Components
By removing the state from your form components, you inherently make them easier to understand, test, and debug. The React philosophy is to always try to use `props` instead of `state` when possible.
By removing the state from your form components, you inherently make them easier to understand, test, and debug.
The React philosophy is to always try to use `props` instead of `state` when possible.
## How it works
## Implementation Guide

@@ -50,7 +87,11 @@ When you are adding your reducers to your redux store, add a new one with `createFormReducer(])`.

`reduxForm()` creates a Higher Order Component that expects a `dispatch` prop and a slice of the Redux store where its data is stored as a `form` prop. These should be provided by [React Redux](https://github.com/gaearon/react-redux)'s `connect()` function.
`reduxForm()` creates a Higher Order Component that expects a `dispatch` prop and a slice of the Redux store where
its data is stored as a `form` prop. These should be provided by
[React Redux](https://github.com/gaearon/react-redux)'s `connect()` function.
Let's look at an example:
### A Simple Form Component
Then, on your form component, add the `@reduxForm('contactForm')` decorator.
You will need to wrap your form component *both* with
[React Redux](https://github.com/gaearon/react-redux)'s `connect()` function *and* with `redux-form`'s
`reduxForm()` function.

@@ -64,21 +105,8 @@ ```javascript

class ContactForm extends Component {
// you don't need all to define all these props,
// only the ones you intend to use
static propTypes = {
data: PropTypes.object.isRequired,
dirty: PropTypes.bool.isRequired,
errors: PropTypes.object.isRequired,
handleBlur: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired,
initializeForm: PropTypes.func.isRequired,
invalid: PropTypes.bool.isRequired,
pristine: PropTypes.bool.isRequired,
resetForm: PropTypes.func.isRequired,
touch: PropTypes.func.isRequired,
touched: PropTypes.object.isRequired,
touchAll: PropTypes.func.isRequired,
untouch: PropTypes.func.isRequired,
untouchAll: PropTypes.func.isRequired,
valid: PropTypes.bool.isRequired
handleSubmit: PropTypes.func.isRequired
}

@@ -89,7 +117,3 @@

data: {name, address, phone},
errors: {name: nameError, address: addressError, phone: phoneError},
touched: {name: nameTouched, address: addressTouched, phone: phoneTouched},
handleBlur,
handleChange,
handleSubmit
errors, touched, handleBlur, handleChange, handleSubmit
} = this.props;

@@ -103,3 +127,3 @@ return (

onBlur={handleBlur('name')}/>
{nameError && nameTouched ? <div>{nameError}</div>}
{errors.name && touched.name ? <div>{errors.name}</div>}

@@ -111,3 +135,3 @@ <label>Address</label>

onBlur={handleBlur('address')}/>
{addressError && addressTouched ? <div>{addressError}</div>}
{errors.address && touched.address ? <div>{errors.address}</div>}

@@ -119,3 +143,3 @@ <label>Phone</label>

onBlur={handleBlur('phone')}/>
{phoneError && phoneTouched ? <div>{phoneError}</div>}
{errors.phone && touched.phone ? <div>{errors.phone}</div>}

@@ -142,55 +166,53 @@ <button onClick={handleSubmit}>Submit</button>

Notice that we're just using vanilla `<input>` elements there is no state in the `ContactForm` component. I have left handling `onSubmit` as an exercise for the reader. Hint: your data is in `this.props.data`.
Notice that we're just using vanilla `<input>` elements there is no state in the `ContactForm` component.
`handleSubmit` will call the function passed into `ContactForm`'s `onSubmit` prop.
#### Binding Action Creators
### ES7 Decorator Sugar
If your form component also needs other redux action creators - _and it probably does since you need to submit somehow_ - you cannot simply use the default `bindActionCreators()` from `redux`, because that will remove `dispatch` from the props the `connect()` passes along, and `reduxForm` needs `dispatch`. You will need to also include `dispatch` in your `mapDispatchToProps()` function. Like so:
Using [ES7 decorator proposal](https://github.com/wycats/javascript-decorators), the example above
could be written as:
```javascript
@connect(state => ({ form: state.contactForm }))
@reduxForm('contactForm', contactValidation)
export default class ContactForm extends Component {
```
Much nicer, don't you think?
You can enable it with [Babel Stage 1](http://babeljs.io/docs/usage/experimental/). Note that decorators
are experimental, and this syntax might change or be removed later.
### Binding Action Creators
If your form component also needs other redux action creators - _and it probably does since you need to submit
somehow_ - you cannot simply use the default `bindActionCreators()` from `redux`, because that will remove
`dispatch` from the props the `connect()` passes along, and `reduxForm` needs `dispatch`. You will need to also
include `dispatch` in your `mapDispatchToProps()` function. So change this...
```javascript
import {bindActionCreators} from `redux`;
...
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
ContactForm = connect(mapStateToProps, mapDispatchToProps)(ContactForm);
```
to:
...to...
```javascript
import {bindActionCreators} from `redux`;
...
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators(actionCreators, dispatch),
dispatch
dispatch // <----- passing dispatch, too
};
}
ContactForm = connect(mapStateToProps, mapDispatchToProps)(ContactForm);
```
### ES7 Decorator Sugar
### Synchronous Validation
Using [ES7 decorator proposal](https://github.com/wycats/javascript-decorators), the example above
could be written as:
```javascript
@connect(state => ({ form: state.contactForm }))
@reduxForm('contactForm', contactValidation)
export default class ContactForm extends Component {
```
Much nicer, don't you think?
You can enable it with [Babel Stage 1](http://babeljs.io/docs/usage/experimental/).
Note that decorators are experimental, and this syntax might change or be removed later.
## Synchronous Validation
You may optionally supply a validation function, which is in the form `({}) => {}` and takes in all

@@ -253,2 +275,3 @@ your data and spits out error messages as well as a `valid` flag. For example:

validation function. Like so:
```javascript

@@ -267,2 +290,155 @@ ContactForm = reduxForm('contactForm', contactValidation)

### Submitting Your Form
The recommended way to submit your form is to create your form component as [shown above](#how-it-works),
using the `handleSubmit` prop, and then pass an `onSubmit` prop to your form component.
```javascript
import React, {Component, PropTypes} from 'redux-form';
import {connect} from 'redux';
import {initialize} from 'redux-form';
class ContactPage extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired
}
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contactForm', {})); // clear form
}
render() {
return (
<div>
<h1>Contact Information</h1>
<ContactForm onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
export default connect()(ContactPage); // adds dispatch prop
```
Or, if you wish to do your submission directly from your decorated form component, you may pass a function
to `handleSubmit`. To abbreviate the example [shown above](#how-it-works):
```javascript
class ContactForm extends Component {
static propTypes = {
// ...
handleSubmit: PropTypes.func.isRequired
}
saveForm(data) {
// make server call to save the data
}
render() {
const {
// ...
handleSubmit
} = this.props;
return (
<form onSubmit={handleSubmit(this.saveForm)}> // <--- pass saveForm
// ...
</form>
);
}
}
```
### Responding to Other Actions
Part of the beauty of the flux architecture is that all the reducers (or "stores", in canonical Flux terminology)
receive all the actions, and they can modify their data based on any of them. For example, say you have a login form,
and when your login submission fails, you want to clear out the password field. Your login submission is part of
another reducer/actions system, but your form can still respond.
Rather than just using the vanilla reducer function generated by `createFormReducer()`, you can augment it to do
other things.
```javascript
import {createFormReducer} from 'redux-form';
import {AUTH_LOGIN_FAIL} from '../actions/actionTypes';
const loginFormReducer = createFormReducer('loginForm', ['email', 'password']);
export default function loginForm(state, action = {}) {
switch (action.type) {
case AUTH_LOGIN_FAIL:
return {
...state,
data: {
...state.data,
password: ''
}
};
default:
return loginFormReducer(state, action);
}
}
```
### Editing Multiple Records
Editing multiple records on the same page is trivially easy with `redux-form`. All you have to do is to pass a
unique `sliceKey` prop into your form element, and initialize the data with `initializeWithKey()`
instead of `initialize()`. Let's say we want to edit many contacts on the same page.
```
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {initializeWithKey} from 'redux-form';
import {bindActionCreators} from 'redux';
import ContactForm from './ContactForm';
class ContactsPage extends Component {
static propTypes = {
contacts: PropTypes.array.isRequired,
initializeWithKey: PropTypes.func.isRequired
}
componentWillMount() {
const {contacts, initializeWithKey} = this.props;
contacts.forEach(function (contact) {
initializeWithKey('contactForm', String(contact.id), contact);
});
}
handleSubmit(id, data) {
// send to server
}
render() {
const {contacts} = this.props;
return (
<div>
{contacts.map(function (contact) {
return <ContactForm
key={contact.id} // required by react
sliceKey={String(contact.id)} // required by redux-form
onSubmit={this.handleSubmit.bind(this, contact.id)}/>
})}
</div>
);
}
}
function mapStateToProps(state) {
return { contacts: state.contacts.data };
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ initializeWithKey }, dispatch),
}
// apply connect() to bind it to Redux state
ContactsPage = connect(mapStateToProps, mapDispatchToProps)(ContactsPage);
// export the wrapped component
export default ContactPage;
```
## API

@@ -360,3 +536,4 @@

> Initializes the form data to the given values. All `dirty` and `pristine` state will be determined by comparing the current data with these initialized values.
> Initializes the form data to the given values. All `dirty` and `pristine` state will be determined by
comparing the current data with these initialized values.

@@ -375,2 +552,11 @@ ##### -`invalid : boolean`

##### -`sliceKey : String`
> The same `sliceKey` prop that was passed in. See [Editing Multiple Records](#editing-multiple-records).
##### -`submitting : boolean`
> Whether or not your form is currently submitting. This prop will only work if you have passed an
`onSubmit` function that returns a promise. It will be true until the promise is resolved or rejected.
##### -`touch(...field:string) : Function`

@@ -400,95 +586,60 @@

## Submitting your form
### Action Creators
The recommended way to submit your form is to create your form component as [shown above](#how-it-works),
using the `handleSubmit` prop, and then pass an `onSubmit` prop to your form component.
`redux-form` exports all of its internal action creators, allowing you complete control to dispatch any action
you wish. However, **it is *highly* recommended that you use the actions passed as props to your component
for most of your needs.**
```javascript
import React, {Component, PropTypes} from 'redux-form';
import {connect} from 'redux';
import {initialize} from 'redux-form';
##### -`blur(form:String, field:String, value:String)`
class ContactPage extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired
}
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contactForm', {})); // clear form
}
render() {
return (
<div>
<h1>Contact Information</h1>
<ContactForm onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
> Saves the value and, if you have `touchOnBlur` enabled, marks the field as `touched`.
export default connect()(ContactPage); // adds dispatch prop
```
##### -`change(form:String, field:String, value:String)`
Or, if you wish to do your submission directly from your decorated form component, you may pass a function
to `handleSubmit`. To abbreviate the example [shown above](#how-it-works):
> Saves the value and, if you have `touchOnChange` enabled, marks the field as `touched`.
```javascript
class ContactForm extends Component {
static propTypes = {
// ...
handleSubmit: PropTypes.func.isRequired
}
saveForm(data) {
// make server call to save the data
}
render() {
const {
// ...
handleSubmit
} = this.props;
return (
<form onSubmit={handleSubmit(this.saveForm)}> // <--- pass saveForm
// ...
</form>
);
}
}
```
##### -`initialize(form:String, data:Object)`
## Responding to other actions
> Sets the initial values in the form with which future data values will be compared to calculate
`dirty` and `pristine`. The `data` parameter should only contain `String` values.
Part of the beauty of the flux architecture is that all the reducers (or "stores", in canonical Flux terminology) receive all the actions, and they can modify their data based on any of them. For example, say you have a login form, and when your login submission fails, you want to clear out the password field. Your login submission is part of another reducer/actions system, but your form can still respond.
##### -`initializeWithKey(form:String, sliceKey, data:Object)`
Rather than just using the vanilla reducer function generated by `createFormReducer()`, you can augment it to do other things.
> Used when editing multiple records with the same form component. See
[Editing Multiple Records](#editing-multiple-records).
```javascript
import {createFormReducer} from 'redux-form';
import {AUTH_LOGIN_FAIL} from '../actions/actionTypes';
const loginFormReducer = createFormReducer('loginForm', ['email', 'password']);
##### -`reset(form:String)`
export default function loginForm(state, action = {}) {
switch (action.type) {
case AUTH_LOGIN_FAIL:
return {
...state,
data: {
...state.data,
password: ''
}
};
default:
return loginFormReducer(state, action);
}
}
```
> Resets the values in the form back to the values past in with the most recent `initialize` action.
## Running Example
##### -`startAsyncValidation(form:String)`
Check out the [react-redux-universal-hot-example project](https://github.com/erikras/react-redux-universal-hot-example) to see `redux-form` in action.
> Flips the `asyncValidating` flag `true`.
##### -`stopAsyncValidation(form:String, errors:Object)`
> Flips the `asyncValidating` flag `false` and populates `asyncErrors`.
##### -`touch(form:String, ...fields:String)`
> Marks all the fields passed in as `touched`.
##### -`touchAll(form:String)`
> Marks all the fields in the form as `touched`.
##### -`untouch(form:String, ...fields:String)`
> Resets the 'touched' flag for all the fields passed in.
##### -`untouchAll(form:String)`
> Resets the 'touched' flag for all the fields in the form.
## Working Demo
Check out the
[react-redux-universal-hot-example project](https://github.com/erikras/react-redux-universal-hot-example) to see
`redux-form` in action.
This is an extremely young library, so the API may change. Comments and feedback welcome.
.idea/workspace.xml

Sorry, the diff of this file is not supported yet