@os-design/use-drag 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/index.js CHANGED
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _useLongPress2 = _interopRequireDefault(require("@os-design/use-long-press"));
11
-
12
9
  var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
13
-
14
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
-
16
11
  var userSelection = {
17
12
  disable: function disable() {
18
13
  document.body.style.userSelect = 'none';
@@ -21,12 +16,11 @@ var userSelection = {
21
16
  document.body.style.userSelect = '';
22
17
  }
23
18
  };
24
-
25
19
  var useDrag = function useDrag(props) {
26
20
  var _props$minMouseDistPx = props.minMouseDistPx,
27
- minMouseDistPx = _props$minMouseDistPx === void 0 ? 10 : _props$minMouseDistPx,
28
- _props$longPressMs = props.longPressMs,
29
- longPressMs = _props$longPressMs === void 0 ? 500 : _props$longPressMs;
21
+ minMouseDistPx = _props$minMouseDistPx === void 0 ? 10 : _props$minMouseDistPx,
22
+ _props$longPressMs = props.longPressMs,
23
+ longPressMs = _props$longPressMs === void 0 ? 500 : _props$longPressMs;
30
24
  var isDraggingRef = (0, _react.useRef)(false);
31
25
  var startMousePosRef = (0, _react.useRef)(null);
32
26
  var minMouseDistPxRef = (0, _react.useRef)(minMouseDistPx);
@@ -60,7 +54,6 @@ var useDrag = function useDrag(props) {
60
54
  }, []);
61
55
  var onMouseDown = (0, _react.useCallback)(function (e) {
62
56
  if (e.button !== 0) return; // Allow only the left mouse button
63
-
64
57
  startMousePosRef.current = {
65
58
  x: e.clientX,
66
59
  y: e.clientY
@@ -72,19 +65,16 @@ var useDrag = function useDrag(props) {
72
65
  x: e.clientX,
73
66
  y: e.clientY
74
67
  };
75
-
76
68
  if (isDraggingRef.current) {
77
69
  var onDragMove = handlersRef.current.onDragMove;
78
70
  onDragMove(pos);
79
71
  return;
80
72
  }
81
-
82
73
  var startPos = startMousePosRef.current;
83
74
  if (!startPos) return;
84
75
  var diffX = Math.abs(pos.x - startPos.x);
85
76
  var diffY = Math.abs(pos.y - startPos.y);
86
77
  var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
87
-
88
78
  if (diff >= minMouseDistPxRef.current) {
89
79
  dragStartHandler(pos, startPos);
90
80
  }
@@ -100,12 +90,10 @@ var useDrag = function useDrag(props) {
100
90
  };
101
91
  dragStartHandler(pos, pos);
102
92
  }, [dragStartHandler]);
103
-
104
93
  var _useLongPress = (0, _useLongPress2["default"])(longPressHandler, longPressMs),
105
- onTouchStart = _useLongPress.onTouchStart,
106
- onTouchMove = _useLongPress.onTouchMove,
107
- onTouchEnd = _useLongPress.onTouchEnd;
108
-
94
+ onTouchStart = _useLongPress.onTouchStart,
95
+ onTouchMove = _useLongPress.onTouchMove,
96
+ onTouchEnd = _useLongPress.onTouchEnd;
109
97
  var touchStartHandler = (0, _react.useCallback)(function (e) {
110
98
  onTouchStart(e);
111
99
  userSelection.disable();
@@ -132,7 +120,6 @@ var useDrag = function useDrag(props) {
132
120
  onTouchStart: touchStartHandler
133
121
  };
134
122
  };
135
-
136
123
  var _default = useDrag;
137
124
  exports["default"] = _default;
138
125
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","useRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","useEffect","current","dragStartHandler","useCallback","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","useLongPress","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler","useEvent"],"sources":["../../src/index.ts"],"sourcesContent":["import {\n MouseEventHandler,\n TouchEventHandler,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport useLongPress from '@os-design/use-long-press';\nimport useEvent from '@os-design/use-event';\n\nexport interface Position {\n x: number;\n y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n minMouseDistPx?: number;\n longPressMs?: number;\n onDragStart?: OnDragStart;\n onDragMove?: OnDragMove;\n onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n disable: () => {\n document.body.style.userSelect = 'none';\n },\n enable: () => {\n document.body.style.userSelect = '';\n },\n};\n\nexport interface DragHandlers {\n onMouseDown: MouseEventHandler;\n onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n const isDraggingRef = useRef(false);\n const startMousePosRef = useRef<Position | null>(null);\n const minMouseDistPxRef = useRef(minMouseDistPx);\n const handlersRef = useRef({\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n });\n\n useEffect(() => {\n minMouseDistPxRef.current = minMouseDistPx;\n }, [minMouseDistPx]);\n\n useEffect(() => {\n handlersRef.current = {\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n };\n }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n const dragStartHandler = useCallback(\n (position: Position, startPosition: Position) => {\n const { onDragStart } = handlersRef.current;\n onDragStart(position, startPosition);\n isDraggingRef.current = true;\n startMousePosRef.current = null;\n },\n []\n );\n\n const dragEndHandler = useCallback(() => {\n const { onDragEnd } = handlersRef.current;\n if (isDraggingRef.current) onDragEnd();\n isDraggingRef.current = false;\n startMousePosRef.current = null;\n userSelection.enable();\n }, []);\n\n const onMouseDown = useCallback<MouseEventHandler>((e) => {\n if (e.button !== 0) return; // Allow only the left mouse button\n startMousePosRef.current = { x: e.clientX, y: e.clientY };\n userSelection.disable();\n }, []);\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n const pos = { x: e.clientX, y: e.clientY };\n if (isDraggingRef.current) {\n const { onDragMove } = handlersRef.current;\n onDragMove(pos);\n return;\n }\n const startPos = startMousePosRef.current;\n if (!startPos) return;\n const diffX = Math.abs(pos.x - startPos.x);\n const diffY = Math.abs(pos.y - startPos.y);\n const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n if (diff >= minMouseDistPxRef.current) {\n dragStartHandler(pos, startPos);\n }\n },\n [dragStartHandler]\n );\n\n const onMouseUp = useCallback(() => {\n dragEndHandler();\n }, [dragEndHandler]);\n\n const longPressHandler = useCallback<TouchEventHandler>(\n (e) => {\n if (e.touches.length === 0) return;\n const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n dragStartHandler(pos, pos);\n },\n [dragStartHandler]\n );\n\n const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n longPressHandler,\n longPressMs\n );\n\n const touchStartHandler = useCallback<TouchEventHandler>(\n (e) => {\n onTouchStart(e);\n userSelection.disable();\n },\n [onTouchStart]\n );\n\n const touchMoveHandler = useCallback(\n (e: TouchEvent) => {\n onTouchMove();\n if (!isDraggingRef.current || e.touches.length === 0) return;\n const { onDragMove } = handlersRef.current;\n onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n },\n [onTouchMove]\n );\n\n const touchEndHandler = useCallback(() => {\n onTouchEnd();\n dragEndHandler();\n }, [dragEndHandler, onTouchEnd]);\n\n useEvent(document, 'mousemove', onMouseMove);\n useEvent(document, 'mouseup', onMouseUp);\n useEvent(document, 'touchmove', touchMoveHandler);\n useEvent(document, 'touchend', touchEndHandler);\n\n return {\n onMouseDown,\n onTouchStart: touchStartHandler,\n };\n};\n\nexport default useDrag;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","useRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","useEffect","current","dragStartHandler","useCallback","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","useLongPress","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler","useEvent"],"sources":["../../src/index.ts"],"sourcesContent":["import {\n MouseEventHandler,\n TouchEventHandler,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport useLongPress from '@os-design/use-long-press';\nimport useEvent from '@os-design/use-event';\n\nexport interface Position {\n x: number;\n y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n minMouseDistPx?: number;\n longPressMs?: number;\n onDragStart?: OnDragStart;\n onDragMove?: OnDragMove;\n onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n disable: () => {\n document.body.style.userSelect = 'none';\n },\n enable: () => {\n document.body.style.userSelect = '';\n },\n};\n\nexport interface DragHandlers {\n onMouseDown: MouseEventHandler;\n onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n const isDraggingRef = useRef(false);\n const startMousePosRef = useRef<Position | null>(null);\n const minMouseDistPxRef = useRef(minMouseDistPx);\n const handlersRef = useRef({\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n });\n\n useEffect(() => {\n minMouseDistPxRef.current = minMouseDistPx;\n }, [minMouseDistPx]);\n\n useEffect(() => {\n handlersRef.current = {\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n };\n }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n const dragStartHandler = useCallback(\n (position: Position, startPosition: Position) => {\n const { onDragStart } = handlersRef.current;\n onDragStart(position, startPosition);\n isDraggingRef.current = true;\n startMousePosRef.current = null;\n },\n []\n );\n\n const dragEndHandler = useCallback(() => {\n const { onDragEnd } = handlersRef.current;\n if (isDraggingRef.current) onDragEnd();\n isDraggingRef.current = false;\n startMousePosRef.current = null;\n userSelection.enable();\n }, []);\n\n const onMouseDown = useCallback<MouseEventHandler>((e) => {\n if (e.button !== 0) return; // Allow only the left mouse button\n startMousePosRef.current = { x: e.clientX, y: e.clientY };\n userSelection.disable();\n }, []);\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n const pos = { x: e.clientX, y: e.clientY };\n if (isDraggingRef.current) {\n const { onDragMove } = handlersRef.current;\n onDragMove(pos);\n return;\n }\n const startPos = startMousePosRef.current;\n if (!startPos) return;\n const diffX = Math.abs(pos.x - startPos.x);\n const diffY = Math.abs(pos.y - startPos.y);\n const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n if (diff >= minMouseDistPxRef.current) {\n dragStartHandler(pos, startPos);\n }\n },\n [dragStartHandler]\n );\n\n const onMouseUp = useCallback(() => {\n dragEndHandler();\n }, [dragEndHandler]);\n\n const longPressHandler = useCallback<TouchEventHandler>(\n (e) => {\n if (e.touches.length === 0) return;\n const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n dragStartHandler(pos, pos);\n },\n [dragStartHandler]\n );\n\n const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n longPressHandler,\n longPressMs\n );\n\n const touchStartHandler = useCallback<TouchEventHandler>(\n (e) => {\n onTouchStart(e);\n userSelection.disable();\n },\n [onTouchStart]\n );\n\n const touchMoveHandler = useCallback(\n (e: TouchEvent) => {\n onTouchMove();\n if (!isDraggingRef.current || e.touches.length === 0) return;\n const { onDragMove } = handlersRef.current;\n onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n },\n [onTouchMove]\n );\n\n const touchEndHandler = useCallback(() => {\n onTouchEnd();\n dragEndHandler();\n }, [dragEndHandler, onTouchEnd]);\n\n useEvent(document, 'mousemove', onMouseMove);\n useEvent(document, 'mouseup', onMouseUp);\n useEvent(document, 'touchmove', touchMoveHandler);\n useEvent(document, 'touchend', touchEndHandler);\n\n return {\n onMouseDown,\n onTouchStart: touchStartHandler,\n };\n};\n\nexport default useDrag;\n"],"mappings":"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"}
package/dist/esm/index.js CHANGED
@@ -9,7 +9,6 @@ const userSelection = {
9
9
  document.body.style.userSelect = '';
10
10
  }
11
11
  };
12
-
13
12
  const useDrag = props => {
14
13
  const {
15
14
  minMouseDistPx = 10,
@@ -52,7 +51,6 @@ const useDrag = props => {
52
51
  }, []);
53
52
  const onMouseDown = useCallback(e => {
54
53
  if (e.button !== 0) return; // Allow only the left mouse button
55
-
56
54
  startMousePosRef.current = {
57
55
  x: e.clientX,
58
56
  y: e.clientY
@@ -64,7 +62,6 @@ const useDrag = props => {
64
62
  x: e.clientX,
65
63
  y: e.clientY
66
64
  };
67
-
68
65
  if (isDraggingRef.current) {
69
66
  const {
70
67
  onDragMove
@@ -72,13 +69,11 @@ const useDrag = props => {
72
69
  onDragMove(pos);
73
70
  return;
74
71
  }
75
-
76
72
  const startPos = startMousePosRef.current;
77
73
  if (!startPos) return;
78
74
  const diffX = Math.abs(pos.x - startPos.x);
79
75
  const diffY = Math.abs(pos.y - startPos.y);
80
76
  const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
81
-
82
77
  if (diff >= minMouseDistPxRef.current) {
83
78
  dragStartHandler(pos, startPos);
84
79
  }
@@ -127,6 +122,5 @@ const useDrag = props => {
127
122
  onTouchStart: touchStartHandler
128
123
  };
129
124
  };
130
-
131
125
  export default useDrag;
132
126
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useLongPress","useEvent","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","current","dragStartHandler","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler"],"sources":["../../src/index.ts"],"sourcesContent":["import {\n MouseEventHandler,\n TouchEventHandler,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport useLongPress from '@os-design/use-long-press';\nimport useEvent from '@os-design/use-event';\n\nexport interface Position {\n x: number;\n y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n minMouseDistPx?: number;\n longPressMs?: number;\n onDragStart?: OnDragStart;\n onDragMove?: OnDragMove;\n onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n disable: () => {\n document.body.style.userSelect = 'none';\n },\n enable: () => {\n document.body.style.userSelect = '';\n },\n};\n\nexport interface DragHandlers {\n onMouseDown: MouseEventHandler;\n onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n const isDraggingRef = useRef(false);\n const startMousePosRef = useRef<Position | null>(null);\n const minMouseDistPxRef = useRef(minMouseDistPx);\n const handlersRef = useRef({\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n });\n\n useEffect(() => {\n minMouseDistPxRef.current = minMouseDistPx;\n }, [minMouseDistPx]);\n\n useEffect(() => {\n handlersRef.current = {\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n };\n }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n const dragStartHandler = useCallback(\n (position: Position, startPosition: Position) => {\n const { onDragStart } = handlersRef.current;\n onDragStart(position, startPosition);\n isDraggingRef.current = true;\n startMousePosRef.current = null;\n },\n []\n );\n\n const dragEndHandler = useCallback(() => {\n const { onDragEnd } = handlersRef.current;\n if (isDraggingRef.current) onDragEnd();\n isDraggingRef.current = false;\n startMousePosRef.current = null;\n userSelection.enable();\n }, []);\n\n const onMouseDown = useCallback<MouseEventHandler>((e) => {\n if (e.button !== 0) return; // Allow only the left mouse button\n startMousePosRef.current = { x: e.clientX, y: e.clientY };\n userSelection.disable();\n }, []);\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n const pos = { x: e.clientX, y: e.clientY };\n if (isDraggingRef.current) {\n const { onDragMove } = handlersRef.current;\n onDragMove(pos);\n return;\n }\n const startPos = startMousePosRef.current;\n if (!startPos) return;\n const diffX = Math.abs(pos.x - startPos.x);\n const diffY = Math.abs(pos.y - startPos.y);\n const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n if (diff >= minMouseDistPxRef.current) {\n dragStartHandler(pos, startPos);\n }\n },\n [dragStartHandler]\n );\n\n const onMouseUp = useCallback(() => {\n dragEndHandler();\n }, [dragEndHandler]);\n\n const longPressHandler = useCallback<TouchEventHandler>(\n (e) => {\n if (e.touches.length === 0) return;\n const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n dragStartHandler(pos, pos);\n },\n [dragStartHandler]\n );\n\n const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n longPressHandler,\n longPressMs\n );\n\n const touchStartHandler = useCallback<TouchEventHandler>(\n (e) => {\n onTouchStart(e);\n userSelection.disable();\n },\n [onTouchStart]\n );\n\n const touchMoveHandler = useCallback(\n (e: TouchEvent) => {\n onTouchMove();\n if (!isDraggingRef.current || e.touches.length === 0) return;\n const { onDragMove } = handlersRef.current;\n onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n },\n [onTouchMove]\n );\n\n const touchEndHandler = useCallback(() => {\n onTouchEnd();\n dragEndHandler();\n }, [dragEndHandler, onTouchEnd]);\n\n useEvent(document, 'mousemove', onMouseMove);\n useEvent(document, 'mouseup', onMouseUp);\n useEvent(document, 'touchmove', touchMoveHandler);\n useEvent(document, 'touchend', touchEndHandler);\n\n return {\n onMouseDown,\n onTouchStart: touchStartHandler,\n };\n};\n\nexport default useDrag;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useLongPress","useEvent","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","current","dragStartHandler","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler"],"sources":["../../src/index.ts"],"sourcesContent":["import {\n MouseEventHandler,\n TouchEventHandler,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport useLongPress from '@os-design/use-long-press';\nimport useEvent from '@os-design/use-event';\n\nexport interface Position {\n x: number;\n y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n minMouseDistPx?: number;\n longPressMs?: number;\n onDragStart?: OnDragStart;\n onDragMove?: OnDragMove;\n onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n disable: () => {\n document.body.style.userSelect = 'none';\n },\n enable: () => {\n document.body.style.userSelect = '';\n },\n};\n\nexport interface DragHandlers {\n onMouseDown: MouseEventHandler;\n onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n const isDraggingRef = useRef(false);\n const startMousePosRef = useRef<Position | null>(null);\n const minMouseDistPxRef = useRef(minMouseDistPx);\n const handlersRef = useRef({\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n });\n\n useEffect(() => {\n minMouseDistPxRef.current = minMouseDistPx;\n }, [minMouseDistPx]);\n\n useEffect(() => {\n handlersRef.current = {\n onDragStart: props.onDragStart || (() => {}),\n onDragMove: props.onDragMove || (() => {}),\n onDragEnd: props.onDragEnd || (() => {}),\n };\n }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n const dragStartHandler = useCallback(\n (position: Position, startPosition: Position) => {\n const { onDragStart } = handlersRef.current;\n onDragStart(position, startPosition);\n isDraggingRef.current = true;\n startMousePosRef.current = null;\n },\n []\n );\n\n const dragEndHandler = useCallback(() => {\n const { onDragEnd } = handlersRef.current;\n if (isDraggingRef.current) onDragEnd();\n isDraggingRef.current = false;\n startMousePosRef.current = null;\n userSelection.enable();\n }, []);\n\n const onMouseDown = useCallback<MouseEventHandler>((e) => {\n if (e.button !== 0) return; // Allow only the left mouse button\n startMousePosRef.current = { x: e.clientX, y: e.clientY };\n userSelection.disable();\n }, []);\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n const pos = { x: e.clientX, y: e.clientY };\n if (isDraggingRef.current) {\n const { onDragMove } = handlersRef.current;\n onDragMove(pos);\n return;\n }\n const startPos = startMousePosRef.current;\n if (!startPos) return;\n const diffX = Math.abs(pos.x - startPos.x);\n const diffY = Math.abs(pos.y - startPos.y);\n const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n if (diff >= minMouseDistPxRef.current) {\n dragStartHandler(pos, startPos);\n }\n },\n [dragStartHandler]\n );\n\n const onMouseUp = useCallback(() => {\n dragEndHandler();\n }, [dragEndHandler]);\n\n const longPressHandler = useCallback<TouchEventHandler>(\n (e) => {\n if (e.touches.length === 0) return;\n const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n dragStartHandler(pos, pos);\n },\n [dragStartHandler]\n );\n\n const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n longPressHandler,\n longPressMs\n );\n\n const touchStartHandler = useCallback<TouchEventHandler>(\n (e) => {\n onTouchStart(e);\n userSelection.disable();\n },\n [onTouchStart]\n );\n\n const touchMoveHandler = useCallback(\n (e: TouchEvent) => {\n onTouchMove();\n if (!isDraggingRef.current || e.touches.length === 0) return;\n const { onDragMove } = handlersRef.current;\n onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n },\n [onTouchMove]\n );\n\n const touchEndHandler = useCallback(() => {\n onTouchEnd();\n dragEndHandler();\n }, [dragEndHandler, onTouchEnd]);\n\n useEvent(document, 'mousemove', onMouseMove);\n useEvent(document, 'mouseup', onMouseUp);\n useEvent(document, 'touchmove', touchMoveHandler);\n useEvent(document, 'touchend', touchEndHandler);\n\n return {\n onMouseDown,\n onTouchStart: touchStartHandler,\n };\n};\n\nexport default useDrag;\n"],"mappings":"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"}
@@ -3,9 +3,9 @@ export interface Position {
3
3
  x: number;
4
4
  y: number;
5
5
  }
6
- export declare type OnDragStart = (position: Position, startPosition: Position) => void;
7
- export declare type OnDragMove = (position: Position) => void;
8
- export declare type OnDragEnd = () => void;
6
+ export type OnDragStart = (position: Position, startPosition: Position) => void;
7
+ export type OnDragMove = (position: Position) => void;
8
+ export type OnDragEnd = () => void;
9
9
  export interface UseDragProps {
10
10
  minMouseDistPx?: number;
11
11
  longPressMs?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,WAAW,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;AAChF,oBAAY,UAAU,GAAG,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;AACtD,oBAAY,SAAS,GAAG,MAAM,IAAI,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAWD,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,QAAA,MAAM,OAAO,UAAW,YAAY,KAAG,YAsHtC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;AAChF,MAAM,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAWD,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,QAAA,MAAM,OAAO,UAAW,YAAY,KAAG,YAsHtC,CAAC;AAEF,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/use-drag",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -29,11 +29,11 @@
29
29
  "access": "public"
30
30
  },
31
31
  "dependencies": {
32
- "@os-design/use-event": "^1.0.10",
33
- "@os-design/use-long-press": "^1.0.5"
32
+ "@os-design/use-event": "^1.0.12",
33
+ "@os-design/use-long-press": "^1.0.7"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18"
37
37
  },
38
- "gitHead": "174987fc6c9d55db201be10abde3a4cf5a790573"
38
+ "gitHead": "f880a39dbb61019eeb6f3b1bb083678d47a5e348"
39
39
  }