@blocklet/pages-kit-block-studio 0.6.51 → 0.6.52

package/lib/esm/plugins/_theme.js

@@ -20,6 +20,9 @@ import { parsePropertyValue } from '@blocklet/pages-kit/utils/property';
 // @ts-ignore
 import { Dashboard } from '@blocklet/studio-ui';
 import { BlockletStudio } from '@blocklet/ui-react';
+import { DndContext, DragOverlay, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -34,9 +37,6 @@ import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { DndProvider } from 'react-dnd';
-import { useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useLocation, useNavigate } from 'react-router-dom';
 import SplitPane, { Pane } from 'split-pane-react';
 import 'split-pane-react/esm/themes/default.css';
@@ -67,85 +67,21 @@ function useSessionContext() {
 const LEFT_DRAWER_WIDTH = 300;
 const RIGHT_DRAWER_WIDTH = 300;
 const defaultLocale = 'en';
-// Drag and drop types
-const ItemTypes = {
-    ROUTE_ITEM: 'route-item',
-};
-const DraggableRouteItem = ({ route, staticDataInRoute, currentPageId, onNavigate, onDelete, index, moveItem, showDragHandle, routes, }) => {
-    const ref = React.useRef(null);
+const SortableRouteItem = ({ route, staticDataInRoute, currentPageId, onNavigate, onDelete, showDragHandle, isDragging = false, }) => {
     const [isHovered, setIsHovered] = React.useState(false);
-    const [{ handlerId }, drop] = useDrop({
-        accept: ItemTypes.ROUTE_ITEM,
-        collect(monitor) {
-            return {
-                handlerId: monitor.getHandlerId(),
-            };
-        },
-        hover(item, monitor) {
-            if (!ref.current || !showDragHandle) {
-                return;
-            }
-            // Get the real dragIndex from routes array using route as identifier
-            // This prevents issues when dragging too fast and item.index becomes stale
-            const dragIndex = routes.findIndex((r) => r === item.route);
-            const hoverIndex = index;
-            // Don't replace items with themselves
-            if (dragIndex === hoverIndex || dragIndex === -1) {
-                return;
-            }
-            // Determine rectangle on screen
-            const hoverBoundingRect = ref.current?.getBoundingClientRect();
-            // Get vertical middle
-            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-            // Determine mouse position
-            const clientOffset = monitor.getClientOffset();
-            // Get pixels to the top
-            const hoverClientY = (clientOffset?.y ?? 0) - hoverBoundingRect.top;
-            // Only perform the move when the mouse has crossed half of the items height
-            // When dragging downwards, only move when the cursor is below 50%
-            // When dragging upwards, only move when the cursor is above 50%
-            // Dragging downwards
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-                return;
-            }
-            // Dragging upwards
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-                return;
-            }
-            // Time to actually perform the action
-            moveItem(dragIndex, hoverIndex);
-            // Note: we're mutating the monitor item here!
-            // Generally it's better to avoid mutations,
-            // but it's good here for the sake of performance
-            // to avoid expensive index searches.
-            item.index = hoverIndex;
-        },
-    });
-    const [{ isDragging }, drag, preview] = useDrag({
-        type: ItemTypes.ROUTE_ITEM,
-        item: () => {
-            return { route, index };
-        },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        canDrag: showDragHandle,
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: route,
+        disabled: !showDragHandle,
     });
-    const opacity = isDragging ? 0.5 : 1;
-    // Separate drag handle from the clickable area
-    const dragHandleRef = React.useRef(null);
-    // Only attach drag to the handle when in custom sort mode
-    React.useEffect(() => {
-        if (showDragHandle && dragHandleRef.current) {
-            drag(dragHandleRef.current);
-        }
-    }, [drag, showDragHandle]);
-    drop(ref);
-    return (_jsx(ListItem, { ref: ref, disablePadding: true, className: isDragging ? 'drag-shaking' : '', sx: {
-            opacity,
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+    };
+    return (_jsx(ListItem, { ref: setNodeRef, style: style, disablePadding: true, className: isDragging ? 'drag-shaking' : '', sx: {
             transition: isDragging ? 'opacity 0.2s ease' : 'opacity 0.2s ease, transform 0.2s ease',
             zIndex: isDragging ? 1000 : 'auto',
-        }, "data-handler-id": handlerId, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(ListItemButton, { selected: currentPageId === route, onClick: () => onNavigate(route), sx: {
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(ListItemButton, { selected: currentPageId === route, onClick: () => onNavigate(route), sx: {
                 borderRadius: 1,
                 width: '100%',
                 textOverflow: 'ellipsis',
@@ -167,7 +103,7 @@ const DraggableRouteItem = ({ route, staticDataInRoute, currentPageId, onNavigat
                 backgroundColor: isDragging ? 'grey.100' : 'inherit',
                 pl: 1,
                 pr: 1,
-            }, children: [showDragHandle && (_jsx(Box, { ref: dragHandleRef, sx: {
+            }, children: [showDragHandle && (_jsx(Box, { ...attributes, ...listeners, sx: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -267,6 +203,7 @@ function Layout({ loadState, loadedData }) {
         draggingSplitPane: false,
         simulatorType: 'pc',
         iframeLoaded: false,
+        dragOverlay: null,
     });
     const { theme, mode, changeMode } = useConfig();
     // 添加renderComponentTrigger状态，用于触发组件重新渲染
@@ -494,16 +431,35 @@ function Layout({ loadState, loadedData }) {
                 height: '100%',
             }, children: _jsx(Skeleton, { variant: "rectangular", height: "100%", sx: { borderRadius: 1 } }) }));
     }, []);
-    // Move item function for drag and drop
-    const moveItem = useCallback((dragIndex, hoverIndex) => {
-        if (dragIndex === hoverIndex)
+    // Configure sensors for dnd-kit
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8, // 8px movement required to start drag
+        },
+    }), useSensor(KeyboardSensor));
+    // Drag event handlers
+    const handleDragStart = (event) => {
+        const { active } = event;
+        state.dragOverlay = active.id;
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        state.dragOverlay = null;
+        if (!over || active.id === over.id) {
             return;
-        const newRoutes = [...routes];
-        const [draggedItem] = newRoutes.splice(dragIndex, 1);
-        newRoutes.splice(hoverIndex, 0, draggedItem);
-        // Save the new order to localStorage (automatically enables custom sort)
-        setCustomSortOrder(newRoutes);
-    }, [routes, setCustomSortOrder]);
+        }
+        const activeRoute = active.id;
+        const overRoute = over.id;
+        const activeIndex = routes.findIndex((route) => route === activeRoute);
+        const overIndex = routes.findIndex((route) => route === overRoute);
+        if (activeIndex !== -1 && overIndex !== -1) {
+            const newRoutes = [...routes];
+            const [draggedItem] = newRoutes.splice(activeIndex, 1);
+            newRoutes.splice(overIndex, 0, draggedItem);
+            // Save the new order to localStorage (automatically enables custom sort)
+            setCustomSortOrder(newRoutes);
+        }
+    };
     // 修改 iframe URL 构建逻辑，添加初始状态参数
     const iframeUrl = useMemo(() => {
         const url = new URL(window.location.href);
@@ -600,30 +556,38 @@ function Layout({ loadState, loadedData }) {
                                     },
                                 }, children: _jsx(SortByAlphaIcon, { fontSize: "small" }) }) })), _jsx(Button, { variant: "contained", sx: { minWidth: 40 }, onClick: () => {
                                 state.createBlockOpen = true;
-                            }, children: _jsx(AddIcon, { fontSize: "small" }) })] }), routes?.length > 0 ? (_jsx(List, { sx: {
-                        pr: 1,
-                        overflowY: 'auto',
-                        height: hasCustomSort ? 'calc(100% - 80px)' : 'calc(100% - 60px)',
-                        // Prevent text selection during drag
-                        userSelect: 'none',
-                    }, children: routes
-                        .map((route, index) => {
-                        const routeName = route;
-                        const staticDataInRoute = staticData[route]?.main;
-                        if (state.searchValue && !routeName?.toLowerCase().includes(state.searchValue?.toLowerCase())) {
-                            return null;
-                        }
-                        if (!state.allComponents?.find(({ blockName }) => `/${blockName}` === routeName)) {
-                            return null;
-                        }
-                        return (_jsx(DraggableRouteItem, { route: route, staticDataInRoute: staticDataInRoute, currentPageId: currentPage.pageId, onNavigate: (route) => {
-                                if (route !== currentPage.pageId) {
-                                    navigate(route);
-                                    state.iframeLoaded = false;
-                                }
-                            }, onDelete: handleDeleteBlock, index: index, moveItem: moveItem, showDragHandle: true, routes: routes }, route));
-                    })
-                        .filter(Boolean) })) : (_jsx(Box, { sx: {
+                            }, children: _jsx(AddIcon, { fontSize: "small" }) })] }), routes?.length > 0 ? (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCorners, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(SortableContext, { items: routes, strategy: verticalListSortingStrategy, children: _jsx(List, { sx: {
+                                    pr: 1,
+                                    overflowY: 'auto',
+                                    height: hasCustomSort ? 'calc(100% - 80px)' : 'calc(100% - 60px)',
+                                    // Prevent text selection during drag
+                                    userSelect: 'none',
+                                }, children: routes
+                                    .map((route) => {
+                                    const routeName = route;
+                                    const staticDataInRoute = staticData[route]?.main;
+                                    if (state.searchValue && !routeName?.toLowerCase().includes(state.searchValue?.toLowerCase())) {
+                                        return null;
+                                    }
+                                    if (!state.allComponents?.find(({ blockName }) => `/${blockName}` === routeName)) {
+                                        return null;
+                                    }
+                                    return (_jsx(SortableRouteItem, { route: route, staticDataInRoute: staticDataInRoute, currentPageId: currentPage.pageId, onNavigate: (route) => {
+                                            if (route !== currentPage.pageId) {
+                                                navigate(route);
+                                                state.iframeLoaded = false;
+                                            }
+                                        }, onDelete: handleDeleteBlock, showDragHandle: true, isDragging: state.dragOverlay === route }, route));
+                                })
+                                    .filter(Boolean) }) }), _jsx(DragOverlay, { children: state.dragOverlay ? (_jsx(Box, { sx: {
+                                    opacity: 0.8,
+                                    backgroundColor: 'background.paper',
+                                    border: '1px solid',
+                                    borderColor: 'primary.main',
+                                    borderRadius: 1,
+                                    boxShadow: 2,
+                                    maxWidth: 280,
+                                }, children: _jsx(SortableRouteItem, { route: state.dragOverlay, staticDataInRoute: staticData[state.dragOverlay]?.main, currentPageId: currentPage.pageId, onNavigate: () => { }, onDelete: () => { }, showDragHandle: true, isDragging: true }) })) : null })] })) : (_jsx(Box, { sx: {
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',
@@ -652,8 +616,11 @@ function Layout({ loadState, loadedData }) {
         state.allComponents,
         state.searchValue,
         state.draggingSplitPane,
+        state.dragOverlay,
         hasCustomSort,
-        moveItem,
+        sensors,
+        handleDragStart,
+        handleDragEnd,
         currentPage.pageId,
         navigate,
         locale,
@@ -1036,72 +1003,70 @@ function Layout({ loadState, loadedData }) {
     if (isInsideIframe) {
         return middlePanelContent;
     }
-    return (_jsx(DndProvider, { backend: HTML5Backend, children: _jsxs(StyledDashboard, { HeaderProps: {
-                // @ts-ignore
-                homeLink: joinURL(basename),
-                addons: (addons) => {
-                    return [
-                        _jsx(Button, { onClick: async () => {
-                                if (!session?.user?.did) {
-                                    Toast.warning(t('themeTranslations.connectWallet'));
-                                    await session.login();
-                                    setTimeout(() => {
-                                        state.createResourceOpen = true;
-                                    }, 1000);
-                                }
-                                else {
+    return (_jsxs(StyledDashboard, { HeaderProps: {
+            // @ts-ignore
+            homeLink: joinURL(basename),
+            addons: (addons) => {
+                return [
+                    _jsx(Button, { onClick: async () => {
+                            if (!session?.user?.did) {
+                                Toast.warning(t('themeTranslations.connectWallet'));
+                                await session.login();
+                                setTimeout(() => {
                                     state.createResourceOpen = true;
-                                }
-                            }, children: t('themeTranslations.createResource') }, "logout"),
-                        ...addons,
-                    ];
-                },
-            }, MenusDrawerProps: { sx: { [`.${backdropClasses.root}`]: { top: 64 } } }, children: [_jsxs(StyledSplitPane, { split: "vertical", sizes: hSizes, onChange: setHSizes, sashRender: SashRender, onDragStart: () => (state.draggingSplitPane = true), onDragEnd: () => (state.draggingSplitPane = false), sx: {
-                        '&.react-split--dragging': {
-                            '.react-split__pane': {
-                                '*': {
-                                    userSelect: 'none',
-                                },
+                                }, 1000);
+                            }
+                            else {
+                                state.createResourceOpen = true;
+                            }
+                        }, children: t('themeTranslations.createResource') }, "logout"),
+                    ...addons,
+                ];
+            },
+        }, MenusDrawerProps: { sx: { [`.${backdropClasses.root}`]: { top: 64 } } }, children: [_jsxs(StyledSplitPane, { split: "vertical", sizes: hSizes, onChange: setHSizes, sashRender: SashRender, onDragStart: () => (state.draggingSplitPane = true), onDragEnd: () => (state.draggingSplitPane = false), sx: {
+                    '&.react-split--dragging': {
+                        '.react-split__pane': {
+                            '*': {
+                                userSelect: 'none',
                             },
                         },
-                        flex: 1,
-                    }, children: [_jsx(Pane, { minSize: 100, maxSize: 400, children: leftPanelContent }), _jsx(Pane, { minSize: 400, children: middlePanelContent }), _jsx(Pane, { minSize: 100, maxSize: '30%', children: rightPanelContent })] }), _jsx(CreateResource, { open: state.createResourceOpen, onClose: () => {
-                        state.createResourceOpen = false;
-                    } }), _jsxs(Dialog, { open: state.createBlockOpen, onClose: onCloseCreateBlock, children: [_jsx(DialogTitle, { children: t('themeTranslations.createNewBlock') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { pt: 1, minWidth: 300 }, children: [_jsx(TextField, { autoFocus: true, required: true, label: t('themeTranslations.name'), fullWidth: true, value: state.newBlockParams.name, onChange: (e) => {
-                                            state.newBlockParams.name = e.target.value.replace(/[^a-zA-Z0-9-]/g, '');
-                                        } }), _jsx(TextField, { label: t('themeTranslations.description'), fullWidth: true, multiline: true, rows: 3, value: state.newBlockParams.description, onChange: (e) => {
-                                            state.newBlockParams.description = e.target.value;
-                                        } }), _jsx(Button, { variant: "contained", fullWidth: true, onClick: async () => {
-                                            if (!state.newBlockParams.name) {
-                                                Toast.warning(t('themeTranslations.blockNameRequired'));
-                                                return;
-                                            }
-                                            if (routes.some((route) => {
-                                                const staticDataInRoute = staticData[route]?.main;
-                                                return staticDataInRoute?.blockName?.toLowerCase() === state.newBlockParams.name.toLowerCase();
-                                            })) {
-                                                Toast.warning(t('themeTranslations.blockNameExists'));
-                                                return;
-                                            }
-                                            try {
-                                                await api.post('/api/blocks/create', state.newBlockParams);
-                                                state.init = false;
-                                                setTimeout(() => {
-                                                    navigate(`/${state.newBlockParams.name}?no-redirect=true`);
-                                                    onCloseCreateBlock();
-                                                }, 1000);
-                                            }
-                                            catch (error) {
-                                                console.error('Failed to create block:', error);
-                                                Toast.error(t('themeTranslations.failedCreateBlock'));
-                                            }
-                                        }, children: t('themeTranslations.create') })] }) })] }), _jsx(ComparisonPreviewDialog, { open: state.previewDialog.open, title: state.previewDialog.title, leftTitle: state.previewDialog.leftTitle, leftContent: state.previewDialog.leftContent, rightTitle: state.previewDialog.rightTitle, rightContent: state.previewDialog.rightContent, description: state.previewDialog.description, loading: state.previewDialog.loading, onConfirm: state.previewDialog.onConfirm, onClose: () => {
-                        state.previewDialog.open = false;
-                    } }), _jsxs(Dialog, { open: state.deleteConfirmDialog.open, onClose: () => (state.deleteConfirmDialog.open = false), maxWidth: "sm", fullWidth: true, children: [_jsx(DialogTitle, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: t('themeTranslations.deleteComponent') }), _jsxs(DialogContent, { children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('themeTranslations.deleteWarning') }), _jsx(Typography, { children: t('themeTranslations.deleteConfirmMessage', {
-                                        componentName: state.deleteConfirmDialog.blockName,
-                                    }) })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2, gap: 1 }, children: [_jsx(Button, { variant: "outlined", onClick: () => (state.deleteConfirmDialog.open = false), disabled: state.deleteConfirmDialog.loading, children: t('themeTranslations.cancel') }), _jsx(Button, { variant: "contained", color: "error", onClick: confirmDeleteBlock, disabled: state.deleteConfirmDialog.loading, startIcon: state.deleteConfirmDialog.loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(DeleteIcon, {}), children: state.deleteConfirmDialog.loading
-                                        ? t('themeTranslations.deleting')
-                                        : t('themeTranslations.deleteConfirm') })] })] })] }) }));
+                    },
+                    flex: 1,
+                }, children: [_jsx(Pane, { minSize: 100, maxSize: 400, children: leftPanelContent }), _jsx(Pane, { minSize: 400, children: middlePanelContent }), _jsx(Pane, { minSize: 100, maxSize: '30%', children: rightPanelContent })] }), _jsx(CreateResource, { open: state.createResourceOpen, onClose: () => {
+                    state.createResourceOpen = false;
+                } }), _jsxs(Dialog, { open: state.createBlockOpen, onClose: onCloseCreateBlock, children: [_jsx(DialogTitle, { children: t('themeTranslations.createNewBlock') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { pt: 1, minWidth: 300 }, children: [_jsx(TextField, { autoFocus: true, required: true, label: t('themeTranslations.name'), fullWidth: true, value: state.newBlockParams.name, onChange: (e) => {
+                                        state.newBlockParams.name = e.target.value.replace(/[^a-zA-Z0-9-]/g, '');
+                                    } }), _jsx(TextField, { label: t('themeTranslations.description'), fullWidth: true, multiline: true, rows: 3, value: state.newBlockParams.description, onChange: (e) => {
+                                        state.newBlockParams.description = e.target.value;
+                                    } }), _jsx(Button, { variant: "contained", fullWidth: true, onClick: async () => {
+                                        if (!state.newBlockParams.name) {
+                                            Toast.warning(t('themeTranslations.blockNameRequired'));
+                                            return;
+                                        }
+                                        if (routes.some((route) => {
+                                            const staticDataInRoute = staticData[route]?.main;
+                                            return staticDataInRoute?.blockName?.toLowerCase() === state.newBlockParams.name.toLowerCase();
+                                        })) {
+                                            Toast.warning(t('themeTranslations.blockNameExists'));
+                                            return;
+                                        }
+                                        try {
+                                            await api.post('/api/blocks/create', state.newBlockParams);
+                                            state.init = false;
+                                            setTimeout(() => {
+                                                navigate(`/${state.newBlockParams.name}?no-redirect=true`);
+                                                onCloseCreateBlock();
+                                            }, 1000);
+                                        }
+                                        catch (error) {
+                                            console.error('Failed to create block:', error);
+                                            Toast.error(t('themeTranslations.failedCreateBlock'));
+                                        }
+                                    }, children: t('themeTranslations.create') })] }) })] }), _jsx(ComparisonPreviewDialog, { open: state.previewDialog.open, title: state.previewDialog.title, leftTitle: state.previewDialog.leftTitle, leftContent: state.previewDialog.leftContent, rightTitle: state.previewDialog.rightTitle, rightContent: state.previewDialog.rightContent, description: state.previewDialog.description, loading: state.previewDialog.loading, onConfirm: state.previewDialog.onConfirm, onClose: () => {
+                    state.previewDialog.open = false;
+                } }), _jsxs(Dialog, { open: state.deleteConfirmDialog.open, onClose: () => (state.deleteConfirmDialog.open = false), maxWidth: "sm", fullWidth: true, children: [_jsx(DialogTitle, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: t('themeTranslations.deleteComponent') }), _jsxs(DialogContent, { children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('themeTranslations.deleteWarning') }), _jsx(Typography, { children: t('themeTranslations.deleteConfirmMessage', {
+                                    componentName: state.deleteConfirmDialog.blockName,
+                                }) })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2, gap: 1 }, children: [_jsx(Button, { variant: "outlined", onClick: () => (state.deleteConfirmDialog.open = false), disabled: state.deleteConfirmDialog.loading, children: t('themeTranslations.cancel') }), _jsx(Button, { variant: "contained", color: "error", onClick: confirmDeleteBlock, disabled: state.deleteConfirmDialog.loading, startIcon: state.deleteConfirmDialog.loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(DeleteIcon, {}), children: state.deleteConfirmDialog.loading ? t('themeTranslations.deleting') : t('themeTranslations.deleteConfirm') })] })] })] }));
 }
 // Add SplitPane styling
 const StyledSplitPane = styled(SplitPane) `