Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

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.5 to 0.3.0

lib/bindActionData.js
lib/mapValues.js
lib/reducer.js

602

dist/redux-form.js

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

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

@@ -62,35 +62,64 @@ /******/ // The module cache

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; };
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 }; }
var _createFormReducer = __webpack_require__(4);
var _reducer = __webpack_require__(5);
var _createFormReducer2 = _interopRequireDefault(_createFormReducer);
var _reducer2 = _interopRequireDefault(_reducer);
var _reduxForm = __webpack_require__(5);
var _reduxForm = __webpack_require__(6);
var _reduxForm2 = _interopRequireDefault(_reduxForm);
var _bindSliceKey = __webpack_require__(3);
var _mapValues = __webpack_require__(1);
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _mapValues2 = _interopRequireDefault(_mapValues);
var _actions = __webpack_require__(2);
var _bindActionData = __webpack_require__(4);
var initializeWithKey = function initializeWithKey(form, key, data) {
return _bindSliceKey2['default'](_actions.initialize, key)(form, data);
};
var _bindActionData2 = _interopRequireDefault(_bindActionData);
var _actions = __webpack_require__(3);
var actions = _interopRequireWildcard(_actions);
// bind form as first parameter of action creators
var boundActions = _extends({}, _mapValues2['default'](_extends({}, actions, {
initializeWithKey: function initializeWithKey(key, data) {
return _bindActionData2['default'](actions.initialize, { key: key })(data);
}
}), function (action) {
return function (form) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
return _bindActionData2['default'](action, { form: form }).apply(undefined, args);
};
}));
var blur = boundActions.blur;
var change = boundActions.change;
var initialize = boundActions.initialize;
var initializeWithKey = boundActions.initializeWithKey;
var reset = boundActions.reset;
var startAsyncValidation = boundActions.startAsyncValidation;
var stopAsyncValidation = boundActions.stopAsyncValidation;
var touch = boundActions.touch;
var untouch = boundActions.untouch;
exports.blur = blur;
exports.change = change;
exports.reducer = _reducer2['default'];
exports.initialize = initialize;
exports.initializeWithKey = initializeWithKey;
exports.reset = reset;
exports.startAsyncValidation = startAsyncValidation;
exports.stopAsyncValidation = stopAsyncValidation;
exports.touch = touch;
exports.untouch = untouch;
exports['default'] = _reduxForm2['default'];
exports.blur = _actions.blur;
exports.change = _actions.change;
exports.createFormReducer = _createFormReducer2['default'];
exports.initialize = _actions.initialize;
exports.initializeWithKey = initializeWithKey;
exports.reset = _actions.reset;
exports.startAsyncValidation = _actions.startAsyncValidation;
exports.stopAsyncValidation = _actions.stopAsyncValidation;
exports.touch = _actions.touch;
exports.touchAll = _actions.touchAll;
exports.untouch = _actions.untouch;
exports.untouchAll = _actions.untouchAll;

@@ -101,2 +130,27 @@ /***/ },

/**
* Maps all the values in the given object through the given function and saves them, by key, to a result object
*/
"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"] = mapValues;
function mapValues(obj, fn) {
return Object.keys(obj).reduce(function (accumulator, key) {
var _extends2;
return _extends({}, accumulator, (_extends2 = {}, _extends2[key] = fn(obj[key], key), _extends2));
}, {});
}
module.exports = exports["default"];
/***/ },
/* 2 */
/***/ function(module, exports) {
'use strict';

@@ -123,11 +177,7 @@

exports.TOUCH = TOUCH;
var TOUCH_ALL = 'redux-form/TOUCH_ALL';
exports.TOUCH_ALL = TOUCH_ALL;
var UNTOUCH = 'redux-form/UNTOUCH';
exports.UNTOUCH = UNTOUCH;
var UNTOUCH_ALL = 'redux-form/UNTOUCH_ALL';
exports.UNTOUCH_ALL = UNTOUCH_ALL;
/***/ },
/* 2 */
/* 3 */
/***/ function(module, exports, __webpack_require__) {

@@ -147,71 +197,58 @@

exports.touch = touch;
exports.touchAll = touchAll;
exports.untouch = untouch;
exports.untouchAll = untouchAll;
var _actionTypes = __webpack_require__(1);
var _actionTypes = __webpack_require__(2);
function blur(form, field, value) {
return { type: _actionTypes.BLUR, form: form, field: field, value: value };
function blur(field, value) {
return { type: _actionTypes.BLUR, field: field, value: value };
}
function change(form, field, value) {
return { type: _actionTypes.CHANGE, form: form, field: field, value: value };
function change(field, value) {
return { type: _actionTypes.CHANGE, field: field, value: value };
}
function initialize(form, data) {
return { type: _actionTypes.INITIALIZE, form: form, data: data };
function initialize(data) {
return { type: _actionTypes.INITIALIZE, data: data };
}
function reset(form) {
return { type: _actionTypes.RESET, form: form };
function reset() {
return { type: _actionTypes.RESET };
}
function startAsyncValidation(form) {
return { type: _actionTypes.START_ASYNC_VALIDATION, form: form };
function startAsyncValidation() {
return { type: _actionTypes.START_ASYNC_VALIDATION };
}
function startSubmit(form) {
return { type: _actionTypes.START_SUBMIT, form: form };
function startSubmit() {
return { type: _actionTypes.START_SUBMIT };
}
function stopAsyncValidation(form, errors) {
return { type: _actionTypes.STOP_ASYNC_VALIDATION, form: form, errors: errors };
function stopAsyncValidation(errors) {
return { type: _actionTypes.STOP_ASYNC_VALIDATION, errors: errors };
}
function stopSubmit(form) {
return { type: _actionTypes.STOP_SUBMIT, form: form };
function stopSubmit() {
return { type: _actionTypes.STOP_SUBMIT };
}
function touch(form) {
for (var _len = arguments.length, fields = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
fields[_key - 1] = arguments[_key];
function touch() {
for (var _len = arguments.length, fields = Array(_len), _key = 0; _key < _len; _key++) {
fields[_key] = arguments[_key];
}
return { type: _actionTypes.TOUCH, form: form, fields: fields };
return { type: _actionTypes.TOUCH, fields: fields };
}
function touchAll(form) {
return { type: _actionTypes.TOUCH_ALL, form: form };
}
function untouch(form) {
for (var _len2 = arguments.length, fields = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
fields[_key2 - 1] = arguments[_key2];
function untouch() {
for (var _len2 = arguments.length, fields = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
fields[_key2] = arguments[_key2];
}
return { type: _actionTypes.UNTOUCH, form: form, fields: fields };
return { type: _actionTypes.UNTOUCH, fields: fields };
}
function untouchAll(form) {
return { type: _actionTypes.UNTOUCH_ALL, form: form };
}
/***/ },
/* 3 */
/***/ function(module, exports) {
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/**
* Adds a 'key' property to the results of the function or map of functions passed
*/
'use strict';

@@ -223,13 +260,20 @@

exports['default'] = bindSliceKey;
exports['default'] = bindActionData;
function bindSliceKey(action, key) {
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _mapValues = __webpack_require__(1);
var _mapValues2 = _interopRequireDefault(_mapValues);
/**
* Adds additional properties to the results of the function or map of functions passed
*/
function bindActionData(action, data) {
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;
}, {});
return _extends({}, action.apply(undefined, arguments), data);
} : _mapValues2['default'](action, function (value) {
return bindActionData(value, data);
});
}

@@ -240,3 +284,3 @@

/***/ },
/* 4 */
/* 5 */
/***/ function(module, exports, __webpack_require__) {

@@ -250,178 +294,160 @@

exports['default'] = createFormReducer;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var _actionTypes = __webpack_require__(1);
var _actionTypes = __webpack_require__(2);
var _mapValues = __webpack_require__(1);
var _mapValues2 = _interopRequireDefault(_mapValues);
var initialState = {
asyncErrors: { valid: true },
asyncValidating: false,
data: {},
initial: {},
data: {},
touched: {},
asyncValidating: false,
asyncErrors: { valid: true },
submitting: false
submitting: false,
touched: {}
};
exports.initialState = initialState;
/**
* Creates a state structure like:
* {
* initial: {
* field1: 'value1',
* field2: 'value2'
* },
* data: {
* field1: 'value1',
* field2: 'value2'
* },
* touched: {
* field1: true,
* field2: false
* }
* }
*
* @param name the name of the "state slice" where the data is stored
* @param fields an array of field names, used when showing all values
* @param config {
* touchOnBlur: [defaults to true],
* touchOnChange: [defaults to false]
* }
* @returns {Function} a form reducer
*/
var reducer = function reducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? initialState : arguments[0];
function createFormReducer(name, fields) {
var _ref = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
var _extends2, _extends4;
var _ref$touchOnBlur = _ref.touchOnBlur;
var touchOnBlur = _ref$touchOnBlur === undefined ? true : _ref$touchOnBlur;
var _ref$touchOnChange = _ref.touchOnChange;
var touchOnChange = _ref$touchOnChange === undefined ? false : _ref$touchOnChange;
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var reducer = function reducer(s) {
var _extends2, _extends4;
switch (action.type) {
case _actionTypes.BLUR:
var blurDiff = {
data: _extends({}, state.data, (_extends2 = {}, _extends2[action.field] = action.value, _extends2))
};
if (action.touch) {
var _extends3;
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
blurDiff.touched = _extends({}, state.touched, (_extends3 = {}, _extends3[action.field] = true, _extends3));
}
return _extends({}, state, blurDiff);
case _actionTypes.CHANGE:
var _state$asyncErrors = state.asyncErrors,
oldError = _state$asyncErrors[action.field],
valid = _state$asyncErrors.valid,
otherErrors = _objectWithoutProperties(_state$asyncErrors, [action.field, 'valid']);
var state = s || initialState;
switch (action.type) {
case _actionTypes.BLUR:
var blurDiff = {
data: _extends({}, state.data, (_extends2 = {}, _extends2[action.field] = action.value, _extends2))
};
if (touchOnBlur) {
var _extends3;
var changeDiff = {
data: _extends({}, state.data, (_extends4 = {}, _extends4[action.field] = action.value, _extends4)),
asyncErrors: _extends({}, otherErrors, {
valid: !Object.keys(otherErrors).length
})
};
delete changeDiff.asyncErrors[action.field];
blurDiff.touched = _extends({}, state.touched, (_extends3 = {}, _extends3[action.field] = true, _extends3));
if (action.touch) {
var _extends5;
changeDiff.touched = _extends({}, state.touched, (_extends5 = {}, _extends5[action.field] = true, _extends5));
}
return _extends({}, state, changeDiff);
case _actionTypes.INITIALIZE:
return {
asyncErrors: {},
asyncValidating: false,
data: action.data,
initial: action.data,
submitting: false,
touched: {}
};
case _actionTypes.RESET:
return {
asyncErrors: {},
asyncValidating: false,
data: state.initial,
initial: state.initial,
submitting: false,
touched: {}
};
case _actionTypes.START_ASYNC_VALIDATION:
return _extends({}, state, {
asyncValidating: true
});
case _actionTypes.START_SUBMIT:
return _extends({}, state, {
submitting: true
});
case _actionTypes.STOP_ASYNC_VALIDATION:
return _extends({}, state, {
asyncValidating: false,
asyncErrors: action.errors
});
case _actionTypes.STOP_SUBMIT:
return _extends({}, state, {
submitting: false
});
case _actionTypes.TOUCH:
var touchDiff = {};
action.fields.forEach(function (field) {
if (typeof field !== 'string') {
throw new Error('fields passed to touch() must be strings');
}
return _extends({}, state, blurDiff);
case _actionTypes.CHANGE:
var _state$asyncErrors = state.asyncErrors,
oldError = _state$asyncErrors[action.field],
valid = _state$asyncErrors.valid,
otherErrors = _objectWithoutProperties(_state$asyncErrors, [action.field, 'valid']);
touchDiff[field] = true;
});
return _extends({}, state, {
touched: _extends({}, state.touched, touchDiff)
});
case _actionTypes.UNTOUCH:
var untouchDiff = {};
action.fields.forEach(function (field) {
if (typeof field !== 'string') {
throw new Error('fields passed to untouch() must be strings');
}
untouchDiff[field] = false;
});
return _extends({}, state, {
touched: _extends({}, state.touched, untouchDiff)
});
default:
return state;
}
};
var changeDiff = {
data: _extends({}, state.data, (_extends4 = {}, _extends4[action.field] = action.value, _extends4)),
asyncErrors: _extends({}, otherErrors, {
valid: !Object.keys(otherErrors).length
})
};
delete changeDiff.asyncErrors[action.field];
function formReducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
if (touchOnChange) {
var _extends5;
var _extends8;
changeDiff.touched = _extends({}, state.touched, (_extends5 = {}, _extends5[action.field] = true, _extends5));
}
return _extends({}, state, changeDiff);
case _actionTypes.INITIALIZE:
return {
initial: action.data,
data: action.data,
asyncValidating: false,
asyncErrors: {},
touched: {}
};
case _actionTypes.RESET:
return {
initial: state.initial,
data: state.initial,
touched: {},
asyncValidating: false,
asyncErrors: {}
};
case _actionTypes.START_ASYNC_VALIDATION:
return _extends({}, state, {
asyncValidating: true
});
case _actionTypes.START_SUBMIT:
return _extends({}, state, {
submitting: true
});
case _actionTypes.STOP_ASYNC_VALIDATION:
return _extends({}, state, {
asyncValidating: false,
asyncErrors: action.errors
});
case _actionTypes.STOP_SUBMIT:
return _extends({}, state, {
submitting: false
});
case _actionTypes.TOUCH:
var touchDiff = {};
action.fields.forEach(function (field) {
if (typeof field !== 'string') {
throw new Error('fields passed to touch() must be strings');
}
touchDiff[field] = true;
});
return _extends({}, state, {
touched: _extends({}, state.touched, touchDiff)
});
case _actionTypes.TOUCH_ALL:
var touchAllDiff = {};
fields.forEach(function (field) {
return touchAllDiff[field] = true;
}); // mark all as touched
return _extends({}, state, {
touched: touchAllDiff
});
case _actionTypes.UNTOUCH:
var untouchDiff = {};
action.fields.forEach(function (field) {
if (typeof field !== 'string') {
throw new Error('fields passed to untouch() must be strings');
}
untouchDiff[field] = false;
});
return _extends({}, state, {
touched: _extends({}, state.touched, untouchDiff)
});
case _actionTypes.UNTOUCH_ALL:
return _extends({}, state, {
touched: {}
});
default:
return state;
}
};
var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var form = action.form;
var key = action.key;
var rest = _objectWithoutProperties(action, ['form', 'key']);
if (!form) {
return state;
}
if (key) {
var _extends6, _extends7;
return _extends({}, state, (_extends7 = {}, _extends7[form] = _extends({}, state[form], (_extends6 = {}, _extends6[key] = reducer((state[form] || {})[key], rest), _extends6)), _extends7));
}
return _extends({}, state, (_extends8 = {}, _extends8[form] = reducer(state[form], rest), _extends8));
}
formReducer.plugin = function (reducers) {
return function () {
var state = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
var state = arguments.length <= 0 || arguments[0] === undefined ? {} : 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);
var result = formReducer(state, action);
return _extends({}, result, _mapValues2['default'](reducers, function (red, key) {
return red(result[key] || initialState, action);
}));
};
}
};
exports['default'] = formReducer;
/***/ },
/* 5 */
/* 6 */
/***/ function(module, exports, __webpack_require__) {

@@ -449,19 +475,32 @@

var _react = __webpack_require__(7);
var _react = __webpack_require__(8);
var _react2 = _interopRequireDefault(_react);
var _actions = __webpack_require__(2);
var _actions = __webpack_require__(3);
var formActions = _interopRequireWildcard(_actions);
var _util = __webpack_require__(6);
var _util = __webpack_require__(7);
var _bindSliceKey = __webpack_require__(3);
var _bindActionData = __webpack_require__(4);
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _bindActionData2 = _interopRequireDefault(_bindActionData);
var _createFormReducer = __webpack_require__(4);
var _reducer = __webpack_require__(5);
function createReduxFormDecorator(sliceName, syncValidate, asyncValidate, asyncBlurFields) {
function getSubForm(form, formName, formKey) {
if (form && form[formName]) {
if (formKey) {
if (form[formName][formKey]) {
return form[formName][formKey];
}
} else {
return form[formName];
}
}
return _reducer.initialState;
}
function createReduxFormDecorator(formName, fields, syncValidate, touchOnBlur, touchOnChange, asyncValidate, asyncBlurFields) {
function combineValidationErrors(form) {

@@ -490,13 +529,13 @@ var syncErrors = syncValidate(form.data);

var _props = this.props;
var formName = _props.formName;
var form = _props.form;
var sliceName = _props.sliceName;
var sliceKey = _props.sliceKey;
var formKey = _props.formKey;
var dispatch = _props.dispatch;
var passableProps = _objectWithoutProperties(_props, ['form', 'sliceName', 'sliceKey', 'dispatch']);
var passableProps = _objectWithoutProperties(_props, ['formName', 'form', 'formKey', 'dispatch']);
// eslint-disable-line no-shadow
var reslicedForm = (sliceKey && form ? form[sliceKey] : form) || _createFormReducer.initialState;
var subForm = getSubForm(form, formName, formKey);
var _ref = sliceKey ? _bindSliceKey2['default'](formActions, sliceKey) : formActions;
var _ref = formKey ? _bindActionData2['default'](formActions, { form: formName, key: formKey }) : _bindActionData2['default'](formActions, { form: formName });

@@ -512,9 +551,7 @@ var blur = _ref.blur;

var touch = _ref.touch;
var touchAll = _ref.touchAll;
var untouch = _ref.untouch;
var untouchAll = _ref.untouchAll;
var runAsyncValidation = asyncValidate ? function () {
dispatch(startAsyncValidation(sliceName, sliceKey));
var promise = asyncValidate(reslicedForm.data);
dispatch(startAsyncValidation(formKey));
var promise = asyncValidate(subForm.data);
if (!promise || typeof promise.then !== 'function') {

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

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

@@ -532,7 +569,8 @@ });

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

@@ -545,5 +583,5 @@ if (!syncError) {

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

@@ -556,3 +594,4 @@ var valid = _combineValidationErrors.valid;

return function (event) {
return dispatch(change(sliceName, name, value === undefined ? event.target.value : value, sliceKey));
var doChange = _bindActionData2['default'](change, { touch: touchOnChange });
dispatch(doChange(name, value === undefined ? event.target.value : value));
};

@@ -567,22 +606,22 @@ };

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

@@ -603,7 +642,8 @@ };

asyncValidate: runAsyncValidation,
asyncValidating: reslicedForm.asyncValidating,
data: reslicedForm.data,
asyncValidating: subForm.asyncValidating,
data: subForm.data,
dirty: !pristine,
dispatch: dispatch,
errors: errors,
formKey: formKey,
handleBlur: handleBlur,

@@ -613,3 +653,3 @@ handleChange: handleChange,

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

@@ -619,6 +659,5 @@ invalid: !valid,

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

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

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

@@ -641,6 +680,6 @@ untouch: function () {

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

@@ -662,4 +701,4 @@ valid: valid

value: {
sliceName: _react.PropTypes.string,
sliceKey: _react.PropTypes.string,
formName: _react.PropTypes.string,
formKey: _react.PropTypes.string,
form: _react.PropTypes.object,

@@ -673,3 +712,3 @@ onSubmit: _react.PropTypes.func,

value: {
sliceName: sliceName
formName: formName
},

@@ -684,15 +723,16 @@ enumerable: true

function reduxForm(sliceName) {
var syncValidate = arguments.length <= 1 || arguments[1] === undefined ? function () {
function reduxForm(formName, fields) {
var syncValidate = arguments.length <= 2 || arguments[2] === undefined ? function () {
return { valid: true };
} : arguments[1];
} : arguments[2];
var touchOnBlur = arguments.length <= 3 || arguments[3] === undefined ? true : arguments[3];
var touchOnChange = arguments.length <= 4 || arguments[4] === undefined ? false : arguments[4];
var decorator = createReduxFormDecorator(sliceName, syncValidate);
var decorator = createReduxFormDecorator(formName, fields, syncValidate, !!touchOnBlur, !!touchOnChange);
decorator.async = function (asyncValidate) {
for (var _len3 = arguments.length, fields = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
fields[_key3 - 1] = arguments[_key3];
for (var _len3 = arguments.length, blurFields = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
blurFields[_key3 - 1] = arguments[_key3];
}
var blurFields = Array.isArray(fields[0]) ? fields[0] : fields;
return createReduxFormDecorator(sliceName, syncValidate, asyncValidate, blurFields);
return createReduxFormDecorator(formName, fields, syncValidate, !!touchOnBlur, !!touchOnChange, asyncValidate, Array.isArray(blurFields[0]) ? blurFields[0] : blurFields);
};

@@ -705,3 +745,3 @@ return decorator;

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

@@ -736,6 +776,6 @@

/***/ },
/* 7 */
/* 8 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;

@@ -742,0 +782,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(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,void 0===r?e.target.value:r,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}])});
!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){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}}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},o=e(5),i=a(o),s=e(6),f=a(s),c=e(1),l=a(c),d=e(4),p=a(d),m=e(3),v=n(m),y=u({},l.default(u({},v,{initializeWithKey:function(t,r){return p.default(v.initialize,{key:t})(r)}}),function(t){return function(r){for(var e=arguments.length,n=Array(e>1?e-1:0),a=1;e>a;a++)n[a-1]=arguments[a];return p.default(t,{form:r}).apply(void 0,n)}})),g=y.blur,h=y.change,T=y.initialize,b=y.initializeWithKey,A=y.reset,O=y.startAsyncValidation,_=y.stopAsyncValidation,S=y.touch,I=y.untouch;r.blur=g,r.change=h,r.reducer=i.default,r.initialize=T,r.initializeWithKey=b,r.reset=A,r.startAsyncValidation=O,r.stopAsyncValidation=_,r.touch=S,r.untouch=I,r.default=f.default},function(t,r){"use strict";function e(t,r){return Object.keys(t).reduce(function(e,a){var u;return n({},e,(u={},u[a]=r(t[a],a),u))},{})}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){"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 s="redux-form/STOP_ASYNC_VALIDATION";r.STOP_ASYNC_VALIDATION=s;var f="redux-form/STOP_SUBMIT";r.STOP_SUBMIT=f;var c="redux-form/TOUCH";r.TOUCH=c;var l="redux-form/UNTOUCH";r.UNTOUCH=l},function(t,r,e){"use strict";function n(t,r){return{type:p.BLUR,field:t,value:r}}function a(t,r){return{type:p.CHANGE,field:t,value:r}}function u(t){return{type:p.INITIALIZE,data:t}}function o(){return{type:p.RESET}}function i(){return{type:p.START_ASYNC_VALIDATION}}function s(){return{type:p.START_SUBMIT}}function f(t){return{type:p.STOP_ASYNC_VALIDATION,errors:t}}function c(){return{type:p.STOP_SUBMIT}}function l(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return{type:p.TOUCH,fields:r}}function d(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return{type:p.UNTOUCH,fields:r}}r.__esModule=!0,r.blur=n,r.change=a,r.initialize=u,r.reset=o,r.startAsyncValidation=i,r.startSubmit=s,r.stopAsyncValidation=f,r.stopSubmit=c,r.touch=l,r.untouch=d;var p=e(2)},function(t,r,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function a(t,r){return"function"==typeof t?function(){return u({},t.apply(void 0,arguments),r)}:i.default(t,function(t){return a(t,r)})}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=n(o);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(){var t,r=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],n=e.form,u=e.key,i=a(e,["form","key"]);if(!n)return r;if(u){var s,f;return o({},r,(f={},f[n]=o({},r[n],(s={},s[u]=l((r[n]||{})[u],i),s)),f))}return o({},r,(t={},t[n]=l(r[n],i),t))}r.__esModule=!0;var o=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},i=e(2),s=e(1),f=n(s),c={asyncErrors:{valid:!0},asyncValidating:!1,data:{},initial:{},submitting:!1,touched:{}};r.initialState=c;var l=function(){var t,r,e=arguments.length<=0||void 0===arguments[0]?c:arguments[0],n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];switch(n.type){case i.BLUR:var u={data:o({},e.data,(t={},t[n.field]=n.value,t))};if(n.touch){var s;u.touched=o({},e.touched,(s={},s[n.field]=!0,s))}return o({},e,u);case i.CHANGE:var f=e.asyncErrors,l=(f[n.field],f.valid,a(f,[n.field,"valid"])),d={data:o({},e.data,(r={},r[n.field]=n.value,r)),asyncErrors:o({},l,{valid:!Object.keys(l).length})};if(delete d.asyncErrors[n.field],n.touch){var p;d.touched=o({},e.touched,(p={},p[n.field]=!0,p))}return o({},e,d);case i.INITIALIZE:return{asyncErrors:{},asyncValidating:!1,data:n.data,initial:n.data,submitting:!1,touched:{}};case i.RESET:return{asyncErrors:{},asyncValidating:!1,data:e.initial,initial:e.initial,submitting:!1,touched:{}};case i.START_ASYNC_VALIDATION:return o({},e,{asyncValidating:!0});case i.START_SUBMIT:return o({},e,{submitting:!0});case i.STOP_ASYNC_VALIDATION:return o({},e,{asyncValidating:!1,asyncErrors:n.errors});case i.STOP_SUBMIT:return o({},e,{submitting:!1});case i.TOUCH:var m={};return n.fields.forEach(function(t){if("string"!=typeof t)throw new Error("fields passed to touch() must be strings");m[t]=!0}),o({},e,{touched:o({},e.touched,m)});case i.UNTOUCH:var v={};return n.fields.forEach(function(t){if("string"!=typeof t)throw new Error("fields passed to untouch() must be strings");v[t]=!1}),o({},e,{touched:o({},e.touched,v)});default:return e}};u.plugin=function(t){return function(){var r=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],n=u(r,e);return o({},n,f.default(t,function(t,r){return t(n[r]||c,e)}))}},r.default=u},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 s(t,r,e){if(t&&t[r]){if(!e)return t[r];if(t[r][e])return t[r][e]}return b.initialState}function f(t,r,e,n,a,f,c){function v(t){var r=e(t.data),n=d({valid:!0},t.asyncErrors),a=!(!r.valid||!n.valid);return d({},r,n,{valid:a})}return function(h){return function(b){function A(){o(this,A),b.apply(this,arguments)}return i(A,b),A.prototype.render=function(){var t=this,o=this.props,i=o.formName,l=o.form,p=o.formKey,b=o.dispatch,A=u(o,["formName","form","formKey","dispatch"]),O=s(l,i,p),_=p?T.default(y,{form:i,key:p}):T.default(y,{form:i}),S=_.blur,I=_.change,N=_.initialize,E=_.reset,x=_.startAsyncValidation,P=_.startSubmit,j=_.stopAsyncValidation,C=_.stopSubmit,V=_.touch,w=_.untouch,U=f?function(){b(x(p));var t=f(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 b(j(t)),!!t.valid})}:void 0,M=function(t,r){return function(a){var u=r||a.target.value,o=T.default(S,{touch:n});if(b(o(t,u)),U&&~c.indexOf(t)){var i,s=e(d({},O.data,(i={},i[t]=u,i)))[t];s||U()}}},R=g.isPristine(O.initial,O.data),L=v(O),B=L.valid,k=u(L,["valid"]),D=function(t,r){return function(e){var n=T.default(I,{touch:a});b(n(t,void 0===r?e.target.value:r))}},H=function(e){var n=function(t){return function(e){e&&e.preventDefault();var n=function(){var r=t(O.data);if(r&&"function"==typeof r.then){var e=function(t){return b(C()),t};b(P()),r.then(e,e)}};return b(V.apply(void 0,r)),U?U().then(function(t){return B&&t?n(O.data):void 0}):B?n(O.data):void 0}};if("function"==typeof e)return n(e);var a=t.props.onSubmit;if(!a)throw new Error("You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop");n(a)(e)};return m.default.createElement(h,d({asyncValidate:U,asyncValidating:O.asyncValidating,data:O.data,dirty:!R,dispatch:b,errors:k,formKey:p,handleBlur:M,handleChange:D,handleSubmit:H,initializeForm:function(t){return b(N(t))},invalid:!B,pristine:R,resetForm:function(){return b(E())},submitting:O.submitting,touch:function(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return b(V.apply(void 0,r))},touched:O.touched,touchAll:function(){return b(V.apply(void 0,r))},untouch:function(){for(var t=arguments.length,r=Array(t),e=0;t>e;e++)r[e]=arguments[e];return b(w.apply(void 0,r))},untouchAll:function(){return b(untouchAll.apply(void 0,r))},valid:B},A))},l(A,null,[{key:"displayName",value:"ReduxForm("+g.getDisplayName(h)+")",enumerable:!0},{key:"DecoratedComponent",value:h,enumerable:!0},{key:"propTypes",value:{formName:p.PropTypes.string,formKey:p.PropTypes.string,form:p.PropTypes.object,onSubmit:p.PropTypes.func,dispatch:p.PropTypes.func.isRequired},enumerable:!0},{key:"defaultProps",value:{formName:t},enumerable:!0}]),A}(p.Component)}}function c(t,r){var e=arguments.length<=2||void 0===arguments[2]?function(){return{valid:!0}}:arguments[2],n=arguments.length<=3||void 0===arguments[3]?!0:arguments[3],a=arguments.length<=4||void 0===arguments[4]?!1:arguments[4],u=f(t,r,e,!!n,!!a);return u.async=function(u){for(var o=arguments.length,i=Array(o>1?o-1:0),s=1;o>s;s++)i[s-1]=arguments[s];return f(t,r,e,!!n,!!a,u,Array.isArray(i[0])?i[0]:i)},u}r.__esModule=!0;var l=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}}(),d=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 p=e(8),m=a(p),v=e(3),y=n(v),g=e(7),h=e(4),T=a(h),b=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}])});

58

lib/actions.js

@@ -13,62 +13,52 @@ 'use strict';

exports.touch = touch;
exports.touchAll = touchAll;
exports.untouch = untouch;
exports.untouchAll = untouchAll;
var _actionTypes = require('./actionTypes');
function blur(form, field, value) {
return { type: _actionTypes.BLUR, form: form, field: field, value: value };
function blur(field, value) {
return { type: _actionTypes.BLUR, field: field, value: value };
}
function change(form, field, value) {
return { type: _actionTypes.CHANGE, form: form, field: field, value: value };
function change(field, value) {
return { type: _actionTypes.CHANGE, field: field, value: value };
}
function initialize(form, data) {
return { type: _actionTypes.INITIALIZE, form: form, data: data };
function initialize(data) {
return { type: _actionTypes.INITIALIZE, data: data };
}
function reset(form) {
return { type: _actionTypes.RESET, form: form };
function reset() {
return { type: _actionTypes.RESET };
}
function startAsyncValidation(form) {
return { type: _actionTypes.START_ASYNC_VALIDATION, form: form };
function startAsyncValidation() {
return { type: _actionTypes.START_ASYNC_VALIDATION };
}
function startSubmit(form) {
return { type: _actionTypes.START_SUBMIT, form: form };
function startSubmit() {
return { type: _actionTypes.START_SUBMIT };
}
function stopAsyncValidation(form, errors) {
return { type: _actionTypes.STOP_ASYNC_VALIDATION, form: form, errors: errors };
function stopAsyncValidation(errors) {
return { type: _actionTypes.STOP_ASYNC_VALIDATION, errors: errors };
}
function stopSubmit(form) {
return { type: _actionTypes.STOP_SUBMIT, form: form };
function stopSubmit() {
return { type: _actionTypes.STOP_SUBMIT };
}
function touch(form) {
for (var _len = arguments.length, fields = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
fields[_key - 1] = arguments[_key];
function touch() {
for (var _len = arguments.length, fields = Array(_len), _key = 0; _key < _len; _key++) {
fields[_key] = arguments[_key];
}
return { type: _actionTypes.TOUCH, form: form, fields: fields };
return { type: _actionTypes.TOUCH, fields: fields };
}
function touchAll(form) {
return { type: _actionTypes.TOUCH_ALL, form: form };
}
function untouch(form) {
for (var _len2 = arguments.length, fields = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
fields[_key2 - 1] = arguments[_key2];
function untouch() {
for (var _len2 = arguments.length, fields = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
fields[_key2] = arguments[_key2];
}
return { type: _actionTypes.UNTOUCH, form: form, fields: fields };
}
function untouchAll(form) {
return { type: _actionTypes.UNTOUCH_ALL, form: form };
return { type: _actionTypes.UNTOUCH, fields: fields };
}

6

lib/actionTypes.js

@@ -22,7 +22,3 @@ 'use strict';

exports.TOUCH = TOUCH;
var TOUCH_ALL = 'redux-form/TOUCH_ALL';
exports.TOUCH_ALL = TOUCH_ALL;
var UNTOUCH = 'redux-form/UNTOUCH';
exports.UNTOUCH = UNTOUCH;
var UNTOUCH_ALL = 'redux-form/UNTOUCH_ALL';
exports.UNTOUCH_ALL = UNTOUCH_ALL;
exports.UNTOUCH = UNTOUCH;

67

lib/index.js

@@ -5,7 +5,11 @@ 'use strict';

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; };
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 }; }
var _createFormReducer = require('./createFormReducer');
var _reducer = require('./reducer');
var _createFormReducer2 = _interopRequireDefault(_createFormReducer);
var _reducer2 = _interopRequireDefault(_reducer);

@@ -16,24 +20,49 @@ var _reduxForm = require('./reduxForm');

var _bindSliceKey = require('./bindSliceKey');
var _mapValues = require('./mapValues');
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _mapValues2 = _interopRequireDefault(_mapValues);
var _bindActionData = require('./bindActionData');
var _bindActionData2 = _interopRequireDefault(_bindActionData);
var _actions = require('./actions');
var initializeWithKey = function initializeWithKey(form, key, data) {
return _bindSliceKey2['default'](_actions.initialize, key)(form, data);
};
var actions = _interopRequireWildcard(_actions);
exports['default'] = _reduxForm2['default'];
exports.blur = _actions.blur;
exports.change = _actions.change;
exports.createFormReducer = _createFormReducer2['default'];
exports.initialize = _actions.initialize;
// bind form as first parameter of action creators
var boundActions = _extends({}, _mapValues2['default'](_extends({}, actions, {
initializeWithKey: function initializeWithKey(key, data) {
return _bindActionData2['default'](actions.initialize, { key: key })(data);
}
}), function (action) {
return function (form) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
return _bindActionData2['default'](action, { form: form }).apply(undefined, args);
};
}));
var blur = boundActions.blur;
var change = boundActions.change;
var initialize = boundActions.initialize;
var initializeWithKey = boundActions.initializeWithKey;
var reset = boundActions.reset;
var startAsyncValidation = boundActions.startAsyncValidation;
var stopAsyncValidation = boundActions.stopAsyncValidation;
var touch = boundActions.touch;
var untouch = boundActions.untouch;
exports.blur = blur;
exports.change = change;
exports.reducer = _reducer2['default'];
exports.initialize = initialize;
exports.initializeWithKey = initializeWithKey;
exports.reset = _actions.reset;
exports.startAsyncValidation = _actions.startAsyncValidation;
exports.stopAsyncValidation = _actions.stopAsyncValidation;
exports.touch = _actions.touch;
exports.touchAll = _actions.touchAll;
exports.untouch = _actions.untouch;
exports.untouchAll = _actions.untouchAll;
exports.reset = reset;
exports.startAsyncValidation = startAsyncValidation;
exports.stopAsyncValidation = stopAsyncValidation;
exports.touch = touch;
exports.untouch = untouch;
exports['default'] = _reduxForm2['default'];

108

lib/reduxForm.js

@@ -31,9 +31,22 @@ 'use strict';

var _bindSliceKey = require('./bindSliceKey');
var _bindActionData = require('./bindActionData');
var _bindSliceKey2 = _interopRequireDefault(_bindSliceKey);
var _bindActionData2 = _interopRequireDefault(_bindActionData);
var _createFormReducer = require('./createFormReducer');
var _reducer = require('./reducer');
function createReduxFormDecorator(sliceName, syncValidate, asyncValidate, asyncBlurFields) {
function getSubForm(form, formName, formKey) {
if (form && form[formName]) {
if (formKey) {
if (form[formName][formKey]) {
return form[formName][formKey];
}
} else {
return form[formName];
}
}
return _reducer.initialState;
}
function createReduxFormDecorator(formName, fields, syncValidate, touchOnBlur, touchOnChange, asyncValidate, asyncBlurFields) {
function combineValidationErrors(form) {

@@ -62,13 +75,13 @@ var syncErrors = syncValidate(form.data);

var _props = this.props;
var formName = _props.formName;
var form = _props.form;
var sliceName = _props.sliceName;
var sliceKey = _props.sliceKey;
var formKey = _props.formKey;
var dispatch = _props.dispatch;
var passableProps = _objectWithoutProperties(_props, ['form', 'sliceName', 'sliceKey', 'dispatch']);
var passableProps = _objectWithoutProperties(_props, ['formName', 'form', 'formKey', 'dispatch']);
// eslint-disable-line no-shadow
var reslicedForm = (sliceKey && form ? form[sliceKey] : form) || _createFormReducer.initialState;
var subForm = getSubForm(form, formName, formKey);
var _ref = sliceKey ? _bindSliceKey2['default'](formActions, sliceKey) : formActions;
var _ref = formKey ? _bindActionData2['default'](formActions, { form: formName, key: formKey }) : _bindActionData2['default'](formActions, { form: formName });

@@ -84,9 +97,7 @@ var blur = _ref.blur;

var touch = _ref.touch;
var touchAll = _ref.touchAll;
var untouch = _ref.untouch;
var untouchAll = _ref.untouchAll;
var runAsyncValidation = asyncValidate ? function () {
dispatch(startAsyncValidation(sliceName, sliceKey));
var promise = asyncValidate(reslicedForm.data);
dispatch(startAsyncValidation(formKey));
var promise = asyncValidate(subForm.data);
if (!promise || typeof promise.then !== 'function') {

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

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

@@ -104,7 +115,8 @@ });

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

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

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

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

return function (event) {
return dispatch(change(sliceName, name, value === undefined ? event.target.value : value, sliceKey));
var doChange = _bindActionData2['default'](change, { touch: touchOnChange });
dispatch(doChange(name, value === undefined ? event.target.value : value));
};

@@ -139,22 +152,22 @@ };

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

@@ -175,7 +188,8 @@ };

asyncValidate: runAsyncValidation,
asyncValidating: reslicedForm.asyncValidating,
data: reslicedForm.data,
asyncValidating: subForm.asyncValidating,
data: subForm.data,
dirty: !pristine,
dispatch: dispatch,
errors: errors,
formKey: formKey,
handleBlur: handleBlur,

@@ -185,3 +199,3 @@ handleChange: handleChange,

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

@@ -191,6 +205,5 @@ invalid: !valid,

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

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

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

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

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

@@ -234,4 +247,4 @@ valid: valid

value: {
sliceName: _react.PropTypes.string,
sliceKey: _react.PropTypes.string,
formName: _react.PropTypes.string,
formKey: _react.PropTypes.string,
form: _react.PropTypes.object,

@@ -245,3 +258,3 @@ onSubmit: _react.PropTypes.func,

value: {
sliceName: sliceName
formName: formName
},

@@ -256,15 +269,16 @@ enumerable: true

function reduxForm(sliceName) {
var syncValidate = arguments.length <= 1 || arguments[1] === undefined ? function () {
function reduxForm(formName, fields) {
var syncValidate = arguments.length <= 2 || arguments[2] === undefined ? function () {
return { valid: true };
} : arguments[1];
} : arguments[2];
var touchOnBlur = arguments.length <= 3 || arguments[3] === undefined ? true : arguments[3];
var touchOnChange = arguments.length <= 4 || arguments[4] === undefined ? false : arguments[4];
var decorator = createReduxFormDecorator(sliceName, syncValidate);
var decorator = createReduxFormDecorator(formName, fields, syncValidate, !!touchOnBlur, !!touchOnChange);
decorator.async = function (asyncValidate) {
for (var _len3 = arguments.length, fields = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
fields[_key3 - 1] = arguments[_key3];
for (var _len3 = arguments.length, blurFields = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
blurFields[_key3 - 1] = arguments[_key3];
}
var blurFields = Array.isArray(fields[0]) ? fields[0] : fields;
return createReduxFormDecorator(sliceName, syncValidate, asyncValidate, blurFields);
return createReduxFormDecorator(formName, fields, syncValidate, !!touchOnBlur, !!touchOnChange, asyncValidate, Array.isArray(blurFields[0]) ? blurFields[0] : blurFields);
};

@@ -271,0 +285,0 @@ return decorator;

2

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

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

170

README.md

@@ -29,5 +29,5 @@ #redux-form

* [Editing Multiple Records](#editing-multiple-records)
* [Calculating `props` from Form Data](#calculating-props-from-form-data)
* [API](#api)
* [`createFormReducer(sliceName, fields, config?)`](#createformreducerslicenamestring-fieldsarraystring-configobject)
* [`reduxForm(sliceName, validate?)`](#reduxformslicenamestring-validatefunction)
* [`reduxForm(formName, validate?)`](#reduxformformnamestring-fieldsarraystring-validatefunction-touchonblurboolean-touchonchangeboolean)
* [`reduxForm().async(asyncValidate, ...fields?)`](#reduxformasyncasyncvalidatefunction-fieldsstring)

@@ -73,10 +73,12 @@ * [`props`](#props) - The props passed in to your form component by `redux-form`

When you are adding your reducers to your redux store, add a new one with `createFormReducer(])`.
__STEP 1:__ The first thing that you have to do is to give the `redux-form` reducer to Redux. You will only have to do
this
once, no matter how many form components your app uses.
```javascript
import { createStore, combineReducers } from 'redux';
import { createFormReducer } from 'redux-form';
import { reducer as formReducer } from 'redux-form';
const reducers = {
// ... your other reducers here ...
createFormReducer('contactForm', ['name', 'address', 'phone'])
form: formReducer // it is recommended that you use the key 'form'
}

@@ -87,5 +89,5 @@ const reducer = combineReducers(reducers);

`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.
__STEP 2:__ Wrap your form component with `reduxForm()`. `reduxForm()` creates a Higher Order Component that expects
a `dispatch` prop and a slice of the Redux store where all the `redux-form` data is stored as a `form` prop. These
should be provided by [React Redux](https://github.com/gaearon/react-redux)'s `connect()` function.

@@ -148,7 +150,7 @@ ### A Simple Form Component

// apply reduxForm() and include synchronous validation
ContactForm = reduxForm('contactForm', contactValidation)(ContactForm);
ContactForm = reduxForm('contact', ['name', 'address', 'phone'], contactValidation)(ContactForm);
// ------- HERE'S THE IMPORTANT BIT -------
function mapStateToProps(state) {
return { form: state.contactForm };
return { form: state.form }; // if you mounted the reducer at 'form' in Step 1
}

@@ -163,3 +165,4 @@ // apply connect() to bind it to Redux state

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.
`handleSubmit` will call the function passed into `ContactForm`'s `onSubmit` prop, _if and only
if_ the synchronous validation passes. See [Submitting Your Form](#submitting-your-form).

@@ -172,4 +175,4 @@ ### ES7 Decorator Sugar

```javascript
@connect(state => ({ form: state.contactForm }))
@reduxForm('contactForm', contactValidation)
@connect(state => ({ form: state.form }))
@reduxForm('contact', ['name', 'address', 'phone'], contactValidation)
export default class ContactForm extends Component {

@@ -185,5 +188,5 @@ ```

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
If your form component also needs other redux action creators - _and you will if you are performaing your server
submit in your form component_ - 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...

@@ -253,3 +256,3 @@

// apply reduxForm() and include synchronous validation
ContactForm = reduxForm('contactForm', contactValidation)(ContactForm);
ContactForm = reduxForm('contact', ['name', 'address', 'phone'], contactValidation)(ContactForm);
```

@@ -267,3 +270,3 @@ ...changes to this:

// apply reduxForm() and include synchronous AND asynchronous validation
ContactForm = reduxForm('contactForm', contactValidation)
ContactForm = reduxForm('contact', ['name', 'address', 'phone'], contactValidation)
.async(asyncValidation)(ContactForm);

@@ -277,3 +280,3 @@ ```

```javascript
ContactForm = reduxForm('contactForm', contactValidation)
ContactForm = reduxForm('contact', ['name', 'address', 'phone'], contactValidation)
.async(asyncValidation, 'name', 'phone')(ContactForm);

@@ -287,3 +290,3 @@ ```

```javascript
ContactForm = reduxForm('contactForm').async(asyncValidation)(ContactForm);
ContactForm = reduxForm('contact', ['name', 'address', 'phone']).async(asyncValidation)(ContactForm);
```

@@ -360,24 +363,35 @@

Rather than just using the vanilla reducer function generated by `createFormReducer()`, you can augment it to do
other things.
Rather than just using the vanilla reducer from `redux-form`, you can augment it to do other things by calling
the `plugin()` function.
```javascript
import {createFormReducer} from 'redux-form';
import {reducer as formReducer} 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);
}
const reducers = {
// ... your other reducers here ...
form: formReducer.plugin({
login: (state, action) => { // <------ 'login' is name of form given to reduxForm()
switch(action.type) {
case AUTH_LOGIN_FAIL:
return {
...state,
data: {
...state.data,
password: '' // <----- clear password field
},
touched: {
...state.touched,
password: false // <------ also set password to 'untouched'
}
};
default:
return state;
}
}
})
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);
```

@@ -388,3 +402,3 @@

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()`
unique `formKey` 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.

@@ -408,3 +422,3 @@

contacts.forEach(function (contact) {
initializeWithKey('contactForm', String(contact.id), contact);
initializeWithKey('contact', String(contact.id), contact);
});

@@ -424,3 +438,3 @@ }

key={contact.id} // required by react
sliceKey={String(contact.id)} // required by redux-form
formKey={String(contact.id)} // required by redux-form
onSubmit={this.handleSubmit.bind(this, contact.id)}/>

@@ -448,38 +462,60 @@ })}

## API
### Calculating `props` from Form Data
Each form has a `sliceName`. That's the key in the Redux store tree where the data will be mounted.
You may want to have some calculated props, perhaps using [`reselect`](https://github.com/faassen/reselect)
selectors based on the values of the data in your form. You might be tempted to do this in the `mapStateToProps`
given to `connect()`. __This will not work__. The reason is that the form contents in the Redux store are lazily
initialized, so `state.form.contacts.data.name` will fail, because `state.form.contacts` will be null.
### `createFormReducer(sliceName:string, fields:Array<string>, config:Object?)`
The recommended way to accomplish this is to use yet another Higher Order Component decorator, such as
[`map-props`](https://github.com/erikras/map-props), like so:
```javascript
import mapProps from 'map-props';
...
// FIRST map props
ContactForm = mapProps({
hasName: props => !!props.data.name
hasPhone: props => !!props.data.phone
})(ContactForm);
##### -`sliceName` : string
// THEN apply reduxForm() and include synchronous validation
ContactForm = reduxForm('contact', ['name', 'address', 'phone'], contactValidation)(ContactForm);
...
```
Or, in ES7 land...
```javascript
@connect(state => ({ form: state.form }))
@reduxForm('contact', ['name', 'address', 'phone'], contactValidation)
@mapProps({
hasName: props => !!props.data.name
hasPhone: props => !!props.data.phone
})
export default class ContactForm extends Component {
```
---
## API
> the name of your form and the key to where your form's state will be mounted in the Redux store
### `reduxForm(formName:string, fields:Array&lt;string&gt;, validate:Function?, touchOnBlur:boolean?, touchOnChange:boolean?)`
##### - fields : Array&lt;string&gt;
##### -`formName : string`
> a list of all your fields in your form.
> the name of your form and the key to where your form's state will be mounted, under the `redux-form` reducer, in the
Redux store
##### -`config`: Object [optional]
##### - fields : Array&lt;string&gt;
> some control over when to mark fields as "touched" in the form:
> a list of all your fields in your form. This is used for marking all of the fields as `touched` on submit.
###### `config.touchOnBlur` : boolean [optional]
##### -`validate : Function` [optional]
> marks fields to touched when the blur action is fired. defaults to `true`
> your [synchronous validation function](#synchronous-validation). Defaults to `() => ({valid: true})`
###### `config.touchOnChange` : boolean [optional]
#### `touchOnBlur` : boolean [optional]
> marks fields to touched when the change action is fired. defaults to `false`
> marks fields to touched when the blur action is fired. Defaults to `true`
### `reduxForm(sliceName:string, validate:Function?)`
#### `touchOnChange` : boolean [optional]
##### -`sliceName : string`
> marks fields to touched when the change action is fired. Defaults to `false`
> the name of your form and the key to where your form's state will be mounted in the Redux store
##### -`validate : Function` [optional]
> your [synchronous validation function](#synchronous-validation). Defaults to `() => ({valid: true})`
### `reduxForm().async(asyncValidate:Function, ...fields:String?)`

@@ -556,5 +592,5 @@

##### -`sliceKey : String`
##### -`formKey : String`
> The same `sliceKey` prop that was passed in. See [Editing Multiple Records](#editing-multiple-records).
> The same `formKey` prop that was passed in. See [Editing Multiple Records](#editing-multiple-records).

@@ -609,3 +645,3 @@ ##### -`submitting : boolean`

##### -`initializeWithKey(form:String, sliceKey, data:Object)`
##### -`initializeWithKey(form:String, formKey, data:Object)`

@@ -631,6 +667,2 @@ > Used when editing multiple records with the same form component. See

##### -`touchAll(form:String)`
> Marks all the fields in the form as `touched`.
##### -`untouch(form:String, ...fields:String)`

@@ -640,6 +672,2 @@

##### -`untouchAll(form:String)`
> Resets the 'touched' flag for all the fields in the form.
## Working Demo

@@ -646,0 +674,0 @@ 

lib/bindSliceKey.js
lib/createFormReducer.js
.idea/workspace.xml

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