|  |  |  | 
|---|
|  |  |  | import React, { useState, useRef, useEffect } 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 { PAGE_DRAWER_WIDTH } from '@/config/setting'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const Insight = (props) => { | 
|---|
|  |  |  | const { open, onCancel } = props; | 
|---|
|  |  |  | const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; | 
|---|
|  |  |  | const theme = useTheme(); | 
|---|
|  |  |  | const themeMode = theme.palette.mode; | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleClose = () => { | 
|---|
|  |  |  | onCancel(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | }, []) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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.settings.title')} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | <IconButton onClick={handleClose} size="small"> | 
|---|
|  |  |  | <CloseIcon /> | 
|---|
|  |  |  | </IconButton> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Box p={3}> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | </Drawer> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|