Open mkllrtxn opened 5 months ago
I think I need help to include the Menu in spawnpoints popup. Nests pokestops and gyms are working fine since those already had the menu...
Here's a recommend reusable component:
// /src/components/popups/CopyIDMenu.jsx
// @ts-check
import * as React from 'react'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import IconButton from '@mui/material/IconButton'
import { useTranslation } from 'react-i18next'
import MoreVert from '@mui/icons-material/MoreVert'
import Grid from '@mui/material/Unstable_Grid2'
import { useMemory } from '@store/useMemory'
const PAPER_PROPS =
/** @type {import('@mui/material').MenuProps['PaperProps']} */ ({
style: {
maxHeight: 216,
minWidth: '20ch',
},
})
/**
* @param {{ id: string | number, children?: React.ReactNode } & import('@mui/material').Grid2Props} props
*/
export function CopyIDMenu({ id, children, ...props }) {
const [anchorEl, setAnchorEl] = React.useState(null)
/** @type {import('@mui/material').IconButtonProps['onClick']} */
const onClick = (event) => setAnchorEl(event.currentTarget)
const handleClose = () => setAnchorEl(null)
return (
<Grid textAlign="right" {...props}>
<IconButton onClick={onClick}>
<MoreVert />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={!!anchorEl}
onClose={handleClose}
PaperProps={PAPER_PROPS}
>
{children}
<CopyIDMenuItem id={id} handleClose={handleClose} />
</Menu>
</Grid>
)
}
/**
* @param {{ id: string | number, handleClose: () => void }} props
*/
export function CopyIDMenuItem({ id, handleClose }) {
const { t } = useTranslation()
const admin = useMemory((s) => s.auth.perms.admin)
const onClick = React.useCallback(() => {
navigator.clipboard.writeText(String(id))
handleClose()
}, [id, handleClose])
return admin && <MenuItem onClick={onClick}>{t('copy_id')}</MenuItem>
}
Then in your Spawnpoint popup you can change the top to something like this:
<Grid container alignItems="center">
<Grid xs={10}>
<Typography variant="h5" align="center">
{t('spawnpoint')}
</Typography>
</Grid>
<CopyIDMenu id={id} xs={2} />
</Grid>
( Make sure to import the new components needed )
Then in your Route popup, something like this:
<Grid2 xs={10}>
<Title>{route.name}</Title>
</Grid2>
<Grid2 xs={2}>
<CopyIDMenu id={route.id} />
</Grid2>
Let me know if those work for you or if you have any other questions! Thanks for the contribution so far, looking great!
I think I need help to include the Menu in spawnpoints popup. Nests pokestops and gyms are working fine since those already had the menu...