@steroidsjs/core 3.0.0-beta.107 → 3.0.0-beta.108

package/hooks/index.d.ts

@@ -18,9 +18,10 @@ import useSelector from './useSelector';
 import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
 import useTheme from './useTheme';
+import useTree from './useTree';
 import useMonthCalendar from '../ui/content/CalendarSystem/hooks/useMonthCalendar';
 import useWeekCalendar from '../ui/content/CalendarSystem/hooks/useWeekCalendar';
 import useDisplayDate from '../ui/content/CalendarSystem/hooks/useDisplayDate';
 import useCalendarControls from '../ui/content/CalendarSystem/hooks/useCalendarControls';
 import useSaveCursorPosition from './useSaveCursorPosition';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useMonthCalendar, useWeekCalendar, useDisplayDate, useCalendarControls, useSaveCursorPosition, };
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useTree, useMonthCalendar, useWeekCalendar, useDisplayDate, useCalendarControls, useSaveCursorPosition, };

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekCalendar = exports.useMonthCalendar = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekCalendar = exports.useMonthCalendar = exports.useTree = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
 var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
 exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
 var useAddressBar_1 = __importDefault(require("./useAddressBar"));
@@ -44,6 +44,8 @@ var useUniqueId_1 = __importDefault(require("./useUniqueId"));
 exports.useUniqueId = useUniqueId_1["default"];
 var useTheme_1 = __importDefault(require("./useTheme"));
 exports.useTheme = useTheme_1["default"];
+var useTree_1 = __importDefault(require("./useTree"));
+exports.useTree = useTree_1["default"];
 var useMonthCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useMonthCalendar"));
 exports.useMonthCalendar = useMonthCalendar_1["default"];
 var useWeekCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useWeekCalendar"));

package/hooks/useList.d.ts

@@ -1,4 +1,3 @@
-import { ITreeTableItem } from '../ui/list/TreeTable/TreeTable';
 import { IAddressBarConfig } from '../hooks/useAddressBar';
 import { IList } from '../actions/list';
 import { ILayoutNamesProps } from '../ui/list/LayoutNames/LayoutNames';
@@ -194,10 +193,6 @@ export interface IListConfig {
      * Количество элементов всего в списке (для отрисовки пагинации), заданное вручную
      */
     initialTotal?: number;
-    /**
-     * Включает обработку вложенных данных из items
-     */
-    hasTreeItems?: boolean;
 }
 export interface IListOutput {
     list: IList;
@@ -256,7 +251,6 @@ export declare const createInitialValues: ({ paginationProps, paginationSizeProp
     initialQuery: any;
     configQuery: any;
 }) => any;
-export declare const prepareItemsToTree: (sourceItems: ITreeTableItem[], openedTreeItems: Record<string, boolean>, currentPage: number | null, itemsOnPage: number | null, onTreeItemClick: (uniqueId: string, item: Record<string, any>) => void, parentId?: string, currentLevel?: number) => any[];
 /**
  * useList
  * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,

package/hooks/useList.js

@@ -37,19 +37,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.prepareItemsToTree = exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
-var react_1 = require("react");
+exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
+var react_1 = __importStar(require("react"));
 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 = __importStar(require("react"));
 var react_use_1 = require("react-use");
-var list_1 = require("../utils/list");
-var useSelector_1 = __importDefault(require("../hooks/useSelector"));
-var list_2 = require("../reducers/list");
+var useSelector_1 = __importDefault(require("./useSelector"));
+var list_1 = require("../reducers/list");
 var useModel_1 = __importDefault(require("../hooks/useModel"));
 var useAddressBar_1 = __importDefault(require("../hooks/useAddressBar"));
-var list_3 = require("../actions/list");
+var list_2 = require("../actions/list");
 var useDispatch_1 = __importDefault(require("../hooks/useDispatch"));
 var form_1 = require("../actions/form");
 var form_2 = require("../reducers/form");
@@ -105,27 +103,6 @@ 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 TOP_TREE_LEVEL_VALUE = 0;
-var prepareItemsToTree = function (sourceItems, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, parentId, currentLevel) {
-    if (parentId === void 0) { parentId = ''; }
-    if (currentLevel === void 0) { currentLevel = TOP_TREE_LEVEL_VALUE; }
-    var treeItems = [];
-    if (currentPage && itemsOnPage && currentLevel === TOP_TREE_LEVEL_VALUE) {
-        var startIndex = (currentPage - 1) * itemsOnPage;
-        sourceItems = sourceItems.slice(startIndex, startIndex + itemsOnPage);
-    }
-    (sourceItems || []).forEach(function (item, index) {
-        var uniqueId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
-        var isOpened = !!openedTreeItems[uniqueId];
-        var hasItems = !!(item.items && item.items.length > 0);
-        treeItems.push(__assign(__assign({}, item), { uniqueId: uniqueId, level: currentLevel, isOpened: isOpened, hasItems: hasItems, onClick: function () { return onTreeItemClick(uniqueId, item); } }));
-        if (isOpened) {
-            treeItems = treeItems.concat((0, exports.prepareItemsToTree)(item.items, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, uniqueId, currentLevel + 1)).filter(Boolean);
-        }
-    });
-    return treeItems;
-};
-exports.prepareItemsToTree = prepareItemsToTree;
 /**
  * useList
  * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,
@@ -135,18 +112,7 @@ exports.prepareItemsToTree = prepareItemsToTree;
 function useList(config) {
     var _a, _b;
     // Get list from redux state
-    var list = (0, useSelector_1["default"])(function (state) { return (0, list_2.getList)(state, config.listId); });
-    var _c = (0, react_1.useState)({}), openedTreeItems = _c[0], setOpenedTreeItems = _c[1];
-    var onTreeItemClick = (0, react_1.useCallback)(function (uniqueId, item) {
-        var _a;
-        if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            setOpenedTreeItems(function (prevItems) {
-                var _a;
-                return (__assign(__assign({}, prevItems), (_a = {}, _a[uniqueId] = !prevItems[uniqueId], _a)));
-            });
-        }
-    }, []);
-    var getTreeItems = (0, react_1.useCallback)(function (sourceItems) { return (0, exports.prepareItemsToTree)(sourceItems, openedTreeItems, list === null || list === void 0 ? void 0 : list.page, list === null || list === void 0 ? void 0 : list.pageSize, onTreeItemClick); }, [onTreeItemClick, openedTreeItems, list]);
+    var list = (0, useSelector_1["default"])(function (state) { return (0, list_1.getList)(state, config.listId); });
     // Normalize sort config
     var sort = (0, exports.normalizeSortProps)(config.sort);
     // Empty
@@ -157,24 +123,24 @@ function useList(config) {
         if (!emptyProps.enable || (list === null || list === void 0 ? void 0 : list.isLoading) || ((_a = list === null || list === void 0 ? void 0 : list.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             return null;
         }
-        return (React.createElement(Empty, __assign({ list: list }, emptyProps)));
+        return (react_1["default"].createElement(Empty, __assign({ list: list }, emptyProps)));
     };
     // Pagination size
     var PaginationSize = require('../ui/list/PaginationSize')["default"];
     var paginationSizeProps = (0, PaginationSize_1.normalizePaginationSizeProps)(config.paginationSize);
     var renderPaginationSize = function () { return paginationSizeProps.enable
-        ? (React.createElement(PaginationSize, __assign({ list: list }, paginationSizeProps)))
+        ? (react_1["default"].createElement(PaginationSize, __assign({ list: list }, paginationSizeProps)))
         : null; };
     // Pagination
     var Pagination = require('../ui/list/Pagination')["default"];
     var paginationProps = (0, Pagination_1.normalizePaginationProps)(config.pagination);
     var renderPagination = function () { return paginationProps.enable
-        ? (React.createElement(Pagination, __assign({ list: list }, paginationProps, { sizeAttribute: paginationSizeProps.attribute })))
+        ? (react_1["default"].createElement(Pagination, __assign({ list: list }, paginationProps, { sizeAttribute: paginationSizeProps.attribute })))
         : null; };
     // Layout switcher
     var LayoutNames = require('../ui/list/LayoutNames')["default"];
     var layoutNamesProps = (0, LayoutNames_1.normalizeLayoutNamesProps)(config.layout);
-    var renderLayoutNames = function () { return (React.createElement(LayoutNames, __assign({ list: list }, layoutNamesProps))); };
+    var renderLayoutNames = function () { return (react_1["default"].createElement(LayoutNames, __assign({ list: list }, layoutNamesProps))); };
     // Models
     var defaultSearchModel = (0, react_1.useMemo)(function () { return (0, exports.getDefaultSearchModel)({
         paginationProps: paginationProps,
@@ -185,7 +151,7 @@ function useList(config) {
     var model = (0, useModel_1["default"])(config.model);
     var searchModel = (0, useModel_1["default"])(config.searchModel || ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.model), defaultSearchModel);
     // Address bar synchronization
-    var _d = (0, useAddressBar_1["default"])(__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _d.initialQuery, updateQuery = _d.updateQuery;
+    var _c = (0, useAddressBar_1["default"])(__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _c.initialQuery, updateQuery = _c.updateQuery;
     // Outside search form
     var searchFormFields = (_b = config.searchForm) === null || _b === void 0 ? void 0 : _b.fields;
     var SearchForm = require('../ui/list/SearchForm')["default"];
@@ -195,7 +161,7 @@ function useList(config) {
         return acc;
     }, {}); }, [searchFormFields, initialQuery]);
     var searchFormProps = __assign(__assign({ listId: config.listId }, config.searchForm), { model: searchModel, initialValues: initialValuesSearchForm });
-    var renderSearchForm = function () { return React.createElement(SearchForm, __assign({}, searchFormProps)); };
+    var renderSearchForm = function () { return react_1["default"].createElement(SearchForm, __assign({}, searchFormProps)); };
     // Form id
     var formId = (0, get_1["default"])(config, 'searchForm.formId') || config.listId;
     var dispatch = (0, useDispatch_1["default"])();
@@ -211,14 +177,13 @@ function useList(config) {
     var initialValues = (0, useInitial_1["default"])(function () { return _initialValues; });
     var renderList = (0, react_1.useCallback)(function (children) {
         var Form = require('../ui/form/Form')["default"];
-        return (React.createElement(Form, { formId: formId, initialValues: initialValues, view: false, useRedux: true }, children));
+        return (react_1["default"].createElement(Form, { formId: formId, initialValues: initialValues, view: false, useRedux: true }, children));
     }, [formId, initialValues]);
     // Init list in redux store
     (0, react_use_1.useMount)(function () {
         if (!list) {
-            var items = config.hasTreeItems ? getTreeItems(config.items) : config.items;
             var toDispatch = [
-                (0, list_3.listInit)(config.listId, {
+                (0, list_2.listInit)(config.listId, {
                     listId: config.listId,
                     action: config.action || config.action === '' ? config.action : null,
                     actionMethod: config.actionMethod || exports.defaultConfig.actionMethod,
@@ -227,7 +192,7 @@ function useList(config) {
                     condition: config.condition,
                     scope: config.scope,
                     items: null,
-                    sourceItems: items || null,
+                    sourceItems: config.items || null,
                     total: config.initialTotal,
                     isRemote: !config.items,
                     primaryKey: config.primaryKey || exports.defaultConfig.primaryKey,
@@ -239,15 +204,11 @@ function useList(config) {
                     layoutAttribute: layoutNamesProps.attribute || null
                 }),
             ];
-            if (config.initialItems) {
-                var initialItems = config.hasTreeItems ? getTreeItems(config.initialItems) : config.initialItems;
-                toDispatch.push((0, list_3.listSetItems)(config.listId, initialItems));
-            }
-            else if (config.items) {
-                toDispatch.push((0, list_3.listSetItems)(config.listId, items));
+            if (config.initialItems || config.items) {
+                toDispatch.push((0, list_2.listSetItems)(config.listId, config.initialItems || config.items));
             }
             if (!config.initialItems) {
-                toDispatch.push((0, list_3.listLazyFetch)(config.listId));
+                toDispatch.push((0, list_2.listLazyFetch)(config.listId));
             }
             dispatch(toDispatch);
         }
@@ -270,7 +231,7 @@ function useList(config) {
             updateQuery(formValues);
             // Send request
             if (config.autoFetchOnFormChanges !== false) {
-                dispatch((0, list_3.listLazyFetch)(config.listId));
+                dispatch((0, list_2.listLazyFetch)(config.listId));
             }
         }
     }, [config.autoFetchOnFormChanges, config.listId, dispatch, formId, formValues,
@@ -288,29 +249,22 @@ function useList(config) {
     // Check change items
     (0, react_use_1.useUpdateEffect)(function () {
         dispatch([
-            (0, list_3.listSetItems)(config.listId, config.items),
+            (0, list_2.listSetItems)(config.listId, config.items),
         ]);
     }, [dispatch, config.items, config.listId]);
-    (0, react_use_1.useUpdateEffect)(function () {
-        if (config.hasTreeItems) {
-            dispatch([
-                (0, list_3.listSetItems)(config.listId, getTreeItems(config.items)),
-            ]);
-        }
-    }, [dispatch, config.items, config.listId, openedTreeItems, list === null || list === void 0 ? void 0 : list.pageSize, list === null || list === void 0 ? void 0 : list.page]);
     // Destroy
     (0, react_use_1.useUnmount)(function () {
         var autoDestroy = typeof config.autoDestroy === 'boolean' ? config.autoDestroy : exports.defaultConfig.autoDestroy;
         if (autoDestroy) {
             dispatch([
-                (0, list_3.listDestroy)(config.listId),
+                (0, list_2.listDestroy)(config.listId),
                 (0, form_1.formDestroy)(config.listId),
             ]);
         }
     });
     var onFetch = (0, react_1.useCallback)(function (params) {
         if (params === void 0) { params = {}; }
-        dispatch((0, list_3.listFetch)(config.listId, params));
+        dispatch((0, list_2.listFetch)(config.listId, params));
     }, [config.listId, dispatch]);
     var onSort = (0, react_1.useCallback)(function (value) {
         dispatch((0, form_1.formChange)(formId, sort.attribute, value));

package/hooks/useTree.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { IButtonProps } from '@steroidsjs/core/ui/form/Button/Button';
+export interface ITreeItem extends IButtonProps {
+    /**
+     * Идентификатор узла
+     */
+    id?: string | number;
+    /**
+     * Вложенные элементы
+     * @example
+     * [
+     *  {
+     *   id: 2,
+     *   label: 'Nested element',
+     *   items: [...]
+     *  }
+     * ]
+     */
+    items?: ITreeItem[];
+    /**
+     * Скрыть или показать узел
+     * @example true
+     */
+    visible?: boolean;
+}
+export interface IPreparedTreeItem extends ITreeItem {
+    uniqueId: string;
+    index: number;
+    level: number;
+    isOpened: boolean;
+    isSelected: boolean;
+    hasItems: boolean;
+    onClick: (e: Event | React.MouseEvent | any) => void;
+    className?: CssClassName;
+}
+export interface ITreeOutput {
+    treeItems: IPreparedTreeItem[];
+}
+export interface ITreeConfig {
+    /**
+     * Коллекция с узлами. Также можно передать идентификатор роута, тогда компонент найдет все
+     * вложенные роуты и отобразит их в виде дерева.
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Root',
+     *   items: [...]
+     *  }
+     * ] | 'root'
+     */
+    items?: ITreeItem[] | string;
+    /**
+     * Ограничивает максимальный уровень вложенности дерева
+     * @example 2
+     */
+    level?: number;
+    /**
+     * Ключ для доступа к вложенным элементам узла
+     * @example 'items'
+     */
+    itemsKey?: string;
+    /**
+     * Идентификатор узла, которой нужно отобразить в раскрытом виде
+     * @example 2
+     */
+    selectedItemId?: string | number;
+    /**
+     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
+     * @example 1
+     */
+    autoOpenLevels?: number;
+    /**
+     * Обработчик на клик по узлу
+     * @param args
+     */
+    onExpand?: (...args: any[]) => any;
+    /**
+     *  Используется для управления раскрытием всех элементов в дереве
+     * @example: true
+     */
+    alwaysOpened?: boolean;
+    /**
+     *  Текущая страница, используется для корректного отображения пагинации
+     * @example: 1
+     */
+    currentPage?: number;
+    /**
+     *  Количество элементов на странице, используется для корректного отображения пагинации
+     * @example: 4
+     */
+    itemsOnPage?: number;
+    /**
+     *  Параметры роутинга
+     * @example: true
+     */
+    routerParams?: any;
+}
+export default function useTree(config: ITreeConfig): ITreeOutput;

package/hooks/useTree.js

@@ -0,0 +1,168 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var join_1 = __importDefault(require("lodash-es/join"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
+var keys_1 = __importDefault(require("lodash-es/keys"));
+var useSelector_1 = __importDefault(require("./useSelector"));
+var router_1 = require("../reducers/router");
+var INITIAL_CURRENT_LEVEL = 0;
+var DOT_SEPARATOR = '.';
+var EMPTY_PARENT_ID = '';
+var FIRST_LEVEL_PARENT_ID = '0';
+var defaultProps = {
+    itemsKey: 'items',
+    autoOpenLevels: 0
+};
+var getTreeItemUniqueId = function (item, index, parentId) { return (0, join_1["default"])([parentId || FIRST_LEVEL_PARENT_ID, String(item.id || index)], DOT_SEPARATOR); };
+var routeToItem = function (route, routerParams) {
+    var routeItems = (Array.isArray(route.items)
+        ? route.items.map(function (r) { return routeToItem(r, routerParams); })
+        : Object.keys(route.items || {}).map(function (id) { return routeToItem(route.items[id], routerParams); })).filter(function (r) { return r.visible; });
+    return {
+        id: route.id.toLowerCase(),
+        label: route.label || route.title,
+        visible: route.isNavVisible !== false,
+        toRoute: routeItems.length === 0 ? route.id : null,
+        toRouteParams: routeItems.length === 0 ? routerParams : null,
+        items: routeItems,
+        icon: route.icon
+    };
+};
+var findChildById = function (sourceItems, itemId, primaryKey, parentId, level) {
+    if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
+    if (level === void 0) { level = 1; }
+    if ((0, isString_1["default"])(sourceItems)) {
+        return null;
+    }
+    var foundedItem = null;
+    (sourceItems || []).forEach(function (item, index) {
+        var uniqueId = getTreeItemUniqueId(item, index, parentId);
+        if (!foundedItem && (item.id === itemId || uniqueId === itemId)) {
+            foundedItem = __assign(__assign({}, item), { uniqueId: uniqueId, level: level });
+        }
+        if (!foundedItem) {
+            foundedItem = findChildById(item[primaryKey], itemId, primaryKey, uniqueId, level + 1);
+        }
+    });
+    return foundedItem;
+};
+var getAutoExpandedItems = function (sourceItems, selectedItemId, primaryKey, autoOpenLevels, parentId, level) {
+    if (autoOpenLevels === void 0) { autoOpenLevels = 1; }
+    if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
+    if (level === void 0) { level = 1; }
+    var opened = {};
+    (sourceItems || []).forEach(function (item, index) {
+        var uniqueId = getTreeItemUniqueId(item, index, parentId);
+        if (autoOpenLevels >= level) {
+            opened[uniqueId] = true;
+        }
+        if (selectedItemId === item.id) {
+            opened[uniqueId] = true;
+        }
+        if (selectedItemId) {
+            var finedItem = findChildById(item[primaryKey], selectedItemId, primaryKey);
+            if (finedItem) {
+                opened[uniqueId] = true;
+            }
+        }
+        opened = __assign(__assign({}, opened), getAutoExpandedItems(item[primaryKey], selectedItemId, primaryKey, autoOpenLevels, uniqueId, level + 1));
+    });
+    return opened;
+};
+var isSelectedItem = function (selectedUniqueId, uniqueId, activeRouteIds, item, routerParams) { return (selectedUniqueId === uniqueId
+    || ((activeRouteIds || []).includes(item.toRoute)
+        && (0, isEqual_1["default"])(item.toRouteParams || {}, (0, omit_1["default"])(routerParams, (0, keys_1["default"])(item.toRouteParams))))); };
+function useTree(config) {
+    // Get primary key
+    var primaryKey = config.itemsKey || defaultProps.itemsKey;
+    var _a = (0, react_1.useState)(null), selectedUniqueId = _a[0], setSelectedUniqueId = _a[1];
+    var _b = (0, react_1.useState)({}), expandedItems = _b[0], setExpandedItems = _b[1];
+    //Redux connection
+    var _c = (0, useSelector_1["default"])(function (state) { return ({
+        routes: (0, isString_1["default"])(config.items) ? (0, router_1.getNavItems)(state, config.items) : null,
+        selectedItemId: (0, isString_1["default"])(config.items) ? (0, router_1.getRouteId)(state) : config.selectedItemId,
+        activeRouteIds: (0, router_1.getActiveRouteIds)(state),
+        routerParams: (0, router_1.getRouterParams)(state)
+    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
+    var items = (0, react_1.useMemo)(function () {
+        if (!(0, isNil_1["default"])(routes)) {
+            return routes
+                .map(function (route) { return routeToItem(route, config.routerParams); })
+                .filter(function (route) { return route.visible; });
+        }
+        if (Array.isArray(config.items)) {
+            return config.items;
+        }
+        return [];
+    }, [config.items, config.routerParams, routes]);
+    // Initial expanded items
+    (0, react_1.useEffect)(function () {
+        // TODO add clientStorage
+        setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
+        var selectedItem = findChildById(items, selectedItemId, primaryKey);
+        setSelectedUniqueId(selectedItem ? selectedItem.uniqueId : null);
+    }, [items]);
+    var onExpand = (0, react_1.useCallback)(function (e, uniqueId, item) {
+        var _a;
+        e.preventDefault();
+        if (config.onExpand) {
+            config.onExpand.call(null, e, item);
+        }
+        setSelectedUniqueId(selectedUniqueId === uniqueId ? null : uniqueId);
+        if (!(0, isEmpty_1["default"])(item[primaryKey])) {
+            setExpandedItems(__assign(__assign({}, expandedItems), (_a = {}, _a[uniqueId] = !expandedItems[uniqueId], _a)));
+        }
+    }, [config.onExpand, expandedItems, primaryKey, selectedUniqueId]);
+    var resultTreeItems = (0, react_1.useMemo)(function () {
+        var getItems = function (sourceItems, parentId, currentLevel) {
+            if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
+            if (currentLevel === void 0) { currentLevel = INITIAL_CURRENT_LEVEL; }
+            if (config.level && currentLevel === config.level) {
+                return [];
+            }
+            if (config.currentPage && config.itemsOnPage && currentLevel === INITIAL_CURRENT_LEVEL) {
+                var startIndex = (config.currentPage - 1) * config.itemsOnPage;
+                sourceItems = sourceItems.slice(startIndex, startIndex + config.itemsOnPage);
+            }
+            return (sourceItems || []).reduce(function (treeItems, item, index) {
+                var uniqueId = getTreeItemUniqueId(item, index, parentId);
+                var treeItem = __assign(__assign({}, item), { index: index, level: currentLevel, uniqueId: uniqueId, isOpened: config.alwaysOpened || !!expandedItems[uniqueId], hasItems: !(0, isEmpty_1["default"])(item[primaryKey]), isSelected: isSelectedItem(selectedUniqueId, uniqueId, activeRouteIds, item, routerParams), onClick: function (e) { return onExpand(e, uniqueId, item); } });
+                // Ограничивает максимальный уровень вложенности дерева
+                if (config.level && (currentLevel === config.level - 1)) {
+                    treeItem.hasItems = false;
+                }
+                treeItems.push(treeItem);
+                if (treeItem.isOpened) {
+                    var nestedItem = getItems(item[primaryKey], uniqueId, currentLevel + 1);
+                    treeItems = treeItems.concat(nestedItem).filter(Boolean);
+                }
+                return treeItems;
+            }, []);
+        };
+        return getItems(items);
+        // eslint-disable-next-line max-len
+    }, [activeRouteIds, config.alwaysOpened, config.currentPage, config.itemsOnPage, config.level, expandedItems, items, onExpand, primaryKey, routerParams, selectedUniqueId]);
+    return {
+        treeItems: resultTreeItems
+    };
+}
+exports["default"] = useTree;

package/package.json

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

package/ui/form/FieldList/FieldList.js

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,6 +49,10 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var isBoolean_1 = __importDefault(require("lodash-es/isBoolean"));
 var range_1 = __importDefault(require("lodash-es/range"));
+var concat_1 = __importDefault(require("lodash-es/concat"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var get_1 = __importDefault(require("lodash-es/get"));
 var react_use_1 = require("react-use");
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
@@ -53,15 +66,29 @@ function FieldList(props) {
     var context = (0, react_1.useContext)(Form_1.FormContext);
     // Resolve model
     var modelAttributes = (_a = components.meta.getModel(props.model)) === null || _a === void 0 ? void 0 : _a.attributes;
+    var isWithReduxForm = (0, hooks_1.useSelector)(function (state) { return (0, get_1["default"])(state, ['form', context.formId]) || null; });
     var dispatch = context.provider.useDispatch();
+    // Mapper for preserving the correct sequence of rows on the UI
+    var _b = (0, react_1.useState)([]), storeToRowIndexMap = _b[0], setStoreToRowIndexMap = _b[1];
+    var addRowIndexes = (0, react_1.useCallback)(function (rowsCount) {
+        setStoreToRowIndexMap(function (prevMap) {
+            var lastIndex = !(0, isEmpty_1["default"])(prevMap) ? (0, last_1["default"])(prevMap) + 1 : 0;
+            return (0, concat_1["default"])(prevMap, (0, range_1["default"])(lastIndex, lastIndex + rowsCount));
+        });
+    }, []);
+    var removeRowIndex = (0, react_1.useCallback)(function (rowIndex) {
+        setStoreToRowIndexMap(function (prevMap) { return __spreadArray(__spreadArray([], prevMap.slice(0, rowIndex), true), prevMap.slice(rowIndex + 1), true); });
+    }, []);
     // Add and Remove handlers
     var onAdd = (0, react_1.useCallback)(function (rowsCount) {
         if (rowsCount === void 0) { rowsCount = 1; }
+        addRowIndexes(rowsCount);
         dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
-    }, [context.formId, dispatch, props.initialValues, props.input.name]);
+    }, [context.formId, dispatch, props.initialValues, props.input.name, addRowIndexes]);
     var onRemove = (0, react_1.useCallback)(function (rowIndex) {
+        removeRowIndex(rowIndex);
         dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
-    }, [context.formId, dispatch, props.input.name]);
+    }, [context.formId, dispatch, props.input.name, removeRowIndex]);
     // Add initial rows
     (0, react_use_1.useMount)(function () {
         if (!props.input.value) {
@@ -106,8 +133,7 @@ function FieldList(props) {
     var FieldListView = props.view || components.ui.getView('form.FieldListView');
     var FieldListItemView = props.itemView || components.ui.getView('form.FieldListItemView');
     return (React.createElement(Form_1.FormContext.Provider, { value: contextValue },
-        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors }), (0, range_1["default"])(props.input.value || 0)
-            .map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
+        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors }), !(0, isEmpty_1["default"])(storeToRowIndexMap) && (0, range_1["default"])(props.input.value || 0).map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: isWithReduxForm ? storeToRowIndexMap[index] : index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
 }
 FieldList.defaultProps = {
     initialValues: null,

package/ui/list/Grid/Grid.js

@@ -69,8 +69,7 @@ function Grid(props) {
         items: props.items,
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
-        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
-        hasTreeItems: props.hasTreeItems
+        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 = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {

package/ui/list/TreeTable/TreeTable.d.ts

@@ -1,37 +1,16 @@
 /// <reference types="react" />
+import { ITreeProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
+import { IPreparedTreeItem, ITreeItem } from '../../../hooks/useTree';
 import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
-export interface ITreeColumnViewProps extends IColumnViewProps {
-    item: ITreeTableItem & {
-        uniqueId: string;
-        level: number;
-        isOpened: boolean;
-        hasItems: boolean;
-        onClick: () => void;
-    };
-}
-export interface ITreeTableItem {
-    /**
-     * Идентификатор узла
-     */
-    id?: string | number;
-    /**
-     * Вложенные элементы
-     * @example
-     * items: [
-     *  {
-     *   id: 3,
-     *   name: 'Ivan'
-     *  }
-     * ]
-     */
-    items?: ITreeTableItem[];
+export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableProps, 'levelPadding'> {
+    item: IPreparedTreeItem;
 }
 /**
  * TreeTable
  *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding'> {
     /**
      * Элементы коллекции
      * @example
@@ -47,18 +26,14 @@ export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
      *  }
      * ]
      */
-    items?: ITreeTableItem[];
-    /**
-     * Расстояние вложенных элементов от родителя для каждого уровня
-     * @example 32
-     */
-    levelPadding?: number | string;
+    items?: ITreeItem[];
 }
 export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number) => IGridColumn[];
 declare function TreeTable(props: ITreeTableProps): JSX.Element;
 declare namespace TreeTable {
     var defaultProps: {
         levelPadding: number;
+        alwaysOpened: boolean;
     };
 }
 export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -50,7 +50,10 @@ exports.addTreeColumnFieldsToFirstColumn = void 0;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var merge_1 = __importDefault(require("lodash-es/merge"));
+var list_1 = require("@steroidsjs/core/reducers/list");
+var useTree_1 = __importDefault(require("../../../hooks/useTree"));
 var Grid_1 = __importDefault(require("../Grid"));
+var useSelector_1 = __importDefault(require("../../../hooks/useSelector"));
 var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
@@ -64,9 +67,18 @@ var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding) {
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
 function TreeTable(props) {
     var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding); }, [props.columns, props.levelPadding]);
-    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));
+    var list = (0, useSelector_1["default"])(function (state) { return (0, list_1.getList)(state, props.listId); });
+    var treeItems = (0, useTree_1["default"])({
+        items: props.items,
+        autoOpenLevels: 0,
+        alwaysOpened: props.alwaysOpened,
+        currentPage: list === null || list === void 0 ? void 0 : list.page,
+        itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize
+    }).treeItems;
+    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: treeItems, itemsIndexing: false })));
 }
 exports["default"] = TreeTable;
 TreeTable.defaultProps = {
-    levelPadding: 32
+    levelPadding: 32,
+    alwaysOpened: false
 };

package/ui/nav/Tree/Tree.d.ts

@@ -1,66 +1,22 @@
 import * as React from 'react';
-import { IButtonProps } from '../../form/Button/Button';
-export interface ITreeItem extends IButtonProps {
-    /**
-     * Идентификатор узла
-     */
-    id?: string | number;
-    /**
-     * Вложенные элементы
-     * @example
-     * [
-     *  {
-     *   id: 2,
-     *   label: 'Nested element',
-     *   items: [...]
-     *  }
-     * ]
-     */
-    items?: any[];
-    /**
-     * Скрыть или показать узел
-     * @example true
-     */
-    visible?: boolean;
+import { IPreparedTreeItem, ITreeConfig } from '../../../hooks/useTree';
+export interface ITreeViewProps extends ITreeProps {
+    items: IPreparedTreeItem[];
+}
+export interface ITreeItemViewProps extends ITreeProps {
+    item: IPreparedTreeItem;
+    children?: JSX.Element;
 }
 /**
  * Tree
  * Компонент, который представляет в виде дерева список с иерархической структурой данных
  */
-export interface ITreeProps {
+export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPage'> {
     /**
      * Идентификатор (ключ) для сохранения в LocalStorage коллекции с раскрытыми узлами
      * @example 'exampleTree'
      */
     id?: string;
-    /**
-     * Коллекция с узлами. Также можно передать идентификатор роута, тогда компонент найдет все
-     * вложенные роуты и отобразит их в виде дерева.
-     * @example
-     * [
-     *  {
-     *   id: 1,
-     *   label: 'Root',
-     *   items: [...]
-     *  }
-     * ] | 'root'
-     */
-    items?: ITreeItem[] | string;
-    /**
-     * Ограничивает максимальный уровень вложенности дерева
-     * @example 2
-     */
-    level?: number;
-    /**
-     * Ключ для доступа к вложенным элементам узла
-     * @example 'items'
-     */
-    itemsKey?: string;
-    /**
-     * Идентификатор узла, которой нужно отобразить в раскрытом виде
-     * @example 2
-     */
-    selectedItemId?: string | number;
     /**
      * CSS-класс для элемента отображения
      */
@@ -70,11 +26,6 @@ export interface ITreeProps {
      * @example MyCustomView
      */
     view?: CustomView;
-    /**
-     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
-     * @example 1
-     */
-    autoOpenLevels?: number;
     /**
      * Обработчик на клик по узлу
      * @param args
@@ -86,24 +37,11 @@ export interface ITreeProps {
      */
     autoSave?: boolean;
     /**
-    *  Используется для управления раскрытием всех элементов в дереве
-    * @example: true
-    */
-    alwaysOpened?: boolean;
-    [key: string]: any;
-}
-export interface ITreeViewProps extends ITreeProps {
-    items: (ITreeItem & {
-        uniqId: string;
-        className: CssClassName;
-        index: number;
-        level: number;
-        isOpened: boolean;
-        isSelected: boolean;
-        hasItems: boolean;
-        onClick: (e: Event | React.MouseEvent | any) => void;
-    })[];
+     * Расстояние вложенных элементов от родителя для каждого уровня
+     * @example 32
+     */
     levelPadding?: number;
+    [key: string]: any;
 }
 declare function Tree(props: ITreeProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace Tree {
@@ -112,6 +50,7 @@ declare namespace Tree {
         autoOpenLevels: number;
         autoSave: boolean;
         level: number;
+        levelPadding: number;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -10,178 +10,27 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
-var React = __importStar(require("react"));
-var isString_1 = __importDefault(require("lodash-es/isString"));
-var omit_1 = __importDefault(require("lodash-es/omit"));
-var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
-var keys_1 = __importDefault(require("lodash-es/keys"));
-var react_1 = require("react");
-var list_1 = require("../../../utils/list");
 var hooks_1 = require("../../../hooks");
-var router_1 = require("../../../reducers/router");
 function Tree(props) {
     var components = (0, hooks_1.useComponents)();
-    var STORAGE_KEY_PREFIX = 'tree_';
-    //State
-    var _a = (0, react_1.useState)(null), selectedUniqId = _a[0], setSelectedUniqId = _a[1];
-    var _b = (0, react_1.useState)({}), openedItems = _b[0], setOpenedItems = _b[1];
-    //Redux connection
-    var _c = (0, hooks_1.useSelector)(function (state) { return ({
-        routes: (0, isString_1["default"])(props.items) ? (0, router_1.getNavItems)(state, props.items) : null,
-        selectedItemId: (0, isString_1["default"])(props.items) ? (0, router_1.getRouteId)(state) : props.selectedItemId,
-        activeRouteIds: (0, router_1.getActiveRouteIds)(state),
-        routerParams: (0, router_1.getRouterParams)(state)
-    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
-    var items = (0, react_1.useMemo)(function () {
-        if (routes) {
-            var routeToItem_1 = function (route) {
-                var routeItems = (Array.isArray(route.items)
-                    ? route.items.map(function (r) { return routeToItem_1(r); })
-                    : Object.keys(route.items || {}).map(function (id) { return routeToItem_1(route.items[id]); })).filter(function (r) { return r.visible; });
-                return {
-                    id: route.id.toLowerCase(),
-                    label: route.label || route.title,
-                    visible: route.isNavVisible !== false,
-                    toRoute: routeItems.length === 0 ? route.id : null,
-                    toRouteParams: routeItems.length === 0 ? props.routerParams : null,
-                    items: routeItems,
-                    icon: route.icon
-                };
-            };
-            return routes.map(function (route) { return routeToItem_1(route); }).filter(function (r) { return r.visible; });
-        }
-        if (Array.isArray(props.items)) {
-            return props.items;
-        }
-        return [];
-    }, [props.items, props.routerParams, routes]);
-    var findChildById = function (sourceItems, itemId, parentId, level) {
-        if (parentId === void 0) { parentId = ''; }
-        if (level === void 0) { level = 1; }
-        var foundItem = null;
-        if ((0, isString_1["default"])(sourceItems)) {
-            return null;
-        }
-        (sourceItems || []).forEach(function (item, index) {
-            var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
-            if (!foundItem && (item.id === itemId || uniqId === itemId)) {
-                foundItem = __assign(__assign({}, item), { uniqId: uniqId, level: level });
-            }
-            if (!foundItem) {
-                foundItem = findChildById(item[props.itemsKey], itemId, uniqId, level + 1);
-            }
-        });
-        return foundItem;
-    };
-    var autoOpen = function (sourceItems, parentId, level) {
-        if (parentId === void 0) { parentId = ''; }
-        if (level === void 0) { level = 1; }
-        var opened = {};
-        (sourceItems || []).forEach(function (item, index) {
-            var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
-            if (props.autoOpenLevels >= level) {
-                opened[uniqId] = true;
-            }
-            if (selectedItemId === item.id) {
-                opened[uniqId] = true;
-            }
-            if (selectedItemId) {
-                var finedItem = findChildById(item[props.itemsKey], selectedItemId);
-                if (finedItem) {
-                    opened[uniqId] = true;
-                }
-            }
-            opened = __assign(__assign({}, opened), autoOpen(item[props.itemsKey], uniqId, level + 1));
-        });
-        return opened;
-    };
-    // Initial opened items
-    React.useEffect(function () {
-        // TODO add  clientStorage
-        // const key = STORAGE_KEY_PREFIX + props.id;
-        // const opened = !this.state && this.props.clientStorage.get(key) && this.props.autoSave
-        //     ? JSON.parse(this.props.clientStorage.get(key))
-        //     : this._autoOpen(this.props._items);
-        var opened = autoOpen(items);
-        setOpenedItems(opened);
-        var selectedItem = findChildById(items, selectedItemId);
-        setSelectedUniqId(selectedItem ? selectedItem.uniqId : null);
-    }, [items]);
-    var onItemClick = (0, react_1.useCallback)(function (e, uniqId, item) {
-        var _a;
-        var _b;
-        e.preventDefault();
-        if (props.onItemClick) {
-            props.onItemClick.call(null, e, item);
-        }
-        setSelectedUniqId(selectedUniqId === uniqId ? null : uniqId);
-        if (((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-            var newItems = __assign(__assign({}, openedItems), (_a = {}, _a[uniqId] = !openedItems[uniqId], _a));
-            setOpenedItems(newItems);
-            // TODO add  clientStorage
-            // const key = STORAGE_KEY_PREFIX + this.props.id;
-            // this.props.clientStorage.set(key, JSON.stringify(this.state.opened));
-        }
-    }, [openedItems, props.onItemClick, selectedUniqId]);
-    var resultItems = (0, react_1.useMemo)(function () {
-        var getItems = function (sourceItems, parentId, level) {
-            if (parentId === void 0) { parentId = ''; }
-            if (level === void 0) { level = 0; }
-            var result = [];
-            if (props.level && level === props.level) {
-                return [];
-            }
-            (sourceItems || []).forEach(function (item, index) {
-                var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
-                var isOpened = props.alwaysOpened || !!openedItems[uniqId];
-                var hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
-                if (props.level && (level === props.level - 1)) {
-                    hasItems = false;
-                }
-                result.push(__assign(__assign({}, item), { uniqId: uniqId, index: index, level: level, isOpened: isOpened, isSelected: selectedUniqId === uniqId
-                        || (activeRouteIds.includes(item.toRoute)
-                            && (0, isEqual_1["default"])(item.toRouteParams || {}, (0, omit_1["default"])(routerParams, (0, keys_1["default"])(item.toRouteParams)))), hasItems: hasItems, onClick: function (e) { return onItemClick(e, uniqId, item); } }));
-                if (isOpened) {
-                    result = result.concat(getItems(item[props.itemsKey], uniqId, level + 1)).filter(Boolean);
-                }
-            });
-            return result;
-        };
-        return getItems(items);
-    }, [activeRouteIds, items, onItemClick, openedItems, props.alwaysOpened, props.itemsKey, props.level, routerParams, selectedUniqId]);
-    return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: resultItems }));
+    var treeItems = (0, hooks_1.useTree)({
+        items: props.items,
+        selectedItemId: props.selectedItemId,
+        routerParams: props.routerParams,
+        itemsKey: props.itemsKey,
+        autoOpenLevels: props.autoOpenLevels,
+        onExpand: props.onItemClick,
+        level: props.level,
+        alwaysOpened: props.alwaysOpened
+    }).treeItems;
+    return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: treeItems }));
 }
+exports["default"] = Tree;
 Tree.defaultProps = {
     itemsKey: 'items',
     autoOpenLevels: 1,
     autoSave: false,
-    level: 0
+    level: 0,
+    levelPadding: 32
 };
-exports["default"] = Tree;

package/utils/calendar.d.ts

@@ -1,4 +1,12 @@
 export declare const convertDate: (date: string | Date, fromFormats: string | string[], toFormat?: string, isUtc?: boolean, dateInUtc?: boolean) => any;
+export declare const customLocaleUtils: {
+    formatDay: (day: Date, locale?: string) => string;
+    formatMonthTitle: (month: Date, locale?: string) => string;
+    formatWeekdayShort: (weekday: number, locale?: string) => any;
+    formatWeekdayLong: (weekday: number, locale?: string) => any;
+    getFirstDayOfWeek: (locale?: string) => any;
+    getMonths: (locale?: string) => any;
+};
 /**
  * Регулярка проверяет соответствие введенной строки формату 'hh:mm'
  * Максимальная величина - 23:59

package/utils/calendar.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.convertDate = void 0;
+exports.customLocaleUtils = exports.convertDate = void 0;
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/prefer-default-export */
 var dayjs_1 = __importDefault(require("dayjs"));
@@ -45,6 +45,81 @@ var convertDate = function (date, fromFormats, toFormat, isUtc, dateInUtc) {
     return toFormat ? dayjsDate.format(toFormat) : dayjsDate.toDate();
 };
 exports.convertDate = convertDate;
+/**
+ * Функции форматирования для локализации Day Picker.
+ */
+var WEEKDAYS_LONG = {
+    en: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+    ],
+    ru: [
+        'Понедельник',
+        'Вторник',
+        'Среда',
+        'Четверг',
+        'Пятница',
+        'Суббота',
+        'Воскресенье',
+    ]
+};
+var WEEKDAYS_SHORT = {
+    en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    ru: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']
+};
+var MONTHS = {
+    en: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    ru: [
+        'Январь',
+        'Февраль',
+        'Март',
+        'Апрель',
+        'Май',
+        'Июнь',
+        'Июль',
+        'Август',
+        'Сентябрь',
+        'Октябрь',
+        'Ноябрь',
+        'Декабрь',
+    ]
+};
+var FIRST_DAY = {
+    en: 0,
+    ru: 1
+};
+var formatDay = function (day, locale) { return "".concat(WEEKDAYS_LONG[locale][day.getDay()], ", ").concat(day.getDate(), " ").concat(MONTHS[locale][day.getMonth()], " ").concat(day.getFullYear()); };
+var formatMonthTitle = function (month, locale) { return "".concat(MONTHS[locale][month.getMonth()], " ").concat(month.getFullYear()); };
+var formatWeekdayShort = function (weekday, locale) { return WEEKDAYS_SHORT[locale][weekday]; };
+var formatWeekdayLong = function (weekday, locale) { return WEEKDAYS_SHORT[locale][weekday]; };
+var getFirstDayOfWeek = function (locale) { return FIRST_DAY[locale]; };
+var getMonths = function (locale) { return MONTHS[locale]; };
+exports.customLocaleUtils = {
+    formatDay: formatDay,
+    formatMonthTitle: formatMonthTitle,
+    formatWeekdayShort: formatWeekdayShort,
+    formatWeekdayLong: formatWeekdayLong,
+    getFirstDayOfWeek: getFirstDayOfWeek,
+    getMonths: getMonths
+};
 /**
  * Регулярка проверяет соответствие введенной строки формату 'hh:mm'
  * Максимальная величина - 23:59

package/utils/list.d.ts

@@ -1 +0,0 @@
-export declare const getTreeItemUniqId: (item: any, index: any, parentId: any) => string;

package/utils/list.js

@@ -1,5 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.getTreeItemUniqId = void 0;
-var getTreeItemUniqId = function (item, index, parentId) { return (parentId || '0') + '.' + String(item.id || index); };
-exports.getTreeItemUniqId = getTreeItemUniqId;