@steroidsjs/core 3.0.12 → 3.0.14

package/docs-autogen-result.json

@@ -4576,7 +4576,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -4597,10 +4597,18 @@
                     "type": "string",
                     "example": "'exampleTree'"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "currentPage",
                     "decorators": [],
-                    "description": " Текущая страница, используется для корректного отображения пагинации",
+                    "description": "Текущая страница, используется для корректного отображения пагинации",
                     "required": false,
                     "type": "number",
                     "example": null
@@ -4624,7 +4632,7 @@
                 {
                     "name": "itemsOnPage",
                     "decorators": [],
-                    "description": " Количество элементов на странице, используется для корректного отображения пагинации",
+                    "description": "Количество элементов на странице, используется для корректного отображения пагинации",
                     "required": false,
                     "type": "number",
                     "example": null
@@ -4640,7 +4648,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null
@@ -15395,13 +15403,13 @@
                 "'items'>",
                 "IUiComponent",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'>"
+                "'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'>"
             ],
             "properties": [
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null,
@@ -15443,6 +15451,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": null
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -36915,6 +36932,7 @@
             "tags": {},
             "defaultProps": {
                 "alwaysOpened": "false",
+                "collapseChildItems": "false",
                 "levelPadding": "32",
                 "saveInClientStorage": "false"
             },
@@ -36922,18 +36940,27 @@
                 "Omit<IGridProps",
                 "'items'>",
                 "Pick<ITreeProps",
-                "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'>"
+                "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'>"
             ],
             "properties": [
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null,
                     "defaultValue": "false"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -38989,7 +39016,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -39034,6 +39061,14 @@
                     "type": "string",
                     "example": "'exampleTree'"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39109,7 +39144,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null
@@ -39211,6 +39246,7 @@
             "defaultProps": {
                 "autoOpenLevels": "1",
                 "autoSave": "false",
+                "collapseChildItems": "false",
                 "hasIconExpandOnly": "false",
                 "hideIcon": "false",
                 "itemsKey": "'items'",
@@ -39227,7 +39263,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null,
@@ -39269,6 +39305,15 @@
                     "example": "'exampleTree'",
                     "defaultValue": null
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39344,7 +39389,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null,
@@ -39448,7 +39493,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -39485,6 +39530,14 @@
                     "type": "string",
                     "example": "'exampleTree'"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39552,7 +39605,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null

package/en.json

@@ -980,7 +980,12 @@
     "\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": "",
     "Дополнительный свойства для view части компонента": "",
+    "Используется для управления раскрытием всех элементов в дереве": "",
     "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
+    "Скрывать открытые вложенные узлы, если скрыли родительский узел": "",
+    "Текущая страница, используется для корректного отображения пагинации": "",
+    "Количество элементов на странице, используется для корректного отображения пагинации": "",
+    "Параметры роутинга": "",
     "Сохранение в localStorage уровней вложенности.": "",
     "Компоненты для подключения wysiwyg редактора": "",
     "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",

package/hooks/useTree.d.ts

@@ -76,22 +76,22 @@ export interface ITreeConfig {
      */
     onExpand?: (...args: any[]) => any;
     /**
-     *  Используется для управления раскрытием всех элементов в дереве
+     * Используется для управления раскрытием всех элементов в дереве
      * @example: true
      */
     alwaysOpened?: boolean;
     /**
-     *  Текущая страница, используется для корректного отображения пагинации
+     * Текущая страница, используется для корректного отображения пагинации
      * @example: 1
      */
     currentPage?: number;
     /**
-     *  Количество элементов на странице, используется для корректного отображения пагинации
+     * Количество элементов на странице, используется для корректного отображения пагинации
      * @example: 4
      */
     itemsOnPage?: number;
     /**
-     *  Параметры роутинга
+     * Параметры роутинга
      * @example: true
      */
     routerParams?: any;
@@ -100,6 +100,11 @@ export interface ITreeConfig {
      * @example true
     */
     useSameSelectedItemId?: boolean;
+    /**
+     * Скрывать открытые вложенные узлы, если скрыли родительский узел
+     * @example true
+     */
+    collapseChildItems?: boolean;
     /**
      * Сохранение в localStorage уровней вложенности.
      * @example true

package/hooks/useTree.js

@@ -22,6 +22,7 @@ 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 pickBy_1 = __importDefault(require("lodash-es/pickBy"));
 var react_use_1 = require("react-use");
 var useComponents_1 = __importDefault(require("./useComponents"));
 var useSelector_1 = __importDefault(require("./useSelector"));
@@ -68,6 +69,7 @@ var findChildById = function (sourceItems, itemId, primaryKey, parentId, level)
     });
     return foundedItem;
 };
+var removeClosedChildItems = function (expandedItems, collapsedItemUniqueId) { return (0, pickBy_1["default"])(expandedItems, function (_, expandedItemUniqueId) { return !expandedItemUniqueId.startsWith(collapsedItemUniqueId); }); };
 var getAutoExpandedItems = function (sourceItems, selectedItemId, primaryKey, autoOpenLevels, parentId, level) {
     if (autoOpenLevels === void 0) { autoOpenLevels = 1; }
     if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
@@ -145,12 +147,15 @@ function useTree(config) {
     (0, react_use_1.useUnmount)(function () {
         saveInClientStorage();
     });
-    (0, react_use_1.useBeforeUnload)(function () {
-        saveInClientStorage();
-        return true;
-    });
+    (0, react_1.useEffect)(function () {
+        if (config.saveInClientStorage) {
+            window.addEventListener('beforeunload', saveInClientStorage);
+        }
+        return function () {
+            window.removeEventListener('beforeunload', saveInClientStorage);
+        };
+    }, [config.saveInClientStorage, saveInClientStorage]);
     var onExpand = (0, react_1.useCallback)(function (e, uniqueId, item) {
-        var _a;
         e.preventDefault();
         if (config.onExpand) {
             config.onExpand.call(null, e, item);
@@ -158,9 +163,17 @@ function useTree(config) {
         var sameUniqueIdAccordingToSettings = config.useSameSelectedItemId ? uniqueId : null;
         setSelectedUniqueId(selectedUniqueId === uniqueId ? sameUniqueIdAccordingToSettings : uniqueId);
         if (!(0, isEmpty_1["default"])(item[primaryKey])) {
-            setExpandedItems(__assign(__assign({}, expandedItems), (_a = {}, _a[uniqueId] = !expandedItems[uniqueId], _a)));
+            setExpandedItems(function (prevState) {
+                var _a;
+                // Hide child elements when closing the parent
+                if (config.collapseChildItems && prevState[uniqueId]) {
+                    return __assign({}, removeClosedChildItems(prevState, uniqueId));
+                }
+                // Hide/expand only the element that was clicked
+                return __assign(__assign({}, prevState), (_a = {}, _a[uniqueId] = !prevState[uniqueId], _a));
+            });
         }
-    }, [config.onExpand, config.useSameSelectedItemId, expandedItems, primaryKey, selectedUniqueId]);
+    }, [config.collapseChildItems, config.onExpand, config.useSameSelectedItemId, primaryKey, selectedUniqueId]);
     var resultTreeItems = (0, react_1.useMemo)(function () {
         var getItems = function (sourceItems, parentId, currentLevel) {
             if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }

package/package.json

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

package/ui/form/CheckboxTreeField/CheckboxTreeField.d.ts

@@ -19,7 +19,7 @@ type CheckboxTreeItems = string | ({
  *
  * Список с вложенными чекбоксами. Используется в формах для создания иерархической структуры и выбора нескольких значений.
  */
-export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'> {
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'> {
     /**
      * Свойства для элемента input
      * @example { onKeyDown: ... }

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -78,7 +78,8 @@ function CheckboxTreeField(props) {
     var treeItems = (0, hooks_1.useTree)({
         items: items,
         autoOpenLevels: 0,
-        alwaysOpened: props.alwaysOpened
+        alwaysOpened: props.alwaysOpened,
+        collapseChildItems: props.collapseChildItems
     }).treeItems;
     // Data select
     var _a = (0, hooks_1.useDataSelect)({
@@ -141,6 +142,7 @@ CheckboxTreeField.defaultProps = {
     primaryKey: 'items',
     hasOnlyLeafCheckboxes: false,
     hasIconExpandOnly: true,
-    saveInClientStorage: false
+    saveInClientStorage: false,
+    collapseChildItems: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

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

@@ -10,7 +10,7 @@ export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableP
  *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'> {
     /**
      * Элементы коллекции
      * @example
@@ -36,6 +36,7 @@ declare namespace TreeTable {
         levelPadding: number;
         alwaysOpened: boolean;
         saveInClientStorage: boolean;
+        collapseChildItems: boolean;
     };
 }
 export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -74,6 +74,7 @@ function TreeTable(props) {
         alwaysOpened: props.alwaysOpened,
         currentPage: list === null || list === void 0 ? void 0 : list.page,
         itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize,
+        collapseChildItems: props.collapseChildItems,
         saveInClientStorage: props.saveInClientStorage,
         clientStorageId: props.listId
     }).treeItems;
@@ -83,5 +84,6 @@ exports["default"] = TreeTable;
 TreeTable.defaultProps = {
     levelPadding: 32,
     alwaysOpened: false,
-    saveInClientStorage: false
+    saveInClientStorage: false,
+    collapseChildItems: false
 };

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

@@ -70,6 +70,7 @@ declare namespace Tree {
         useSameSelectedItemId: boolean;
         hideIcon: boolean;
         saveInClientStorage: boolean;
+        collapseChildItems: boolean;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -14,6 +14,7 @@ function Tree(props) {
         level: props.level,
         alwaysOpened: props.alwaysOpened,
         useSameSelectedItemId: props.useSameSelectedItemId,
+        collapseChildItems: props.collapseChildItems,
         saveInClientStorage: props.autoSave,
         clientStorageId: props.id
     }).treeItems;
@@ -37,5 +38,6 @@ Tree.defaultProps = {
     hasIconExpandOnly: false,
     useSameSelectedItemId: true,
     hideIcon: false,
-    saveInClientStorage: false
+    saveInClientStorage: false,
+    collapseChildItems: false
 };