Qortal/qortal-mobile
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-mobile.git synced 2025-06-05 16:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix scroll pinned apps

Browse Source
This commit is contained in:
PhilReact 2024-12-03 19:18:05 +02:00
parent 446807cbd8
commit 85500bdf8c
2 changed files with 105 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Apps/SortablePinnedApps.tsx
View File

@ -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
@ -129,18 +130,18 @@ export const SortablePinnedApps = ({ isDesktop, myWebsite, myApp, availableQapp
});
return pinned;
}, [myApp, myWebsite, pinnedApps, availableQapps]);
}, [myApp, myWebsite, pinnedApps, availableQapps]);
const sensors = useSensors(
useSensor(PointerSensor, {
useSensor(MouseSensor, {
activationConstraint: {
distance: 10, // Set a distance to avoid triggering drag on small movements
distance: 10,
},
}),
useSensor(TouchSensor, {
activationConstraint: {
distance: 10, // Also apply to touch
delay: 500, // Delay in milliseconds before drag activates
tolerance: 5, // Movement tolerance in pixels during the delay
},
}),
useSensor(KeyboardSensor, {
@ -151,26 +152,42 @@ export const SortablePinnedApps = ({ isDesktop, myWebsite, myApp, availableQapp
const handleDragEnd = (event) => {
const { active, over } = event;
if (!over) return; // Make sure the drop target exists
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 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())
saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', newOrder);
setSettingsLocalLastUpdated(Date.now());
}
};
return (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext items={transformPinnedApps.map((app) => `${app?.service}-${app?.name}`)}>
{transformPinnedApps.map((app) => (
<SortableItem isDesktop={isDesktop} key={`${app?.service}-${app?.name}`} id={`${app?.service}-${app?.name}`} name={app?.name} app={app} />
<SortableItem
isDesktop={isDesktop}
key={`${app?.service}-${app?.name}`}
id={`${app?.service}-${app?.name}`}
name={app?.name}
app={app}
/>
))}
</SortableContext>
</DndContext>
);
};

7
src/components/ContextMenuPinnedApps.tsx
View File

@ -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}
<CustomStyledMenu