Commit bb05aaf0 authored by Roman's avatar Roman

feat(ReduxFormModal) - added input errors support

parent b175f8f7
......@@ -11,6 +11,7 @@ export const CONFIRM_HIDE = 'CONFIRM_HIDE';
export const EDIT_FORM_SHOW = 'EDIT_FORM_SHOW';
export const EDIT_FORM_HIDE = 'EDIT_FORM_HIDE';
export const EDIT_FORM_SET_ITEM = 'EDIT_FORM_SET_ITEM';
export const EDIT_FORM_SET_ERROR = 'EDIT_FORM_SET_ERROR';
export const EDIT_FORM_UPDATE_ITEM_FIELD = 'EDIT_FORM_UPDATE_ITEM_FIELD';
export const EDIT_FORM_DELETE_ITEM_FIELD = 'EDIT_FORM_DELETE_ITEM_FIELD';
......@@ -102,11 +103,18 @@ export const setFormModalItem = item => ({
item,
});
export const setFormModalError = (fieldId, message = null) => ({
type: EDIT_FORM_SET_ERROR,
fieldId,
message,
});
export const updateFormModalItemField = (path, value) => ({
type: EDIT_FORM_UPDATE_ITEM_FIELD,
path,
value,
});
export const removeFormModalItemField = path => ({
type: EDIT_FORM_DELETE_ITEM_FIELD,
path,
......
......@@ -2,11 +2,14 @@ import React, { PropTypes } from 'react';
import Immutable from 'immutable';
import { ModalWrapper } from '../Elements';
const form = (WrappedComponent, item, setItem, updateField, removeField, otherProps = {}) => (
const form = (WrappedComponent, {
item, setItem, updateField, removeField, setError, ...otherProps
}) => (
<WrappedComponent
{...otherProps}
item={item}
setItem={setItem}
setError={setError}
updateField={updateField}
removeField={removeField}
/>
......@@ -14,9 +17,8 @@ const form = (WrappedComponent, item, setItem, updateField, removeField, otherPr
const ReduxFormModal = (props) => {
const {
show, item, component, config, // variabls
hideModal, closeModal, setItem, updateField, removeField, // functions
...otherProps // all othet to pass down
show, item, component, config, hideModal, closeModal, errors,
...otherProps
} = props;
if (!show) {
return null;
......@@ -25,9 +27,16 @@ const ReduxFormModal = (props) => {
throw new Error('ReduxFormModal require component parameter');
}
const {
title, labelOk = 'Save', onOk, labelCancel = 'Cancel', onCancel, modalSize = 'large', ...configOtherProps
title, labelOk = 'Save', onOk, labelCancel = 'Cancel', onCancel, modalSize = 'large',
allowSubmitWithError = false, ...configOtherProps
} = config.toJS();
const onOkWithHide = () => {
if (!allowSubmitWithError) {
const hasError = errors.some(error => !error || error.length > 0);
if (hasError) {
return false;
}
}
const callback = hideModal(onOk);
return callback(item);
};
......@@ -43,14 +52,12 @@ const ReduxFormModal = (props) => {
onHide={closeModal}
modalSize={modalSize}
>
{form(
component,
{ form(component, {
item,
setItem,
updateField,
removeField,
{ ...otherProps, ...configOtherProps },
)}
errors,
...otherProps,
...configOtherProps,
})}
</ModalWrapper>
);
};
......@@ -60,6 +67,7 @@ ReduxFormModal.defaultProps = {
item: undefined,
component: undefined,
config: Immutable.Map(),
errors: Immutable.Map(),
};
ReduxFormModal.propTypes = {
......@@ -70,9 +78,11 @@ ReduxFormModal.propTypes = {
PropTypes.func,
]),
config: PropTypes.instanceOf(Immutable.Map),
errors: PropTypes.instanceOf(Immutable.Map),
hideModal: PropTypes.func.isRequired,
closeModal: PropTypes.func.isRequired,
setItem: PropTypes.func.isRequired,
setError: PropTypes.func.isRequired,
updateField: PropTypes.func.isRequired,
removeField: PropTypes.func.isRequired,
};
......
......@@ -5,10 +5,12 @@ import {
formModalItemSelector,
formModalComponentSelector,
formModalConfigSelector,
formModalErrosSelector,
} from '../../selectors/guiSelectors';
import {
hideFormModal,
setFormModalItem,
setFormModalError,
updateFormModalItemField,
removeFormModalItemField,
showConfirmModal,
......@@ -20,6 +22,7 @@ const mapStateToProps = state => ({
item: formModalItemSelector(state),
component: formModalComponentSelector(state),
config: formModalConfigSelector(state),
errors: formModalErrosSelector(state),
});
const mapDispatchToProps = dispatch => ({
......@@ -57,6 +60,9 @@ const mapDispatchToProps = dispatch => ({
removeField: (path) => {
dispatch(removeFormModalItemField(path));
},
setError: (fieldId, message) => {
dispatch(setFormModalError(fieldId, message));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ReduxFormModal);
......@@ -9,6 +9,7 @@ import {
EDIT_FORM_SHOW,
EDIT_FORM_HIDE,
EDIT_FORM_SET_ITEM,
EDIT_FORM_SET_ERROR,
EDIT_FORM_UPDATE_ITEM_FIELD,
EDIT_FORM_DELETE_ITEM_FIELD,
onBoardingStates,
......@@ -78,6 +79,14 @@ const pageReducer = (state = defaultState, action) => {
return state.setIn(['formModalData', 'item'], action.item);
}
case EDIT_FORM_SET_ERROR: {
const { fieldId, message = null } = action;
if (message === null) {
return state.deleteIn(['formModalData', 'errors', fieldId]);
}
return state.setIn(['formModalData', 'errors', fieldId], message);
}
case EDIT_FORM_UPDATE_ITEM_FIELD: {
const { path, value } = action;
const arrayPath = Array.isArray(path) ? path : [path];
......
......@@ -55,6 +55,13 @@ export const formModalConfigSelector = createSelector(
getFormModalConfig,
config => config,
);
const getFormModalErrors = state => state.guiState.page.getIn(['formModalData', 'errors']);
export const formModalErrosSelector = createSelector(
getFormModalErrors,
errors => errors,
);
const getFormModalShowState = state => state.guiState.page.getIn(['formModalData', 'show']);
export const formModalShowStateSelector = createSelector(
getFormModalShowState,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment