@steroidsjs/core 2.3.0-beta.3 → 2.3.0-beta.5

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,249 @@
+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)
+            .map((p: any) => typeof p === 'object' && p.name)
+            .filter(Boolean);
+        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(/^#/, '')
+            .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 = [];
+    routeId = routeId || getRouteId(state);
+    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);

package/src/reducers/screen.ts

@@ -0,0 +1,47 @@
+import {SCREEN_SET_WIDTH, SCREEN_SET_MEDIA} from '../actions/screen';
+
+export const SCREE_PHONE = 'phone';
+export const SCREEN_TABLET = 'tablet';
+export const SCREEN_DESKTOP = 'desktop';
+
+const initialState = {
+    width: 1280,
+    media: {
+        [SCREE_PHONE]: 320,
+        [SCREEN_TABLET]: 768,
+        [SCREEN_DESKTOP]: 1024,
+    },
+};
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case SCREEN_SET_WIDTH:
+            return {
+                ...state,
+                width: action.width,
+            };
+        case SCREEN_SET_MEDIA:
+            return {
+                ...state,
+                media: {
+                    ...state.media,
+                    ...action.media,
+                },
+            };
+        default:
+            return state;
+    }
+};
+
+export const getDeviceType = state => {
+    if (state.screen.width < state.screen.media[SCREEN_TABLET]) {
+        return SCREE_PHONE;
+    }
+    if (state.screen.width < state.screen.media[SCREEN_DESKTOP]) {
+        return SCREEN_TABLET;
+    }
+    return SCREEN_DESKTOP;
+};
+export const isPhone = state => getDeviceType(state) === SCREE_PHONE;
+export const isTablet = state => getDeviceType(state) === SCREEN_TABLET;
+export const isDesktop = state => getDeviceType(state) === SCREEN_DESKTOP;

package/src/ui/content/Alert/Alert.test.tsx

@@ -0,0 +1,67 @@
+import 'jest-enzyme';
+import mountWithApp from '../../../../tests/mountWithApp';
+import Alert from './Alert';
+
+describe('Alert', () => {
+    it('should render something without props', () => {
+        const wrapper = mountWithApp(Alert);
+        expect(wrapper).not.toBeEmptyRender();
+    });
+
+    describe('Static props', () => {
+        const props = {
+            className: 'test',
+            type: 'info',
+            message: 'Are you sure?',
+            description: 'It is maybe dangerous',
+            style: {width: '45%'},
+            showClose: true,
+            showIcon: true,
+        };
+
+        const wrapper = mountWithApp(Alert, {...props});
+
+        it('should static props transmitted unchanged', () => {
+            expect(wrapper.find('Alert')).toHaveProp(props);
+        });
+        it('should have right type', () => {
+            expect(wrapper.find('.AlertView')).toHaveClassName(`.AlertView_${props.type}`);
+        });
+
+        it('should render icon with right type', () => {
+            expect(wrapper.find('Icon').first()).toHaveClassName(`AlertView__icon_${props.type}`);
+        });
+        it('should render close icon', () => {
+            expect(wrapper.find('.AlertView__icon-close')).toExist();
+        });
+
+        it('should have right external className', () => {
+            expect(wrapper.find('.AlertView')).toHaveClassName(props.className);
+        });
+        it('should have right message and description', () => {
+            expect(wrapper.find('.AlertView__message')).toHaveText(props.message);
+            expect(wrapper.find('.AlertView__description')).toHaveText(props.description);
+        });
+        it('should have right external style', () => {
+            expect(wrapper.find('.AlertView')).toHaveProp('style', props.style);
+        });
+    });
+
+    describe('Actions', () => {
+        const mockedOnClose = jest.fn();
+
+        const props = {
+            showClose: true,
+            showIcon: false,
+            onClose: mockedOnClose,
+        };
+
+        it('should click to Close call callback', () => {
+            const wrapper = mountWithApp(Alert, {...props});
+            // expect(wrapper.find('Alert')).toHaveProp(props);
+
+            wrapper.find('.AlertView__icon-close').first().simulate('click');
+            expect(mockedOnClose.mock.calls.length === 1);
+        });
+    });
+});