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

Use use-long-press instead

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-08 00:01:51 +08:00
parent 497f5334e4
commit 6e487ad848
4 changed files with 45 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
package-lock.json generated
View file

@ -18,7 +18,6 @@
"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",
@ -32,6 +31,7 @@
"toastify-js": "~1.12.0",
"uid": "~2.0.1",
"use-debounce": "~9.0.3",
"use-long-press": "~2.0.3",
"use-resize-observer": "~9.1.0",
"valtio": "1.9.0"
},
@ -4665,11 +4665,6 @@
"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",
@ -6570,6 +6565,18 @@
"react": ">=16.8.0"
}
},
"node_modules/use-long-press": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-2.0.3.tgz",
"integrity": "sha512-n3cfv90Y1ldNt+hhXzxnxuLZmgLOOC/+qfLGoeEBgOxmnokPPt39MPF3KmvKriq5VMoJ7uQdVjHejCdHBt9anw==",
"engines": {
"node": ">=10",
"npm": ">=5"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/use-resize-observer": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
@ -10341,11 +10348,6 @@
"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",
@ -11620,6 +11622,12 @@
"integrity": "sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==",
"requires": {}
},
"use-long-press": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-2.0.3.tgz",
"integrity": "sha512-n3cfv90Y1ldNt+hhXzxnxuLZmgLOOC/+qfLGoeEBgOxmnokPPt39MPF3KmvKriq5VMoJ7uQdVjHejCdHBt9anw==",
"requires": {}
},
"use-resize-observer": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",

2
package.json
View file

@ -20,7 +20,6 @@
"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",
@ -34,6 +33,7 @@
"toastify-js": "~1.12.0",
"uid": "~2.0.1",
"use-debounce": "~9.0.3",
"use-long-press": "~2.0.3",
"use-resize-observer": "~9.1.0",
"valtio": "1.9.0"
},

6
src/app.css
View file

@ -537,6 +537,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
transition: background-color 0.2s ease-out;
-webkit-tap-highlight-color: transparent;
animation: appear 0.2s ease-out;
-webkit-touch-callout: none;
}
:is(.status-link, .status-focus):is(:focus, .is-active) {
background-color: var(--link-bg-hover-color);
@ -1051,6 +1052,11 @@ body:has(.status-deck) .media-post-link {
/* MENU POPUP */
.szh-menu-container {
user-select: none;
-webkit-touch-callout: none;
-webkit-user-drag: none;
}
.szh-menu-container:has(.szh-menu--state-open) {
inset: 0;
inset: env(safe-area-inset-top) env(safe-area-inset-right)

31
src/components/status.jsx
View file

@ -7,12 +7,12 @@ import {
MenuHeader,
MenuItem,
} from '@szhsin/react-menu';
import 'long-press-event';
import mem from 'mem';
import pThrottle from 'p-throttle';
import { memo } from 'preact/compat';
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
import 'swiped-events';
import { useLongPress } from 'use-long-press';
import useResizeObserver from 'use-resize-observer';
import { useSnapshot } from 'valtio';
@ -507,25 +507,27 @@ function Status({
</>
);
const contextMenuRef = useRef();
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({
x: 0,
y: 0,
});
useEffect(() => {
function openContextMenu(e) {
e.preventDefault();
const bindLongPress = useLongPress(
(e) => {
const { clientX, clientY } = e.touches?.[0] || e;
setContextMenuAnchorPoint({
x: e.clientX,
y: e.clientY,
x: clientX,
y: clientY,
});
setIsContextMenuOpen(true);
}
statusRef.current?.addEventListener?.('long-press', openContextMenu);
return () => {
statusRef.current?.removeEventListener?.('long-press', openContextMenu);
};
}, []);
},
{
captureEvent: true,
detect: 'touch',
cancelOnMovement: true,
},
);
return (
<article
@ -551,9 +553,11 @@ function Status({
});
setIsContextMenuOpen(true);
}}
{...bindLongPress()}
>
{size !== 'l' && (
<ControlledMenu
ref={contextMenuRef}
state={isContextMenuOpen ? 'open' : undefined}
anchorPoint={contextMenuAnchorPoint}
direction="right"
@ -566,6 +570,9 @@ function Status({
// Higher than the backdrop
zIndex: 1001,
},
onClick: () => {
contextMenuRef.current?.closeMenu?.();
},
}}
overflow="auto"
boundingBoxPadding="8 8 8 8"