@steroidsjs/core 2.3.0-beta.6 → 2.3.0-beta.9

package/ui/nav/Tree/Tree.d.ts

@@ -1,98 +1,98 @@
-import * as React from 'react';
-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;
-}
-declare function Tree(props: ITreeProps): any;
-declare namespace Tree {
-    var defaultProps: {
-        itemsKey: string;
-        autoOpenLevels: number;
-        autoSave: boolean;
-        level: number;
-    };
-}
-export default Tree;
+import * as React from 'react';
+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;
+}
+declare function Tree(props: ITreeProps): any;
+declare namespace Tree {
+    var defaultProps: {
+        itemsKey: string;
+        autoOpenLevels: number;
+        autoSave: boolean;
+        level: number;
+    };
+}
+export default Tree;

package/ui/nav/Tree/Tree.js

@@ -1,168 +1,168 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var isString_1 = __importDefault(require("lodash-es/isString"));
-var omit_1 = __importDefault(require("lodash-es/omit"));
-var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
-var keys_1 = __importDefault(require("lodash-es/keys"));
-var react_use_1 = require("react-use");
-var react_1 = require("react");
-var hooks_1 = require("../../../hooks");
-var router_1 = require("../../../reducers/router");
-var resolveId = function (item, index, parentId) { return (parentId ? parentId + '.' : '') + String(item.id || index); };
-function Tree(props) {
-    var components = hooks_1.useComponents();
-    var STORAGE_KEY_PREFIX = 'tree_';
-    //State
-    var _a = react_1.useState(null), selectedUniqId = _a[0], setSelectedUniqId = _a[1];
-    var _b = react_1.useState({}), openedItems = _b[0], setOpenedItems = _b[1];
-    //Redux connection
-    var _c = hooks_1.useSelector(function (state) { return ({
-        routes: isString_1["default"](props.items) ? router_1.getNavItems(state, props.items) : null,
-        selectedItemId: isString_1["default"](props.items) ? router_1.getRouteId(state) : props.selectedItemId,
-        activeRouteIds: router_1.getActiveRouteIds(state),
-        routerParams: router_1.getRouterParams(state)
-    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
-    var items = react_1.useMemo(function () {
-        if (routes) {
-            var routeToItem_1 = function (route) {
-                var routeItems = (Array.isArray(route.items)
-                    ? route.items.map(function (r) { return routeToItem_1(r); })
-                    : Object.keys(route.items || {}).map(function (id) { return routeToItem_1(route.items[id]); })).filter(function (r) { return 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.map(function (route) { return routeToItem_1(route); }).filter(function (r) { return r.visible; });
-        }
-        if (Array.isArray(props.items)) {
-            return props.items;
-        }
-        return [];
-    }, [props.items, props.routerParams, routes]);
-    var findChildById = function (sourceItems, itemId, parentId, level) {
-        if (parentId === void 0) { parentId = ''; }
-        if (level === void 0) { level = 1; }
-        var finedItem = null;
-        if (isString_1["default"](sourceItems)) {
-            return null;
-        }
-        (sourceItems || []).forEach(function (item, index) {
-            var uniqId = resolveId(item, index, parentId);
-            if (!finedItem && (item.id === itemId || uniqId === itemId)) {
-                finedItem = __assign(__assign({}, item), { uniqId: uniqId,
-                    level: level });
-            }
-            if (!finedItem) {
-                finedItem = findChildById(item[props.itemsKey], itemId, uniqId, level + 1);
-            }
-        });
-        return finedItem;
-    };
-    var autoOpen = function (sourceItems, parentId, level) {
-        if (parentId === void 0) { parentId = ''; }
-        if (level === void 0) { level = 1; }
-        var opened = {};
-        (sourceItems || []).forEach(function (item, index) {
-            var uniqId = resolveId(item, index, parentId);
-            if (props.autoOpenLevels >= level) {
-                opened[uniqId] = true;
-            }
-            if (selectedItemId === item.id) {
-                opened[uniqId] = true;
-            }
-            if (selectedItemId) {
-                var finedItem = findChildById(item[props.itemsKey], selectedItemId);
-                if (finedItem) {
-                    opened[uniqId] = true;
-                }
-            }
-            opened = __assign(__assign({}, opened), autoOpen(item[props.itemsKey], uniqId, level + 1));
-        });
-        return opened;
-    };
-    // Initial opened items
-    react_use_1.useEffectOnce(function () {
-        // 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);
-        var opened = autoOpen(items);
-        var selectedItem = findChildById(items, selectedItemId);
-        setOpenedItems(opened);
-        setSelectedUniqId(selectedItem ? selectedItemId.uniqId : null);
-    });
-    var onItemClick = react_1.useCallback(function (e, uniqId, item) {
-        var _a;
-        var _b;
-        e.preventDefault();
-        if (props.onItemClick) {
-            props.onItemClick.call(null, e, item);
-        }
-        setSelectedUniqId(selectedUniqId === uniqId ? null : uniqId);
-        if (((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-            var newItems = __assign(__assign({}, openedItems), (_a = {}, _a[uniqId] = !openedItems[uniqId], _a));
-            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]);
-    var resultItems = react_1.useMemo(function () {
-        var getItems = function (sourceItems, parentId, level) {
-            if (parentId === void 0) { parentId = ''; }
-            if (level === void 0) { level = 0; }
-            var result = [];
-            if (props.level && level === props.level) {
-                return [];
-            }
-            (sourceItems || []).forEach(function (item, index) {
-                var uniqId = resolveId(item, index, parentId);
-                var isOpened = !!openedItems[uniqId];
-                var hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
-                if (props.level && (level === props.level - 1)) {
-                    hasItems = false;
-                }
-                result.push(__assign(__assign({}, item), { uniqId: uniqId,
-                    index: index,
-                    level: level,
-                    isOpened: isOpened, isSelected: selectedUniqId === uniqId
-                        || (activeRouteIds.includes(item.toRoute)
-                            && isEqual_1["default"](item.toRouteParams || {}, omit_1["default"](routerParams, keys_1["default"](item.toRouteParams)))), hasItems: hasItems, onClick: function (e) { return onItemClick(e, uniqId, item); } }));
-                if (isOpened) {
-                    result = result.concat(getItems(item[props.itemsKey], uniqId, level + 1)).filter(Boolean);
-                }
-            });
-            return result;
-        };
-        return getItems(items);
-    }, [activeRouteIds, items, onItemClick, openedItems, props.itemsKey, props.level, routerParams, selectedUniqId]);
-    return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: resultItems }));
-}
-Tree.defaultProps = {
-    itemsKey: 'items',
-    autoOpenLevels: 1,
-    autoSave: false,
-    level: 0
-};
-exports["default"] = Tree;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var keys_1 = __importDefault(require("lodash-es/keys"));
+var react_use_1 = require("react-use");
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var router_1 = require("../../../reducers/router");
+var resolveId = function (item, index, parentId) { return (parentId ? parentId + '.' : '') + String(item.id || index); };
+function Tree(props) {
+    var components = hooks_1.useComponents();
+    var STORAGE_KEY_PREFIX = 'tree_';
+    //State
+    var _a = react_1.useState(null), selectedUniqId = _a[0], setSelectedUniqId = _a[1];
+    var _b = react_1.useState({}), openedItems = _b[0], setOpenedItems = _b[1];
+    //Redux connection
+    var _c = hooks_1.useSelector(function (state) { return ({
+        routes: isString_1["default"](props.items) ? router_1.getNavItems(state, props.items) : null,
+        selectedItemId: isString_1["default"](props.items) ? router_1.getRouteId(state) : props.selectedItemId,
+        activeRouteIds: router_1.getActiveRouteIds(state),
+        routerParams: router_1.getRouterParams(state)
+    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
+    var items = react_1.useMemo(function () {
+        if (routes) {
+            var routeToItem_1 = function (route) {
+                var routeItems = (Array.isArray(route.items)
+                    ? route.items.map(function (r) { return routeToItem_1(r); })
+                    : Object.keys(route.items || {}).map(function (id) { return routeToItem_1(route.items[id]); })).filter(function (r) { return 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.map(function (route) { return routeToItem_1(route); }).filter(function (r) { return r.visible; });
+        }
+        if (Array.isArray(props.items)) {
+            return props.items;
+        }
+        return [];
+    }, [props.items, props.routerParams, routes]);
+    var findChildById = function (sourceItems, itemId, parentId, level) {
+        if (parentId === void 0) { parentId = ''; }
+        if (level === void 0) { level = 1; }
+        var finedItem = null;
+        if (isString_1["default"](sourceItems)) {
+            return null;
+        }
+        (sourceItems || []).forEach(function (item, index) {
+            var uniqId = resolveId(item, index, parentId);
+            if (!finedItem && (item.id === itemId || uniqId === itemId)) {
+                finedItem = __assign(__assign({}, item), { uniqId: uniqId,
+                    level: level });
+            }
+            if (!finedItem) {
+                finedItem = findChildById(item[props.itemsKey], itemId, uniqId, level + 1);
+            }
+        });
+        return finedItem;
+    };
+    var autoOpen = function (sourceItems, parentId, level) {
+        if (parentId === void 0) { parentId = ''; }
+        if (level === void 0) { level = 1; }
+        var opened = {};
+        (sourceItems || []).forEach(function (item, index) {
+            var uniqId = resolveId(item, index, parentId);
+            if (props.autoOpenLevels >= level) {
+                opened[uniqId] = true;
+            }
+            if (selectedItemId === item.id) {
+                opened[uniqId] = true;
+            }
+            if (selectedItemId) {
+                var finedItem = findChildById(item[props.itemsKey], selectedItemId);
+                if (finedItem) {
+                    opened[uniqId] = true;
+                }
+            }
+            opened = __assign(__assign({}, opened), autoOpen(item[props.itemsKey], uniqId, level + 1));
+        });
+        return opened;
+    };
+    // Initial opened items
+    react_use_1.useEffectOnce(function () {
+        // 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);
+        var opened = autoOpen(items);
+        var selectedItem = findChildById(items, selectedItemId);
+        setOpenedItems(opened);
+        setSelectedUniqId(selectedItem ? selectedItemId.uniqId : null);
+    });
+    var onItemClick = react_1.useCallback(function (e, uniqId, item) {
+        var _a;
+        var _b;
+        e.preventDefault();
+        if (props.onItemClick) {
+            props.onItemClick.call(null, e, item);
+        }
+        setSelectedUniqId(selectedUniqId === uniqId ? null : uniqId);
+        if (((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            var newItems = __assign(__assign({}, openedItems), (_a = {}, _a[uniqId] = !openedItems[uniqId], _a));
+            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]);
+    var resultItems = react_1.useMemo(function () {
+        var getItems = function (sourceItems, parentId, level) {
+            if (parentId === void 0) { parentId = ''; }
+            if (level === void 0) { level = 0; }
+            var result = [];
+            if (props.level && level === props.level) {
+                return [];
+            }
+            (sourceItems || []).forEach(function (item, index) {
+                var uniqId = resolveId(item, index, parentId);
+                var isOpened = !!openedItems[uniqId];
+                var hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
+                if (props.level && (level === props.level - 1)) {
+                    hasItems = false;
+                }
+                result.push(__assign(__assign({}, item), { uniqId: uniqId,
+                    index: index,
+                    level: level,
+                    isOpened: isOpened, isSelected: selectedUniqId === uniqId
+                        || (activeRouteIds.includes(item.toRoute)
+                            && isEqual_1["default"](item.toRouteParams || {}, omit_1["default"](routerParams, keys_1["default"](item.toRouteParams)))), hasItems: hasItems, onClick: function (e) { return onItemClick(e, uniqId, item); } }));
+                if (isOpened) {
+                    result = result.concat(getItems(item[props.itemsKey], uniqId, level + 1)).filter(Boolean);
+                }
+            });
+            return result;
+        };
+        return getItems(items);
+    }, [activeRouteIds, items, onItemClick, openedItems, props.itemsKey, props.level, routerParams, selectedUniqId]);
+    return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: resultItems }));
+}
+Tree.defaultProps = {
+    itemsKey: 'items',
+    autoOpenLevels: 1,
+    autoSave: false,
+    level: 0
+};
+exports["default"] = Tree;

package/ui/nav/Tree/demo/auto-open-levels.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-/**
- * The max opened nesting level is 3
- * @order 3
- * @col 8
- */
-export default _default;
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * The max opened nesting level is 3
+ * @order 3
+ * @col 8
+ */
+export default _default;

package/ui/nav/Tree/demo/auto-open-levels.js

@@ -1,34 +1,34 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Tree_1 = __importDefault(require("../Tree"));
-var basic_1 = require("./basic");
-/**
- * The max opened nesting level is 3
- * @order 3
- * @col 8
- */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Tree_1["default"], { items: basic_1.items, autoOpenLevels: 3 }))); });
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Tree_1 = __importDefault(require("../Tree"));
+var basic_1 = require("./basic");
+/**
+ * The max opened nesting level is 3
+ * @order 3
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Tree_1["default"], { items: basic_1.items, autoOpenLevels: 3 }))); });