@aiszlab/relax 1.5.8 → 1.5.9
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/hooks/use-drag.cjs +45 -11
- package/dist/hooks/use-drag.d.ts +6 -7
- package/dist/hooks/use-drag.mjs +45 -11
- package/dist/hooks/use-draggable.cjs +44 -0
- package/dist/hooks/use-draggable.d.ts +1 -0
- package/dist/hooks/use-draggable.mjs +42 -0
- package/dist/hooks/use-update-state.cjs +4 -4
- package/dist/hooks/use-update-state.mjs +4 -4
- package/dist/index.cjs +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +1 -0
- package/package.json +2 -2
package/dist/hooks/use-drag.cjs
CHANGED
|
@@ -5,6 +5,34 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
|
5
5
|
var useUpdateState = require('./use-update-state.cjs');
|
|
6
6
|
var useEvent = require('./use-event.cjs');
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* @description convert any event to position
|
|
10
|
+
*/
|
|
11
|
+
var toPosition = function toPosition(event) {
|
|
12
|
+
if (event instanceof MouseEvent) {
|
|
13
|
+
return {
|
|
14
|
+
x: event.pageX,
|
|
15
|
+
y: event.pageY,
|
|
16
|
+
offsetX: event.offsetX,
|
|
17
|
+
offsetY: event.offsetY
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
if (event instanceof TouchEvent && event.touches.length === 1) {
|
|
21
|
+
var _event$touches$item$p, _event$touches$item, _event$touches$item$p2, _event$touches$item2;
|
|
22
|
+
return {
|
|
23
|
+
x: (_event$touches$item$p = (_event$touches$item = event.touches.item(0)) === null || _event$touches$item === void 0 ? void 0 : _event$touches$item.pageX) !== null && _event$touches$item$p !== void 0 ? _event$touches$item$p : 0,
|
|
24
|
+
y: (_event$touches$item$p2 = (_event$touches$item2 = event.touches.item(0)) === null || _event$touches$item2 === void 0 ? void 0 : _event$touches$item2.pageY) !== null && _event$touches$item$p2 !== void 0 ? _event$touches$item$p2 : 0,
|
|
25
|
+
offsetX: 0,
|
|
26
|
+
offsetY: 0
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
return {
|
|
30
|
+
x: 0,
|
|
31
|
+
y: 0,
|
|
32
|
+
offsetX: 0,
|
|
33
|
+
offsetY: 0
|
|
34
|
+
};
|
|
35
|
+
};
|
|
8
36
|
/**
|
|
9
37
|
* @description
|
|
10
38
|
* Hook for dragging
|
|
@@ -28,24 +56,28 @@ var useDrag = function useDrag() {
|
|
|
28
56
|
dragState = _useUpdateState2[0],
|
|
29
57
|
setDragState = _useUpdateState2[1];
|
|
30
58
|
var onDragStart = useEvent.useEvent(function (event) {
|
|
31
|
-
event
|
|
59
|
+
var _toPosition = toPosition(event),
|
|
60
|
+
x = _toPosition.x,
|
|
61
|
+
y = _toPosition.y,
|
|
62
|
+
offsetX = _toPosition.offsetX,
|
|
63
|
+
offsetY = _toPosition.offsetY;
|
|
32
64
|
setDragState(function () {
|
|
33
65
|
return {
|
|
34
66
|
isDragging: true,
|
|
35
67
|
isDragged: true,
|
|
36
|
-
x:
|
|
37
|
-
y:
|
|
68
|
+
x: x,
|
|
69
|
+
y: y,
|
|
38
70
|
movementX: 0,
|
|
39
71
|
movementY: 0,
|
|
40
|
-
offsetX:
|
|
41
|
-
offsetY:
|
|
72
|
+
offsetX: offsetX,
|
|
73
|
+
offsetY: offsetY
|
|
42
74
|
};
|
|
43
75
|
}, _onDragStart && function (_state) {
|
|
44
76
|
_onDragStart(event, _objectSpread({}, _state));
|
|
45
77
|
});
|
|
46
78
|
});
|
|
47
79
|
var onDragMove = useEvent.useEvent(function (event) {
|
|
48
|
-
event
|
|
80
|
+
var position = toPosition(event);
|
|
49
81
|
setDragState(function (_state) {
|
|
50
82
|
if (!_state.isDragging) return _state;
|
|
51
83
|
var x = _state.x,
|
|
@@ -59,8 +91,8 @@ var useDrag = function useDrag() {
|
|
|
59
91
|
y: y,
|
|
60
92
|
offsetX: offsetX,
|
|
61
93
|
offsetY: offsetY,
|
|
62
|
-
movementX:
|
|
63
|
-
movementY:
|
|
94
|
+
movementX: position.x - x,
|
|
95
|
+
movementY: position.y - y
|
|
64
96
|
};
|
|
65
97
|
}, _onDragMove && function (_state) {
|
|
66
98
|
if (!_state.isDragging) return;
|
|
@@ -68,13 +100,15 @@ var useDrag = function useDrag() {
|
|
|
68
100
|
});
|
|
69
101
|
});
|
|
70
102
|
var onDragEnd = useEvent.useEvent(function (event) {
|
|
71
|
-
event
|
|
103
|
+
var _toPosition2 = toPosition(event),
|
|
104
|
+
x = _toPosition2.x,
|
|
105
|
+
y = _toPosition2.y;
|
|
72
106
|
setDragState(function (_state) {
|
|
73
107
|
return {
|
|
74
108
|
isDragging: false,
|
|
75
109
|
isDragged: true,
|
|
76
|
-
x:
|
|
77
|
-
y:
|
|
110
|
+
x: x - _state.offsetX,
|
|
111
|
+
y: y - _state.offsetY,
|
|
78
112
|
movementX: 0,
|
|
79
113
|
movementY: 0,
|
|
80
114
|
offsetX: 0,
|
package/dist/hooks/use-drag.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { type MouseEvent } from "react";
|
|
2
1
|
export type UsingDrag = {
|
|
3
2
|
/** Optional callback invoked upon drag end. */
|
|
4
|
-
onDragEnd?: (event:
|
|
3
|
+
onDragEnd?: (event: UIEvent, state: DragState) => void;
|
|
5
4
|
/** Optional callback invoked upon drag movement. */
|
|
6
|
-
onDragMove?: (event:
|
|
5
|
+
onDragMove?: (event: UIEvent, state: DragState) => void;
|
|
7
6
|
/** Optional callback invoked upon drag start. */
|
|
8
|
-
onDragStart?: (event:
|
|
7
|
+
onDragStart?: (event: UIEvent, state: DragState) => void;
|
|
9
8
|
};
|
|
10
9
|
export type DragState = {
|
|
11
10
|
/**
|
|
@@ -52,9 +51,9 @@ export type DragState = {
|
|
|
52
51
|
export type UsedDrag = [
|
|
53
52
|
DragState,
|
|
54
53
|
{
|
|
55
|
-
onDragEnd: (event:
|
|
56
|
-
onDragMove: (event:
|
|
57
|
-
onDragStart: (event:
|
|
54
|
+
onDragEnd: (event: UIEvent) => void;
|
|
55
|
+
onDragMove: (event: UIEvent) => void;
|
|
56
|
+
onDragStart: (event: UIEvent) => void;
|
|
58
57
|
}
|
|
59
58
|
];
|
|
60
59
|
/**
|
package/dist/hooks/use-drag.mjs
CHANGED
|
@@ -3,6 +3,34 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
3
3
|
import { useUpdateState } from './use-update-state.mjs';
|
|
4
4
|
import { useEvent } from './use-event.mjs';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* @description convert any event to position
|
|
8
|
+
*/
|
|
9
|
+
var toPosition = function toPosition(event) {
|
|
10
|
+
if (event instanceof MouseEvent) {
|
|
11
|
+
return {
|
|
12
|
+
x: event.pageX,
|
|
13
|
+
y: event.pageY,
|
|
14
|
+
offsetX: event.offsetX,
|
|
15
|
+
offsetY: event.offsetY
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
if (event instanceof TouchEvent && event.touches.length === 1) {
|
|
19
|
+
var _event$touches$item$p, _event$touches$item, _event$touches$item$p2, _event$touches$item2;
|
|
20
|
+
return {
|
|
21
|
+
x: (_event$touches$item$p = (_event$touches$item = event.touches.item(0)) === null || _event$touches$item === void 0 ? void 0 : _event$touches$item.pageX) !== null && _event$touches$item$p !== void 0 ? _event$touches$item$p : 0,
|
|
22
|
+
y: (_event$touches$item$p2 = (_event$touches$item2 = event.touches.item(0)) === null || _event$touches$item2 === void 0 ? void 0 : _event$touches$item2.pageY) !== null && _event$touches$item$p2 !== void 0 ? _event$touches$item$p2 : 0,
|
|
23
|
+
offsetX: 0,
|
|
24
|
+
offsetY: 0
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
x: 0,
|
|
29
|
+
y: 0,
|
|
30
|
+
offsetX: 0,
|
|
31
|
+
offsetY: 0
|
|
32
|
+
};
|
|
33
|
+
};
|
|
6
34
|
/**
|
|
7
35
|
* @description
|
|
8
36
|
* Hook for dragging
|
|
@@ -26,24 +54,28 @@ var useDrag = function useDrag() {
|
|
|
26
54
|
dragState = _useUpdateState2[0],
|
|
27
55
|
setDragState = _useUpdateState2[1];
|
|
28
56
|
var onDragStart = useEvent(function (event) {
|
|
29
|
-
event
|
|
57
|
+
var _toPosition = toPosition(event),
|
|
58
|
+
x = _toPosition.x,
|
|
59
|
+
y = _toPosition.y,
|
|
60
|
+
offsetX = _toPosition.offsetX,
|
|
61
|
+
offsetY = _toPosition.offsetY;
|
|
30
62
|
setDragState(function () {
|
|
31
63
|
return {
|
|
32
64
|
isDragging: true,
|
|
33
65
|
isDragged: true,
|
|
34
|
-
x:
|
|
35
|
-
y:
|
|
66
|
+
x: x,
|
|
67
|
+
y: y,
|
|
36
68
|
movementX: 0,
|
|
37
69
|
movementY: 0,
|
|
38
|
-
offsetX:
|
|
39
|
-
offsetY:
|
|
70
|
+
offsetX: offsetX,
|
|
71
|
+
offsetY: offsetY
|
|
40
72
|
};
|
|
41
73
|
}, _onDragStart && function (_state) {
|
|
42
74
|
_onDragStart(event, _objectSpread({}, _state));
|
|
43
75
|
});
|
|
44
76
|
});
|
|
45
77
|
var onDragMove = useEvent(function (event) {
|
|
46
|
-
event
|
|
78
|
+
var position = toPosition(event);
|
|
47
79
|
setDragState(function (_state) {
|
|
48
80
|
if (!_state.isDragging) return _state;
|
|
49
81
|
var x = _state.x,
|
|
@@ -57,8 +89,8 @@ var useDrag = function useDrag() {
|
|
|
57
89
|
y: y,
|
|
58
90
|
offsetX: offsetX,
|
|
59
91
|
offsetY: offsetY,
|
|
60
|
-
movementX:
|
|
61
|
-
movementY:
|
|
92
|
+
movementX: position.x - x,
|
|
93
|
+
movementY: position.y - y
|
|
62
94
|
};
|
|
63
95
|
}, _onDragMove && function (_state) {
|
|
64
96
|
if (!_state.isDragging) return;
|
|
@@ -66,13 +98,15 @@ var useDrag = function useDrag() {
|
|
|
66
98
|
});
|
|
67
99
|
});
|
|
68
100
|
var onDragEnd = useEvent(function (event) {
|
|
69
|
-
event
|
|
101
|
+
var _toPosition2 = toPosition(event),
|
|
102
|
+
x = _toPosition2.x,
|
|
103
|
+
y = _toPosition2.y;
|
|
70
104
|
setDragState(function (_state) {
|
|
71
105
|
return {
|
|
72
106
|
isDragging: false,
|
|
73
107
|
isDragged: true,
|
|
74
|
-
x:
|
|
75
|
-
y:
|
|
108
|
+
x: x - _state.offsetX,
|
|
109
|
+
y: y - _state.offsetY,
|
|
76
110
|
movementX: 0,
|
|
77
111
|
movementY: 0,
|
|
78
112
|
offsetX: 0,
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var useDrag = require('./use-drag.cjs');
|
|
6
|
+
var useMounted = require('./use-mounted.cjs');
|
|
7
|
+
|
|
8
|
+
var useDraggable = function useDraggable() {
|
|
9
|
+
var _useDrag = useDrag.useDrag(),
|
|
10
|
+
_useDrag2 = _slicedToArray(_useDrag, 2),
|
|
11
|
+
dragState = _useDrag2[0],
|
|
12
|
+
_useDrag2$ = _useDrag2[1],
|
|
13
|
+
onDragStart = _useDrag2$.onDragStart,
|
|
14
|
+
onDragEnd = _useDrag2$.onDragEnd,
|
|
15
|
+
onDragMove = _useDrag2$.onDragMove;
|
|
16
|
+
var draggableRef = react.useRef(null);
|
|
17
|
+
var isDragging = dragState.isDragging;
|
|
18
|
+
useMounted.useMounted(function () {
|
|
19
|
+
var _draggable = draggableRef.current;
|
|
20
|
+
if (!_draggable) return;
|
|
21
|
+
_draggable.addEventListener("mousedown", onDragStart);
|
|
22
|
+
_draggable.addEventListener("touchstart", onDragStart);
|
|
23
|
+
return function () {
|
|
24
|
+
_draggable.removeEventListener("mousedown", onDragStart);
|
|
25
|
+
_draggable.removeEventListener("touchstart", onDragStart);
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
react.useEffect(function () {
|
|
29
|
+
if (!isDragging) return;
|
|
30
|
+
window.addEventListener("mousemove", onDragMove);
|
|
31
|
+
window.addEventListener("touchmove", onDragMove);
|
|
32
|
+
window.addEventListener("mouseup", onDragEnd);
|
|
33
|
+
window.addEventListener("touchend", onDragEnd);
|
|
34
|
+
return function () {
|
|
35
|
+
window.removeEventListener("mousemove", onDragMove);
|
|
36
|
+
window.removeEventListener("touchmove", onDragMove);
|
|
37
|
+
window.removeEventListener("mouseup", onDragEnd);
|
|
38
|
+
window.removeEventListener("touchend", onDragEnd);
|
|
39
|
+
};
|
|
40
|
+
}, [isDragging]);
|
|
41
|
+
return [draggableRef, dragState];
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
exports.useDraggable = useDraggable;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useDraggable: <T extends HTMLElement = HTMLElement>() => readonly [import("react").RefObject<T>, import("./use-drag").DragState];
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
3
|
+
import { useDrag } from './use-drag.mjs';
|
|
4
|
+
import { useMounted } from './use-mounted.mjs';
|
|
5
|
+
|
|
6
|
+
var useDraggable = function useDraggable() {
|
|
7
|
+
var _useDrag = useDrag(),
|
|
8
|
+
_useDrag2 = _slicedToArray(_useDrag, 2),
|
|
9
|
+
dragState = _useDrag2[0],
|
|
10
|
+
_useDrag2$ = _useDrag2[1],
|
|
11
|
+
onDragStart = _useDrag2$.onDragStart,
|
|
12
|
+
onDragEnd = _useDrag2$.onDragEnd,
|
|
13
|
+
onDragMove = _useDrag2$.onDragMove;
|
|
14
|
+
var draggableRef = useRef(null);
|
|
15
|
+
var isDragging = dragState.isDragging;
|
|
16
|
+
useMounted(function () {
|
|
17
|
+
var _draggable = draggableRef.current;
|
|
18
|
+
if (!_draggable) return;
|
|
19
|
+
_draggable.addEventListener("mousedown", onDragStart);
|
|
20
|
+
_draggable.addEventListener("touchstart", onDragStart);
|
|
21
|
+
return function () {
|
|
22
|
+
_draggable.removeEventListener("mousedown", onDragStart);
|
|
23
|
+
_draggable.removeEventListener("touchstart", onDragStart);
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
useEffect(function () {
|
|
27
|
+
if (!isDragging) return;
|
|
28
|
+
window.addEventListener("mousemove", onDragMove);
|
|
29
|
+
window.addEventListener("touchmove", onDragMove);
|
|
30
|
+
window.addEventListener("mouseup", onDragEnd);
|
|
31
|
+
window.addEventListener("touchend", onDragEnd);
|
|
32
|
+
return function () {
|
|
33
|
+
window.removeEventListener("mousemove", onDragMove);
|
|
34
|
+
window.removeEventListener("touchmove", onDragMove);
|
|
35
|
+
window.removeEventListener("mouseup", onDragEnd);
|
|
36
|
+
window.removeEventListener("touchend", onDragEnd);
|
|
37
|
+
};
|
|
38
|
+
}, [isDragging]);
|
|
39
|
+
return [draggableRef, dragState];
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export { useDraggable };
|
|
@@ -8,10 +8,10 @@ function useUpdateState(initialState) {
|
|
|
8
8
|
var _useState = react.useState(initialState),
|
|
9
9
|
_useState2 = _slicedToArray(_useState, 2),
|
|
10
10
|
state = _useState2[0],
|
|
11
|
-
|
|
11
|
+
_setState = _useState2[1];
|
|
12
12
|
var callbackRef = react.useRef(null);
|
|
13
|
-
var
|
|
14
|
-
|
|
13
|
+
var setState = react.useCallback(function (state, callback) {
|
|
14
|
+
_setState(state);
|
|
15
15
|
callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
|
|
16
16
|
}, []);
|
|
17
17
|
useUpdateEffect.useUpdateEffect(function () {
|
|
@@ -21,7 +21,7 @@ function useUpdateState(initialState) {
|
|
|
21
21
|
_callback(state);
|
|
22
22
|
callbackRef.current = null;
|
|
23
23
|
}, [state]);
|
|
24
|
-
return [state,
|
|
24
|
+
return [state, setState];
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
exports.useUpdateState = useUpdateState;
|
|
@@ -6,10 +6,10 @@ function useUpdateState(initialState) {
|
|
|
6
6
|
var _useState = useState(initialState),
|
|
7
7
|
_useState2 = _slicedToArray(_useState, 2),
|
|
8
8
|
state = _useState2[0],
|
|
9
|
-
|
|
9
|
+
_setState = _useState2[1];
|
|
10
10
|
var callbackRef = useRef(null);
|
|
11
|
-
var
|
|
12
|
-
|
|
11
|
+
var setState = useCallback(function (state, callback) {
|
|
12
|
+
_setState(state);
|
|
13
13
|
callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
|
|
14
14
|
}, []);
|
|
15
15
|
useUpdateEffect(function () {
|
|
@@ -19,7 +19,7 @@ function useUpdateState(initialState) {
|
|
|
19
19
|
_callback(state);
|
|
20
20
|
callbackRef.current = null;
|
|
21
21
|
}, [state]);
|
|
22
|
-
return [state,
|
|
22
|
+
return [state, setState];
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
export { useUpdateState };
|
package/dist/index.cjs
CHANGED
|
@@ -38,6 +38,7 @@ var useScreenSize = require('./hooks/use-screen-size.cjs');
|
|
|
38
38
|
var useDrag = require('./hooks/use-drag.cjs');
|
|
39
39
|
var useEventSource = require('./hooks/use-event-source.cjs');
|
|
40
40
|
var useResize = require('./hooks/use-resize.cjs');
|
|
41
|
+
var useDraggable = require('./hooks/use-draggable.cjs');
|
|
41
42
|
var isRefable = require('./is/is-refable.cjs');
|
|
42
43
|
var isUndefined = require('./is/is-undefined.cjs');
|
|
43
44
|
var isNull = require('./is/is-null.cjs');
|
|
@@ -117,6 +118,7 @@ exports.useScreenSize = useScreenSize.useScreenSize;
|
|
|
117
118
|
exports.useDrag = useDrag.useDrag;
|
|
118
119
|
exports.useEventSource = useEventSource.useEventSource;
|
|
119
120
|
exports.useResize = useResize.useResize;
|
|
121
|
+
exports.useDraggable = useDraggable.useDraggable;
|
|
120
122
|
exports.isRefable = isRefable.isRefable;
|
|
121
123
|
exports.isUndefined = isUndefined.isUndefined;
|
|
122
124
|
exports.isNull = isNull.isNull;
|
package/dist/index.d.ts
CHANGED
|
@@ -40,6 +40,7 @@ export { useScreenSize } from "./hooks/use-screen-size";
|
|
|
40
40
|
export { useDrag } from "./hooks/use-drag";
|
|
41
41
|
export { useEventSource } from "./hooks/use-event-source";
|
|
42
42
|
export { useResize } from "./hooks/use-resize";
|
|
43
|
+
export { useDraggable } from "./hooks/use-draggable";
|
|
43
44
|
/**
|
|
44
45
|
* @description
|
|
45
46
|
* is
|
package/dist/index.mjs
CHANGED
|
@@ -36,6 +36,7 @@ export { useScreenSize } from './hooks/use-screen-size.mjs';
|
|
|
36
36
|
export { useDrag } from './hooks/use-drag.mjs';
|
|
37
37
|
export { useEventSource } from './hooks/use-event-source.mjs';
|
|
38
38
|
export { useResize } from './hooks/use-resize.mjs';
|
|
39
|
+
export { useDraggable } from './hooks/use-draggable.mjs';
|
|
39
40
|
export { isRefable } from './is/is-refable.mjs';
|
|
40
41
|
export { isUndefined } from './is/is-undefined.mjs';
|
|
41
42
|
export { isNull } from './is/is-null.mjs';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiszlab/relax",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.9",
|
|
4
4
|
"description": "react utils collection",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"react": "^18.3.1",
|
|
54
54
|
"react-dom": "^18.3.1",
|
|
55
55
|
"rollup": "^4.28.1",
|
|
56
|
-
"typescript": "5.
|
|
56
|
+
"typescript": "5.7.3"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": "18",
|