@wordpress/compose/build-module/hooks/use-dragging/index.mjs

WordPress higher-order components (HOCs).

// packages/compose/src/hooks/use-dragging/index.ts
import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
import useIsomorphicLayoutEffect from "../use-isomorphic-layout-effect/index.mjs";
function useDragging({
  onDragStart,
  onDragMove,
  onDragEnd
}) {
  const [isDragging, setIsDragging] = useState(false);
  const eventsRef = useRef({
    onDragStart,
    onDragMove,
    onDragEnd
  });
  useIsomorphicLayoutEffect(() => {
    eventsRef.current.onDragStart = onDragStart;
    eventsRef.current.onDragMove = onDragMove;
    eventsRef.current.onDragEnd = onDragEnd;
  }, [onDragStart, onDragMove, onDragEnd]);
  const onMouseMove = useCallback((event) => {
    eventsRef.current.onDragMove?.(event);
  }, []);
  const endDrag = useCallback(
    function endDrag2(event) {
      eventsRef.current.onDragEnd?.(event);
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", endDrag2);
      setIsDragging(false);
    },
    [onMouseMove]
  );
  const startDrag = useCallback(
    (event) => {
      eventsRef.current.onDragStart?.(event);
      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", endDrag);
      setIsDragging(true);
    },
    [onMouseMove, endDrag]
  );
  useEffect(() => {
    return () => {
      if (isDragging) {
        document.removeEventListener("mousemove", onMouseMove);
        document.removeEventListener("mouseup", endDrag);
      }
    };
  }, [isDragging, onMouseMove, endDrag]);
  return {
    startDrag,
    endDrag,
    isDragging
  };
}
export {
  useDragging as default
};
//# sourceMappingURL=index.mjs.map