@steroidsjs/core 3.0.0-beta.61 → 3.0.0-beta.62

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.61",
+ "version": "3.0.0-beta.62",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/ui/layout/Sidebar/Sidebar.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { IMenuProps } from 'src/ui/content/Menu/Menu';
+import { INavItem } from 'src/ui/nav/Nav/Nav';
+import { IIconProps } from 'src/ui/content/Icon/Icon';
+export interface ISidebarItem extends INavItem {
+    /**
+    * Наличие верней границы у элемента
+    */
+    border: boolean;
+}
+interface ISidebarProps extends IUiComponent {
+    /**
+     * Объект с информацией о логотипе.
+     */
+    logo?: {
+        /**
+         * Текст или React-элемент для отображения логотипа.
+         */
+        label: string;
+        /**
+         * Путь к иконке или React-элемент для отображения иконки логотипа.
+         */
+        icon: string | React.ReactElement;
+    };
+    /**
+     * Объект с информацией о пользователе.
+     */
+    user?: {
+        /**
+         * URL изображения пользователя.
+         */
+        picture: string;
+        /**
+         * Имя пользователя.
+         */
+        name: string;
+    };
+    /**
+     * Props для компонента Menu.
+     */
+    menu?: IMenuProps;
+    /**
+     * Элементы навигации для компонента Nav.
+     * Может быть строкой или массивом элементов INavItem.
+     */
+    items?: string | ISidebarItem[];
+    /**
+     * Флаг, определяющий, следует ли разделять элементы навигации.
+     */
+    hasSeparatedNavItem?: boolean;
+    /**
+     * Массив объектов с информацией об иконках для футера.
+     */
+    footerIcons?: IIconProps[];
+    /**
+     * Флаг, определяющий, будет ли сайдбар открытым по умолчанию.
+     */
+    isOpenedByDefault?: boolean;
+    /**
+     * Callback-функция, вызывается при переключении сайдбара.
+     * @param toggleState - текущее состояние сайдбара (открыт или закрыт).
+     */
+    onToggleSidebar?: (toggleState: boolean) => void;
+    /**
+     * Callback-функция, вызывается при клике на элемент навигации.
+     * @param itemId - идентификатор элемента навигации, по которому произошел клик.
+     */
+    onClickItem?: (itemId: number) => void;
+    [key: string]: any;
+}
+export interface ISidebarViewProps extends ISidebarProps {
+    isOpened: boolean;
+    toggleSidebar: VoidFunction;
+    onClickNav: (itemId: number) => void;
+}
+declare function Sidebar(props: ISidebarProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace Sidebar {
+    var defaultProps: {
+        hasSeparatedNavItem: boolean;
+        isOpenedByDefault: boolean;
+    };
+}
+export default Sidebar;

package/ui/layout/Sidebar/Sidebar.js

@@ -0,0 +1,60 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+function Sidebar(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(props.isOpenedByDefault), isOpened = _a[0], setIsOpened = _a[1];
+    var toggleSidebar = (0, react_1.useCallback)(function () {
+        var newState = !isOpened;
+        setIsOpened(newState);
+        if (props === null || props === void 0 ? void 0 : props.onToggleSidebar) {
+            props.onToggleSidebar(newState);
+        }
+    }, [isOpened, props]);
+    var onClickNav = react_1["default"].useCallback(function (itemId) {
+        if (props === null || props === void 0 ? void 0 : props.onClickItem) {
+            props.onClickItem(itemId);
+        }
+    }, [props]);
+    return components.ui.renderView(props.view || 'layout.SidebarView', __assign(__assign({}, props), { isOpened: isOpened, toggleSidebar: toggleSidebar, onClickNav: onClickNav }));
+}
+exports["default"] = Sidebar;
+Sidebar.defaultProps = {
+    hasSeparatedNavItem: false,
+    isOpenedByDefault: true
+};

package/ui/layout/Sidebar/index.d.ts

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

package/ui/layout/Sidebar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Sidebar_1 = __importDefault(require("./Sidebar"));
+exports["default"] = Sidebar_1["default"];

package/ui/layout/index.d.ts

@@ -2,4 +2,5 @@ import Header from './Header';
 import Loader from './Loader';
 import Notifications from './Notifications';
 import Tooltip from './Tooltip';
-export { Header, Loader, Notifications, Tooltip, };
+import Sidebar from './Sidebar';
+export { Header, Loader, Notifications, Tooltip, Sidebar, };

package/ui/layout/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.Tooltip = exports.Notifications = exports.Loader = exports.Header = void 0;
+exports.Sidebar = exports.Tooltip = exports.Notifications = exports.Loader = exports.Header = void 0;
 var Header_1 = __importDefault(require("./Header"));
 exports.Header = Header_1["default"];
 var Loader_1 = __importDefault(require("./Loader"));
@@ -12,3 +12,5 @@ var Notifications_1 = __importDefault(require("./Notifications"));
 exports.Notifications = Notifications_1["default"];
 var Tooltip_1 = __importDefault(require("./Tooltip"));
 exports.Tooltip = Tooltip_1["default"];
+var Sidebar_1 = __importDefault(require("./Sidebar"));
+exports.Sidebar = Sidebar_1["default"];

package/ui/nav/Nav/Nav.d.ts

@@ -44,6 +44,14 @@ export interface INavItem extends IButtonProps {
      * @example {content: 'Some text'}
      */
     contentProps?: any;
+    /**
+    * Вложенные элементы
+    */
+    items?: INavItem[];
+    /**
+    * Props для пункта
+    */
+    itemProps?: IButtonProps;
 }
 /**
  * Nav
@@ -90,6 +98,7 @@ export interface INavViewProps extends INavProps {
     onClick: (item: Record<string, unknown>, index: number) => void;
     items: (INavItem & {
         isActive: boolean;
+        isActiveNested: boolean;
     })[];
     navClassName?: CssClassName;
 }

package/ui/nav/Nav/Nav.js

@@ -43,6 +43,7 @@ var has_1 = __importDefault(require("lodash-es/has"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var react_1 = require("react");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
 var defaultViewMap = {
@@ -85,18 +86,31 @@ function Nav(props) {
             props.onChange.call(null, newActiveTab);
         }
     }, [props.onChange]);
-    var items = (0, react_1.useMemo)(function () { return (Array.isArray(props.items)
-        ? props.items.map(function (item, index) { return (__assign(__assign({}, item), { isActive: activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index) })); })
-            .filter(function (item) { return item.visible !== false; })
-        : (routes || []).map(function (route) { return ({
-            id: route.id,
-            label: route.label,
-            toRoute: route.id,
-            toRouteParams: routerParams,
-            visible: route.isNavVisible,
-            isActive: (activeRouteIds || []).includes(route.id)
-        }); })
-            .filter(function (item) { return item.visible !== false; })); }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
+    var formatItems = React.useCallback(function (items) {
+        if (items === void 0) { items = props.items; }
+        if (Array.isArray(items)) {
+            return items.map(function (item, index) {
+                var _a;
+                return (__assign(__assign({}, item), { isActive: activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index), isActiveNested: !(0, isEmpty_1["default"])((_a = item.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return nestedItem.id === activeTab; })) || false, items: item.items ? formatItems(item.items) : null }));
+            })
+                .filter(function (item) { return item.visible !== false; });
+        }
+        return (routes || []).map(function (route) {
+            var _a;
+            return ({
+                id: route.id,
+                label: route.label,
+                toRoute: route.id,
+                toRouteParams: routerParams,
+                visible: route.isNavVisible,
+                isActive: (activeRouteIds || []).includes(route.id),
+                isActiveNested: ((_a = route.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return activeRouteIds.includes(nestedItem.id); })),
+                items: route.items ? formatItems(route.items) : null
+            });
+        })
+            .filter(function (item) { return item.visible !== false; });
+    }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
+    var items = (0, react_1.useMemo)(function () { return formatItems(); }, [formatItems]);
     return components.ui.renderView(props.view || defaultViewMap[props.layout], __assign(__assign({}, props), { items: items, onClick: onClick, disabled: props.disabled, children: renderContent() }));
 }
 Nav.defaultProps = {