@steroidsjs/core 3.0.0-beta.10 → 3.0.0-beta.101

package/ui/layout/Tooltip/Tooltip.js

@@ -29,8 +29,8 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var calculate_1 = __importDefault(require("../Tooltip/calculate"));
 var hooks_1 = require("../../../hooks");
+var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 /*
 * @Todo + check all calculations + describe
@@ -44,50 +44,21 @@ var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 * */
 function Tooltip(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, react_1.useState)(false), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = (0, react_1.useState)(props.defaultVisible), isTooltipVisible = _b[0], setIsTooltipVisible = _b[1];
-    var _c = (0, react_1.useState)({
-        left: null,
-        right: null,
-        top: null
-    }), style = _c[0], setStyle = _c[1];
-    var _d = (0, react_1.useState)({
-        left: null,
-        right: null,
-        top: null,
-        bottom: null
-    }), arrowPosition = _d[0], setArrowPosition = _d[1];
-    var timerRef = (0, react_1.useRef)(null);
-    var positionRef = (0, react_1.useRef)(props.position);
+    var _a = (0, useAbsolutePositioning_1["default"])({
+        componentDestroyDelay: props.animationMs,
+        position: props.position,
+        children: props.children,
+        gap: props.gap,
+        defaultVisible: props.defaultVisible
+    }), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, arrowPosition = _a.arrowPosition, style = _a.style;
     var childRef = (0, react_1.useRef)(null);
-    var onShowTooltip = (0, react_1.useCallback)(function () {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        setIsComponentExist(true);
-        setIsTooltipVisible(false);
-        // TODO: How to wait setState callback?
-        setTimeout(function () { return setIsTooltipVisible(true); });
-    }, []);
-    var onHideTooltip = (0, react_1.useCallback)(function () {
-        setIsTooltipVisible(false);
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.animationMs);
-    }, [props.animationMs]);
-    // Основная функция расчета позиции
     var calculatePosition = (0, react_1.useCallback)(function (tooltipSize, arrowSize) {
-        var result = (0, calculate_1["default"])(props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
-        positionRef.current = result.position;
-        setStyle(result.style);
-        if (result.arrowPosition) {
-            setArrowPosition(result.arrowPosition);
-        }
-    }, [props.gap]);
+        calculateAbsolutePosition(position, childRef.current, tooltipSize, arrowSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     (0, react_use_1.useMount)(function () {
-        if (isTooltipVisible) {
-            onShowTooltip();
+        if (isComponentVisible) {
+            onShow();
         }
     });
     if (!props.content) {
@@ -101,12 +72,12 @@ function Tooltip(props) {
         childrenElement
             ? React.cloneElement(childrenElement, {
                 ref: childRef,
-                onMouseOver: onShowTooltip,
-                onMouseOut: onHideTooltip
+                onMouseOver: onShow,
+                onMouseOut: onHide
             })
-            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, props.children)),
+            : (React.createElement("span", { ref: childRef, onFocus: onShow, onMouseOver: onShow, onBlur: onHide, onMouseOut: onHide }, props.children)),
         isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(TooltipView, { isTooltipVisible: isTooltipVisible, content: props.content, position: positionRef.current, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
+            React.createElement(TooltipView, { isTooltipVisible: isComponentVisible, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, className: props.className })))));
 }
 Tooltip.defaultProps = {
     content: '',

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 @@
+/// <reference types="react" />
+export interface IFlexGridItem {
+    /**
+     * Содержимое элемента FlexGrid
+     */
+    content: any;
+    /**
+     * Порядок элемента в 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 '../../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
@@ -23,7 +32,7 @@ export interface IGridColumn {
      */
     hint?: React.ReactNode;
     /**
-     * CSS-класс для ячейки с заголовком колонки <th>...</th>
+     * CSS-класс для ячейки с заголовком колонки '<th>...</th>'
      */
     headerClassName?: CssClassName;
     /**
@@ -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

@@ -69,7 +69,8 @@ function Grid(props) {
         items: props.items,
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
-        autoFetchOnFormChanges: props.autoFetchOnFormChanges
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
+        hasTreeItems: props.hasTreeItems
     }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, onFetch = _a.onFetch, onSort = _a.onSort;
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {
@@ -88,8 +89,13 @@ 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 || {}))));
     }, [props.listId, props.model, props.primaryKey]);
@@ -117,3 +123,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,10 +34,12 @@ export interface IListViewProps extends Omit<IListProps, 'onFetch'>, Omit<IListO
 }
 export interface IListItemViewProps {
     id: PrimaryKey;
+    primaryKey: PrimaryKey;
     item: {
         id?: PrimaryKey;
         title?: string | any;
         label?: string | any;
+        [key: string]: any;
     };
     index: number;
     className?: CssClassName;

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'