From 85500bdf8c60d96b5463a8efea5f3e5a96a6e841 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Tue, 3 Dec 2024 19:18:05 +0200 Subject: [PATCH] fix scroll pinned apps --- src/components/Apps/SortablePinnedApps.tsx | 185 +++++++++++---------- src/components/ContextMenuPinnedApps.tsx | 7 +- 2 files changed, 105 insertions(+), 87 deletions(-) diff --git a/src/components/Apps/SortablePinnedApps.tsx b/src/components/Apps/SortablePinnedApps.tsx index 1a44a2f..7a0e3bd 100644 --- a/src/components/Apps/SortablePinnedApps.tsx +++ b/src/components/Apps/SortablePinnedApps.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; -import { DndContext, closestCenter } from '@dnd-kit/core'; +import { DndContext, MouseSensor, closestCenter } from '@dnd-kit/core'; import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable'; import { KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'; import { CSS } from '@dnd-kit/utilities'; @@ -36,6 +36,7 @@ const SortableItem = ({ id, name, app, isDesktop }) => { transform: CSS.Transform.toString(transform), transition, }} + onClick={()=> { executeEvent("addTab", { data: app @@ -83,94 +84,110 @@ const SortableItem = ({ id, name, app, isDesktop }) => { ); }; -export const SortablePinnedApps = ({ isDesktop, myWebsite, myApp, availableQapps = [] }) => { - const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom); - const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom); +export const SortablePinnedApps = ({ isDesktop, myWebsite, myApp, availableQapps = [] }) => { + const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom); + const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom); - const transformPinnedApps = useMemo(() => { + const transformPinnedApps = useMemo(() => { - // Clone the existing pinned apps list - let pinned = [...pinnedApps]; - - // Function to add or update `isMine` property - const addOrUpdateIsMine = (pinnedList, appToCheck) => { - if (!appToCheck) return pinnedList; - - const existingIndex = pinnedList.findIndex( - (item) => item?.service === appToCheck?.service && item?.name === appToCheck?.name - ); - - if (existingIndex !== -1) { - // If the app is already in the list, update it with `isMine: true` - pinnedList[existingIndex] = { ...pinnedList[existingIndex], isMine: true }; - } else { - // If not in the list, add it with `isMine: true` at the beginning - pinnedList.unshift({ ...appToCheck, isMine: true }); - } - - return pinnedList; - }; - - // Update or add `myWebsite` and `myApp` while preserving their positions - pinned = addOrUpdateIsMine(pinned, myWebsite); - pinned = addOrUpdateIsMine(pinned, myApp); - - // Update pinned list based on availableQapps - pinned = pinned.map((pin) => { - const findIndex = availableQapps?.findIndex( - (item) => item?.service === pin?.service && item?.name === pin?.name - ); - if (findIndex !== -1) return { - ...availableQapps[findIndex], - ...pin - } - - return pin; - }); - - return pinned; - }, [myApp, myWebsite, pinnedApps, availableQapps]); - - - const sensors = useSensors( - useSensor(PointerSensor, { - activationConstraint: { - distance: 10, // Set a distance to avoid triggering drag on small movements - }, - }), - useSensor(TouchSensor, { - activationConstraint: { - distance: 10, // Also apply to touch - }, - }), - useSensor(KeyboardSensor, { - coordinateGetter: sortableKeyboardCoordinates, - }) - ); + // Clone the existing pinned apps list + let pinned = [...pinnedApps]; - const handleDragEnd = (event) => { - const { active, over } = event; + // Function to add or update `isMine` property + const addOrUpdateIsMine = (pinnedList, appToCheck) => { + if (!appToCheck) return pinnedList; - if (!over) return; // Make sure the drop target exists - - if (active.id !== over.id) { - const oldIndex = transformPinnedApps.findIndex((item) => `${item?.service}-${item?.name}` === active.id); - const newIndex = transformPinnedApps.findIndex((item) => `${item?.service}-${item?.name}` === over.id); - - const newOrder = arrayMove(transformPinnedApps, oldIndex, newIndex); - setPinnedApps(newOrder); - saveToLocalStorage('ext_saved_settings','sortablePinnedApps', newOrder) - setSettingsLocalLastUpdated(Date.now()) + const existingIndex = pinnedList.findIndex( + (item) => item?.service === appToCheck?.service && item?.name === appToCheck?.name + ); + + if (existingIndex !== -1) { + // If the app is already in the list, update it with `isMine: true` + pinnedList[existingIndex] = { ...pinnedList[existingIndex], isMine: true }; + } else { + // If not in the list, add it with `isMine: true` at the beginning + pinnedList.unshift({ ...appToCheck, isMine: true }); } + + return pinnedList; }; - return ( - - `${app?.service}-${app?.name}`)}> - {transformPinnedApps.map((app) => ( - - ))} - - - ); + + // Update or add `myWebsite` and `myApp` while preserving their positions + pinned = addOrUpdateIsMine(pinned, myWebsite); + pinned = addOrUpdateIsMine(pinned, myApp); + + // Update pinned list based on availableQapps + pinned = pinned.map((pin) => { + const findIndex = availableQapps?.findIndex( + (item) => item?.service === pin?.service && item?.name === pin?.name + ); + if (findIndex !== -1) return { + ...availableQapps[findIndex], + ...pin + } + + return pin; + }); + + return pinned; +}, [myApp, myWebsite, pinnedApps, availableQapps]); + + const sensors = useSensors( + useSensor(MouseSensor, { + activationConstraint: { + distance: 10, + }, + }), + useSensor(TouchSensor, { + activationConstraint: { + delay: 500, // Delay in milliseconds before drag activates + tolerance: 5, // Movement tolerance in pixels during the delay + }, + }), + useSensor(KeyboardSensor, { + coordinateGetter: sortableKeyboardCoordinates, + }) + ); + + const handleDragEnd = (event) => { + const { active, over } = event; + + if (!over) return; + + if (active.id !== over.id) { + const oldIndex = transformPinnedApps.findIndex( + (item) => `${item?.service}-${item?.name}` === active.id + ); + const newIndex = transformPinnedApps.findIndex( + (item) => `${item?.service}-${item?.name}` === over.id + ); + + const newOrder = arrayMove(transformPinnedApps, oldIndex, newIndex); + setPinnedApps(newOrder); + saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', newOrder); + setSettingsLocalLastUpdated(Date.now()); + } + }; + + return ( + + `${app?.service}-${app?.name}`)}> + {transformPinnedApps.map((app) => ( + + ))} + + + ); }; + diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx index be0ae46..7c00dd2 100644 --- a/src/components/ContextMenuPinnedApps.tsx +++ b/src/components/ContextMenuPinnedApps.tsx @@ -55,12 +55,12 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => { mouseX: clientX, mouseY: clientY, }); - }, 500); + }, 2000); // Set a maximum hold duration (e.g., 1.5 seconds) maxHoldTimeout.current = setTimeout(() => { clearTimeout(longPressTimeout.current); - }, 1500); + }, 2500); }; const handleTouchMove = (event) => { @@ -75,6 +75,8 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => { if (movedEnough) { clearTimeout(longPressTimeout.current); clearTimeout(maxHoldTimeout.current); + setMenuPosition(null); + } }; @@ -104,7 +106,6 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => { onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} - style={{ touchAction: 'none' }} > {children}