@os-design/use-drag 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-drag",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,14 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,11 +36,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-event": "^1.0.13",
-    "@os-design/use-long-press": "^1.0.9"
+    "@os-design/use-event": "^1.0.15",
+    "@os-design/use-long-press": "^1.0.11"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "e5d8409760608145d2c738aa5789d0465ae5416f"
 }

package/src/index.ts

@@ -0,0 +1,162 @@
+import useEvent from '@os-design/use-event';
+import useLongPress from '@os-design/use-long-press';
+import {
+  MouseEventHandler,
+  TouchEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export type OnDragStart = (position: Position, startPosition: Position) => void;
+export type OnDragMove = (position: Position) => void;
+export type OnDragEnd = () => void;
+
+export interface UseDragProps {
+  minMouseDistPx?: number;
+  longPressMs?: number;
+  onDragStart?: OnDragStart;
+  onDragMove?: OnDragMove;
+  onDragEnd?: OnDragEnd;
+}
+
+const userSelection = {
+  disable: () => {
+    document.body.style.userSelect = 'none';
+  },
+  enable: () => {
+    document.body.style.userSelect = '';
+  },
+};
+
+export interface DragHandlers {
+  onMouseDown: MouseEventHandler;
+  onTouchStart: TouchEventHandler;
+}
+
+const useDrag = (props: UseDragProps): DragHandlers => {
+  const { minMouseDistPx = 10, longPressMs = 500 } = props;
+
+  const isDraggingRef = useRef(false);
+  const startMousePosRef = useRef<Position | null>(null);
+  const minMouseDistPxRef = useRef(minMouseDistPx);
+  const handlersRef = useRef({
+    onDragStart: props.onDragStart || (() => {}),
+    onDragMove: props.onDragMove || (() => {}),
+    onDragEnd: props.onDragEnd || (() => {}),
+  });
+
+  useEffect(() => {
+    minMouseDistPxRef.current = minMouseDistPx;
+  }, [minMouseDistPx]);
+
+  useEffect(() => {
+    handlersRef.current = {
+      onDragStart: props.onDragStart || (() => {}),
+      onDragMove: props.onDragMove || (() => {}),
+      onDragEnd: props.onDragEnd || (() => {}),
+    };
+  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);
+
+  const dragStartHandler = useCallback(
+    (position: Position, startPosition: Position) => {
+      const { onDragStart } = handlersRef.current;
+      onDragStart(position, startPosition);
+      isDraggingRef.current = true;
+      startMousePosRef.current = null;
+    },
+    []
+  );
+
+  const dragEndHandler = useCallback(() => {
+    const { onDragEnd } = handlersRef.current;
+    if (isDraggingRef.current) onDragEnd();
+    isDraggingRef.current = false;
+    startMousePosRef.current = null;
+    userSelection.enable();
+  }, []);
+
+  const onMouseDown = useCallback<MouseEventHandler>((e) => {
+    if (e.button !== 0) return; // Allow only the left mouse button
+    startMousePosRef.current = { x: e.clientX, y: e.clientY };
+    userSelection.disable();
+  }, []);
+
+  const onMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const pos = { x: e.clientX, y: e.clientY };
+      if (isDraggingRef.current) {
+        const { onDragMove } = handlersRef.current;
+        onDragMove(pos);
+        return;
+      }
+      const startPos = startMousePosRef.current;
+      if (!startPos) return;
+      const diffX = Math.abs(pos.x - startPos.x);
+      const diffY = Math.abs(pos.y - startPos.y);
+      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+      if (diff >= minMouseDistPxRef.current) {
+        dragStartHandler(pos, startPos);
+      }
+    },
+    [dragStartHandler]
+  );
+
+  const onMouseUp = useCallback(() => {
+    dragEndHandler();
+  }, [dragEndHandler]);
+
+  const longPressHandler = useCallback<TouchEventHandler>(
+    (e) => {
+      if (e.touches.length === 0) return;
+      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+      dragStartHandler(pos, pos);
+    },
+    [dragStartHandler]
+  );
+
+  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(
+    longPressHandler,
+    longPressMs
+  );
+
+  const touchStartHandler = useCallback<TouchEventHandler>(
+    (e) => {
+      onTouchStart(e);
+      userSelection.disable();
+    },
+    [onTouchStart]
+  );
+
+  const touchMoveHandler = useCallback(
+    (e: TouchEvent) => {
+      onTouchMove();
+      if (!isDraggingRef.current || e.touches.length === 0) return;
+      const { onDragMove } = handlersRef.current;
+      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+    },
+    [onTouchMove]
+  );
+
+  const touchEndHandler = useCallback(() => {
+    onTouchEnd();
+    dragEndHandler();
+  }, [dragEndHandler, onTouchEnd]);
+
+  useEvent(document, 'mousemove', onMouseMove);
+  useEvent(document, 'mouseup', onMouseUp);
+  useEvent(document, 'touchmove', touchMoveHandler);
+  useEvent(document, 'touchend', touchEndHandler);
+
+  return {
+    onMouseDown,
+    onTouchStart: touchStartHandler,
+  };
+};
+
+export default useDrag;