@gravity-ui/dashkit - npm Package Compare versions

Comparing version 8.17.3 to 8.17.4

build/cjs/components/GridItem/GridItem.js

@@ -99,3 +99,3 @@ "use strict";
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
@@ -119,2 +119,3 @@ const width = Number.parseInt(style.width, 10);
                 'is-dragging': isDragging,
+                'is-dragged-out': isDraggedOut,
                 'is-focused': this.state.isFocused,
@@ -140,2 +141,3 @@ 'with-custom-handle': withCustomHandle,
     isDragging: prop_types_1.default.bool,
+    isDraggedOut: prop_types_1.default.bool,
     layout: prop_types_1.default.array,
@@ -142,0 +144,0 @@ forwardedRef: prop_types_1.default.any,

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

@@ -10,2 +10,3 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         draggedOverGroup: null;
+        draggedOut: boolean;
     };
@@ -51,3 +52,8 @@ componentDidMount(): void;
     };
-    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any, parentRect: any): void;
+    _updateDragCoordinates(e: any): void;
+    _resetDragWatcher(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
@@ -54,0 +60,0 @@ _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;

build/cjs/components/GridLayout/GridLayout.js

@@ -158,2 +158,3 @@ "use strict";
             draggedOverGroup: null,
+            draggedOut: false,
         };
@@ -273,3 +274,3 @@ }
     }
-    updateeDraggingElementState(group, layoutItem, e) {
+    updateDraggingElementState(group, layoutItem, e) {
         let currentDraggingElement = this.state.currentDraggingElement;
@@ -292,5 +293,59 @@ if (!currentDraggingElement) {
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ draggedOut: false });
+        }
+    }
+    // When element is going back and prointer-event: none is removed mouse enter event is not fired
+    // So to trigger it we are forcing this event by adding transparent block under the mouse
+    _forceCursorCapture(parentElement, position, parentRect) {
+        const block = document.createElement('div');
+        block.classList.add('react-grid-focus-capture');
+        const blockSize = 44;
+        const offset = blockSize / 2;
+        // Keeping elemnt inside current grid
+        const top = Math.min(Math.max(position.top - offset, 0), parentRect.height - blockSize);
+        const left = Math.min(Math.max(position.left - offset, 0), parentRect.width - blockSize);
+        block.style.width = `${blockSize}px`;
+        block.style.height = `${blockSize}px`;
+        block.style.top = `${top}px`;
+        block.style.left = `${left}px`;
+        parentElement.appendChild(block);
+        setTimeout(() => {
+            block.remove();
+        }, 100);
+    }
+    _updateDragCoordinates(e) {
+        const parent = this._parendDragNode;
+        const parentRect = parent.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        let draggedOut = this.state.draggedOut;
+        if (clientX < parentRect.left ||
+            clientX > parentRect.right ||
+            clientY < parentRect.top ||
+            clientY > parentRect.bottom) {
+            draggedOut = true;
+        }
+        else {
+            draggedOut = false;
+        }
+        if (draggedOut !== this.state.draggedOut) {
+            this.setState({ draggedOut });
+            if (!draggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
+        }
+    }
+    _resetDragWatcher() {
+        this._parendDragNode = null;
+        this.setState({ draggedOut: false });
+    }
     _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));
+        this._initDragCoordinatesWatcher(element);
         if (this.context.dragOverPlugin) {
@@ -300,3 +355,3 @@ this.setState({ isDragging: true });
         else {
-            this.updateeDraggingElementState(group, layoutItem, e);
+            this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
@@ -307,2 +362,3 @@ }
         var _a;
+        this._updateDragCoordinates(e);
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
@@ -312,2 +368,3 @@ }
         var _a;
+        this._resetDragWatcher();
         this._onStop(group, layout);
@@ -384,3 +441,5 @@ (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
             renderItems.map((item, i) => {
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
+                const isCurrentItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === item.id;
+                const isDraggedOut = isCurrentItem && this.state.draggedOut;
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isDraggedOut: isDraggedOut, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
@@ -387,0 +446,0 @@ this.renderTemporaryPlaceholder()));

build/esm/components/GridItem/GridItem.js

@@ -97,3 +97,3 @@ import React from 'react';
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
@@ -117,2 +117,3 @@ const width = Number.parseInt(style.width, 10);
                 'is-dragging': isDragging,
+                'is-dragged-out': isDraggedOut,
                 'is-focused': this.state.isFocused,
@@ -138,2 +139,3 @@ 'with-custom-handle': withCustomHandle,
     isDragging: PropTypes.bool,
+    isDraggedOut: PropTypes.bool,
     layout: PropTypes.array,
@@ -140,0 +142,0 @@ forwardedRef: PropTypes.any,

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

@@ -10,2 +10,3 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         draggedOverGroup: null;
+        draggedOut: boolean;
     };
@@ -51,3 +52,8 @@ componentDidMount(): void;
     };
-    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any, parentRect: any): void;
+    _updateDragCoordinates(e: any): void;
+    _resetDragWatcher(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
@@ -54,0 +60,0 @@ _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;

build/esm/components/GridLayout/GridLayout.js

@@ -155,2 +155,3 @@ import React from 'react';
             draggedOverGroup: null,
+            draggedOut: false,
         };
@@ -270,3 +271,3 @@ }
     }
-    updateeDraggingElementState(group, layoutItem, e) {
+    updateDraggingElementState(group, layoutItem, e) {
         let currentDraggingElement = this.state.currentDraggingElement;
@@ -289,5 +290,59 @@ if (!currentDraggingElement) {
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ draggedOut: false });
+        }
+    }
+    // When element is going back and prointer-event: none is removed mouse enter event is not fired
+    // So to trigger it we are forcing this event by adding transparent block under the mouse
+    _forceCursorCapture(parentElement, position, parentRect) {
+        const block = document.createElement('div');
+        block.classList.add('react-grid-focus-capture');
+        const blockSize = 44;
+        const offset = blockSize / 2;
+        // Keeping elemnt inside current grid
+        const top = Math.min(Math.max(position.top - offset, 0), parentRect.height - blockSize);
+        const left = Math.min(Math.max(position.left - offset, 0), parentRect.width - blockSize);
+        block.style.width = `${blockSize}px`;
+        block.style.height = `${blockSize}px`;
+        block.style.top = `${top}px`;
+        block.style.left = `${left}px`;
+        parentElement.appendChild(block);
+        setTimeout(() => {
+            block.remove();
+        }, 100);
+    }
+    _updateDragCoordinates(e) {
+        const parent = this._parendDragNode;
+        const parentRect = parent.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        let draggedOut = this.state.draggedOut;
+        if (clientX < parentRect.left ||
+            clientX > parentRect.right ||
+            clientY < parentRect.top ||
+            clientY > parentRect.bottom) {
+            draggedOut = true;
+        }
+        else {
+            draggedOut = false;
+        }
+        if (draggedOut !== this.state.draggedOut) {
+            this.setState({ draggedOut });
+            if (!draggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
+        }
+    }
+    _resetDragWatcher() {
+        this._parendDragNode = null;
+        this.setState({ draggedOut: false });
+    }
     _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));
+        this._initDragCoordinatesWatcher(element);
         if (this.context.dragOverPlugin) {
@@ -297,3 +352,3 @@ this.setState({ isDragging: true });
         else {
-            this.updateeDraggingElementState(group, layoutItem, e);
+            this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
@@ -304,2 +359,3 @@ }
         var _a;
+        this._updateDragCoordinates(e);
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
@@ -309,2 +365,3 @@ }
         var _a;
+        this._resetDragWatcher();
         this._onStop(group, layout);
@@ -381,3 +438,5 @@ (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
             renderItems.map((item, i) => {
-                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
+                const isCurrentItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === item.id;
+                const isDraggedOut = isCurrentItem && this.state.draggedOut;
+                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isDraggedOut: isDraggedOut, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
@@ -384,0 +443,0 @@ this.renderTemporaryPlaceholder()));

package.json

 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.17.3",
+  "version": "8.17.4",
   "description": "Library for rendering dashboard grid layout",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

584373

increased by1.06%

Lines of code

14526

increased by1.06%

No dependency changes