feat: extend grid properties (#212)

* feat: extend grid properties * feat: add onDropDragOver callback for dnd wrapper * fix: drag element pointer events * fix: refactor inner state names * fix: added dropping react-grid-item state * fix: added onDropDragOver item * fix: regroup showcase styles * fix: stylelint * chore: onDropDragOver showcase condition * fix: remove optional call function check
gravity-ui · Oct 30, 2024 · bb5cb0d · bb5cb0d
1 parent bb5b133
commit bb5cb0d
Show file tree

Hide file tree

Showing 14 changed files with 223 additions and 128 deletions.
diff --git a/README.md b/README.md
@@ -384,10 +384,19 @@ DashKit.setSettings({menu: [] as Array<MenuItem>});
 #### 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/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,17 +17,21 @@ 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;
 
 export const DashKitGroupsShowcase: React.FC = () => {
     const [editMode, setEditMode] = React.useState(true);
+    const [headerInteractions, setHeaderInteractions] = React.useState(true);
 
     const onClick = () => {
         console.log('click');
@@ -112,24 +115,38 @@ export const DashKitGroupsShowcase: React.FC = () => {
                     );
                 },
                 gridProperties: (props: ReactGridLayoutProps) => {
-                    return {...props, compactType: 'horizontal-nowrap', maxRows: MAX_ROWS};
+                    const overrideProps: ReactGridLayoutProps = {
+                        ...props,
+                        compactType: 'horizontal-nowrap',
+                        maxRows: MAX_ROWS,
+                    };
+
+                    if (headerInteractions) {
+                        return overrideProps;
+                    }
+
+                    return {
+                        ...overrideProps,
+                        noOverlay: true,
+                        isResizable: false,
+                        isDraggable: false,
+                        resizeHandles: [],
+                    };
                 },
             },
             {
                 id: DEFAULT_GROUP,
                 gridProperties: (props: ReactGridLayoutProps) => {
-                    const copy = {...props};
-
                     return {
-                        ...copy,
+                        ...props,
                         compactType: null,
                         allowOverlap: true,
                         resizeHandles: ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
                     };
                 },
             },
         ],
-        [],
+        [headerInteractions],
     );
 
     const overlayMenuItems = React.useMemo(() => {
@@ -275,12 +292,31 @@ export const DashKitGroupsShowcase: React.FC = () => {
             onDragEnd={() => {
                 console.log('dragEnded');
             }}
+            onDropDragOver={(item) => headerInteractions || item.parent !== fixedGroup}
         >
             <Demo title="Groups">
                 <DemoRow title="Controls">
-                    <Button view="action" size="m" onClick={() => setEditMode(!editMode)}>
-                        {editMode ? 'Disable editMode' : 'Enable editMode'}
-                    </Button>
+                    <div className={b('controls-line')}>
+                        <Button
+                            view="action"
+                            size="m"
+                            className={b('btn-contol')}
+                            onClick={() => setEditMode(!editMode)}
+                        >
+                            {editMode ? 'Disable editMode' : 'Enable editMode'}
+                        </Button>
+                        <Button
+                            view="action"
+                            size="m"
+                            className={b('btn-contol')}
+                            onClick={() => setHeaderInteractions(!headerInteractions)}
+                            disabled={!editMode}
+                        >
+                            {headerInteractions
+                                ? 'Disable header interactions'
+                                : 'Enable header interactions'}
+                        </Button>
+                    </div>
                 </DemoRow>
                 <DemoRow title="Component view">
                     <DashKit
@@ -292,6 +328,7 @@ export const DashKitGroupsShowcase: React.FC = () => {
                         overlayMenuItems={overlayMenuItems}
                         onDragStart={updateConfigOrder}
                         onResizeStart={updateConfigOrder}
+                        context={{editModeHeader: headerInteractions}}
                     />
                     <ActionPanel items={items} />
                 </DemoRow>

diff --git a/src/components/DashKit/__stories__/DashKitShowcase.scss b/src/components/DashKit/__stories__/DashKitShowcase.scss
@@ -10,4 +10,25 @@
         margin-bottom: 10px;
         margin-right: 10px;
     }
+
+    &__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;
+        }
+    }
 }
diff --git 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: 44px;
-        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/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 {DraggedOverItem, ItemDragProps} from '../../shared';
 
 type DashKitDnDWrapperProps = {
     dragImageSrc?: string;
+    onDropDragOver?: (
+        draggedItem: DraggedOverItem,
+        sharedItem: DraggedOverItem | null,
+    ) => void | boolean;
     onDragStart?: (dragProps: ItemDragProps) => void;
     onDragEnd?: () => void;
     children: React.ReactElement;
@@ -22,20 +26,22 @@ export const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps> = (props) => {
         return img;
     }, [props.dragImageSrc]);
 
+    const onDragStartProp = props.onDragStart;
     const onDragStart = React.useCallback(
         (_: React.DragEvent<Element>, itemDragProps: ItemDragProps) => {
             setDragProps(itemDragProps);
-            props.onDragStart?.(itemDragProps);
+            onDragStartProp?.(itemDragProps);
         },
-        [setDragProps, props.onDragStart],
+        [setDragProps, onDragStartProp],
     );
 
+    const onDragEndProp = props.onDragEnd;
     const onDragEnd = React.useCallback(
         (_: React.DragEvent<Element>) => {
             setDragProps(null);
-            props.onDragEnd?.();
+            onDragEndProp?.();
         },
-        [setDragProps, props.onDragEnd],
+        [setDragProps, onDragEndProp],
     );
 
     const contextValue = React.useMemo(() => {
@@ -44,8 +50,9 @@ export const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps> = (props) => {
             dragImagePreview,
             onDragStart,
             onDragEnd,
+            onDropDragOver: props.onDropDragOver,
         };
-    }, [dragProps, dragImagePreview, onDragStart, onDragEnd]);
+    }, [dragProps, dragImagePreview, onDragStart, onDragEnd, props.onDropDragOver]);
 
     return (
         <DashKitDnDContext.Provider value={contextValue}>

diff --git a/src/components/GridItem/GridItem.scss b/src/components/GridItem/GridItem.scss
@@ -49,6 +49,12 @@
     }
 }
 
+.react-grid-item.dropping {
+    // Disable evety mouse event for dropping element placeholder
+    user-select: none;
+    pointer-events: none;
+}
+
 .react-grid-layout {
     position: relative;
     transition: height 200ms ease;