#

vincentlu

2025-12-17 3e184efaf5155f158ea05d087d964ffe64cee04a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { useTranslate } from "react-admin";
import { Drawer, Box, Typography, Grid, IconButton, Stack, useTheme } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
import * as Tool from './tool';
 
import shelf from '/map/shelf.svg';
import charge from '/map/charge.svg';
import station from '/map/station.svg';
import direction from '/map/direction.svg';
 
const items = [
    { src: shelf, label: 'page.map.devices.shelf', type: 'SHELF', scale: 1 },
    { src: charge, label: 'page.map.devices.charge', type: 'CHARGE', scale: .7 },
    { src: station, label: 'page.map.devices.station', type: 'STATION', scale: 1 },
    { src: direction, label: 'page.map.devices.direction', type: 'DIRECTION', scale: 1 },
];
 
const AreaList = (props) => {
    const {
        title,
        open,
        onCancel,
        closeCallback,
        width = PAGE_DRAWER_WIDTH,
        children
    } = props;
    const theme = useTheme();
    const themeMode = theme.palette.mode;
    const translate = useTranslate();
 
    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
    const [dragSpriteType, setDragSpriteType] = useState(null);
 
    const handleClose = () => {
        onCancel();
        if (closeCallback) {
            closeCallback();
        }
    }
 
    const onDragStart = (e, type) => {
        setDragging(true);
        const sprite = Tool.generateSprite(type);
        setDragSprite(sprite);
        setDragSpriteType(type);
    };
 
    useEffect(() => {
        const handleMouseMove = (e) => {
            if (dragging) {
                props.onDrop(dragSprite, dragSpriteType, e.clientX, e.clientY);
                setDragging(false);
                setDragSpriteType(null);
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, [dragging, props.onDrop, props.onCancel]);
 
 
    return (
        <Drawer
            variant="persistent"
            open={open}
            anchor="right"
            onClose={handleClose}
            sx={{ zIndex: 100, opacity: .8 }}
        >
            {open && (
                <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
                }}>
                    <Stack direction="row" p={2}>
                        <Typography variant="h6" flex="1">
                            {/* {title || translate('page.map.area.title')} */}
                        </Typography>
                        <IconButton onClick={handleClose} size="small">
                            <CloseIcon />
                        </IconButton>
                    </Stack>
                    <Box p={3}>
                    </Box>
                </Box>
            )}
        </Drawer>
    )
}
 
export default AreaList;