yarfl
Version:
Yet Another Redux Forms Library
216 lines • 11.2 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_redux_1 = require("react-redux");
var ThunkFactory_1 = require("./actions/ThunkFactory");
var utils_1 = require("./helpers/utils");
var typings_1 = require("./typings");
exports.createConnector = function (config) { return function (mapStateToProps, mapDispatchToProps, mergeProps, options) {
var extendedMapState = function (state) {
return __assign({ __YARFL__: config.mapState(state) }, (mapStateToProps ? mapStateToProps(state) : {}));
};
var extendedMapDispatch = function (dispatch) { return (__assign({ __YARFL__: exports.mapDispatch(config)(dispatch) }, (mapDispatchToProps ? mapDispatchToProps(dispatch) : {}))); };
var extendedMergeProps = function (stateProps, dispatchProps, ownProps) {
var _a;
var formState = stateProps.__YARFL__;
var formDispatchers = dispatchProps.__YARFL__;
var userMergedProps = mergeProps
? mergeProps(stateProps, dispatchProps, ownProps)
: ownProps;
return __assign((_a = {}, _a[config.name] = exports.mergeFormProps(config)(formState, formDispatchers), _a), userMergedProps);
};
return react_redux_1.connect(extendedMapState, extendedMapDispatch, extendedMergeProps, options);
}; };
exports.connectDirectly = function (config, options) {
var mapState = exports.createStateMapper(config);
var mergeProps = function (stateProps, dispatchProps, ownProps) {
var _a;
return __assign({}, ownProps, (_a = {}, _a[config.name] = exports.mergeFormProps(config)(stateProps, dispatchProps), _a));
};
return options
? react_redux_1.connect(mapState, exports.mapDispatch(config), mergeProps, options)
: react_redux_1.connect(mapState, exports.mapDispatch(config), mergeProps);
};
exports.localFormMap = function (config) { return function (state, dispatch) {
var mappedState = exports.createStateMapper(config)(state);
var mappedDispatch = exports.mapDispatch(config)(dispatch);
var mergedProps = exports.mergeFormProps(config)(mappedState, mappedDispatch);
return mergedProps;
}; };
exports.createStateMapper = function (config) {
var name = config.name, mapState = config.mapState;
return function (state) {
var formState = mapState(state);
if (typeof formState === 'undefined') {
utils_1.throwError("'mapStateToProps' for form " + name + " returned undefined. Make sure", "you add a selector function to the config object if you used", "'combineReducers' to add forms to your redux.");
}
return formState;
};
};
exports.mapDispatch = function (config) { return function (dispatch) {
var thunks = new ThunkFactory_1.default(config).getThunks();
var updateForm = thunks.updateForm, clearForm = thunks.clearForm, resetForm = thunks.resetForm, showFormErrors = thunks.showFormErrors, updateField = thunks.updateField, focusField = thunks.focusField, blurField = thunks.blurField, clearField = thunks.clearField, resetField = thunks.resetField, showFieldErrors = thunks.showFieldErrors, validateField = thunks.validateField, addArrayField = thunks.addArrayField, deleteArrayField = thunks.deleteArrayField;
return {
updateForm: function (value) { return dispatch(updateForm(value)); },
clearForm: function () { return dispatch(clearForm()); },
resetForm: function () { return dispatch(resetForm()); },
showFormErrors: function (showErrors) {
return dispatch(showFormErrors(showErrors));
},
updateField: function (key, value) {
return dispatch(updateField(key, value));
},
focusField: function (key) { return dispatch(focusField(key)); },
blurField: function (key) { return dispatch(blurField(key)); },
clearField: function (key) { return dispatch(clearField(key)); },
resetField: function (key) { return dispatch(resetField(key)); },
validateField: function (key) { return dispatch(validateField(key)); },
showFieldErrors: function (key, showErrors) {
return dispatch(showFieldErrors(key, showErrors));
},
addArrayField: function (key) { return dispatch(addArrayField(key)); },
deleteArrayField: function (key, index) {
return dispatch(deleteArrayField(key, index));
},
};
}; };
exports.mergeFormProps = function (config) { return function (state, dispatchers) {
var methods = createFormMethods(config)(state, dispatchers);
var fields = state.fields, extra = state.extra;
var errors = Object.values(utils_1.extract(fields, 'errors', {
ignoreEmptyStrings: true,
flatten: true,
})).filter(function (err) { return !Array.isArray(err); });
var errorCount = errors.length;
var select = createSelect(config)(state, dispatchers);
var values = utils_1.extract(state.fields, 'value');
return __assign({ name: config.name }, methods, { extra: extra,
errors: errors,
errorCount: errorCount, valid: !errorCount, select: select,
values: values });
}; };
var createFormMethods = function (config) { return function (state, dispatchers) {
var updateForm = dispatchers.updateForm, clearForm = dispatchers.clearForm, resetForm = dispatchers.resetForm, showFormErrors = dispatchers.showFormErrors;
return {
// TODO: allow set to update other properties
set: function (value) { return updateForm(value); },
clear: function () { return clearForm(); },
reset: function () { return resetForm(); },
showErrors: function (showErrors) { return showFormErrors(showErrors); },
extract: function (key, flatten) {
if (flatten === void 0) { flatten = false; }
return utils_1.extract(state.fields, key, { flatten: flatten });
},
bind: createFormBinder(config),
};
}; };
var createFormBinder = function (config) { return function () {
return utils_1.pick(config, [
'action',
'name',
'method',
'onSubmit',
'onChange',
'onInput',
'onInvalid',
]);
}; };
var createSelect = function (config) { return function (state, dispatchers, prefix) { return function (keyStr) {
var props = utils_1.selectField(state, prefix ? prefix + "." + keyStr : keyStr);
if (!props) {
utils_1.throwError("Key '" + keyStr + "' does not correspond to an existing node in the state.", "Check spelling and/or that the parent key is included.");
}
var methods = createFieldMethods(config)(keyStr, props, dispatchers);
var showErrors = props.showErrors, extra = props.extra, fields = props.fields, fieldType = props.fieldType;
var errors = fieldType === typings_1.FieldType.Simple
? props.errors
: utils_1.flatten(Object.values(utils_1.extract(fields, 'errors', { flatten: true })));
var errorCount = errors.length;
var valid = !errorCount;
var common = __assign({}, props, methods, { errors: errors,
errorCount: errorCount,
valid: valid,
extra: extra });
if (props.fieldType === typings_1.FieldType.Array) {
common.length = fields.length;
return common;
}
if (props.fieldType === typings_1.FieldType.Parent) {
return common;
}
var errorMessage = showErrors && !valid ? errors[0] : '';
var options = mapOptions(props, methods);
return __assign({}, common, { errorMessage: errorMessage, options: options });
}; }; };
var createFieldMethods = function (config) { return function (key, props, dispatchers) {
var updateField = dispatchers.updateField, clearField = dispatchers.clearField, resetField = dispatchers.resetField, showFieldErrors = dispatchers.showFieldErrors, addArrayField = dispatchers.addArrayField, deleteArrayField = dispatchers.deleteArrayField;
var common = {
set: function (value) { return updateField(key, value); },
clear: function () { return clearField(key); },
reset: function () { return resetField(key); },
showErrors: function (showErrors) { return showFieldErrors(key, showErrors); },
};
if (props.fieldType === typings_1.FieldType.Array) {
return __assign({}, common, { add: function () { return addArrayField(key); }, del: function (index) { return deleteArrayField(key, index); } });
}
if (props.fieldType === typings_1.FieldType.Simple) {
var _a = (utils_1.selectField(config, key, true) || {}).getter, getter = _a === void 0 ? function (v) { return v; } : _a;
return __assign({}, common, { bind: createFieldBinder(key, props, dispatchers, getter) });
}
return common;
}; };
var createFieldBinder = function (key, props, dispatchers, getter) { return function () {
var type = props.type, multiple = props.multiple;
var inputProps = utils_1.pick(props, [
'type',
'default',
'id',
'label',
'placeholder',
'name',
'disabled',
'autoFocus',
'multiple',
'autoComplete',
]);
var fetchedValue = getter(props.value);
var updateField = dispatchers.updateField, focusField = dispatchers.focusField, blurField = dispatchers.blurField;
var bindProps = __assign({ value: fetchedValue }, inputProps, { onChange: function (e, value) {
if (value !== undefined && value !== null) {
updateField(key, value);
}
else if (type === 'select' && multiple) {
var update = Array.from(e.target.options)
.filter(function (opt) { return opt.selected; })
.map(function (opt) { return opt.value; });
updateField(key, update);
}
else {
var currentTarget = e.currentTarget, target = e.target;
var _a = (currentTarget ||
target), checked = _a.checked, targetValue = _a.value;
var setValue = type === 'checkbox' ? checked : targetValue;
updateField(key, setValue);
}
}, onBlur: function () { return blurField(key); }, onFocus: function () { return focusField(key); } });
return type === 'checkbox'
? __assign({}, bindProps, { checked: !!fetchedValue }) : bindProps;
}; };
var mapOptions = function (props, methods) {
var options = props.options, value = props.value, type = props.type;
if (!options || !Array.isArray(options) || !options.length)
return [];
var onChange = methods.bind().onChange;
return options.map(function (opt) {
var bindProps = __assign({}, opt, { onChange: onChange, checked: type !== 'select' ? opt.value === value : undefined });
return __assign({}, opt, { bind: function () { return bindProps; } });
});
};
//# sourceMappingURL=connect.js.map