fluxerapp/fluxer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor progress

Browse Source
This commit is contained in:
Hampus Kraft
2026-02-17 12:22:36 +00:00
parent cb31608523
commit d5abd1a7e4
8257 changed files with 1190207 additions and 761040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
fluxer_app/src/components/LongPressable.tsx
View File

@@ -17,9 +17,7 @@
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
*/
import React from 'react';
export const LONG_PRESS_DURATION_MS = 500;
import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
const LONG_PRESS_MOVEMENT_THRESHOLD = 10;
@@ -31,6 +29,8 @@ const MAX_VELOCITY_SAMPLE_AGE = 100;
const PRESS_HIGHLIGHT_DELAY_MS = 100;
const LONG_PRESS_DURATION_MS = 500;
const HAS_POINTER_EVENTS = 'PointerEvent' in window;
interface VelocitySample {
@@ -54,19 +54,19 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
{delay = LONG_PRESS_DURATION_MS, onLongPress, disabled, pressedClassName, onPressStateChange, ...rest},
forwardedRef,
) => {
const innerRef = React.useRef<HTMLDivElement | null>(null);
const longPressTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
const highlightTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
const pressStartPos = React.useRef<{x: number; y: number} | null>(null);
const pointerIdRef = React.useRef<number | null>(null);
const storedEvent = React.useRef<LongPressEvent | null>(null);
const velocitySamples = React.useRef<Array<VelocitySample>>([]);
const isPressIntent = React.useRef(false);
const [isPressed, setIsPressed] = React.useState(false);
const innerRef = useRef<HTMLDivElement | null>(null);
const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const highlightTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const pressStartPos = useRef<{x: number; y: number} | null>(null);
const pointerIdRef = useRef<number | null>(null);
const storedEvent = useRef<LongPressEvent | null>(null);
const velocitySamples = useRef<Array<VelocitySample>>([]);
const isPressIntent = useRef(false);
const [isPressed, setIsPressed] = useState(false);
React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLDivElement);
useImperativeHandle(forwardedRef, () => innerRef.current as HTMLDivElement);
const setPressed = React.useCallback(
const setPressed = useCallback(
(pressed: boolean) => {
setIsPressed(pressed);
onPressStateChange?.(pressed);
@@ -74,7 +74,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[onPressStateChange],
);
const calculateVelocity = React.useCallback((): number => {
const calculateVelocity = useCallback((): number => {
const samples = velocitySamples.current;
if (samples.length < MIN_VELOCITY_SAMPLES) return 0;
@@ -94,7 +94,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
return distance / dt;
}, []);
const clearTimer = React.useCallback(() => {
const clearTimer = useCallback(() => {
if (longPressTimer.current) {
clearTimeout(longPressTimer.current);
longPressTimer.current = null;
@@ -129,7 +129,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
...restWithoutPointer
} = rest;
const startLongPressTimer = React.useCallback(
const startLongPressTimer = useCallback(
(event: LongPressEvent, x: number, y: number, pointerId?: number, capturePointer = false) => {
if (disabled || !onLongPress) return;
clearTimer();
@@ -163,7 +163,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, delay, disabled, onLongPress, setPressed],
);
const handlePointerDown = React.useCallback(
const handlePointerDown = useCallback(
(event: React.PointerEvent<HTMLDivElement>) => {
userOnPointerDown?.(event);
if (disabled || !onLongPress || event.button !== 0) return;
@@ -173,7 +173,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[disabled, onLongPress, startLongPressTimer, userOnPointerDown],
);
const handlePointerMove = React.useCallback(
const handlePointerMove = useCallback(
(event: React.PointerEvent<HTMLDivElement>) => {
userOnPointerMove?.(event);
if (pointerIdRef.current !== event.pointerId) return;
@@ -201,7 +201,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, calculateVelocity, userOnPointerMove],
);
const handlePointerUp = React.useCallback(
const handlePointerUp = useCallback(
(event: React.PointerEvent<HTMLDivElement>) => {
if (pointerIdRef.current === event.pointerId) {
clearTimer();
@@ -211,7 +211,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, userOnPointerUp],
);
const handlePointerCancel = React.useCallback(
const handlePointerCancel = useCallback(
(event: React.PointerEvent<HTMLDivElement>) => {
if (pointerIdRef.current === event.pointerId) {
clearTimer();
@@ -221,7 +221,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, userOnPointerCancel],
);
const handleTouchStart = React.useCallback(
const handleTouchStart = useCallback(
(event: React.TouchEvent<HTMLDivElement>) => {
userOnTouchStart?.(event);
if (disabled || !onLongPress) return;
@@ -232,7 +232,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[disabled, onLongPress, startLongPressTimer, userOnTouchStart],
);
const handleTouchMove = React.useCallback(
const handleTouchMove = useCallback(
(event: React.TouchEvent<HTMLDivElement>) => {
userOnTouchMove?.(event);
if (!pressStartPos.current) return;
@@ -260,7 +260,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, calculateVelocity, userOnTouchMove],
);
const handleTouchEnd = React.useCallback(
const handleTouchEnd = useCallback(
(event: React.TouchEvent<HTMLDivElement>) => {
clearTimer();
userOnTouchEnd?.(event);
@@ -268,7 +268,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, userOnTouchEnd],
);
const handleTouchCancel = React.useCallback(
const handleTouchCancel = useCallback(
(event: React.TouchEvent<HTMLDivElement>) => {
clearTimer();
userOnTouchCancel?.(event);
@@ -276,7 +276,7 @@ export const LongPressable = React.forwardRef<HTMLDivElement, LongPressableProps
[clearTimer, userOnTouchCancel],
);
React.useEffect(() => {
useEffect(() => {
const handleScroll = () => {
if (isPressIntent.current) {
clearTimer();