@dxos/react-hooks 0.8.4-main.548089c → 0.8.4-main.59c2e9b
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 +131 -122
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +131 -122
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useControlledState.d.ts +2 -3
- package/dist/types/src/useControlledState.d.ts.map +1 -1
- package/dist/types/src/useDebugDeps.d.ts +1 -1
- package/dist/types/src/useDebugDeps.d.ts.map +1 -1
- package/dist/types/src/useDynamicRef.d.ts +1 -1
- package/dist/types/src/useDynamicRef.d.ts.map +1 -1
- package/dist/types/src/useForwardedRef.d.ts +23 -3
- package/dist/types/src/useForwardedRef.d.ts.map +1 -1
- package/dist/types/src/useId.d.ts.map +1 -1
- package/dist/types/src/useMediaQuery.d.ts +1 -1
- package/dist/types/src/useMediaQuery.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +15 -11
- package/src/index.ts +0 -1
- package/src/useControlledState.ts +22 -13
- package/src/useDebugDeps.ts +17 -8
- package/src/useDynamicRef.ts +4 -5
- package/src/useForwardedRef.ts +45 -13
- package/src/useId.ts +3 -2
- package/src/useMediaQuery.ts +7 -7
- package/src/useMulticastObservable.test.ts +1 -1
- package/dist/types/src/useSignals.d.ts +0 -10
- package/dist/types/src/useSignals.d.ts.map +0 -1
- package/src/useSignals.ts +0 -27
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/useAsyncEffect.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/useAsyncEffect.ts":{"bytes":2994,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useAsyncState.ts":{"bytes":2583,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDynamicRef.ts":{"bytes":3588,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useControlledState.ts":{"bytes":3703,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"}],"format":"esm"},"src/useDebugDeps.ts":{"bytes":3943,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaultValue.ts":{"bytes":4039,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaults.ts":{"bytes":1597,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useFileDownload.ts":{"bytes":2677,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useForwardedRef.ts":{"bytes":6112,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useId.ts":{"bytes":2520,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useIsFocused.ts":{"bytes":3927,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMulticastObservable.ts":{"bytes":2978,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useRefCallback.ts":{"bytes":1824,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useViewportResize.ts":{"bytes":2884,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTimeout.ts":{"bytes":3962,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTransitions.ts":{"bytes":7869,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":2366,"imports":[{"path":"src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"src/useControlledState.ts","kind":"import-statement","original":"./useControlledState"},{"path":"src/useDebugDeps.ts","kind":"import-statement","original":"./useDebugDeps"},{"path":"src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"src/useDefaults.ts","kind":"import-statement","original":"./useDefaults"},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"src/useViewportResize.ts","kind":"import-statement","original":"./useViewportResize"},{"path":"src/useTimeout.ts","kind":"import-statement","original":"./useTimeout"},{"path":"src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"mini-virtual-list","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33879},"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":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","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":"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},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"mini-virtual-list","kind":"import-statement","external":true}],"exports":["makeId","mergeRefs","randomString","setRef","useAsyncEffect","useAsyncState","useControlledState","useDebugDeps","useDefaultValue","useDefaults","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useInterval","useIsFocused","useMediaQuery","useMergeRefs","useMulticastObservable","useOnTransition","useRefCallback","useScroller","useSize","useStateWithRef","useTimeout","useViewportResize"],"entryPoint":"src/index.ts","inputs":{"src/useAsyncEffect.ts":{"bytesInOutput":405},"src/index.ts":{"bytesInOutput":58},"src/useAsyncState.ts":{"bytesInOutput":447},"src/useControlledState.ts":{"bytesInOutput":756},"src/useDynamicRef.ts":{"bytesInOutput":724},"src/useDebugDeps.ts":{"bytesInOutput":966},"src/useDefaultValue.ts":{"bytesInOutput":422},"src/useDefaults.ts":{"bytesInOutput":228},"src/useFileDownload.ts":{"bytesInOutput":416},"src/useForwardedRef.ts":{"bytesInOutput":840},"src/useId.ts":{"bytesInOutput":421},"src/useIsFocused.ts":{"bytesInOutput":833},"src/useMediaQuery.ts":{"bytesInOutput":1941},"src/useMulticastObservable.ts":{"bytesInOutput":368},"src/useRefCallback.ts":{"bytesInOutput":197},"src/useViewportResize.ts":{"bytesInOutput":627},"src/useTimeout.ts":{"bytesInOutput":946},"src/useTransitions.ts":{"bytesInOutput":1409}},"bytes":12980}}}
|
|
@@ -43,58 +43,107 @@ var useAsyncState = (cb, deps = []) => {
|
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
// src/useControlledState.ts
|
|
46
|
-
import { useEffect as
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
|
|
47
|
+
|
|
48
|
+
// src/useDynamicRef.ts
|
|
49
|
+
import { useCallback, useEffect as useEffect3, useRef, useState as useState2 } from "react";
|
|
50
|
+
var useStateWithRef = (valueProp) => {
|
|
51
|
+
const [value, setValue] = useState2(valueProp);
|
|
52
|
+
const valueRef = useRef(valueProp);
|
|
53
|
+
const setter = useCallback((value2) => {
|
|
54
|
+
if (typeof value2 === "function") {
|
|
55
|
+
setValue((current) => {
|
|
56
|
+
valueRef.current = value2(current);
|
|
57
|
+
return valueRef.current;
|
|
58
|
+
});
|
|
59
|
+
} else {
|
|
60
|
+
valueRef.current = value2;
|
|
61
|
+
setValue(value2);
|
|
52
62
|
}
|
|
63
|
+
}, []);
|
|
64
|
+
return [
|
|
65
|
+
value,
|
|
66
|
+
setter,
|
|
67
|
+
valueRef
|
|
68
|
+
];
|
|
69
|
+
};
|
|
70
|
+
var useDynamicRef = (value) => {
|
|
71
|
+
const valueRef = useRef(value);
|
|
72
|
+
useEffect3(() => {
|
|
73
|
+
valueRef.current = value;
|
|
53
74
|
}, [
|
|
54
|
-
|
|
55
|
-
...deps
|
|
75
|
+
value
|
|
56
76
|
]);
|
|
57
|
-
|
|
58
|
-
|
|
77
|
+
return valueRef;
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
// src/useControlledState.ts
|
|
81
|
+
var useControlledState = (valueProp, onChange) => {
|
|
82
|
+
const [value, setControlledValue] = useState3(valueProp);
|
|
83
|
+
useEffect4(() => {
|
|
84
|
+
setControlledValue(valueProp);
|
|
59
85
|
}, [
|
|
60
|
-
|
|
61
|
-
|
|
86
|
+
valueProp
|
|
87
|
+
]);
|
|
88
|
+
const onChangeRef = useRef2(onChange);
|
|
89
|
+
const valueRef = useDynamicRef(valueProp);
|
|
90
|
+
const setValue = useCallback2((nextValue) => {
|
|
91
|
+
const value2 = isFunction(nextValue) ? nextValue(valueRef.current) : nextValue;
|
|
92
|
+
setControlledValue(value2);
|
|
93
|
+
onChangeRef.current?.(value2);
|
|
94
|
+
}, [
|
|
95
|
+
valueRef,
|
|
96
|
+
onChangeRef
|
|
62
97
|
]);
|
|
63
98
|
return [
|
|
64
99
|
value,
|
|
65
100
|
setValue
|
|
66
101
|
];
|
|
67
102
|
};
|
|
103
|
+
function isFunction(value) {
|
|
104
|
+
return typeof value === "function";
|
|
105
|
+
}
|
|
68
106
|
|
|
69
107
|
// src/useDebugDeps.ts
|
|
70
|
-
import { useEffect as
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
108
|
+
import { useEffect as useEffect5, useRef as useRef3 } from "react";
|
|
109
|
+
import { log } from "@dxos/log";
|
|
110
|
+
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-primitives/react-hooks/src/useDebugDeps.ts";
|
|
111
|
+
var useDebugDeps = (deps = [], label = "useDebugDeps", active = true) => {
|
|
112
|
+
const lastDeps = useRef3([]);
|
|
113
|
+
useEffect5(() => {
|
|
114
|
+
if (!active) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const diff = {};
|
|
78
118
|
for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
|
|
79
|
-
if (lastDeps.current[i] !== deps[i]
|
|
80
|
-
|
|
81
|
-
index: i,
|
|
119
|
+
if (lastDeps.current[i] !== deps[i] || i > lastDeps.current.length) {
|
|
120
|
+
diff[i] = {
|
|
82
121
|
previous: lastDeps.current[i],
|
|
83
122
|
current: deps[i]
|
|
84
|
-
}
|
|
123
|
+
};
|
|
85
124
|
}
|
|
86
125
|
}
|
|
87
|
-
|
|
126
|
+
if (Object.keys(diff).length > 0) {
|
|
127
|
+
log.warn(`Updated: ${label} [${lastDeps.current.length}/${deps.length}]`, diff, {
|
|
128
|
+
F: __dxlog_file,
|
|
129
|
+
L: 30,
|
|
130
|
+
S: void 0,
|
|
131
|
+
C: (f, a) => f(...a)
|
|
132
|
+
});
|
|
133
|
+
}
|
|
88
134
|
lastDeps.current = deps;
|
|
89
|
-
},
|
|
135
|
+
}, [
|
|
136
|
+
...deps,
|
|
137
|
+
active
|
|
138
|
+
]);
|
|
90
139
|
};
|
|
91
140
|
|
|
92
141
|
// src/useDefaultValue.ts
|
|
93
|
-
import { useEffect as
|
|
142
|
+
import { useEffect as useEffect6, useMemo, useState as useState4 } from "react";
|
|
94
143
|
var useDefaultValue = (reactiveValue, getDefaultValue) => {
|
|
95
144
|
const stableDefaultValue = useMemo(getDefaultValue, []);
|
|
96
|
-
const [value, setValue] =
|
|
97
|
-
|
|
145
|
+
const [value, setValue] = useState4(reactiveValue ?? stableDefaultValue);
|
|
146
|
+
useEffect6(() => {
|
|
98
147
|
setValue(reactiveValue ?? stableDefaultValue);
|
|
99
148
|
}, [
|
|
100
149
|
reactiveValue,
|
|
@@ -113,39 +162,6 @@ var useDefaults = (value, defaults) => {
|
|
|
113
162
|
]);
|
|
114
163
|
};
|
|
115
164
|
|
|
116
|
-
// src/useDynamicRef.ts
|
|
117
|
-
import { useCallback } from "@preact-signals/safe-react/react";
|
|
118
|
-
import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
|
|
119
|
-
var useStateWithRef = (valueParam) => {
|
|
120
|
-
const [value, setValue] = useState4(valueParam);
|
|
121
|
-
const valueRef = useRef2(valueParam);
|
|
122
|
-
const setter = useCallback((value2) => {
|
|
123
|
-
if (typeof value2 === "function") {
|
|
124
|
-
setValue((current) => {
|
|
125
|
-
valueRef.current = value2(current);
|
|
126
|
-
return valueRef.current;
|
|
127
|
-
});
|
|
128
|
-
} else {
|
|
129
|
-
valueRef.current = value2;
|
|
130
|
-
setValue(value2);
|
|
131
|
-
}
|
|
132
|
-
}, []);
|
|
133
|
-
return [
|
|
134
|
-
value,
|
|
135
|
-
setter,
|
|
136
|
-
valueRef
|
|
137
|
-
];
|
|
138
|
-
};
|
|
139
|
-
var useDynamicRef = (value) => {
|
|
140
|
-
const valueRef = useRef2(value);
|
|
141
|
-
useEffect6(() => {
|
|
142
|
-
valueRef.current = value;
|
|
143
|
-
}, [
|
|
144
|
-
value
|
|
145
|
-
]);
|
|
146
|
-
return valueRef;
|
|
147
|
-
};
|
|
148
|
-
|
|
149
165
|
// src/useFileDownload.ts
|
|
150
166
|
import { useMemo as useMemo3 } from "react";
|
|
151
167
|
var useFileDownload = () => {
|
|
@@ -160,43 +176,59 @@ var useFileDownload = () => {
|
|
|
160
176
|
};
|
|
161
177
|
|
|
162
178
|
// src/useForwardedRef.ts
|
|
163
|
-
import { useEffect as useEffect7, useRef as
|
|
164
|
-
var useForwardedRef = (
|
|
165
|
-
const
|
|
179
|
+
import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4 } from "react";
|
|
180
|
+
var useForwardedRef = (forwardedRef) => {
|
|
181
|
+
const localRef = useRef4(null);
|
|
166
182
|
useEffect7(() => {
|
|
167
|
-
|
|
183
|
+
setRef(forwardedRef, localRef.current);
|
|
168
184
|
}, [
|
|
169
|
-
|
|
185
|
+
forwardedRef
|
|
170
186
|
]);
|
|
171
|
-
return
|
|
187
|
+
return localRef;
|
|
172
188
|
};
|
|
173
|
-
|
|
174
|
-
if (!ref) {
|
|
175
|
-
return;
|
|
176
|
-
}
|
|
189
|
+
function setRef(ref, value) {
|
|
177
190
|
if (typeof ref === "function") {
|
|
178
|
-
ref(value);
|
|
179
|
-
} else {
|
|
191
|
+
return ref(value);
|
|
192
|
+
} else if (ref) {
|
|
180
193
|
ref.current = value;
|
|
181
194
|
}
|
|
195
|
+
}
|
|
196
|
+
var mergeRefs = (refs) => {
|
|
197
|
+
return (value) => {
|
|
198
|
+
const cleanups = [];
|
|
199
|
+
for (const ref of refs) {
|
|
200
|
+
const cleanup = setRef(ref, value);
|
|
201
|
+
cleanups.push(typeof cleanup === "function" ? cleanup : () => setRef(ref, null));
|
|
202
|
+
}
|
|
203
|
+
return () => {
|
|
204
|
+
for (const cleanup of cleanups) cleanup();
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
};
|
|
208
|
+
var useMergeRefs = (refs) => {
|
|
209
|
+
return useMemo4(() => mergeRefs(refs), [
|
|
210
|
+
...refs
|
|
211
|
+
]);
|
|
182
212
|
};
|
|
183
213
|
|
|
184
214
|
// src/useId.ts
|
|
185
215
|
import alea from "alea";
|
|
186
|
-
import { useMemo as
|
|
216
|
+
import { useMemo as useMemo5 } from "react";
|
|
187
217
|
var Alea = alea;
|
|
188
218
|
var prng = new Alea("@dxos/react-hooks");
|
|
189
219
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
190
|
-
var useId = (namespace, propsId, opts) =>
|
|
191
|
-
propsId
|
|
192
|
-
|
|
220
|
+
var useId = (namespace, propsId, opts) => {
|
|
221
|
+
return useMemo5(() => makeId(namespace, propsId, opts), [
|
|
222
|
+
propsId
|
|
223
|
+
]);
|
|
224
|
+
};
|
|
193
225
|
var makeId = (namespace, propsId, opts) => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;
|
|
194
226
|
|
|
195
227
|
// src/useIsFocused.ts
|
|
196
|
-
import { useEffect as useEffect8, useRef as
|
|
228
|
+
import { useEffect as useEffect8, useRef as useRef5, useState as useState5 } from "react";
|
|
197
229
|
var useIsFocused = (inputRef) => {
|
|
198
230
|
const [isFocused, setIsFocused] = useState5(void 0);
|
|
199
|
-
const isFocusedRef =
|
|
231
|
+
const isFocusedRef = useRef5(isFocused);
|
|
200
232
|
isFocusedRef.current = isFocused;
|
|
201
233
|
useEffect8(() => {
|
|
202
234
|
const input = inputRef.current;
|
|
@@ -287,9 +319,9 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
287
319
|
};
|
|
288
320
|
|
|
289
321
|
// src/useMulticastObservable.ts
|
|
290
|
-
import { useMemo as
|
|
322
|
+
import { useMemo as useMemo6, useSyncExternalStore } from "react";
|
|
291
323
|
var useMulticastObservable = (observable) => {
|
|
292
|
-
const subscribeFn =
|
|
324
|
+
const subscribeFn = useMemo6(() => (listener) => {
|
|
293
325
|
const subscription = observable.subscribe(listener);
|
|
294
326
|
return () => subscription.unsubscribe();
|
|
295
327
|
}, [
|
|
@@ -309,9 +341,9 @@ var useRefCallback = () => {
|
|
|
309
341
|
};
|
|
310
342
|
|
|
311
343
|
// src/useViewportResize.ts
|
|
312
|
-
import { useLayoutEffect, useMemo as
|
|
344
|
+
import { useLayoutEffect, useMemo as useMemo7 } from "react";
|
|
313
345
|
var useViewportResize = (handler, deps = [], delay = 800) => {
|
|
314
|
-
const debouncedHandler =
|
|
346
|
+
const debouncedHandler = useMemo7(() => {
|
|
315
347
|
let timeout;
|
|
316
348
|
return (event) => {
|
|
317
349
|
clearTimeout(timeout);
|
|
@@ -333,39 +365,16 @@ var useViewportResize = (handler, deps = [], delay = 800) => {
|
|
|
333
365
|
]);
|
|
334
366
|
};
|
|
335
367
|
|
|
336
|
-
// src/useSignals.ts
|
|
337
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
338
|
-
import { computed, effect } from "@preact-signals/safe-react";
|
|
339
|
-
import { useRef as useRef5 } from "@preact-signals/safe-react/react";
|
|
340
|
-
import { useEffect as useEffect10, useMemo as useMemo7 } from "react";
|
|
341
|
-
var useSignalsEffect = (cb, deps) => {
|
|
342
|
-
const callback = useRef5(cb);
|
|
343
|
-
callback.current = cb;
|
|
344
|
-
useEffect10(() => {
|
|
345
|
-
return effect(() => {
|
|
346
|
-
return callback.current();
|
|
347
|
-
});
|
|
348
|
-
}, deps ?? []);
|
|
349
|
-
};
|
|
350
|
-
var useSignalsMemo = (cb, deps) => {
|
|
351
|
-
var _effect = _useSignals();
|
|
352
|
-
try {
|
|
353
|
-
return useMemo7(() => computed(cb), deps ?? []).value;
|
|
354
|
-
} finally {
|
|
355
|
-
_effect.f();
|
|
356
|
-
}
|
|
357
|
-
};
|
|
358
|
-
|
|
359
368
|
// src/useTimeout.ts
|
|
360
|
-
import { useEffect as
|
|
369
|
+
import { useEffect as useEffect10, useRef as useRef6 } from "react";
|
|
361
370
|
var useTimeout = (callback, delay = 0, deps = []) => {
|
|
362
371
|
const callbackRef = useRef6(callback);
|
|
363
|
-
|
|
372
|
+
useEffect10(() => {
|
|
364
373
|
callbackRef.current = callback;
|
|
365
374
|
}, [
|
|
366
375
|
callback
|
|
367
376
|
]);
|
|
368
|
-
|
|
377
|
+
useEffect10(() => {
|
|
369
378
|
if (delay == null) {
|
|
370
379
|
return;
|
|
371
380
|
}
|
|
@@ -378,12 +387,12 @@ var useTimeout = (callback, delay = 0, deps = []) => {
|
|
|
378
387
|
};
|
|
379
388
|
var useInterval = (callback, delay = 0, deps = []) => {
|
|
380
389
|
const callbackRef = useRef6(callback);
|
|
381
|
-
|
|
390
|
+
useEffect10(() => {
|
|
382
391
|
callbackRef.current = callback;
|
|
383
392
|
}, [
|
|
384
393
|
callback
|
|
385
394
|
]);
|
|
386
|
-
|
|
395
|
+
useEffect10(() => {
|
|
387
396
|
if (delay == null) {
|
|
388
397
|
return;
|
|
389
398
|
}
|
|
@@ -401,16 +410,16 @@ var useInterval = (callback, delay = 0, deps = []) => {
|
|
|
401
410
|
};
|
|
402
411
|
|
|
403
412
|
// src/useTransitions.ts
|
|
404
|
-
import { useEffect as
|
|
405
|
-
var
|
|
413
|
+
import { useEffect as useEffect11, useRef as useRef7, useState as useState8 } from "react";
|
|
414
|
+
var isFunction2 = (functionToCheck) => {
|
|
406
415
|
return functionToCheck instanceof Function;
|
|
407
416
|
};
|
|
408
417
|
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
409
418
|
const [hasTransitioned, setHasTransitioned] = useState8(false);
|
|
410
419
|
const previousValue = useRef7(currentValue);
|
|
411
|
-
|
|
412
|
-
const toValueValid =
|
|
413
|
-
const fromValueValid =
|
|
420
|
+
useEffect11(() => {
|
|
421
|
+
const toValueValid = isFunction2(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
422
|
+
const fromValueValid = isFunction2(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
414
423
|
if (fromValueValid && toValueValid && !hasTransitioned) {
|
|
415
424
|
setHasTransitioned(true);
|
|
416
425
|
} else if ((!fromValueValid || !toValueValid) && hasTransitioned) {
|
|
@@ -428,13 +437,13 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
|
428
437
|
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
429
438
|
const dirty = useRef7(false);
|
|
430
439
|
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
431
|
-
|
|
440
|
+
useEffect11(() => {
|
|
432
441
|
dirty.current = false;
|
|
433
442
|
}, [
|
|
434
443
|
currentValue,
|
|
435
444
|
dirty
|
|
436
445
|
]);
|
|
437
|
-
|
|
446
|
+
useEffect11(() => {
|
|
438
447
|
if (hasTransitioned && !dirty.current) {
|
|
439
448
|
callback();
|
|
440
449
|
dirty.current = true;
|
|
@@ -450,8 +459,9 @@ var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
|
450
459
|
import { useSize, useScroller } from "mini-virtual-list";
|
|
451
460
|
export {
|
|
452
461
|
makeId,
|
|
462
|
+
mergeRefs,
|
|
453
463
|
randomString,
|
|
454
|
-
|
|
464
|
+
setRef,
|
|
455
465
|
useAsyncEffect,
|
|
456
466
|
useAsyncState,
|
|
457
467
|
useControlledState,
|
|
@@ -466,12 +476,11 @@ export {
|
|
|
466
476
|
useInterval,
|
|
467
477
|
useIsFocused,
|
|
468
478
|
useMediaQuery,
|
|
479
|
+
useMergeRefs,
|
|
469
480
|
useMulticastObservable,
|
|
470
481
|
useOnTransition,
|
|
471
482
|
useRefCallback,
|
|
472
483
|
useScroller,
|
|
473
|
-
useSignalsEffect,
|
|
474
|
-
useSignalsMemo,
|
|
475
484
|
useSize,
|
|
476
485
|
useStateWithRef,
|
|
477
486
|
useTimeout,
|