feat(AsideHeader): add drag placeholder

gravity-ui · Dec 6, 2024 · 7ed469b · 7ed469b
1 parent adb757a
commit 7ed469b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git a/src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx b/src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx
@@ -15,10 +15,12 @@ interface AllPagesListItemProps {
     editMode?: boolean;
     enableSorting?: boolean;
     onToggle: () => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
 }
 
 export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
-    const {item, editMode, onToggle, enableSorting} = props;
+    const {item, editMode, onToggle, enableSorting, onDragStart, onDragEnd} = props;
     const onPinButtonClick = useCallback(
         (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             e.stopPropagation();
@@ -35,12 +37,30 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
         }
     };
 
+    const onItemDrugStart = (e: MouseEvent<HTMLDivElement>) => {
+        if (editMode && onDragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDragStart();
+        }
+    };
+
+    const onItemDrugEnd = (e: MouseEvent<HTMLDivElement>) => {
+        if (editMode && onDragEnd) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDragEnd();
+        }
+    };
+
     return (
         <div
             key={item.id}
             className={b({'edit-mode': editMode && enableSorting})}
             onClick={onItemClick}
             draggable={editMode}
+            onMouseDown={onItemDrugStart}
+            onMouseUp={onItemDrugEnd}
         >
             {item.icon ? (
                 <Icon className={b('icon')} data={item.icon} size={item.iconSize} />

diff --git a/src/components/AllPagesPanel/AllPagesPanel.scss b/src/components/AllPagesPanel/AllPagesPanel.scss
@@ -24,4 +24,11 @@
     &__item_editMode {
         padding: 0 var(--g-spacing-6);
     }
+
+    &__drag-placeholder {
+        padding-left: 88px;
+        padding-right: 68px;
+        text-wrap: nowrap;
+        visibility: hidden;
+    }
 }
diff --git a/src/components/AllPagesPanel/AllPagesPanel.tsx b/src/components/AllPagesPanel/AllPagesPanel.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Gear} from '@gravity-ui/icons';
 import {Button, Flex, Icon, List, ListItemData, Text} from '@gravity-ui/uikit';
@@ -30,6 +30,9 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
     menuItemsRef.current = menuItems;
 
     const [isEditMode, setIsEditMode] = useState(false);
+
+    const [dragingItemTitle, setDragingItemTitle] = useState<ReactNode | null>(null);
+
     const toggleEditMode = useCallback(() => {
         setIsEditMode((prev) => !prev);
     }, []);
@@ -72,16 +75,28 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
         [onMenuItemsChanged, editMenuProps],
     );
 
+    const onDragEnd = useCallback(() => {
+        setDragingItemTitle(null);
+    }, [onMenuItemsChanged]);
+
     const itemRender = useCallback(
-        (item: ListItemData<MenuItem>, _isActive: boolean, _itemIndex: number) => (
-            <AllPagesListItem
-                item={item}
-                editMode={isEditMode}
-                onToggle={() => togglePageVisibility(item)}
-                enableSorting={editMenuProps?.enableSorting}
-            />
-        ),
-        [isEditMode, togglePageVisibility],
+        (item: ListItemData<MenuItem>, _isActive: boolean, _itemIndex: number) => {
+            const onDragStart = () => {
+                setDragingItemTitle(item.title);
+            };
+
+            return (
+                <AllPagesListItem
+                    item={item}
+                    onDragStart={onDragStart}
+                    onDragEnd={onDragEnd}
+                    editMode={isEditMode}
+                    onToggle={() => togglePageVisibility(item)}
+                    enableSorting={editMenuProps?.enableSorting}
+                />
+            );
+        },
+        [isEditMode, togglePageVisibility, onMenuItemsChanged],
     );
 
     const onResetToDefaultClick = useCallback(() => {
@@ -106,6 +121,8 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
             newItems.splice(newIndex, 0, element);
 
             onMenuItemsChanged?.(newItems);
+
+            setDragingItemTitle(null);
             editMenuProps?.onChangeItemsOrder?.(element, oldIndex, newIndex);
         },
         [onMenuItemsChanged],
@@ -141,6 +158,10 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
                             onItemClick={onItemClick}
                             renderItem={itemRender}
                         />
+
+                        {dragingItemTitle && (
+                            <div className={b('drag-placeholder')}>{dragingItemTitle}</div>
+                        )}
                     </div>
                 ) : (
                     Object.keys(groupedItems).map((category) => {