@guruhotel/aura-hooks/esm/use-move/use-move.js

🪝 Hooks library designed by the Guruhotel team for Aura UI

import{useEffect as e,useState as t,useRef as n}from"react";import{clamp as r}from"../utils";export const clampUseMovePosition=e=>({x:r(e.x,0,1),y:r(e.y,0,1)});export function useMove(o,c,u="ltr"){const i=n(),s=n(!1),m=n(!1),d=n(0),[v,a]=t(!1);return e((()=>{s.current=!0}),[]),e((()=>{var e,t;const n=({x:e,y:t})=>{cancelAnimationFrame(d.current),d.current=requestAnimationFrame((()=>{if(s.current&&i.current){i.current.style.userSelect="none";const n=i.current.getBoundingClientRect();if(n.width&&n.height){const c=r((e-n.left)/n.width,0,1);o({x:"ltr"===u?c:1-c,y:r((t-n.top)/n.height,0,1)})}}}))},v=()=>{!m.current&&s.current&&(m.current=!0,"function"==typeof(null==c?void 0:c.onScrubStart)&&c.onScrubStart(),a(!0),document.addEventListener("mousemove",E),document.addEventListener("mouseup",l),document.addEventListener("touchmove",p),document.addEventListener("touchend",l))},l=()=>{m.current&&s.current&&(m.current=!1,a(!1),document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",l),document.removeEventListener("touchmove",p),document.removeEventListener("touchend",l),setTimeout((()=>{"function"==typeof(null==c?void 0:c.onScrubEnd)&&c.onScrubEnd()}),0))},h=e=>{v(),E(e)},E=e=>n({x:e.clientX,y:e.clientY}),f=e=>{e.cancelable&&e.preventDefault(),v(),p(e)},p=e=>{e.cancelable&&e.preventDefault(),n({x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY})};return null==(e=i.current)||e.addEventListener("mousedown",h),null==(t=i.current)||t.addEventListener("touchstart",f,{passive:!1}),()=>{i.current&&(i.current.removeEventListener("mousedown",h),i.current.removeEventListener("touchstart",f))}}),[u,o]),{ref:i,active:v}}