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 Device = (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.devices.title')}
|
</Typography>
|
<IconButton onClick={handleClose} size="small">
|
<CloseIcon />
|
</IconButton>
|
</Stack>
|
<Box p={3}>
|
<Grid container spacing={0} sx={{
|
borderTop: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
|
borderLeft: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
|
}}>
|
{items.map((item, index) => {
|
return (
|
<Grid
|
key={index}
|
item
|
xs={4}
|
onDragStart={(e) => onDragStart(e, item.type)}
|
draggable="true"
|
>
|
<Box
|
sx={{
|
height: '100px',
|
display: 'flex',
|
flexDirection: 'column',
|
justifyContent: 'center',
|
alignItems: 'center',
|
p: 2,
|
cursor: 'pointer',
|
borderRight: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
|
borderBottom: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
|
borderColor: 'divider',
|
'&:hover': {
|
boxShadow: themeMode === 'light' ? '0px 5px 5px rgba(0, 0, 0, 0.15)' : '0px 5px 5px rgba(63, 63, 63, 0.8)',
|
transition: 'all 0.3s ease !important',
|
},
|
}}
|
>
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70%' }}>
|
<img src={item.src} alt={item.label} width="50px" style={{
|
transform: `scale(${item.scale || 1})`,
|
}} />
|
</Box>
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30%' }}>
|
<Typography variant="body2" sx={{ mt: 2.5, textAlign: 'center' }}>
|
{translate(item.label)}
|
</Typography>
|
</Box>
|
</Box>
|
</Grid>
|
)
|
})}
|
</Grid>
|
</Box>
|
</Box>
|
)}
|
</Drawer>
|
)
|
}
|
|
export default Device;
|
