aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Import/ImportContextMenu.tsx @ f41a4cd3

import { LeafletMouseEvent } from 'leaflet'
import { Fragment, useCallback, useState } from 'react'
import { Popup, useMap, useMapEvents } from 'react-leaflet'

import * as React from 'react'
import Divider from '@mui/material/Divider'
import Paper from '@mui/material/Paper'
import MenuList from '@mui/material/MenuList'
import MenuItem from '@mui/material/MenuItem'
import ListItemText from '@mui/material/ListItemText'
import ListItemIcon from '@mui/material/ListItemIcon'
import Typography from '@mui/material/Typography'
import ContentCut from '@mui/icons-material/ContentCut'
import ContentCopy from '@mui/icons-material/ContentCopy'
import ContentPaste from '@mui/icons-material/ContentPaste'
import Cloud from '@mui/icons-material/Cloud'
import { Button, Stack, ThemeProvider } from '@mui/material'
import AddFromCoordinatesDialog from './AddFromCoordinatesDialog'
import { useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { buildTheme } from '../../Theme/ThemeWrapper'
import ImportLocationDialog from './ImportLocationDialog'

const RightClickPopupMenu = () => {
    const [open, setOpen] = useState(false)
    const [latLng, setLatLng] = useState<[number, number]>([0, 0])

    const paletteMode = useSelector(
        (state: RootState) => state.theme.paletteMode
    )

    useMapEvents({
        contextmenu: (e: LeafletMouseEvent) => {
            setLatLng([e.latlng.lat, e.latlng.lng])
            setOpen(true)
        },
    })

    const closeContextMenu = useCallback(() => {
        setOpen(false)
    }, [setOpen])

    return (
        <Fragment>
            {open && (
                <Popup onClose={() => setOpen(false)} position={latLng}>
                    <Stack
                        sx={{ p: 0, mt: 0 }}
                        direction="column"
                        justifyItems="center"
                        justifyContent="center"
                    >
                        <Typography style={{margin: 0}} sx={{ mb: 0.5 }} align="center">
                            {latLng[0].toFixed(5)}°{latLng[1].toFixed(5)}°
                        </Typography>
                        <AddFromCoordinatesDialog
                            latLng={latLng}
                            closeContextMenu={closeContextMenu}
                        />
                        <ImportLocationDialog
                            latLng={latLng}
                            closeContextMenu={closeContextMenu}
                        />
                    </Stack>
                </Popup>
            )}
        </Fragment>
    )
}

export default RightClickPopupMenu