|  |  | 
 |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
 |  |  | import { useTranslate } from "react-admin"; | 
 |  |  | import { Box, Typography, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material'; | 
 |  |  | import { Box, Typography, Toolbar, Stack, useTheme, Card, Divider, Button } from '@mui/material'; | 
 |  |  | import JsonShow from '../JsonShow'; | 
 |  |  |  | 
 |  |  | import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'; | 
 |  |  | import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined'; | 
 |  |  | import * as Tool from '../tool'; | 
 |  |  |  | 
 |  |  | const BatchSettings = (props) => { | 
 |  |  |     const { data } = props; | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const themeMode = theme.palette.mode; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const { batchSprites, drawerClose } = props; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box> | 
 |  |  |             <JsonShow | 
 |  |  |                 data={data} | 
 |  |  |                 height={600} | 
 |  |  |                 data={ | 
 |  |  |                     batchSprites?.map(item => { | 
 |  |  |                         return item.data?.type + '-' + item.data?.no; | 
 |  |  |                     }) | 
 |  |  |                 } | 
 |  |  |                 height={550} | 
 |  |  |             /> | 
 |  |  |             <Box mt={2}> | 
 |  |  |                 <Divider sx={{ | 
 |  |  |                     marginBottom: '16px' | 
 |  |  |                 }} /> | 
 |  |  |                 <Toolbar sx={{ | 
 |  |  |                     display: 'flex', | 
 |  |  |                     justifyContent: 'space-between', | 
 |  |  |                     minHeight: { sm: 0 }, | 
 |  |  |                 }}> | 
 |  |  |                     <Button | 
 |  |  |                         variant="outlined" | 
 |  |  |                         color="primary" | 
 |  |  |                         onClick={drawerClose} | 
 |  |  |                         sx={{ borderColor: theme => theme.palette.success.main }} | 
 |  |  |                         startIcon={ | 
 |  |  |                             <CheckOutlinedIcon sx={{ color: theme => theme.palette.success.main }} /> | 
 |  |  |                         } | 
 |  |  |                     > | 
 |  |  |                         {translate('ra.action.confirm')} | 
 |  |  |                     </Button> | 
 |  |  |  | 
 |  |  |                     <Button | 
 |  |  |                         variant="outlined" | 
 |  |  |                         color="primary" | 
 |  |  |                         onClick={() => { | 
 |  |  |                             batchSprites?.forEach((sprite) => { | 
 |  |  |                                 Tool.getMapContainer().removeChild(sprite); | 
 |  |  |                                 drawerClose(); | 
 |  |  |                             }) | 
 |  |  |                         }} | 
 |  |  |                         sx={{ borderColor: theme => theme.palette.error.main }} | 
 |  |  |                         startIcon={ | 
 |  |  |                             <ClearOutlinedIcon sx={{ color: theme => theme.palette.error.main }} /> | 
 |  |  |                         } | 
 |  |  |                     > | 
 |  |  |                         {translate('ra.action.delete')} | 
 |  |  |                     </Button> | 
 |  |  |                 </Toolbar> | 
 |  |  |             </Box> | 
 |  |  |         </Box> | 
 |  |  |     ) | 
 |  |  | } |