@steroidsjs/core 3.0.0-beta.98 → 3.0.0

package/ui/nav/Breadcrumbs/Breadcrumbs.d.ts

@@ -13,7 +13,17 @@ export interface IBreadcrumbsProps {
     className?: CssClassName;
     /**
      * Коллекция элементов навигационной цепочки
-     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
+     * @example
+     * [
+     *  {
+     *   id: 'root',
+     *   title: 'Home'
+     *  },
+     *  {
+     *   id: 'catalog',
+     *   title: 'Catalog'
+     *  }
+     * ]
      */
     items?: IRouteItem[];
     /**

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, SetStateAction } from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 import { DataProviderItems } from '../../../hooks/useDataProvider';
 /**
@@ -9,14 +9,19 @@ import { DataProviderItems } from '../../../hooks/useDataProvider';
 export interface IButtonGroupProps extends IUiComponent {
     /**
      * Элементы для группы кнопок
-     * @example ['button1', 'button2', 'button3']
+     * @example
+     * [
+     *  'button1',
+     *  'button2',
+     *  'button3'
+     * ]
      */
     items: DataProviderItems;
     /**
      * Функция, которая будет вызываться при клике по кнопке
      * @example setActiveTab
      */
-    onClick: (value: number | string | boolean) => void;
+    onClick: ((value: number | string | boolean) => void) | Dispatch<SetStateAction<string | number | boolean>>;
     /**
      * При указании в связке с onClick предоставляет возможность реализовать two-way binding
      * @example 'button1'
@@ -28,7 +33,11 @@ export interface IButtonGroupProps extends IUiComponent {
     defaultActiveButton?: number | string;
     /**
      * Общие свойства для всех кнопок группы
-     * @example {outline: true, color: 'secondary'}
+     * @example
+     * {
+     *  outline: true,
+     *  color: 'secondary'
+     * }
      */
     buttonProps?: IButtonProps;
 }

package/ui/nav/Controls/Controls.d.ts

@@ -27,7 +27,13 @@ export interface IControlItem extends IButtonProps {
 export interface IControlsProps {
     /**
      * Коллекция контролов
-     * @example [{id: 'delete', onClick: () => alert("It's deleted")}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete',
+     *   onClick: () => alert("It's deleted")
+     *  }
+     * ]
      */
     items?: IControlItem[];
     /**

package/ui/nav/Link/Link.d.ts

@@ -3,7 +3,7 @@ import { IButtonProps, IButtonViewProps } from '../../form/Button/Button';
 /**
  * Link
  *
- * Ссылка
+ * С помощью компонента `Link` вы можете легко настраивать цветовую схему элементов ссылок.
  */
 export interface ILinkProps extends IButtonProps {
     [key: string]: any;

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

@@ -35,13 +35,16 @@ export interface INavItem extends IButtonProps {
      */
     visible?: boolean;
     /**
-     * Контент, который отобразиться, если элемент навигации будет активен
+     * Контент, который отобразится, если элемент навигации будет активен
      * @example ContentComponent
      */
     content?: any;
     /**
      * Свойства для компонента с контентом
-     * @example {content: 'Some text'}
+     * @example
+     * {
+     *  content: 'Some text'
+     * }
      */
     contentProps?: any;
     /**
@@ -56,7 +59,9 @@ export interface INavItem extends IButtonProps {
 }
 /**
  * Nav
- * Компонент навигации
+ *
+ * Компонент навигации позволяет переключаться между группами связанного контента.
+ *
  */
 export interface INavProps {
     /**
@@ -67,7 +72,17 @@ export interface INavProps {
     /**
      * Коллекция с элементами навигации. Также можно передать идентификатор роута, тогда компонент найдет все
      * вложенные роуты и отобразит их в навигации.
-     * @example [{id: 1, label: 'One'}, {id: 2, label: 'Two'}] | 'root'
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'One'
+     *  },
+     *  {
+     *   id: 2,
+     *   label: 'Two'
+     *  }
+     * ] | 'root'
      */
     items?: string | INavItem[];
     /**

package/ui/nav/Router/Router.d.ts

@@ -31,12 +31,18 @@ export interface IRouteItem {
      * Путь до роута
      * @example '/catalog'
      */
-    path?: string;
+    path: string;
     /**
      * Если true, то путь должен точно соответствовать location.pathname
      * @example '/catalog'
      */
     exact?: boolean;
+    /**
+     * Если true, то location.pathname будет совпадать с теми путями, которые содержат слеш в конце.
+     * Например, если указать путь '/catalog/', тогда совпадение будет с '/catalog/' и '/catalog/chapter', но не '/catalog'.
+     * @example '/catalog'
+     */
+    strict?: boolean;
     /**
      * В свойстве можно передать как путь, на который осуществится редирект, так и булево значение.
      * Если свойство равно true - то редирект произойдет на первый из вложенных роутов.
@@ -102,7 +108,11 @@ export interface IRouteItem {
      * @return {Array} Например, [{url: '/api/v1/some-data'}, {listId: 'someList', action: '/api/v1/some-list'}]
      */
     preloadData?: (match: Record<string, any>) => (IFetchConfig | IListProps)[];
-    [key: string]: any;
+    /**
+     * Пользовательская иконка svg или название иконки
+     * @example 'circle'
+     */
+    icon?: React.ReactElement | string;
 }
 export interface IRouterProps {
     /**
@@ -118,7 +128,7 @@ export interface IRouterProps {
      * Дерево роутов
      * @example {id: 'root', path: '/', component: IndexPage, items: [...]}
      */
-    routes?: IRouteItem[] | {
+    routes: IRouteItem[] | {
         [key: string]: IRouteItem;
     };
     /**
@@ -137,11 +147,17 @@ export interface IRouterProps {
      * @example SomeComponent
      */
     children?: React.ReactNode;
+    /**
+     * Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути
+     * @example true
+     */
+    alwaysAppendParentRoutePath?: boolean;
 }
 declare function Router(props: IRouterProps): JSX.Element;
 declare namespace Router {
     var defaultProps: {
         autoScrollTop: boolean;
+        alwaysAppendParentRoutePath: boolean;
     };
 }
 export default Router;

package/ui/nav/Router/Router.js

@@ -80,9 +80,10 @@ var renderComponent = function (route, activePath, routeProps) {
     return (React.createElement(Component, __assign({}, routeProps, route.componentProps)));
 };
 function Router(props) {
+    var _a;
     var components = (0, hooks_1.useComponents)();
     var routeParams = (0, hooks_1.useSelector)(router_2.getRouteParams);
-    var _a = (0, hooks_1.useSelector)(function (state) {
+    var _b = (0, hooks_1.useSelector)(function (state) {
         var _a, _b;
         return ({
             isInitialized: (0, router_2.isRouterInitialized)(state),
@@ -91,24 +92,24 @@ function Router(props) {
             activePath: (_b = (_a = state.router) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.pathname,
             activeRouteIds: (0, router_2.getActiveRouteIds)(state)
         });
-    }), isInitialized = _a.isInitialized, pathname = _a.pathname, route = _a.route, activePath = _a.activePath, activeRouteIds = _a.activeRouteIds;
+    }), isInitialized = _b.isInitialized, pathname = _b.pathname, route = _b.route, activePath = _b.activePath, activeRouteIds = _b.activeRouteIds;
     var routeId = (route === null || route === void 0 ? void 0 : route.id) || null;
     // Init routes in redux
     var dispatch = (0, useDispatch_1["default"])();
     (0, react_use_1.useEffectOnce)(function () {
         if (props.routes) {
-            dispatch((0, router_1.initRoutes)((0, helpers_1.walkRoutesRecursive)(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined)));
+            dispatch((0, router_1.initRoutes)((0, helpers_1.walkRoutesRecursive)(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined, {}, props.alwaysAppendParentRoutePath)));
         }
     });
     // Sync route params with redux
-    var prevRouteParams = (0, react_use_1.usePreviousDistinct)(routeParams);
+    var prevRouteParams = (_a = (0, react_use_1.usePreviousDistinct)(routeParams)) !== null && _a !== void 0 ? _a : routeParams;
     (0, react_1.useEffect)(function () {
         if (!(0, isEqual_1["default"])(prevRouteParams, routeParams)) {
             dispatch((0, router_1.initParams)(routeParams));
         }
     }, [dispatch, prevRouteParams, routeParams]);
     // Routes state
-    var _b = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes)), routes = _b[0], setRoutes = _b[1];
+    var _c = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes, true, null, props.alwaysAppendParentRoutePath)), routes = _c[0], setRoutes = _c[1];
     (0, react_use_1.useUpdateEffect)(function () {
         setRoutes(props.routes);
     }, [props.routes]);
@@ -175,6 +176,9 @@ function Router(props) {
         });
         var result = renderComponent(routeItem, activePath, __assign(__assign({}, routeProps), { children: children }));
         if (!result) {
+            if (children) {
+                return children;
+            }
             // eslint-disable-next-line no-console
             console.error('Not found component for route:', routeItem);
         }
@@ -202,6 +206,7 @@ function Router(props) {
     return (React.createElement(connected_react_router_1.ConnectedRouter, { history: components.store.history }, renderContent()));
 }
 Router.defaultProps = {
-    autoScrollTop: true
+    autoScrollTop: true,
+    alwaysAppendParentRoutePath: true
 };
 exports["default"] = Router;

package/ui/nav/Router/helpers.d.ts

@@ -1,4 +1,4 @@
 import { IRouteItem } from './Router';
 export declare const findRedirectPathRecursive: (route: IRouteItem) => any;
-export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any) => any;
-export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean) => Record<string, any>;
+export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => any;
+export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => Record<string, any>;

package/ui/nav/Router/helpers.js

@@ -18,6 +18,7 @@ exports.treeToList = exports.walkRoutesRecursive = exports.findRedirectPathRecur
 var get_1 = __importDefault(require("lodash-es/get"));
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
+var SLASH = '/';
 var findRedirectPathRecursive = function (route) {
     if (!route) {
         return null;
@@ -34,10 +35,36 @@ var findRedirectPathRecursive = function (route) {
         : null;
 };
 exports.findRedirectPathRecursive = findRedirectPathRecursive;
-var walkRoutesRecursive = function (item, defaultItem, parentItem) {
+var addSlashIfNotPresent = function (path) {
+    if (path === void 0) { path = ''; }
+    return path.startsWith(SLASH) ? path : (SLASH + path);
+};
+var joinChildAndParentPaths = function (path, parentPath) {
+    if (path === void 0) { path = ''; }
+    if (parentPath === void 0) { parentPath = null; }
+    if (!parentPath || parentPath === SLASH) {
+        return addSlashIfNotPresent(path);
+    }
+    return addSlashIfNotPresent(parentPath) + addSlashIfNotPresent(path);
+};
+var appendChildIfNoSlash = function (path, parentPath) {
+    if (path === void 0) { path = ''; }
+    if (parentPath === void 0) { parentPath = null; }
+    if (parentPath === SLASH) {
+        return addSlashIfNotPresent(path);
+    }
+    if (!path.startsWith(SLASH)) {
+        return addSlashIfNotPresent(parentPath) + addSlashIfNotPresent(path);
+    }
+    return path;
+};
+var walkRoutesRecursive = function (item, defaultItem, parentItem, alwaysAppendParentRoutePath) {
     if (defaultItem === void 0) { defaultItem = {}; }
     if (parentItem === void 0) { parentItem = {}; }
-    var normalizedItem = __assign(__assign(__assign({}, defaultItem), item), { id: item.id, exact: item.exact, path: item.path && (item.path.indexOf('/') !== 0 && parentItem.path ? parentItem.path + '/' : '') + item.path, label: item.label, title: item.title, isVisible: typeof item.isVisible !== 'undefined'
+    if (alwaysAppendParentRoutePath === void 0) { alwaysAppendParentRoutePath = true; }
+    var normalizedItem = __assign(__assign(__assign({}, defaultItem), item), { id: item.id, exact: item.exact, path: alwaysAppendParentRoutePath
+            ? joinChildAndParentPaths(item.path, parentItem.path)
+            : appendChildIfNoSlash(item.path, parentItem.path), label: item.label, title: item.title, isVisible: typeof item.isVisible !== 'undefined'
             ? item.isVisible
             : (typeof parentItem.isVisible !== 'undefined'
                 ? parentItem.isVisible
@@ -48,32 +75,37 @@ var walkRoutesRecursive = function (item, defaultItem, parentItem) {
                 : defaultItem.isNavVisible), layout: item.layout || parentItem.layout || defaultItem.layout || null, roles: item.roles || parentItem.roles || defaultItem.roles || null, component: null, componentProps: null });
     var items = null;
     if ((0, isArray_1["default"])(item.items)) {
-        items = item.items.map(function (subItem) { return (0, exports.walkRoutesRecursive)(subItem, defaultItem, normalizedItem); });
+        items = item.items.map(function (subItem) { return (0, exports.walkRoutesRecursive)(subItem, defaultItem, normalizedItem, alwaysAppendParentRoutePath); });
     }
     else if ((0, isObject_1["default"])(item.items)) {
         items = Object.keys(item.items)
-            .map(function (id) { return (0, exports.walkRoutesRecursive)(__assign(__assign({}, item.items[id]), { id: id }), defaultItem, normalizedItem); });
+            .map(function (id) { return (0, exports.walkRoutesRecursive)(__assign(__assign({}, item.items[id]), { id: id }), defaultItem, normalizedItem, alwaysAppendParentRoutePath); });
     }
     return __assign(__assign({}, normalizedItem), { items: items });
 };
 exports.walkRoutesRecursive = walkRoutesRecursive;
-var treeToList = function (item, isRoot) {
+var treeToList = function (item, isRoot, parentItem, alwaysAppendParentRoutePath) {
     if (isRoot === void 0) { isRoot = true; }
+    if (parentItem === void 0) { parentItem = {}; }
+    if (alwaysAppendParentRoutePath === void 0) { alwaysAppendParentRoutePath = true; }
     if ((0, isArray_1["default"])(item)) {
         return item;
     }
+    item.path = alwaysAppendParentRoutePath
+        ? joinChildAndParentPaths(item.path, parentItem === null || parentItem === void 0 ? void 0 : parentItem.path)
+        : appendChildIfNoSlash(item.path, parentItem === null || parentItem === void 0 ? void 0 : parentItem.path);
     if (isRoot && !item.id) {
         item.id = 'root';
     }
     var items = item.path ? [item] : [];
     if ((0, isArray_1["default"])(item.items)) {
         item.items.forEach(function (subItem) {
-            items = items.concat((0, exports.treeToList)(subItem, false));
+            items = items.concat((0, exports.treeToList)(subItem, false, item, alwaysAppendParentRoutePath));
         });
     }
     else if ((0, isObject_1["default"])(item.items)) {
         Object.keys(item.items).forEach(function (id) {
-            items = items.concat((0, exports.treeToList)(__assign(__assign({}, item.items[id]), { id: id }), false));
+            items = items.concat((0, exports.treeToList)(__assign(__assign({}, item.items[id]), { id: id }), false, item, alwaysAppendParentRoutePath));
         });
     }
     return items;

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

@@ -1,52 +1,22 @@
-import * as React from 'react';
-import { IButtonProps } from '../../form/Button/Button';
-export interface ITreeItem extends IButtonProps {
-    /**
-     * Идентификатор узла
-     */
-    id?: string | number;
-    /**
-     * Вложенные элементы
-     * @example [{id: 2, label: 'Nested element', items: [...]}]
-     */
-    items?: any[];
-    /**
-     * Скрыть или показать узел
-     * @example true
-     */
-    visible?: boolean;
+import React from 'react';
+import { IPreparedTreeItem, ITreeConfig, ITreeItem } from '../../../hooks/useTree';
+export interface ITreeViewProps extends ITreeProps {
+    items: IPreparedTreeItem[];
+}
+export interface ITreeItemViewProps extends ITreeProps {
+    item: IPreparedTreeItem;
+    children?: JSX.Element;
 }
 /**
  * Tree
  * Компонент, который представляет в виде дерева список с иерархической структурой данных
  */
-export interface ITreeProps {
+export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPage'> {
     /**
      * Идентификатор (ключ) для сохранения в 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-класс для элемента отображения
      */
@@ -56,40 +26,36 @@ export interface ITreeProps {
      * @example MyCustomView
      */
     view?: CustomView;
-    /**
-     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
-     * @example 1
-     */
-    autoOpenLevels?: number;
     /**
      * Обработчик на клик по узлу
      * @param args
      */
-    onItemClick?: (...args: any[]) => any;
+    onItemClick?: (event: React.MouseEvent, item: ITreeItem) => any;
     /**
      * Отображать раскрытыми узлы из LocalStorage
      * @example true
      */
     autoSave?: boolean;
     /**
-    *  Используется для управления раскрытием всех элементов в дереве
-    * @example: true
-    */
-    alwaysOpened?: 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;
-    })[];
+     * Расстояние вложенных элементов от родителя для каждого уровня
+     * @example 32
+     */
     levelPadding?: number;
+    /**
+     * Показать иконку c лева от элемента
+     * @example true
+     */
+    showIcon?: boolean;
+    /**
+     * Кастомная иконка, заменяющая иконку раскрытия по умолчанию
+     */
+    customIcon?: string | React.ReactElement;
+    /**
+     * Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку
+     * @example false
+     */
+    hasIconExpandOnly?: boolean;
+    [key: string]: any;
 }
 declare function Tree(props: ITreeProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace Tree {
@@ -98,6 +64,10 @@ declare namespace Tree {
         autoOpenLevels: number;
         autoSave: boolean;
         level: number;
+        levelPadding: number;
+        hasIconExpandOnly: boolean;
+        useSameSelectedItemId: boolean;
+        showIcon: boolean;
     };
 }
 export default Tree;