@steroidsjs/core 3.0.14 → 3.0.15

package/docs-autogen-result.json

@@ -4998,7 +4998,26 @@
                     "example": null
                 }
             ],
-            "methods": []
+            "methods": [
+                {
+                    "name": "onItemFocus",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": [
+                        {
+                            "name": "e",
+                            "decorators": [],
+                            "description": "",
+                            "required": true,
+                            "type": "any",
+                            "example": null
+                        }
+                    ]
+                }
+            ]
         },
         "IUiComponent": {
             "name": "IUiComponent",
@@ -39241,7 +39260,7 @@
             "name": "ITreeProps",
             "moduleName": "ui/nav/Tree/Tree",
             "title": "Tree",
-            "description": "Компонент, который представляет в виде дерева список с иерархической структурой данных",
+            "description": "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n",
             "tags": {},
             "defaultProps": {
                 "autoOpenLevels": "1",
@@ -39687,6 +39706,15 @@
                             "example": null
                         }
                     ]
+                },
+                {
+                    "name": "onItemFocus",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": []
                 }
             ]
         },

package/en.json

@@ -979,6 +979,7 @@
     "Скрыть иконку 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 коллекции.": "",

package/hooks/useTree.d.ts

@@ -35,6 +35,7 @@ export interface IPreparedTreeItem extends ITreeItem {
 }
 export interface ITreeOutput {
     treeItems: IPreparedTreeItem[];
+    onItemFocus: (e: Event | React.MouseEvent | any) => void;
 }
 export interface ITreeConfig {
     /**
@@ -98,7 +99,7 @@ export interface ITreeConfig {
     /**
      * При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.
      * @example true
-    */
+     */
     useSameSelectedItemId?: boolean;
     /**
      * Скрывать открытые вложенные узлы, если скрыли родительский узел
@@ -108,7 +109,7 @@ export interface ITreeConfig {
     /**
      * Сохранение в localStorage уровней вложенности.
      * @example true
-    */
+     */
     saveInClientStorage?: boolean;
     /**
      * Идентификатор (ключ) для сохранения в LocalStorage коллекции.

package/hooks/useTree.js

@@ -120,6 +120,24 @@ function useTree(config) {
         }
         return [];
     }, [config.items, config.routerParams, routes]);
+    // Выполняет поиск текущего роута в дереве: раскрывает дерево до элемента, делает элемент активным
+    var onItemFocus = (0, react_1.useCallback)(function () {
+        var currentRouteAsTreeItem = findChildById(items, selectedItemId, primaryKey);
+        var currentRouteUniqueIdParts = currentRouteAsTreeItem.uniqueId.split(DOT_SEPARATOR); // Get all parent levels of item
+        var itemsToExpand = {};
+        var itemToExpandKey;
+        currentRouteUniqueIdParts.forEach(function (item, index) {
+            if (index === 0) {
+                itemToExpandKey = item;
+            }
+            else {
+                itemToExpandKey = [itemToExpandKey, item].join(DOT_SEPARATOR);
+                itemsToExpand[itemToExpandKey] = true;
+            }
+        });
+        setSelectedUniqueId(currentRouteAsTreeItem ? currentRouteAsTreeItem.uniqueId : null);
+        setExpandedItems(function (prev) { return (__assign(__assign({}, prev), itemsToExpand)); });
+    }, [items, primaryKey, selectedItemId]);
     // Initial expanded items
     (0, react_1.useEffect)(function () {
         setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
@@ -204,7 +222,8 @@ function useTree(config) {
         // eslint-disable-next-line max-len
     }, [activeRouteIds, config.alwaysOpened, config.currentPage, config.itemsOnPage, config.level, expandedItems, items, onExpand, primaryKey, routerParams, selectedUniqueId]);
     return {
-        treeItems: resultTreeItems
+        treeItems: resultTreeItems,
+        onItemFocus: onItemFocus
     };
 }
 exports["default"] = useTree;

package/package.json

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IPreparedTreeItem, ITreeConfig, ITreeItem } from '../../../hooks/useTree';
 export interface ITreeViewProps extends ITreeProps {
     items: IPreparedTreeItem[];
+    onItemFocus?: () => void;
 }
 export interface ITreeItemViewProps extends ITreeProps {
     item: IPreparedTreeItem;
@@ -11,6 +12,12 @@ export interface ITreeItemViewProps extends ITreeProps {
 /**
  * Tree
  * Компонент, который представляет в виде дерева список с иерархической структурой данных
+ *
+ * Дополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую
+ * будет вызываться функция props.onItemFocus. Данная функция "находит" текущий роут в дереве -
+ * раскрывает родительские уровни, делает элемент активным.
+ * Данная функция не включает скролл к активному компоненту внутри дерева, это также необходимо
+ * реализовать в кастомном view локально в проекте.
  */
 export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPage'> {
     /**

package/ui/nav/Tree/Tree.js

@@ -1,10 +1,21 @@
 "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;
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function Tree(props) {
     var components = (0, hooks_1.useComponents)();
-    var treeItems = (0, hooks_1.useTree)({
+    var _a = (0, hooks_1.useTree)({
         items: props.items,
         selectedItemId: props.selectedItemId,
         routerParams: props.routerParams,
@@ -17,15 +28,8 @@ function Tree(props) {
         collapseChildItems: props.collapseChildItems,
         saveInClientStorage: props.autoSave,
         clientStorageId: props.id
-    }).treeItems;
-    var viewProps = (0, react_1.useMemo)(function () { return ({
-        items: treeItems,
-        levelPadding: props.levelPadding,
-        className: props.className,
-        hideIcon: props.hideIcon,
-        customIcon: props.customIcon,
-        hasIconExpandOnly: props.hasIconExpandOnly
-    }); }, [props.className, props.customIcon, props.hasIconExpandOnly, props.hideIcon, props.levelPadding, treeItems]);
+    }), treeItems = _a.treeItems, onItemFocus = _a.onItemFocus;
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { onItemFocus: onItemFocus, items: treeItems, levelPadding: props.levelPadding, className: props.className, hideIcon: props.hideIcon, customIcon: props.customIcon, hasIconExpandOnly: props.hasIconExpandOnly })); }, [props, treeItems, onItemFocus]);
     return components.ui.renderView(props.view || 'nav.TreeView', viewProps);
 }
 exports["default"] = Tree;