From a23ad55fdea5d698f77b018db35d57ab6a8472d9 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 23 Oct 2024 12:27:21 +0300 Subject: [PATCH 01/10] feat: extend grid properties --- .../__stories__/DashKitGroupsShowcase.tsx | 7 ++++- src/components/GridLayout/GridLayout.js | 30 +++++++++---------- .../OverlayControls/OverlayControls.tsx | 7 +++-- src/typings/common.ts | 6 +++- src/typings/config.ts | 6 ++-- 5 files changed, 32 insertions(+), 24 deletions(-) diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index 7630608..ce1940a 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -112,7 +112,12 @@ export const DashKitGroupsShowcase: React.FC = () => { ); }, gridProperties: (props: ReactGridLayoutProps) => { - return {...props, compactType: 'horizontal-nowrap', maxRows: MAX_ROWS}; + return { + ...props, + compactType: 'horizontal-nowrap', + maxRows: MAX_ROWS, + noOverlay: true, + }; }, }, { diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 57b8d3c..51e5085 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -605,18 +605,16 @@ export default class GridLayout extends React.PureComponent { return ( {renderItems.map((item, i) => { - const isCurrentItem = currentDraggingElement?.item.id === item.id; + const keyId = item.id; + const isCurrentItem = currentDraggingElement?.item.id === keyId; const isDraggedOut = isCurrentItem && this.state.draggedOut; + const isDragging = this.state.isDragging; + const itemNoOverlay = + 'noOverlay' in properties ? properties.noOverlay : noOverlay; return ( { const onItemClickHandler = typeof handler === 'function' ? handler : noop; return ( + { overlayMenuItems={overlayMenuItems} onDragStart={updateConfigOrder} onResizeStart={updateConfigOrder} + context={{editModeHeader: headerInteractions}} /> diff --git a/src/components/DashKit/__stories__/Demo.scss b/src/components/DashKit/__stories__/Demo.scss index 58cb1e4..8d17691 100644 --- a/src/components/DashKit/__stories__/Demo.scss +++ b/src/components/DashKit/__stories__/Demo.scss @@ -36,7 +36,7 @@ overflow: auto; top: 0; z-index: 3; - min-height: 44px; + min-height: 52px; display: flex; flex-direction: column; margin-bottom: 8px; diff --git a/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx b/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx index 01e91ce..9d9bb9e 100644 --- a/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx +++ b/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx @@ -1,10 +1,14 @@ import React from 'react'; import {DashKitDnDContext} from '../../context/DashKitContext'; -import type {ItemDragProps} from '../../shared'; +import type {ItemDragProps, ItemDropDragOver} from '../../shared'; type DashKitDnDWrapperProps = { dragImageSrc?: string; + onDropDragOver?: ( + draggedItem: ItemDropDragOver, + sharedItem: ItemDropDragOver | null, + ) => void | boolean; onDragStart?: (dragProps: ItemDragProps) => void; onDragEnd?: () => void; children: React.ReactElement; @@ -22,20 +26,22 @@ export const DashKitDnDWrapper: React.FC = (props) => { return img; }, [props.dragImageSrc]); + const onDragStartProp = props.onDragStart; const onDragStart = React.useCallback( (_: React.DragEvent, itemDragProps: ItemDragProps) => { setDragProps(itemDragProps); - props.onDragStart?.(itemDragProps); + onDragStartProp?.(itemDragProps); }, - [setDragProps, props.onDragStart], + [setDragProps, onDragStartProp], ); + const onDragEndProp = props.onDragEnd; const onDragEnd = React.useCallback( (_: React.DragEvent) => { setDragProps(null); - props.onDragEnd?.(); + onDragEndProp?.(); }, - [setDragProps, props.onDragEnd], + [setDragProps, onDragEndProp], ); const contextValue = React.useMemo(() => { @@ -44,8 +50,9 @@ export const DashKitDnDWrapper: React.FC = (props) => { dragImagePreview, onDragStart, onDragEnd, + onDropDragOver: props.onDropDragOver, }; - }, [dragProps, dragImagePreview, onDragStart, onDragEnd]); + }, [dragProps, dragImagePreview, onDragStart, onDragEnd, props.onDropDragOver]); return ( diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 51e5085..660be2e 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -533,11 +533,17 @@ export default class GridLayout extends React.PureComponent { const {h, w, i} = currentDraggingElement.layoutItem; const {type} = currentDraggingElement.item; - return onDropDragOver(e, properties, layout, {h, w, i, type}); + return onDropDragOver(e, group, properties, layout, { + h, + w, + i, + type, + parent: currentDraggingElement.group, + }); } if (dragOverPlugin) { - return onDropDragOver(e, properties, layout); + return onDropDragOver(e, group, properties, layout); } return false; @@ -581,11 +587,9 @@ export default class GridLayout extends React.PureComponent { } = this.context; const {currentDraggingElement, draggedOverGroup} = this.state; - - const properties = groupGridProperties - ? groupGridProperties({ - ...registerManager.gridLayout, - }) + const hasOwnGroupProperties = typeof groupGridProperties === 'function'; + const properties = hasOwnGroupProperties + ? groupGridProperties({...registerManager.gridLayout}) : registerManager.gridLayout; let {compactType} = properties; @@ -637,7 +641,9 @@ export default class GridLayout extends React.PureComponent { const isDraggedOut = isCurrentItem && this.state.draggedOut; const isDragging = this.state.isDragging; const itemNoOverlay = - 'noOverlay' in properties ? properties.noOverlay : noOverlay; + hasOwnGroupProperties && 'noOverlay' in properties + ? properties.noOverlay + : noOverlay; return ( ref && ref.reload && ref.reload(data)); }, []); - const dragProps = dndContext?.dragProps; + const dragPropsContext = dndContext?.dragProps; + const onDropDragOverContext = dndContext?.onDropDragOver; const dragOverPlugin = React.useMemo(() => { - if (!dragProps) { + if (!dragPropsContext) { return null; } - const pluginType = dragProps.type; + const pluginType = dragPropsContext.type; if (props.registerManager.check(pluginType)) { return props.registerManager.getItem(pluginType); @@ -333,10 +334,10 @@ function useMemoStateContext(props) { console.error(`Uknown pluginType: ${pluginType}`); return null; } - }, [dragProps, props.registerManager]); + }, [dragPropsContext, props.registerManager]); const onDropDragOver = React.useCallback( - (_e, gridProps, groupLayout, sharedItem) => { + (_e, group, gridProps, groupLayout, sharedItem) => { if (temporaryLayout) { resetTemporaryLayout(); return false; @@ -372,26 +373,49 @@ function useMemoStateContext(props) { const { h = defaultLayout?.h || DEFAULT_WIDGET_HEIGHT, w = defaultLayout?.w || DEFAULT_WIDGET_WIDTH, - } = dragProps?.layout || {}; + } = dragPropsContext?.layout || {}; - return { + const resultLayout = { h: maxH ? Math.min(h, maxH) : h, w: maxW ? Math.min(w, maxW) : w, }; + + if ( + onDropDragOverContext && + onDropDragOverContext?.( + { + ...sharedItem, + ...resultLayout, + ...dragPropsContext, + parent: group, + }, + sharedItem ?? null, + ) === false + ) { + return false; + } + + return resultLayout; }, - [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps], + [ + resetTemporaryLayout, + temporaryLayout, + dragOverPlugin, + dragPropsContext, + onDropDragOverContext, + ], ); const onDropProp = props.onDrop; const onDrop = React.useCallback( (newLayout, item) => { - if (!dragProps) { + if (!dragPropsContext) { return; } setTemporaryLayout({ data: [...newLayout, item], - dragProps, + dragProps: dragPropsContext, }); onDropProp({ @@ -404,10 +428,10 @@ function useMemoStateContext(props) { }, []), itemLayout: pick(item, ITEM_PROPS), commit: resetTemporaryLayout, - dragProps, + dragProps: dragPropsContext, }); }, - [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout], + [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout], ); const dashkitContextValue = React.useMemo( diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts index 607ff2a..74b7ab0 100644 --- a/src/shared/types/common.ts +++ b/src/shared/types/common.ts @@ -16,6 +16,11 @@ export type ItemDragProps = { extra?: any; }; +export type ItemDropDragOver = Omit & { + type: string; + i?: ConfigLayout['i']; +}; + export type ItemDropProps = { commit: () => void; dragProps: ItemDragProps; From 29fc0bc1c41ae4114d395ef9667eef67ff3578b5 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 14:48:30 +0300 Subject: [PATCH 03/10] fix: drag element pointer events --- src/components/GridLayout/GridLayout.js | 9 +++++---- src/components/GridLayout/ReactGridLayout.js | 6 ++++-- src/hocs/withContext.js | 7 +++---- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 660be2e..7571746 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -532,14 +532,15 @@ export default class GridLayout extends React.PureComponent { if (currentDraggingElement) { const {h, w, i} = currentDraggingElement.layoutItem; const {type} = currentDraggingElement.item; - - return onDropDragOver(e, group, properties, layout, { + const sharedItem = { h, w, i, type, parent: currentDraggingElement.group, - }); + }; + + return onDropDragOver(e, group, properties, layout, sharedItem); } if (dragOverPlugin) { @@ -633,7 +634,7 @@ export default class GridLayout extends React.PureComponent { hasSharedDragItem={hasSharedDragItem} sharedDragPosition={currentDraggingElement?.cursorPosition} isDragCaptured={isDragCaptured} - isDroppable={Boolean(outerDnDEnable)} + isDroppable={Boolean(outerDnDEnable) && editMode} > {renderItems.map((item, i) => { const keyId = item.id; diff --git a/src/components/GridLayout/ReactGridLayout.js b/src/components/GridLayout/ReactGridLayout.js index a32a586..7fc0a0a 100644 --- a/src/components/GridLayout/ReactGridLayout.js +++ b/src/components/GridLayout/ReactGridLayout.js @@ -227,8 +227,10 @@ class DragOverLayout extends ReactGridLayout { const style = gridItem.props.style || null; // React.cloneElement is just cleaner then copy-paste whole processGridItem method return React.cloneElement(gridItem, { - // hiding previre if dragging shared item - style: hasSharedDragItem ? {...style, opacity: 0} : style, + // hiding preview if dragging shared item + style: hasSharedDragItem + ? {...style, opacity: 0} + : {...style, pointerEvents: 'none'}, className: OVERLAY_CLASS_NAME, droppingPosition: { ...droppingPosition, diff --git a/src/hocs/withContext.js b/src/hocs/withContext.js index 72b532f..e30418b 100644 --- a/src/hocs/withContext.js +++ b/src/hocs/withContext.js @@ -375,7 +375,7 @@ function useMemoStateContext(props) { w = defaultLayout?.w || DEFAULT_WIDGET_WIDTH, } = dragPropsContext?.layout || {}; - const resultLayout = { + const itemLayout = { h: maxH ? Math.min(h, maxH) : h, w: maxW ? Math.min(w, maxW) : w, }; @@ -385,8 +385,7 @@ function useMemoStateContext(props) { onDropDragOverContext?.( { ...sharedItem, - ...resultLayout, - ...dragPropsContext, + ...itemLayout, parent: group, }, sharedItem ?? null, @@ -395,7 +394,7 @@ function useMemoStateContext(props) { return false; } - return resultLayout; + return itemLayout; }, [ resetTemporaryLayout, From 75205a4e57a0f4b3277b0753bbdf48ef9596ed2d Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 14:48:30 +0300 Subject: [PATCH 04/10] fix: refactor inner state names --- src/components/GridLayout/GridLayout.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 7571746..fa99aad 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -18,10 +18,10 @@ export default class GridLayout extends React.PureComponent { this.pluginsRefs = []; this.state = { isDragging: false, + isDraggedOut: false, isPageHidden: false, currentDraggingElement: null, draggedOverGroup: null, - draggedOut: false, }; } @@ -266,7 +266,7 @@ export default class GridLayout extends React.PureComponent { _initDragCoordinatesWatcher(element) { if (!this._parendDragNode) { this._parendDragNode = element.parentElement; - this.setState({draggedOut: false}); + this.setState({isDraggedOut: false}); } } @@ -300,22 +300,22 @@ export default class GridLayout extends React.PureComponent { const parentRect = parent.getBoundingClientRect(); const {clientX, clientY} = e; - let draggedOut = this.state.draggedOut; + let isDraggedOut = this.state.isDraggedOut; if ( clientX < parentRect.left || clientX > parentRect.right || clientY < parentRect.top || clientY > parentRect.bottom ) { - draggedOut = true; + isDraggedOut = true; } else { - draggedOut = false; + isDraggedOut = false; } - if (draggedOut !== this.state.draggedOut) { - this.setState({draggedOut}); + if (isDraggedOut !== this.state.isDraggedOut) { + this.setState({isDraggedOut}); - if (!draggedOut) { + if (!isDraggedOut) { this._forceCursorCapture( parent, { @@ -330,7 +330,7 @@ export default class GridLayout extends React.PureComponent { _resetDragWatcher() { this._parendDragNode = null; - this.setState({draggedOut: false}); + this.setState({isDraggedOut: false}); } _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) { @@ -638,9 +638,9 @@ export default class GridLayout extends React.PureComponent { > {renderItems.map((item, i) => { const keyId = item.id; - const isCurrentItem = currentDraggingElement?.item.id === keyId; - const isDraggedOut = isCurrentItem && this.state.draggedOut; const isDragging = this.state.isDragging; + const isCurrentDraggedItem = currentDraggingElement?.item.id === keyId; + const isDraggedOut = isCurrentDraggedItem && this.state.isDraggedOut; const itemNoOverlay = hasOwnGroupProperties && 'noOverlay' in properties ? properties.noOverlay From 5d64d5985b796e78cf4da67fbd4a788ab210e86d Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 16:55:59 +0300 Subject: [PATCH 05/10] fix: added dropping react-grid-item state --- src/components/GridItem/GridItem.scss | 6 ++++++ src/components/GridLayout/GridLayout.js | 7 ++++--- src/components/GridLayout/ReactGridLayout.js | 8 +++----- src/constants/common.ts | 2 ++ 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/GridItem/GridItem.scss b/src/components/GridItem/GridItem.scss index 71898e0..f644ff0 100644 --- a/src/components/GridItem/GridItem.scss +++ b/src/components/GridItem/GridItem.scss @@ -49,6 +49,12 @@ } } +// Disable evety mouse event for dropping element placeholder +.react-grid-item.dropping { + user-select: none; + pointer-events: none; +} + .react-grid-layout { position: relative; transition: height 200ms ease; diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index fa99aad..129a1b5 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -347,18 +347,19 @@ export default class GridLayout extends React.PureComponent { ), ); - this._initDragCoordinatesWatcher(element); - if (this.context.dragOverPlugin) { this.setState({isDragging: true}); } else { + this._initDragCoordinatesWatcher(element); this.updateDraggingElementState(group, layoutItem, e); this.setState({isDragging: true}); } } _onDrag(group, layout, oldItem, newItem, placeholder, e, element) { - this._updateDragCoordinates(e); + if (!this.context.dragOverPlugin) { + this._updateDragCoordinates(e); + } this.context.onDrag?.call( this, diff --git a/src/components/GridLayout/ReactGridLayout.js b/src/components/GridLayout/ReactGridLayout.js index 7fc0a0a..d939635 100644 --- a/src/components/GridLayout/ReactGridLayout.js +++ b/src/components/GridLayout/ReactGridLayout.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactGridLayout, {WidthProvider, utils} from 'react-grid-layout'; -import {OVERLAY_CLASS_NAME} from '../../constants'; +import {DROPPING_ELEMENT_CLASS_NAME, OVERLAY_CLASS_NAME} from '../../constants'; class DragOverLayout extends ReactGridLayout { constructor(...args) { @@ -228,10 +228,8 @@ class DragOverLayout extends ReactGridLayout { // React.cloneElement is just cleaner then copy-paste whole processGridItem method return React.cloneElement(gridItem, { // hiding preview if dragging shared item - style: hasSharedDragItem - ? {...style, opacity: 0} - : {...style, pointerEvents: 'none'}, - className: OVERLAY_CLASS_NAME, + style: hasSharedDragItem ? {...style, opacity: 0} : style, + className: `${OVERLAY_CLASS_NAME} ${DROPPING_ELEMENT_CLASS_NAME}`, droppingPosition: { ...droppingPosition, left: droppingPosition.left - offsetX, diff --git a/src/constants/common.ts b/src/constants/common.ts index 2198a62..4930685 100644 --- a/src/constants/common.ts +++ b/src/constants/common.ts @@ -26,3 +26,5 @@ export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap'; export const DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel'; export const FOCUSED_CLASS_NAME = 'dashkit_focused'; + +export const DROPPING_ELEMENT_CLASS_NAME = 'dropping'; From 099f24233ac77b8ec9f44b3a13fb05aeed9c680d Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 17:01:20 +0300 Subject: [PATCH 06/10] fix: added onDropDragOver item --- README.md | 9 +++++++++ src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx | 6 +++--- src/shared/types/common.ts | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a099f6d..2f036e1 100644 --- a/README.md +++ b/README.md @@ -384,10 +384,19 @@ DashKit.setSettings({menu: [] as Array}); #### DashKitDnDWrapper ```ts +type DraggedOverItem = { + h: number; + w: number; + type: string; + parent: string; + i?: number; +}; + interface DashKitDnDWrapperProps { dragImageSrc?: string; onDragStart?: (dragProps: ItemDragProps) => void; onDragEnd?: () => void; + onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean; } ``` diff --git a/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx b/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx index 9d9bb9e..742339c 100644 --- a/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx +++ b/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx @@ -1,13 +1,13 @@ import React from 'react'; import {DashKitDnDContext} from '../../context/DashKitContext'; -import type {ItemDragProps, ItemDropDragOver} from '../../shared'; +import type {DraggedOverItem, ItemDragProps} from '../../shared'; type DashKitDnDWrapperProps = { dragImageSrc?: string; onDropDragOver?: ( - draggedItem: ItemDropDragOver, - sharedItem: ItemDropDragOver | null, + draggedItem: DraggedOverItem, + sharedItem: DraggedOverItem | null, ) => void | boolean; onDragStart?: (dragProps: ItemDragProps) => void; onDragEnd?: () => void; diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts index 74b7ab0..4249e6f 100644 --- a/src/shared/types/common.ts +++ b/src/shared/types/common.ts @@ -16,7 +16,7 @@ export type ItemDragProps = { extra?: any; }; -export type ItemDropDragOver = Omit & { +export type DraggedOverItem = Omit & { type: string; i?: ConfigLayout['i']; }; From 3b9a3c653ed46d4361bc92eb96458016acca9c18 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 17:42:12 +0300 Subject: [PATCH 07/10] fix: regroup showcase styles --- .../__stories__/DashKitGroupsShowcase.tsx | 40 ++++++++----- .../DashKit/__stories__/DashKitShowcase.scss | 21 +++++++ src/components/DashKit/__stories__/Demo.scss | 21 ------- src/components/GridLayout/ReactGridLayout.js | 57 +++++++++---------- 4 files changed, 72 insertions(+), 67 deletions(-) diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index d829dec..0f7e122 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import {cn} from '@bem-react/classname'; import {ChartColumn, Copy, Heading, Pin, Sliders, TextAlignLeft, TrashBin} from '@gravity-ui/icons'; import {Button, Icon} from '@gravity-ui/uikit'; @@ -18,11 +17,14 @@ import { } from '../../..'; import {DEFAULT_GROUP, MenuItems} from '../../../helpers'; import {i18n} from '../../../i18n'; +import {cn} from '../../../utils/cn'; import {Demo, DemoRow} from './Demo'; import {fixedGroup, getConfig} from './utils'; -const b = cn('dashkit-demo'); +import './DashKitShowcase.scss'; + +const b = cn('stories-dashkit-showcase'); const MAX_ROWS = 2; const GRID_COLUMNS = 36; @@ -300,19 +302,27 @@ export const DashKitGroupsShowcase: React.FC = () => { > - - +
+ + +
.react-grid-layout { + flex: 1; + } + } } diff --git a/src/components/DashKit/__stories__/Demo.scss b/src/components/DashKit/__stories__/Demo.scss index 8d17691..fead6a6 100644 --- a/src/components/DashKit/__stories__/Demo.scss +++ b/src/components/DashKit/__stories__/Demo.scss @@ -30,27 +30,6 @@ } } - &-inline-group { - background-color: var(--g-color-base-generic-ultralight); - position: sticky; - overflow: auto; - top: 0; - z-index: 3; - min-height: 52px; - display: flex; - flex-direction: column; - margin-bottom: 8px; - - &_edit-mode { - position: static; - overflow: visible; - } - - > .react-grid-layout { - flex: 1; - } - } - .dashkit_focused { outline: 1px dashed var(--g-color-text-danger); } diff --git a/src/components/GridLayout/ReactGridLayout.js b/src/components/GridLayout/ReactGridLayout.js index d939635..b1d2f0f 100644 --- a/src/components/GridLayout/ReactGridLayout.js +++ b/src/components/GridLayout/ReactGridLayout.js @@ -188,6 +188,28 @@ class DragOverLayout extends ReactGridLayout { } }; + calculateDroppingPosition(itemProps) { + const {containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition} = + itemProps; + const {sharedDragPosition} = this.props; + + let offsetX, offsetY; + + if (sharedDragPosition) { + offsetX = sharedDragPosition.offsetX; + offsetY = sharedDragPosition.offsetY; + } else { + offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale; + offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale; + } + + return { + ...droppingPosition, + left: droppingPosition.left - offsetX, + top: droppingPosition.top - offsetY, + }; + } + // 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 @@ -199,42 +221,15 @@ class DragOverLayout extends ReactGridLayout { return gridItem; } - const {props: itemProps} = gridItem; - if (isDroppingItem) { - const { - containerWidth, - cols, - w, - h, - rowHeight, - margin, - transformScale, - droppingPosition, - } = itemProps; - const {sharedDragPosition, hasSharedDragItem} = this.props; - - let offsetX, offsetY; - - if (sharedDragPosition) { - offsetX = sharedDragPosition.offsetX; - offsetY = sharedDragPosition.offsetY; - } else { - offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale; - offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale; - } - - const style = gridItem.props.style || null; // React.cloneElement is just cleaner then copy-paste whole processGridItem method return React.cloneElement(gridItem, { // hiding preview if dragging shared item - style: hasSharedDragItem ? {...style, opacity: 0} : style, + style: this.props.hasSharedDragItem + ? {...gridItem.props.style, opacity: 0} + : gridItem.props.style, className: `${OVERLAY_CLASS_NAME} ${DROPPING_ELEMENT_CLASS_NAME}`, - droppingPosition: { - ...droppingPosition, - left: droppingPosition.left - offsetX, - top: droppingPosition.top - offsetY, - }, + droppingPosition: this.calculateDroppingPosition(gridItem.props), }); } From 28737447b80b29cd440ad799e24676d2bbd8ee41 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 17:45:16 +0300 Subject: [PATCH 08/10] fix: stylelint --- src/components/GridItem/GridItem.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GridItem/GridItem.scss b/src/components/GridItem/GridItem.scss index f644ff0..6ede688 100644 --- a/src/components/GridItem/GridItem.scss +++ b/src/components/GridItem/GridItem.scss @@ -49,8 +49,8 @@ } } -// Disable evety mouse event for dropping element placeholder .react-grid-item.dropping { + // Disable evety mouse event for dropping element placeholder user-select: none; pointer-events: none; } From 189ab9106d9797a68027cf4c8244812285d45e4c Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 17:57:53 +0300 Subject: [PATCH 09/10] chore: onDropDragOver showcase condition --- .../DashKit/__stories__/DashKitGroupsShowcase.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index 0f7e122..81f1099 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -292,13 +292,7 @@ export const DashKitGroupsShowcase: React.FC = () => { onDragEnd={() => { console.log('dragEnded'); }} - onDropDragOver={(item) => { - if (!headerInteractions && item.parent === fixedGroup) { - return false; - } - - return true; - }} + onDropDragOver={(item) => headerInteractions || item.parent !== fixedGroup} > From cc09d31c059689bd676f655789541fa9afaaa8f3 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 30 Oct 2024 18:16:31 +0300 Subject: [PATCH 10/10] fix: remove optional call function check --- src/hocs/withContext.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hocs/withContext.js b/src/hocs/withContext.js index e30418b..227183e 100644 --- a/src/hocs/withContext.js +++ b/src/hocs/withContext.js @@ -381,7 +381,6 @@ function useMemoStateContext(props) { }; if ( - onDropDragOverContext && onDropDragOverContext?.( { ...sharedItem,