@steroidsjs/core 3.0.0-beta.8 → 3.0.0-beta.80

package/ui/layout/Notifications/Notifications.d.ts

@@ -14,6 +14,9 @@ import * as React from 'react';
  * ```
  */
 interface INotificationItem {
+    /**
+    * Идентификатор уведомления
+    */
     id?: number;
     /**
      * Цвет всплывающего уведомления
@@ -27,15 +30,43 @@ interface INotificationItem {
     message?: string;
     isClosing?: boolean;
 }
+/**
+ * Notifications
+ *
+ * Компонент Notifications представляет собой контейнер для отображения всплывающих уведомлений.
+ **/
 export interface INotificationsProps {
+    /**
+    * Исходные уведомления
+    */
     initialFlashes?: {
         [key: string]: string | any;
     };
+    /**
+    * Коллекция уведомлений
+    */
     notifications?: INotificationItem[];
+    /**
+    * Задержка перед закрытием
+    */
     closeTimeoutMs?: number;
+    /**
+    * Дополнительный CSS-класс для элемента отображения
+    */
     className?: CssClassName;
-    view?: any;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента
+     * @example MyCustomView
+     */
     itemView?: any;
+    /**
+    * Позиционирование элемента уведомления
+    */
     position?: string;
     [key: string]: any;
 }

package/ui/layout/ProgressBar/ProgressBar.js

@@ -32,14 +32,18 @@ var hooks_1 = require("../../../hooks");
 function ProgressBar(props) {
     var components = (0, hooks_1.useComponents)();
     var getLabel = (function () {
-        if (!props.showLabel)
+        if (!props.showLabel) {
             return null;
-        if (props.icon)
+        }
+        if (props.icon) {
             return props.icon(props.status, props.percent);
-        if (props.status === 'success')
+        }
+        if (props.status === 'success') {
             return React.createElement(Icon_1["default"], { name: "check" });
-        if (props.status === 'exception')
+        }
+        if (props.status === 'exception') {
             return React.createElement(Icon_1["default"], { name: "times" });
+        }
         return props.label(props.percent);
     });
     if (props.type === 'line') {

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

@@ -0,0 +1,87 @@
+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;
+}
+/**
+* Sidebar
+*
+* Компонент Sidebar представляет собой боковое меню с возможностью гибкой настройки
+*/
+export interface ISidebarProps extends IUiComponent {
+    /**
+     * Объект с информацией о логотипе.
+     */
+    logo?: {
+        /**
+         * Текст или React-элемент для отображения логотипа.
+         */
+        label: string;
+        /**
+         * Путь к иконке или React-элемент для отображения иконки логотипа.
+         */
+        icon: string | React.ReactElement;
+    };
+    /**
+     * Объект с информацией о пользователе.
+     */
+    user?: {
+        /**
+         * URL изображения пользователя.
+         */
+        picture: string;
+        /**
+         * Имя пользователя.
+         */
+        name: string;
+    };
+    /**
+     * Props для компонента Menu.
+     */
+    menu?: IMenuProps;
+    /**
+     * Элементы навигации для компонента Nav.
+     */
+    items?: 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/{hoc/layout.js → ui/layout/Sidebar/Sidebar.js}

@@ -33,16 +33,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 useLayout_1 = __importDefault(require("../hooks/useLayout"));
-exports["default"] = (function (initAction) {
-    if (initAction === void 0) { initAction = null; }
-    return function (WrappedComponent) { return function LayoutHoc(props) {
-        var layoutProps = (0, useLayout_1["default"])(initAction);
-        return (React.createElement(WrappedComponent, __assign({}, props, { status: layoutProps.status, renderError: layoutProps.error }, layoutProps.data)));
-    }; };
-});
+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/Skeleton/Skeleton.d.ts

@@ -1,18 +1,41 @@
 import * as React from 'react';
 export interface ISkeletonViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     animation?: 'pulse' | 'wave';
     type?: 'text' | 'rect' | 'circle';
     height?: string | number;
     width?: string | number;
 }
+/**
+ * Компонент Skeleton представляет собой заглушку для отображения временных данных
+ * во время загрузки или ожидания загрузки реальных данных.
+ **/
 export interface ISkeletonProps {
-    className?: string;
+    /**
+    * Дополнительные CSS классы
+    * @example my-block
+    */
+    className?: CssClassName;
+    /**
+    * Дочерние элементы
+    */
     children?: React.ReactNode;
+    /**
+    * Тип анимации
+    */
     animation?: 'pulse' | 'wave';
+    /**
+    * Тип компонента
+    */
     type?: 'text' | 'rect' | 'circle';
+    /**
+    * Высота элемента
+    */
     height?: string | number;
+    /**
+    * Ширина элемента
+    */
     width?: string | number;
 }
 declare function Skeleton(props: ISkeletonProps): JSX.Element;

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -4,17 +4,43 @@
  * @example 'top'
  */
 type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-export interface TooltipArrowPosition {
+export interface ITooltipArrowPosition {
+    /**
+    * Позиция стрелки слева
+    */
     left?: number | string;
+    /**
+    * Позиция стрелки справа
+    */
     right?: number | string;
+    /**
+    * Позиция стрелки сверху
+    */
     top?: number | string;
+    /**
+    * Позиция стрелки снизу
+    */
     bottom?: number | string;
 }
-export interface TooltipStylePosition {
+export interface ITooltipStylePosition {
+    /**
+    * Позиция Tooltip слева
+    */
     left: 'unset' | number;
+    /**
+    * Позиция Tooltip справа
+    */
     right: 'unset' | number;
+    /**
+    * Позиция Tooltip сверху
+    */
     top: 'unset' | number;
 }
+/**
+ * Tooltip
+ *
+ * Компонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.
+ **/
 export interface ITooltipProps {
     /**
      * Текст подсказки
@@ -47,12 +73,12 @@ export interface ITooltipProps {
     /**
      * Стили для абсолютного позиционирования подсказки
      */
-    style?: TooltipStylePosition;
+    style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
      * @example {left: 10}
      */
-    arrowPosition?: TooltipArrowPosition;
+    arrowPosition?: ITooltipArrowPosition;
     /**
      * Рассчет позиции подсказки
      */
@@ -63,7 +89,7 @@ export interface ITooltipViewProps extends ITooltipProps {
     isTooltipVisible: boolean;
     content: string | any;
     position: TooltipPosition;
-    style: TooltipStylePosition;
+    style: ITooltipStylePosition;
 }
 declare function Tooltip(props: ITooltipProps): JSX.Element;
 declare namespace Tooltip {

package/ui/layout/Tooltip/Tooltip.js

@@ -79,6 +79,9 @@ function Tooltip(props) {
     // Основная функция расчета позиции
     var calculatePosition = (0, react_1.useCallback)(function (tooltipSize, arrowSize) {
         var result = (0, calculate_1["default"])(props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
+        if (!result) {
+            return;
+        }
         positionRef.current = result.position;
         setStyle(result.style);
         if (result.arrowPosition) {

package/ui/layout/Tooltip/calculate.d.ts

@@ -1,6 +1,6 @@
-import { TooltipArrowPosition, TooltipStylePosition } from '../Tooltip/Tooltip';
+import { ITooltipArrowPosition, ITooltipStylePosition } from '../Tooltip/Tooltip';
 export default function calculate(gap: any, position: any, parentRef: any, tooltipSize: any, arrowSize: any): {
-    style: TooltipStylePosition;
+    style: ITooltipStylePosition;
     position: any;
-    arrowPosition: TooltipArrowPosition;
+    arrowPosition: ITooltipArrowPosition;
 };

package/ui/layout/Tooltip/calculate.js

@@ -1,6 +1,9 @@
 "use strict";
 exports.__esModule = true;
 function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
+    if (process.env.IS_SSR) {
+        return null;
+    }
     var style = { left: null, right: null, top: null };
     var arrowPosition = null;
     var _a = parentRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
@@ -80,7 +83,7 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
         case 'topRight':
         case 'bottomRight':
             // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.right = document.body.clientWidth - parentDimensions.right;
+            style.left = parentDimensions.right - tooltipSize.width;
             if (parentDimensions.width < tooltipSize.width) {
                 arrowPosition = {
                     left: null,

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/list/CheckboxColumn/CheckboxColumn.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IColumnViewProps } from '../Grid/Grid';
 /**
  * CheckboxColumn
  * Колонка с чекбоксом, которая позволяет выбирать одну или все записи в таблице.
@@ -20,10 +21,10 @@ export interface ICheckboxColumnProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
-export interface ICheckboxColumnViewProps {
+export interface ICheckboxColumnViewProps extends IColumnViewProps {
     fieldProps: Record<string, any>;
     input: {
         name: string;

package/ui/list/CheckboxColumn/CheckboxColumn.js

@@ -25,7 +25,10 @@ function CheckboxColumn(props) {
         onChange: onChange
     }); }, [onChange, props.listId, value]);
     return components.ui.renderView(props.view || 'list.CheckboxColumnView', {
-        input: input
+        input: input,
+        item: props.item,
+        attribute: props.attribute,
+        size: props.size
     });
 }
 exports["default"] = CheckboxColumn;

package/ui/list/ControlsColumn/ControlsColumn.d.ts

@@ -7,8 +7,9 @@ export interface IControlsColumnItem extends IButtonProps {
 }
 /**
  * ControlsColumn
- * Колонка для контролов
- */
+ *
+ * Компонент ControlsColumn предоставляет колонку с контролами.
+ **/
 export interface IControlsColumnProps {
     /**
      * Первичный ключ
@@ -29,7 +30,7 @@ export interface IControlsColumnProps {
      * Переопределение view React компонента для кастомизации отображения колонки
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export interface IControlsColumnViewProps {

package/ui/list/Empty/Empty.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Empty
  * Компонент используется в качестве заглушки в случае, когда пришла пустая коллекция данных.
  */
-export interface IEmptyProps {
+export interface IEmptyProps extends IUiComponent {
     /**
      * Показывать заглушку?
      * @example true
@@ -14,15 +14,6 @@ export interface IEmptyProps {
      * @example 'Записи не найдены'
      */
     text?: string | React.ReactNode;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     [key: string]: any;
 }
 export type IEmptyViewProps = IEmptyProps;

package/ui/list/Empty/Empty.js

@@ -42,9 +42,9 @@ function Empty(props) {
 }
 Empty.defaultProps = {
     enable: true,
-    text: 'Записи не найдены'
+    text: 'Ничего не найдено'
 };
-var normalizeEmptyProps = function (props) { return (__assign(__assign(__assign({}, Empty.defaultProps), { enable: !!props, text: __('Записи не найдены') }), (typeof props === 'boolean'
+var normalizeEmptyProps = function (props) { return (__assign(__assign(__assign({}, Empty.defaultProps), { enable: !!props, text: __('Ничего не найдено') }), (typeof props === 'boolean'
     ? { enable: props }
     : (typeof props === 'string'
         ? { text: props }

package/ui/list/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+export interface IFlexGridItem {
+    /**
+     * Содержимое элемента FlexGrid
+     */
+    content: ReactNode;
+    /**
+     * Порядок элемента в FlexGrid
+     */
+    order?: number;
+    /**
+     * Количество колонок для смещения столбца слева
+     */
+    offset?: number;
+    /**
+     * Количество колонок, которое занимает элемент, максимум 12
+     */
+    col?: number;
+    /**
+     * Количество колонок, которое занимает элемент на экранах размером lg, максимум 12
+     */
+    lg?: number;
+    /**
+     * Количество колонок, которое занимает элемент на экранах размером md, максимум 12
+     */
+    md?: number;
+    /**
+     * Количество колонок, которое занимает элемент на экранах размером sm, максимум 12
+     */
+    sm?: number;
+}
+/**
+ * FlexGrid
+ * Flex контейнер для элементов и компонентов.
+ */
+export interface IFlexGridProps extends IUiComponent {
+    /**
+     * Элементы FlexGrid
+     * @example [{content: 'Block1', col: 4}, {content: 'Block2', col: 6}]
+     */
+    items?: IFlexGridItem[];
+    /**
+     * Вложенные элементы
+     */
+    children?: React.ReactNode;
+    /**
+     * Дополнительный CSS-класс для элементов FlexGrid
+     */
+    itemClassName?: CssClassName;
+    /**
+     * Расстояние между элементами в px.
+     * Если передано число, то установится расстояние между строками и между колонками.
+     * Если передан массив, то первый элемент - расстояние между колонками, второй - между строками.
+     */
+    gap?: number | number[];
+    /**
+     * Значение для css-свойства flex-direction
+     */
+    direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
+    /**
+     * Автоматический перенос на новую строку
+     */
+    wrap?: boolean;
+    /**
+     * Значение для css-свойства justify-content
+     */
+    justify?: 'center' | 'end' | 'start' | 'stretch' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Значение для css-свойства align-items
+     */
+    align?: 'center' | 'end' | 'start' | 'stretch' | 'flex-start' | 'flex-end';
+    [key: string]: any;
+}
+export interface IFlexGridViewProps extends IFlexGridProps {
+    colGap?: number;
+    rowGap?: number;
+}
+declare function FlexGrid(props: IFlexGridProps): JSX.Element;
+declare namespace FlexGrid {
+    var defaultProps: {
+        wrap: boolean;
+        gap: number;
+    };
+}
+export default FlexGrid;

package/ui/list/FlexGrid/FlexGrid.js

@@ -0,0 +1,51 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var hooks_1 = require("../../../hooks");
+var normalizeGap = function (gap) {
+    if ((0, isArray_1["default"])(gap)) {
+        return {
+            colGap: gap[0],
+            rowGap: gap[1]
+        };
+    }
+    return {
+        colGap: gap,
+        rowGap: gap
+    };
+};
+function FlexGrid(props) {
+    var components = (0, hooks_1.useComponents)();
+    var view = props.view, viewProps = __rest(props, ["view"]);
+    return components.ui.renderView(view || 'list.FlexGridView', __assign(__assign({}, viewProps), normalizeGap(props.gap)));
+}
+exports["default"] = FlexGrid;
+FlexGrid.defaultProps = {
+    wrap: false,
+    gap: 24
+};

package/ui/list/FlexGrid/index.d.ts

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

package/ui/list/FlexGrid/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 FlexGrid_1 = __importDefault(require("./FlexGrid"));
+exports["default"] = FlexGrid_1["default"];