@aiszlab/relax 1.5.2 → 1.5.4
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/class-name/index.cjs +9 -0
- package/dist/class-name/index.d.ts +2 -0
- package/dist/class-name/index.mjs +2 -0
- package/dist/class-name/normalize.cjs +32 -0
- package/dist/class-name/normalize.d.ts +2 -0
- package/dist/class-name/normalize.mjs +30 -0
- package/dist/{utils/clsx.cjs → class-name/stringify.cjs} +9 -9
- package/dist/{utils/clsx.d.ts → class-name/stringify.d.ts} +1 -1
- package/dist/{utils/clsx.mjs → class-name/stringify.mjs} +9 -9
- package/dist/dom/contains.d.ts +1 -1
- package/dist/hooks/use-drag.cjs +94 -0
- package/dist/hooks/use-drag.d.ts +26 -10
- package/dist/hooks/use-drag.mjs +92 -0
- package/dist/hooks/use-raf.cjs +16 -5
- package/dist/hooks/use-raf.d.ts +10 -15
- package/dist/hooks/use-raf.mjs +16 -5
- package/dist/hooks/use-update-state.cjs +27 -0
- package/dist/hooks/use-update-state.mjs +25 -0
- package/dist/index.cjs +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +1 -1
- package/dist/types/any-function.d.ts +1 -1
- package/package.json +15 -22
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
|
+
var _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
|
|
5
|
+
var isString = require('../is/is-string.cjs');
|
|
6
|
+
|
|
7
|
+
function normalize() {
|
|
8
|
+
var values = new Set();
|
|
9
|
+
for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
10
|
+
classNames[_key] = arguments[_key];
|
|
11
|
+
}
|
|
12
|
+
for (var _i = 0, _classNames2 = classNames; _i < _classNames2.length; _i++) {
|
|
13
|
+
var _classNames = _classNames2[_i];
|
|
14
|
+
if (!isString.isString(_classNames)) return;
|
|
15
|
+
var _iterator = _createForOfIteratorHelper(_classNames.matchAll(/\S+/g)),
|
|
16
|
+
_step;
|
|
17
|
+
try {
|
|
18
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
19
|
+
var _step$value = _slicedToArray(_step.value, 1),
|
|
20
|
+
className = _step$value[0];
|
|
21
|
+
values.add(className);
|
|
22
|
+
}
|
|
23
|
+
} catch (err) {
|
|
24
|
+
_iterator.e(err);
|
|
25
|
+
} finally {
|
|
26
|
+
_iterator.f();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
return Array.from(values);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
exports.normalize = normalize;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
|
+
import _createForOfIteratorHelper from '@babel/runtime/helpers/createForOfIteratorHelper';
|
|
3
|
+
import { isString } from '../is/is-string.mjs';
|
|
4
|
+
|
|
5
|
+
function normalize() {
|
|
6
|
+
var values = new Set();
|
|
7
|
+
for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
8
|
+
classNames[_key] = arguments[_key];
|
|
9
|
+
}
|
|
10
|
+
for (var _i = 0, _classNames2 = classNames; _i < _classNames2.length; _i++) {
|
|
11
|
+
var _classNames = _classNames2[_i];
|
|
12
|
+
if (!isString(_classNames)) return;
|
|
13
|
+
var _iterator = _createForOfIteratorHelper(_classNames.matchAll(/\S+/g)),
|
|
14
|
+
_step;
|
|
15
|
+
try {
|
|
16
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
17
|
+
var _step$value = _slicedToArray(_step.value, 1),
|
|
18
|
+
className = _step$value[0];
|
|
19
|
+
values.add(className);
|
|
20
|
+
}
|
|
21
|
+
} catch (err) {
|
|
22
|
+
_iterator.e(err);
|
|
23
|
+
} finally {
|
|
24
|
+
_iterator.f();
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return Array.from(values);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export { normalize };
|
|
@@ -8,28 +8,28 @@ var isString = require('../is/is-string.cjs');
|
|
|
8
8
|
var isVoid = require('../is/is-void.cjs');
|
|
9
9
|
|
|
10
10
|
var _toClassNames = function toClassNames(_classNames) {
|
|
11
|
-
if (isVoid.isVoid(_classNames) || isBoolean.isBoolean(_classNames)) return
|
|
12
|
-
if (isString.isString(_classNames) || isNumber.isNumber(_classNames)) return [_classNames.toString()];
|
|
11
|
+
if (isVoid.isVoid(_classNames) || isBoolean.isBoolean(_classNames)) return new Set();
|
|
12
|
+
if (isString.isString(_classNames) || isNumber.isNumber(_classNames)) return new Set([_classNames.toString()]);
|
|
13
13
|
if (isArray.isArray(_classNames)) {
|
|
14
14
|
return _classNames.reduce(function (classNames, item) {
|
|
15
|
-
return classNames.
|
|
16
|
-
},
|
|
15
|
+
return classNames.union(_toClassNames(item));
|
|
16
|
+
}, new Set());
|
|
17
17
|
}
|
|
18
18
|
return Object.entries(_classNames).reduce(function (classNames, _ref) {
|
|
19
19
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
20
20
|
className = _ref2[0],
|
|
21
21
|
isValid = _ref2[1];
|
|
22
22
|
if (isValid) {
|
|
23
|
-
classNames.
|
|
23
|
+
classNames.add(className);
|
|
24
24
|
}
|
|
25
25
|
return classNames;
|
|
26
|
-
},
|
|
26
|
+
}, new Set());
|
|
27
27
|
};
|
|
28
|
-
var
|
|
28
|
+
var stringify = function stringify() {
|
|
29
29
|
for (var _len = arguments.length, _classNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
30
30
|
_classNames[_key] = arguments[_key];
|
|
31
31
|
}
|
|
32
|
-
return _toClassNames(_classNames).join(" ");
|
|
32
|
+
return Array.from(_toClassNames(_classNames)).join(" ");
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
exports.
|
|
35
|
+
exports.stringify = stringify;
|
|
@@ -6,28 +6,28 @@ import { isString } from '../is/is-string.mjs';
|
|
|
6
6
|
import { isVoid } from '../is/is-void.mjs';
|
|
7
7
|
|
|
8
8
|
var _toClassNames = function toClassNames(_classNames) {
|
|
9
|
-
if (isVoid(_classNames) || isBoolean(_classNames)) return
|
|
10
|
-
if (isString(_classNames) || isNumber(_classNames)) return [_classNames.toString()];
|
|
9
|
+
if (isVoid(_classNames) || isBoolean(_classNames)) return new Set();
|
|
10
|
+
if (isString(_classNames) || isNumber(_classNames)) return new Set([_classNames.toString()]);
|
|
11
11
|
if (isArray(_classNames)) {
|
|
12
12
|
return _classNames.reduce(function (classNames, item) {
|
|
13
|
-
return classNames.
|
|
14
|
-
},
|
|
13
|
+
return classNames.union(_toClassNames(item));
|
|
14
|
+
}, new Set());
|
|
15
15
|
}
|
|
16
16
|
return Object.entries(_classNames).reduce(function (classNames, _ref) {
|
|
17
17
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
18
18
|
className = _ref2[0],
|
|
19
19
|
isValid = _ref2[1];
|
|
20
20
|
if (isValid) {
|
|
21
|
-
classNames.
|
|
21
|
+
classNames.add(className);
|
|
22
22
|
}
|
|
23
23
|
return classNames;
|
|
24
|
-
},
|
|
24
|
+
}, new Set());
|
|
25
25
|
};
|
|
26
|
-
var
|
|
26
|
+
var stringify = function stringify() {
|
|
27
27
|
for (var _len = arguments.length, _classNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
28
28
|
_classNames[_key] = arguments[_key];
|
|
29
29
|
}
|
|
30
|
-
return _toClassNames(_classNames).join(" ");
|
|
30
|
+
return Array.from(_toClassNames(_classNames)).join(" ");
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
export {
|
|
33
|
+
export { stringify };
|
package/dist/dom/contains.d.ts
CHANGED
|
@@ -13,4 +13,4 @@ export type Containable = {
|
|
|
13
13
|
*/
|
|
14
14
|
contains?: (node: Nullable<Node>) => boolean;
|
|
15
15
|
};
|
|
16
|
-
export declare const contains: (root: Voidable<Containable>, node?: Voidable<Node>) => boolean;
|
|
16
|
+
export declare const contains: (root: Voidable<Containable>, node?: Voidable<Node | EventTarget>) => boolean;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
4
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
5
|
+
var useUpdateState = require('./use-update-state.cjs');
|
|
6
|
+
var useEvent = require('./use-event.cjs');
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @description
|
|
10
|
+
* Hook for dragging
|
|
11
|
+
*/
|
|
12
|
+
var useDrag = function useDrag() {
|
|
13
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
14
|
+
_onDragEnd = _ref.onDragEnd,
|
|
15
|
+
_onDragMove = _ref.onDragMove,
|
|
16
|
+
_onDragStart = _ref.onDragStart;
|
|
17
|
+
var _useUpdateState = useUpdateState.useUpdateState({
|
|
18
|
+
x: 0,
|
|
19
|
+
y: 0,
|
|
20
|
+
movementX: 0,
|
|
21
|
+
movementY: 0,
|
|
22
|
+
offsetX: 0,
|
|
23
|
+
offsetY: 0,
|
|
24
|
+
isDragging: false,
|
|
25
|
+
isDragged: false
|
|
26
|
+
}),
|
|
27
|
+
_useUpdateState2 = _slicedToArray(_useUpdateState, 2),
|
|
28
|
+
dragState = _useUpdateState2[0],
|
|
29
|
+
setDragState = _useUpdateState2[1];
|
|
30
|
+
var onDragStart = useEvent.useEvent(function (event) {
|
|
31
|
+
event.persist();
|
|
32
|
+
setDragState(function () {
|
|
33
|
+
return {
|
|
34
|
+
isDragging: true,
|
|
35
|
+
isDragged: true,
|
|
36
|
+
x: event.clientX,
|
|
37
|
+
y: event.clientY,
|
|
38
|
+
movementX: 0,
|
|
39
|
+
movementY: 0,
|
|
40
|
+
offsetX: event.nativeEvent.layerX,
|
|
41
|
+
offsetY: event.nativeEvent.layerY
|
|
42
|
+
};
|
|
43
|
+
}, _onDragStart && function (_state) {
|
|
44
|
+
_onDragStart(event, _objectSpread({}, _state));
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
var onDragMove = useEvent.useEvent(function (event) {
|
|
48
|
+
event.persist();
|
|
49
|
+
setDragState(function (_state) {
|
|
50
|
+
if (!_state.isDragging) return _state;
|
|
51
|
+
var x = _state.x,
|
|
52
|
+
y = _state.y,
|
|
53
|
+
offsetX = _state.offsetX,
|
|
54
|
+
offsetY = _state.offsetY;
|
|
55
|
+
return {
|
|
56
|
+
isDragging: true,
|
|
57
|
+
isDragged: true,
|
|
58
|
+
x: x,
|
|
59
|
+
y: y,
|
|
60
|
+
offsetX: offsetX,
|
|
61
|
+
offsetY: offsetY,
|
|
62
|
+
movementX: event.clientX - x,
|
|
63
|
+
movementY: event.clientY - y
|
|
64
|
+
};
|
|
65
|
+
}, _onDragMove && function (_state) {
|
|
66
|
+
if (!_state.isDragging) return;
|
|
67
|
+
_onDragMove(event, _objectSpread({}, _state));
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
var onDragEnd = useEvent.useEvent(function (event) {
|
|
71
|
+
event.persist();
|
|
72
|
+
setDragState(function (_state) {
|
|
73
|
+
return {
|
|
74
|
+
isDragging: false,
|
|
75
|
+
isDragged: true,
|
|
76
|
+
x: event.clientX - _state.offsetX,
|
|
77
|
+
y: event.clientY - _state.offsetY,
|
|
78
|
+
movementX: 0,
|
|
79
|
+
movementY: 0,
|
|
80
|
+
offsetX: 0,
|
|
81
|
+
offsetY: 0
|
|
82
|
+
};
|
|
83
|
+
}, _onDragEnd && function (_state) {
|
|
84
|
+
_onDragEnd(event, _objectSpread({}, _state));
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
return [dragState, {
|
|
88
|
+
onDragEnd: onDragEnd,
|
|
89
|
+
onDragMove: onDragMove,
|
|
90
|
+
onDragStart: onDragStart
|
|
91
|
+
}];
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.useDrag = useDrag;
|
package/dist/hooks/use-drag.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type MouseEvent } from "react";
|
|
2
2
|
export type UsingDrag = {
|
|
3
3
|
/** Optional callback invoked upon drag end. */
|
|
4
|
-
onDragEnd?: (event:
|
|
4
|
+
onDragEnd?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
|
|
5
5
|
/** Optional callback invoked upon drag movement. */
|
|
6
|
-
onDragMove?: (event:
|
|
6
|
+
onDragMove?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
|
|
7
7
|
/** Optional callback invoked upon drag start. */
|
|
8
|
-
onDragStart?: (event:
|
|
8
|
+
onDragStart?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
|
|
9
9
|
};
|
|
10
10
|
export type DragState = {
|
|
11
11
|
/**
|
|
@@ -18,32 +18,48 @@ export type DragState = {
|
|
|
18
18
|
* y position
|
|
19
19
|
*/
|
|
20
20
|
y: number;
|
|
21
|
+
/**
|
|
22
|
+
* @description
|
|
23
|
+
* moved x
|
|
24
|
+
*/
|
|
25
|
+
movementX: number;
|
|
26
|
+
/**
|
|
27
|
+
* @description
|
|
28
|
+
* moved y
|
|
29
|
+
*/
|
|
30
|
+
movementY: number;
|
|
21
31
|
/**
|
|
22
32
|
* @description
|
|
23
33
|
* offset X
|
|
24
34
|
*/
|
|
25
|
-
offsetX
|
|
35
|
+
offsetX: number;
|
|
26
36
|
/**
|
|
27
37
|
* @description
|
|
28
38
|
* offset Y
|
|
29
39
|
*/
|
|
30
|
-
offsetY
|
|
40
|
+
offsetY: number;
|
|
31
41
|
/**
|
|
32
42
|
* @description
|
|
33
43
|
* Whether a drag is currently in progress.
|
|
34
44
|
*/
|
|
35
45
|
isDragging: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* @description
|
|
48
|
+
* isDragged
|
|
49
|
+
*/
|
|
50
|
+
isDragged: boolean;
|
|
36
51
|
};
|
|
37
52
|
export type UsedDrag = [
|
|
38
53
|
DragState,
|
|
39
54
|
{
|
|
40
|
-
onDragEnd: (event:
|
|
41
|
-
onDragMove: (event:
|
|
42
|
-
onDragStart: (event:
|
|
55
|
+
onDragEnd: (event: MouseEvent<HTMLDivElement>) => void;
|
|
56
|
+
onDragMove: (event: MouseEvent<HTMLDivElement>) => void;
|
|
57
|
+
onDragStart: (event: MouseEvent<HTMLDivElement>) => void;
|
|
43
58
|
}
|
|
44
59
|
];
|
|
45
60
|
/**
|
|
46
61
|
* @description
|
|
47
62
|
* Hook for dragging
|
|
48
63
|
*/
|
|
49
|
-
|
|
64
|
+
declare const useDrag: ({ onDragEnd: _onDragEnd, onDragMove: _onDragMove, onDragStart: _onDragStart, }?: UsingDrag | undefined) => UsedDrag;
|
|
65
|
+
export { useDrag };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
2
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
3
|
+
import { useUpdateState } from './use-update-state.mjs';
|
|
4
|
+
import { useEvent } from './use-event.mjs';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @description
|
|
8
|
+
* Hook for dragging
|
|
9
|
+
*/
|
|
10
|
+
var useDrag = function useDrag() {
|
|
11
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
12
|
+
_onDragEnd = _ref.onDragEnd,
|
|
13
|
+
_onDragMove = _ref.onDragMove,
|
|
14
|
+
_onDragStart = _ref.onDragStart;
|
|
15
|
+
var _useUpdateState = useUpdateState({
|
|
16
|
+
x: 0,
|
|
17
|
+
y: 0,
|
|
18
|
+
movementX: 0,
|
|
19
|
+
movementY: 0,
|
|
20
|
+
offsetX: 0,
|
|
21
|
+
offsetY: 0,
|
|
22
|
+
isDragging: false,
|
|
23
|
+
isDragged: false
|
|
24
|
+
}),
|
|
25
|
+
_useUpdateState2 = _slicedToArray(_useUpdateState, 2),
|
|
26
|
+
dragState = _useUpdateState2[0],
|
|
27
|
+
setDragState = _useUpdateState2[1];
|
|
28
|
+
var onDragStart = useEvent(function (event) {
|
|
29
|
+
event.persist();
|
|
30
|
+
setDragState(function () {
|
|
31
|
+
return {
|
|
32
|
+
isDragging: true,
|
|
33
|
+
isDragged: true,
|
|
34
|
+
x: event.clientX,
|
|
35
|
+
y: event.clientY,
|
|
36
|
+
movementX: 0,
|
|
37
|
+
movementY: 0,
|
|
38
|
+
offsetX: event.nativeEvent.layerX,
|
|
39
|
+
offsetY: event.nativeEvent.layerY
|
|
40
|
+
};
|
|
41
|
+
}, _onDragStart && function (_state) {
|
|
42
|
+
_onDragStart(event, _objectSpread({}, _state));
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
var onDragMove = useEvent(function (event) {
|
|
46
|
+
event.persist();
|
|
47
|
+
setDragState(function (_state) {
|
|
48
|
+
if (!_state.isDragging) return _state;
|
|
49
|
+
var x = _state.x,
|
|
50
|
+
y = _state.y,
|
|
51
|
+
offsetX = _state.offsetX,
|
|
52
|
+
offsetY = _state.offsetY;
|
|
53
|
+
return {
|
|
54
|
+
isDragging: true,
|
|
55
|
+
isDragged: true,
|
|
56
|
+
x: x,
|
|
57
|
+
y: y,
|
|
58
|
+
offsetX: offsetX,
|
|
59
|
+
offsetY: offsetY,
|
|
60
|
+
movementX: event.clientX - x,
|
|
61
|
+
movementY: event.clientY - y
|
|
62
|
+
};
|
|
63
|
+
}, _onDragMove && function (_state) {
|
|
64
|
+
if (!_state.isDragging) return;
|
|
65
|
+
_onDragMove(event, _objectSpread({}, _state));
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
var onDragEnd = useEvent(function (event) {
|
|
69
|
+
event.persist();
|
|
70
|
+
setDragState(function (_state) {
|
|
71
|
+
return {
|
|
72
|
+
isDragging: false,
|
|
73
|
+
isDragged: true,
|
|
74
|
+
x: event.clientX - _state.offsetX,
|
|
75
|
+
y: event.clientY - _state.offsetY,
|
|
76
|
+
movementX: 0,
|
|
77
|
+
movementY: 0,
|
|
78
|
+
offsetX: 0,
|
|
79
|
+
offsetY: 0
|
|
80
|
+
};
|
|
81
|
+
}, _onDragEnd && function (_state) {
|
|
82
|
+
_onDragEnd(event, _objectSpread({}, _state));
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
return [dragState, {
|
|
86
|
+
onDragEnd: onDragEnd,
|
|
87
|
+
onDragMove: onDragMove,
|
|
88
|
+
onDragStart: onDragStart
|
|
89
|
+
}];
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export { useDrag };
|
package/dist/hooks/use-raf.cjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var react = require('react');
|
|
4
4
|
var useEvent = require('./use-event.cjs');
|
|
5
|
+
var useUnmount = require('./use-unmount.cjs');
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* @description
|
|
@@ -10,18 +11,28 @@ var useEvent = require('./use-event.cjs');
|
|
|
10
11
|
var useRaf = function useRaf(_callback) {
|
|
11
12
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
12
13
|
timely = _ref.timely;
|
|
13
|
-
var callback = useEvent.useEvent(_callback);
|
|
14
14
|
var timed = react.useRef(null);
|
|
15
15
|
var isTimed = react.useRef(false);
|
|
16
|
-
|
|
16
|
+
useUnmount.useUnmount(function () {
|
|
17
|
+
if (!timed.current) return;
|
|
18
|
+
cancelAnimationFrame(timed.current);
|
|
19
|
+
});
|
|
20
|
+
var callback = useEvent.useEvent(function () {
|
|
21
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
22
|
+
args[_key] = arguments[_key];
|
|
23
|
+
}
|
|
17
24
|
if (isTimed.current) return;
|
|
18
25
|
isTimed.current = true;
|
|
19
|
-
|
|
26
|
+
if (timely) {
|
|
27
|
+
_callback.apply(void 0, args);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
20
30
|
timed.current = requestAnimationFrame(function () {
|
|
21
31
|
isTimed.current = false;
|
|
22
|
-
|
|
32
|
+
_callback.apply(void 0, args);
|
|
23
33
|
});
|
|
24
|
-
};
|
|
34
|
+
});
|
|
35
|
+
return callback;
|
|
25
36
|
};
|
|
26
37
|
|
|
27
38
|
exports.useRaf = useRaf;
|
package/dist/hooks/use-raf.d.ts
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
import type { AnyFunction } from "@aiszlab/relax/types";
|
|
2
|
-
type UsingRaf =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
timely?: boolean;
|
|
12
|
-
}?
|
|
13
|
-
];
|
|
14
|
-
type UsedRaf = () => void;
|
|
15
|
-
type UseRaf = (...args: UsingRaf) => UsedRaf;
|
|
2
|
+
type UsingRaf = {
|
|
3
|
+
/**
|
|
4
|
+
* @description
|
|
5
|
+
* run callback immediately
|
|
6
|
+
* if `timely` is true, run callback immediately
|
|
7
|
+
* otherwise, wait for next frame
|
|
8
|
+
*/
|
|
9
|
+
timely?: boolean;
|
|
10
|
+
};
|
|
16
11
|
/**
|
|
17
12
|
* @description
|
|
18
13
|
* raf
|
|
19
14
|
*/
|
|
20
|
-
export declare const useRaf:
|
|
15
|
+
export declare const useRaf: <T extends AnyFunction<any[], void>>(_callback: T, { timely }?: UsingRaf) => T;
|
|
21
16
|
export {};
|
package/dist/hooks/use-raf.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useRef } from 'react';
|
|
2
2
|
import { useEvent } from './use-event.mjs';
|
|
3
|
+
import { useUnmount } from './use-unmount.mjs';
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* @description
|
|
@@ -8,18 +9,28 @@ import { useEvent } from './use-event.mjs';
|
|
|
8
9
|
var useRaf = function useRaf(_callback) {
|
|
9
10
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
10
11
|
timely = _ref.timely;
|
|
11
|
-
var callback = useEvent(_callback);
|
|
12
12
|
var timed = useRef(null);
|
|
13
13
|
var isTimed = useRef(false);
|
|
14
|
-
|
|
14
|
+
useUnmount(function () {
|
|
15
|
+
if (!timed.current) return;
|
|
16
|
+
cancelAnimationFrame(timed.current);
|
|
17
|
+
});
|
|
18
|
+
var callback = useEvent(function () {
|
|
19
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
20
|
+
args[_key] = arguments[_key];
|
|
21
|
+
}
|
|
15
22
|
if (isTimed.current) return;
|
|
16
23
|
isTimed.current = true;
|
|
17
|
-
|
|
24
|
+
if (timely) {
|
|
25
|
+
_callback.apply(void 0, args);
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
18
28
|
timed.current = requestAnimationFrame(function () {
|
|
19
29
|
isTimed.current = false;
|
|
20
|
-
|
|
30
|
+
_callback.apply(void 0, args);
|
|
21
31
|
});
|
|
22
|
-
};
|
|
32
|
+
});
|
|
33
|
+
return callback;
|
|
23
34
|
};
|
|
24
35
|
|
|
25
36
|
export { useRaf };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var useUpdateEffect = require('./use-update-effect.cjs');
|
|
6
|
+
|
|
7
|
+
function useUpdateState(initialState) {
|
|
8
|
+
var _useState = react.useState(initialState),
|
|
9
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
10
|
+
state = _useState2[0],
|
|
11
|
+
setState = _useState2[1];
|
|
12
|
+
var callbackRef = react.useRef(null);
|
|
13
|
+
var setter = react.useCallback(function (state, callback) {
|
|
14
|
+
setState(state);
|
|
15
|
+
callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
|
|
16
|
+
}, []);
|
|
17
|
+
useUpdateEffect.useUpdateEffect(function () {
|
|
18
|
+
var _callback = callbackRef.current;
|
|
19
|
+
if (!_callback) return;
|
|
20
|
+
// execution & reset
|
|
21
|
+
_callback(state);
|
|
22
|
+
callbackRef.current = null;
|
|
23
|
+
}, [state]);
|
|
24
|
+
return [state, setter];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
exports.useUpdateState = useUpdateState;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
|
+
import { useState, useRef, useCallback } from 'react';
|
|
3
|
+
import { useUpdateEffect } from './use-update-effect.mjs';
|
|
4
|
+
|
|
5
|
+
function useUpdateState(initialState) {
|
|
6
|
+
var _useState = useState(initialState),
|
|
7
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
8
|
+
state = _useState2[0],
|
|
9
|
+
setState = _useState2[1];
|
|
10
|
+
var callbackRef = useRef(null);
|
|
11
|
+
var setter = useCallback(function (state, callback) {
|
|
12
|
+
setState(state);
|
|
13
|
+
callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
|
|
14
|
+
}, []);
|
|
15
|
+
useUpdateEffect(function () {
|
|
16
|
+
var _callback = callbackRef.current;
|
|
17
|
+
if (!_callback) return;
|
|
18
|
+
// execution & reset
|
|
19
|
+
_callback(state);
|
|
20
|
+
callbackRef.current = null;
|
|
21
|
+
}, [state]);
|
|
22
|
+
return [state, setter];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { useUpdateState };
|
package/dist/index.cjs
CHANGED
|
@@ -35,6 +35,7 @@ var useInfiniteScroll = require('./hooks/use-infinite-scroll.cjs');
|
|
|
35
35
|
var useReactive = require('./hooks/use-reactive.cjs');
|
|
36
36
|
var useParentSize = require('./hooks/use-parent-size.cjs');
|
|
37
37
|
var useScreenSize = require('./hooks/use-screen-size.cjs');
|
|
38
|
+
var useDrag = require('./hooks/use-drag.cjs');
|
|
38
39
|
var isRefable = require('./is/is-refable.cjs');
|
|
39
40
|
var isUndefined = require('./is/is-undefined.cjs');
|
|
40
41
|
var isNull = require('./is/is-null.cjs');
|
|
@@ -67,7 +68,6 @@ var clone = require('./utils/clone.cjs');
|
|
|
67
68
|
var toggle = require('./utils/toggle.cjs');
|
|
68
69
|
var taggedTemplateLiterals = require('./utils/tagged-template-literals.cjs');
|
|
69
70
|
var replace = require('./utils/replace.cjs');
|
|
70
|
-
var clsx = require('./utils/clsx.cjs');
|
|
71
71
|
var first = require('./utils/first.cjs');
|
|
72
72
|
var last = require('./utils/last.cjs');
|
|
73
73
|
var merge = require('./utils/merge.cjs');
|
|
@@ -112,6 +112,7 @@ exports.useInfiniteScroll = useInfiniteScroll.useInfiniteScroll;
|
|
|
112
112
|
exports.useReactive = useReactive.useReactive;
|
|
113
113
|
exports.useParentSize = useParentSize.useParentSize;
|
|
114
114
|
exports.useScreenSize = useScreenSize.useScreenSize;
|
|
115
|
+
exports.useDrag = useDrag.useDrag;
|
|
115
116
|
exports.isRefable = isRefable.isRefable;
|
|
116
117
|
exports.isUndefined = isUndefined.isUndefined;
|
|
117
118
|
exports.isNull = isNull.isNull;
|
|
@@ -144,7 +145,6 @@ exports.clone = clone.clone;
|
|
|
144
145
|
exports.toggle = toggle.toggle;
|
|
145
146
|
exports.taggedTemplateLiterals = taggedTemplateLiterals.taggedTemplateLiterals;
|
|
146
147
|
exports.replace = replace.replace;
|
|
147
|
-
exports.clsx = clsx.clsx;
|
|
148
148
|
exports.first = first.first;
|
|
149
149
|
exports.last = last.last;
|
|
150
150
|
exports.merge = merge.merge;
|
package/dist/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export { useInfiniteScroll } from "./hooks/use-infinite-scroll";
|
|
|
37
37
|
export { useReactive } from "./hooks/use-reactive";
|
|
38
38
|
export { useParentSize } from "./hooks/use-parent-size";
|
|
39
39
|
export { useScreenSize } from "./hooks/use-screen-size";
|
|
40
|
+
export { useDrag } from "./hooks/use-drag";
|
|
40
41
|
/**
|
|
41
42
|
* @description
|
|
42
43
|
* is
|
|
@@ -77,7 +78,6 @@ export { clone } from "./utils/clone";
|
|
|
77
78
|
export { toggle } from "./utils/toggle";
|
|
78
79
|
export { taggedTemplateLiterals } from "./utils/tagged-template-literals";
|
|
79
80
|
export { replace } from "./utils/replace";
|
|
80
|
-
export { clsx } from "./utils/clsx";
|
|
81
81
|
export { first } from "./utils/first";
|
|
82
82
|
export { last } from "./utils/last";
|
|
83
83
|
export { merge } from "./utils/merge";
|
package/dist/index.mjs
CHANGED
|
@@ -33,6 +33,7 @@ export { useInfiniteScroll } from './hooks/use-infinite-scroll.mjs';
|
|
|
33
33
|
export { useReactive } from './hooks/use-reactive.mjs';
|
|
34
34
|
export { useParentSize } from './hooks/use-parent-size.mjs';
|
|
35
35
|
export { useScreenSize } from './hooks/use-screen-size.mjs';
|
|
36
|
+
export { useDrag } from './hooks/use-drag.mjs';
|
|
36
37
|
export { isRefable } from './is/is-refable.mjs';
|
|
37
38
|
export { isUndefined } from './is/is-undefined.mjs';
|
|
38
39
|
export { isNull } from './is/is-null.mjs';
|
|
@@ -65,7 +66,6 @@ export { clone } from './utils/clone.mjs';
|
|
|
65
66
|
export { toggle } from './utils/toggle.mjs';
|
|
66
67
|
export { taggedTemplateLiterals } from './utils/tagged-template-literals.mjs';
|
|
67
68
|
export { replace } from './utils/replace.mjs';
|
|
68
|
-
export { clsx } from './utils/clsx.mjs';
|
|
69
69
|
export { first } from './utils/first.mjs';
|
|
70
70
|
export { last } from './utils/last.mjs';
|
|
71
71
|
export { merge } from './utils/merge.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type AnyFunction = (...args:
|
|
1
|
+
export type AnyFunction<P extends any[] = any[], R = any> = (...args: P) => R;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiszlab/relax",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.4",
|
|
4
4
|
"description": "react utils collection",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -10,19 +10,12 @@
|
|
|
10
10
|
"import": "./dist/index.mjs",
|
|
11
11
|
"default": "./dist/index.mjs"
|
|
12
12
|
},
|
|
13
|
-
"
|
|
14
|
-
"types": "./dist
|
|
15
|
-
"node": "./dist
|
|
16
|
-
"require": "./dist
|
|
17
|
-
"import": "./dist
|
|
18
|
-
"default": "./dist
|
|
19
|
-
},
|
|
20
|
-
"./react": {
|
|
21
|
-
"types": "./dist/react/index.d.ts",
|
|
22
|
-
"node": "./dist/react/index.cjs",
|
|
23
|
-
"require": "./dist/react/index.cjs",
|
|
24
|
-
"import": "./dist/react/index.mjs",
|
|
25
|
-
"default": "./dist/react/index.mjs"
|
|
13
|
+
"./*": {
|
|
14
|
+
"types": "./dist/*/index.d.ts",
|
|
15
|
+
"node": "./dist/*/index.cjs",
|
|
16
|
+
"require": "./dist/*/index.cjs",
|
|
17
|
+
"import": "./dist/*/index.mjs",
|
|
18
|
+
"default": "./dist/*/index.mjs"
|
|
26
19
|
},
|
|
27
20
|
"./types": "./dist/types/index.d.ts"
|
|
28
21
|
},
|
|
@@ -36,30 +29,30 @@
|
|
|
36
29
|
"publish:npm": "npm publish"
|
|
37
30
|
},
|
|
38
31
|
"dependencies": {
|
|
39
|
-
"@babel/runtime": "^7.
|
|
32
|
+
"@babel/runtime": "^7.26.0",
|
|
40
33
|
"react-is": "^18.3.1",
|
|
41
34
|
"rxjs": "^7.8.1"
|
|
42
35
|
},
|
|
43
36
|
"devDependencies": {
|
|
44
|
-
"@babel/core": "^7.
|
|
45
|
-
"@babel/plugin-transform-runtime": "^7.25.
|
|
46
|
-
"@babel/preset-env": "^7.
|
|
47
|
-
"@babel/preset-react": "^7.25.
|
|
48
|
-
"@babel/preset-typescript": "^7.
|
|
37
|
+
"@babel/core": "^7.26.0",
|
|
38
|
+
"@babel/plugin-transform-runtime": "^7.25.9",
|
|
39
|
+
"@babel/preset-env": "^7.26.0",
|
|
40
|
+
"@babel/preset-react": "^7.25.9",
|
|
41
|
+
"@babel/preset-typescript": "^7.26.0",
|
|
49
42
|
"@jest/globals": "^29.7.0",
|
|
50
43
|
"@rollup/plugin-babel": "^6.0.4",
|
|
51
44
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
52
45
|
"@rollup/plugin-typescript": "^12.1.1",
|
|
53
46
|
"@testing-library/react": "^16.0.1",
|
|
54
47
|
"@types/babel__core": "^7.20.5",
|
|
55
|
-
"@types/react": "^18.3.
|
|
48
|
+
"@types/react": "^18.3.12",
|
|
56
49
|
"@types/react-dom": "^18.3.1",
|
|
57
50
|
"@types/react-is": "^18.3.0",
|
|
58
51
|
"jest": "^29.7.0",
|
|
59
52
|
"jest-environment-jsdom": "^29.7.0",
|
|
60
53
|
"react": "^18.3.1",
|
|
61
54
|
"react-dom": "^18.3.1",
|
|
62
|
-
"rollup": "^4.24.
|
|
55
|
+
"rollup": "^4.24.2",
|
|
63
56
|
"typescript": "5.6.2"
|
|
64
57
|
},
|
|
65
58
|
"peerDependencies": {
|