Qortal/qortal-mobile
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-mobile.git synced 2025-06-06 16:36:58 +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 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 { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
import { KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'; import { KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities'; import { CSS } from '@dnd-kit/utilities';
@ -36,6 +36,7 @@ const SortableItem = ({ id, name, app, isDesktop }) => {
transform: CSS.Transform.toString(transform), transform: CSS.Transform.toString(transform),
transition, transition,
}} }}
onClick={()=> { onClick={()=> {
executeEvent("addTab", { executeEvent("addTab", {
data: app data: app
@ -129,18 +130,18 @@ export const SortablePinnedApps = ({ isDesktop, myWebsite, myApp, availableQapp
}); });
return pinned; return pinned;
}, [myApp, myWebsite, pinnedApps, availableQapps]); }, [myApp, myWebsite, pinnedApps, availableQapps]);
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { useSensor(MouseSensor, {
activationConstraint: { activationConstraint: {
distance: 10, // Set a distance to avoid triggering drag on small movements distance: 10,
}, },
}), }),
useSensor(TouchSensor, { useSensor(TouchSensor, {
activationConstraint: { 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, { useSensor(KeyboardSensor, {
@ -151,26 +152,42 @@ export const SortablePinnedApps = ({ isDesktop, myWebsite, myApp, availableQapp
const handleDragEnd = (event) => { const handleDragEnd = (event) => {
const { active, over } = event; const { active, over } = event;
if (!over) return; // Make sure the drop target exists if (!over) return;
if (active.id !== over.id) { if (active.id !== over.id) {
const oldIndex = transformPinnedApps.findIndex((item) => `${item?.service}-${item?.name}` === active.id); const oldIndex = transformPinnedApps.findIndex(
const newIndex = transformPinnedApps.findIndex((item) => `${item?.service}-${item?.name}` === over.id); (item) => `${item?.service}-${item?.name}` === active.id
);
const newIndex = transformPinnedApps.findIndex(
(item) => `${item?.service}-${item?.name}` === over.id
);
const newOrder = arrayMove(transformPinnedApps, oldIndex, newIndex); const newOrder = arrayMove(transformPinnedApps, oldIndex, newIndex);
setPinnedApps(newOrder); setPinnedApps(newOrder);
saveToLocalStorage('ext_saved_settings','sortablePinnedApps', newOrder) saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', newOrder);
setSettingsLocalLastUpdated(Date.now()) setSettingsLocalLastUpdated(Date.now());
} }
}; };
return ( return (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext items={transformPinnedApps.map((app) => `${app?.service}-${app?.name}`)}> <SortableContext items={transformPinnedApps.map((app) => `${app?.service}-${app?.name}`)}>
{transformPinnedApps.map((app) => ( {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> </SortableContext>
</DndContext> </DndContext>
); );
}; };

7
src/components/ContextMenuPinnedApps.tsx
View File

@ -55,12 +55,12 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
mouseX: clientX, mouseX: clientX,
mouseY: clientY, mouseY: clientY,
}); });
}, 500); }, 2000);
// Set a maximum hold duration (e.g., 1.5 seconds) // Set a maximum hold duration (e.g., 1.5 seconds)
maxHoldTimeout.current = setTimeout(() => { maxHoldTimeout.current = setTimeout(() => {
clearTimeout(longPressTimeout.current); clearTimeout(longPressTimeout.current);
}, 1500); }, 2500);
}; };
const handleTouchMove = (event) => { const handleTouchMove = (event) => {
@ -75,6 +75,8 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
if (movedEnough) { if (movedEnough) {
clearTimeout(longPressTimeout.current); clearTimeout(longPressTimeout.current);
clearTimeout(maxHoldTimeout.current); clearTimeout(maxHoldTimeout.current);
setMenuPosition(null);
} }
}; };
@ -104,7 +106,6 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
style={{ touchAction: 'none' }}
> >
{children} {children}
<CustomStyledMenu <CustomStyledMenu