Sacha Weatherstone
4 years ago
11 changed files with 326 additions and 18 deletions
@ -4,7 +4,7 @@ specifiers: |
|||
'@emeraldpay/hashicon-react': ^0.5.2 |
|||
'@floating-ui/react-dom': ^0.4.3 |
|||
'@meshtastic/components': ^1.0.23 |
|||
'@meshtastic/meshtasticjs': ^0.6.43 |
|||
'@meshtastic/meshtasticjs': ^0.6.45 |
|||
'@reduxjs/toolkit': ^1.7.2 |
|||
'@types/mapbox-gl': ^2.6.1 |
|||
'@types/react': ^17.0.39 |
|||
@ -62,7 +62,7 @@ dependencies: |
|||
'@emeraldpay/hashicon-react': 0.5.2 |
|||
'@floating-ui/react-dom': 0.4.3_b8fdba992ce7d797017dc07106486496 |
|||
'@meshtastic/components': 1.0.23_@[email protected] |
|||
'@meshtastic/meshtasticjs': 0.6.43 |
|||
'@meshtastic/meshtasticjs': 0.6.45 |
|||
'@reduxjs/toolkit': 1.7[email protected][email protected] |
|||
base64-js: 1.5.1 |
|||
framer-motion: 6.2[email protected][email protected] |
|||
@ -1587,8 +1587,8 @@ packages: |
|||
- '@types/react' |
|||
dev: false |
|||
|
|||
/@meshtastic/meshtasticjs/0.6.43: |
|||
resolution: {integrity: sha512-INI9hj3AzjkXzJIp2yq65eV908wTCk6Ih5/5fMknKhwOgx14eC6d5qhlWxjC85kHB6gu8c/2KF3LUCFKHh+1fg==} |
|||
/@meshtastic/meshtasticjs/0.6.45: |
|||
resolution: {integrity: sha512-icAGMofpQ3hYqWhjYMLqMyhb0Xtk3GozEgOXScFTKVOaecDY0XIJmuvoBDfgD2lxNxDDPr0Dj77js+3JGxTcRg==} |
|||
dependencies: |
|||
'@protobuf-ts/runtime': 2.2.2 |
|||
sub-events: 1.8.9 |
|||
|
|||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,93 @@ |
|||
import React from 'react'; |
|||
|
|||
import { m } from 'framer-motion'; |
|||
import { FiActivity, FiAperture, FiTag } from 'react-icons/fi'; |
|||
|
|||
export interface ContextMenuProps { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => { |
|||
const [visible, setVisible] = React.useState(false); |
|||
const [position, setPosition] = React.useState({ x: 0, y: 0 }); |
|||
const [selectedValue, setSelectedValue] = React.useState<string>(); |
|||
const doSomething = (selectedValue: string) => { |
|||
setSelectedValue(selectedValue); |
|||
}; |
|||
|
|||
const showContextMenu = (event: React.MouseEvent<HTMLDivElement>) => { |
|||
event.preventDefault(); |
|||
|
|||
setVisible(false); |
|||
const newPosition = { |
|||
x: event.pageX, |
|||
y: event.pageY, |
|||
}; |
|||
|
|||
setPosition(newPosition); |
|||
setVisible(true); |
|||
}; |
|||
|
|||
const hideContextMenu = (event: React.MouseEvent<HTMLDivElement>) => { |
|||
setVisible(false); |
|||
}; |
|||
|
|||
return ( |
|||
<div |
|||
className="h-full" |
|||
onContextMenu={showContextMenu} |
|||
onClick={hideContextMenu} |
|||
> |
|||
{children} |
|||
{selectedValue && <h1>{selectedValue} is selected</h1>} |
|||
|
|||
{visible && ( |
|||
<div |
|||
style={{ top: position.y, left: position.x }} |
|||
className="fixed z-50 w-60 gap-2 divide-y divide-gray-300 rounded-md border border-gray-300 font-medium shadow-md backdrop-blur-xl dark:divide-gray-600 dark:border-gray-600 dark:text-gray-400" |
|||
> |
|||
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark"> |
|||
<m.div |
|||
whileHover={{ scale: 1.01 }} |
|||
whileTap={{ scale: 0.99 }} |
|||
className="flex gap-2 p-2" |
|||
> |
|||
<div className="my-auto"> |
|||
<FiActivity /> |
|||
</div> |
|||
<div className="truncate">Menu item</div> |
|||
</m.div> |
|||
</div> |
|||
|
|||
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark"> |
|||
<m.div |
|||
whileHover={{ scale: 1.01 }} |
|||
whileTap={{ scale: 0.99 }} |
|||
className="flex gap-2 p-2" |
|||
> |
|||
<div className="my-auto"> |
|||
<FiAperture /> |
|||
</div> |
|||
<div className="truncate">Menu item 2</div> |
|||
</m.div> |
|||
</div> |
|||
|
|||
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark"> |
|||
<m.div |
|||
whileHover={{ scale: 1.01 }} |
|||
whileTap={{ scale: 0.99 }} |
|||
className="flex gap-2 p-2" |
|||
> |
|||
<div className="my-auto"> |
|||
<FiTag /> |
|||
</div> |
|||
<div className="truncate"> |
|||
Menu item 3 with a very long name that should wrap |
|||
</div> |
|||
</m.div> |
|||
</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue