aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Map/RightClickPopupMenu.tsx @ 56018f1c

import { LeafletMouseEvent } from 'leaflet'
import { Fragment, 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'

export function IconMenu() {
    return (
        // <Paper sx={{ width: 320, maxWidth: '100%' }}>
            <MenuList>
                <MenuItem>
                    <ListItemIcon>
                        <ContentCut fontSize="small" />
                    </ListItemIcon>
                    <ListItemText>Cut</ListItemText>
                    <Typography variant="body2" color="text.secondary">
                        ⌘X
                    </Typography>
                </MenuItem>
                <MenuItem>
                    <ListItemIcon>
                        <ContentCopy fontSize="small" />
                    </ListItemIcon>
                    <ListItemText>Copy</ListItemText>
                    <Typography variant="body2" color="text.secondary">
                        ⌘C
                    </Typography>
                </MenuItem>
                <MenuItem>
                    <ListItemIcon>
                        <ContentPaste fontSize="small" />
                    </ListItemIcon>
                    <ListItemText>Paste</ListItemText>
                    <Typography variant="body2" color="text.secondary">
                        ⌘V
                    </Typography>
                </MenuItem>
                <Divider />
                <MenuItem>
                    <ListItemIcon>
                        <Cloud fontSize="small" />
                    </ListItemIcon>
                    <ListItemText>Web Clipboard</ListItemText>
                </MenuItem>
            </MenuList>
        // </Paper>
    )
}

const RightClickPopupMenu = () => {
    const [open, setOpen] = useState(false)
    const [latLng, setLatLng] = useState<[number, number]>([0, 0])
    const mapEvents = useMapEvents({
        contextmenu: (e: LeafletMouseEvent) => {
            setLatLng([e.latlng.lat, e.latlng.lng])
            setOpen(true)
        },
    })

    return (
        <Fragment>
            {open && <Popup onClose={() => setOpen(false)} position={latLng}>
                <IconMenu />
                </Popup>}
        </Fragment>
    )
}

export default RightClickPopupMenu