@aiszlab/relax 1.4.5 → 1.4.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/hooks/use-debounce-callback.cjs +2 -17
- package/dist/hooks/use-debounce-callback.d.ts +4 -2
- package/dist/hooks/use-debounce-callback.mjs +2 -17
- package/dist/hooks/use-default.cjs +3 -1
- package/dist/hooks/use-default.mjs +3 -1
- package/dist/hooks/use-event.cjs +0 -1
- package/dist/hooks/use-event.d.ts +2 -2
- package/dist/hooks/use-event.mjs +0 -1
- package/dist/hooks/use-focus.cjs +24 -18
- package/dist/hooks/use-focus.d.ts +2 -2
- package/dist/hooks/use-focus.mjs +24 -18
- package/dist/hooks/use-hover.cjs +14 -7
- package/dist/hooks/use-hover.d.ts +2 -2
- package/dist/hooks/use-hover.mjs +14 -7
- package/dist/hooks/use-infinite-scroll.d.ts +1 -4
- package/dist/hooks/use-media-query.cjs +9 -13
- package/dist/hooks/use-media-query.mjs +10 -14
- package/dist/hooks/use-raf.d.ts +2 -1
- package/dist/hooks/use-throttle-callback.cjs +2 -17
- package/dist/hooks/use-throttle-callback.d.ts +4 -2
- package/dist/hooks/use-throttle-callback.mjs +2 -17
- package/dist/hooks/use-timeout.d.ts +2 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +1 -0
- package/dist/is/is-boolean.cjs +7 -0
- package/dist/is/is-boolean.d.ts +1 -0
- package/dist/is/is-boolean.mjs +5 -0
- package/dist/types/any-function.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/last.d.ts +1 -1
- package/dist/types/partial-in.d.ts +5 -0
- package/dist/utils/clone.cjs +0 -1
- package/dist/utils/clone.mjs +0 -1
- package/dist/utils/clsx.cjs +10 -9
- package/dist/utils/clsx.d.ts +2 -2
- package/dist/utils/clsx.mjs +10 -9
- package/dist/utils/debounce.cjs +0 -1
- package/dist/utils/debounce.d.ts +4 -4
- package/dist/utils/debounce.mjs +0 -1
- package/dist/utils/exclude.cjs +0 -1
- package/dist/utils/exclude.mjs +0 -1
- package/dist/utils/last.cjs +0 -1
- package/dist/utils/last.mjs +0 -1
- package/dist/utils/load.cjs +55 -0
- package/dist/utils/load.d.ts +10 -0
- package/dist/utils/load.mjs +53 -0
- package/dist/utils/merge.cjs +0 -2
- package/dist/utils/merge.mjs +0 -2
- package/dist/utils/replace.cjs +16 -15
- package/dist/utils/replace.d.ts +14 -13
- package/dist/utils/replace.mjs +16 -15
- package/dist/utils/set-style.cjs +3 -5
- package/dist/utils/set-style.d.ts +1 -1
- package/dist/utils/set-style.mjs +3 -5
- package/dist/utils/throttle.cjs +0 -1
- package/dist/utils/throttle.d.ts +4 -4
- package/dist/utils/throttle.mjs +0 -1
- package/dist/utils/to-function.cjs +1 -2
- package/dist/utils/to-function.d.ts +4 -1
- package/dist/utils/to-function.mjs +1 -2
- package/dist/utils/waitable.cjs +7 -6
- package/dist/utils/waitable.d.ts +4 -4
- package/dist/utils/waitable.mjs +7 -6
- package/package.json +1 -1
|
@@ -32,22 +32,7 @@ var useDebouncer = function useDebouncer(debouncer) {
|
|
|
32
32
|
pipe: pipe
|
|
33
33
|
};
|
|
34
34
|
};
|
|
35
|
-
|
|
36
|
-
* @author murukal
|
|
37
|
-
*
|
|
38
|
-
* @description
|
|
39
|
-
* debounce callback
|
|
40
|
-
*
|
|
41
|
-
* @param callback
|
|
42
|
-
* @param wait number
|
|
43
|
-
* @description
|
|
44
|
-
* The delay time (in milliseconds) until the debounce function is called.
|
|
45
|
-
* default 1000
|
|
46
|
-
*
|
|
47
|
-
* @example
|
|
48
|
-
* 1000
|
|
49
|
-
*/
|
|
50
|
-
var useDebounceCallback = function useDebounceCallback(debouncer) {
|
|
35
|
+
function useDebounceCallback(debouncer) {
|
|
51
36
|
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
|
|
52
37
|
var debounced = react.useRef(null);
|
|
53
38
|
var _useDebouncer = useDebouncer(debouncer),
|
|
@@ -84,6 +69,6 @@ var useDebounceCallback = function useDebounceCallback(debouncer) {
|
|
|
84
69
|
}
|
|
85
70
|
};
|
|
86
71
|
});
|
|
87
|
-
}
|
|
72
|
+
}
|
|
88
73
|
|
|
89
74
|
exports.useDebounceCallback = useDebounceCallback;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Debounced, type Debouncer } from "../utils/debounce";
|
|
2
|
-
import {
|
|
2
|
+
import type { AnyFunction } from "@aiszlab/relax/types";
|
|
3
3
|
/**
|
|
4
4
|
* @author murukal
|
|
5
5
|
*
|
|
@@ -15,4 +15,6 @@ import { type Callable } from "./use-event";
|
|
|
15
15
|
* @example
|
|
16
16
|
* 1000
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
declare function useDebounceCallback<T extends AnyFunction>(callback: T, wait: number): Debounced<T>;
|
|
19
|
+
declare function useDebounceCallback<T extends AnyFunction, R = unknown>(debouncer: Debouncer<T, R>, wait: number): Debounced<T>;
|
|
20
|
+
export { useDebounceCallback };
|
|
@@ -30,22 +30,7 @@ var useDebouncer = function useDebouncer(debouncer) {
|
|
|
30
30
|
pipe: pipe
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
|
-
|
|
34
|
-
* @author murukal
|
|
35
|
-
*
|
|
36
|
-
* @description
|
|
37
|
-
* debounce callback
|
|
38
|
-
*
|
|
39
|
-
* @param callback
|
|
40
|
-
* @param wait number
|
|
41
|
-
* @description
|
|
42
|
-
* The delay time (in milliseconds) until the debounce function is called.
|
|
43
|
-
* default 1000
|
|
44
|
-
*
|
|
45
|
-
* @example
|
|
46
|
-
* 1000
|
|
47
|
-
*/
|
|
48
|
-
var useDebounceCallback = function useDebounceCallback(debouncer) {
|
|
33
|
+
function useDebounceCallback(debouncer) {
|
|
49
34
|
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
|
|
50
35
|
var debounced = useRef(null);
|
|
51
36
|
var _useDebouncer = useDebouncer(debouncer),
|
|
@@ -82,6 +67,6 @@ var useDebounceCallback = function useDebounceCallback(debouncer) {
|
|
|
82
67
|
}
|
|
83
68
|
};
|
|
84
69
|
});
|
|
85
|
-
}
|
|
70
|
+
}
|
|
86
71
|
|
|
87
72
|
export { useDebounceCallback };
|
|
@@ -10,7 +10,9 @@ var toFunction = require('../utils/to-function.cjs');
|
|
|
10
10
|
* state always be same after first render
|
|
11
11
|
*/
|
|
12
12
|
var useDefault = function useDefault(initialState) {
|
|
13
|
-
return react.useMemo(
|
|
13
|
+
return react.useMemo(function () {
|
|
14
|
+
return toFunction.toFunction(initialState)();
|
|
15
|
+
}, []);
|
|
14
16
|
};
|
|
15
17
|
|
|
16
18
|
exports.useDefault = useDefault;
|
|
@@ -8,7 +8,9 @@ import { toFunction } from '../utils/to-function.mjs';
|
|
|
8
8
|
* state always be same after first render
|
|
9
9
|
*/
|
|
10
10
|
var useDefault = function useDefault(initialState) {
|
|
11
|
-
return useMemo(
|
|
11
|
+
return useMemo(function () {
|
|
12
|
+
return toFunction(initialState)();
|
|
13
|
+
}, []);
|
|
12
14
|
};
|
|
13
15
|
|
|
14
16
|
export { useDefault };
|
package/dist/hooks/use-event.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const useEvent: <T extends
|
|
1
|
+
import type { AnyFunction } from "@aiszlab/relax/types";
|
|
2
|
+
export declare const useEvent: <T extends AnyFunction>(callback: T) => T;
|
package/dist/hooks/use-event.mjs
CHANGED
package/dist/hooks/use-focus.cjs
CHANGED
|
@@ -1,33 +1,39 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
|
-
var react = require('react');
|
|
5
4
|
var useBoolean = require('./use-boolean.cjs');
|
|
6
5
|
var chain = require('../utils/chain.cjs');
|
|
6
|
+
var useEvent = require('./use-event.cjs');
|
|
7
|
+
var useDefault = require('./use-default.cjs');
|
|
7
8
|
|
|
8
|
-
var useFocus = function useFocus(
|
|
9
|
+
var useFocus = function useFocus() {
|
|
10
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
11
|
+
_onBlur = _ref.onBlur,
|
|
12
|
+
_onFocus = _ref.onFocus,
|
|
13
|
+
onFocusChange = _ref.onFocusChange;
|
|
9
14
|
var _useBoolean = useBoolean.useBoolean(false),
|
|
10
15
|
_useBoolean2 = _slicedToArray(_useBoolean, 2),
|
|
11
16
|
isFocused = _useBoolean2[0],
|
|
12
17
|
_useBoolean2$ = _useBoolean2[1],
|
|
13
18
|
turnOn = _useBoolean2$.turnOn,
|
|
14
19
|
turnOff = _useBoolean2$.turnOff;
|
|
15
|
-
var onFocus =
|
|
16
|
-
chain.chain(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
20
|
+
var onFocus = useEvent.useEvent(function (event) {
|
|
21
|
+
chain.chain(_onFocus, turnOn, function () {
|
|
22
|
+
return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
|
|
23
|
+
})(event);
|
|
24
|
+
});
|
|
25
|
+
var onBlur = useEvent.useEvent(function (event) {
|
|
26
|
+
chain.chain(_onBlur, turnOff, function () {
|
|
27
|
+
return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
|
|
28
|
+
})(event);
|
|
29
|
+
});
|
|
30
|
+
var focusProps = useDefault.useDefault(function () {
|
|
31
|
+
return {
|
|
32
|
+
onBlur: onBlur,
|
|
33
|
+
onFocus: onFocus
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
return [isFocused, focusProps];
|
|
31
37
|
};
|
|
32
38
|
|
|
33
39
|
exports.useFocus = useFocus;
|
|
@@ -3,7 +3,7 @@ import { type DOMAttributes } from "react";
|
|
|
3
3
|
* @description
|
|
4
4
|
* hooks for focus
|
|
5
5
|
*/
|
|
6
|
-
type
|
|
6
|
+
type UsingFocus<T> = Pick<DOMAttributes<T>, "onFocus" | "onBlur"> & {
|
|
7
7
|
onFocusChange?: (isFocused: boolean) => void;
|
|
8
8
|
};
|
|
9
9
|
/**
|
|
@@ -11,5 +11,5 @@ type Props<T> = Pick<DOMAttributes<T>, "onFocus" | "onBlur"> & {
|
|
|
11
11
|
* dom attributes
|
|
12
12
|
*/
|
|
13
13
|
type UsedFocus<T> = [boolean, Required<Pick<DOMAttributes<T>, "onFocus" | "onBlur">>];
|
|
14
|
-
export declare const useFocus: <T extends Element = Element>(
|
|
14
|
+
export declare const useFocus: <T extends Element = Element>({ onBlur: _onBlur, onFocus: _onFocus, onFocusChange, }?: UsingFocus<T>) => UsedFocus<T>;
|
|
15
15
|
export {};
|
package/dist/hooks/use-focus.mjs
CHANGED
|
@@ -1,31 +1,37 @@
|
|
|
1
1
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
2
|
import { useBoolean } from './use-boolean.mjs';
|
|
4
3
|
import { chain } from '../utils/chain.mjs';
|
|
4
|
+
import { useEvent } from './use-event.mjs';
|
|
5
|
+
import { useDefault } from './use-default.mjs';
|
|
5
6
|
|
|
6
|
-
var useFocus = function useFocus(
|
|
7
|
+
var useFocus = function useFocus() {
|
|
8
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
9
|
+
_onBlur = _ref.onBlur,
|
|
10
|
+
_onFocus = _ref.onFocus,
|
|
11
|
+
onFocusChange = _ref.onFocusChange;
|
|
7
12
|
var _useBoolean = useBoolean(false),
|
|
8
13
|
_useBoolean2 = _slicedToArray(_useBoolean, 2),
|
|
9
14
|
isFocused = _useBoolean2[0],
|
|
10
15
|
_useBoolean2$ = _useBoolean2[1],
|
|
11
16
|
turnOn = _useBoolean2$.turnOn,
|
|
12
17
|
turnOff = _useBoolean2$.turnOff;
|
|
13
|
-
var onFocus =
|
|
14
|
-
chain(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
18
|
+
var onFocus = useEvent(function (event) {
|
|
19
|
+
chain(_onFocus, turnOn, function () {
|
|
20
|
+
return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
|
|
21
|
+
})(event);
|
|
22
|
+
});
|
|
23
|
+
var onBlur = useEvent(function (event) {
|
|
24
|
+
chain(_onBlur, turnOff, function () {
|
|
25
|
+
return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
|
|
26
|
+
})(event);
|
|
27
|
+
});
|
|
28
|
+
var focusProps = useDefault(function () {
|
|
29
|
+
return {
|
|
30
|
+
onBlur: onBlur,
|
|
31
|
+
onFocus: onFocus
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
return [isFocused, focusProps];
|
|
29
35
|
};
|
|
30
36
|
|
|
31
37
|
export { useFocus };
|
package/dist/hooks/use-hover.cjs
CHANGED
|
@@ -4,8 +4,12 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
|
4
4
|
var useBoolean = require('./use-boolean.cjs');
|
|
5
5
|
var chain = require('../utils/chain.cjs');
|
|
6
6
|
var useEvent = require('./use-event.cjs');
|
|
7
|
+
var useDefault = require('./use-default.cjs');
|
|
7
8
|
|
|
8
|
-
var useHover = function useHover(
|
|
9
|
+
var useHover = function useHover() {
|
|
10
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
11
|
+
onEnter = _ref.onEnter,
|
|
12
|
+
onLeave = _ref.onLeave;
|
|
9
13
|
var _useBoolean = useBoolean.useBoolean(false),
|
|
10
14
|
_useBoolean2 = _slicedToArray(_useBoolean, 2),
|
|
11
15
|
isHovered = _useBoolean2[0],
|
|
@@ -13,15 +17,18 @@ var useHover = function useHover(props) {
|
|
|
13
17
|
turnOn = _useBoolean2$.turnOn,
|
|
14
18
|
turnOff = _useBoolean2$.turnOff;
|
|
15
19
|
var onPointerEnter = useEvent.useEvent(function (event) {
|
|
16
|
-
chain.chain(
|
|
20
|
+
chain.chain(onEnter, turnOn)(event);
|
|
17
21
|
});
|
|
18
22
|
var onPointerLeave = useEvent.useEvent(function (event) {
|
|
19
|
-
chain.chain(
|
|
23
|
+
chain.chain(onLeave, turnOff)(event);
|
|
20
24
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
var hoverProps = useDefault.useDefault(function () {
|
|
26
|
+
return {
|
|
27
|
+
onPointerEnter: onPointerEnter,
|
|
28
|
+
onPointerLeave: onPointerLeave
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
return [isHovered, hoverProps];
|
|
25
32
|
};
|
|
26
33
|
|
|
27
34
|
exports.useHover = useHover;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type PointerEventHandler } from "react";
|
|
2
|
-
type
|
|
2
|
+
type UsingHover<T> = {
|
|
3
3
|
onEnter?: PointerEventHandler<T>;
|
|
4
4
|
onLeave?: PointerEventHandler<T>;
|
|
5
5
|
};
|
|
@@ -10,5 +10,5 @@ type UsedHover<T> = [
|
|
|
10
10
|
onPointerLeave: PointerEventHandler<T>;
|
|
11
11
|
}
|
|
12
12
|
];
|
|
13
|
-
export declare const useHover: <T extends Element = Element>(
|
|
13
|
+
export declare const useHover: <T extends Element = Element>({ onEnter, onLeave, }?: UsingHover<T>) => UsedHover<T>;
|
|
14
14
|
export {};
|
package/dist/hooks/use-hover.mjs
CHANGED
|
@@ -2,8 +2,12 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
2
2
|
import { useBoolean } from './use-boolean.mjs';
|
|
3
3
|
import { chain } from '../utils/chain.mjs';
|
|
4
4
|
import { useEvent } from './use-event.mjs';
|
|
5
|
+
import { useDefault } from './use-default.mjs';
|
|
5
6
|
|
|
6
|
-
var useHover = function useHover(
|
|
7
|
+
var useHover = function useHover() {
|
|
8
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
9
|
+
onEnter = _ref.onEnter,
|
|
10
|
+
onLeave = _ref.onLeave;
|
|
7
11
|
var _useBoolean = useBoolean(false),
|
|
8
12
|
_useBoolean2 = _slicedToArray(_useBoolean, 2),
|
|
9
13
|
isHovered = _useBoolean2[0],
|
|
@@ -11,15 +15,18 @@ var useHover = function useHover(props) {
|
|
|
11
15
|
turnOn = _useBoolean2$.turnOn,
|
|
12
16
|
turnOff = _useBoolean2$.turnOff;
|
|
13
17
|
var onPointerEnter = useEvent(function (event) {
|
|
14
|
-
chain(
|
|
18
|
+
chain(onEnter, turnOn)(event);
|
|
15
19
|
});
|
|
16
20
|
var onPointerLeave = useEvent(function (event) {
|
|
17
|
-
chain(
|
|
21
|
+
chain(onLeave, turnOff)(event);
|
|
18
22
|
});
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
var hoverProps = useDefault(function () {
|
|
24
|
+
return {
|
|
25
|
+
onPointerEnter: onPointerEnter,
|
|
26
|
+
onPointerLeave: onPointerLeave
|
|
27
|
+
};
|
|
28
|
+
});
|
|
29
|
+
return [isHovered, hoverProps];
|
|
23
30
|
};
|
|
24
31
|
|
|
25
32
|
export { useHover };
|
|
@@ -16,10 +16,7 @@ type UsingInfiniteScroll = {
|
|
|
16
16
|
*/
|
|
17
17
|
onLoadMore?: () => void;
|
|
18
18
|
};
|
|
19
|
-
type UsedInfiniteScroll<S, V> = [
|
|
20
|
-
sentinelRef: RefObject<S | null>,
|
|
21
|
-
viewportRef: RefObject<V | null>
|
|
22
|
-
];
|
|
19
|
+
type UsedInfiniteScroll<S, V> = [sentinelRef: RefObject<S>, viewportRef: RefObject<V>];
|
|
23
20
|
/**
|
|
24
21
|
* @description
|
|
25
22
|
* use infinite scroll
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var toArray = require('../utils/to-array.cjs');
|
|
6
|
-
var useEvent = require('./use-event.cjs');
|
|
7
6
|
var replace = require('../utils/replace.cjs');
|
|
8
7
|
|
|
9
8
|
var useMediaQuery = function useMediaQuery(query) {
|
|
@@ -13,24 +12,21 @@ var useMediaQuery = function useMediaQuery(query) {
|
|
|
13
12
|
var queries = toArray.toArray(query);
|
|
14
13
|
var _useState = react.useState(function () {
|
|
15
14
|
return queries.map(function (query) {
|
|
16
|
-
var
|
|
17
|
-
return !!((
|
|
15
|
+
var _globalThis$window$ma, _globalThis$window;
|
|
16
|
+
return !!((_globalThis$window$ma = (_globalThis$window = globalThis.window).matchMedia) !== null && _globalThis$window$ma !== void 0 && (_globalThis$window$ma = _globalThis$window$ma.call(_globalThis$window, query)) !== null && _globalThis$window$ma !== void 0 && _globalThis$window$ma.matches);
|
|
18
17
|
});
|
|
19
18
|
}),
|
|
20
19
|
_useState2 = _slicedToArray(_useState, 2),
|
|
21
20
|
value = _useState2[0],
|
|
22
21
|
setValue = _useState2[1];
|
|
23
|
-
var onMediaQueryChange =
|
|
22
|
+
var onMediaQueryChange = react.useCallback(function (event, index) {
|
|
24
23
|
setValue(function (prev) {
|
|
25
|
-
return replace.replace(prev,
|
|
26
|
-
index: index,
|
|
27
|
-
replaceValue: event.matches
|
|
28
|
-
});
|
|
24
|
+
return replace.replace(prev, event.matches, index);
|
|
29
25
|
});
|
|
30
|
-
});
|
|
26
|
+
}, []);
|
|
31
27
|
react.useEffect(function () {
|
|
32
28
|
var mediaQueries = queries.map(function (query) {
|
|
33
|
-
return window.matchMedia(query);
|
|
29
|
+
return globalThis.window.matchMedia(query);
|
|
34
30
|
});
|
|
35
31
|
// listen media query change
|
|
36
32
|
var cleaners = mediaQueries.map(function (mediaQuery, index) {
|
|
@@ -39,13 +35,13 @@ var useMediaQuery = function useMediaQuery(query) {
|
|
|
39
35
|
};
|
|
40
36
|
mediaQuery.addEventListener("change", listener);
|
|
41
37
|
return function () {
|
|
42
|
-
|
|
38
|
+
mediaQuery.removeEventListener("change", listener);
|
|
43
39
|
};
|
|
44
40
|
});
|
|
45
41
|
// clean up all listeners
|
|
46
42
|
return function () {
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
cleaners.forEach(function (cleaner) {
|
|
44
|
+
cleaner();
|
|
49
45
|
});
|
|
50
46
|
};
|
|
51
47
|
}, [_query]);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
|
-
import { useMemo, useState, useEffect } from 'react';
|
|
2
|
+
import { useMemo, useState, useCallback, useEffect } from 'react';
|
|
3
3
|
import { toArray } from '../utils/to-array.mjs';
|
|
4
|
-
import { useEvent } from './use-event.mjs';
|
|
5
4
|
import { replace } from '../utils/replace.mjs';
|
|
6
5
|
|
|
7
6
|
var useMediaQuery = function useMediaQuery(query) {
|
|
@@ -11,24 +10,21 @@ var useMediaQuery = function useMediaQuery(query) {
|
|
|
11
10
|
var queries = toArray(query);
|
|
12
11
|
var _useState = useState(function () {
|
|
13
12
|
return queries.map(function (query) {
|
|
14
|
-
var
|
|
15
|
-
return !!((
|
|
13
|
+
var _globalThis$window$ma, _globalThis$window;
|
|
14
|
+
return !!((_globalThis$window$ma = (_globalThis$window = globalThis.window).matchMedia) !== null && _globalThis$window$ma !== void 0 && (_globalThis$window$ma = _globalThis$window$ma.call(_globalThis$window, query)) !== null && _globalThis$window$ma !== void 0 && _globalThis$window$ma.matches);
|
|
16
15
|
});
|
|
17
16
|
}),
|
|
18
17
|
_useState2 = _slicedToArray(_useState, 2),
|
|
19
18
|
value = _useState2[0],
|
|
20
19
|
setValue = _useState2[1];
|
|
21
|
-
var onMediaQueryChange =
|
|
20
|
+
var onMediaQueryChange = useCallback(function (event, index) {
|
|
22
21
|
setValue(function (prev) {
|
|
23
|
-
return replace(prev,
|
|
24
|
-
index: index,
|
|
25
|
-
replaceValue: event.matches
|
|
26
|
-
});
|
|
22
|
+
return replace(prev, event.matches, index);
|
|
27
23
|
});
|
|
28
|
-
});
|
|
24
|
+
}, []);
|
|
29
25
|
useEffect(function () {
|
|
30
26
|
var mediaQueries = queries.map(function (query) {
|
|
31
|
-
return window.matchMedia(query);
|
|
27
|
+
return globalThis.window.matchMedia(query);
|
|
32
28
|
});
|
|
33
29
|
// listen media query change
|
|
34
30
|
var cleaners = mediaQueries.map(function (mediaQuery, index) {
|
|
@@ -37,13 +33,13 @@ var useMediaQuery = function useMediaQuery(query) {
|
|
|
37
33
|
};
|
|
38
34
|
mediaQuery.addEventListener("change", listener);
|
|
39
35
|
return function () {
|
|
40
|
-
|
|
36
|
+
mediaQuery.removeEventListener("change", listener);
|
|
41
37
|
};
|
|
42
38
|
});
|
|
43
39
|
// clean up all listeners
|
|
44
40
|
return function () {
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
cleaners.forEach(function (cleaner) {
|
|
42
|
+
cleaner();
|
|
47
43
|
});
|
|
48
44
|
};
|
|
49
45
|
}, [_query]);
|
package/dist/hooks/use-raf.d.ts
CHANGED
|
@@ -32,22 +32,7 @@ var useThrottler = function useThrottler(throttler) {
|
|
|
32
32
|
pipe: pipe
|
|
33
33
|
};
|
|
34
34
|
};
|
|
35
|
-
|
|
36
|
-
* @author murukal
|
|
37
|
-
*
|
|
38
|
-
* @description
|
|
39
|
-
* throttle callback
|
|
40
|
-
*
|
|
41
|
-
* @param callback
|
|
42
|
-
* @param wait number
|
|
43
|
-
* @description
|
|
44
|
-
* The wait time (in milliseconds) until the throttle function is called.
|
|
45
|
-
* default 1000
|
|
46
|
-
*
|
|
47
|
-
* @example
|
|
48
|
-
* 1000
|
|
49
|
-
*/
|
|
50
|
-
var useThrottleCallback = function useThrottleCallback(throttler) {
|
|
35
|
+
function useThrottleCallback(throttler) {
|
|
51
36
|
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
|
|
52
37
|
var throttled = react.useRef(null);
|
|
53
38
|
var _useThrottler = useThrottler(throttler),
|
|
@@ -84,6 +69,6 @@ var useThrottleCallback = function useThrottleCallback(throttler) {
|
|
|
84
69
|
}
|
|
85
70
|
};
|
|
86
71
|
});
|
|
87
|
-
}
|
|
72
|
+
}
|
|
88
73
|
|
|
89
74
|
exports.useThrottleCallback = useThrottleCallback;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Throttler, type Throttled } from "../utils/throttle";
|
|
2
|
-
import {
|
|
2
|
+
import type { AnyFunction } from "@aiszlab/relax/types";
|
|
3
3
|
/**
|
|
4
4
|
* @author murukal
|
|
5
5
|
*
|
|
@@ -15,4 +15,6 @@ import { type Callable } from "./use-event";
|
|
|
15
15
|
* @example
|
|
16
16
|
* 1000
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
declare function useThrottleCallback<T extends AnyFunction>(callback: T, wait: number): Throttled<T>;
|
|
19
|
+
declare function useThrottleCallback<T extends AnyFunction, R>(throttler: Throttler<T, R>, wait: number): Throttled<T>;
|
|
20
|
+
export { useThrottleCallback };
|
|
@@ -30,22 +30,7 @@ var useThrottler = function useThrottler(throttler) {
|
|
|
30
30
|
pipe: pipe
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
|
-
|
|
34
|
-
* @author murukal
|
|
35
|
-
*
|
|
36
|
-
* @description
|
|
37
|
-
* throttle callback
|
|
38
|
-
*
|
|
39
|
-
* @param callback
|
|
40
|
-
* @param wait number
|
|
41
|
-
* @description
|
|
42
|
-
* The wait time (in milliseconds) until the throttle function is called.
|
|
43
|
-
* default 1000
|
|
44
|
-
*
|
|
45
|
-
* @example
|
|
46
|
-
* 1000
|
|
47
|
-
*/
|
|
48
|
-
var useThrottleCallback = function useThrottleCallback(throttler) {
|
|
33
|
+
function useThrottleCallback(throttler) {
|
|
49
34
|
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
|
|
50
35
|
var throttled = useRef(null);
|
|
51
36
|
var _useThrottler = useThrottler(throttler),
|
|
@@ -82,6 +67,6 @@ var useThrottleCallback = function useThrottleCallback(throttler) {
|
|
|
82
67
|
}
|
|
83
68
|
};
|
|
84
69
|
});
|
|
85
|
-
}
|
|
70
|
+
}
|
|
86
71
|
|
|
87
72
|
export { useThrottleCallback };
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import type { AnyFunction } from "@aiszlab/relax/types";
|
|
1
2
|
/**
|
|
2
3
|
* @author murukal
|
|
3
4
|
*
|
|
4
5
|
* @description
|
|
5
6
|
* timeout effect
|
|
6
7
|
*/
|
|
7
|
-
export declare const useTimeout: (callback:
|
|
8
|
+
export declare const useTimeout: (callback: AnyFunction, wait: number) => {
|
|
8
9
|
flush: () => void;
|
|
9
10
|
cancel: () => void;
|
|
10
11
|
};
|
package/dist/index.cjs
CHANGED
|
@@ -73,6 +73,7 @@ var last = require('./utils/last.cjs');
|
|
|
73
73
|
var merge = require('./utils/merge.cjs');
|
|
74
74
|
var max = require('./utils/max.cjs');
|
|
75
75
|
var min = require('./utils/min.cjs');
|
|
76
|
+
var load = require('./utils/load.cjs');
|
|
76
77
|
|
|
77
78
|
|
|
78
79
|
|
|
@@ -149,3 +150,4 @@ exports.last = last.last;
|
|
|
149
150
|
exports.merge = merge.merge;
|
|
150
151
|
exports.max = max.max;
|
|
151
152
|
exports.min = min.min;
|
|
153
|
+
exports.load = load.load;
|
package/dist/index.d.ts
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const isBoolean: (value: unknown) => value is boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type AnyFunction = (...args: any) => any;
|
package/dist/types/index.d.ts
CHANGED
package/dist/types/last.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export type Last<T, R = undefined> = T extends [...Array<unknown>, infer D] ? D : R;
|
|
1
|
+
export type Last<T, R = undefined> = T extends [...Array<unknown>, infer D] ? D : T extends Array<infer S> ? S | undefined : R;
|