nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Try contextmenu + long press events

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-02 15:15:49 +08:00
parent 7fd66a19db
commit 228c0e5028
3 changed files with 62 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -18,6 +18,7 @@
"fast-deep-equal": "~3.1.3",
"idb-keyval": "~6.2.0",
"just-debounce-it": "~3.2.0",
"long-press-event": "~2.4.6",
"masto": "~5.10.0",
"mem": "~9.0.2",
"p-retry": "~5.1.2",
@ -4664,6 +4665,11 @@
"integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
"dev": true
},
"node_modules/long-press-event": {
"version": "2.4.6",
"resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz",
"integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -10335,6 +10341,11 @@
"integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
"dev": true
},
"long-press-event": {
"version": "2.4.6",
"resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz",
"integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ=="
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

1
package.json
View file

@ -20,6 +20,7 @@
"fast-deep-equal": "~3.1.3",
"idb-keyval": "~6.2.0",
"just-debounce-it": "~3.2.0",
"long-press-event": "~2.4.6",
"masto": "~5.10.0",
"mem": "~9.0.2",
"p-retry": "~5.1.2",

51
src/components/status.jsx
View file

@ -1,6 +1,12 @@
import './status.css';
import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu';
import {
ControlledMenu,
Menu,
MenuDivider,
MenuHeader,
MenuItem,
} from '@szhsin/react-menu';
import mem from 'mem';
import pThrottle from 'p-throttle';
import { memo } from 'preact/compat';
@ -479,6 +485,26 @@ function Status({
</>
);
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({
x: 0,
y: 0,
});
useEffect(() => {
function openContextMenu(e) {
e.preventDefault();
setContextMenuAnchorPoint({
x: e.clientX,
y: e.clientY,
});
setIsContextMenuOpen(true);
}
statusRef.current.addEventListener('long-press', openContextMenu);
return () => {
statusRef.current.removeEventListener('long-press', openContextMenu);
};
}, []);
return (
<article
ref={statusRef}
@ -493,7 +519,30 @@ function Status({
}[size]
}`}
onMouseEnter={debugHover}
onContextMenu={(e) => {
if (e.metaKey) return;
e.preventDefault();
setContextMenuAnchorPoint({
x: e.clientX,
y: e.clientY,
});
setIsContextMenuOpen(true);
}}
>
<ControlledMenu
state={isContextMenuOpen ? 'open' : 'closed'}
anchorPoint={contextMenuAnchorPoint}
direction="right"
onClose={() => setIsContextMenuOpen(false)}
portal={{
target: document.body,
}}
overflow="auto"
boundingBoxPadding="8 8 8 8"
unmountOnClose
>
{StatusMenuItems}
</ControlledMenu>
{size !== 'l' && (
<div class="status-badge">
{reblogged && <Icon class="reblog" icon="rocket" size="s" />}