@steroidsjs/core 3.0.38 → 3.0.40

package/actions/list.d.ts

@@ -41,6 +41,14 @@ export interface IList {
     * Логическое значение, указывающее, является ли список удаленным или нет.
     */
     isRemote?: boolean;
+    /**
+     * Логическое значение, указывающее, можно ли загрузить еще элементы для списка при скролле.
+     */
+    hasInfiniteScroll?: boolean;
+    /**
+     * Значение страницы по умолчанию.
+     */
+    defaultPageValue?: number;
     /**
     * Логическое значение, указывающее, можно ли загрузить еще элементы для списка.
     */

package/actions/list.js

@@ -200,6 +200,7 @@ var listFetch = function (listId, query) {
         }
         // Send request
         toDispatch.push(Promise.resolve(onFetch(list, formValues, components)).then(function (data) {
+            var _a;
             // Skip on empty
             if (!data) {
                 return [];
@@ -215,16 +216,24 @@ var listFetch = function (listId, query) {
                     meta: null
                 };
             }
+            var items = data.items || [];
+            var total = data.total || items.length || null;
+            var page = formValues[list.pageAttribute];
+            var pageSize = formValues[list.pageSizeAttribute];
+            var totalPages = Math.ceil(((list === null || list === void 0 ? void 0 : list.total) || 0) / (pageSize || 1));
+            var hasNextPage = (_a = data === null || data === void 0 ? void 0 : data.hasNextPage) !== null && _a !== void 0 ? _a : (page !== totalPages || null);
             return [
                 // Check has errors
                 (0, form_2.formSetErrors)(list.formId, data.errors || null),
                 {
-                    items: data.items || [],
-                    total: data.total || null,
+                    items: items,
+                    total: total,
+                    hasNextPage: hasNextPage,
                     meta: data.meta || null,
-                    page: formValues[list.pageAttribute],
-                    pageSize: formValues[list.pageSizeAttribute],
+                    page: page,
+                    pageSize: pageSize,
                     listId: listId,
+                    defaultPageValue: list.defaultPageValue,
                     type: exports.LIST_AFTER_FETCH
                 },
             ];

package/docs-autogen-result.json

@@ -25,6 +25,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "defaultPageValue",
+                    "decorators": [],
+                    "description": "Значение страницы по умолчанию.",
+                    "required": false,
+                    "type": "number",
+                    "example": null
+                },
                 {
                     "name": "formId",
                     "decorators": [],
@@ -33,6 +41,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "hasInfiniteScroll",
+                    "decorators": [],
+                    "description": "Логическое значение, указывающее, можно ли загрузить еще элементы для списка при скролле.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "isFetched",
                     "decorators": [],
@@ -3845,6 +3861,14 @@
                     "type": "string | boolean | IEmptyProps",
                     "example": "{\n text: 'Записи не найдены'\n}"
                 },
+                {
+                    "name": "infiniteScroll",
+                    "decorators": [],
+                    "description": "Подключение бесконечного скролла",
+                    "required": false,
+                    "type": "boolean | IInfiniteScrollProps",
+                    "example": "{\n enable: true\n}"
+                },
                 {
                     "name": "initialItems",
                     "decorators": [],
@@ -4143,6 +4167,15 @@
                     "example": null,
                     "parameters": []
                 },
+                {
+                    "name": "renderInfiniteScroll",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "parameters": []
+                },
                 {
                     "name": "renderLayoutNames",
                     "decorators": [],
@@ -7604,6 +7637,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "calendarDatesFormData",
+                    "decorators": [],
+                    "description": "Данные для формы с текущими датами календаря",
+                    "required": false,
+                    "type": "{dateFromAttribute: string, dateToAttribute: string, formId: string}",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "calendarModalProps",
                     "decorators": [],
@@ -7645,7 +7687,7 @@
                     "decorators": [],
                     "description": "Параметры для групп событий",
                     "required": true,
-                    "type": "{eventGroups: IEventGroup[], title: string}",
+                    "type": "{canAddedEventGroups: boolean, eventGroups: IEventGroup[], title: string}",
                     "example": null,
                     "defaultValue": null
                 },
@@ -7722,6 +7764,24 @@
                             "example": null
                         }
                     ]
+                },
+                {
+                    "name": "onEventClick",
+                    "decorators": [],
+                    "description": "Функция, которая вызывается по клику на событие",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": [
+                        {
+                            "name": "event",
+                            "decorators": [],
+                            "description": "",
+                            "required": true,
+                            "type": "Record",
+                            "example": null
+                        }
+                    ]
                 }
             ]
         },
@@ -7769,6 +7829,14 @@
                     "type": "default",
                     "example": null
                 },
+                {
+                    "name": "canAddedEventGroups",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "children",
                     "decorators": [],
@@ -8181,7 +8249,7 @@
                     "decorators": [],
                     "description": "Идентификатор",
                     "required": true,
-                    "type": "number",
+                    "type": "string | number",
                     "example": null
                 },
                 {
@@ -35134,6 +35202,15 @@
                     "example": null,
                     "defaultValue": "true"
                 },
+                {
+                    "name": "infiniteScroll",
+                    "decorators": [],
+                    "description": "Подключение бесконечного скролла",
+                    "required": false,
+                    "type": "boolean | IInfiniteScrollProps",
+                    "example": "{\n enable: true\n}",
+                    "defaultValue": null
+                },
                 {
                     "name": "initialItems",
                     "decorators": [],
@@ -35469,6 +35546,15 @@
                     "example": null,
                     "parameters": []
                 },
+                {
+                    "name": "renderInfiniteScroll",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "parameters": []
+                },
                 {
                     "name": "renderLayoutNames",
                     "decorators": [],
@@ -35560,6 +35646,73 @@
                 }
             ]
         },
+        "IInfiniteScrollProps": {
+            "name": "IInfiniteScrollProps",
+            "moduleName": "ui/list/InfiniteScroll/InfiniteScroll",
+            "title": "InfiniteScroll",
+            "description": "Компонент с бесконечным скроллом страниц.",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [],
+            "properties": [
+                {
+                    "name": "enable",
+                    "decorators": [],
+                    "description": "Подключить бесконечный скролл",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": null
+                },
+                {
+                    "name": "hasNextPageAttribute",
+                    "decorators": [],
+                    "description": "Аттрибут (название) в форме для поля с флагом, определяющим есть ли следующая страница",
+                    "required": false,
+                    "type": "string",
+                    "example": "hasNextPage",
+                    "defaultValue": null
+                },
+                {
+                    "name": "list",
+                    "decorators": [],
+                    "description": "Список, для которого используется пагинация",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "defaultValue": null
+                },
+                {
+                    "name": "pageAttribute",
+                    "decorators": [],
+                    "description": "Аттрибут (название) в форме для поля с номером текущей страницы",
+                    "required": false,
+                    "type": "string",
+                    "example": "page",
+                    "defaultValue": null
+                }
+            ],
+            "methods": [
+                {
+                    "name": "onChange",
+                    "decorators": [],
+                    "description": "Обработчик, который вызывается после смены страницы",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": [
+                        {
+                            "name": "value",
+                            "decorators": [],
+                            "description": "",
+                            "required": true,
+                            "type": "number",
+                            "example": null
+                        }
+                    ]
+                }
+            ]
+        },
         "ILayoutNamesProps": {
             "name": "ILayoutNamesProps",
             "moduleName": "ui/list/LayoutNames/LayoutNames",
@@ -35786,6 +35939,15 @@
                     "example": "{\n text: 'Записи не найдены'\n}",
                     "defaultValue": null
                 },
+                {
+                    "name": "infiniteScroll",
+                    "decorators": [],
+                    "description": "Подключение бесконечного скролла",
+                    "required": false,
+                    "type": "boolean | IInfiniteScrollProps",
+                    "example": "{\n enable: true\n}",
+                    "defaultValue": null
+                },
                 {
                     "name": "initialItems",
                     "decorators": [],
@@ -36131,6 +36293,15 @@
                     "example": null,
                     "parameters": []
                 },
+                {
+                    "name": "renderInfiniteScroll",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "parameters": []
+                },
                 {
                     "name": "renderLayoutNames",
                     "decorators": [],
@@ -44509,6 +44680,13 @@
             "description": "",
             "tags": {}
         },
+        "ui/list/InfiniteScroll/InfiniteScroll": {
+            "name": "default",
+            "moduleName": "ui/list/InfiniteScroll/InfiniteScroll",
+            "title": "",
+            "description": "",
+            "tags": {}
+        },
         "ui/list/LayoutNames/LayoutNames": {
             "name": "default",
             "moduleName": "ui/list/LayoutNames/LayoutNames",

package/en.json

@@ -979,7 +979,11 @@
     "Скрыть иконку c лева от элемента": "",
     "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
     "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
+    "Компонент с бесконечным скроллом страниц.": "",
     "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n": "",
+    "Значение страницы по умолчанию.": "",
+    "Логическое значение, указывающее, можно ли загрузить еще элементы для списка при скролле.": "",
+    "Подключение бесконечного скролла": "",
     "Дополнительный свойства для view части компонента": "",
     "Используется для управления раскрытием всех элементов в дереве": "",
     "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
@@ -990,6 +994,7 @@
     "Сохранение в localStorage уровней вложенности.": "",
     "Дополнительные свойства для списка календарей бокового календаря": "",
     "Дополнительные свойства для бокового календаря": "",
+    "Данные для формы с текущими датами календаря": "",
     "Свойства для сетки дня": "",
     "Свойства для сетки месяца": "",
     "Свойства для сетки недели": "",
@@ -1013,6 +1018,9 @@
     "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
     "Допустимое количество символов после разделителя": "",
     "Может ли число быть отрицательным": "",
+    "Подключить бесконечный скролл": "",
+    "Аттрибут (название) в форме для поля с флагом, определяющим есть ли следующая страница": "",
+    "Аттрибут (название) в форме для поля с номером текущей страницы": "",
     "CSS-класс для элемента навигации.": "",
     "Тип данных для параметров маршрута.": "",
     "Обертка над Redux Store со встроенными middleware (thunk, multi, promise..) и react-router.": ""

package/hooks/useList.d.ts

@@ -1,3 +1,4 @@
+import { IInfiniteScrollProps } from '@steroidsjs/core/ui/list/InfiniteScroll/InfiniteScroll';
 import { IAddressBarConfig } from '../hooks/useAddressBar';
 import { IList } from '../actions/list';
 import { ILayoutNamesProps } from '../ui/list/LayoutNames/LayoutNames';
@@ -63,6 +64,14 @@ export interface IListConfig {
      * }
      */
     paginationSize?: boolean | IPaginationSizeProps;
+    /**
+     * Подключение бесконечного скролла
+     * @example
+     * {
+     *  enable: true
+     * }
+     */
+    infiniteScroll?: boolean | IInfiniteScrollProps;
     /**
      * Подключение сортировки
      * @example
@@ -208,6 +217,7 @@ export interface IListOutput {
     renderPaginationSize: () => any;
     renderLayoutNames: () => any;
     renderSearchForm: () => any;
+    renderInfiniteScroll: () => any;
     onFetch: (params?: Record<string, unknown>) => void;
     onSort: (value: any) => void;
 }

package/hooks/useList.js

@@ -44,6 +44,7 @@ var get_1 = __importDefault(require("lodash-es/get"));
 var union_1 = __importDefault(require("lodash-es/union"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var react_use_1 = require("react-use");
+var InfiniteScroll_1 = require("@steroidsjs/core/ui/list/InfiniteScroll/InfiniteScroll");
 var useSelector_1 = __importDefault(require("./useSelector"));
 var list_1 = require("../reducers/list");
 var useModel_1 = __importDefault(require("../hooks/useModel"));
@@ -105,6 +106,7 @@ var createInitialValues = function (_a) {
     return (__assign(__assign((_b = {}, _b[paginationProps.attribute] = paginationProps.defaultValue, _b[paginationSizeProps.attribute] = paginationSizeProps.defaultValue, _b[sort.attribute] = sort.defaultValue, _b[layoutNamesProps.attribute] = layoutNamesProps.defaultValue, _b), initialQuery), configQuery));
 };
 exports.createInitialValues = createInitialValues;
+var FIRST_PAGE = 1;
 /**
  * useList
  * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,
@@ -143,6 +145,12 @@ function useList(config) {
     var renderPagination = function () { return paginationProps.enable && (list === null || list === void 0 ? void 0 : list.isFetched)
         ? (react_1["default"].createElement(Pagination, __assign({ list: list }, paginationProps, { sizeAttribute: paginationSizeProps.attribute })))
         : null; };
+    // InfiniteScroll
+    var InfiniteScroll = require('../ui/list/InfiniteScroll')["default"];
+    var infiniteScrollProps = (0, InfiniteScroll_1.normalizeInfiniteScrollProps)(config.infiniteScroll);
+    var renderInfiniteScroll = function () { return infiniteScrollProps.enable && (list === null || list === void 0 ? void 0 : list.isFetched) && !(list === null || list === void 0 ? void 0 : list.isLoading)
+        ? (react_1["default"].createElement(InfiniteScroll, __assign({ list: list }, infiniteScrollProps, { sizeAttribute: infiniteScrollProps.attribute })))
+        : null; };
     // Layout switcher
     var LayoutNames = require('../ui/list/LayoutNames')["default"];
     var layoutNamesProps = (0, LayoutNames_1.normalizeLayoutNamesProps)(config.layout);
@@ -193,6 +201,7 @@ function useList(config) {
     }, [formId, initialValues]);
     // Init list in redux store
     (0, react_use_1.useMount)(function () {
+        var _a;
         if (!list) {
             var toDispatch = [
                 (0, list_2.listInit)(config.listId, {
@@ -213,7 +222,9 @@ function useList(config) {
                     pageAttribute: paginationProps.attribute || null,
                     pageSizeAttribute: paginationSizeProps.attribute || null,
                     sortAttribute: sort.attribute || null,
-                    layoutAttribute: layoutNamesProps.attribute || null
+                    layoutAttribute: layoutNamesProps.attribute || null,
+                    hasInfiniteScroll: (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.enable) || null,
+                    defaultPageValue: (_a = paginationProps.defaultValue) !== null && _a !== void 0 ? _a : FIRST_PAGE
                 }),
             ];
             if (config.initialItems || config.items) {
@@ -297,6 +308,7 @@ function useList(config) {
         renderPaginationSize: renderPaginationSize,
         renderLayoutNames: renderLayoutNames,
         renderSearchForm: renderSearchForm,
+        renderInfiniteScroll: renderInfiniteScroll,
         onFetch: onFetch,
         onSort: onSort
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.0.38",
+    "version": "3.0.40",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {

package/reducers/list.js

@@ -51,7 +51,7 @@ var reducerMap = (_a = {},
         var _a;
         var items;
         var list = state.lists[action.listId];
-        if (list.items === action.items) {
+        if (list.items === action.items && !list.hasInfiniteScroll) {
             // No changes
             items = list.items;
         }
@@ -62,6 +62,14 @@ var reducerMap = (_a = {},
                 items[index] = entry;
             });
         }
+        else if (list && list.items && list.hasInfiniteScroll) {
+            if (action.page === list.defaultPageValue) {
+                items = [].concat(action.items);
+            }
+            else {
+                items = [].concat(list.items, action.items);
+            }
+        }
         else {
             items = [].concat(action.items);
         }

package/ui/content/CalendarSystem/CalendarSystem.d.ts

@@ -59,7 +59,7 @@ export interface IEventGroup {
     /**
     * Идентификатор
     */
-    id: number;
+    id: number | string;
     /**
     * Название группы
     */
@@ -120,6 +120,10 @@ export interface ICalendarSystemProps extends IUiComponent {
         * Группы событий
         */
         eventGroups: IEventGroup[];
+        /**
+        * Можно ли добавлять группы событий в календарь
+        */
+        canAddedEventGroups?: boolean;
     };
     /**
     * Свойства для сетки дня
@@ -150,12 +154,25 @@ export interface ICalendarSystemProps extends IUiComponent {
      * Дочерние элементы
      */
     children?: React.ReactNode;
+    /**
+     * Функция, которая вызывается по клику на событие
+     */
+    onEventClick?: (event: Record<string, any>) => void;
+    /**
+     * Данные для формы с текущими датами календаря
+     */
+    calendarDatesFormData?: {
+        formId: string;
+        dateFromAttribute?: string;
+        dateToAttribute?: string;
+    };
     [key: string]: any;
 }
 export interface ICalendarSystemViewProps extends Pick<ICalendarSystemProps, 'className' | 'style' | 'additionalViewProps' | 'users' | 'asideCalendarProps' | 'asideCalendarCheckboxListProps'> {
     onCalendarChangedMonth: (newDate: Date) => void;
     eventGroups: IEventGroup[];
     eventGroupsTitle: string;
+    canAddedEventGroups?: boolean;
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
     openCreateEventGroupModal: VoidFunction;
     dateToDisplay: string;

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -36,6 +36,7 @@ function CalendarSystem(props) {
         additionalViewProps: props.additionalViewProps,
         users: calendarSystem.users,
         eventGroupsTitle: props.eventBlock.title,
+        canAddedEventGroups: props.eventBlock.canAddedEventGroups,
         asideCalendarProps: props.asideCalendarProps,
         asideCalendarCheckboxListProps: props.asideCalendarCheckboxListProps,
         children: props.children,
@@ -49,11 +50,11 @@ function CalendarSystem(props) {
         handleCalendarTypeChange: calendarSystem.handleCalendarTypeChange,
         onClickControl: calendarSystem.onClickControl,
         getEventsFromDate: calendarSystem.getEventsFromDate,
-        openEditModal: calendarSystem.openEditModal,
+        openEditModal: props.onEventClick || calendarSystem.openEditModal,
         monthGridProps: __assign({ monthGridWeekDays: calendarSystem.monthGridWeekDays, monthGridCalendarDays: calendarSystem.monthGridCalendarDays }, monthGridViews),
         weekGridProps: __assign({ weekGridTwentyFourHoursArray: calendarSystem.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays: calendarSystem.weekGridCurrentWeekDays }, weekGridViews),
         dayGridProps: __assign({ dayGridTwentyFourHoursArray: calendarSystem.dayGridTwentyFourHoursArray, dayGridCurrentDay: calendarSystem.dayGridCurrentDay }, dayGridViews)
-    }); }, [props.className, props.style, props.additionalViewProps, props.eventBlock.title, props.asideCalendarProps, props.asideCalendarCheckboxListProps, props.children, calendarSystem, monthGridViews, weekGridViews, dayGridViews]);
+    }); }, [props.className, props.style, props.additionalViewProps, props.eventBlock.title, props.eventBlock.canAddedEventGroups, props.asideCalendarProps, props.asideCalendarCheckboxListProps, props.children, props.onEventClick, calendarSystem, monthGridViews, weekGridViews, dayGridViews]);
     return components.ui.renderView(props.view || 'content.CalendarSystemView', viewProps);
 }
 exports["default"] = CalendarSystem;

package/ui/content/CalendarSystem/helpers/addEventIfMatchDate.d.ts

@@ -1,3 +1,3 @@
 import dayjs from 'dayjs';
 import { IEventGroup, IEvent } from '../CalendarSystem';
-export declare const addEventIfMatchDate: (eventDateDayJs: dayjs.Dayjs, sourceDateInDayJs: dayjs.Dayjs, calendarGroup: IEventGroup, originalEvent: IEvent, unit: 'hours' | 'day', selectedEventGroupsIds: number[], resultEventsOnDate: IEvent[]) => void;
+export declare const addEventIfMatchDate: (eventDateDayJs: dayjs.Dayjs, sourceDateInDayJs: dayjs.Dayjs, calendarGroup: IEventGroup, originalEvent: IEvent, unit: 'hours' | 'day', selectedEventGroupsIds: Array<number | string>, resultEventsOnDate: IEvent[]) => void;

package/ui/content/CalendarSystem/hooks/useCalendarSystem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ICalendarSystemProps, ICalendarUser, IEventGroup } from '../CalendarSystem';
-import CalendarEnum from '../enums/CalendarType';
+import CalendarType from '../enums/CalendarType';
 export declare const useCalendarSystem: (props: ICalendarSystemProps) => {
     monthGridWeekDays: any;
     monthGridCalendarDays: import("../CalendarSystem").IDay[];
@@ -16,11 +16,11 @@ export declare const useCalendarSystem: (props: ICalendarSystemProps) => {
     dayGridCurrentDay: import("../CalendarSystem").IDay;
     dateToDisplay: any;
     innerEventGroups: IEventGroup[];
-    calendarType: CalendarEnum;
+    calendarType: CalendarType;
     users: ICalendarUser[];
     setSelectedEventGroupsIds: React.Dispatch<React.SetStateAction<number[]>>;
     handleCalendarTypeChange: (newType: string) => void;
-    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => import("../CalendarSystem").IEvent[];
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarType) => import("../CalendarSystem").IEvent[];
     onCalendarChangedMonth: (newDate: Date) => void;
     openCreateEventGroupModal: () => void;
     openEditModal: (event: import("../CalendarSystem").IEvent) => void;

package/ui/content/CalendarSystem/hooks/useCalendarSystem.js

@@ -27,11 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.useCalendarSystem = void 0;
+/* eslint-disable default-case */
 var react_1 = __importStar(require("react"));
+var react_use_1 = require("react-use");
+var react_redux_1 = require("react-redux");
+var last_1 = __importDefault(require("lodash-es/last"));
+var head_1 = __importDefault(require("lodash-es/head"));
 var useDisplayDate_1 = __importDefault(require("./useDisplayDate"));
 var useDayGrid_1 = require("./useDayGrid");
 var useCalendarType_1 = require("./useCalendarType");
-var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
 var useMonthGrid_1 = __importDefault(require("./useMonthGrid"));
 var useWeekGrid_1 = __importDefault(require("./useWeekGrid"));
 var useCalendarControls_1 = __importDefault(require("./useCalendarControls"));
@@ -40,12 +44,24 @@ var useCalendarSystemEventGroupModals_1 = require("./useCalendarSystemEventGroup
 var useEventsFromDate_1 = require("./useEventsFromDate");
 var DisplayDateFormatType_1 = __importDefault(require("../enums/DisplayDateFormatType"));
 var utils_1 = require("../utils/utils");
+var form_1 = require("../../../../actions/form");
+var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var DEFAULT_DATE_FROM_ATTRIBUTE = 'dateFrom';
+var DEFAULT_DATE_TO_ATTRIBUTE = 'dateTo';
 var useCalendarSystem = function (props) {
-    var _a = react_1["default"].useState(props.eventBlock.eventGroups || []), innerEventGroups = _a[0], setInnerEventGroups = _a[1];
-    var _b = react_1["default"].useState([]), selectedEventGroupsIds = _b[0], setSelectedEventGroupsIds = _b[1];
-    var _c = (0, react_1.useState)(props.users), users = _c[0], setUsers = _c[1];
+    var _a, _b;
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var _c = react_1["default"].useState(props.eventBlock.eventGroups || []), innerEventGroups = _c[0], setInnerEventGroups = _c[1];
+    var _d = react_1["default"].useState([]), selectedEventGroupsIds = _d[0], setSelectedEventGroupsIds = _d[1];
+    var _e = (0, react_1.useState)(props.users), users = _e[0], setUsers = _e[1];
+    react_1["default"].useEffect(function () {
+        setInnerEventGroups(props.eventBlock.eventGroups);
+    }, [props.eventBlock.eventGroups]);
+    react_1["default"].useEffect(function () {
+        setUsers(props.users);
+    }, [props.users]);
     //Главная дата, от которой происходят все вычисления
-    var _d = react_1["default"].useState((0, utils_1.getFormattedDay)()), generalCurrentDay = _d[0], setGeneralCurrentDay = _d[1];
+    var _f = react_1["default"].useState((0, utils_1.getFormattedDay)()), generalCurrentDay = _f[0], setGeneralCurrentDay = _f[1];
     var isGeneralCurrentDayNeedsUpdate = (0, react_1.useRef)(true);
     var updateGeneralCurrentDay = (0, react_1.useCallback)(function (newDate) {
         if (!isGeneralCurrentDayNeedsUpdate.current) {
@@ -57,21 +73,59 @@ var useCalendarSystem = function (props) {
     var onCalendarChangedMonth = react_1["default"].useCallback(function (newDate) {
         updateGeneralCurrentDay(newDate);
     }, [updateGeneralCurrentDay]);
-    var _e = (0, useDisplayDate_1["default"])(generalCurrentDay), dateToDisplay = _e.dateToDisplay, changeDisplayFormat = _e.changeDisplayFormat;
-    var _f = (0, useMonthGrid_1["default"])(generalCurrentDay), monthGridWeekDays = _f.monthGridWeekDays, monthGridCalendarDays = _f.monthGridCalendarDays;
-    var _g = (0, useWeekGrid_1["default"])(generalCurrentDay), weekGridTwentyFourHoursArray = _g.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays = _g.weekGridCurrentWeekDays;
-    var _h = (0, useDayGrid_1.useDayGrid)(generalCurrentDay), dayGridTwentyFourHoursArray = _h.dayGridTwentyFourHoursArray, dayGridCurrentDay = _h.dayGridCurrentDay;
-    var _j = (0, useCalendarType_1.useCalendarType)(function (newType) {
+    var _g = (0, useDisplayDate_1["default"])(generalCurrentDay), dateToDisplay = _g.dateToDisplay, changeDisplayFormat = _g.changeDisplayFormat;
+    var _h = (0, useMonthGrid_1["default"])(generalCurrentDay), monthGridWeekDays = _h.monthGridWeekDays, monthGridCalendarDays = _h.monthGridCalendarDays;
+    var _j = (0, useWeekGrid_1["default"])(generalCurrentDay), weekGridTwentyFourHoursArray = _j.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays = _j.weekGridCurrentWeekDays;
+    var _k = (0, useDayGrid_1.useDayGrid)(generalCurrentDay), dayGridTwentyFourHoursArray = _k.dayGridTwentyFourHoursArray, dayGridCurrentDay = _k.dayGridCurrentDay;
+    var _l = (0, useCalendarType_1.useCalendarType)(function (newType) {
         if (newType === CalendarType_1["default"].DAY) {
             changeDisplayFormat(DisplayDateFormatType_1["default"].DAY);
             return;
         }
         changeDisplayFormat(DisplayDateFormatType_1["default"].DEFAULT);
-    }), calendarType = _j.calendarType, handleCalendarTypeChange = _j.handleCalendarTypeChange;
+    }), calendarType = _l.calendarType, handleCalendarTypeChange = _l.handleCalendarTypeChange;
     var onClickControl = (0, useCalendarControls_1["default"])(calendarType, generalCurrentDay, setGeneralCurrentDay, isGeneralCurrentDayNeedsUpdate).onClickControl;
-    var _k = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups, users, setUsers), openCreateModal = _k.openCreateModal, openEditModal = _k.openEditModal;
+    var _m = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups, users, setUsers), openCreateModal = _m.openCreateModal, openEditModal = _m.openEditModal;
     var openCreateEventGroupModal = (0, useCalendarSystemEventGroupModals_1.useCalendarSystemEventGroupModals)(innerEventGroups, setInnerEventGroups, props.eventGroupModalProps).openCreateEventGroupModal;
     var getEventsFromDate = (0, useEventsFromDate_1.useEventsFromDate)(innerEventGroups, selectedEventGroupsIds).getEventsFromDate;
+    // save dateTo and dateFrom in redux
+    var dateFromAttribute = ((_a = props.calendarDatesFormData) === null || _a === void 0 ? void 0 : _a.dateFromAttribute) || DEFAULT_DATE_FROM_ATTRIBUTE;
+    var dateToAttribute = ((_b = props.calendarDatesFormData) === null || _b === void 0 ? void 0 : _b.dateToAttribute) || DEFAULT_DATE_TO_ATTRIBUTE;
+    (0, react_use_1.useMount)(function () {
+        var _a;
+        if (props.calendarDatesFormData) {
+            dispatch((0, form_1.formInitialize)(props.calendarDatesFormData.formId, (_a = {},
+                _a[dateFromAttribute] = null,
+                _a[dateToAttribute] = null,
+                _a)));
+        }
+    });
+    react_1["default"].useEffect(function () {
+        var _a;
+        if (props.calendarDatesFormData) {
+            var currentDateArray = calendarType === CalendarType_1["default"].MONTH
+                ? monthGridCalendarDays
+                : weekGridCurrentWeekDays;
+            var newFormValues = (_a = {},
+                _a[dateFromAttribute] = (0, head_1["default"])(currentDateArray).date,
+                _a[dateToAttribute] = (0, last_1["default"])(currentDateArray).date,
+                _a);
+            if (calendarType === CalendarType_1["default"].DAY) {
+                newFormValues[dateFromAttribute] = dayGridCurrentDay.date;
+                newFormValues[dateToAttribute] = dayGridCurrentDay.date;
+            }
+            dispatch((0, form_1.formChange)(props.calendarDatesFormData.formId, newFormValues));
+        }
+    }, [
+        calendarType,
+        dateFromAttribute,
+        dateToAttribute,
+        dayGridCurrentDay,
+        dispatch,
+        monthGridCalendarDays,
+        props.calendarDatesFormData,
+        weekGridCurrentWeekDays,
+    ]);
     return {
         monthGridWeekDays: monthGridWeekDays,
         monthGridCalendarDays: monthGridCalendarDays,

package/ui/content/CalendarSystem/hooks/useCalendarSystemModals.d.ts

@@ -6,7 +6,7 @@ declare const useCalendarSystemModals: (calendarModalProps: IModalProps, innerEv
     openEditModal: (event: IEvent) => void;
     getEventFromGroup: (event: IEvent) => IEventGroup;
     getModalProps: (isCreate: boolean, eventInitialValues?: Partial<IEvent & {
-        eventGroupId: number;
+        eventGroupId: number | string;
     }>) => ICalendarSystemModalViewProps;
 };
 export default useCalendarSystemModals;

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

@@ -198,6 +198,7 @@ export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
     renderPaginationSize: () => any;
     renderLayoutNames: () => any;
     renderSearchForm: () => any;
+    renderInfiniteScroll: () => any;
     renderValue: (item: Record<string, unknown>, column: IGridColumn) => any;
     onFetch: (params?: Record<string, unknown>) => void;
     onSort: (value: any) => void;

package/ui/list/Grid/Grid.js

@@ -53,6 +53,7 @@ function Grid(props) {
         actionMethod: props.actionMethod,
         pagination: props.pagination,
         paginationSize: props.paginationSize,
+        infiniteScroll: props.infiniteScroll,
         sort: props.sort,
         layout: props.layout,
         empty: props.empty,
@@ -69,7 +70,7 @@ function Grid(props) {
         initialItems: props.initialItems,
         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, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, onFetch = _a.onFetch, onSort = _a.onSort;
+    }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, renderInfiniteScroll = _a.renderInfiniteScroll, onFetch = _a.onFetch, onSort = _a.onSort;
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {
             var HeaderView = column.headerView;
@@ -130,6 +131,7 @@ function Grid(props) {
         renderPaginationSize: renderPaginationSize,
         renderLayoutNames: renderLayoutNames,
         renderSearchForm: renderSearchForm,
+        renderInfiniteScroll: renderInfiniteScroll,
         renderValue: renderValue,
         columns: columns,
         onFetch: onFetch,
@@ -142,9 +144,9 @@ function Grid(props) {
         hasAlternatingColors: props.hasAlternatingColors,
         className: props.className,
         primaryKey: props.primaryKey
-    }); }, [columns, layoutNamesPosition, list, onFetch, onSort, paginationPosition, paginationSizePosition, props.className,
-        props.hasAlternatingColors, props.isLoading, props.listId, props.primaryKey, props.searchForm, props.size, renderEmpty,
-        renderLayoutNames, renderList, renderPagination, renderPaginationSize, renderSearchForm, renderValue, renderLoading]);
+    }); }, [list, paginationPosition, paginationSizePosition, layoutNamesPosition, renderList, renderLoading, renderEmpty,
+        renderPagination, renderPaginationSize, renderLayoutNames, renderSearchForm, renderInfiniteScroll, renderValue, columns,
+        onFetch, onSort, props.searchForm, props.listId, props.isLoading, props.size, props.hasAlternatingColors, props.className, props.primaryKey]);
     return components.ui.renderView(props.view || 'list.GridView', viewProps);
 }
 exports["default"] = Grid;

package/ui/list/InfiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+/**
+ * InfiniteScroll
+ * Компонент с бесконечным скроллом страниц.
+ */
+export interface IInfiniteScrollProps {
+    /**
+     * Подключить бесконечный скролл
+     * @example true
+     */
+    enable?: boolean;
+    /**
+     * Аттрибут (название) в форме для поля с номером текущей страницы
+     * @example page
+     */
+    pageAttribute?: string;
+    /**
+     * Аттрибут (название) в форме для поля с флагом, определяющим есть ли следующая страница
+     * @example hasNextPage
+     */
+    hasNextPageAttribute?: string;
+    /**
+     * Обработчик, который вызывается после смены страницы
+     * @param {number} value
+     * @return {void}
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Список, для которого используется пагинация
+     */
+    list?: any;
+    [key: string]: any;
+}
+declare function InfiniteScroll(props: IInfiniteScrollProps): JSX.Element;
+declare namespace InfiniteScroll {
+    var defaultProps: {
+        enable: boolean;
+        pageAttribute: string;
+        hasNextPageAttribute: string;
+    };
+}
+export declare const normalizeInfiniteScrollProps: (props: any) => any;
+declare const _default: React.MemoExoticComponent<typeof InfiniteScroll>;
+export default _default;

package/ui/list/InfiniteScroll/InfiniteScroll.js

@@ -0,0 +1,89 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.normalizeInfiniteScrollProps = void 0;
+var react_1 = __importStar(require("react"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var hooks_1 = require("./hooks");
+var useForm_1 = __importDefault(require("../../../hooks/useForm"));
+var form_1 = require("../../../actions/form");
+function InfiniteScroll(props) {
+    var _a, _b;
+    var observerTarget = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), isScrollRefSet = _c[0], setIsScrollRefSet = _c[1];
+    var setScrollContainerRef = (0, react_1.useCallback)(function (scrollContainerNode) {
+        if (scrollContainerNode) {
+            observerTarget.current = scrollContainerNode;
+            setIsScrollRefSet(true);
+        }
+    }, []);
+    var initialValues = {
+        page: (_a = props.list) === null || _a === void 0 ? void 0 : _a[props.pageAttribute]
+    };
+    var _d = (0, useForm_1["default"])(), formId = _d.formId, formDispatch = _d.formDispatch, formSelector = _d.formSelector;
+    var page = (formSelector(function (_a) {
+        var values = _a.values;
+        return ({
+            page: (0, get_1["default"])(values, props.pageAttribute)
+        });
+    }) || initialValues).page;
+    var onScrollFetch = (0, react_1.useCallback)(function () {
+        var nextPage = page + 1;
+        if (formDispatch) {
+            formDispatch((0, form_1.formChange)(formId, props.pageAttribute, nextPage));
+        }
+        if (props.onChange) {
+            props.onChange(nextPage);
+        }
+    }, [formDispatch, formId, page, props]);
+    (0, hooks_1.useIntersectionObserver)({
+        target: observerTarget,
+        onIntersect: function () { return onScrollFetch(); },
+        enabled: Boolean(!props.list.isLoading && ((_b = props.list) === null || _b === void 0 ? void 0 : _b[props.hasNextPageAttribute]) && isScrollRefSet)
+    });
+    return react_1["default"].createElement("div", { ref: setScrollContainerRef });
+}
+InfiniteScroll.defaultProps = {
+    enable: false,
+    pageAttribute: 'page',
+    hasNextPageAttribute: 'hasNextPage'
+};
+var normalizeInfiniteScrollProps = function (props) { return (__assign(__assign({}, InfiniteScroll.defaultProps), (typeof props === 'boolean' ? { enable: props } : props))); };
+exports.normalizeInfiniteScrollProps = normalizeInfiniteScrollProps;
+exports["default"] = (0, react_1.memo)(InfiniteScroll);

package/ui/list/InfiniteScroll/hooks.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+interface IIntersectionObserverConfig {
+    target: RefObject<any>;
+    onIntersect: (...args: any[]) => void;
+    enabled: boolean;
+}
+export declare const defaultConfig: {
+    threshold: number;
+    rootMargin: string;
+};
+export declare const useIntersectionObserver: (config: IIntersectionObserverConfig) => void;
+export {};

package/ui/list/InfiniteScroll/hooks.js

@@ -0,0 +1,41 @@
+"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);
+};
+exports.__esModule = true;
+exports.useIntersectionObserver = exports.defaultConfig = void 0;
+var react_1 = require("react");
+exports.defaultConfig = {
+    threshold: 0,
+    rootMargin: '0px'
+};
+var useIntersectionObserver = function (config) {
+    (0, react_1.useEffect)(function () {
+        if (!config.enabled) {
+            return;
+        }
+        var observer = new IntersectionObserver(function (entries) {
+            if (entries[0].isIntersecting) {
+                config.onIntersect();
+            }
+        }, __assign({}, exports.defaultConfig));
+        var ref = config.target;
+        if (!ref.current) {
+            return;
+        }
+        observer.observe(ref.current);
+        // eslint-disable-next-line consistent-return
+        return function () {
+            observer.unobserve(ref.current);
+        };
+    }, [config.target.current, config.enabled]);
+};
+exports.useIntersectionObserver = useIntersectionObserver;

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

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

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