@hanzogui/animations-reanimated 8.3.1 → 8.3.2

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.
@@ -1,959 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all) __defProp(target, name, {
9
- get: all[name],
10
- enumerable: true
11
- });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
16
- get: () => from[key],
17
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
18
- });
19
- }
20
- return to;
21
- };
22
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
- // If the importer is in node compatibility mode or this is not an ESM
24
- // file that has been converted to a CommonJS file using a Babel-
25
- // compatible transform (i.e. "__esModule" has not been set), then set
26
- // "default" to the CommonJS "module.exports" for node compatibility.
27
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
28
- value: mod,
29
- enumerable: true
30
- }) : target, mod));
31
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
32
- value: true
33
- }), mod);
34
- var createAnimations_exports = {};
35
- __export(createAnimations_exports, {
36
- createAnimations: () => createAnimations
37
- });
38
- module.exports = __toCommonJS(createAnimations_exports);
39
- var import_animation_helpers = require("@hanzogui/animation-helpers");
40
- var import_core = require("@hanzogui/core");
41
- var import_use_presence = require("@hanzogui/use-presence");
42
- var import_normalize_colors = __toESM(require("@react-native/normalize-colors"), 1);
43
- var import_react = __toESM(require("react"), 1);
44
- var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
45
- var import_jsx_runtime = require("react/jsx-runtime");
46
- const getDefaultExport = module2 => {
47
- const mod = module2;
48
- if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
49
- return mod.default || mod;
50
- }
51
- return mod;
52
- };
53
- const Animated = getDefaultExport(import_react_native_reanimated.default);
54
- const silenceAnimatedComponentDevCheck = style => {
55
- if (process.env.NODE_ENV !== "development" || import_core.isWeb || !style || typeof style !== "object") {
56
- return;
57
- }
58
- Object.defineProperty(style, "_requiresAnimatedComponent", {
59
- configurable: true,
60
- enumerable: false,
61
- value: true
62
- });
63
- };
64
- const resolveDynamicValue = (value, isDark) => {
65
- if (value !== null && typeof value === "object" && "dynamic" in value && typeof value.dynamic === "object") {
66
- const dynamic = value.dynamic;
67
- return isDark ? dynamic.dark : dynamic.light;
68
- }
69
- return value;
70
- };
71
- const updateMapperState = import_core.isWeb ? (state, emitted) => {
72
- state.value.emitted = emitted;
73
- } : (state, emitted) => {
74
- "worklet";
75
-
76
- if (!globalThis._WORKLET) return;
77
- state.modify(current => {
78
- current.emitted = emitted;
79
- return current;
80
- }, false);
81
- };
82
- const cloneAnimationValue = value => {
83
- if (Array.isArray(value)) {
84
- return value.map(cloneAnimationValue);
85
- }
86
- if (value && typeof value === "object") {
87
- const next = {};
88
- for (const key in value) {
89
- next[key] = cloneAnimationValue(value[key]);
90
- }
91
- return next;
92
- }
93
- return value;
94
- };
95
- const cloneStyleRecord = style => {
96
- const next = {};
97
- for (const key in style) {
98
- next[key] = cloneAnimationValue(style[key]);
99
- }
100
- return next;
101
- };
102
- const cloneTransitionConfig = config => {
103
- return cloneAnimationValue(config);
104
- };
105
- const getAnimatedTransforms = value => {
106
- if (!Array.isArray(value)) return [];
107
- return value.filter(item => item !== null && typeof item === "object" && !Array.isArray(item));
108
- };
109
- const getRemovedAnimatedKeys = (current, previous) => {
110
- const removedKeys = {};
111
- for (const key of previous) {
112
- if (!current.has(key)) removedKeys[key] = true;
113
- }
114
- return removedKeys;
115
- };
116
- const getImplicitDefault = (key, targetValue) => {
117
- "worklet";
118
-
119
- const value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
120
- if (typeof targetValue !== "string") return value;
121
- let suffixIndex = 0;
122
- while (suffixIndex < targetValue.length) {
123
- const character = targetValue[suffixIndex];
124
- const code = character.charCodeAt(0);
125
- if (code >= 48 && code <= 57 || character === "." || character === "-" || character === "+") {
126
- suffixIndex++;
127
- } else {
128
- break;
129
- }
130
- }
131
- return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
132
- };
133
- const COLOR_STYLE_KEYS = {
134
- backgroundColor: true,
135
- borderColor: true,
136
- borderLeftColor: true,
137
- borderRightColor: true,
138
- borderTopColor: true,
139
- borderBottomColor: true,
140
- color: true
141
- };
142
- const toReanimatedColor = value => {
143
- "worklet";
144
-
145
- if (typeof value === "number") {
146
- const color = value >>> 0;
147
- const alpha = (color >>> 24 & 255) / 255;
148
- const red = color >>> 16 & 255;
149
- const green = color >>> 8 & 255;
150
- const blue = color & 255;
151
- return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
152
- }
153
- if (typeof value !== "string") return value;
154
- const trimmed = value.trim();
155
- if (trimmed === "transparent") return "rgba(0, 0, 0, 0)";
156
- return trimmed;
157
- };
158
- const isReanimatedColorHistory = value => {
159
- "worklet";
160
-
161
- const normalized = toReanimatedColor(value);
162
- return typeof normalized === "string" && normalized.startsWith("rgba(");
163
- };
164
- const normalizeAnimationColor = value => {
165
- if (typeof value === "number") {
166
- return toReanimatedColor(value);
167
- }
168
- if (typeof value !== "string") return;
169
- const color = (0, import_normalize_colors.default)(value);
170
- if (color == null) return;
171
- const red = Math.round((color & 4278190080) >>> 24);
172
- const green = Math.round((color & 16711680) >>> 16);
173
- const blue = Math.round((color & 65280) >>> 8);
174
- const alpha = (color & 255) / 255;
175
- return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
176
- };
177
- const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted) => {
178
- const snapshotAnimated = {};
179
- const snapshotStatics = cloneStyleRecord(statics);
180
- for (const key in snapshotStatics) {
181
- if (!COLOR_STYLE_KEYS[key]) continue;
182
- const normalized = normalizeAnimationColor(snapshotStatics[key]);
183
- if (normalized !== void 0) snapshotStatics[key] = normalized;
184
- }
185
- for (const key in animated) {
186
- if (key === "transform") continue;
187
- const value = animated[key];
188
- if (COLOR_STYLE_KEYS[key]) {
189
- const normalized = normalizeAnimationColor(value);
190
- if (normalized === void 0) {
191
- snapshotStatics[key] = cloneAnimationValue(value);
192
- continue;
193
- }
194
- snapshotAnimated[key] = normalized;
195
- } else {
196
- snapshotAnimated[key] = cloneAnimationValue(value);
197
- }
198
- }
199
- const snapshotTransforms = transforms.map(cloneStyleRecord);
200
- const keys = new Set(Object.keys(snapshotAnimated));
201
- for (const transform of snapshotTransforms) {
202
- const key = Object.keys(transform)[0];
203
- const value = key ? transform[key] : void 0;
204
- if (key && (typeof value === "number" || typeof value === "string")) {
205
- keys.add(`transform:${key}`);
206
- }
207
- }
208
- const seeds = {};
209
- for (const key of keys) {
210
- let value = lastPainted[key];
211
- if (typeof value !== "number" && typeof value !== "string") continue;
212
- if (value === "auto" || typeof value === "string" && value.startsWith("calc")) {
213
- continue;
214
- }
215
- if (COLOR_STYLE_KEYS[key]) value = normalizeAnimationColor(value);
216
- if (value !== void 0) seeds[key] = value;
217
- }
218
- const gatedKeys = {};
219
- for (const key of keys) gatedKeys[key] = true;
220
- const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
221
- const painted = {
222
- ...snapshotStatics,
223
- ...snapshotAnimated
224
- };
225
- const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
226
- delete painted.transform;
227
- for (const transform of staticTransforms) {
228
- const key = Object.keys(transform)[0];
229
- if (key) painted[`transform:${key}`] = transform[key];
230
- }
231
- for (const transform of snapshotTransforms) {
232
- const key = Object.keys(transform)[0];
233
- if (key) painted[`transform:${key}`] = transform[key];
234
- }
235
- return {
236
- value: {
237
- animated: snapshotAnimated,
238
- statics: snapshotStatics,
239
- transforms: snapshotTransforms,
240
- gatedKeys,
241
- seeds,
242
- removedKeys,
243
- removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:")),
244
- clearValue: import_core.isWeb ? "" : null
245
- },
246
- painted,
247
- keys
248
- };
249
- };
250
- const getGatedKeys = snapshot => Object.keys(snapshot.gatedKeys);
251
- const createReanimatedConfig = config => {
252
- "worklet";
253
-
254
- const next = {};
255
- const source = config;
256
- for (const key in source) {
257
- if (key === "type" || key === "delay") continue;
258
- const value = source[key];
259
- if (value !== void 0) {
260
- next[key] = value;
261
- }
262
- }
263
- return next;
264
- };
265
- const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
266
- "worklet";
267
-
268
- const delay = config.delay;
269
- const reanimatedConfig = createReanimatedConfig(config);
270
- let animatedValue;
271
- if (config.type === "timing") {
272
- animatedValue = (0, import_react_native_reanimated.withTiming)(targetValue, reanimatedConfig, callback);
273
- } else {
274
- animatedValue = (0, import_react_native_reanimated.withSpring)(targetValue, reanimatedConfig, callback);
275
- }
276
- if (seedValue !== void 0 || validateStartAsColor) {
277
- const innerOnStart = animatedValue.onStart;
278
- animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
279
- "worklet";
280
-
281
- const startValue = validateStartAsColor ? isReanimatedColorHistory(value) ? toReanimatedColor(value) : seedValue ?? targetValue : seedValue;
282
- innerOnStart(animation, startValue, timestamp, previousAnimation);
283
- };
284
- }
285
- if (delay && delay > 0) {
286
- animatedValue = (0, import_react_native_reanimated.withDelay)(delay, animatedValue);
287
- }
288
- return animatedValue;
289
- };
290
- const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingAnimation, didAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, validateStartAsColor = false) => {
291
- "worklet";
292
-
293
- const cycleGated = gated && (currentlyExiting || currentlyCompletingAnimation);
294
- if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
295
- return targetValue;
296
- }
297
- let callback;
298
- if (gated && currentlyExiting) {
299
- callback = finished => {
300
- "worklet";
301
-
302
- (0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(key, exitCycleId, finished ?? false);
303
- };
304
- } else if (gated && currentlyCompletingAnimation) {
305
- callback = finished => {
306
- "worklet";
307
-
308
- (0, import_react_native_reanimated.runOnJS)(markDidAnimateKeyDone)(key, didAnimateCycleId, finished ?? false);
309
- };
310
- }
311
- return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
312
- };
313
- const ANIMATABLE_PROPERTIES = {
314
- // Transform
315
- transform: true,
316
- // Opacity
317
- opacity: true,
318
- // Dimensions
319
- height: true,
320
- width: true,
321
- minWidth: true,
322
- minHeight: true,
323
- maxWidth: true,
324
- maxHeight: true,
325
- // Background
326
- backgroundColor: true,
327
- // Border colors
328
- borderColor: true,
329
- borderLeftColor: true,
330
- borderRightColor: true,
331
- borderTopColor: true,
332
- borderBottomColor: true,
333
- // Border radius
334
- borderRadius: true,
335
- borderTopLeftRadius: true,
336
- borderTopRightRadius: true,
337
- borderBottomLeftRadius: true,
338
- borderBottomRightRadius: true,
339
- // Border width
340
- borderWidth: true,
341
- borderLeftWidth: true,
342
- borderRightWidth: true,
343
- borderTopWidth: true,
344
- borderBottomWidth: true,
345
- // Text
346
- color: true,
347
- fontSize: true,
348
- fontWeight: true,
349
- lineHeight: true,
350
- letterSpacing: true,
351
- // Position
352
- left: true,
353
- right: true,
354
- top: true,
355
- bottom: true,
356
- // Margin
357
- margin: true,
358
- marginTop: true,
359
- marginBottom: true,
360
- marginLeft: true,
361
- marginRight: true,
362
- marginHorizontal: true,
363
- marginVertical: true,
364
- // Padding
365
- padding: true,
366
- paddingTop: true,
367
- paddingBottom: true,
368
- paddingLeft: true,
369
- paddingRight: true,
370
- paddingHorizontal: true,
371
- paddingVertical: true,
372
- // Flex/Gap
373
- gap: true,
374
- rowGap: true,
375
- columnGap: true,
376
- flex: true,
377
- flexGrow: true,
378
- flexShrink: true
379
- };
380
- const canAnimateProperty = (key, value, animateOnly) => {
381
- if (!ANIMATABLE_PROPERTIES[key]) return false;
382
- if (value === "auto") return false;
383
- if (typeof value === "string" && value.startsWith("calc")) return false;
384
- if (animateOnly && !animateOnly.includes(key)) return false;
385
- return true;
386
- };
387
- const splitAnimationStyles = (style, isDark, disableAnimation, animateOnly) => {
388
- const animated = {};
389
- const statics = {};
390
- for (const key in style) {
391
- const value = resolveDynamicValue(style[key], isDark);
392
- if (value === void 0) continue;
393
- if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
394
- animated[key] = cloneAnimationValue(value);
395
- } else {
396
- statics[key] = cloneAnimationValue(value);
397
- }
398
- }
399
- return {
400
- animated,
401
- statics
402
- };
403
- };
404
- function createWebAnimatedComponent(defaultTag) {
405
- const isText = defaultTag === "span";
406
- const Component = Animated.createAnimatedComponent((0, import_react.forwardRef)((propsIn, ref) => {
407
- const {
408
- forwardedRef,
409
- render = defaultTag,
410
- ...rest
411
- } = propsIn;
412
- const hostRef = (0, import_react.useRef)(null);
413
- const composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef);
414
- const stateRef = (0, import_react.useRef)({
415
- get host() {
416
- return hostRef.current;
417
- }
418
- });
419
- const [, themeState] = (0, import_core.useThemeWithState)({});
420
- const result = (0, import_core.getSplitStyles)(rest, isText ? import_core.Text.staticConfig : import_core.View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", {
421
- unmounted: false
422
- }, {
423
- isAnimated: false,
424
- noClass: true
425
- });
426
- const viewProps = result?.viewProps ?? {};
427
- const Element = render;
428
- const transformedProps = import_core.hooks.usePropsTransform?.(render, viewProps, stateRef, false);
429
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
430
- ...transformedProps,
431
- ref: composedRefs
432
- });
433
- }));
434
- Component.acceptRenderProp = true;
435
- return Component;
436
- }
437
- const AnimatedView = createWebAnimatedComponent("div");
438
- const AnimatedText = createWebAnimatedComponent("span");
439
- function buildTransitionConfig(transition, animations, animationState, styleKeys) {
440
- const normalized = (0, import_animation_helpers.normalizeTransition)(transition);
441
- const effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
442
- let base = cloneTransitionConfig(effectiveKey ? animations[effectiveKey] ?? {
443
- type: "spring"
444
- } : {
445
- type: "spring"
446
- });
447
- if (normalized.delay) {
448
- base = cloneTransitionConfig({
449
- ...base,
450
- delay: normalized.delay
451
- });
452
- }
453
- if (normalized.config) {
454
- base = cloneTransitionConfig({
455
- ...base,
456
- ...normalized.config
457
- });
458
- if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
459
- base = cloneTransitionConfig({
460
- ...base,
461
- type: "timing"
462
- });
463
- }
464
- }
465
- const propertyConfigs = {};
466
- for (const key of styleKeys) {
467
- const propAnimation = normalized.properties[key];
468
- if (typeof propAnimation === "string") {
469
- propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
470
- } else if (propAnimation && typeof propAnimation === "object") {
471
- const configType = propAnimation.type;
472
- const baseForProp = configType ? animations[configType] ?? base : base;
473
- propertyConfigs[key] = cloneTransitionConfig({
474
- ...baseForProp,
475
- ...propAnimation
476
- });
477
- } else {
478
- propertyConfigs[key] = cloneTransitionConfig(base);
479
- }
480
- }
481
- return {
482
- baseConfig: base,
483
- propertyConfigs
484
- };
485
- }
486
- function getStyleKeys(style) {
487
- const keys = new Set(Object.keys(style));
488
- if (style.transform && Array.isArray(style.transform)) {
489
- for (const t of style.transform) {
490
- if (t && typeof t === "object") {
491
- keys.add(Object.keys(t)[0]);
492
- }
493
- }
494
- }
495
- return keys;
496
- }
497
- function createAnimations(animationsConfig) {
498
- const animations = {};
499
- for (const key in animationsConfig) {
500
- animations[key] = cloneTransitionConfig({
501
- type: "spring",
502
- ...animationsConfig[key]
503
- });
504
- }
505
- return {
506
- needsCustomComponent: true,
507
- View: import_core.isWeb ? AnimatedView : Animated.View,
508
- Text: import_core.isWeb ? AnimatedText : Animated.Text,
509
- isReactNative: true,
510
- inputStyle: "value",
511
- outputStyle: "inline",
512
- avoidReRenders: true,
513
- animations,
514
- usePresence: import_use_presence.usePresence,
515
- ResetPresence: import_use_presence.ResetPresence,
516
- // =========================================================================
517
- // useAnimatedNumber - For imperative animated values
518
- // =========================================================================
519
- useAnimatedNumber(initial) {
520
- const sharedValue = (0, import_react_native_reanimated.useSharedValue)(initial);
521
- return (0, import_react.useMemo)(() => ({
522
- getInstance() {
523
- "worklet";
524
-
525
- return sharedValue;
526
- },
527
- getValue() {
528
- "worklet";
529
-
530
- return sharedValue.value;
531
- },
532
- setValue(next, config = {
533
- type: "spring"
534
- }, onFinish) {
535
- if (config.type === "direct") {
536
- sharedValue.value = next;
537
- onFinish?.();
538
- } else {
539
- const cb = onFinish ? finished => {
540
- "worklet";
541
-
542
- if (finished !== false) {
543
- (0, import_react_native_reanimated.runOnJS)(onFinish)();
544
- }
545
- } : void 0;
546
- const animationConfig = cloneTransitionConfig(config);
547
- if (import_core.isWeb) {
548
- sharedValue.value = applyAnimation(next, animationConfig, cb);
549
- } else {
550
- (0, import_react_native_reanimated.runOnUI)((targetValue, animationConfig2) => {
551
- "worklet";
552
-
553
- sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
554
- })(next, animationConfig);
555
- }
556
- }
557
- },
558
- stop() {
559
- (0, import_react_native_reanimated.cancelAnimation)(sharedValue);
560
- }
561
- }), [sharedValue]);
562
- },
563
- // =========================================================================
564
- // useAnimatedNumberReaction - React to animated value changes
565
- // =========================================================================
566
- useAnimatedNumberReaction({
567
- value
568
- }, onValue) {
569
- const instance = value.getInstance();
570
- return (0, import_react_native_reanimated.useAnimatedReaction)(() => instance.value, (next, prev) => {
571
- if (prev !== next) {
572
- (0, import_react_native_reanimated.runOnJS)(onValue)(next);
573
- }
574
- }, [onValue, instance]);
575
- },
576
- // =========================================================================
577
- // useAnimatedNumberStyle - Create animated styles from values
578
- // =========================================================================
579
- useAnimatedNumberStyle(val, getStyle) {
580
- const instance = val.getInstance();
581
- if (import_core.isWeb) {
582
- return (0, import_react_native_reanimated.useAnimatedStyle)(() => {
583
- "worklet";
584
-
585
- return getStyle(instance.value);
586
- }, [instance, getStyle]);
587
- }
588
- const styleVal = (0, import_react_native_reanimated.useDerivedValue)(() => {
589
- "worklet";
590
-
591
- return getStyle(instance.value);
592
- });
593
- const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
594
- "worklet";
595
-
596
- return styleVal.value;
597
- });
598
- silenceAnimatedComponentDevCheck(animatedStyle);
599
- return animatedStyle;
600
- },
601
- useAnimatedNumbersStyle(vals, getStyle) {
602
- const instances = vals.map(v => v.getInstance());
603
- const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
604
- "worklet";
605
-
606
- const currentValues = instances.map(inst => inst.value);
607
- return getStyle(...currentValues);
608
- }, import_core.isWeb ? [getStyle, ...instances] : void 0);
609
- silenceAnimatedComponentDevCheck(animatedStyle);
610
- return animatedStyle;
611
- },
612
- // =========================================================================
613
- // useAnimations - Main animation hook for components
614
- // =========================================================================
615
- useAnimations(animationProps) {
616
- const {
617
- props,
618
- presence,
619
- style,
620
- componentState,
621
- useStyleEmitter,
622
- themeName,
623
- stateRef,
624
- styleState,
625
- onDidAnimate
626
- } = animationProps;
627
- const isHydrating = componentState.unmounted === true;
628
- const isMounting = componentState.unmounted === "should-enter";
629
- const isEntering = !!componentState.unmounted;
630
- const isExiting = presence?.[0] === false;
631
- const wasEnteringRef = (0, import_react.useRef)(isEntering);
632
- const justFinishedEntering = wasEnteringRef.current && !isEntering;
633
- import_react.default.useEffect(() => {
634
- wasEnteringRef.current = isEntering;
635
- });
636
- const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
637
- const normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
638
- const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
639
- const animationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
640
- const disableAnimation = isHydrating || !animationKey;
641
- const isDark = themeName?.startsWith("dark") || false;
642
- const sendExitComplete = presence?.[1];
643
- const onDidAnimateRef = (0, import_react.useRef)(onDidAnimate);
644
- (0, import_core.useIsomorphicLayoutEffect)(() => {
645
- onDidAnimateRef.current = onDidAnimate;
646
- }, [onDidAnimate]);
647
- const didAnimateCycleIdRef = (0, import_react.useRef)(0);
648
- const pendingDidAnimateKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
649
- const didAnimateCompletedRef = (0, import_react.useRef)(false);
650
- const isCompletingAnimationRef = (0, import_react_native_reanimated.useSharedValue)(false);
651
- const didAnimateCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(0);
652
- const markDidAnimateKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
653
- if (!finished || cycleId !== didAnimateCycleIdRef.current) return;
654
- if (didAnimateCompletedRef.current) return;
655
- pendingDidAnimateKeysRef.current.delete(key);
656
- if (pendingDidAnimateKeysRef.current.size === 0) {
657
- didAnimateCompletedRef.current = true;
658
- isCompletingAnimationRef.value = false;
659
- onDidAnimateRef.current?.();
660
- }
661
- });
662
- const exitCycleIdRef = (0, import_react.useRef)(0);
663
- const pendingExitKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
664
- const exitCompletedRef = (0, import_react.useRef)(false);
665
- const wasExitingRef = (0, import_react.useRef)(false);
666
- const justStartedExiting = isExiting && !wasExitingRef.current;
667
- const justStoppedExiting = !isExiting && wasExitingRef.current;
668
- const markExitKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
669
- if (cycleId !== exitCycleIdRef.current) return;
670
- if (exitCompletedRef.current) return;
671
- pendingExitKeysRef.current.delete(key);
672
- if (pendingExitKeysRef.current.size === 0) {
673
- exitCompletedRef.current = true;
674
- sendExitComplete?.();
675
- }
676
- });
677
- const isExitingRef = (0, import_react_native_reanimated.useSharedValue)(isExiting);
678
- const exitCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(exitCycleIdRef.current);
679
- if (justStartedExiting) {
680
- exitCycleIdRef.current++;
681
- exitCompletedRef.current = false;
682
- pendingExitKeysRef.current.clear();
683
- didAnimateCycleIdRef.current++;
684
- pendingDidAnimateKeysRef.current.clear();
685
- didAnimateCompletedRef.current = true;
686
- }
687
- if (justStoppedExiting) {
688
- exitCycleIdRef.current++;
689
- pendingExitKeysRef.current.clear();
690
- }
691
- (0, import_core.useIsomorphicLayoutEffect)(() => {
692
- isExitingRef.value = isExiting;
693
- exitCycleIdShared.value = exitCycleIdRef.current;
694
- if (justStartedExiting) {
695
- isCompletingAnimationRef.value = false;
696
- didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
697
- }
698
- }, [isExiting, exitCycleIdRef.current, justStartedExiting]);
699
- import_react.default.useEffect(() => {
700
- wasExitingRef.current = isExiting;
701
- });
702
- const committedRenderKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
703
- const lastPaintedRef = (0, import_react.useRef)({});
704
- const carryRef = (0, import_react.useRef)({});
705
- const {
706
- animatedStyles,
707
- staticStyles,
708
- nextCarry
709
- } = (0, import_react.useMemo)(() => {
710
- const animateOnly = props.animateOnly;
711
- const {
712
- animated,
713
- statics
714
- } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
715
- const nextCarry2 = cloneStyleRecord(carryRef.current);
716
- for (const key in nextCarry2) {
717
- if (!(key in animated)) delete nextCarry2[key];
718
- }
719
- for (const key in animated) {
720
- if (!(key in nextCarry2)) {
721
- nextCarry2[key] = cloneAnimationValue(animated[key]);
722
- }
723
- statics[key] = nextCarry2[key];
724
- }
725
- return {
726
- animatedStyles: animated,
727
- staticStyles: statics,
728
- nextCarry: nextCarry2
729
- };
730
- }, [disableAnimation, style, isDark, props.animateOnly]);
731
- const renderSnapshot = (0, import_react.useMemo)(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
732
- const renderSnapshotRef = (0, import_react_native_reanimated.useSharedValue)({
733
- animated: {},
734
- statics: {},
735
- transforms: [],
736
- gatedKeys: {},
737
- seeds: {},
738
- removedKeys: {},
739
- removeTransform: false,
740
- clearValue: import_core.isWeb ? "" : null
741
- });
742
- const emitterSnapshotRef = (0, import_react_native_reanimated.useSharedValue)(null);
743
- const emitterKeysRef = (0, import_react.useRef)(null);
744
- (0, import_core.useIsomorphicLayoutEffect)(() => {
745
- carryRef.current = nextCarry;
746
- committedRenderKeysRef.current = renderSnapshot.keys;
747
- lastPaintedRef.current = renderSnapshot.painted;
748
- }, [nextCarry, renderSnapshot]);
749
- const pseudoActiveRef = (0, import_react.useRef)(false);
750
- const isExitingJSRef = (0, import_react.useRef)(false);
751
- isExitingJSRef.current = isExiting;
752
- const publishedSnapshotRef = (0, import_react.useRef)(null);
753
- (0, import_core.useIsomorphicLayoutEffect)(() => {
754
- const droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
755
- const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
756
- if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
757
- const removedKeys = emitterKeys ? {
758
- ...renderSnapshot.value.removedKeys,
759
- ...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
760
- } : renderSnapshot.value.removedKeys;
761
- renderSnapshotRef.value = {
762
- ...renderSnapshot.value,
763
- removedKeys,
764
- removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:"))
765
- };
766
- publishedSnapshotRef.current = renderSnapshot.value;
767
- }
768
- if (droppingLatch) {
769
- emitterSnapshotRef.value = null;
770
- emitterKeysRef.current = null;
771
- }
772
- });
773
- const {
774
- baseConfig,
775
- propertyConfigs
776
- } = (0, import_react.useMemo)(() => {
777
- if (isHydrating) {
778
- return {
779
- baseConfig: {
780
- type: "timing",
781
- duration: 0
782
- },
783
- propertyConfigs: {}
784
- };
785
- }
786
- return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
787
- }, [isHydrating, effectiveTransition, animatedStyles, animationState]);
788
- const configRef = (0, import_react_native_reanimated.useSharedValue)({
789
- baseConfig,
790
- propertyConfigs,
791
- disableAnimation,
792
- isHydrating
793
- });
794
- (0, import_core.useIsomorphicLayoutEffect)(() => {
795
- configRef.value = {
796
- baseConfig,
797
- propertyConfigs,
798
- disableAnimation,
799
- isHydrating
800
- };
801
- }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
802
- useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
803
- if (isExitingJSRef.current) return;
804
- pseudoActiveRef.current = pseudoActive === true;
805
- const animateOnly = props.animateOnly;
806
- const transitionToUse = effectiveTransition2 ?? props.transition;
807
- const {
808
- baseConfig: newBase,
809
- propertyConfigs: newPropertyConfigs
810
- } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
811
- configRef.value = {
812
- baseConfig: newBase,
813
- propertyConfigs: newPropertyConfigs,
814
- disableAnimation: configRef.value.disableAnimation,
815
- isHydrating: configRef.value.isHydrating
816
- };
817
- const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
818
- const {
819
- animated,
820
- statics
821
- } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
822
- const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
823
- emitterSnapshotRef.value = snapshot.value;
824
- emitterKeysRef.current = snapshot.keys;
825
- lastPaintedRef.current = snapshot.painted;
826
- if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
827
- console.info("[animations-reanimated] useStyleEmitter update", {
828
- animated,
829
- statics,
830
- transforms: snapshot.value.transforms
831
- });
832
- }
833
- });
834
- const exitKeysRegistered = (0, import_react.useRef)(false);
835
- if (justStartedExiting && sendExitComplete) {
836
- const exitKeys = getGatedKeys(renderSnapshot.value);
837
- pendingExitKeysRef.current = new Set(exitKeys);
838
- exitKeysRegistered.current = exitKeys.length > 0;
839
- }
840
- const previousDidAnimateStyleRef = (0, import_react.useRef)(null);
841
- const didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null;
842
- const previousDidAnimateStyle = previousDidAnimateStyleRef.current;
843
- const shouldRegisterDidAnimate = didAnimateStyle !== null && previousDidAnimateStyle !== null && previousDidAnimateStyle !== didAnimateStyle && !isExiting && !isEntering && !justFinishedEntering;
844
- const didAnimateKeys = shouldRegisterDidAnimate ? getGatedKeys(renderSnapshot.value) : [];
845
- (0, import_core.useIsomorphicLayoutEffect)(() => {
846
- if (didAnimateStyle === null) {
847
- previousDidAnimateStyleRef.current = null;
848
- isCompletingAnimationRef.value = false;
849
- return;
850
- }
851
- const previousStyleStillCurrent = previousDidAnimateStyleRef.current === previousDidAnimateStyle;
852
- previousDidAnimateStyleRef.current = didAnimateStyle;
853
- if (!shouldRegisterDidAnimate || !previousStyleStillCurrent) return;
854
- const cycleId = ++didAnimateCycleIdRef.current;
855
- pendingDidAnimateKeysRef.current = new Set(didAnimateKeys);
856
- didAnimateCompletedRef.current = didAnimateKeys.length === 0;
857
- isCompletingAnimationRef.value = didAnimateKeys.length > 0;
858
- didAnimateCycleIdShared.value = cycleId;
859
- if (didAnimateKeys.length === 0) {
860
- onDidAnimateRef.current?.();
861
- }
862
- }, [didAnimateStyle, shouldRegisterDidAnimate]);
863
- import_react.default.useEffect(() => {
864
- if (!justStartedExiting || !sendExitComplete) return;
865
- if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
866
- if (!exitCompletedRef.current) {
867
- exitCompletedRef.current = true;
868
- sendExitComplete();
869
- }
870
- }
871
- }, [justStartedExiting, sendExitComplete]);
872
- const mapperStateRef = (0, import_react_native_reanimated.useSharedValue)({
873
- emitted: {}
874
- });
875
- const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
876
- "worklet";
877
-
878
- const mapperState = mapperStateRef.value;
879
- const config = configRef.value;
880
- if (config.disableAnimation || config.isHydrating) {
881
- updateMapperState(mapperStateRef, {});
882
- return {};
883
- }
884
- const previouslyEmitted = mapperState.emitted;
885
- const emitted = {};
886
- const result = {};
887
- const emitterSnapshot = emitterSnapshotRef.value;
888
- const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
889
- const animatedValues = snapshot.animated;
890
- const staticValues = snapshot.statics;
891
- const currentlyExiting = isExitingRef.value;
892
- const currentCycleId = exitCycleIdShared.value;
893
- const currentlyCompletingAnimation = isCompletingAnimationRef.value;
894
- const currentDidAnimateCycleId = didAnimateCycleIdShared.value;
895
- for (const key in staticValues) {
896
- result[key] = staticValues[key];
897
- }
898
- for (const key in snapshot.removedKeys) {
899
- if (!key.startsWith("transform:") && !(key in staticValues)) {
900
- result[key] = snapshot.clearValue;
901
- }
902
- }
903
- for (const key in animatedValues) {
904
- if (key === "transform") continue;
905
- const targetValue = animatedValues[key];
906
- emitted[key] = true;
907
- if (typeof targetValue !== "number" && typeof targetValue !== "string") {
908
- result[key] = targetValue;
909
- continue;
910
- }
911
- result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, !!COLOR_STYLE_KEYS[key]);
912
- }
913
- const transforms = snapshot.transforms;
914
- if (transforms.length > 0 || snapshot.removeTransform) {
915
- const validTransforms = [];
916
- for (const t of transforms) {
917
- if (!t) continue;
918
- const keys = Object.keys(t);
919
- if (keys.length === 0) continue;
920
- const transformKey = keys[0];
921
- const value = t[transformKey];
922
- if (typeof value === "number" || typeof value === "string") {
923
- const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
924
- const subKey = `transform:${transformKey}`;
925
- emitted[subKey] = true;
926
- validTransforms.push({
927
- [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone)
928
- });
929
- } else {
930
- validTransforms.push(t);
931
- }
932
- }
933
- if (validTransforms.length > 0 || !("transform" in staticValues)) {
934
- result.transform = validTransforms;
935
- }
936
- }
937
- updateMapperState(mapperStateRef, emitted);
938
- return result;
939
- }, import_core.isWeb ? [
940
- // pass SharedValues so the stable mapper watches them on web (no babel plugin)
941
- renderSnapshotRef, emitterSnapshotRef, configRef, isExitingRef, exitCycleIdShared, markExitKeyDone, isCompletingAnimationRef, didAnimateCycleIdShared, markDidAnimateKeyDone] : void 0);
942
- silenceAnimatedComponentDevCheck(animatedStyle);
943
- if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
944
- console.info("[animations-reanimated] useAnimations", {
945
- animationKey,
946
- componentState,
947
- isExiting,
948
- animatedStyles,
949
- staticStyles,
950
- baseConfig,
951
- propertyConfigs
952
- });
953
- }
954
- return {
955
- style: [staticStyles, animatedStyle]
956
- };
957
- }
958
- };
959
- }