@steroidsjs/core 3.0.38 → 3.0.39

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": [],
@@ -35134,6 +35167,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 +35511,15 @@
                     "example": null,
                     "parameters": []
                 },
+                {
+                    "name": "renderInfiniteScroll",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "parameters": []
+                },
                 {
                     "name": "renderLayoutNames",
                     "decorators": [],
@@ -35560,6 +35611,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 +35904,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 +36258,15 @@
                     "example": null,
                     "parameters": []
                 },
+                {
+                    "name": "renderInfiniteScroll",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "parameters": []
+                },
                 {
                     "name": "renderLayoutNames",
                     "decorators": [],
@@ -44509,6 +44645,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 коллекции.": "",
@@ -1013,6 +1017,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.39",
     "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/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"];