mango-ui-v3/hooks/useDrag.tsx

47 lines
1020 B
TypeScript

import React from 'react'
export default function useDrag() {
const [clicked, setClicked] = React.useState(false)
const [dragging, setDragging] = React.useState(false)
const position = React.useRef(0)
const dragStart = React.useCallback((ev: React.MouseEvent) => {
position.current = ev.clientX
setClicked(true)
}, [])
const dragStop = React.useCallback(
() =>
// NOTE: need some delay so item under cursor won't be clicked
window.requestAnimationFrame(() => {
setDragging(false)
setClicked(false)
}),
[]
)
const dragMove = (ev: React.MouseEvent, cb: (posDif: number) => void) => {
const newDiff = position.current - ev.clientX
const movedEnough = Math.abs(newDiff) > 5
if (clicked && movedEnough) {
setDragging(true)
}
if (dragging && movedEnough) {
position.current = ev.clientX
cb(newDiff)
}
}
return {
dragStart,
dragStop,
dragMove,
dragging,
position,
setDragging,
}
}