@steroidsjs/core 2.1.0-beta.9 → 2.2.2

package/src/reducers/form.ts

@@ -0,0 +1,94 @@
+import _get from 'lodash-es/get';
+import _isEqual from 'lodash-es/isEqual';
+import _cloneDeep from 'lodash-es/cloneDeep';
+import _isObject from 'lodash-es/isObject';
+import {set as _set, delete as _delete} from 'dot-prop-immutable';
+
+import {
+    FORM_INITIALIZE,
+    FORM_CHANGE,
+    FORM_SET_ERRORS,
+    FORM_SUBMIT,
+    FORM_RESET,
+    FORM_ARRAY_ADD,
+    FORM_ARRAY_REMOVE,
+} from '../actions/form';
+
+/**
+ * Редьюрес для одной формы. Используется как для Redux, так и для React Reducer
+ * @param state
+ * @param action
+ */
+export function reducerItem(state, action) {
+    if (!state && action.type !== FORM_INITIALIZE) {
+        state = reducerItem(state, {
+            type: FORM_INITIALIZE,
+            formId: action.formId,
+        });
+    }
+
+    switch (action.type) {
+        case FORM_INITIALIZE:
+            return {
+                errors: {},
+                isInvalid: false,
+                isSubmitting: false,
+                ...state,
+                values: state?.values || _cloneDeep(action.values || {}),
+                initialValues: action.values || state?.values || null,
+            };
+
+        case FORM_CHANGE:
+            if (_isObject(action.nameOrObject)) {
+                const newValues = {
+                    ...state.values,
+                    ...action.nameOrObject,
+                };
+                if (!_isEqual(state.values, newValues)) {
+                    return {
+                        ...state,
+                        values: {
+                            ...state.values,
+                            ...action.nameOrObject,
+                        },
+                    };
+                }
+                return state;
+            }
+            return _set(state, 'values.' + action.nameOrObject, action.value);
+
+        case FORM_SET_ERRORS:
+            return _set(state, 'errors', action.errors);
+
+        case FORM_SUBMIT:
+            return _set(state, 'submitCounter', (state.submitCounter || 0) + 1);
+
+        case FORM_RESET:
+            return _set(state, 'values', _cloneDeep(state.initialValues || {}));
+
+        case FORM_ARRAY_ADD:
+            // eslint-disable-next-line no-case-declarations
+            const newValue = [].concat(_get(state, 'values.' + action.name) || []);
+            for (let i = 0; i < action.rowsCount; i += 1) {
+                newValue.push(_cloneDeep(action.initialValues || {}));
+            }
+            return _set(state, 'values.' + action.name, newValue);
+
+        case FORM_ARRAY_REMOVE:
+            return _delete(state, 'values.' + action.name + '.' + action.index);
+
+        default:
+            return state;
+    }
+}
+
+const initialState = {};
+export default (state = initialState, action) => {
+    if (action.formId) {
+        return _set(state, action.formId, reducerItem(state[action.formId], action));
+    }
+    return state;
+};
+
+export const formSelector = (state, formId, selector) => selector(state.form?.[formId] || {});
+export const getFormValues = (state, formId) => state.form?.[formId]?.values || null;

package/src/reducers/index.ts

@@ -0,0 +1,24 @@
+import {combineReducers} from 'redux';
+import auth from './auth';
+import fields from './fields';
+import form from './form';
+import list from './list';
+import notifications from './notifications';
+import modal from './modal';
+import router from './router';
+import screen from './screen';
+
+export {
+    form, auth, fields, list, notifications, modal, router, screen,
+};
+export default asyncReducers => combineReducers({
+    form,
+    auth,
+    fields,
+    list,
+    notifications,
+    modal,
+    screen,
+    ...asyncReducers,
+    router: (state, action) => router(asyncReducers.router ? asyncReducers.router(state, action) : {}, action),
+});

package/src/reducers/list.ts

@@ -0,0 +1,196 @@
+import _get from 'lodash-es/get';
+import _isMatch from 'lodash-es/isMatch';
+import _every from 'lodash-es/every';
+import _extend from 'lodash-es/extend';
+import {
+    LIST_INIT,
+    LIST_SET_ITEMS,
+    LIST_BEFORE_FETCH,
+    LIST_AFTER_FETCH,
+    LIST_ITEM_ADD,
+    LIST_ITEM_UPDATE,
+    LIST_DESTROY,
+    LIST_TOGGLE_ITEM,
+    LIST_TOGGLE_ALL,
+    LIST_SET_LAYOUT,
+} from '../actions/list';
+
+const initialState = {
+    lists: {},
+    selectedIds: {},
+};
+
+const reducerMap = {
+    [LIST_INIT]: (state, action) => ({
+        ...state,
+        lists: {
+            ...state.lists,
+            [action.payload.listId]: {
+                meta: {},
+                total: action.payload.total || (action.payload.items ? action.payload.items.length : 0),
+                isFetched: !!action.payload.items,
+                isLoading: false,
+                ...action.payload,
+            },
+        },
+    }),
+    [LIST_SET_ITEMS]: (state, action) => ({
+        ...state,
+        lists: {
+            ...state.lists,
+            [action.listId]: {
+                ...state.lists[action.listId],
+                items: action.items,
+            },
+        },
+    }),
+    [LIST_BEFORE_FETCH]: (state, action) => ({
+        ...state,
+        lists: {
+            ...state.lists,
+            [action.listId]: {
+                ...state.lists[action.listId],
+                isLoading: true,
+            },
+        },
+    }),
+    [LIST_AFTER_FETCH]: (state, action) => {
+        let items;
+        const list = state.lists[action.listId];
+        if (list.items === action.items) {
+            // No changes
+            items = list.items;
+        } else if (list && list.items && list.loadMore && action.page > 1) {
+            items = [].concat(list.items);
+            action.items.forEach((entry, i) => {
+                const index = (action.page - 1) * action.pageSize + i;
+                items[index] = entry;
+            });
+        } else {
+            items = [].concat(action.items);
+        }
+        return {
+            ...state,
+            lists: {
+                ...state.lists,
+                [action.listId]: {
+                    ...list,
+                    ...action,
+                    items,
+                    isFetched: true,
+                    isLoading: false,
+                },
+            },
+        };
+    },
+    [LIST_ITEM_ADD]: (state, action) => {
+        if (state.lists[action.listId]) {
+            return {
+                ...state,
+                lists: {
+                    ...state.lists,
+                    [action.listId]: {
+                        ...state.lists[action.listId],
+                        items: action.prepend
+                            ? []
+                                .concat(action.item)
+                                .concat(state.lists[action.listId].items)
+                            : []
+                                .concat(state.lists[action.listId].items)
+                                .concat(action.item),
+                    },
+                },
+            };
+        }
+        return [];
+    },
+    [LIST_ITEM_UPDATE]: (state, action) => ({
+        ...state,
+        lists: {
+            ...state.lists,
+            [action.listId]: {
+                ...state.lists[action.listId],
+                items: state.lists[action.listId].items.map(item => {
+                    if (_isMatch(item, action.condition)) {
+                        item = _extend({}, item, action.item);
+                    }
+                    return item;
+                }),
+            },
+        },
+    }),
+    [LIST_DESTROY]: (state, action) => {
+        delete state.lists[action.listId];
+        return {
+            ...state,
+            lists: {
+                ...state.lists,
+            },
+        };
+    },
+    [LIST_TOGGLE_ITEM]: (state, action) => {
+        const selectedIds = _get(state, ['selectedIds', action.listId]) || [];
+        const index = selectedIds.indexOf(action.itemId);
+        if (index === -1) {
+            selectedIds.push(action.itemId);
+        } else {
+            selectedIds.splice(index, 1);
+        }
+        return {
+            ...state,
+            selectedIds: {
+                ...state.selectedIds,
+                [action.listId]: [].concat(selectedIds),
+            },
+        };
+    },
+    [LIST_TOGGLE_ALL]: (state, action) => {
+        const list4 = state.lists[action.listId];
+        if (list4) {
+            const ids = list4.items.map(item => item[list4.primaryKey]) || [];
+            const isAll = state.selectedIds[action.listId]
+                && _every(ids.map(id => state.selectedIds[action.listId].includes(id)));
+            return {
+                ...state,
+                selectedIds: {
+                    ...state.selectedIds,
+                    [action.listId]: isAll ? [] : ids,
+                },
+            };
+        }
+        return [];
+    },
+    [LIST_SET_LAYOUT]: (state, action) => ({
+        ...state,
+        lists: {
+            ...state.lists,
+            [action.listId]: {
+                ...state.lists[action.listId],
+                layoutName: action.layoutName,
+            },
+        },
+    }),
+};
+
+export default (state = initialState, action) => reducerMap[action.type]
+    ? reducerMap[action.type](state, action)
+    : state;
+
+export const isListInitialized = (state, listId) => !!_get(state, ['list', 'lists', listId]);
+export const getList = (state, listId) => _get(state, ['list', 'lists', listId]) || null;
+export const getIds = (state, listId) => {
+    const list = getList(state, listId);
+    return (
+        (list && list.items && list.items.map(item => item[list.primaryKey])) || []
+    );
+};
+export const getListItems = (state, listId) => _get(state, ['list', 'lists', listId, 'items']);
+export const getCheckedIds = (state, listId) => _get(state, ['list', 'selectedIds', listId]) || [];
+export const isChecked = (state, listId, itemId) => getCheckedIds(state, listId).includes(itemId);
+export const isCheckedAll = (state, listId) => {
+    const selectedIds = getCheckedIds(state, listId);
+    return (
+        selectedIds.length > 0
+        && _every(getIds(state, listId).map(id => selectedIds.includes(id)))
+    );
+};

package/src/reducers/modal.ts

@@ -0,0 +1,73 @@
+import _get from 'lodash-es/get';
+import {set as _set, delete as _delete} from 'dot-prop-immutable';
+import {MODAL_OPEN, MODAL_CLOSE, MODAL_MARK_CLOSING} from '../actions/modal';
+
+export const MODAL_DEFAULT_GROUP = 'modal';
+
+export interface IModal {
+    id: string | number,
+    modal: any,
+    props: any,
+    isClosing: boolean,
+}
+
+const initialState = {
+    opened: {} as Record<string, IModal[]>,
+};
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case MODAL_OPEN:
+            return (() => {
+                const group = action.group || MODAL_DEFAULT_GROUP;
+                const items = _get(state, ['opened', group]) || [];
+                const index = items.findIndex(item => item.id === action.id);
+                if (index !== -1) {
+                    return _set(state, `opened.${group}.${index}.props`, {
+                        ...items[index].props,
+                        ...action.props,
+                    });
+                }
+
+                return _set(state, `opened.${group}`, [
+                    ...items,
+                    {
+                        id: action.id,
+                        modal: action.modal,
+                        props: action.props,
+                        isClosing: false,
+                    },
+                ]);
+            })();
+
+        case MODAL_MARK_CLOSING:
+            return (() => {
+                const group = action.group || MODAL_DEFAULT_GROUP;
+                const items = _get(state, ['opened', group]) || [];
+                const index = items.findIndex(item => item.id === action.id);
+                if (index !== -1) {
+                    return _set(state, `opened.${group}.${index}.isClosing`, true);
+                }
+                return state;
+            })();
+
+        case MODAL_CLOSE:
+            return (() => {
+                const group = action.group || MODAL_DEFAULT_GROUP;
+                const items = _get(state, ['opened', group]) || [];
+                const index = items.findIndex(item => item.id === action.id);
+                if (index !== -1) {
+                    return _delete(state, `opened.${group}.${index}`);
+                }
+                return state;
+            })();
+
+        default:
+            return state;
+    }
+};
+
+export const getOpened = (
+    state,
+    group = MODAL_DEFAULT_GROUP,
+): IModal[] => _get(state, ['modal', 'opened', group]) || null;

package/src/reducers/notifications.ts

@@ -0,0 +1,38 @@
+import {
+    NOTIFICATIONS_SHOW,
+    NOTIFICATIONS_CLOSE,
+} from '../actions/notifications';
+
+const initialState = {
+    items: [],
+    position: '',
+};
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case NOTIFICATIONS_SHOW:
+            return {
+                ...state,
+                items: []
+                    .concat(state.items)
+                    .concat([
+                        {
+                            id: action.id,
+                            level: action.level || 'info',
+                            message: action.message,
+                            isClosing: false,
+                            position: action.position,
+                        },
+                    ]),
+                position: action.position,
+            };
+        case NOTIFICATIONS_CLOSE:
+            return {
+                ...state,
+                items: state.items.filter(item => item.id !== action.id),
+            };
+        default:
+            return state;
+    }
+};
+export const getNotifications = state => state.notifications.items;
+export const getPosition = state => state.notifications.position;

package/src/reducers/router.ts

@@ -0,0 +1,246 @@
+import {parse, compile} from 'path-to-regexp';
+import {matchPath} from 'react-router';
+import * as queryString from 'qs';
+import _get from 'lodash-es/get';
+import _isEmpty from 'lodash-es/isEmpty';
+import _isEqual from 'lodash-es/isEqual';
+import _pick from 'lodash-es/pick';
+import _isArray from 'lodash-es/isArray';
+import _isObject from 'lodash-es/isObject';
+import _isFunction from 'lodash-es/isFunction';
+import {IRouteItem} from '../ui/nav/Router/Router';
+import {
+    ROUTER_INIT_ROUTES,
+    ROUTER_SET_PARAMS,
+} from '../actions/router';
+
+interface IRouterInitialState {
+    location: {
+        pathname: string,
+        search: string,
+        hash: string,
+        query: Record<string, unknown>,
+    },
+    routesTree: IRouteItem,
+    routesMap: { [key: string]: IRouteItem },
+    activeIds: string[],
+    match: {
+        path: string,
+        url: string,
+        isExact: string,
+        params: Record<string, unknown>,
+    },
+
+    params: Record<string, unknown>,
+    configs: any,
+    data: Record<string, unknown>,
+    counters: Record<string, unknown>,
+}
+
+const initialState = {
+    location: null,
+    routesTree: null,
+    routesMap: null,
+    activeIds: null,
+    currentId: null,
+    match: null,
+
+    params: {},
+    configs: [],
+    data: {},
+    counters: {},
+} as IRouterInitialState;
+
+/**
+ * Generate url for route by path and params
+ * @param path
+ * @param params
+ */
+export const buildUrl = (path, params = null) => {
+    // Get url
+    let url = path;
+    let pathKeys = [];
+    try {
+        pathKeys = parse(path)
+            .slice(1)
+            .map((p: any) => p.name);
+        url = compile(path)({
+            ...params,
+        });
+    } catch (e) {
+        // eslint-disable-line no-empty
+    }
+
+    // Append params, which keys is not included in path keys
+    const queryObj = {};
+    Object.keys(params || {})
+        .filter(key => !pathKeys.includes(key))
+        .forEach(key => {
+            queryObj[key] = params[key];
+        });
+    const query = queryString.stringify(queryObj);
+    if (!_isEmpty(query) && url) {
+        url = url + (url.indexOf('?') !== -1 ? '&' : '?') + query;
+    }
+
+    return url;
+};
+
+/**
+ * Return true, if item is 'active' - opened current route or it children
+ */
+const checkIsActive = (state, item) => {
+    // Check is active
+    const pathname = !process.env.IS_SSR && window.location.protocol === 'file:'
+        ? window.location.hash.replace(/^#/, '')
+        : _get(state, 'location.pathname');
+    const checkActive = (subPathname, subItem) => {
+        const match = matchPath(subPathname, _pick(subItem, ['exact', 'strict', 'path']));
+        return !!(match || (subItem.items || []).find(sub => checkActive(subPathname, sub)));
+    };
+    return checkActive(pathname, item);
+};
+
+/**
+ * Normalize routes tree (convert object structure to items[])
+ */
+const normalizeRoutes = (state, item: IRouteItem, activeIds: string[], routesMap: Record<string, unknown>) => {
+    let items = null;
+    if (Array.isArray(item.items)) {
+        items = item.items.map(subItem => normalizeRoutes(state, subItem, activeIds, routesMap));
+    } else if (_isObject(item.items)) {
+        items = Object.keys(item.items)
+            .map(id => normalizeRoutes(state, {...item.items[id], id}, activeIds, routesMap));
+    }
+    const normalizedItem = {
+        ...item,
+        id: item.id,
+        title: item.title || item.title === '' ? item.title : item.label,
+        label: item.label || item.label === '' ? item.label : item.title,
+        icon: item.icon || null,
+        exact: !!item.exact,
+        strict: !!item.strict,
+        path: item.path || '',
+        isVisible: item.isVisible !== false,
+        isNavVisible: item.isNavVisible !== false,
+        component: null, // Do not store component class in redux
+        componentProps: null,
+        roles: item.roles || [],
+        items,
+    };
+
+    routesMap[normalizedItem.id] = normalizedItem;
+    if (checkIsActive(state, normalizedItem)) {
+        activeIds.push(normalizedItem.id);
+    }
+
+    return normalizedItem;
+};
+
+/**
+ * Find route in routes tree
+ */
+const findRecursive = (
+    item: IRouteItem,
+    predicate: string | any,
+    pathItems: IRouteItem[] | null = null,
+): IRouteItem | null => {
+    if ((_isFunction(predicate) && predicate(item)) || predicate === item.id) {
+        if (pathItems) {
+            pathItems.push(item);
+        }
+        return item;
+    }
+
+    if (Array.isArray((item.items))) {
+        const finedItem = item.items.find(subItem => findRecursive(subItem, predicate, pathItems)) || null;
+        if (finedItem && pathItems) {
+            pathItems.push(item);
+        }
+        return finedItem;
+    }
+    return null;
+};
+
+const getMatch = (currentRoute, state) => {
+    const match = currentRoute
+        ? matchPath(String(state.location.pathname), _pick(currentRoute, ['id', 'exact', 'strict', 'path']))
+        : null;
+
+    return match && {
+        ...match,
+        params: {
+            ...state.location.query,
+            ...match.params,
+        },
+    };
+};
+
+const reducerMap = {
+    [ROUTER_INIT_ROUTES]: (state, action) => {
+        const routesMap = {};
+        const activeIds = [];
+        const routesTree = normalizeRoutes(state, action.routes, activeIds, routesMap);
+        const currentRoute = activeIds.length > 0 ? routesMap[activeIds[0]] : null;
+        return {
+            ...state,
+            routesTree,
+            routesMap,
+            activeIds,
+            match: getMatch(currentRoute, state),
+        };
+    },
+    '@@router/LOCATION_CHANGE': (state, action) => {
+        const newActiveIds = Object.keys(state.routesMap).filter(id => checkIsActive(state, state.routesMap[id]));
+        const currentRoute = newActiveIds.length > 0 ? state.routesMap[newActiveIds[0]] : null;
+        if (!_isEqual(newActiveIds, state.activeIds)) {
+            state.activeIds = newActiveIds;
+        }
+
+        return {
+            ...state,
+            match: getMatch(currentRoute, state),
+        };
+    },
+    [ROUTER_SET_PARAMS]: (state, action) => ({
+        ...state,
+        params: {
+            ...state.params,
+            ...state.location.query,
+            ...action.params,
+        },
+    }),
+};
+export default (state = initialState, action) => reducerMap[action.type]
+    ? reducerMap[action.type](state, action)
+    : state;
+
+export const isRouterInitialized = state => !!state.router.routesTree;
+export const getRouterParams = state => _get(state.router, 'params');
+export const getActiveRouteIds = state => _get(state.router, 'activeIds') || null;
+export const getRoutesMap = state => _get(state.router, 'routesMap') || null;
+export const getRouteId = state => _get(state.router, 'activeIds.0') || null;
+export const getRoute = (state, routeId = null): IRouteItem => _get(
+    state.router, ['routesMap', routeId || getRouteId(state)],
+) || null;
+export const getRouteProp = (state, routeId = null, param) => _get(getRoute(state, routeId), param) || null;
+export const getRouteParams = state => _get(state.router, 'match.params') || null;
+export const getRouteParam = (state, param) => _get(getRouteParams(state), param) || null;
+export const getRouteBreadcrumbs = (state, routeId = null): IRouteItem[] => {
+    const items = [];
+    findRecursive(state.router.routesTree, routeId, items);
+    return items.reverse().filter(item => item.isVisible !== false && item.isNavVisible !== false);
+};
+export const getRouteChildren = (state, routeId = null) => {
+    const route = getRoute(state, routeId);
+    return route?.items || null;
+};
+export const getRouteParent = (state, routeId = null, level = 1) => {
+    const route = getRoute(state, routeId);
+    const breadcrumbs = route ? getRouteBreadcrumbs(state, route.id) : [];
+    return breadcrumbs.length > level + 1
+        ? breadcrumbs[breadcrumbs.length - (level + 1)]
+        : null;
+};
+// TODO levels...
+export const getNavItems = (state, routeId/*, level = 1*/) => getRouteChildren(state, routeId);