@dxos/react-hooks 0.4.8-main.f998f66 → 0.4.8-next.06fa7e4
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/lib/browser/index.mjs +87 -13
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +84 -12
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/types/src/index.d.ts +3 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useDefaultValue.d.ts +13 -0
- package/dist/types/src/useDefaultValue.d.ts.map +1 -0
- package/dist/types/src/useRefCallback.d.ts +12 -0
- package/dist/types/src/useRefCallback.d.ts.map +1 -0
- package/dist/types/src/useTransitions.d.ts +7 -0
- package/dist/types/src/useTransitions.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/index.ts +3 -0
- package/src/useDefaultValue.ts +28 -0
- package/src/useRefCallback.ts +16 -0
- package/src/useTransitions.ts +74 -0
|
@@ -1,7 +1,19 @@
|
|
|
1
|
+
// packages/ui/primitives/react-hooks/src/useDefaultValue.ts
|
|
2
|
+
import { useEffect, useState, useMemo } from "react";
|
|
3
|
+
var useDefaultValue = (reactiveValue, defaultValue) => {
|
|
4
|
+
const stableDefaultValue = useMemo(() => defaultValue, []);
|
|
5
|
+
const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
|
|
6
|
+
useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [
|
|
7
|
+
reactiveValue,
|
|
8
|
+
stableDefaultValue
|
|
9
|
+
]);
|
|
10
|
+
return value;
|
|
11
|
+
};
|
|
12
|
+
|
|
1
13
|
// packages/ui/primitives/react-hooks/src/useFileDownload.ts
|
|
2
|
-
import { useMemo } from "react";
|
|
14
|
+
import { useMemo as useMemo2 } from "react";
|
|
3
15
|
var useFileDownload = () => {
|
|
4
|
-
return
|
|
16
|
+
return useMemo2(() => (data, filename) => {
|
|
5
17
|
const url = typeof data === "string" ? data : URL.createObjectURL(data);
|
|
6
18
|
const element = document.createElement("a");
|
|
7
19
|
element.setAttribute("href", url);
|
|
@@ -12,10 +24,10 @@ var useFileDownload = () => {
|
|
|
12
24
|
};
|
|
13
25
|
|
|
14
26
|
// packages/ui/primitives/react-hooks/src/useForwardedRef.ts
|
|
15
|
-
import { useRef, useEffect } from "react";
|
|
27
|
+
import { useRef, useEffect as useEffect2 } from "react";
|
|
16
28
|
var useForwardedRef = (ref) => {
|
|
17
29
|
const innerRef = useRef(null);
|
|
18
|
-
|
|
30
|
+
useEffect2(() => {
|
|
19
31
|
if (!ref) {
|
|
20
32
|
return;
|
|
21
33
|
}
|
|
@@ -30,21 +42,21 @@ var useForwardedRef = (ref) => {
|
|
|
30
42
|
|
|
31
43
|
// packages/ui/primitives/react-hooks/src/useId.ts
|
|
32
44
|
import alea from "alea";
|
|
33
|
-
import { useMemo as
|
|
45
|
+
import { useMemo as useMemo3 } from "react";
|
|
34
46
|
var Alea = alea;
|
|
35
47
|
var prng = new Alea("@dxos/react-hooks");
|
|
36
48
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
37
|
-
var useId = (namespace, propsId, opts) =>
|
|
49
|
+
var useId = (namespace, propsId, opts) => useMemo3(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
|
|
38
50
|
propsId
|
|
39
51
|
]);
|
|
40
52
|
|
|
41
53
|
// packages/ui/primitives/react-hooks/src/useIsFocused.ts
|
|
42
|
-
import { useEffect as
|
|
54
|
+
import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
|
|
43
55
|
var useIsFocused = (inputRef) => {
|
|
44
|
-
const [isFocused, setIsFocused] =
|
|
56
|
+
const [isFocused, setIsFocused] = useState2(void 0);
|
|
45
57
|
const isFocusedRef = useRef2(isFocused);
|
|
46
58
|
isFocusedRef.current = isFocused;
|
|
47
|
-
|
|
59
|
+
useEffect3(() => {
|
|
48
60
|
const input = inputRef.current;
|
|
49
61
|
if (!input) {
|
|
50
62
|
return;
|
|
@@ -68,7 +80,7 @@ var useIsFocused = (inputRef) => {
|
|
|
68
80
|
};
|
|
69
81
|
|
|
70
82
|
// packages/ui/primitives/react-hooks/src/useMediaQuery.ts
|
|
71
|
-
import { useEffect as
|
|
83
|
+
import { useEffect as useEffect4, useState as useState3 } from "react";
|
|
72
84
|
var breakpointMediaQueries = {
|
|
73
85
|
sm: "(min-width: 640px)",
|
|
74
86
|
md: "(min-width: 768px)",
|
|
@@ -85,13 +97,13 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
85
97
|
fallback
|
|
86
98
|
];
|
|
87
99
|
fallbackValues = fallbackValues.filter((v) => v != null);
|
|
88
|
-
const [value, setValue] =
|
|
100
|
+
const [value, setValue] = useState3(() => {
|
|
89
101
|
return queries.map((query2, index) => ({
|
|
90
102
|
media: query2,
|
|
91
103
|
matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
|
|
92
104
|
}));
|
|
93
105
|
});
|
|
94
|
-
|
|
106
|
+
useEffect4(() => {
|
|
95
107
|
setValue(queries.map((query2) => ({
|
|
96
108
|
media: query2,
|
|
97
109
|
matches: document.defaultView?.matchMedia(query2).matches
|
|
@@ -131,12 +143,74 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
131
143
|
]);
|
|
132
144
|
return value.map((item) => !!item.matches);
|
|
133
145
|
};
|
|
146
|
+
|
|
147
|
+
// packages/ui/primitives/react-hooks/src/useTransitions.ts
|
|
148
|
+
import { useRef as useRef3, useEffect as useEffect5, useState as useState4 } from "react";
|
|
149
|
+
var isFunction = (functionToCheck) => {
|
|
150
|
+
return functionToCheck instanceof Function;
|
|
151
|
+
};
|
|
152
|
+
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
153
|
+
const [hasTransitioned, setHasTransitioned] = useState4(false);
|
|
154
|
+
const previousValue = useRef3(currentValue);
|
|
155
|
+
useEffect5(() => {
|
|
156
|
+
const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
157
|
+
const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
158
|
+
const transitioned = fromValueValid && toValueValid;
|
|
159
|
+
if (transitioned) {
|
|
160
|
+
setHasTransitioned(true);
|
|
161
|
+
} else {
|
|
162
|
+
setHasTransitioned(false);
|
|
163
|
+
}
|
|
164
|
+
previousValue.current = currentValue;
|
|
165
|
+
}, [
|
|
166
|
+
currentValue,
|
|
167
|
+
fromValue,
|
|
168
|
+
toValue,
|
|
169
|
+
setHasTransitioned,
|
|
170
|
+
previousValue
|
|
171
|
+
]);
|
|
172
|
+
return hasTransitioned;
|
|
173
|
+
};
|
|
174
|
+
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
175
|
+
const dirty = useRef3(false);
|
|
176
|
+
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
177
|
+
useEffect5(() => {
|
|
178
|
+
dirty.current = false;
|
|
179
|
+
}, [
|
|
180
|
+
currentValue,
|
|
181
|
+
dirty
|
|
182
|
+
]);
|
|
183
|
+
useEffect5(() => {
|
|
184
|
+
if (hasTransitioned && !dirty.current) {
|
|
185
|
+
callback();
|
|
186
|
+
dirty.current = true;
|
|
187
|
+
}
|
|
188
|
+
}, [
|
|
189
|
+
hasTransitioned,
|
|
190
|
+
dirty,
|
|
191
|
+
callback
|
|
192
|
+
]);
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
// packages/ui/primitives/react-hooks/src/useRefCallback.ts
|
|
196
|
+
import { useState as useState5 } from "react";
|
|
197
|
+
var useRefCallback = () => {
|
|
198
|
+
const [value, setValue] = useState5(null);
|
|
199
|
+
return {
|
|
200
|
+
refCallback: (value2) => setValue(value2),
|
|
201
|
+
value
|
|
202
|
+
};
|
|
203
|
+
};
|
|
134
204
|
export {
|
|
135
205
|
randomString,
|
|
206
|
+
useDefaultValue,
|
|
207
|
+
useDidTransition,
|
|
136
208
|
useFileDownload,
|
|
137
209
|
useForwardedRef,
|
|
138
210
|
useId,
|
|
139
211
|
useIsFocused,
|
|
140
|
-
useMediaQuery
|
|
212
|
+
useMediaQuery,
|
|
213
|
+
useOnTransition,
|
|
214
|
+
useRefCallback
|
|
141
215
|
};
|
|
142
216
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n * download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n return useMemo(\n () => (data: Blob | string, filename: string) => {\n const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n const element = document.createElement('a');\n element.setAttribute('href', url);\n element.setAttribute('download', filename);\n element.setAttribute('target', 'download');\n element.click();\n },\n [],\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n prng()\n .toString(16)\n .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n isFocusedRef.current = isFocused;\n\n useEffect(() => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n\n const onFocus = () => setIsFocused(true);\n const onBlur = () => setIsFocused(false);\n input.addEventListener('focus', onFocus);\n input.addEventListener('blur', onBlur);\n\n if (isFocusedRef.current === undefined) {\n setIsFocused(document.activeElement === input);\n }\n\n return () => {\n input.removeEventListener('focus', onFocus);\n input.removeEventListener('blur', onBlur);\n };\n }, [inputRef, setIsFocused]);\n\n return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n sm: '(min-width: 640px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 1024px)',\n xl: '(min-width: 1280px)',\n '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n const { ssr = true, fallback } = options;\n\n const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n );\n\n let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n const [value, setValue] = useState(() => {\n return queries.map((query, index) => ({\n media: query,\n matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n }));\n });\n\n useEffect(() => {\n setValue(\n queries.map((query) => ({\n media: query,\n matches: document.defaultView?.matchMedia(query).matches,\n })),\n );\n\n const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n const handler = (evt: MediaQueryListEvent) => {\n setValue((prev) => {\n return prev.slice().map((item) => {\n if (item.media === evt.media) {\n return { ...item, matches: evt.matches };\n }\n return item;\n });\n });\n };\n\n mql.forEach((mql) => {\n if (typeof mql?.addListener === 'function') {\n mql?.addListener(handler);\n } else {\n mql?.addEventListener('change', handler);\n }\n });\n\n return () => {\n mql.forEach((mql) => {\n if (typeof mql?.removeListener === 'function') {\n mql?.removeListener(handler);\n } else {\n mql?.removeEventListener('change', handler);\n }\n });\n };\n }, [document.defaultView]);\n\n return value.map((item) => !!item.matches);\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,eAAe;AAYjB,IAAMC,kBAAkB,MAAA;AAC7B,SAAOC,
|
|
6
|
-
"names": ["useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener"]
|
|
3
|
+
"sources": ["../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts", "../../../src/useRefCallback.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {\n // Memoize defaultValue with an empty dependency array.\n // This ensures that the defaultValue instance remains stable across all re-renders,\n // regardless of whether the defaultValue changes.\n const stableDefaultValue = useMemo(() => defaultValue, []);\n const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n * download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n return useMemo(\n () => (data: Blob | string, filename: string) => {\n const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n const element = document.createElement('a');\n element.setAttribute('href', url);\n element.setAttribute('download', filename);\n element.setAttribute('target', 'download');\n element.click();\n },\n [],\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n prng()\n .toString(16)\n .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n isFocusedRef.current = isFocused;\n\n useEffect(() => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n\n const onFocus = () => setIsFocused(true);\n const onBlur = () => setIsFocused(false);\n input.addEventListener('focus', onFocus);\n input.addEventListener('blur', onBlur);\n\n if (isFocusedRef.current === undefined) {\n setIsFocused(document.activeElement === input);\n }\n\n return () => {\n input.removeEventListener('focus', onFocus);\n input.removeEventListener('blur', onBlur);\n };\n }, [inputRef, setIsFocused]);\n\n return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n sm: '(min-width: 640px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 1024px)',\n xl: '(min-width: 1280px)',\n '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n const { ssr = true, fallback } = options;\n\n const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n );\n\n let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n const [value, setValue] = useState(() => {\n return queries.map((query, index) => ({\n media: query,\n matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n }));\n });\n\n useEffect(() => {\n setValue(\n queries.map((query) => ({\n media: query,\n matches: document.defaultView?.matchMedia(query).matches,\n })),\n );\n\n const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n const handler = (evt: MediaQueryListEvent) => {\n setValue((prev) => {\n return prev.slice().map((item) => {\n if (item.media === evt.media) {\n return { ...item, matches: evt.matches };\n }\n return item;\n });\n });\n };\n\n mql.forEach((mql) => {\n if (typeof mql?.addListener === 'function') {\n mql?.addListener(handler);\n } else {\n mql?.addEventListener('change', handler);\n }\n });\n\n return () => {\n mql.forEach((mql) => {\n if (typeof mql?.removeListener === 'function') {\n mql?.removeListener(handler);\n } else {\n mql?.removeEventListener('change', handler);\n }\n });\n };\n }, [document.defaultView]);\n\n return value.map((item) => !!item.matches);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: T | ((value: T) => boolean),\n) => {\n const [hasTransitioned, setHasTransitioned] = useState(false);\n const previousValue = useRef<T>(currentValue);\n\n useEffect(() => {\n const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n\n const fromValueValid = isFunction<T>(fromValue)\n ? fromValue(previousValue.current)\n : fromValue === previousValue.current;\n\n const transitioned = fromValueValid && toValueValid;\n\n if (transitioned) {\n setHasTransitioned(true);\n } else {\n setHasTransitioned(false);\n }\n\n previousValue.current = currentValue;\n }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);\n\n return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */\nexport const useOnTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: ((value: T) => boolean) | T,\n callback: () => void,\n) => {\n const dirty = useRef(false);\n const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n useEffect(() => {\n dirty.current = false;\n }, [currentValue, dirty]);\n\n useEffect(() => {\n if (hasTransitioned && !dirty.current) {\n callback();\n dirty.current = true;\n }\n }, [hasTransitioned, dirty, callback]);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n const [value, setValue] = useState<T | null>(null);\n return { refCallback: (value: T) => setValue(value), value };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "transitioned", "useOnTransition", "callback", "dirty", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7689,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1831,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1201,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16409},"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useDefaultValue","useDidTransition","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useOnTransition","useRefCallback"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":382},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":331},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1384},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197}},"bytes":6505}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -29,21 +29,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var node_exports = {};
|
|
30
30
|
__export(node_exports, {
|
|
31
31
|
randomString: () => randomString,
|
|
32
|
+
useDefaultValue: () => useDefaultValue,
|
|
33
|
+
useDidTransition: () => useDidTransition,
|
|
32
34
|
useFileDownload: () => useFileDownload,
|
|
33
35
|
useForwardedRef: () => useForwardedRef,
|
|
34
36
|
useId: () => useId,
|
|
35
37
|
useIsFocused: () => useIsFocused,
|
|
36
|
-
useMediaQuery: () => useMediaQuery
|
|
38
|
+
useMediaQuery: () => useMediaQuery,
|
|
39
|
+
useOnTransition: () => useOnTransition,
|
|
40
|
+
useRefCallback: () => useRefCallback
|
|
37
41
|
});
|
|
38
42
|
module.exports = __toCommonJS(node_exports);
|
|
39
43
|
var import_react = require("react");
|
|
40
44
|
var import_react2 = require("react");
|
|
41
|
-
var import_alea = __toESM(require("alea"));
|
|
42
45
|
var import_react3 = require("react");
|
|
46
|
+
var import_alea = __toESM(require("alea"));
|
|
43
47
|
var import_react4 = require("react");
|
|
44
48
|
var import_react5 = require("react");
|
|
49
|
+
var import_react6 = require("react");
|
|
50
|
+
var import_react7 = require("react");
|
|
51
|
+
var import_react8 = require("react");
|
|
52
|
+
var useDefaultValue = (reactiveValue, defaultValue) => {
|
|
53
|
+
const stableDefaultValue = (0, import_react.useMemo)(() => defaultValue, []);
|
|
54
|
+
const [value, setValue] = (0, import_react.useState)(reactiveValue ?? stableDefaultValue);
|
|
55
|
+
(0, import_react.useEffect)(() => setValue(reactiveValue ?? stableDefaultValue), [
|
|
56
|
+
reactiveValue,
|
|
57
|
+
stableDefaultValue
|
|
58
|
+
]);
|
|
59
|
+
return value;
|
|
60
|
+
};
|
|
45
61
|
var useFileDownload = () => {
|
|
46
|
-
return (0,
|
|
62
|
+
return (0, import_react2.useMemo)(() => (data, filename) => {
|
|
47
63
|
const url = typeof data === "string" ? data : URL.createObjectURL(data);
|
|
48
64
|
const element = document.createElement("a");
|
|
49
65
|
element.setAttribute("href", url);
|
|
@@ -53,8 +69,8 @@ var useFileDownload = () => {
|
|
|
53
69
|
}, []);
|
|
54
70
|
};
|
|
55
71
|
var useForwardedRef = (ref) => {
|
|
56
|
-
const innerRef = (0,
|
|
57
|
-
(0,
|
|
72
|
+
const innerRef = (0, import_react3.useRef)(null);
|
|
73
|
+
(0, import_react3.useEffect)(() => {
|
|
58
74
|
if (!ref) {
|
|
59
75
|
return;
|
|
60
76
|
}
|
|
@@ -69,14 +85,14 @@ var useForwardedRef = (ref) => {
|
|
|
69
85
|
var Alea = import_alea.default;
|
|
70
86
|
var prng = new Alea("@dxos/react-hooks");
|
|
71
87
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
72
|
-
var useId = (namespace, propsId, opts) => (0,
|
|
88
|
+
var useId = (namespace, propsId, opts) => (0, import_react4.useMemo)(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
|
|
73
89
|
propsId
|
|
74
90
|
]);
|
|
75
91
|
var useIsFocused = (inputRef) => {
|
|
76
|
-
const [isFocused, setIsFocused] = (0,
|
|
77
|
-
const isFocusedRef = (0,
|
|
92
|
+
const [isFocused, setIsFocused] = (0, import_react5.useState)(void 0);
|
|
93
|
+
const isFocusedRef = (0, import_react5.useRef)(isFocused);
|
|
78
94
|
isFocusedRef.current = isFocused;
|
|
79
|
-
(0,
|
|
95
|
+
(0, import_react5.useEffect)(() => {
|
|
80
96
|
const input = inputRef.current;
|
|
81
97
|
if (!input) {
|
|
82
98
|
return;
|
|
@@ -114,13 +130,13 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
114
130
|
fallback
|
|
115
131
|
];
|
|
116
132
|
fallbackValues = fallbackValues.filter((v) => v != null);
|
|
117
|
-
const [value, setValue] = (0,
|
|
133
|
+
const [value, setValue] = (0, import_react6.useState)(() => {
|
|
118
134
|
return queries.map((query2, index) => ({
|
|
119
135
|
media: query2,
|
|
120
136
|
matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
|
|
121
137
|
}));
|
|
122
138
|
});
|
|
123
|
-
(0,
|
|
139
|
+
(0, import_react6.useEffect)(() => {
|
|
124
140
|
setValue(queries.map((query2) => ({
|
|
125
141
|
media: query2,
|
|
126
142
|
matches: document.defaultView?.matchMedia(query2).matches
|
|
@@ -160,13 +176,69 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
160
176
|
]);
|
|
161
177
|
return value.map((item) => !!item.matches);
|
|
162
178
|
};
|
|
179
|
+
var isFunction = (functionToCheck) => {
|
|
180
|
+
return functionToCheck instanceof Function;
|
|
181
|
+
};
|
|
182
|
+
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
183
|
+
const [hasTransitioned, setHasTransitioned] = (0, import_react7.useState)(false);
|
|
184
|
+
const previousValue = (0, import_react7.useRef)(currentValue);
|
|
185
|
+
(0, import_react7.useEffect)(() => {
|
|
186
|
+
const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
187
|
+
const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
188
|
+
const transitioned = fromValueValid && toValueValid;
|
|
189
|
+
if (transitioned) {
|
|
190
|
+
setHasTransitioned(true);
|
|
191
|
+
} else {
|
|
192
|
+
setHasTransitioned(false);
|
|
193
|
+
}
|
|
194
|
+
previousValue.current = currentValue;
|
|
195
|
+
}, [
|
|
196
|
+
currentValue,
|
|
197
|
+
fromValue,
|
|
198
|
+
toValue,
|
|
199
|
+
setHasTransitioned,
|
|
200
|
+
previousValue
|
|
201
|
+
]);
|
|
202
|
+
return hasTransitioned;
|
|
203
|
+
};
|
|
204
|
+
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
205
|
+
const dirty = (0, import_react7.useRef)(false);
|
|
206
|
+
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
207
|
+
(0, import_react7.useEffect)(() => {
|
|
208
|
+
dirty.current = false;
|
|
209
|
+
}, [
|
|
210
|
+
currentValue,
|
|
211
|
+
dirty
|
|
212
|
+
]);
|
|
213
|
+
(0, import_react7.useEffect)(() => {
|
|
214
|
+
if (hasTransitioned && !dirty.current) {
|
|
215
|
+
callback();
|
|
216
|
+
dirty.current = true;
|
|
217
|
+
}
|
|
218
|
+
}, [
|
|
219
|
+
hasTransitioned,
|
|
220
|
+
dirty,
|
|
221
|
+
callback
|
|
222
|
+
]);
|
|
223
|
+
};
|
|
224
|
+
var useRefCallback = () => {
|
|
225
|
+
const [value, setValue] = (0, import_react8.useState)(null);
|
|
226
|
+
return {
|
|
227
|
+
refCallback: (value2) => setValue(value2),
|
|
228
|
+
value
|
|
229
|
+
};
|
|
230
|
+
};
|
|
163
231
|
// Annotate the CommonJS export names for ESM import in node:
|
|
164
232
|
0 && (module.exports = {
|
|
165
233
|
randomString,
|
|
234
|
+
useDefaultValue,
|
|
235
|
+
useDidTransition,
|
|
166
236
|
useFileDownload,
|
|
167
237
|
useForwardedRef,
|
|
168
238
|
useId,
|
|
169
239
|
useIsFocused,
|
|
170
|
-
useMediaQuery
|
|
240
|
+
useMediaQuery,
|
|
241
|
+
useOnTransition,
|
|
242
|
+
useRefCallback
|
|
171
243
|
});
|
|
172
244
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n * download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n return useMemo(\n () => (data: Blob | string, filename: string) => {\n const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n const element = document.createElement('a');\n element.setAttribute('href', url);\n element.setAttribute('download', filename);\n element.setAttribute('target', 'download');\n element.click();\n },\n [],\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n prng()\n .toString(16)\n .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n isFocusedRef.current = isFocused;\n\n useEffect(() => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n\n const onFocus = () => setIsFocused(true);\n const onBlur = () => setIsFocused(false);\n input.addEventListener('focus', onFocus);\n input.addEventListener('blur', onBlur);\n\n if (isFocusedRef.current === undefined) {\n setIsFocused(document.activeElement === input);\n }\n\n return () => {\n input.removeEventListener('focus', onFocus);\n input.removeEventListener('blur', onBlur);\n };\n }, [inputRef, setIsFocused]);\n\n return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n sm: '(min-width: 640px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 1024px)',\n xl: '(min-width: 1280px)',\n '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n const { ssr = true, fallback } = options;\n\n const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n );\n\n let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n const [value, setValue] = useState(() => {\n return queries.map((query, index) => ({\n media: query,\n matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n }));\n });\n\n useEffect(() => {\n setValue(\n queries.map((query) => ({\n media: query,\n matches: document.defaultView?.matchMedia(query).matches,\n })),\n );\n\n const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n const handler = (evt: MediaQueryListEvent) => {\n setValue((prev) => {\n return prev.slice().map((item) => {\n if (item.media === evt.media) {\n return { ...item, matches: evt.matches };\n }\n return item;\n });\n });\n };\n\n mql.forEach((mql) => {\n if (typeof mql?.addListener === 'function') {\n mql?.addListener(handler);\n } else {\n mql?.addEventListener('change', handler);\n }\n });\n\n return () => {\n mql.forEach((mql) => {\n if (typeof mql?.removeListener === 'function') {\n mql?.removeListener(handler);\n } else {\n mql?.removeEventListener('change', handler);\n }\n });\n };\n }, [document.defaultView]);\n\n return value.map((item) => !!item.matches);\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["import_react", "
|
|
3
|
+
"sources": ["../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts", "../../../src/useRefCallback.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {\n // Memoize defaultValue with an empty dependency array.\n // This ensures that the defaultValue instance remains stable across all re-renders,\n // regardless of whether the defaultValue changes.\n const stableDefaultValue = useMemo(() => defaultValue, []);\n const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n * download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n return useMemo(\n () => (data: Blob | string, filename: string) => {\n const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n const element = document.createElement('a');\n element.setAttribute('href', url);\n element.setAttribute('download', filename);\n element.setAttribute('target', 'download');\n element.click();\n },\n [],\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n prng()\n .toString(16)\n .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n isFocusedRef.current = isFocused;\n\n useEffect(() => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n\n const onFocus = () => setIsFocused(true);\n const onBlur = () => setIsFocused(false);\n input.addEventListener('focus', onFocus);\n input.addEventListener('blur', onBlur);\n\n if (isFocusedRef.current === undefined) {\n setIsFocused(document.activeElement === input);\n }\n\n return () => {\n input.removeEventListener('focus', onFocus);\n input.removeEventListener('blur', onBlur);\n };\n }, [inputRef, setIsFocused]);\n\n return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n sm: '(min-width: 640px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 1024px)',\n xl: '(min-width: 1280px)',\n '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n const { ssr = true, fallback } = options;\n\n const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n );\n\n let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n const [value, setValue] = useState(() => {\n return queries.map((query, index) => ({\n media: query,\n matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n }));\n });\n\n useEffect(() => {\n setValue(\n queries.map((query) => ({\n media: query,\n matches: document.defaultView?.matchMedia(query).matches,\n })),\n );\n\n const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n const handler = (evt: MediaQueryListEvent) => {\n setValue((prev) => {\n return prev.slice().map((item) => {\n if (item.media === evt.media) {\n return { ...item, matches: evt.matches };\n }\n return item;\n });\n });\n };\n\n mql.forEach((mql) => {\n if (typeof mql?.addListener === 'function') {\n mql?.addListener(handler);\n } else {\n mql?.addEventListener('change', handler);\n }\n });\n\n return () => {\n mql.forEach((mql) => {\n if (typeof mql?.removeListener === 'function') {\n mql?.removeListener(handler);\n } else {\n mql?.removeEventListener('change', handler);\n }\n });\n };\n }, [document.defaultView]);\n\n return value.map((item) => !!item.matches);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: T | ((value: T) => boolean),\n) => {\n const [hasTransitioned, setHasTransitioned] = useState(false);\n const previousValue = useRef<T>(currentValue);\n\n useEffect(() => {\n const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n\n const fromValueValid = isFunction<T>(fromValue)\n ? fromValue(previousValue.current)\n : fromValue === previousValue.current;\n\n const transitioned = fromValueValid && toValueValid;\n\n if (transitioned) {\n setHasTransitioned(true);\n } else {\n setHasTransitioned(false);\n }\n\n previousValue.current = currentValue;\n }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);\n\n return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */\nexport const useOnTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: ((value: T) => boolean) | T,\n callback: () => void,\n) => {\n const dirty = useRef(false);\n const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n useEffect(() => {\n dirty.current = false;\n }, [currentValue, dirty]);\n\n useEffect(() => {\n if (hasTransitioned && !dirty.current) {\n callback();\n dirty.current = true;\n }\n }, [hasTransitioned, dirty, callback]);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n const [value, setValue] = useState<T | null>(null);\n return { refCallback: (value: T) => setValue(value), value };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useFileDownload", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useForwardedRef", "ref", "innerRef", "useRef", "current", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "undefined", "isFocusedRef", "input", "onFocus", "onBlur", "addEventListener", "activeElement", "removeEventListener", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "index", "media", "matches", "defaultView", "matchMedia", "mql", "handler", "evt", "prev", "item", "forEach", "addListener", "removeListener", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "previousValue", "toValueValid", "fromValueValid", "transitioned", "useOnTransition", "callback", "dirty", "useRefCallback", "refCallback"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7689,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1831,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1201,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16409},"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useDefaultValue","useDidTransition","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useOnTransition","useRefCallback"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":382},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":331},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1384},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197}},"bytes":6505}}}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
export * from './useDefaultValue';
|
|
1
2
|
export * from './useFileDownload';
|
|
2
3
|
export * from './useForwardedRef';
|
|
3
4
|
export * from './useId';
|
|
4
5
|
export * from './useIsFocused';
|
|
5
6
|
export * from './useMediaQuery';
|
|
7
|
+
export * from './useTransitions';
|
|
8
|
+
export * from './useRefCallback';
|
|
6
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A custom React hook that provides a stable default value for a potentially undefined reactive value.
|
|
3
|
+
* The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,
|
|
4
|
+
* ensuring stability across all re-renders, even if the defaultValue prop changes.
|
|
5
|
+
*
|
|
6
|
+
* Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.
|
|
7
|
+
*
|
|
8
|
+
* @param reactiveValue - The value that may change over time.
|
|
9
|
+
* @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.
|
|
10
|
+
* @returns - The reactiveValue if it's defined, otherwise the defaultValue.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useDefaultValue: <T>(reactiveValue: T | null | undefined, defaultValue: T) => T;
|
|
13
|
+
//# sourceMappingURL=useDefaultValue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDefaultValue.d.ts","sourceRoot":"","sources":["../../../src/useDefaultValue.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,gEAU3B,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type RefCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Custom React Hook that creates a ref callback and a state variable.
|
|
4
|
+
* The ref callback sets the state variable when the ref changes.
|
|
5
|
+
*
|
|
6
|
+
* @returns An object containing the ref callback and the current value of the ref.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useRefCallback: <T = any>() => {
|
|
9
|
+
refCallback: RefCallback<T>;
|
|
10
|
+
value: T | null;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=useRefCallback.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRefCallback.d.ts","sourceRoot":"","sources":["../../../src/useRefCallback.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;CAG1B,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Executes a callback function when a specified transition occurs in a value.
|
|
3
|
+
*
|
|
4
|
+
* This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
|
|
5
|
+
* When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
|
|
6
|
+
export declare const useOnTransition: <T>(currentValue: T, fromValue: T | ((value: T) => boolean), toValue: T | ((value: T) => boolean), callback: () => void) => void;
|
|
7
|
+
//# sourceMappingURL=useTransitions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTransitions.d.ts","sourceRoot":"","sources":["../../../src/useTransitions.ts"],"names":[],"mappings":"AAiDA;;;;kHAIkH;AAClH,eAAO,MAAM,eAAe,qDAEI,OAAO,+BACb,OAAO,aACrB,MAAM,IAAI,SAerB,CAAC"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -2,8 +2,11 @@
|
|
|
2
2
|
// Copyright 2022 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
export * from './useDefaultValue';
|
|
5
6
|
export * from './useFileDownload';
|
|
6
7
|
export * from './useForwardedRef';
|
|
7
8
|
export * from './useId';
|
|
8
9
|
export * from './useIsFocused';
|
|
9
10
|
export * from './useMediaQuery';
|
|
11
|
+
export * from './useTransitions';
|
|
12
|
+
export * from './useRefCallback';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useEffect, useState, useMemo } from 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* A custom React hook that provides a stable default value for a potentially undefined reactive value.
|
|
9
|
+
* The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,
|
|
10
|
+
* ensuring stability across all re-renders, even if the defaultValue prop changes.
|
|
11
|
+
*
|
|
12
|
+
* Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.
|
|
13
|
+
*
|
|
14
|
+
* @param reactiveValue - The value that may change over time.
|
|
15
|
+
* @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.
|
|
16
|
+
* @returns - The reactiveValue if it's defined, otherwise the defaultValue.
|
|
17
|
+
*/
|
|
18
|
+
export const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {
|
|
19
|
+
// Memoize defaultValue with an empty dependency array.
|
|
20
|
+
// This ensures that the defaultValue instance remains stable across all re-renders,
|
|
21
|
+
// regardless of whether the defaultValue changes.
|
|
22
|
+
const stableDefaultValue = useMemo(() => defaultValue, []);
|
|
23
|
+
const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
|
|
24
|
+
|
|
25
|
+
useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);
|
|
26
|
+
|
|
27
|
+
return value;
|
|
28
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type RefCallback, useState } from 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Custom React Hook that creates a ref callback and a state variable.
|
|
9
|
+
* The ref callback sets the state variable when the ref changes.
|
|
10
|
+
*
|
|
11
|
+
* @returns An object containing the ref callback and the current value of the ref.
|
|
12
|
+
*/
|
|
13
|
+
export const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {
|
|
14
|
+
const [value, setValue] = useState<T | null>(null);
|
|
15
|
+
return { refCallback: (value: T) => setValue(value), value };
|
|
16
|
+
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useRef, useEffect, useState } from 'react';
|
|
6
|
+
|
|
7
|
+
const isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {
|
|
8
|
+
return functionToCheck instanceof Function;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.
|
|
13
|
+
*
|
|
14
|
+
* @param currentValue - The value that is being monitored for transitions.
|
|
15
|
+
* @param fromValue - The *from* value or a predicate function that determines the start of the transition.
|
|
16
|
+
* @param toValue - The *to* value or a predicate function that determines the end of the transition.
|
|
17
|
+
* @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.
|
|
18
|
+
*
|
|
19
|
+
* @internal Consider using `useOnTransition` for handling transitions instead of this hook.
|
|
20
|
+
*/
|
|
21
|
+
export const useDidTransition = <T>(
|
|
22
|
+
currentValue: T,
|
|
23
|
+
fromValue: T | ((value: T) => boolean),
|
|
24
|
+
toValue: T | ((value: T) => boolean),
|
|
25
|
+
) => {
|
|
26
|
+
const [hasTransitioned, setHasTransitioned] = useState(false);
|
|
27
|
+
const previousValue = useRef<T>(currentValue);
|
|
28
|
+
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
31
|
+
|
|
32
|
+
const fromValueValid = isFunction<T>(fromValue)
|
|
33
|
+
? fromValue(previousValue.current)
|
|
34
|
+
: fromValue === previousValue.current;
|
|
35
|
+
|
|
36
|
+
const transitioned = fromValueValid && toValueValid;
|
|
37
|
+
|
|
38
|
+
if (transitioned) {
|
|
39
|
+
setHasTransitioned(true);
|
|
40
|
+
} else {
|
|
41
|
+
setHasTransitioned(false);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
previousValue.current = currentValue;
|
|
45
|
+
}, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);
|
|
46
|
+
|
|
47
|
+
return hasTransitioned;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Executes a callback function when a specified transition occurs in a value.
|
|
52
|
+
*
|
|
53
|
+
* This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
|
|
54
|
+
* When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
|
|
55
|
+
export const useOnTransition = <T>(
|
|
56
|
+
currentValue: T,
|
|
57
|
+
fromValue: T | ((value: T) => boolean),
|
|
58
|
+
toValue: ((value: T) => boolean) | T,
|
|
59
|
+
callback: () => void,
|
|
60
|
+
) => {
|
|
61
|
+
const dirty = useRef(false);
|
|
62
|
+
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
63
|
+
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
dirty.current = false;
|
|
66
|
+
}, [currentValue, dirty]);
|
|
67
|
+
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (hasTransitioned && !dirty.current) {
|
|
70
|
+
callback();
|
|
71
|
+
dirty.current = true;
|
|
72
|
+
}
|
|
73
|
+
}, [hasTransitioned, dirty, callback]);
|
|
74
|
+
};
|