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

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

@@ -1,303 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/src/ui/nav/index.ts

@@ -1,5 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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);
-};