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

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

@@ -4,17 +4,41 @@
  * @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 предоставляет всплывающую подсказку для дочерних элементов.
+ **/
 export interface ITooltipProps {
     /**
      * Текст подсказки
@@ -47,12 +71,12 @@ export interface ITooltipProps {
     /**
      * Стили для абсолютного позиционирования подсказки
      */
-    style?: TooltipStylePosition;
+    style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
      * @example {left: 10}
      */
-    arrowPosition?: TooltipArrowPosition;
+    arrowPosition?: ITooltipArrowPosition;
     /**
      * Рассчет позиции подсказки
      */
@@ -63,7 +87,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/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

@@ -6,9 +6,8 @@ export interface IControlsColumnItem extends IButtonProps {
     visible?: boolean;
 }
 /**
- * ControlsColumn
- * Колонка для контролов
- */
+ * Компонент ControlsColumn предоставляет колонку с контролами.
+ **/
 export interface IControlsColumnProps {
     /**
      * Первичный ключ
@@ -29,7 +28,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"];

package/ui/list/Grid/Grid.d.ts

@@ -1,6 +1,15 @@
 import * as React from 'react';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
 import { IListConfig, ListControlPosition } from '../../../hooks/useList';
 import { IControlItem } from '../../nav/Controls/Controls';
+export interface IColumnViewProps extends IGridColumn {
+    item: Record<string, any>;
+    size: Size;
+    primaryKey: string;
+    listId: string;
+    model: string;
+    [key: string]: any;
+}
 export interface IGridColumn {
     /**
      * Атрибут колонки, по которому происходит поиск нужного свойства в items и нужного поля в SearchForm
@@ -44,7 +53,7 @@ export interface IGridColumn {
      * Компонент для кастомизации отображения значения в ячейке
      * @example MyCustomView
      */
-    valueView?: any;
+    valueView?: any | 'ContentColumnView';
     /**
      * Свойства для компонента отображения значения в ячейке
      */
@@ -58,6 +67,48 @@ export interface IGridColumn {
      * @example true
      */
     sortable?: boolean;
+    /**
+     * Название свойства в items, которое будет использовано как subtitle
+     * @example 'name'
+     */
+    subtitleAttribute?: string;
+    /**
+     * Параметры для ссылки в колонке
+    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    */
+    link?: {
+        attribute: string;
+        linkProps?: ILinkProps;
+        urlAttribute: string;
+    };
+    /**
+    * Параметры для иконки в колонке
+    * @example {attribute: 'icon', isLeft: true}
+    */
+    icon?: {
+        attribute: string;
+        isLeft?: boolean;
+    };
+    /**
+    *  Параметры для картинки в колонке
+    * @example {attribute: 'icon', isLeft: true}
+    */
+    picture?: {
+        attribute: string;
+        isLeft?: boolean;
+    };
+    /**
+    * Диаграмма.
+    * Цвет должен соответствовать success | warning | danger | secondary.
+    * Цвета можно расширить или изменить через стили (см. colors.scss в react-bootstrap)
+    */
+    diagram?: {
+        type: 'horizontal' | 'vertical' | 'circle';
+        items: {
+            color: 'success' | 'warning' | 'danger' | 'secondary' | string;
+            percentageAttribute: string;
+        }[];
+    };
 }
 /**
  * Grid
@@ -68,7 +119,7 @@ export interface IGridProps extends IListConfig {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
      * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
@@ -85,6 +136,14 @@ export interface IGridProps extends IListConfig {
      * должно быть задано свойство index
      */
     itemsIndexing?: any;
+    /**
+     * Размер Grid
+     */
+    size?: Size;
+    /**
+     * Включает переменные цвета для строк в таблице
+     */
+    hasAlternatingColors?: boolean;
     [key: string]: any;
 }
 export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
@@ -105,4 +164,11 @@ export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
     onFetch: (params?: Record<string, unknown>) => void;
     onSort: (value: any) => void;
 }
-export default function Grid(props: IGridProps): JSX.Element;
+declare function Grid(props: IGridProps): JSX.Element;
+declare namespace Grid {
+    var defaultProps: {
+        size: string;
+        hasAlternatingColors: boolean;
+    };
+}
+export default Grid;

package/ui/list/Grid/Grid.js

@@ -88,10 +88,15 @@ function Grid(props) {
     var renderValue = (0, react_1.useCallback)(function (item, column) {
         // Custom component
         if (column.valueView) {
-            var ValueView = column.valueView;
-            return (React.createElement(ValueView, __assign({}, column, column.valueProps, { listId: props.listId, primaryKey: props.primaryKey, item: item })));
+            var isValueViewString = typeof column.valueView === 'string';
+            var ValueView = isValueViewString ? components.ui.getView("list.".concat(column.valueView)) : column.valueView;
+            var viewProps = __assign(__assign(__assign({}, column), column.valueProps), { listId: props.listId, primaryKey: props.primaryKey, item: item, size: props.size });
+            if (isValueViewString) {
+                return components.ui.renderView(ValueView, viewProps);
+            }
+            return (React.createElement(ValueView, __assign({}, viewProps)));
         }
-        return React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {})));
+        return (React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {}))));
     }, [props.listId, props.model, props.primaryKey]);
     // Columns
     var columns = (0, react_1.useMemo)(function () { return []
@@ -117,3 +122,7 @@ function Grid(props) {
     return components.ui.renderView(props.view || 'list.GridView', __assign(__assign({}, props), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, renderValue: renderValue, columns: columns, onFetch: onFetch, onSort: onSort, items: (list === null || list === void 0 ? void 0 : list.items) || [] }));
 }
 exports["default"] = Grid;
+Grid.defaultProps = {
+    size: 'md',
+    hasAlternatingColors: true
+};

package/ui/list/List/List.d.ts

@@ -34,6 +34,7 @@ export interface IListViewProps extends Omit<IListProps, 'onFetch'>, Omit<IListO
 }
 export interface IListItemViewProps {
     id: PrimaryKey;
+    primaryKey: PrimaryKey;
     item: {
         id?: PrimaryKey;
         title?: string | any;

package/ui/list/List/List.js

@@ -55,6 +55,7 @@ function List(props) {
         searchForm: props.searchForm,
         autoDestroy: props.autoDestroy,
         onFetch: props.onFetch,
+        onError: props.onError,
         condition: props.condition,
         addressBar: props.addressBar,
         scope: props.scope,

package/ui/list/Pagination/Pagination.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ListControlPosition } from '../../../hooks/useList';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Pagination
@@ -41,10 +40,8 @@ export interface IPaginationProps {
      */
     className?: CssClassName;
     /**
-     * Расположение пагинации
-     * @example 'both'
-     */
-    position?: ListControlPosition;
+    * Параметры кнопки
+    */
     buttonProps?: IButtonProps;
     /**
      * Переопределение view React компонента для кастомизации отображения
@@ -69,6 +66,16 @@ export interface IPaginationProps {
      * Список, для которого используется пагинация
      */
     list?: any;
+    /**
+    * Нужно ли отображать кнопки с шагом в одну страницу
+    * @example {'true'}
+    */
+    showSteps?: boolean;
+    /**
+     * Нужно ли отображать кнопки с шагом до первой / последней страницы
+     * @example {'true'}
+     */
+    showEdgeSteps?: boolean;
     [key: string]: any;
 }
 export interface IPaginationViewProps extends IPaginationProps {
@@ -80,6 +87,11 @@ export interface IPaginationViewProps extends IPaginationProps {
     }[];
     onSelect: (page: number) => void;
     onSelectNext: () => void;
+    onSelectPrev: () => void;
+    onSelectLast: () => void;
+    onSelectFirst: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
 }
 export declare const generatePages: (page: any, totalPages: any, aroundCount?: number) => any[];
 declare function Pagination(props: IPaginationProps): JSX.Element;
@@ -89,6 +101,7 @@ declare namespace Pagination {
         attribute: string;
         aroundCount: number;
         defaultValue: number;
+        size: string;
         loadMore: boolean;
         position: string;
         sizeAttribute: string;

package/ui/list/Pagination/Pagination.js

@@ -44,6 +44,7 @@ var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useForm_1 = __importDefault(require("../../../hooks/useForm"));
 var form_1 = require("../../../actions/form");
+var FIRST_PAGE = 1;
 var generatePages = function (page, totalPages, aroundCount) {
     if (aroundCount === void 0) { aroundCount = 3; }
     if (!page || !totalPages) {
@@ -78,6 +79,8 @@ function Pagination(props) {
         });
     }) || initialValues, page = _e.page, pageSize = _e.pageSize;
     var totalPages = Math.ceil((((_c = props.list) === null || _c === void 0 ? void 0 : _c.total) || 0) / (pageSize || 1));
+    var isFirstPage = React.useMemo(function () { return page === FIRST_PAGE; }, [page]);
+    var isLastPage = React.useMemo(function () { return page === totalPages; }, [page, totalPages]);
     var pages = (0, react_1.useMemo)(function () { return (0, exports.generatePages)(page, totalPages, props.aroundCount)
         .map(function (pageItem, index, pagesArray) {
         // Номер страницы для '...' кнопки (выбирает страницу между двумя соседними пронумерованными)
@@ -99,26 +102,31 @@ function Pagination(props) {
     var onSelectNext = (0, react_1.useCallback)(function () {
         onSelect(page + 1);
     }, [onSelect, page]);
+    var onSelectPrev = (0, react_1.useCallback)(function () {
+        onSelect(page - 1);
+    }, [onSelect, page]);
+    var onSelectLast = (0, react_1.useCallback)(function () {
+        onSelect(totalPages);
+    }, [onSelect, totalPages]);
+    var onSelectFirst = (0, react_1.useCallback)(function () {
+        onSelect(FIRST_PAGE);
+    }, [onSelect]);
     if (!props.list || !page || !pageSize || props.list.total <= pageSize) {
         return null;
     }
     // Do not show in last page in 'loadMore' mode
-    if (props.loadMore && page >= totalPages) {
+    if (props.loadMore && isLastPage) {
         return null;
     }
     var defaultView = (props.loadMore ? 'list.PaginationMoreView' : 'list.PaginationButtonView');
-    return components.ui.renderView(props.view || defaultView, {
-        totalPages: totalPages,
-        pages: pages,
-        onSelect: onSelect,
-        onSelectNext: onSelectNext
-    });
+    return components.ui.renderView(props.view || defaultView, __assign(__assign({}, props), { totalPages: totalPages, pages: pages, onSelect: onSelect, onSelectNext: onSelectNext, onSelectPrev: onSelectPrev, onSelectLast: onSelectLast, onSelectFirst: onSelectFirst, isFirstPage: isFirstPage, isLastPage: isLastPage }));
 }
 Pagination.defaultProps = {
     enable: true,
     attribute: 'page',
     aroundCount: 3,
     defaultValue: 1,
+    size: 'md',
     loadMore: false,
     position: 'bottom',
     sizeAttribute: 'pageSize'