@mantine/hooks 5.0.0-alpha.4 → 5.0.0-alpha.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/cjs/index.js +2 -1
- package/cjs/index.js.map +1 -1
- package/cjs/use-counter/use-counter.js +5 -13
- package/cjs/use-counter/use-counter.js.map +1 -1
- package/cjs/use-focus-return/use-focus-return.js +1 -1
- package/cjs/use-focus-return/use-focus-return.js.map +1 -1
- package/cjs/use-intersection/use-intersection.js +1 -1
- package/cjs/use-intersection/use-intersection.js.map +1 -1
- package/cjs/use-interval/use-interval.js +6 -4
- package/cjs/use-interval/use-interval.js.map +1 -1
- package/cjs/use-move/use-move.js +5 -5
- package/cjs/use-move/use-move.js.map +1 -1
- package/cjs/use-timeout/use-timeout.js +33 -0
- package/cjs/use-timeout/use-timeout.js.map +1 -0
- package/cjs/use-toggle/use-toggle.js +2 -6
- package/cjs/use-toggle/use-toggle.js.map +1 -1
- package/cjs/utils/clamp/clamp.js +1 -1
- package/cjs/utils/clamp/clamp.js.map +1 -1
- package/esm/index.js +2 -1
- package/esm/index.js.map +1 -1
- package/esm/use-counter/use-counter.js +5 -13
- package/esm/use-counter/use-counter.js.map +1 -1
- package/esm/use-focus-return/use-focus-return.js +1 -1
- package/esm/use-focus-return/use-focus-return.js.map +1 -1
- package/esm/use-intersection/use-intersection.js +1 -1
- package/esm/use-intersection/use-intersection.js.map +1 -1
- package/esm/use-interval/use-interval.js +6 -4
- package/esm/use-interval/use-interval.js.map +1 -1
- package/esm/use-move/use-move.js +5 -5
- package/esm/use-move/use-move.js.map +1 -1
- package/esm/use-timeout/use-timeout.js +29 -0
- package/esm/use-timeout/use-timeout.js.map +1 -0
- package/esm/use-toggle/use-toggle.js +3 -6
- package/esm/use-toggle/use-toggle.js.map +1 -1
- package/esm/utils/clamp/clamp.js +1 -1
- package/esm/utils/clamp/clamp.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/use-counter/use-counter.d.ts.map +1 -1
- package/lib/use-intersection/use-intersection.d.ts +4 -1
- package/lib/use-intersection/use-intersection.d.ts.map +1 -1
- package/lib/use-interval/use-interval.d.ts.map +1 -1
- package/lib/use-timeout/use-timeout.d.ts +7 -0
- package/lib/use-timeout/use-timeout.d.ts.map +1 -0
- package/lib/use-toggle/use-toggle.d.ts +1 -2
- package/lib/use-toggle/use-toggle.d.ts.map +1 -1
- package/lib/utils/clamp/clamp.d.ts +1 -7
- package/lib/utils/clamp/clamp.d.ts.map +1 -1
- package/package.json +1 -1
- package/cjs/use-uuid/use-uuid.js +0 -18
- package/cjs/use-uuid/use-uuid.js.map +0 -1
- package/esm/use-uuid/use-uuid.js +0 -14
- package/esm/use-uuid/use-uuid.js.map +0 -1
- package/lib/use-uuid/use-uuid.d.ts +0 -2
- package/lib/use-uuid/use-uuid.d.ts.map +0 -1
package/cjs/index.js
CHANGED
|
@@ -50,6 +50,7 @@ var useEventListener = require('./use-event-listener/use-event-listener.js');
|
|
|
50
50
|
var useDisclosure = require('./use-disclosure/use-disclosure.js');
|
|
51
51
|
var useFocusWithin = require('./use-focus-within/use-focus-within.js');
|
|
52
52
|
var useNetwork = require('./use-network/use-network.js');
|
|
53
|
+
var useTimeout = require('./use-timeout/use-timeout.js');
|
|
53
54
|
var parseHotkey = require('./use-hotkeys/parse-hotkey.js');
|
|
54
55
|
var assignRef = require('./utils/assign-ref/assign-ref.js');
|
|
55
56
|
var clamp = require('./utils/clamp/clamp.js');
|
|
@@ -93,7 +94,6 @@ exports.useElementSize = useResizeObserver.useElementSize;
|
|
|
93
94
|
exports.useResizeObserver = useResizeObserver.useResizeObserver;
|
|
94
95
|
exports.useScrollLock = useScrollLock.useScrollLock;
|
|
95
96
|
exports.useShallowEffect = useShallowEffect.useShallowEffect;
|
|
96
|
-
exports.useBooleanToggle = useToggle.useBooleanToggle;
|
|
97
97
|
exports.useToggle = useToggle.useToggle;
|
|
98
98
|
exports.useUncontrolled = useUncontrolled.useUncontrolled;
|
|
99
99
|
exports.useViewportSize = useViewportSize.useViewportSize;
|
|
@@ -113,6 +113,7 @@ exports.useEventListener = useEventListener.useEventListener;
|
|
|
113
113
|
exports.useDisclosure = useDisclosure.useDisclosure;
|
|
114
114
|
exports.useFocusWithin = useFocusWithin.useFocusWithin;
|
|
115
115
|
exports.useNetwork = useNetwork.useNetwork;
|
|
116
|
+
exports.useTimeout = useTimeout.useTimeout;
|
|
116
117
|
exports.getHotkeyHandler = parseHotkey.getHotkeyHandler;
|
|
117
118
|
exports.assignRef = assignRef.assignRef;
|
|
118
119
|
exports.clamp = clamp.clamp;
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -27,19 +27,11 @@ const DEFAULT_OPTIONS = {
|
|
|
27
27
|
};
|
|
28
28
|
function useCounter(initialValue = 0, options) {
|
|
29
29
|
const { min, max } = __spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options);
|
|
30
|
-
const [count, setCount] = React.useState(clamp.clamp(
|
|
31
|
-
const increment = (delta = 1) =>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
setCount((current) => clamp.clamp({ value: current - delta, min, max }));
|
|
36
|
-
};
|
|
37
|
-
const set = (value) => {
|
|
38
|
-
setCount(clamp.clamp({ value, min, max }));
|
|
39
|
-
};
|
|
40
|
-
const reset = () => {
|
|
41
|
-
setCount(clamp.clamp({ value: initialValue, min, max }));
|
|
42
|
-
};
|
|
30
|
+
const [count, setCount] = React.useState(clamp.clamp(initialValue, min, max));
|
|
31
|
+
const increment = (delta = 1) => setCount((current) => clamp.clamp(current + delta, min, max));
|
|
32
|
+
const decrement = (delta = 1) => setCount((current) => clamp.clamp(current - delta, min, max));
|
|
33
|
+
const set = (value) => setCount(clamp.clamp(value, min, max));
|
|
34
|
+
const reset = () => setCount(clamp.clamp(initialValue, min, max));
|
|
43
35
|
return [count, { increment, decrement, set, reset }];
|
|
44
36
|
}
|
|
45
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-counter.js","sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n min: -Infinity,\n max: Infinity,\n};\n\nexport function useCounter(initialValue = 0, options?: Partial<{ min: number; max: number }>) {\n const { min, max } = { ...DEFAULT_OPTIONS, ...options };\n const [count, setCount] = useState<number>(clamp(
|
|
1
|
+
{"version":3,"file":"use-counter.js","sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n min: -Infinity,\n max: Infinity,\n};\n\nexport function useCounter(initialValue = 0, options?: Partial<{ min: number; max: number }>) {\n const { min, max } = { ...DEFAULT_OPTIONS, ...options };\n const [count, setCount] = useState<number>(clamp(initialValue, min, max));\n\n const increment = (delta = 1) => setCount((current) => clamp(current + delta, min, max));\n const decrement = (delta = 1) => setCount((current) => clamp(current - delta, min, max));\n const set = (value: number) => setCount(clamp(value, min, max));\n const reset = () => setCount(clamp(initialValue, min, max));\n\n return [count, { increment, decrement, set, reset }] as const;\n}\n"],"names":["useState","clamp"],"mappings":";;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAGF,MAAM,eAAe,GAAG;AACxB,EAAE,GAAG,EAAE,CAAC,QAAQ;AAChB,EAAE,GAAG,EAAE,QAAQ;AACf,CAAC,CAAC;AACK,SAAS,UAAU,CAAC,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE;AACtD,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC;AACpF,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAACC,WAAK,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AACpE,EAAE,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAKA,WAAK,CAAC,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3F,EAAE,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAKA,WAAK,CAAC,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3F,EAAE,MAAM,GAAG,GAAG,CAAC,KAAK,KAAK,QAAQ,CAACA,WAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC1D,EAAE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAACA,WAAK,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC9D,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;AACvD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n transitionDuration: number;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({\n opened,\n transitionDuration,\n shouldReturnFocus = true,\n}: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.
|
|
1
|
+
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n transitionDuration: number;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({\n opened,\n transitionDuration,\n shouldReturnFocus = true,\n}: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n window.clearTimeout(timeout);\n }\n };\n\n document.addEventListener('keydown', clearFocusTimeout);\n\n if (opened) {\n lastActiveElement.current = document.activeElement as HTMLElement;\n } else if (shouldReturnFocus) {\n timeout = window.setTimeout(returnFocus, transitionDuration + 10);\n }\n\n return () => {\n window.clearTimeout(timeout);\n document.removeEventListener('keydown', clearFocusTimeout);\n };\n }, [opened]);\n\n return returnFocus;\n}\n"],"names":["useRef","useDidUpdate"],"mappings":";;;;;;;AAEO,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,kBAAkB;AACpB,EAAE,iBAAiB,GAAG,IAAI;AAC1B,CAAC,EAAE;AACH,EAAE,MAAM,iBAAiB,GAAGA,YAAM,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;AACpI,MAAM,CAAC,EAAE,GAAG,iBAAiB,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;AACrE,KAAK;AACL,GAAG,CAAC;AACJ,EAAEC,yBAAY,CAAC,MAAM;AACrB,IAAI,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;AACrB,IAAI,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK;AACzC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AAC/B,QAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC5D,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;AACzD,KAAK,MAAM,IAAI,iBAAiB,EAAE;AAClC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,kBAAkB,GAAG,EAAE,CAAC,CAAC;AACxE,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,OAAO,WAAW,CAAC;AACrB;;;;"}
|
|
@@ -21,7 +21,7 @@ function useIntersection(options) {
|
|
|
21
21
|
}, options);
|
|
22
22
|
observer.current.observe(element);
|
|
23
23
|
}, [options == null ? void 0 : options.rootMargin, options == null ? void 0 : options.root, options == null ? void 0 : options.threshold]);
|
|
24
|
-
return
|
|
24
|
+
return { ref, entry };
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
exports.useIntersection = useIntersection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-intersection.js","sources":["../../src/use-intersection/use-intersection.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport function useIntersection<T extends HTMLElement = any>(\n options?: ConstructorParameters<typeof IntersectionObserver>[1]\n)
|
|
1
|
+
{"version":3,"file":"use-intersection.js","sources":["../../src/use-intersection/use-intersection.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport function useIntersection<T extends HTMLElement = any>(\n options?: ConstructorParameters<typeof IntersectionObserver>[1]\n) {\n const [entry, setEntry] = useState<IntersectionObserverEntry>(null);\n\n const observer = useRef<IntersectionObserver>();\n\n const ref = useCallback(\n (element: T | null) => {\n if (observer.current) {\n observer.current.disconnect();\n observer.current = null;\n }\n\n if (element === null) {\n setEntry(null);\n return;\n }\n\n observer.current = new IntersectionObserver(([_entry]) => {\n setEntry(_entry);\n }, options);\n\n observer.current.observe(element);\n },\n [options?.rootMargin, options?.root, options?.threshold]\n );\n\n return { ref, entry };\n}\n"],"names":["useState","useRef","useCallback"],"mappings":";;;;;;AACO,SAAS,eAAe,CAAC,OAAO,EAAE;AACzC,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC,CAAC;AAC3C,EAAE,MAAM,QAAQ,GAAGC,YAAM,EAAE,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAGC,iBAAW,CAAC,CAAC,OAAO,KAAK;AACvC,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE;AAC1B,MAAM,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;AACpC,MAAM,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAC9B,KAAK;AACL,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE;AAC1B,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;AACrB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,QAAQ,CAAC,OAAO,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;AAC9D,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AACvB,KAAK,EAAE,OAAO,CAAC,CAAC;AAChB,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACtC,GAAG,EAAE,CAAC,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;AAC7I,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AACxB;;;;"}
|
|
@@ -8,10 +8,12 @@ function useInterval(fn, interval) {
|
|
|
8
8
|
const [active, setActive] = React.useState(false);
|
|
9
9
|
const intervalRef = React.useRef();
|
|
10
10
|
const start = () => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
setActive((old) => {
|
|
12
|
+
if (!old) {
|
|
13
|
+
intervalRef.current = window.setInterval(fn, interval);
|
|
14
|
+
}
|
|
15
|
+
return true;
|
|
16
|
+
});
|
|
15
17
|
};
|
|
16
18
|
const stop = () => {
|
|
17
19
|
setActive(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-interval.js","sources":["../../src/use-interval/use-interval.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nexport function useInterval(fn: () => void, interval: number) {\n const [active, setActive] = useState(false);\n const intervalRef = useRef<number>();\n\n const start = () => {\n
|
|
1
|
+
{"version":3,"file":"use-interval.js","sources":["../../src/use-interval/use-interval.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nexport function useInterval(fn: () => void, interval: number) {\n const [active, setActive] = useState(false);\n const intervalRef = useRef<number>();\n\n const start = () => {\n setActive((old) => {\n if (!old) {\n intervalRef.current = window.setInterval(fn, interval);\n }\n return true;\n });\n };\n\n const stop = () => {\n setActive(false);\n window.clearInterval(intervalRef.current);\n };\n\n const toggle = () => {\n if (active) {\n stop();\n } else {\n start();\n }\n };\n\n return { start, stop, toggle, active };\n}\n"],"names":["useState","useRef"],"mappings":";;;;;;AACO,SAAS,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE;AAC1C,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAE,MAAM,WAAW,GAAGC,YAAM,EAAE,CAAC;AAC/B,EAAE,MAAM,KAAK,GAAG,MAAM;AACtB,IAAI,SAAS,CAAC,CAAC,GAAG,KAAK;AACvB,MAAM,IAAI,CAAC,GAAG,EAAE;AAChB,QAAQ,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;AAC/D,OAAO;AACP,MAAM,OAAO,IAAI,CAAC;AAClB,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ,EAAE,MAAM,IAAI,GAAG,MAAM;AACrB,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;AACrB,IAAI,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9C,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,MAAM;AACvB,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,IAAI,EAAE,CAAC;AACb,KAAK,MAAM;AACX,MAAM,KAAK,EAAE,CAAC;AACd,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AACzC;;;;"}
|
package/cjs/use-move/use-move.js
CHANGED
|
@@ -6,8 +6,8 @@ var React = require('react');
|
|
|
6
6
|
var clamp = require('../utils/clamp/clamp.js');
|
|
7
7
|
|
|
8
8
|
const clampUseMovePosition = (position) => ({
|
|
9
|
-
x: clamp.clamp(
|
|
10
|
-
y: clamp.clamp(
|
|
9
|
+
x: clamp.clamp(position.x, 0, 1),
|
|
10
|
+
y: clamp.clamp(position.y, 0, 1)
|
|
11
11
|
});
|
|
12
12
|
function useMove(onChange, handlers, dir = "ltr") {
|
|
13
13
|
const ref = React.useRef();
|
|
@@ -26,10 +26,10 @@ function useMove(onChange, handlers, dir = "ltr") {
|
|
|
26
26
|
ref.current.style.userSelect = "none";
|
|
27
27
|
const rect = ref.current.getBoundingClientRect();
|
|
28
28
|
if (rect.width && rect.height) {
|
|
29
|
-
const _x = clamp.clamp(
|
|
29
|
+
const _x = clamp.clamp((x - rect.left) / rect.width, 0, 1);
|
|
30
30
|
onChange({
|
|
31
31
|
x: dir === "ltr" ? _x : 1 - _x,
|
|
32
|
-
y: clamp.clamp(
|
|
32
|
+
y: clamp.clamp((y - rect.top) / rect.height, 0, 1)
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -80,7 +80,7 @@ function useMove(onChange, handlers, dir = "ltr") {
|
|
|
80
80
|
onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
|
|
81
81
|
};
|
|
82
82
|
ref.current.addEventListener("mousedown", onMouseDown);
|
|
83
|
-
ref.current.addEventListener("touchstart", onTouchStart);
|
|
83
|
+
ref.current.addEventListener("touchstart", onTouchStart, { passive: false });
|
|
84
84
|
return () => {
|
|
85
85
|
if (ref.current) {
|
|
86
86
|
ref.current.removeEventListener("mousedown", onMouseDown);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-move.js","sources":["../../src/use-move/use-move.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useEffect, useState, useRef } from 'react';\nimport { clamp } from '../utils';\n\nexport interface UseMovePosition {\n x: number;\n y: number;\n}\n\nexport const clampUseMovePosition = (position: UseMovePosition) => ({\n x: clamp(
|
|
1
|
+
{"version":3,"file":"use-move.js","sources":["../../src/use-move/use-move.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useEffect, useState, useRef } from 'react';\nimport { clamp } from '../utils';\n\nexport interface UseMovePosition {\n x: number;\n y: number;\n}\n\nexport const clampUseMovePosition = (position: UseMovePosition) => ({\n x: clamp(position.x, 0, 1),\n y: clamp(position.y, 0, 1),\n});\n\ninterface useMoveHandlers {\n onScrubStart?(): void;\n onScrubEnd?(): void;\n}\n\nexport function useMove<T extends HTMLElement = HTMLDivElement>(\n onChange: (value: UseMovePosition) => void,\n handlers?: useMoveHandlers,\n dir: 'ltr' | 'rtl' = 'ltr'\n) {\n const ref = useRef<T>();\n const mounted = useRef<boolean>(false);\n const isSliding = useRef(false);\n const frame = useRef(0);\n const [active, setActive] = useState(false);\n\n useEffect(() => {\n mounted.current = true;\n }, []);\n\n useEffect(() => {\n const onScrub = ({ x, y }: UseMovePosition) => {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (mounted.current && ref.current) {\n ref.current.style.userSelect = 'none';\n const rect = ref.current.getBoundingClientRect();\n\n if (rect.width && rect.height) {\n const _x = clamp((x - rect.left) / rect.width, 0, 1);\n onChange({\n x: dir === 'ltr' ? _x : 1 - _x,\n y: clamp((y - rect.top) / rect.height, 0, 1),\n });\n }\n }\n });\n };\n\n const bindEvents = () => {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', stopScrubbing);\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchend', stopScrubbing);\n };\n\n const unbindEvents = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', stopScrubbing);\n document.removeEventListener('touchmove', onTouchMove);\n document.removeEventListener('touchend', stopScrubbing);\n };\n\n const startScrubbing = () => {\n if (!isSliding.current && mounted.current) {\n isSliding.current = true;\n typeof handlers?.onScrubStart === 'function' && handlers.onScrubStart();\n setActive(true);\n bindEvents();\n }\n };\n\n const stopScrubbing = () => {\n if (isSliding.current && mounted.current) {\n isSliding.current = false;\n setActive(false);\n unbindEvents();\n setTimeout(() => {\n typeof handlers?.onScrubEnd === 'function' && handlers.onScrubEnd();\n }, 0);\n }\n };\n\n const onMouseDown = (event: MouseEvent) => {\n startScrubbing();\n onMouseMove(event);\n };\n\n const onMouseMove = (event: MouseEvent) => onScrub({ x: event.clientX, y: event.clientY });\n\n const onTouchStart = (event: TouchEvent) => {\n startScrubbing();\n event?.preventDefault();\n onTouchMove(event);\n };\n\n const onTouchMove = (event: TouchEvent) => {\n event?.preventDefault();\n onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });\n };\n\n ref.current.addEventListener('mousedown', onMouseDown);\n ref.current.addEventListener('touchstart', onTouchStart, { passive: false });\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener('mousedown', onMouseDown);\n ref.current.removeEventListener('touchstart', onTouchStart);\n }\n };\n }, [dir, onChange]);\n\n return { ref, active };\n}\n"],"names":["clamp","useRef","useState","useEffect"],"mappings":";;;;;;;AAEY,MAAC,oBAAoB,GAAG,CAAC,QAAQ,MAAM;AACnD,EAAE,CAAC,EAAEA,WAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAC5B,EAAE,CAAC,EAAEA,WAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAC5B,CAAC,EAAE;AACI,SAAS,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,GAAG,KAAK,EAAE;AACzD,EAAE,MAAM,GAAG,GAAGC,YAAM,EAAE,CAAC;AACvB,EAAE,MAAM,OAAO,GAAGA,YAAM,CAAC,KAAK,CAAC,CAAC;AAChC,EAAE,MAAM,SAAS,GAAGA,YAAM,CAAC,KAAK,CAAC,CAAC;AAClC,EAAE,MAAM,KAAK,GAAGA,YAAM,CAAC,CAAC,CAAC,CAAC;AAC1B,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;AAC3B,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,OAAO,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK;AAClC,MAAM,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAC1C,MAAM,KAAK,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AAClD,QAAQ,IAAI,OAAO,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,EAAE;AAC5C,UAAU,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;AAChD,UAAU,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;AAC3D,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;AACzC,YAAY,MAAM,EAAE,GAAGH,WAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACjE,YAAY,QAAQ,CAAC;AACrB,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE;AAC5C,cAAc,CAAC,EAAEA,WAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;AAC1D,aAAa,CAAC,CAAC;AACf,WAAW;AACX,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,IAAI,MAAM,UAAU,GAAG,MAAM;AAC7B,MAAM,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC1D,MAAM,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC1D,MAAM,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC1D,MAAM,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AAC3D,KAAK,CAAC;AACN,IAAI,MAAM,YAAY,GAAG,MAAM;AAC/B,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AAC9D,KAAK,CAAC;AACN,IAAI,MAAM,cAAc,GAAG,MAAM;AACjC,MAAM,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;AACjD,QAAQ,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;AACjC,QAAQ,QAAQ,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,UAAU,IAAI,QAAQ,CAAC,YAAY,EAAE,CAAC;AAC7G,QAAQ,SAAS,CAAC,IAAI,CAAC,CAAC;AACxB,QAAQ,UAAU,EAAE,CAAC;AACrB,OAAO;AACP,KAAK,CAAC;AACN,IAAI,MAAM,aAAa,GAAG,MAAM;AAChC,MAAM,IAAI,SAAS,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;AAChD,QAAQ,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAClC,QAAQ,SAAS,CAAC,KAAK,CAAC,CAAC;AACzB,QAAQ,YAAY,EAAE,CAAC;AACvB,QAAQ,UAAU,CAAC,MAAM;AACzB,UAAU,QAAQ,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,UAAU,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC3G,SAAS,EAAE,CAAC,CAAC,CAAC;AACd,OAAO;AACP,KAAK,CAAC;AACN,IAAI,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK;AACnC,MAAM,cAAc,EAAE,CAAC;AACvB,MAAM,WAAW,CAAC,KAAK,CAAC,CAAC;AACzB,KAAK,CAAC;AACN,IAAI,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;AACnF,IAAI,MAAM,YAAY,GAAG,CAAC,KAAK,KAAK;AACpC,MAAM,cAAc,EAAE,CAAC;AACvB,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;AACtD,MAAM,WAAW,CAAC,KAAK,CAAC,CAAC;AACzB,KAAK,CAAC;AACN,IAAI,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK;AACnC,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;AACtD,MAAM,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;AAC1F,KAAK,CAAC;AACN,IAAI,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC3D,IAAI,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AACjF,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,GAAG,CAAC,OAAO,EAAE;AACvB,QAAQ,GAAG,CAAC,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAClE,QAAQ,GAAG,CAAC,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AACpE,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AACzB;;;;;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
function useTimeout(fn, delay, options = { autoInvoke: false }) {
|
|
8
|
+
const timeoutRef = React.useRef(null);
|
|
9
|
+
const start = () => {
|
|
10
|
+
if (!timeoutRef.current) {
|
|
11
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
12
|
+
fn();
|
|
13
|
+
timeoutRef.current = null;
|
|
14
|
+
}, delay);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
const clear = () => {
|
|
18
|
+
if (timeoutRef.current) {
|
|
19
|
+
window.clearTimeout(timeoutRef.current);
|
|
20
|
+
timeoutRef.current = null;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
React.useEffect(() => {
|
|
24
|
+
if (options.autoInvoke) {
|
|
25
|
+
start();
|
|
26
|
+
}
|
|
27
|
+
return clear;
|
|
28
|
+
}, [delay]);
|
|
29
|
+
return { start, clear };
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
exports.useTimeout = useTimeout;
|
|
33
|
+
//# sourceMappingURL=use-timeout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-timeout.js","sources":["../../src/use-timeout/use-timeout.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\nexport function useTimeout(\n fn: () => void,\n delay: number,\n options: { autoInvoke: boolean } = { autoInvoke: false }\n) {\n const timeoutRef = useRef<number>(null);\n\n const start = () => {\n if (!timeoutRef.current) {\n timeoutRef.current = window.setTimeout(() => {\n fn();\n timeoutRef.current = null;\n }, delay);\n }\n };\n\n const clear = () => {\n if (timeoutRef.current) {\n window.clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n\n useEffect(() => {\n if (options.autoInvoke) {\n start();\n }\n\n return clear;\n }, [delay]);\n\n return { start, clear };\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;;;AACO,SAAS,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;AACvE,EAAE,MAAM,UAAU,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,MAAM,KAAK,GAAG,MAAM;AACtB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM;AACnD,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;AAClC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChB,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,KAAK,GAAG,MAAM;AACtB,IAAI,IAAI,UAAU,CAAC,OAAO,EAAE;AAC5B,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC9C,MAAM,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;AAChC,KAAK;AACL,GAAG,CAAC;AACJ,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,OAAO,CAAC,UAAU,EAAE;AAC5B,MAAM,KAAK,EAAE,CAAC;AACd,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC1B;;;;"}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
|
|
7
|
-
function useToggle(
|
|
8
|
-
const [state, setState] = React.useState(
|
|
7
|
+
function useToggle(options) {
|
|
8
|
+
const [state, setState] = React.useState(options[0]);
|
|
9
9
|
const toggle = (value) => {
|
|
10
10
|
if (typeof value !== "undefined") {
|
|
11
11
|
setState(value);
|
|
@@ -20,10 +20,6 @@ function useToggle(initialValue, options) {
|
|
|
20
20
|
};
|
|
21
21
|
return [state, toggle];
|
|
22
22
|
}
|
|
23
|
-
function useBooleanToggle(initialValue = false) {
|
|
24
|
-
return useToggle(initialValue, [true, false]);
|
|
25
|
-
}
|
|
26
23
|
|
|
27
|
-
exports.useBooleanToggle = useBooleanToggle;
|
|
28
24
|
exports.useToggle = useToggle;
|
|
29
25
|
//# sourceMappingURL=use-toggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toggle.js","sources":["../../src/use-toggle/use-toggle.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useToggle<T>(
|
|
1
|
+
{"version":3,"file":"use-toggle.js","sources":["../../src/use-toggle/use-toggle.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useToggle<T>(options: [T, T]) {\n const [state, setState] = useState(options[0]);\n\n const toggle = (value?: React.SetStateAction<T>) => {\n if (typeof value !== 'undefined') {\n setState(value);\n } else {\n setState((current) => {\n if (current === options[0]) {\n return options[1];\n }\n\n return options[0];\n });\n }\n };\n\n return [state, toggle] as const;\n}\n"],"names":["useState"],"mappings":";;;;;;AACO,SAAS,SAAS,CAAC,OAAO,EAAE;AACnC,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AACjD,EAAE,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK;AAC5B,IAAI,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;AACtC,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtB,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,CAAC,OAAO,KAAK;AAC5B,QAAQ,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE;AACpC,UAAU,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AAC5B,SAAS;AACT,QAAQ,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1B,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzB;;;;"}
|
package/cjs/utils/clamp/clamp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp/clamp.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp/clamp.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -27,7 +27,7 @@ export { useScrollIntoView } from './use-scroll-into-view/use-scroll-into-view.j
|
|
|
27
27
|
export { useElementSize, useResizeObserver } from './use-resize-observer/use-resize-observer.js';
|
|
28
28
|
export { useScrollLock } from './use-scroll-lock/use-scroll-lock.js';
|
|
29
29
|
export { useShallowEffect } from './use-shallow-effect/use-shallow-effect.js';
|
|
30
|
-
export {
|
|
30
|
+
export { useToggle } from './use-toggle/use-toggle.js';
|
|
31
31
|
export { useUncontrolled } from './use-uncontrolled/use-uncontrolled.js';
|
|
32
32
|
export { useViewportSize } from './use-viewport-size/use-viewport-size.js';
|
|
33
33
|
export { useWindowEvent } from './use-window-event/use-window-event.js';
|
|
@@ -46,6 +46,7 @@ export { useEventListener } from './use-event-listener/use-event-listener.js';
|
|
|
46
46
|
export { useDisclosure } from './use-disclosure/use-disclosure.js';
|
|
47
47
|
export { useFocusWithin } from './use-focus-within/use-focus-within.js';
|
|
48
48
|
export { useNetwork } from './use-network/use-network.js';
|
|
49
|
+
export { useTimeout } from './use-timeout/use-timeout.js';
|
|
49
50
|
export { getHotkeyHandler } from './use-hotkeys/parse-hotkey.js';
|
|
50
51
|
export { assignRef } from './utils/assign-ref/assign-ref.js';
|
|
51
52
|
export { clamp } from './utils/clamp/clamp.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -23,19 +23,11 @@ const DEFAULT_OPTIONS = {
|
|
|
23
23
|
};
|
|
24
24
|
function useCounter(initialValue = 0, options) {
|
|
25
25
|
const { min, max } = __spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options);
|
|
26
|
-
const [count, setCount] = useState(clamp(
|
|
27
|
-
const increment = (delta = 1) =>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
setCount((current) => clamp({ value: current - delta, min, max }));
|
|
32
|
-
};
|
|
33
|
-
const set = (value) => {
|
|
34
|
-
setCount(clamp({ value, min, max }));
|
|
35
|
-
};
|
|
36
|
-
const reset = () => {
|
|
37
|
-
setCount(clamp({ value: initialValue, min, max }));
|
|
38
|
-
};
|
|
26
|
+
const [count, setCount] = useState(clamp(initialValue, min, max));
|
|
27
|
+
const increment = (delta = 1) => setCount((current) => clamp(current + delta, min, max));
|
|
28
|
+
const decrement = (delta = 1) => setCount((current) => clamp(current - delta, min, max));
|
|
29
|
+
const set = (value) => setCount(clamp(value, min, max));
|
|
30
|
+
const reset = () => setCount(clamp(initialValue, min, max));
|
|
39
31
|
return [count, { increment, decrement, set, reset }];
|
|
40
32
|
}
|
|
41
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-counter.js","sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n min: -Infinity,\n max: Infinity,\n};\n\nexport function useCounter(initialValue = 0, options?: Partial<{ min: number; max: number }>) {\n const { min, max } = { ...DEFAULT_OPTIONS, ...options };\n const [count, setCount] = useState<number>(clamp(
|
|
1
|
+
{"version":3,"file":"use-counter.js","sources":["../../src/use-counter/use-counter.ts"],"sourcesContent":["import { useState } from 'react';\nimport { clamp } from '../utils';\n\nconst DEFAULT_OPTIONS = {\n min: -Infinity,\n max: Infinity,\n};\n\nexport function useCounter(initialValue = 0, options?: Partial<{ min: number; max: number }>) {\n const { min, max } = { ...DEFAULT_OPTIONS, ...options };\n const [count, setCount] = useState<number>(clamp(initialValue, min, max));\n\n const increment = (delta = 1) => setCount((current) => clamp(current + delta, min, max));\n const decrement = (delta = 1) => setCount((current) => clamp(current - delta, min, max));\n const set = (value: number) => setCount(clamp(value, min, max));\n const reset = () => setCount(clamp(initialValue, min, max));\n\n return [count, { increment, decrement, set, reset }] as const;\n}\n"],"names":[],"mappings":";;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAGF,MAAM,eAAe,GAAG;AACxB,EAAE,GAAG,EAAE,CAAC,QAAQ;AAChB,EAAE,GAAG,EAAE,QAAQ;AACf,CAAC,CAAC;AACK,SAAS,UAAU,CAAC,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE;AACtD,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC;AACpF,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AACpE,EAAE,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3F,EAAE,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3F,EAAE,MAAM,GAAG,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC1D,EAAE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC9D,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;AACvD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n transitionDuration: number;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({\n opened,\n transitionDuration,\n shouldReturnFocus = true,\n}: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.
|
|
1
|
+
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n transitionDuration: number;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({\n opened,\n transitionDuration,\n shouldReturnFocus = true,\n}: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n window.clearTimeout(timeout);\n }\n };\n\n document.addEventListener('keydown', clearFocusTimeout);\n\n if (opened) {\n lastActiveElement.current = document.activeElement as HTMLElement;\n } else if (shouldReturnFocus) {\n timeout = window.setTimeout(returnFocus, transitionDuration + 10);\n }\n\n return () => {\n window.clearTimeout(timeout);\n document.removeEventListener('keydown', clearFocusTimeout);\n };\n }, [opened]);\n\n return returnFocus;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,kBAAkB;AACpB,EAAE,iBAAiB,GAAG,IAAI;AAC1B,CAAC,EAAE;AACH,EAAE,MAAM,iBAAiB,GAAG,MAAM,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;AACpI,MAAM,CAAC,EAAE,GAAG,iBAAiB,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;AACrE,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;AACrB,IAAI,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK;AACzC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AAC/B,QAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC5D,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;AACzD,KAAK,MAAM,IAAI,iBAAiB,EAAE;AAClC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,kBAAkB,GAAG,EAAE,CAAC,CAAC;AACxE,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,OAAO,WAAW,CAAC;AACrB;;;;"}
|
|
@@ -17,7 +17,7 @@ function useIntersection(options) {
|
|
|
17
17
|
}, options);
|
|
18
18
|
observer.current.observe(element);
|
|
19
19
|
}, [options == null ? void 0 : options.rootMargin, options == null ? void 0 : options.root, options == null ? void 0 : options.threshold]);
|
|
20
|
-
return
|
|
20
|
+
return { ref, entry };
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export { useIntersection };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-intersection.js","sources":["../../src/use-intersection/use-intersection.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport function useIntersection<T extends HTMLElement = any>(\n options?: ConstructorParameters<typeof IntersectionObserver>[1]\n)
|
|
1
|
+
{"version":3,"file":"use-intersection.js","sources":["../../src/use-intersection/use-intersection.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport function useIntersection<T extends HTMLElement = any>(\n options?: ConstructorParameters<typeof IntersectionObserver>[1]\n) {\n const [entry, setEntry] = useState<IntersectionObserverEntry>(null);\n\n const observer = useRef<IntersectionObserver>();\n\n const ref = useCallback(\n (element: T | null) => {\n if (observer.current) {\n observer.current.disconnect();\n observer.current = null;\n }\n\n if (element === null) {\n setEntry(null);\n return;\n }\n\n observer.current = new IntersectionObserver(([_entry]) => {\n setEntry(_entry);\n }, options);\n\n observer.current.observe(element);\n },\n [options?.rootMargin, options?.root, options?.threshold]\n );\n\n return { ref, entry };\n}\n"],"names":[],"mappings":";;AACO,SAAS,eAAe,CAAC,OAAO,EAAE;AACzC,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC3C,EAAE,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,OAAO,KAAK;AACvC,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE;AAC1B,MAAM,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;AACpC,MAAM,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAC9B,KAAK;AACL,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE;AAC1B,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;AACrB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,QAAQ,CAAC,OAAO,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;AAC9D,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AACvB,KAAK,EAAE,OAAO,CAAC,CAAC;AAChB,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACtC,GAAG,EAAE,CAAC,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;AAC7I,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AACxB;;;;"}
|
|
@@ -4,10 +4,12 @@ function useInterval(fn, interval) {
|
|
|
4
4
|
const [active, setActive] = useState(false);
|
|
5
5
|
const intervalRef = useRef();
|
|
6
6
|
const start = () => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
setActive((old) => {
|
|
8
|
+
if (!old) {
|
|
9
|
+
intervalRef.current = window.setInterval(fn, interval);
|
|
10
|
+
}
|
|
11
|
+
return true;
|
|
12
|
+
});
|
|
11
13
|
};
|
|
12
14
|
const stop = () => {
|
|
13
15
|
setActive(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-interval.js","sources":["../../src/use-interval/use-interval.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nexport function useInterval(fn: () => void, interval: number) {\n const [active, setActive] = useState(false);\n const intervalRef = useRef<number>();\n\n const start = () => {\n
|
|
1
|
+
{"version":3,"file":"use-interval.js","sources":["../../src/use-interval/use-interval.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nexport function useInterval(fn: () => void, interval: number) {\n const [active, setActive] = useState(false);\n const intervalRef = useRef<number>();\n\n const start = () => {\n setActive((old) => {\n if (!old) {\n intervalRef.current = window.setInterval(fn, interval);\n }\n return true;\n });\n };\n\n const stop = () => {\n setActive(false);\n window.clearInterval(intervalRef.current);\n };\n\n const toggle = () => {\n if (active) {\n stop();\n } else {\n start();\n }\n };\n\n return { start, stop, toggle, active };\n}\n"],"names":[],"mappings":";;AACO,SAAS,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE;AAC1C,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC9C,EAAE,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;AAC/B,EAAE,MAAM,KAAK,GAAG,MAAM;AACtB,IAAI,SAAS,CAAC,CAAC,GAAG,KAAK;AACvB,MAAM,IAAI,CAAC,GAAG,EAAE;AAChB,QAAQ,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;AAC/D,OAAO;AACP,MAAM,OAAO,IAAI,CAAC;AAClB,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ,EAAE,MAAM,IAAI,GAAG,MAAM;AACrB,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;AACrB,IAAI,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9C,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,MAAM;AACvB,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,IAAI,EAAE,CAAC;AACb,KAAK,MAAM;AACX,MAAM,KAAK,EAAE,CAAC;AACd,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AACzC;;;;"}
|
package/esm/use-move/use-move.js
CHANGED
|
@@ -2,8 +2,8 @@ import { useRef, useState, useEffect } from 'react';
|
|
|
2
2
|
import { clamp } from '../utils/clamp/clamp.js';
|
|
3
3
|
|
|
4
4
|
const clampUseMovePosition = (position) => ({
|
|
5
|
-
x: clamp(
|
|
6
|
-
y: clamp(
|
|
5
|
+
x: clamp(position.x, 0, 1),
|
|
6
|
+
y: clamp(position.y, 0, 1)
|
|
7
7
|
});
|
|
8
8
|
function useMove(onChange, handlers, dir = "ltr") {
|
|
9
9
|
const ref = useRef();
|
|
@@ -22,10 +22,10 @@ function useMove(onChange, handlers, dir = "ltr") {
|
|
|
22
22
|
ref.current.style.userSelect = "none";
|
|
23
23
|
const rect = ref.current.getBoundingClientRect();
|
|
24
24
|
if (rect.width && rect.height) {
|
|
25
|
-
const _x = clamp(
|
|
25
|
+
const _x = clamp((x - rect.left) / rect.width, 0, 1);
|
|
26
26
|
onChange({
|
|
27
27
|
x: dir === "ltr" ? _x : 1 - _x,
|
|
28
|
-
y: clamp(
|
|
28
|
+
y: clamp((y - rect.top) / rect.height, 0, 1)
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -76,7 +76,7 @@ function useMove(onChange, handlers, dir = "ltr") {
|
|
|
76
76
|
onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
|
|
77
77
|
};
|
|
78
78
|
ref.current.addEventListener("mousedown", onMouseDown);
|
|
79
|
-
ref.current.addEventListener("touchstart", onTouchStart);
|
|
79
|
+
ref.current.addEventListener("touchstart", onTouchStart, { passive: false });
|
|
80
80
|
return () => {
|
|
81
81
|
if (ref.current) {
|
|
82
82
|
ref.current.removeEventListener("mousedown", onMouseDown);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-move.js","sources":["../../src/use-move/use-move.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useEffect, useState, useRef } from 'react';\nimport { clamp } from '../utils';\n\nexport interface UseMovePosition {\n x: number;\n y: number;\n}\n\nexport const clampUseMovePosition = (position: UseMovePosition) => ({\n x: clamp(
|
|
1
|
+
{"version":3,"file":"use-move.js","sources":["../../src/use-move/use-move.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useEffect, useState, useRef } from 'react';\nimport { clamp } from '../utils';\n\nexport interface UseMovePosition {\n x: number;\n y: number;\n}\n\nexport const clampUseMovePosition = (position: UseMovePosition) => ({\n x: clamp(position.x, 0, 1),\n y: clamp(position.y, 0, 1),\n});\n\ninterface useMoveHandlers {\n onScrubStart?(): void;\n onScrubEnd?(): void;\n}\n\nexport function useMove<T extends HTMLElement = HTMLDivElement>(\n onChange: (value: UseMovePosition) => void,\n handlers?: useMoveHandlers,\n dir: 'ltr' | 'rtl' = 'ltr'\n) {\n const ref = useRef<T>();\n const mounted = useRef<boolean>(false);\n const isSliding = useRef(false);\n const frame = useRef(0);\n const [active, setActive] = useState(false);\n\n useEffect(() => {\n mounted.current = true;\n }, []);\n\n useEffect(() => {\n const onScrub = ({ x, y }: UseMovePosition) => {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (mounted.current && ref.current) {\n ref.current.style.userSelect = 'none';\n const rect = ref.current.getBoundingClientRect();\n\n if (rect.width && rect.height) {\n const _x = clamp((x - rect.left) / rect.width, 0, 1);\n onChange({\n x: dir === 'ltr' ? _x : 1 - _x,\n y: clamp((y - rect.top) / rect.height, 0, 1),\n });\n }\n }\n });\n };\n\n const bindEvents = () => {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', stopScrubbing);\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchend', stopScrubbing);\n };\n\n const unbindEvents = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', stopScrubbing);\n document.removeEventListener('touchmove', onTouchMove);\n document.removeEventListener('touchend', stopScrubbing);\n };\n\n const startScrubbing = () => {\n if (!isSliding.current && mounted.current) {\n isSliding.current = true;\n typeof handlers?.onScrubStart === 'function' && handlers.onScrubStart();\n setActive(true);\n bindEvents();\n }\n };\n\n const stopScrubbing = () => {\n if (isSliding.current && mounted.current) {\n isSliding.current = false;\n setActive(false);\n unbindEvents();\n setTimeout(() => {\n typeof handlers?.onScrubEnd === 'function' && handlers.onScrubEnd();\n }, 0);\n }\n };\n\n const onMouseDown = (event: MouseEvent) => {\n startScrubbing();\n onMouseMove(event);\n };\n\n const onMouseMove = (event: MouseEvent) => onScrub({ x: event.clientX, y: event.clientY });\n\n const onTouchStart = (event: TouchEvent) => {\n startScrubbing();\n event?.preventDefault();\n onTouchMove(event);\n };\n\n const onTouchMove = (event: TouchEvent) => {\n event?.preventDefault();\n onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });\n };\n\n ref.current.addEventListener('mousedown', onMouseDown);\n ref.current.addEventListener('touchstart', onTouchStart, { passive: false });\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener('mousedown', onMouseDown);\n ref.current.removeEventListener('touchstart', onTouchStart);\n }\n };\n }, [dir, onChange]);\n\n return { ref, active };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useRef, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
function useTimeout(fn, delay, options = { autoInvoke: false }) {
|
|
4
|
+
const timeoutRef = useRef(null);
|
|
5
|
+
const start = () => {
|
|
6
|
+
if (!timeoutRef.current) {
|
|
7
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
8
|
+
fn();
|
|
9
|
+
timeoutRef.current = null;
|
|
10
|
+
}, delay);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const clear = () => {
|
|
14
|
+
if (timeoutRef.current) {
|
|
15
|
+
window.clearTimeout(timeoutRef.current);
|
|
16
|
+
timeoutRef.current = null;
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (options.autoInvoke) {
|
|
21
|
+
start();
|
|
22
|
+
}
|
|
23
|
+
return clear;
|
|
24
|
+
}, [delay]);
|
|
25
|
+
return { start, clear };
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { useTimeout };
|
|
29
|
+
//# sourceMappingURL=use-timeout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-timeout.js","sources":["../../src/use-timeout/use-timeout.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\nexport function useTimeout(\n fn: () => void,\n delay: number,\n options: { autoInvoke: boolean } = { autoInvoke: false }\n) {\n const timeoutRef = useRef<number>(null);\n\n const start = () => {\n if (!timeoutRef.current) {\n timeoutRef.current = window.setTimeout(() => {\n fn();\n timeoutRef.current = null;\n }, delay);\n }\n };\n\n const clear = () => {\n if (timeoutRef.current) {\n window.clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n\n useEffect(() => {\n if (options.autoInvoke) {\n start();\n }\n\n return clear;\n }, [delay]);\n\n return { start, clear };\n}\n"],"names":[],"mappings":";;AACO,SAAS,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;AACvE,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,MAAM,KAAK,GAAG,MAAM;AACtB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM;AACnD,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;AAClC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChB,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,KAAK,GAAG,MAAM;AACtB,IAAI,IAAI,UAAU,CAAC,OAAO,EAAE;AAC5B,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC9C,MAAM,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;AAChC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,OAAO,CAAC,UAAU,EAAE;AAC5B,MAAM,KAAK,EAAE,CAAC;AACd,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC1B;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
2
|
|
|
3
|
-
function useToggle(
|
|
4
|
-
const [state, setState] = useState(
|
|
3
|
+
function useToggle(options) {
|
|
4
|
+
const [state, setState] = useState(options[0]);
|
|
5
5
|
const toggle = (value) => {
|
|
6
6
|
if (typeof value !== "undefined") {
|
|
7
7
|
setState(value);
|
|
@@ -16,9 +16,6 @@ function useToggle(initialValue, options) {
|
|
|
16
16
|
};
|
|
17
17
|
return [state, toggle];
|
|
18
18
|
}
|
|
19
|
-
function useBooleanToggle(initialValue = false) {
|
|
20
|
-
return useToggle(initialValue, [true, false]);
|
|
21
|
-
}
|
|
22
19
|
|
|
23
|
-
export {
|
|
20
|
+
export { useToggle };
|
|
24
21
|
//# sourceMappingURL=use-toggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toggle.js","sources":["../../src/use-toggle/use-toggle.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useToggle<T>(
|
|
1
|
+
{"version":3,"file":"use-toggle.js","sources":["../../src/use-toggle/use-toggle.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useToggle<T>(options: [T, T]) {\n const [state, setState] = useState(options[0]);\n\n const toggle = (value?: React.SetStateAction<T>) => {\n if (typeof value !== 'undefined') {\n setState(value);\n } else {\n setState((current) => {\n if (current === options[0]) {\n return options[1];\n }\n\n return options[0];\n });\n }\n };\n\n return [state, toggle] as const;\n}\n"],"names":[],"mappings":";;AACO,SAAS,SAAS,CAAC,OAAO,EAAE;AACnC,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AACjD,EAAE,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK;AAC5B,IAAI,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;AACtC,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtB,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,CAAC,OAAO,KAAK;AAC5B,QAAQ,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE;AACpC,UAAU,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AAC5B,SAAS;AACT,QAAQ,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1B,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzB;;;;"}
|
package/esm/utils/clamp/clamp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp/clamp.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp/clamp.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n"],"names":[],"mappings":"AAAO,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C;;;;"}
|
package/lib/index.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ export { useScrollIntoView } from './use-scroll-into-view/use-scroll-into-view';
|
|
|
28
28
|
export { useResizeObserver, useElementSize } from './use-resize-observer/use-resize-observer';
|
|
29
29
|
export { useScrollLock } from './use-scroll-lock/use-scroll-lock';
|
|
30
30
|
export { useShallowEffect } from './use-shallow-effect/use-shallow-effect';
|
|
31
|
-
export { useToggle
|
|
31
|
+
export { useToggle } from './use-toggle/use-toggle';
|
|
32
32
|
export { useUncontrolled } from './use-uncontrolled/use-uncontrolled';
|
|
33
33
|
export { useViewportSize } from './use-viewport-size/use-viewport-size';
|
|
34
34
|
export { useWindowEvent } from './use-window-event/use-window-event';
|
|
@@ -47,6 +47,7 @@ export { useEventListener } from './use-event-listener/use-event-listener';
|
|
|
47
47
|
export { useDisclosure } from './use-disclosure/use-disclosure';
|
|
48
48
|
export { useFocusWithin } from './use-focus-within/use-focus-within';
|
|
49
49
|
export { useNetwork } from './use-network/use-network';
|
|
50
|
+
export { useTimeout } from './use-timeout/use-timeout';
|
|
50
51
|
export type { UseMovePosition } from './use-move/use-move';
|
|
51
52
|
export type { OS } from './use-os/use-os';
|
|
52
53
|
export type { HotkeyItem } from './use-hotkeys/use-hotkeys';
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-counter.d.ts","sourceRoot":"","sources":["../../src/use-counter/use-counter.ts"],"names":[],"mappings":"AAQA,wBAAgB,UAAU,CAAC,YAAY,SAAI,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;;;
|
|
1
|
+
{"version":3,"file":"use-counter.d.ts","sourceRoot":"","sources":["../../src/use-counter/use-counter.ts"],"names":[],"mappings":"AAQA,wBAAgB,UAAU,CAAC,YAAY,SAAI,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;;;0BAMtE,MAAM;;GAI3B"}
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
export declare function useIntersection<T extends HTMLElement = any>(options?: ConstructorParameters<typeof IntersectionObserver>[1]):
|
|
1
|
+
export declare function useIntersection<T extends HTMLElement = any>(options?: ConstructorParameters<typeof IntersectionObserver>[1]): {
|
|
2
|
+
ref: (element: T | null) => void;
|
|
3
|
+
entry: IntersectionObserverEntry;
|
|
4
|
+
};
|
|
2
5
|
//# sourceMappingURL=use-intersection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-intersection.d.ts","sourceRoot":"","sources":["../../src/use-intersection/use-intersection.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EACzD,OAAO,CAAC,EAAE,qBAAqB,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"use-intersection.d.ts","sourceRoot":"","sources":["../../src/use-intersection/use-intersection.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EACzD,OAAO,CAAC,EAAE,qBAAqB,CAAC,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAAC;mBAOnD,CAAC,GAAG,IAAI;;EAqBrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-interval.d.ts","sourceRoot":"","sources":["../../src/use-interval/use-interval.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,QAAQ,EAAE,MAAM;;;;;
|
|
1
|
+
{"version":3,"file":"use-interval.d.ts","sourceRoot":"","sources":["../../src/use-interval/use-interval.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,QAAQ,EAAE,MAAM;;;;;EA2B3D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-timeout.d.ts","sourceRoot":"","sources":["../../src/use-timeout/use-timeout.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CACxB,EAAE,EAAE,MAAM,IAAI,EACd,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,UAAU,EAAE,OAAO,CAAA;CAA0B;;;EA6BzD"}
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
export declare function useToggle<T>(
|
|
2
|
-
export declare function useBooleanToggle(initialValue?: boolean): readonly [boolean, (value?: import("react").SetStateAction<boolean>) => void];
|
|
1
|
+
export declare function useToggle<T>(options: [T, T]): readonly [T, (value?: React.SetStateAction<T>) => void];
|
|
3
2
|
//# sourceMappingURL=use-toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toggle.d.ts","sourceRoot":"","sources":["../../src/use-toggle/use-toggle.ts"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"use-toggle.d.ts","sourceRoot":"","sources":["../../src/use-toggle/use-toggle.ts"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,yBAGlB,MAAM,cAAc,CAAC,CAAC,CAAC,WAehD"}
|
|
@@ -1,8 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
value: number;
|
|
3
|
-
min: number;
|
|
4
|
-
max: number;
|
|
5
|
-
}
|
|
6
|
-
export declare function clamp({ value, min, max }: Clamp): number;
|
|
7
|
-
export {};
|
|
1
|
+
export declare function clamp(value: number, min: number, max: number): number;
|
|
8
2
|
//# sourceMappingURL=clamp.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../../src/utils/clamp/clamp.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../../src/utils/clamp/clamp.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAE5D"}
|
package/package.json
CHANGED
package/cjs/use-uuid/use-uuid.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var useIsomorphicEffect = require('../use-isomorphic-effect/use-isomorphic-effect.js');
|
|
7
|
-
var randomId = require('../utils/random-id/random-id.js');
|
|
8
|
-
|
|
9
|
-
function useUuid(staticId) {
|
|
10
|
-
const [uuid, setUuid] = react.useState("");
|
|
11
|
-
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
12
|
-
setUuid(randomId.randomId());
|
|
13
|
-
}, []);
|
|
14
|
-
return staticId || uuid;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
exports.useUuid = useUuid;
|
|
18
|
-
//# sourceMappingURL=use-uuid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-uuid.js","sources":["../../src/use-uuid/use-uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { randomId } from '../utils';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport function useUuid(staticId?: string) {\n const [uuid, setUuid] = useState('');\n\n useIsomorphicEffect(() => {\n setUuid(randomId());\n }, []);\n\n return staticId || uuid;\n}\n"],"names":["useState","useIsomorphicEffect","randomId"],"mappings":";;;;;;;;AAGO,SAAS,OAAO,CAAC,QAAQ,EAAE;AAClC,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,EAAEC,uCAAmB,CAAC,MAAM;AAC5B,IAAI,OAAO,CAACC,iBAAQ,EAAE,CAAC,CAAC;AACxB,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,QAAQ,IAAI,IAAI,CAAC;AAC1B;;;;"}
|
package/esm/use-uuid/use-uuid.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect.js';
|
|
3
|
-
import { randomId } from '../utils/random-id/random-id.js';
|
|
4
|
-
|
|
5
|
-
function useUuid(staticId) {
|
|
6
|
-
const [uuid, setUuid] = useState("");
|
|
7
|
-
useIsomorphicEffect(() => {
|
|
8
|
-
setUuid(randomId());
|
|
9
|
-
}, []);
|
|
10
|
-
return staticId || uuid;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export { useUuid };
|
|
14
|
-
//# sourceMappingURL=use-uuid.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-uuid.js","sources":["../../src/use-uuid/use-uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { randomId } from '../utils';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport function useUuid(staticId?: string) {\n const [uuid, setUuid] = useState('');\n\n useIsomorphicEffect(() => {\n setUuid(randomId());\n }, []);\n\n return staticId || uuid;\n}\n"],"names":[],"mappings":";;;;AAGO,SAAS,OAAO,CAAC,QAAQ,EAAE;AAClC,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,EAAE,mBAAmB,CAAC,MAAM;AAC5B,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;AACxB,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,QAAQ,IAAI,IAAI,CAAC;AAC1B;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-uuid.d.ts","sourceRoot":"","sources":["../../src/use-uuid/use-uuid.ts"],"names":[],"mappings":"AAIA,wBAAgB,OAAO,CAAC,QAAQ,CAAC,EAAE,MAAM,UAQxC"}
|