@steroidsjs/core 3.0.0-beta.4 → 3.0.0-beta.41

package/ui/layout/Tooltip/calculate.js

@@ -80,7 +80,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 { IContentColumnViewProps } 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 IContentColumnViewProps {
     fieldProps: Record<string, any>;
     input: {
         name: string;

package/ui/list/CheckboxColumn/CheckboxColumn.js

@@ -10,22 +10,25 @@ var list_1 = require("../../../actions/list");
 var list_2 = require("../../../reducers/list");
 function CheckboxColumn(props) {
     var _a;
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var itemId = (_a = props.item) === null || _a === void 0 ? void 0 : _a[props.primaryKey];
-    var dispatch = useDispatch_1["default"]();
-    var value = hooks_1.useSelector(function (state) { return (props.item
-        ? list_2.isChecked(state, props.listId, itemId)
-        : list_2.isCheckedAll(state, props.listId)); });
-    var onChange = react_1.useCallback(function () {
-        dispatch(props.item ? list_1.toggleItem(props.listId, itemId) : list_1.toggleAll(props.listId));
+    var dispatch = (0, useDispatch_1["default"])();
+    var value = (0, hooks_1.useSelector)(function (state) { return (props.item
+        ? (0, list_2.isSelected)(state, props.listId, itemId)
+        : (0, list_2.isSelectedAll)(state, props.listId)); });
+    var onChange = (0, react_1.useCallback)(function () {
+        dispatch(props.item ? (0, list_1.toggleItem)(props.listId, itemId) : (0, list_1.toggleAll)(props.listId));
     }, [dispatch, itemId, props.item, props.listId]);
-    var input = react_1.useMemo(function () { return ({
+    var input = (0, react_1.useMemo)(function () { return ({
         name: props.listId + '_checkbox',
         value: value,
         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

@@ -29,7 +29,7 @@ export interface IControlsColumnProps {
      * Переопределение view React компонента для кастомизации отображения колонки
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export interface IControlsColumnViewProps {

package/ui/list/ControlsColumn/ControlsColumn.js

@@ -18,12 +18,12 @@ var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function ControlsColumn(props) {
-    var components = hooks_1.useComponents();
-    var items = react_1.useMemo(function () {
+    var components = (0, hooks_1.useComponents)();
+    var items = (0, react_1.useMemo)(function () {
         var controls = typeof props.controls === 'function'
             ? props.controls(props.item, props.primaryKey)
             : props.controls;
-        return controls.map(function (control) { return (__assign(__assign({}, control), { position: 'left', visible: control.visible !== false && props.item['can' + upperFirst_1["default"](control.id)] !== false })); });
+        return controls.map(function (control) { return (__assign(__assign({}, control), { position: 'left', visible: control.visible !== false && props.item['can' + (0, upperFirst_1["default"])(control.id)] !== false })); });
     }, [props]);
     return components.ui.renderView(props.view || 'list.ControlsColumnView', __assign(__assign({}, props), { items: items }));
 }

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

@@ -25,7 +25,7 @@ export interface IEmptyProps {
     view?: CustomView;
     [key: string]: any;
 }
-export declare type IEmptyViewProps = IEmptyProps;
+export type IEmptyViewProps = IEmptyProps;
 declare function Empty(props: IEmptyProps): JSX.Element;
 declare namespace Empty {
     var defaultProps: {

package/ui/list/Empty/Empty.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -34,7 +38,7 @@ exports.normalizeEmptyProps = void 0;
 var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 function Empty(props) {
-    return hooks_1.useComponents().ui.renderView(props.view || 'list.EmptyView', props);
+    return (0, hooks_1.useComponents)().ui.renderView(props.view || 'list.EmptyView', props);
 }
 Empty.defaultProps = {
     enable: true,

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-declare const _default: () => JSX.Element;
 /**
  * Basic
  * @order 1
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/list/Empty/demo/basic.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/list/Empty/demo/custom-text.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-declare const _default: () => JSX.Element;
 /**
  * With custom view
  * @order 2
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/list/Empty/demo/custom-text.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

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 IContentColumnViewProps 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,36 @@ 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;
+    };
 }
 /**
  * Grid
@@ -68,7 +107,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 +124,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 +152,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

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -42,8 +46,8 @@ var useList_1 = __importDefault(require("../../../hooks/useList"));
 var ControlsColumn_1 = __importDefault(require("../ControlsColumn"));
 var Format_1 = __importDefault(require("../../format/Format"));
 function Grid(props) {
-    var components = hooks_1.useComponents();
-    var _a = useList_1["default"]({
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useList_1["default"])({
         listId: props.listId,
         primaryKey: props.primaryKey,
         action: props.action,
@@ -67,7 +71,7 @@ function Grid(props) {
         initialTotal: props.initialTotal,
         autoFetchOnFormChanges: props.autoFetchOnFormChanges
     }), 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 = react_1.useCallback(function (column) {
+    var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {
             var HeaderView = column.headerView;
             return (React.createElement(HeaderView, __assign({}, column, column.headerProps, { listId: props.listId })));
@@ -79,18 +83,23 @@ function Grid(props) {
             .concat((model === null || model === void 0 ? void 0 : model.attributes) || [])
             .concat((searchModel === null || searchModel === void 0 ? void 0 : searchModel.attributes) || [])
             .find(function (item) { return column.attribute && item.attribute === column.attribute; });
-        return attributeMeta ? attributeMeta.label : upperFirst_1["default"](column.attribute);
+        return attributeMeta ? attributeMeta.label : (0, upperFirst_1["default"])(column.attribute);
     }, [model, props.listId, searchModel]);
-    var renderValue = react_1.useCallback(function (item, column) {
+    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 = react_1.useMemo(function () { return []
+    var columns = (0, react_1.useMemo)(function () { return []
         .concat({
         label: __('№'),
         valueView: function (_a) {
@@ -107,22 +116,13 @@ function Grid(props) {
         },
         visible: !!props.controls
     })
-        .map(function (column) { return (isString_1["default"](column) ? { attribute: column } : column); })
+        .map(function (column) { return ((0, isString_1["default"])(column) ? { attribute: column } : column); })
         .filter(function (column) { return column.visible !== false; })
         .map(function (column) { return (__assign(__assign({}, column), { label: renderLabel(column) })); }); }, [props.columns, props.controls, props.itemsIndexing, renderLabel]);
-    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) || [] }));
+    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/LayoutNames/LayoutNames.d.ts

@@ -43,7 +43,7 @@ export interface ILayoutNamesProps {
      */
     view?: CustomView;
 }
-export declare type ILayoutNamesViewProps = ILayoutNamesProps;
+export type ILayoutNamesViewProps = ILayoutNamesProps;
 declare function LayoutNames(props: ILayoutNamesProps): JSX.Element;
 declare namespace LayoutNames {
     var defaultProps: {

package/ui/list/LayoutNames/LayoutNames.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -41,12 +45,12 @@ var hooks_1 = require("../../../hooks");
 var list_1 = require("../../../actions/list");
 var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 function LayoutNames(props) {
-    var components = hooks_1.useComponents();
-    var dispatch = useDispatch_1["default"]();
+    var components = (0, hooks_1.useComponents)();
+    var dispatch = (0, useDispatch_1["default"])();
     var list = props.list || {};
-    var onChange = react_1.useCallback(function (value) {
+    var onChange = (0, react_1.useCallback)(function (value) {
         components.clientStorage.set(props.attribute, value);
-        dispatch(list_1.listSetLayout(list.listId, value));
+        dispatch((0, list_1.listSetLayout)(list.listId, value));
     }, [components.clientStorage, dispatch, list.listId, props.attribute]);
     if (props.enable === false) {
         return null;
@@ -64,6 +68,6 @@ LayoutNames.defaultProps = {
     defaultValue: null,
     position: 'top'
 };
-var normalizeLayoutNamesProps = function (props) { return (__assign(__assign(__assign({}, LayoutNames.defaultProps), { enable: !!props, defaultValue: get_1["default"](props, 'items.0.id') || LayoutNames.defaultProps.defaultValue }), (typeof props === 'boolean' ? { enable: props } : props))); };
+var normalizeLayoutNamesProps = function (props) { return (__assign(__assign(__assign({}, LayoutNames.defaultProps), { enable: !!props, defaultValue: (0, get_1["default"])(props, 'items.0.id') || LayoutNames.defaultProps.defaultValue }), (typeof props === 'boolean' ? { enable: props } : props))); };
 exports.normalizeLayoutNamesProps = normalizeLayoutNamesProps;
 exports["default"] = React.memo(LayoutNames);

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

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -37,8 +41,8 @@ var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useList_1 = __importDefault(require("../../../hooks/useList"));
 function List(props) {
-    var components = hooks_1.useComponents();
-    var _a = useList_1["default"]({
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useList_1["default"])({
         listId: props.listId,
         primaryKey: props.primaryKey,
         action: props.action,
@@ -64,16 +68,7 @@ function List(props) {
     }), list = _a.list, 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;
     var ItemView = props.itemView || components.ui.getView('list.ListItemView');
     var content = ((list === null || list === void 0 ? void 0 : list.items) || []).map(function (item, index) { return (React.createElement(ItemView, __assign({}, props.itemProps, { key: item[props.primaryKey] || index, primaryKey: props.primaryKey, item: item, index: index, layoutSelected: list.layoutName }))); });
-    return components.ui.renderView(props.view || 'list.ListView', __assign(__assign({}, props), { list: list,
-        paginationPosition: paginationPosition,
-        paginationSizePosition: paginationSizePosition,
-        layoutNamesPosition: layoutNamesPosition,
-        renderList: renderList,
-        renderEmpty: renderEmpty,
-        renderPagination: renderPagination,
-        renderPaginationSize: renderPaginationSize,
-        renderLayoutNames: renderLayoutNames,
-        renderSearchForm: renderSearchForm,
+    return components.ui.renderView(props.view || 'list.ListView', __assign(__assign({}, props), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, 
         //onFetch,
         //onSort,
         content: content }));

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

@@ -1,11 +1,19 @@
 import * as React from 'react';
-import { ListControlPosition } from '../../../hooks/useList';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Pagination
  * Компонент с пагинацией страниц.
  */
 export interface IPaginationProps {
+    /**
+     * Подключить пагинацию
+     * @example true
+     */
+    enable?: boolean;
+    /**
+     * Значение по-умолчанию
+     */
+    defaultValue?: number;
     /**
      * Аттрибут (название) в форме для поля пагинации
      * @example page
@@ -31,11 +39,6 @@ export interface IPaginationProps {
      * Дополнительный CSS-класс для элемента отображения
      */
     className?: CssClassName;
-    /**
-     * Расположение пагинации
-     * @example 'both'
-     */
-    position?: ListControlPosition;
     buttonProps?: IButtonProps;
     /**
      * Переопределение view React компонента для кастомизации отображения
@@ -56,6 +59,20 @@ export interface IPaginationProps {
      * Темная тема
      */
     dark?: boolean;
+    /**
+     * Список, для которого используется пагинация
+     */
+    list?: any;
+    /**
+    * Нужно ли отображать кнопки с шагом в одну страницу
+    * @example {'true'}
+    */
+    showSteps?: boolean;
+    /**
+     * Нужно ли отображать кнопки с шагом до первой / последней страницы
+     * @example {'true'}
+     */
+    showEdgeSteps?: boolean;
     [key: string]: any;
 }
 export interface IPaginationViewProps extends IPaginationProps {
@@ -67,6 +84,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;
@@ -76,6 +98,7 @@ declare namespace Pagination {
         attribute: string;
         aroundCount: number;
         defaultValue: number;
+        size: string;
         loadMore: boolean;
         position: string;
         sizeAttribute: string;

package/ui/list/Pagination/Pagination.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -40,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) {
@@ -60,21 +65,23 @@ var generatePages = function (page, totalPages, aroundCount) {
 exports.generatePages = generatePages;
 function Pagination(props) {
     var _a, _b, _c;
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var initialValues = {
         page: (_a = props.list) === null || _a === void 0 ? void 0 : _a[props.attribute],
         pageSize: (_b = props.list) === null || _b === void 0 ? void 0 : _b[props.sizeAttribute]
     };
-    var _d = useForm_1["default"](), formId = _d.formId, formDispatch = _d.formDispatch, formSelector = _d.formSelector;
+    var _d = (0, useForm_1["default"])(), formId = _d.formId, formDispatch = _d.formDispatch, formSelector = _d.formSelector;
     var _e = formSelector(function (_a) {
         var values = _a.values;
         return ({
-            page: get_1["default"](values, props.attribute),
-            pageSize: get_1["default"](values, props.sizeAttribute)
+            page: (0, get_1["default"])(values, props.attribute),
+            pageSize: (0, get_1["default"])(values, props.sizeAttribute)
         });
     }) || 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 pages = react_1.useMemo(function () { return exports.generatePages(page, totalPages, props.aroundCount)
+    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) {
         // Номер страницы для '...' кнопки (выбирает страницу между двумя соседними пронумерованными)
         var pageNumberForButtonWithDots = Math.floor(((pagesArray[index + 1] + pagesArray[index - 1]) / 2));
@@ -84,37 +91,42 @@ function Pagination(props) {
             isActive: page === pageItem
         };
     }); }, [page, props.aroundCount, totalPages]);
-    var onSelect = react_1.useCallback(function (newPage) {
+    var onSelect = (0, react_1.useCallback)(function (newPage) {
         if (formDispatch) {
-            formDispatch(form_1.formChange(formId, props.attribute, newPage));
+            formDispatch((0, form_1.formChange)(formId, props.attribute, newPage));
         }
         if (props.onChange && newPage) {
             props.onChange.call(null, newPage);
         }
     }, [formDispatch, formId, props.attribute, props.onChange]);
-    var onSelectNext = react_1.useCallback(function () {
+    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'

package/ui/list/PaginationSize/PaginationSize.d.ts

@@ -44,6 +44,10 @@ export interface IPaginationSizeProps {
      * @return {void}
      */
     onChange?: (value: number) => void;
+    /**
+     * Список, для которого используется пагинация
+     */
+    list?: any;
     [key: string]: any;
 }
 export interface IPaginationSizeViewProps extends IPaginationSizeProps {