@gravity-ui/dashkit 8.8.0 → 8.8.1-beta.1

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

@@ -5,6 +5,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     state: {
         isDragging: boolean;
         isPageHidden: boolean;
+        currentDraggingElement: null;
+        draggedOverGroup: null;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -36,10 +38,14 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onStart: () => void;
+    _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
+    _onResizeStart: () => void;
+    _onDragExit: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (group: any, e: any) => any;
+    _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
+    _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
+    _onDropDragOver: (group: any, e: any) => any;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;

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

@@ -56,17 +56,18 @@ class GridLayout extends react_1.default.PureComponent {
         };
         this.getMemoGroupCallbacks = (group) => {
             if (!this._memoCallbacksForGroups[group]) {
-                const onStart = this._onStart;
+                const onDragStart = this._onDragStart.bind(this, group);
                 const onStop = this._onStop.bind(this, group);
                 const onDrop = this._onDrop.bind(this, group);
                 const onDropDragOver = this._onDropDragOver.bind(this, group);
+                const onDragExit = this._onDragExit.bind(this, group);
                 this._memoCallbacksForGroups[group] = {
-                    onDragStart: onStart,
-                    onResizeStart: onStart,
+                    onDragStart,
                     onDragStop: onStop,
                     onResizeStop: onStop,
-                    onDrop: onDrop,
+                    onDrop,
                     onDropDragOver,
+                    onDragExit,
                 };
             }
             return this._memoCallbacksForGroups[group];
@@ -93,48 +94,128 @@ class GridLayout extends react_1.default.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onStart = () => {
+        this._onDragStart = (group, _newLayout, layoutItem) => {
             if (this.temporaryLayout)
                 return;
-            this.setState({ isDragging: true });
+            if (this.context.dragOverPlugin) {
+                this.setState({ isDragging: true });
+            }
+            else {
+                let currentDraggingElement = this.state.currentDraggingElement;
+                if (!currentDraggingElement) {
+                    const _id = layoutItem.i;
+                    const item = this.context.config.items.find(({ id }) => id === _id);
+                    currentDraggingElement = [group, layoutItem, item];
+                }
+                this.setState({
+                    isDragging: true,
+                    currentDraggingElement,
+                    draggedOverGroup: group,
+                });
+            }
+        };
+        this._onResizeStart = () => {
+            this.setState({
+                isDragging: true,
+            });
+        };
+        this._onDragExit = () => {
+            this.setState({
+                draggedOverGroup: null,
+            });
         };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement &&
+                draggedOverGroup !== null &&
+                draggedOverGroup !== currentDraggingElement[0]) {
+                // Skipping layout update when change event called for source grid
+                // and waiting _onDrop
+                return;
+            }
             const groupedLayout = this.mergeGroupsLayout(group, newLayout);
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
             if (temporaryLayout) {
                 onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === constants_1.TEMPORARY_ITEM_ID));
             }
             else {
                 layoutChange(groupedLayout);
             }
-            this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (group, e) => {
-            const { editMode, dragOverPlugin } = this.context;
-            if (!editMode || !dragOverPlugin) {
-                return false;
+        this._onSharedDrop = (targetGroup, newLayout, tempItem) => {
+            const { currentDraggingElement } = this.state;
+            const { layoutChange } = this.context;
+            if (!currentDraggingElement) {
+                return;
             }
-            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
-            return this.context.onDropDragOver(e, properties, layout);
+            const [, sourceItem] = currentDraggingElement;
+            const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
+                if (item.i === sourceItem.i) {
+                    const copy = Object.assign({}, tempItem);
+                    delete copy.parent;
+                    if (targetGroup !== constants_1.DEFAULT_GROUP) {
+                        copy.parent = targetGroup;
+                    }
+                    copy.i = sourceItem.i;
+                    return copy;
+                }
+                return item;
+            });
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
+            layoutChange(groupedLayout);
+        };
+        this._onExternalDrop = (group, newLayout, item, e) => {
+            const { onDrop } = this.context;
+            if (group !== constants_1.DEFAULT_GROUP) {
+                item.parent = group;
+            }
+            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
+            this.setState({ isDragging: false });
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
         };
         this._onDrop = (group, newLayout, item, e) => {
-            if (!item) {
+            if (!item || !this.context.editMode) {
                 return false;
             }
-            const { editMode, onDrop } = this.context;
-            if (!editMode) {
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement && draggedOverGroup === group) {
+                this._onSharedDrop(group, newLayout, item);
+            }
+            else {
+                this._onExternalDrop(group, newLayout, item, e);
+            }
+        };
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            const { currentDraggingElement } = this.state;
+            if (!editMode || (!dragOverPlugin && !currentDraggingElement)) {
                 return false;
             }
-            if (group !== constants_1.DEFAULT_GROUP) {
-                item.parent = group;
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            if (currentDraggingElement) {
+                const [, { h, w, i }, { type }] = currentDraggingElement;
+                return onDropDragOver(e, properties, layout, { h, w, i, type });
             }
-            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
+            if (dragOverPlugin) {
+                return onDropDragOver(e, properties, layout);
+            }
+            return false;
         };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
             isPageHidden: false,
+            currentDraggingElement: null,
+            draggedOverGroup: null,
         };
     }
     componentDidMount() {
@@ -201,6 +282,7 @@ class GridLayout extends react_1.default.PureComponent {
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        const { currentDraggingElement } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
@@ -209,13 +291,12 @@ class GridLayout extends react_1.default.PureComponent {
             compactType = 'horizontal';
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResizeStop: callbacks.onResizeStop }, (draggableHandleClassName
+        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragExit: callbacks.onDragExit, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: callbacks.onDropDragOver,
-                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {

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

@@ -5,62 +5,215 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const constants_1 = require("../../constants");
+const { compact, compactType } = react_grid_layout_1.utils;
+// pointer-events disabled to make mouse events be able to passthrought
+// while dragging element out of the grid the mouse positioned over grid item
+// so there is only two ways to get it, calculate rect or just give browser make his work
+const DRAGGING_PLACEHOLDER_STYLE = { pointerEvents: 'none' };
+// when shared element is dragged over another group we still creating placeholder for it
+// cause react-grid-layout is havely dependent on this element
+// while in future there will be some wey not to create dummy div and hide it with opacity
+// this hack is all what i've got now
+const DRAGGING_PLACEHOLDER_HIDDEN_STYLE = Object.assign(Object.assign({}, DRAGGING_PLACEHOLDER_STYLE), { opacity: 0 });
 class DragOverLayout extends react_grid_layout_1.default {
     constructor(...args) {
         super(...args);
-        this.dragReset = () => {
+        this._isMouseOver = true;
+        this._savedDragoutState = null;
+        // Reset placeholder when item dragged from outside
+        this.resetExternalPlaceholder = () => {
             if (this.dragEnterCounter) {
                 this.dragEnterCounter = 0;
                 this.removeDroppingPlaceholder();
             }
         };
+        // Hide placeholder when element is dragged out
+        this.hideLocalPlaceholder = (i) => {
+            const { layout } = this.state;
+            const { cols } = this.props;
+            const savedLayout = layout.map((item) => (Object.assign({}, item)));
+            let hiddenElement;
+            const newLayout = compact(layout.filter((item) => {
+                if (item.i === i) {
+                    hiddenElement = item;
+                    return false;
+                }
+                return true;
+            }), compactType(this.props), cols);
+            if (hiddenElement) {
+                newLayout.push(hiddenElement);
+            }
+            this.setState({
+                activeDrag: null,
+                layout: newLayout,
+            });
+            this.resetExternalPlaceholder();
+            return { layout: savedLayout, id: hiddenElement.i };
+        };
+        this.extendedOnDrag = (i, x, y, sintEv) => {
+            if (!this._isMouseOver) {
+                if (!this._savedDragoutState) {
+                    this._savedDragoutState = this.hideLocalPlaceholder(i);
+                }
+                return;
+            }
+            // parent onDrag will show new placeholder again
+            this.parentOnDrag(i, x, y, sintEv);
+        };
+        this.extendedOnDragStop = (i, x, y, sintEv) => {
+            // Restoring layout if item was dropped outside of the grid and wasn't captured
+            if (this._savedDragoutState) {
+                const savedLayout = this._savedDragoutState.layout;
+                const l = react_grid_layout_1.utils.getLayoutItem(savedLayout, i);
+                // Create placeholder (display only)
+                const placeholder = {
+                    w: l.w,
+                    h: l.h,
+                    x: l.x,
+                    y: l.y,
+                    placeholder: true,
+                    i: i,
+                };
+                this.setState({
+                    layout: savedLayout,
+                    activeDrag: placeholder,
+                }, () => {
+                    this.parentOnDragStop(i, x, y, sintEv);
+                });
+                this._savedDragoutState = null;
+            }
+            else {
+                this.parentOnDragStop(i, x, y, sintEv);
+            }
+        };
+        this.extendedOnDragEnter = (...args) => {
+            this._isMouseOver = true;
+            this.parentOnDragEnter(...args);
+        };
+        this.extendedOnDragLeave = (...args) => {
+            var _a, _b;
+            this._isMouseOver = false;
+            this.parentOnDragLeave(...args);
+            (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        // Proxy mouse events -> drag methods for dnd between groups
+        this.mouseEnterHandler = (e) => {
+            this._isMouseOver = true;
+            if (this.props.hasSharedDragItem) {
+                this.parentOnDragEnter(e);
+            }
+        };
         this.mouseLeaveHandler = (e) => {
-            var _a;
-            const rect = ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current.getBoundingClientRect()) || {};
-            if (rect.bottom <= e.clientY ||
-                rect.top >= e.clientY ||
-                rect.left >= e.clientX ||
-                rect.right <= e.clientX) {
-                this.dragReset();
+            var _a, _b;
+            this._isMouseOver = false;
+            if (this.props.hasSharedDragItem) {
+                this.parentOnDragLeave(e);
+                (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         };
-        this.parentOnDrag = this.onDrag;
-        this.onDrag = (i, x, y, sintE) => {
-            this.parentOnDrag(i, x, y, sintE);
-            this.mouseLeaveHandler(sintE.e);
+        this.mouseMoveHandler = (e) => {
+            this._isMouseOver = true;
+            if (this.props.hasSharedDragItem) {
+                this.onDragOver(e);
+            }
+        };
+        this.mouseUpHandler = (e) => {
+            var _a, _b;
+            this._isMouseOver = true;
+            if (this.props.hasSharedDragItem) {
+                e.preventDefault();
+                const { droppingItem } = this.props;
+                const { layout } = this.state;
+                const item = layout.find((l) => l.i === droppingItem.i);
+                // reset dragEnter counter on drop
+                this.resetExternalPlaceholder();
+                (_b = (_a = this.props).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, layout, item, e);
+            }
         };
+        this.parentOnDrag = this.onDrag;
+        this.onDrag = this.extendedOnDrag;
+        this.parentOnDragStop = this.onDragStop;
+        this.onDragStop = this.extendedOnDragStop;
+        this.parentOnDragEnter = this.onDragEnter;
+        this.onDragEnter = this.extendedOnDragEnter;
+        this.parentOnDragLeave = this.onDragLeave;
+        this.onDragLeave = this.extendedOnDragLeave;
     }
     componentDidMount() {
         var _a;
         (_a = super.componentDidMount) === null || _a === void 0 ? void 0 : _a.call(this);
-        window.addEventListener('dragend', this.dragReset);
+        // If cursor is moved out of the window there is a bug
+        // which leaves placeholder element in grid, this action needed to reset this state
+        window.addEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.addEventListener('mouseup', this.mouseUpHandler);
+            innerElement.addEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.addEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.addEventListener('mousemove', this.mouseMoveHandler);
+        }
     }
     componentWillUnmount() {
-        window.removeEventListener('dragend', this.dragReset);
+        window.removeEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.removeEventListener('mouseup', this.mouseUpHandler);
+            innerElement.removeEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
+        }
+        // Resetting instance props
+        this._savedDragoutState = null;
     }
+    // react-grid-layout doens't calculate it's height when last element is removed
+    // and just keeps the previous value
+    // so for autosize to work in that case we are resetting it's height value
     containerHeight() {
         if (this.props.autoSize && this.state.layout.length === 0) {
-            return 'unset';
+            return;
         }
+        // eslint-disable-next-line consistent-return
         return super.containerHeight();
     }
-    processGridItem(child, isDroppingItem) {
+    // innerRef is passed by WithProvider without this wrapper there are only
+    // * findDOMNode - deprecated
+    // * rewrite whole ReactGridLayout.render method
+    // so in that case don't try to use this class on it's own
+    // or pass innerRef: React.MutableRef as it's not optional prop
+    getInnerElement() {
         var _a;
+        return ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current) || null;
+    }
+    // Drop item from outside gets 0,0 droppingPosition
+    // centering cursor on newly creted grid item
+    // And cause grid-layout using it's own GridItem to make it look
+    // like overlay adding className
+    processGridItem(child, isDroppingItem) {
+        var _a, _b, _c;
         const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
+        if (!gridItem) {
+            return gridItem;
+        }
+        const { props: itemProps } = gridItem;
         if (isDroppingItem) {
-            // Drop item from outside gets 0,0 droppingPosition
-            // centering cursor on newly creted grid item
-            // And cause grid-layout using it's own GridItem to make it look
-            // like overlay adding className
-            if (!gridItem)
-                return null;
-            const { props } = gridItem;
-            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
             const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
             const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            const dragStyles = this.props.hasSharedDragItem
+                ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
+                : DRAGGING_PLACEHOLDER_STYLE;
+            // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return react_1.default.cloneElement(gridItem, {
+                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
                 className: constants_1.OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
+            });
+        }
+        else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
+            itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
+            const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
+            return react_1.default.cloneElement(gridItem, {
+                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
             });
         }
         return gridItem;

package/build/cjs/hocs/withContext.js

@@ -32,7 +32,7 @@ function useMemoStateContext(props) {
             (0, isEqual_1.default)(groups, props.groups))) {
             props.onChange({ config, itemsStateAndParams, groups });
         }
-    }, [props.config, props.itemsStateAndParams, props.onChange]);
+    }, [props.config, props.groups, props.itemsStateAndParams, props.onChange]);
     // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
     // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
     // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
@@ -40,7 +40,17 @@ function useMemoStateContext(props) {
     const onLayoutChange = react_1.default.useCallback((layout) => {
         const currentInnerLayout = layout.map((item) => {
             if (item.i in originalLayouts.current) {
-                return Object.assign(Object.assign({}, originalLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+                // eslint-disable-next-line no-unused-vars
+                const _a = originalLayouts.current[item.i], { parent } = _a, originalCopy = tslib_1.__rest(_a, ["parent"]);
+                // Updating original if parent has changed and saving copy as original
+                // or leaving default
+                if (item.parent) {
+                    originalCopy.parent = item.parent;
+                }
+                originalCopy.w = item.w;
+                originalCopy.x = item.x;
+                originalCopy.y = item.y;
+                return originalCopy;
             }
             else {
                 return Object.assign({}, item);
@@ -237,16 +247,24 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = react_1.default.useCallback((_e, gridProps, groupLayout) => {
+    const onDropDragOver = react_1.default.useCallback((_e, gridProps, groupLayout, sharedItem) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (!dragOverPlugin) {
+        let defaultLayout;
+        if (sharedItem) {
+            const { type, h, w } = sharedItem;
+            const _defaults = props.registerManager.getItem(type);
+            defaultLayout = _defaults ? Object.assign(Object.assign({}, _defaults.defaultLayout), { h, w }) : { h, w };
+        }
+        else if (dragOverPlugin) {
+            defaultLayout = dragOverPlugin.defaultLayout;
+        }
+        else {
             return false;
         }
         let maxW = gridProps.cols;
-        const { defaultLayout } = dragOverPlugin;
         const maxH = Math.min(gridProps.maxRows || Infinity, defaultLayout.maxH || Infinity);
         if (gridProps.compactType === common_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
             maxW = groupLayout.reduce((memo, item) => memo - item.w, gridProps.cols);
@@ -257,7 +275,7 @@ function useMemoStateContext(props) {
             maxH < defaultLayout.minH) {
             return false;
         }
-        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = (dragProps === null || dragProps === void 0 ? void 0 : dragProps.layout) || {};
         return {
             h: maxH ? Math.min(h, maxH) : h,
             w: maxW ? Math.min(w, maxW) : w,

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

@@ -5,6 +5,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     state: {
         isDragging: boolean;
         isPageHidden: boolean;
+        currentDraggingElement: null;
+        draggedOverGroup: null;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -36,10 +38,14 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onStart: () => void;
+    _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
+    _onResizeStart: () => void;
+    _onDragExit: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (group: any, e: any) => any;
+    _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
+    _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
+    _onDropDragOver: (group: any, e: any) => any;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;

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

@@ -53,17 +53,18 @@ class GridLayout extends React.PureComponent {
         };
         this.getMemoGroupCallbacks = (group) => {
             if (!this._memoCallbacksForGroups[group]) {
-                const onStart = this._onStart;
+                const onDragStart = this._onDragStart.bind(this, group);
                 const onStop = this._onStop.bind(this, group);
                 const onDrop = this._onDrop.bind(this, group);
                 const onDropDragOver = this._onDropDragOver.bind(this, group);
+                const onDragExit = this._onDragExit.bind(this, group);
                 this._memoCallbacksForGroups[group] = {
-                    onDragStart: onStart,
-                    onResizeStart: onStart,
+                    onDragStart,
                     onDragStop: onStop,
                     onResizeStop: onStop,
-                    onDrop: onDrop,
+                    onDrop,
                     onDropDragOver,
+                    onDragExit,
                 };
             }
             return this._memoCallbacksForGroups[group];
@@ -90,48 +91,128 @@ class GridLayout extends React.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onStart = () => {
+        this._onDragStart = (group, _newLayout, layoutItem) => {
             if (this.temporaryLayout)
                 return;
-            this.setState({ isDragging: true });
+            if (this.context.dragOverPlugin) {
+                this.setState({ isDragging: true });
+            }
+            else {
+                let currentDraggingElement = this.state.currentDraggingElement;
+                if (!currentDraggingElement) {
+                    const _id = layoutItem.i;
+                    const item = this.context.config.items.find(({ id }) => id === _id);
+                    currentDraggingElement = [group, layoutItem, item];
+                }
+                this.setState({
+                    isDragging: true,
+                    currentDraggingElement,
+                    draggedOverGroup: group,
+                });
+            }
+        };
+        this._onResizeStart = () => {
+            this.setState({
+                isDragging: true,
+            });
+        };
+        this._onDragExit = () => {
+            this.setState({
+                draggedOverGroup: null,
+            });
         };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement &&
+                draggedOverGroup !== null &&
+                draggedOverGroup !== currentDraggingElement[0]) {
+                // Skipping layout update when change event called for source grid
+                // and waiting _onDrop
+                return;
+            }
             const groupedLayout = this.mergeGroupsLayout(group, newLayout);
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
             if (temporaryLayout) {
                 onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === TEMPORARY_ITEM_ID));
             }
             else {
                 layoutChange(groupedLayout);
             }
-            this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (group, e) => {
-            const { editMode, dragOverPlugin } = this.context;
-            if (!editMode || !dragOverPlugin) {
-                return false;
+        this._onSharedDrop = (targetGroup, newLayout, tempItem) => {
+            const { currentDraggingElement } = this.state;
+            const { layoutChange } = this.context;
+            if (!currentDraggingElement) {
+                return;
             }
-            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
-            return this.context.onDropDragOver(e, properties, layout);
+            const [, sourceItem] = currentDraggingElement;
+            const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
+                if (item.i === sourceItem.i) {
+                    const copy = Object.assign({}, tempItem);
+                    delete copy.parent;
+                    if (targetGroup !== DEFAULT_GROUP) {
+                        copy.parent = targetGroup;
+                    }
+                    copy.i = sourceItem.i;
+                    return copy;
+                }
+                return item;
+            });
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
+            layoutChange(groupedLayout);
+        };
+        this._onExternalDrop = (group, newLayout, item, e) => {
+            const { onDrop } = this.context;
+            if (group !== DEFAULT_GROUP) {
+                item.parent = group;
+            }
+            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
+            this.setState({ isDragging: false });
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
         };
         this._onDrop = (group, newLayout, item, e) => {
-            if (!item) {
+            if (!item || !this.context.editMode) {
                 return false;
             }
-            const { editMode, onDrop } = this.context;
-            if (!editMode) {
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement && draggedOverGroup === group) {
+                this._onSharedDrop(group, newLayout, item);
+            }
+            else {
+                this._onExternalDrop(group, newLayout, item, e);
+            }
+        };
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            const { currentDraggingElement } = this.state;
+            if (!editMode || (!dragOverPlugin && !currentDraggingElement)) {
                 return false;
             }
-            if (group !== DEFAULT_GROUP) {
-                item.parent = group;
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            if (currentDraggingElement) {
+                const [, { h, w, i }, { type }] = currentDraggingElement;
+                return onDropDragOver(e, properties, layout, { h, w, i, type });
             }
-            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
+            if (dragOverPlugin) {
+                return onDropDragOver(e, properties, layout);
+            }
+            return false;
         };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
             isPageHidden: false,
+            currentDraggingElement: null,
+            draggedOverGroup: null,
         };
     }
     componentDidMount() {
@@ -198,6 +279,7 @@ class GridLayout extends React.PureComponent {
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        const { currentDraggingElement } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
@@ -206,13 +288,12 @@ class GridLayout extends React.PureComponent {
             compactType = 'horizontal';
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
-        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResizeStop: callbacks.onResizeStop }, (draggableHandleClassName
+        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
+        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragExit: callbacks.onDragExit, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: callbacks.onDropDragOver,
-                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {

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

@@ -1,62 +1,215 @@
 import React from 'react';
-import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
+import ReactGridLayout, { WidthProvider, utils } from 'react-grid-layout';
 import { OVERLAY_CLASS_NAME } from '../../constants';
+const { compact, compactType } = utils;
+// pointer-events disabled to make mouse events be able to passthrought
+// while dragging element out of the grid the mouse positioned over grid item
+// so there is only two ways to get it, calculate rect or just give browser make his work
+const DRAGGING_PLACEHOLDER_STYLE = { pointerEvents: 'none' };
+// when shared element is dragged over another group we still creating placeholder for it
+// cause react-grid-layout is havely dependent on this element
+// while in future there will be some wey not to create dummy div and hide it with opacity
+// this hack is all what i've got now
+const DRAGGING_PLACEHOLDER_HIDDEN_STYLE = Object.assign(Object.assign({}, DRAGGING_PLACEHOLDER_STYLE), { opacity: 0 });
 class DragOverLayout extends ReactGridLayout {
     constructor(...args) {
         super(...args);
-        this.dragReset = () => {
+        this._isMouseOver = true;
+        this._savedDragoutState = null;
+        // Reset placeholder when item dragged from outside
+        this.resetExternalPlaceholder = () => {
             if (this.dragEnterCounter) {
                 this.dragEnterCounter = 0;
                 this.removeDroppingPlaceholder();
             }
         };
+        // Hide placeholder when element is dragged out
+        this.hideLocalPlaceholder = (i) => {
+            const { layout } = this.state;
+            const { cols } = this.props;
+            const savedLayout = layout.map((item) => (Object.assign({}, item)));
+            let hiddenElement;
+            const newLayout = compact(layout.filter((item) => {
+                if (item.i === i) {
+                    hiddenElement = item;
+                    return false;
+                }
+                return true;
+            }), compactType(this.props), cols);
+            if (hiddenElement) {
+                newLayout.push(hiddenElement);
+            }
+            this.setState({
+                activeDrag: null,
+                layout: newLayout,
+            });
+            this.resetExternalPlaceholder();
+            return { layout: savedLayout, id: hiddenElement.i };
+        };
+        this.extendedOnDrag = (i, x, y, sintEv) => {
+            if (!this._isMouseOver) {
+                if (!this._savedDragoutState) {
+                    this._savedDragoutState = this.hideLocalPlaceholder(i);
+                }
+                return;
+            }
+            // parent onDrag will show new placeholder again
+            this.parentOnDrag(i, x, y, sintEv);
+        };
+        this.extendedOnDragStop = (i, x, y, sintEv) => {
+            // Restoring layout if item was dropped outside of the grid and wasn't captured
+            if (this._savedDragoutState) {
+                const savedLayout = this._savedDragoutState.layout;
+                const l = utils.getLayoutItem(savedLayout, i);
+                // Create placeholder (display only)
+                const placeholder = {
+                    w: l.w,
+                    h: l.h,
+                    x: l.x,
+                    y: l.y,
+                    placeholder: true,
+                    i: i,
+                };
+                this.setState({
+                    layout: savedLayout,
+                    activeDrag: placeholder,
+                }, () => {
+                    this.parentOnDragStop(i, x, y, sintEv);
+                });
+                this._savedDragoutState = null;
+            }
+            else {
+                this.parentOnDragStop(i, x, y, sintEv);
+            }
+        };
+        this.extendedOnDragEnter = (...args) => {
+            this._isMouseOver = true;
+            this.parentOnDragEnter(...args);
+        };
+        this.extendedOnDragLeave = (...args) => {
+            var _a, _b;
+            this._isMouseOver = false;
+            this.parentOnDragLeave(...args);
+            (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        // Proxy mouse events -> drag methods for dnd between groups
+        this.mouseEnterHandler = (e) => {
+            this._isMouseOver = true;
+            if (this.props.hasSharedDragItem) {
+                this.parentOnDragEnter(e);
+            }
+        };
         this.mouseLeaveHandler = (e) => {
-            var _a;
-            const rect = ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current.getBoundingClientRect()) || {};
-            if (rect.bottom <= e.clientY ||
-                rect.top >= e.clientY ||
-                rect.left >= e.clientX ||
-                rect.right <= e.clientX) {
-                this.dragReset();
+            var _a, _b;
+            this._isMouseOver = false;
+            if (this.props.hasSharedDragItem) {
+                this.parentOnDragLeave(e);
+                (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         };
-        this.parentOnDrag = this.onDrag;
-        this.onDrag = (i, x, y, sintE) => {
-            this.parentOnDrag(i, x, y, sintE);
-            this.mouseLeaveHandler(sintE.e);
+        this.mouseMoveHandler = (e) => {
+            this._isMouseOver = true;
+            if (this.props.hasSharedDragItem) {
+                this.onDragOver(e);
+            }
+        };
+        this.mouseUpHandler = (e) => {
+            var _a, _b;
+            this._isMouseOver = true;
+            if (this.props.hasSharedDragItem) {
+                e.preventDefault();
+                const { droppingItem } = this.props;
+                const { layout } = this.state;
+                const item = layout.find((l) => l.i === droppingItem.i);
+                // reset dragEnter counter on drop
+                this.resetExternalPlaceholder();
+                (_b = (_a = this.props).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, layout, item, e);
+            }
         };
+        this.parentOnDrag = this.onDrag;
+        this.onDrag = this.extendedOnDrag;
+        this.parentOnDragStop = this.onDragStop;
+        this.onDragStop = this.extendedOnDragStop;
+        this.parentOnDragEnter = this.onDragEnter;
+        this.onDragEnter = this.extendedOnDragEnter;
+        this.parentOnDragLeave = this.onDragLeave;
+        this.onDragLeave = this.extendedOnDragLeave;
     }
     componentDidMount() {
         var _a;
         (_a = super.componentDidMount) === null || _a === void 0 ? void 0 : _a.call(this);
-        window.addEventListener('dragend', this.dragReset);
+        // If cursor is moved out of the window there is a bug
+        // which leaves placeholder element in grid, this action needed to reset this state
+        window.addEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.addEventListener('mouseup', this.mouseUpHandler);
+            innerElement.addEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.addEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.addEventListener('mousemove', this.mouseMoveHandler);
+        }
     }
     componentWillUnmount() {
-        window.removeEventListener('dragend', this.dragReset);
+        window.removeEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.removeEventListener('mouseup', this.mouseUpHandler);
+            innerElement.removeEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
+        }
+        // Resetting instance props
+        this._savedDragoutState = null;
     }
+    // react-grid-layout doens't calculate it's height when last element is removed
+    // and just keeps the previous value
+    // so for autosize to work in that case we are resetting it's height value
     containerHeight() {
         if (this.props.autoSize && this.state.layout.length === 0) {
-            return 'unset';
+            return;
         }
+        // eslint-disable-next-line consistent-return
         return super.containerHeight();
     }
-    processGridItem(child, isDroppingItem) {
+    // innerRef is passed by WithProvider without this wrapper there are only
+    // * findDOMNode - deprecated
+    // * rewrite whole ReactGridLayout.render method
+    // so in that case don't try to use this class on it's own
+    // or pass innerRef: React.MutableRef as it's not optional prop
+    getInnerElement() {
         var _a;
+        return ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current) || null;
+    }
+    // Drop item from outside gets 0,0 droppingPosition
+    // centering cursor on newly creted grid item
+    // And cause grid-layout using it's own GridItem to make it look
+    // like overlay adding className
+    processGridItem(child, isDroppingItem) {
+        var _a, _b, _c;
         const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
+        if (!gridItem) {
+            return gridItem;
+        }
+        const { props: itemProps } = gridItem;
         if (isDroppingItem) {
-            // Drop item from outside gets 0,0 droppingPosition
-            // centering cursor on newly creted grid item
-            // And cause grid-layout using it's own GridItem to make it look
-            // like overlay adding className
-            if (!gridItem)
-                return null;
-            const { props } = gridItem;
-            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
             const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
             const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            const dragStyles = this.props.hasSharedDragItem
+                ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
+                : DRAGGING_PLACEHOLDER_STYLE;
+            // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return React.cloneElement(gridItem, {
+                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
                 className: OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
+            });
+        }
+        else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
+            itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
+            const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
+            return React.cloneElement(gridItem, {
+                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
             });
         }
         return gridItem;

package/build/esm/hocs/withContext.js

@@ -29,7 +29,7 @@ function useMemoStateContext(props) {
             isEqual(groups, props.groups))) {
             props.onChange({ config, itemsStateAndParams, groups });
         }
-    }, [props.config, props.itemsStateAndParams, props.onChange]);
+    }, [props.config, props.groups, props.itemsStateAndParams, props.onChange]);
     // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
     // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
     // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
@@ -37,7 +37,17 @@ function useMemoStateContext(props) {
     const onLayoutChange = React.useCallback((layout) => {
         const currentInnerLayout = layout.map((item) => {
             if (item.i in originalLayouts.current) {
-                return Object.assign(Object.assign({}, originalLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+                // eslint-disable-next-line no-unused-vars
+                const _a = originalLayouts.current[item.i], { parent } = _a, originalCopy = __rest(_a, ["parent"]);
+                // Updating original if parent has changed and saving copy as original
+                // or leaving default
+                if (item.parent) {
+                    originalCopy.parent = item.parent;
+                }
+                originalCopy.w = item.w;
+                originalCopy.x = item.x;
+                originalCopy.y = item.y;
+                return originalCopy;
             }
             else {
                 return Object.assign({}, item);
@@ -234,16 +244,24 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout) => {
+    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout, sharedItem) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (!dragOverPlugin) {
+        let defaultLayout;
+        if (sharedItem) {
+            const { type, h, w } = sharedItem;
+            const _defaults = props.registerManager.getItem(type);
+            defaultLayout = _defaults ? Object.assign(Object.assign({}, _defaults.defaultLayout), { h, w }) : { h, w };
+        }
+        else if (dragOverPlugin) {
+            defaultLayout = dragOverPlugin.defaultLayout;
+        }
+        else {
             return false;
         }
         let maxW = gridProps.cols;
-        const { defaultLayout } = dragOverPlugin;
         const maxH = Math.min(gridProps.maxRows || Infinity, defaultLayout.maxH || Infinity);
         if (gridProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
             maxW = groupLayout.reduce((memo, item) => memo - item.w, gridProps.cols);
@@ -254,7 +272,7 @@ function useMemoStateContext(props) {
             maxH < defaultLayout.minH) {
             return false;
         }
-        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = (dragProps === null || dragProps === void 0 ? void 0 : dragProps.layout) || {};
         return {
             h: maxH ? Math.min(h, maxH) : h,
             w: maxW ? Math.min(w, maxW) : w,

package/package.json

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