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

package/src/ui/nav/Tree/Tree.tsx

@@ -0,0 +1,303 @@
+import * as React from 'react';
+import _isString from 'lodash-es/isString';
+import _omit from 'lodash-es/omit';
+import _isEqual from 'lodash-es/isEqual';
+import _keys from 'lodash-es/keys';
+import {useEffectOnce} from 'react-use';
+import {useCallback, useMemo, useState} from 'react';
+import {useComponents, useSelector} from '../../../hooks';
+import {getActiveRouteIds, getNavItems, getRouteId, getRouterParams} from '../../../reducers/router';
+import {IRouteItem} from '../Router/Router';
+import {IButtonProps} from '../../form/Button/Button';
+
+export interface ITreeItem extends IButtonProps {
+    /**
+     * Идентификатор узла
+     */
+    id?: string | number,
+
+    /**
+     * Вложенные элементы
+     * [{id: 2, label: 'Nested element', items: [...]}]
+     */
+    items?: any[],
+
+    /**
+     * Скрыть или показать узел
+     * @example true
+     */
+    visible?: boolean
+}
+
+/**
+ * Tree
+ * Компонент, который представляет в виде дерева список с иерархической структурой данных
+ */
+export interface ITreeProps {
+    /**
+     * Идентификатор (ключ) для сохранения в LocalStorage коллекции с раскрытыми узлами
+     * @example 'exampleTree'
+     */
+    id?: string;
+
+    /**
+     * Коллекция с узлами. Также можно передать идентификатор роута, тогда компонент найдет все
+     * вложенные роуты и отобразит их в виде дерева.
+     * @example [{id: 1, label: 'Root', items: [...]}] | 'root'
+     */
+    items?: ITreeItem[] | string;
+
+    /**
+     * Ограничивает максимальный уровень вложенности дерева
+     * @example 2
+     */
+    level?: number;
+
+    /**
+     * Ключ для доступа к вложенным элементам узла
+     * @example 'items'
+     */
+    itemsKey?: string;
+
+    /**
+     * Идентификатор узла, которой нужно отобразить в раскрытом виде
+     * @example 2
+     */
+    selectedItemId?: string | number;
+
+    /**
+     * CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента
+     * @example MyCustomView
+     */
+    view?: any;
+
+    /**
+     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
+     * @example 1
+     */
+    autoOpenLevels?: number;
+
+    /**
+     * Обработчик на клик по узлу
+     * @param args
+     */
+    onItemClick?: (...args: any[]) => any;
+
+    /**
+     * Отображать раскрытыми узлы из LocalStorage
+     * @example true
+     */
+    autoSave?: boolean;
+
+    [key: string]: any;
+}
+
+export interface ITreeViewProps extends ITreeProps {
+    items: (ITreeItem & {
+        uniqId: string,
+        className: CssClassName,
+        index: number,
+        level: number,
+        isOpened: boolean,
+        isSelected: boolean,
+        hasItems: boolean,
+        onClick: (e: Event | React.MouseEvent | any) => void,
+    })[],
+    levelPadding?: number
+}
+
+const resolveId = (item, index, parentId) => (parentId ? parentId + '.' : '') + String(item.id || index);
+
+function Tree(props: ITreeProps) {
+    const components = useComponents();
+    const STORAGE_KEY_PREFIX = 'tree_';
+
+    //State
+    const [selectedUniqId, setSelectedUniqId] = useState<string>(null);
+    const [openedItems, setOpenedItems] = useState<{ [key: string] : boolean }>({});
+
+    //Redux connection
+    const {routes, selectedItemId, activeRouteIds, routerParams} = useSelector(state => ({
+        routes: _isString(props.items) ? getNavItems(state, props.items) : null,
+        selectedItemId: _isString(props.items) ? getRouteId(state) : props.selectedItemId,
+        activeRouteIds: getActiveRouteIds(state),
+        routerParams: getRouterParams(state),
+    }));
+
+    const items = useMemo(() => {
+        if (routes) {
+            const routeToItem = (route: IRouteItem) => {
+                const routeItems = (
+                    Array.isArray(route.items)
+                        ? route.items.map(r => routeToItem(r))
+                        : Object.keys(route.items || {}).map(id => routeToItem(route.items[id]))
+                ).filter(r => r.visible);
+
+                return {
+                    id: route.id,
+                    label: route.label || route.title,
+                    visible: route.isNavVisible !== false,
+                    toRoute: routeItems.length === 0 ? route.id : null,
+                    toRouteParams: routeItems.length === 0 ? props.routerParams : null,
+                    items: routeItems,
+                    icon: route.icon,
+                };
+            };
+            return (routes as IRouteItem[]).map(route => routeToItem(route)).filter(r => r.visible);
+        }
+
+        if (Array.isArray(props.items)) {
+            return props.items;
+        }
+        return [];
+    }, [props.items, props.routerParams, routes]);
+
+    const findChildById = (sourceItems: ITreeItem[], itemId: string, parentId = '', level = 1) => {
+        let finedItem = null;
+        if (_isString(sourceItems)) {
+            return null;
+        }
+
+        (sourceItems || []).forEach((item, index) => {
+            const uniqId = resolveId(item, index, parentId);
+            if (!finedItem && (item.id === itemId || uniqId === itemId)) {
+                finedItem = {
+                    ...item,
+                    uniqId,
+                    level,
+                };
+            }
+            if (!finedItem) {
+                finedItem = findChildById(
+                    item[props.itemsKey],
+                    itemId,
+                    uniqId,
+                    level + 1,
+                );
+            }
+        });
+        return finedItem;
+    };
+
+    const autoOpen = (sourceItems: ITreeItem[], parentId = '', level = 1) => {
+        let opened = {};
+
+        (sourceItems || []).forEach((item, index) => {
+            const uniqId = resolveId(item, index, parentId);
+            if (props.autoOpenLevels >= level) {
+                opened[uniqId] = true;
+            }
+
+            if (selectedItemId === item.id) {
+                opened[uniqId] = true;
+            }
+
+            if (selectedItemId) {
+                const finedItem = findChildById(
+                    item[props.itemsKey],
+                    selectedItemId,
+                );
+                if (finedItem) {
+                    opened[uniqId] = true;
+                }
+            }
+            opened = {
+                ...opened,
+                ...autoOpen(item[props.itemsKey], uniqId, level + 1),
+            };
+        });
+        return opened;
+    };
+
+    // Initial opened items
+    useEffectOnce(() => {
+        // TODO add  clientStorage
+        // const key = STORAGE_KEY_PREFIX + props.id;
+        // const opened = !this.state && this.props.clientStorage.get(key) && this.props.autoSave
+        //     ? JSON.parse(this.props.clientStorage.get(key))
+        //     : this._autoOpen(this.props._items);
+
+        const opened = autoOpen(items);
+        const selectedItem = findChildById(items as ITreeItem[], selectedItemId);
+        setOpenedItems(opened);
+        setSelectedUniqId(selectedItem ? selectedItemId.uniqId : null);
+    });
+
+    const onItemClick = useCallback((e, uniqId, item) => {
+        e.preventDefault();
+        if (props.onItemClick) {
+            props.onItemClick.call(null, e, item);
+        }
+
+        setSelectedUniqId(selectedUniqId === uniqId ? null : uniqId);
+
+        if (item.items?.length > 0) {
+            const newItems = {...openedItems, [uniqId]: !openedItems[uniqId]};
+            setOpenedItems(newItems);
+            // TODO add  clientStorage
+            // const key = STORAGE_KEY_PREFIX + this.props.id;
+            // this.props.clientStorage.set(key, JSON.stringify(this.state.opened));
+        }
+    }, [openedItems, props.onItemClick, selectedUniqId]);
+
+    const resultItems = useMemo(() => {
+        const getItems = (sourceItems: ITreeItem, parentId = '', level = 0) => {
+            let result = [];
+            if (props.level && level === props.level) {
+                return [];
+            }
+
+            (sourceItems || []).forEach((item, index) => {
+                const uniqId = resolveId(item, index, parentId);
+                const isOpened = !!openedItems[uniqId];
+                let hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
+
+                if (props.level && (level === props.level - 1)) {
+                    hasItems = false;
+                }
+
+                result.push({
+                    ...item,
+                    uniqId,
+                    index,
+                    level,
+                    isOpened,
+                    isSelected: selectedUniqId === uniqId
+                        || (
+                            activeRouteIds.includes(item.toRoute)
+                            && _isEqual(item.toRouteParams || {}, _omit(routerParams, _keys(item.toRouteParams)))
+                        ),
+                    hasItems,
+                    onClick: e => onItemClick(e, uniqId, item),
+                });
+                if (isOpened) {
+                    result = result.concat(
+                        getItems(item[props.itemsKey], uniqId, level + 1),
+                    ).filter(Boolean);
+                }
+            });
+            return result;
+        };
+
+        return getItems(items as ITreeItem[]);
+    }, [activeRouteIds, items, onItemClick, openedItems, props.itemsKey, props.level, routerParams, selectedUniqId]);
+
+    return components.ui.renderView(props.view || 'nav.TreeView', {
+        ...props,
+        items: resultItems,
+    });
+}
+
+Tree.defaultProps = {
+    itemsKey: 'items',
+    autoOpenLevels: 1,
+    autoSave: false,
+    level: 0,
+};
+
+export default Tree;

package/src/ui/nav/Tree/demo/auto-open-levels.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Tree from '../Tree';
+import {items} from './basic';
+
+/**
+ * The max opened nesting level is 3
+ * @order 3
+ * @col 8
+ */
+export default () => (
+    <>
+        <Tree
+            items={items}
+            autoOpenLevels={3}
+        />
+    </>
+);

package/src/ui/nav/Tree/demo/basic.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Tree from '../Tree';
+
+export const items = [
+    {
+        id: 1,
+        label: 'label 1',
+        items: [
+            {
+                id: 2,
+                label: 'label 2.1',
+                items: [
+                    {
+                        id: 3,
+                        label: 'label 3',
+                        items: [
+                            {
+                                id: 4,
+                                label: 'label 4',
+                                items: [
+                                    {
+                                        id: 5,
+                                        label: 'label 5',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 2.2,
+                label: 'label 2.2',
+            },
+        ],
+    },
+];
+
+/**
+ * Basic
+ * @order 1
+ * @col 8
+ */
+export default () => (
+    <>
+        <Tree items={items} />
+    </>
+);

package/src/ui/nav/Tree/demo/level.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Tree from '../Tree';
+import {items} from './basic';
+
+/**
+ * The max available nesting level is 2
+ * @order 2
+ * @col 8
+ */
+export default () => (
+    <>
+        <Tree
+            items={items}
+            level={2}
+        />
+    </>
+);

package/src/ui/nav/Tree/demo/routes.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Tree from '../Tree';
+
+/**
+ * Tree of routes
+ * @order 5
+ * @col 8
+ */
+export default () => (
+    <>
+        <Tree items='root' />
+    </>
+);

package/src/ui/nav/Tree/demo/selected-item.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Tree from '../Tree';
+import {items} from './basic';
+
+/**
+ * 'label 4' is specially opened node
+ * @order 4
+ * @col 8
+ */
+export default () => (
+    <>
+        <Tree
+            items={items}
+            selectedItemId={4}
+        />
+    </>
+);

package/src/ui/nav/Tree/index.ts

@@ -0,0 +1,2 @@
+import Tree from './Tree';
+export default Tree;

package/src/ui/nav/index.ts

@@ -0,0 +1,5 @@
+import Nav from './Nav';
+import Router from './Router';
+import Link from './Link';
+import Breadcrumbs from './Breadcrumbs';
+export { Nav, Router, Link, Breadcrumbs };

package/src/utils/calendar.ts

@@ -0,0 +1,54 @@
+import moment from 'moment';
+
+export const convertDate = (
+    date: string | Date,
+    fromFormats: string | string[],
+    toFormat: string = null,
+    utc = false,
+    dateInUtc = false,
+) => {
+    if (!date) {
+        return null;
+    }
+
+    let momentDate;
+
+    if (typeof date === 'string' && fromFormats) {
+        const validFormat = [].concat(fromFormats || []).find(format => (
+            date
+            && date.length === format.length
+            && moment(date, format).isValid()
+        ));
+        if (!validFormat) {
+            return null;
+        }
+
+        if (dateInUtc) {
+            momentDate = moment.utc(date, validFormat);
+        } else {
+            momentDate = moment(date, validFormat);
+        }
+    } else if (date instanceof Date) {
+        momentDate = moment(date);
+    }
+
+    if (!momentDate) {
+        return null;
+    }
+
+    if (utc) {
+        momentDate = momentDate.utc();
+    } else {
+        momentDate = momentDate.local();
+    }
+
+    return toFormat ? momentDate.format(toFormat) : momentDate.toDate();
+};
+
+/**
+ * Регулярка проверяет соответствие введенной строки формату 'hh:mm'
+ * Максимальная величина - 23:59
+ * @param time
+ */
+//const timeRegexp = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/;
+//export const validateTime = (time: string) => time.match(timeRegexp) !== null;

package/src/utils/collection.ts

@@ -0,0 +1,14 @@
+import _isArray from 'lodash-es/isArray';
+
+// eslint-disable-next-line import/prefer-default-export
+export const indexBy = (collection, key) => {
+    if (!_isArray(collection)) {
+        return collection;
+    }
+
+    const result = {};
+    (collection || []).forEach(item => {
+        result[item[key]] = item;
+    });
+    return result;
+};

package/src/utils/data.ts

@@ -0,0 +1,160 @@
+import _uniqBy from 'lodash-es/uniqBy';
+import _isString from 'lodash-es/isString';
+import _isArray from 'lodash-es/isArray';
+import _some from 'lodash-es/some';
+import _has from 'lodash-es/has';
+import _isObject from 'lodash-es/isObject';
+import _isInteger from 'lodash-es/isInteger';
+import _isFunction from 'lodash-es/isFunction';
+import _every from 'lodash-es/every';
+
+/**
+ * Normalize items for save to state. Support enum class or normal items list.
+ * @param {array|object} items
+ * @returns {*}
+ */
+export const normalizeItems = (items) => {
+    // Array
+    if (_isArray(items)) {
+        // List of strings/numbers
+        if (_some(items, item => _isString(item) || _isInteger(item))) {
+            return items.map(item => {
+                if (_isString(item) || _isInteger(item)) {
+                    return {
+                        id: item,
+                        label: item,
+                    };
+                }
+                return item;
+            });
+        }
+        // Labels as ids
+        if (_some(items, item => !_has(item, 'id'))) {
+            return _uniqBy(
+                items.map(item => ({
+                    id: item.label,
+                    ...item,
+                })),
+                'label',
+            );
+        }
+        return items;
+    }
+    // Enum
+    if (_isObject(items) && _isFunction(items.getLabels)) {
+        const labels = items.getLabels();
+        return Object.keys(labels).map(id => ({
+            id,
+            label: labels[id],
+        }));
+    }
+    return [];
+};
+
+export const checkCondition = (item, condition) => {
+    if (_isObject(condition) && !_isArray(condition)) {
+        return _every(Object.keys(condition), key => {
+            const value = condition[key];
+            const operator = _isString(value) ? 'like' : '=';
+            return checkCondition(item, [operator, key, value]);
+        });
+    }
+    if (_isArray(condition) && condition.length > 1) {
+        const operator = condition[0].toLowerCase();
+
+        // ['not', {role: 'admin'}]
+        if (operator.indexOf('not') === 0) {
+            const newOperator = operator.replace(/^not\s+/, '');
+            return !checkCondition(item, [newOperator].concat(condition.slice(1)));
+        }
+
+        const key = condition[1];
+        const value = condition[2];
+        switch (operator) {
+            case '=': // ['=', 'age', 18]
+                return item[key] === value;
+
+            case '>': // ['>', 'age', 18]
+                return item[key] > value;
+
+            case '>=': // ['>=', 'age', 18]
+            case '=>':
+                return item[key] >= value;
+
+            case '<': // ['<', 'age', 18]
+                return item[key] < value;
+
+            case '<=': // ['<=', 'age', 18]
+            case '=<':
+                return item[key] <= value;
+
+            case 'and': // ['and', {isActive: true}, ['=', 'name', 'Ivan']]
+            case '&&':
+                return _every(condition.slice(1), subCondition => checkCondition(item, subCondition));
+
+            case 'or': // ['or', {isAdmin: true}, ['=', 'name', 'Ivan']]
+            case '||':
+                return _some(condition.slice(1), subCondition => checkCondition(item, subCondition));
+
+            case 'like': // ['like', 'name', 'alex']
+                return _isString(item[key]) && item[key].toLowerCase().indexOf(value.toLowerCase()) !== -1;
+
+            case 'between': // ['between', 'size', 5, 10]
+                return condition[2] <= value && value <= condition[3];
+
+            case 'in': // ['in', 'ids', [5, 6, 10]]
+                return _isArray(item[key]) && item[key].includes(value);
+
+            default:
+                throw Error('Wrong operator: ' + operator);
+        }
+    }
+    if (_isFunction(condition)) {
+        return !!condition(item);
+    }
+
+    return true;
+};
+
+export const filterItems = (items: Array<any>, condition: any) => items.filter(item => checkCondition(item, condition));
+
+const shouldUpdateSingle = (a, b) => {
+    if (_isFunction(a) && _isFunction(b)) {
+        return false;
+    }
+    return a !== b;
+};
+
+export const shouldUpdate = (objA, objB, deepPaths = null) => {
+    if (_isObject(objA) && _isObject(objB)) {
+        const keysA = Object.keys(objA);
+        const keysB = Object.keys(objB);
+        if (keysA.length !== keysB.length) {
+            return true;
+        }
+
+        // Convert deep paths to array of arrays
+        if (deepPaths) {
+            deepPaths = deepPaths.map(p => _isString(p) ? p.split('.') : p);
+        }
+
+        for (let i = 0; i < keysA.length; i += 1) {
+            const key = keysA[i];
+            let deepPath = null;
+            if (deepPaths) {
+                deepPath = deepPaths.find(p => p[0] === key) || null;
+            }
+
+            const hasChanges = deepPath
+                ? shouldUpdate(objA[key], objB[key], deepPath)
+                : shouldUpdateSingle(objA[key], objB[key]);
+            if (hasChanges) {
+                console.log(0, 'shouldUpdate changed key:', key, objA[key], objB[key]);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    return shouldUpdateSingle(objA, objB);
+};