ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use touches instead of dnd on mobile

Browse Source 
Browsers don't support drag events for touch devices.

To have a consistent implementation for desktop and mobile, we would need to use mousedown/touchstart, mouseup/touchend and mousemove/touchmove.

For now, this commit makes changing the order possible on touch devices with simple touches.
This commit is contained in:
ekzyis 2024-07-08 07:32:43 +02:00
parent 5d678ced23
commit 2051dd0e88
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
pages/settings/wallets/index.js
View File

@ -10,12 +10,28 @@ const WalletCard = dynamic(() => import('@/components/wallet-card'), { ssr: fals
export const getServerSideProps = getGetServerSideProps({ authRequired: true })
async function reorder (wallets, sourceIndex, targetIndex) {
const newOrder = [...wallets]
const [source] = newOrder.splice(sourceIndex, 1)
const newTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
const append = sourceIndex < targetIndex
newOrder.splice(newTargetIndex + (append ? 1 : 0), 0, source)
await Promise.all(
newOrder.map((w, i) =>
w.setPriority(i).catch(console.error)
)
)
}
export default function Wallet ({ ssrData }) {
const { wallets } = useWallets()
const [mounted, setMounted] = useState(false)
const [sourceIndex, setSourceIndex] = useState()
const [targetIndex, setTargetIndex] = useState()
const [sourceIndex, setSourceIndex] = useState(null)
const [targetIndex, setTargetIndex] = useState(null)
useEffect(() => {
// mounted is required since draggable is false
@ -43,19 +59,16 @@ export default function Wallet ({ ssrData }) {
if (sourceIndex === targetIndex) return
const newOrder = [...wallets]
await reorder(wallets, sourceIndex, targetIndex)
}
const [source] = newOrder.splice(sourceIndex, 1)
const newTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
const append = sourceIndex < targetIndex
newOrder.splice(newTargetIndex + (append ? 1 : 0), 0, source)
await Promise.all(
newOrder.map((w, i) =>
w.setPriority(i).catch(console.error)
)
)
const onTouchStart = (i) => async (e) => {
if (sourceIndex !== null) {
await reorder(wallets, sourceIndex, i)
setSourceIndex(null)
} else {
setSourceIndex(i)
}
}
return (
@ -91,12 +104,14 @@ export default function Wallet ({ ssrData }) {
})
.map((w, i) => {
const draggable = mounted && w.enabled
return (
<div
key={w.name}
draggable={draggable}
style={{ cursor: draggable ? 'move' : 'default' }}
onDragStart={draggable ? onDragStart(i) : undefined}
onTouchStart={draggable ? onTouchStart(i) : undefined}
onDragEnter={draggable ? onDragEnter(i) : undefined}
className={
!draggable