@gravity-ui/dashkit 8.17.1-beta.1 → 8.17.2

package/build/cjs/components/GridLayout/GridLayout.d.ts

@@ -48,18 +48,6 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         element: any;
     };
     updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
-    _rectInterscectionObserver: (entries: any) => void;
-    _renderRectBlock(element: any): void;
-    _rectBlocks: {
-        spacers: {
-            top: HTMLDivElement;
-            bottom: HTMLDivElement;
-        };
-        parent: any;
-        scrollObserver: IntersectionObserver;
-    } | null | undefined;
-    _updateRectBlock(element: any): void;
-    _cleanRectBlock(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
     _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
     _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;

package/build/cjs/components/GridLayout/GridLayout.js

@@ -57,14 +57,6 @@ class GridLayout extends react_1.default.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._rectInterscectionObserver = (entries) => {
-            entries.forEach((entry) => {
-                const { intersectionRatio } = entry;
-                if (intersectionRatio === 0) {
-                    entry.target.scrollIntoView();
-                }
-            });
-        };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
             const { draggedOverGroup, currentDraggingElement } = this.state;
@@ -295,64 +287,9 @@ class GridLayout extends react_1.default.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
-    _renderRectBlock(element) {
-        const parent = element.parentElement;
-        const elementRect = element.getBoundingClientRect();
-        this._rectBlocks = {
-            spacers: {
-                top: document.createElement('div'),
-                bottom: document.createElement('div'),
-            },
-            parent,
-            scrollObserver: new IntersectionObserver(this._rectInterscectionObserver, {
-                rootMargin: '0px',
-                threshold: 0,
-            }),
-        };
-        Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
-            block.style.position = 'absolute';
-            block.style.width = `${elementRect.width}px`;
-            block.style.height = '1px';
-            block.style.left = '0px';
-            if (pos === 'top') {
-                block.style.top = '0px';
-            }
-            else {
-                block.style.top = `${elementRect.height - 1}px`;
-            }
-            parent.appendChild(block);
-            this._rectBlocks.scrollObserver.observe(block);
-        });
-        this._updateRectBlock(element);
-    }
-    _updateRectBlock(element) {
-        if (!this._rectBlocks) {
-            return;
-        }
-        const parent = this._rectBlocks.parent;
-        const parentRect = parent.getBoundingClientRect();
-        const elementRect = element.getBoundingClientRect();
-        const left = elementRect.left - parentRect.left;
-        const top = elementRect.top - parentRect.top;
-        Object.values(this._rectBlocks.spacers).forEach((block) => {
-            block.style.transform = `translate(${left}px, ${top}px)`;
-        });
-    }
-    _cleanRectBlock() {
-        if (this._rectBlocks) {
-            this._rectBlocks.scrollObserver.disconnect();
-            Object.values(this._rectBlocks.spacers).forEach((block) => {
-                block.remove();
-            });
-            this._rectBlocks = null;
-        }
-    }
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         var _a;
         (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
-        if (!this.state.currentDraggingElement) {
-            this._renderRectBlock(element);
-        }
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
@@ -363,12 +300,10 @@ class GridLayout extends react_1.default.PureComponent {
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
-        this._updateRectBlock(element);
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
-        this._cleanRectBlock();
         this._onStop(group, layout);
         (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }

package/build/cjs/components/MobileLayout/MobileLayout.d.ts

@@ -3,14 +3,21 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
     pluginsRefs: any[];
+    sortedLayoutItems: any;
+    _memoLayout: any;
+    _memoForwardedPluginRef: any[];
+    _memoAdjustWidgetLayout: any[];
     state: {
         activeTabId: null;
         indexesOfItemsWithActiveAutoheight: {};
     };
     componentDidUpdate(prevProps: any, prevState: any): void;
+    getSortedLayoutItems(): any;
+    getMemoForwardRefCallback: (refIndex: any) => any;
     adjustWidgetLayout: (index: any, { needSetDefault }: {
         needSetDefault: any;
     }) => void;
+    getMemoAdjustWidgetLayout: (index: any) => any;
     onMountChange: (isMounted: any) => void;
     _inited: boolean | undefined;
     onBeforeLoad: () => () => void;

package/build/cjs/components/MobileLayout/MobileLayout.js

@@ -11,10 +11,21 @@ class MobileLayout extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);
         this.pluginsRefs = [];
+        this._memoLayout = this.context.layout;
+        this._memoForwardedPluginRef = [];
+        this._memoAdjustWidgetLayout = [];
         this.state = {
             activeTabId: null,
             indexesOfItemsWithActiveAutoheight: {},
         };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this.adjustWidgetLayout = (index, { needSetDefault }) => {
             if (needSetDefault) {
                 const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
@@ -27,6 +38,12 @@ class MobileLayout extends react_1.default.PureComponent {
                 });
             }
         };
+        this.getMemoAdjustWidgetLayout = (index) => {
+            if (!this._memoAdjustWidgetLayout[index]) {
+                this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
+            }
+            return this._memoAdjustWidgetLayout[index];
+        };
         this.onMountChange = (isMounted) => {
             var _a, _b, _c, _d, _e, _f;
             if (isMounted) {
@@ -63,17 +80,23 @@ class MobileLayout extends react_1.default.PureComponent {
             });
         }
     }
+    getSortedLayoutItems() {
+        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
+            return this.sortedLayoutItems;
+        }
+        this._memoLayout = this.context.layout;
+        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
+        this.sortedLayoutItems = (0, helpers_1.getSortedConfigItems)(this.context.config, hasOrderId);
+        return this.sortedLayoutItems;
+    }
     render() {
         const { config, layout } = this.context;
         this.pluginsRefs.length = config.items.length;
-        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
-        const sortedItems = (0, helpers_1.getSortedConfigItems)(config, hasOrderId);
+        const sortedItems = this.getSortedLayoutItems();
         return (react_1.default.createElement("div", { className: b() }, sortedItems.map((item, index) => {
             const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
             return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
-                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[index] = pluginRef;
-                    }, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
+                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
         })));
     }
 }

package/build/esm/components/GridLayout/GridLayout.d.ts

@@ -48,18 +48,6 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         element: any;
     };
     updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
-    _rectInterscectionObserver: (entries: any) => void;
-    _renderRectBlock(element: any): void;
-    _rectBlocks: {
-        spacers: {
-            top: HTMLDivElement;
-            bottom: HTMLDivElement;
-        };
-        parent: any;
-        scrollObserver: IntersectionObserver;
-    } | null | undefined;
-    _updateRectBlock(element: any): void;
-    _cleanRectBlock(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
     _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
     _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;

package/build/esm/components/GridLayout/GridLayout.js

@@ -54,14 +54,6 @@ class GridLayout extends React.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._rectInterscectionObserver = (entries) => {
-            entries.forEach((entry) => {
-                const { intersectionRatio } = entry;
-                if (intersectionRatio === 0) {
-                    entry.target.scrollIntoView();
-                }
-            });
-        };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
             const { draggedOverGroup, currentDraggingElement } = this.state;
@@ -292,64 +284,9 @@ class GridLayout extends React.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
-    _renderRectBlock(element) {
-        const parent = element.parentElement;
-        const elementRect = element.getBoundingClientRect();
-        this._rectBlocks = {
-            spacers: {
-                top: document.createElement('div'),
-                bottom: document.createElement('div'),
-            },
-            parent,
-            scrollObserver: new IntersectionObserver(this._rectInterscectionObserver, {
-                rootMargin: '0px',
-                threshold: 0,
-            }),
-        };
-        Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
-            block.style.position = 'absolute';
-            block.style.width = `${elementRect.width}px`;
-            block.style.height = '1px';
-            block.style.left = '0px';
-            if (pos === 'top') {
-                block.style.top = '0px';
-            }
-            else {
-                block.style.top = `${elementRect.height - 1}px`;
-            }
-            parent.appendChild(block);
-            this._rectBlocks.scrollObserver.observe(block);
-        });
-        this._updateRectBlock(element);
-    }
-    _updateRectBlock(element) {
-        if (!this._rectBlocks) {
-            return;
-        }
-        const parent = this._rectBlocks.parent;
-        const parentRect = parent.getBoundingClientRect();
-        const elementRect = element.getBoundingClientRect();
-        const left = elementRect.left - parentRect.left;
-        const top = elementRect.top - parentRect.top;
-        Object.values(this._rectBlocks.spacers).forEach((block) => {
-            block.style.transform = `translate(${left}px, ${top}px)`;
-        });
-    }
-    _cleanRectBlock() {
-        if (this._rectBlocks) {
-            this._rectBlocks.scrollObserver.disconnect();
-            Object.values(this._rectBlocks.spacers).forEach((block) => {
-                block.remove();
-            });
-            this._rectBlocks = null;
-        }
-    }
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         var _a;
         (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
-        if (!this.state.currentDraggingElement) {
-            this._renderRectBlock(element);
-        }
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
@@ -360,12 +297,10 @@ class GridLayout extends React.PureComponent {
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
-        this._updateRectBlock(element);
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
-        this._cleanRectBlock();
         this._onStop(group, layout);
         (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }

package/build/esm/components/MobileLayout/MobileLayout.d.ts

@@ -3,14 +3,21 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
     pluginsRefs: any[];
+    sortedLayoutItems: any;
+    _memoLayout: any;
+    _memoForwardedPluginRef: any[];
+    _memoAdjustWidgetLayout: any[];
     state: {
         activeTabId: null;
         indexesOfItemsWithActiveAutoheight: {};
     };
     componentDidUpdate(prevProps: any, prevState: any): void;
+    getSortedLayoutItems(): any;
+    getMemoForwardRefCallback: (refIndex: any) => any;
     adjustWidgetLayout: (index: any, { needSetDefault }: {
         needSetDefault: any;
     }) => void;
+    getMemoAdjustWidgetLayout: (index: any) => any;
     onMountChange: (isMounted: any) => void;
     _inited: boolean | undefined;
     onBeforeLoad: () => () => void;

package/build/esm/components/MobileLayout/MobileLayout.js

@@ -9,10 +9,21 @@ class MobileLayout extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.pluginsRefs = [];
+        this._memoLayout = this.context.layout;
+        this._memoForwardedPluginRef = [];
+        this._memoAdjustWidgetLayout = [];
         this.state = {
             activeTabId: null,
             indexesOfItemsWithActiveAutoheight: {},
         };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this.adjustWidgetLayout = (index, { needSetDefault }) => {
             if (needSetDefault) {
                 const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
@@ -25,6 +36,12 @@ class MobileLayout extends React.PureComponent {
                 });
             }
         };
+        this.getMemoAdjustWidgetLayout = (index) => {
+            if (!this._memoAdjustWidgetLayout[index]) {
+                this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
+            }
+            return this._memoAdjustWidgetLayout[index];
+        };
         this.onMountChange = (isMounted) => {
             var _a, _b, _c, _d, _e, _f;
             if (isMounted) {
@@ -61,17 +78,23 @@ class MobileLayout extends React.PureComponent {
             });
         }
     }
+    getSortedLayoutItems() {
+        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
+            return this.sortedLayoutItems;
+        }
+        this._memoLayout = this.context.layout;
+        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
+        this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
+        return this.sortedLayoutItems;
+    }
     render() {
         const { config, layout } = this.context;
         this.pluginsRefs.length = config.items.length;
-        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
-        const sortedItems = getSortedConfigItems(config, hasOrderId);
+        const sortedItems = this.getSortedLayoutItems();
         return (React.createElement("div", { className: b() }, sortedItems.map((item, index) => {
             const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
             return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
-                React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[index] = pluginRef;
-                    }, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
+                React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
         })));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.17.1-beta.1",
+  "version": "8.17.2",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {