@tamagui/animations-css 2.7.7 → 3.0.0-beta.643.1

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,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+
3
4
  var __create = Object.create;
4
5
  var __defProp = Object.defineProperty;
5
6
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,532 +8,467 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
7
8
  var __getProtoOf = Object.getPrototypeOf;
8
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
10
  var __export = (target, all) => {
10
- for (var name in all) __defProp(target, name, {
11
- get: all[name],
12
- enumerable: true
13
- });
11
+ for (var name in all) __defProp(target, name, {
12
+ get: all[name],
13
+ enumerable: true
14
+ });
14
15
  };
15
16
  var __copyProps = (to, from, except, desc) => {
16
- if (from && typeof from === "object" || typeof from === "function") {
17
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
18
- get: () => from[key],
19
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
20
- });
21
- }
22
- return to;
17
+ if (from && typeof from === "object" || typeof from === "function") {
18
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
19
+ get: () => from[key],
20
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
21
+ });
22
+ }
23
+ return to;
23
24
  };
24
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
25
- // If the importer is in node compatibility mode or this is not an ESM
26
- // file that has been converted to a CommonJS file using a Babel-
27
- // compatible transform (i.e. "__esModule" has not been set), then set
28
- // "default" to the CommonJS "module.exports" for node compatibility.
29
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
30
- value: mod,
31
- enumerable: true
25
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
26
+ value: mod,
27
+ enumerable: true
32
28
  }) : target, mod));
33
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
34
- value: true
35
- }), mod);
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
36
30
  var createAnimations_exports = {};
37
- __export(createAnimations_exports, {
38
- createAnimations: () => createAnimations
39
- });
31
+ __export(createAnimations_exports, { createAnimations: () => createAnimations });
40
32
  module.exports = __toCommonJS(createAnimations_exports);
41
33
  var import_animation_helpers = require("@tamagui/animation-helpers");
42
34
  var import_constants = require("@tamagui/constants");
43
35
  var import_use_presence = require("@tamagui/use-presence");
44
36
  var import_web = require("@tamagui/web");
45
37
  var import_react = __toESM(require("react"), 1);
46
- function _type_of(obj) {
47
- "@swc/helpers - typeof";
48
-
49
- return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
50
- }
51
- var EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
52
- var EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
53
- function extractDuration(animation) {
54
- var msMatch = animation.match(EXTRACT_MS_REGEX);
55
- if (msMatch) {
56
- return Number.parseInt(msMatch[1], 10);
57
- }
58
- var sMatch = animation.match(EXTRACT_S_REGEX);
59
- if (sMatch) {
60
- return Math.round(Number.parseFloat(sMatch[1]) * 1e3);
61
- }
62
- return 300;
38
+ var import_animated_number = require("./animated-number.native.js");
39
+ var hasRAF = typeof requestAnimationFrame !== "undefined";
40
+ function waitForAnimations(node) {
41
+ if (typeof node.getAnimations !== "function") {
42
+ return Promise.resolve(true);
43
+ }
44
+ return new Promise(function(resolve) {
45
+ var check = function() {
46
+ var animations = node.getAnimations();
47
+ if (animations.length === 0) {
48
+ resolve(true);
49
+ return;
50
+ }
51
+ Promise.all(animations.map(function(a) {
52
+ return a.finished;
53
+ })).then(function() {
54
+ return resolve(true);
55
+ }).catch(function() {
56
+ var remaining = node.getAnimations();
57
+ if (remaining.some(function(a) {
58
+ return a.playState === "running" || a.pending;
59
+ })) {
60
+ check();
61
+ return;
62
+ }
63
+ resolve(false);
64
+ });
65
+ };
66
+ if (hasRAF) {
67
+ requestAnimationFrame(check);
68
+ } else {
69
+ check();
70
+ }
71
+ });
63
72
  }
64
- var MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
65
- var S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
73
+ var DURATION_REGEX = /(\d+(?:\.\d+)?)\s*(?:ms|s(?!tiffness))/;
66
74
  function applyDurationOverride(animation, durationMs) {
67
- var msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`);
68
- if (msReplaced !== animation) {
69
- return msReplaced;
70
- }
71
- var sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`);
72
- if (sReplaced !== animation) {
73
- return sReplaced;
74
- }
75
- return `${durationMs}ms ${animation}`;
75
+ var replaced = animation.replace(DURATION_REGEX, `${durationMs}ms`);
76
+ return replaced === animation ? `${durationMs}ms ${animation}` : replaced;
76
77
  }
77
- var TRANSFORM_KEYS = ["x", "y", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"];
78
- function buildTransformString(style) {
79
- if (!style) return "";
80
- var parts = [];
81
- if (style.x !== void 0 || style.y !== void 0) {
82
- var _style_x;
83
- var x = (_style_x = style.x) !== null && _style_x !== void 0 ? _style_x : 0;
84
- var _style_y;
85
- var y = (_style_y = style.y) !== null && _style_y !== void 0 ? _style_y : 0;
86
- parts.push(`translate(${x}px, ${y}px)`);
87
- }
88
- if (style.scale !== void 0) {
89
- parts.push(`scale(${style.scale})`);
90
- }
91
- if (style.scaleX !== void 0) {
92
- parts.push(`scaleX(${style.scaleX})`);
93
- }
94
- if (style.scaleY !== void 0) {
95
- parts.push(`scaleY(${style.scaleY})`);
96
- }
97
- if (style.rotate !== void 0) {
98
- var val = style.rotate;
99
- var unit = typeof val === "string" && val.includes("deg") ? "" : "deg";
100
- parts.push(`rotate(${val}${unit})`);
101
- }
102
- if (style.rotateX !== void 0) {
103
- parts.push(`rotateX(${style.rotateX}deg)`);
104
- }
105
- if (style.rotateY !== void 0) {
106
- parts.push(`rotateY(${style.rotateY}deg)`);
107
- }
108
- if (style.rotateZ !== void 0) {
109
- parts.push(`rotateZ(${style.rotateZ}deg)`);
110
- }
111
- if (style.skewX !== void 0) {
112
- parts.push(`skewX(${style.skewX}deg)`);
113
- }
114
- if (style.skewY !== void 0) {
115
- parts.push(`skewY(${style.skewY}deg)`);
116
- }
117
- return parts.join(" ");
78
+ var CSS_TRANSFORM_PROPERTIES = {
79
+ transform: [
80
+ "translate",
81
+ "scale",
82
+ "rotate",
83
+ "transform"
84
+ ],
85
+ x: ["translate"],
86
+ y: ["translate"],
87
+ scale: ["scale"],
88
+ scaleX: ["scale"],
89
+ scaleY: ["scale"],
90
+ rotate: ["rotate"],
91
+ rotateX: ["transform"],
92
+ rotateY: ["transform"],
93
+ rotateZ: ["transform"],
94
+ skewX: ["transform"],
95
+ skewY: ["transform"]
96
+ };
97
+ var getCSSProperties = function(key) {
98
+ return CSS_TRANSFORM_PROPERTIES[key] || [key];
99
+ };
100
+ var hyphenatedPropertyCache = {};
101
+ var emptyProperties = [];
102
+ function hyphenateProperty(property) {
103
+ var _hyphenatedPropertyCache, _property;
104
+ if (property.startsWith("--")) return property;
105
+ return (_hyphenatedPropertyCache = hyphenatedPropertyCache)[_property = property] || (_hyphenatedPropertyCache[_property] = property.replace(/[A-Z]/g, function(letter) {
106
+ return `-${letter.toLowerCase()}`;
107
+ }));
118
108
  }
119
- function applyStylesToNode(node, style) {
120
- if (!style) return;
121
- var transformStr = buildTransformString(style);
122
- if (transformStr) {
123
- node.style.transform = transformStr;
124
- }
125
- var _iteratorNormalCompletion = true,
126
- _didIteratorError = false,
127
- _iteratorError = void 0;
128
- try {
129
- for (var _iterator = Object.entries(style)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
130
- var [key, value] = _step.value;
131
- if (TRANSFORM_KEYS.includes(key)) continue;
132
- if (value === void 0) continue;
133
- if (key === "opacity") {
134
- node.style.opacity = String(value);
135
- } else if (key === "backgroundColor") {
136
- node.style.backgroundColor = String(value);
137
- } else if (key === "color") {
138
- node.style.color = String(value);
139
- } else {
140
- node.style[key] = typeof value === "number" ? `${value}px` : String(value);
141
- }
142
- }
143
- } catch (err) {
144
- _didIteratorError = true;
145
- _iteratorError = err;
146
- } finally {
147
- try {
148
- if (!_iteratorNormalCompletion && _iterator.return != null) {
149
- _iterator.return();
150
- }
151
- } finally {
152
- if (_didIteratorError) {
153
- throw _iteratorError;
154
- }
155
- }
156
- }
109
+ function getLifecycleCSSProperties(keys) {
110
+ if (!(keys === null || keys === void 0 ? void 0 : keys.size)) return emptyProperties;
111
+ var properties = /* @__PURE__ */ new Set();
112
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
113
+ try {
114
+ for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
115
+ var key = _step.value;
116
+ var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
117
+ try {
118
+ for (var _iterator1 = getCSSProperties(key)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
119
+ var property = _step1.value;
120
+ properties.add(hyphenateProperty(property));
121
+ }
122
+ } catch (err) {
123
+ _didIteratorError1 = true;
124
+ _iteratorError1 = err;
125
+ } finally {
126
+ try {
127
+ if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
128
+ _iterator1.return();
129
+ }
130
+ } finally {
131
+ if (_didIteratorError1) {
132
+ throw _iteratorError1;
133
+ }
134
+ }
135
+ }
136
+ }
137
+ } catch (err) {
138
+ _didIteratorError = true;
139
+ _iteratorError = err;
140
+ } finally {
141
+ try {
142
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
143
+ _iterator.return();
144
+ }
145
+ } finally {
146
+ if (_didIteratorError) {
147
+ throw _iteratorError;
148
+ }
149
+ }
150
+ }
151
+ return [...properties].sort();
152
+ }
153
+ function readComputedProperties(node, properties) {
154
+ var computed = getComputedStyle(node);
155
+ var values = {};
156
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
157
+ try {
158
+ for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
159
+ var property = _step.value;
160
+ var value = computed.getPropertyValue(property);
161
+ if (value) values[property] = value;
162
+ }
163
+ } catch (err) {
164
+ _didIteratorError = true;
165
+ _iteratorError = err;
166
+ } finally {
167
+ try {
168
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
169
+ _iterator.return();
170
+ }
171
+ } finally {
172
+ if (_didIteratorError) {
173
+ throw _iteratorError;
174
+ }
175
+ }
176
+ }
177
+ return values;
178
+ }
179
+ function applyCSSProperties(node, values) {
180
+ for (var property in values) {
181
+ node.style.setProperty(property, values[property]);
182
+ }
183
+ }
184
+ function clearCSSProperties(node, properties) {
185
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
186
+ try {
187
+ for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
188
+ var property = _step.value;
189
+ node.style.removeProperty(property);
190
+ }
191
+ } catch (err) {
192
+ _didIteratorError = true;
193
+ _iteratorError = err;
194
+ } finally {
195
+ try {
196
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
197
+ _iterator.return();
198
+ }
199
+ } finally {
200
+ if (_didIteratorError) {
201
+ throw _iteratorError;
202
+ }
203
+ }
204
+ }
157
205
  }
158
206
  function createAnimations(animations) {
159
- var reactionListeners = /* @__PURE__ */new WeakMap();
160
- return {
161
- animations,
162
- usePresence: import_use_presence.usePresence,
163
- ResetPresence: import_use_presence.ResetPresence,
164
- inputStyle: "css",
165
- outputStyle: "css",
166
- useAnimatedNumber(initial) {
167
- var [val, setVal] = import_react.default.useState(initial);
168
- var finishTimerRef = import_react.default.useRef(null);
169
- return {
170
- getInstance() {
171
- return setVal;
172
- },
173
- getValue() {
174
- return val;
175
- },
176
- setValue(next, config, onFinish) {
177
- setVal(next);
178
- if (finishTimerRef.current) {
179
- clearTimeout(finishTimerRef.current);
180
- finishTimerRef.current = null;
181
- }
182
- if (onFinish) {
183
- if (!config || config.type === "direct" || config.type === "timing" && config.duration === 0) {
184
- onFinish();
185
- } else {
186
- var duration = config.type === "timing" ? config.duration : 300;
187
- finishTimerRef.current = setTimeout(onFinish, duration);
188
- }
189
- }
190
- var listeners = reactionListeners.get(setVal);
191
- if (listeners) {
192
- listeners.forEach(function (listener) {
193
- return listener(next);
194
- });
195
- }
196
- },
197
- stop() {
198
- if (finishTimerRef.current) {
199
- clearTimeout(finishTimerRef.current);
200
- finishTimerRef.current = null;
201
- }
202
- }
203
- };
204
- },
205
- useAnimatedNumberReaction(param, onValue) {
206
- var {
207
- value
208
- } = param;
209
- import_react.default.useEffect(function () {
210
- var instance = value.getInstance();
211
- var queue = reactionListeners.get(instance);
212
- if (!queue) {
213
- var next = /* @__PURE__ */new Set();
214
- reactionListeners.set(instance, next);
215
- queue = next;
216
- }
217
- queue.add(onValue);
218
- return function () {
219
- queue === null || queue === void 0 ? void 0 : queue.delete(onValue);
220
- };
221
- }, []);
222
- },
223
- useAnimatedNumberStyle(val, getStyle) {
224
- return getStyle(val.getValue());
225
- },
226
- useAnimatedNumbersStyle(vals, getStyle) {
227
- return getStyle(...vals.map(function (v) {
228
- return v.getValue();
229
- }));
230
- },
231
- // @ts-ignore - styleState is added by createComponent
232
- useAnimations: function (param) {
233
- var {
234
- props,
235
- presence,
236
- style,
237
- componentState,
238
- stateRef,
239
- styleState
240
- } = param;
241
- var _normalized_config;
242
- var isHydrating = componentState.unmounted === true;
243
- var isEntering = !!componentState.unmounted;
244
- var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
245
- var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
246
- var wasEnteringRef = import_react.default.useRef(isEntering);
247
- var justFinishedEntering = wasEnteringRef.current && !isEntering;
248
- import_react.default.useEffect(function () {
249
- wasEnteringRef.current = isEntering;
250
- });
251
- var exitCycleIdRef = import_react.default.useRef(0);
252
- var exitCompletedRef = import_react.default.useRef(false);
253
- var wasExitingRef = import_react.default.useRef(false);
254
- var exitInterruptedRef = import_react.default.useRef(false);
255
- var sendExitCompleteRef = import_react.default.useRef(sendExitComplete);
256
- var lastNonExitingStyleRef = import_react.default.useRef({});
257
- sendExitCompleteRef.current = sendExitComplete;
258
- var justStartedExiting = isExiting && !wasExitingRef.current;
259
- var justStoppedExiting = !isExiting && wasExitingRef.current;
260
- if (justStartedExiting) {
261
- exitCycleIdRef.current++;
262
- exitCompletedRef.current = false;
263
- }
264
- if (justStoppedExiting) {
265
- exitCycleIdRef.current++;
266
- exitInterruptedRef.current = true;
267
- }
268
- import_react.default.useEffect(function () {
269
- wasExitingRef.current = isExiting;
270
- });
271
- (0, import_constants.useIsomorphicLayoutEffect)(function () {
272
- var host = stateRef.current.host;
273
- if (isExiting || !host) return;
274
- var computedStyle = getComputedStyle(host);
275
- lastNonExitingStyleRef.current = {
276
- opacity: computedStyle.opacity
277
- };
278
- });
279
- var _styleState_effectiveTransition;
280
- var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
281
- var normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
282
- var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
283
- var effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
284
- var defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
285
- var animatedProperties = (0, import_animation_helpers.getAnimatedProperties)(normalized);
286
- var hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
287
- var hasPerPropertyConfigs = animatedProperties.length > 0;
288
- var keys;
289
- if (props.animateOnly) {
290
- keys = props.animateOnly;
291
- } else if (hasPerPropertyConfigs && !hasDefault) {
292
- keys = animatedProperties;
293
- } else if (hasPerPropertyConfigs && hasDefault) {
294
- keys = ["all", ...animatedProperties];
295
- } else {
296
- keys = ["all"];
297
- }
298
- (0, import_constants.useIsomorphicLayoutEffect)(function () {
299
- var _normalized_config2;
300
- var host = stateRef.current.host;
301
- if (!sendExitComplete || !isExiting || !host) return;
302
- var node = host;
303
- var cycleId = exitCycleIdRef.current;
304
- var completeExit = function () {
305
- var _sendExitCompleteRef_current;
306
- if (cycleId !== exitCycleIdRef.current) return;
307
- if (exitCompletedRef.current) return;
308
- exitCompletedRef.current = true;
309
- (_sendExitCompleteRef_current = sendExitCompleteRef.current) === null || _sendExitCompleteRef_current === void 0 ? void 0 : _sendExitCompleteRef_current.call(sendExitCompleteRef);
310
- };
311
- if (keys.length === 0) {
312
- completeExit();
313
- return;
314
- }
315
- var rafId;
316
- var wasInterrupted = exitInterruptedRef.current;
317
- var ignoreCancelEvents = wasInterrupted;
318
- var enterStyle = props.enterStyle;
319
- var exitStyle = props.exitStyle;
320
- var delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "";
321
- var durationOverride2 = (_normalized_config2 = normalized.config) === null || _normalized_config2 === void 0 ? void 0 : _normalized_config2.duration;
322
- var exitTransitionString = keys.map(function (key2) {
323
- var propAnimation = normalized.properties[key2];
324
- var animationValue2 = null;
325
- if (typeof propAnimation === "string") {
326
- animationValue2 = animations[propAnimation];
327
- } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object" && propAnimation.type) {
328
- animationValue2 = animations[propAnimation.type];
329
- } else if (defaultAnimation) {
330
- animationValue2 = defaultAnimation;
331
- }
332
- if (animationValue2 && durationOverride2) {
333
- animationValue2 = applyDurationOverride(animationValue2, durationOverride2);
334
- }
335
- return animationValue2 ? `${key2} ${animationValue2}${delayStr2}` : null;
336
- }).filter(Boolean).join(", ");
337
- var getResetValue = function (key2) {
338
- if (key2 === "opacity") {
339
- var _style_opacity, _ref, _ref1;
340
- return (_ref1 = (_ref = (_style_opacity = style === null || style === void 0 ? void 0 : style.opacity) !== null && _style_opacity !== void 0 ? _style_opacity : props.opacity) !== null && _ref !== void 0 ? _ref : lastNonExitingStyleRef.current.opacity) !== null && _ref1 !== void 0 ? _ref1 : 1;
341
- }
342
- if (TRANSFORM_KEYS.includes(key2)) {
343
- return key2 === "scale" || key2 === "scaleX" || key2 === "scaleY" ? 1 : 0;
344
- }
345
- return enterStyle === null || enterStyle === void 0 ? void 0 : enterStyle[key2];
346
- };
347
- if (wasInterrupted) {
348
- exitInterruptedRef.current = false;
349
- node.style.transition = "none";
350
- if (exitStyle) {
351
- var resetStyle = {};
352
- var _iteratorNormalCompletion = true,
353
- _didIteratorError = false,
354
- _iteratorError = void 0;
355
- try {
356
- for (var _iterator = Object.keys(exitStyle)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
357
- var key = _step.value;
358
- var resetValue = getResetValue(key);
359
- if (resetValue !== void 0) {
360
- resetStyle[key] = resetValue;
361
- }
362
- }
363
- } catch (err) {
364
- _didIteratorError = true;
365
- _iteratorError = err;
366
- } finally {
367
- try {
368
- if (!_iteratorNormalCompletion && _iterator.return != null) {
369
- _iterator.return();
370
- }
371
- } finally {
372
- if (_didIteratorError) {
373
- throw _iteratorError;
374
- }
375
- }
376
- }
377
- applyStylesToNode(node, resetStyle);
378
- } else {
379
- node.style.opacity = "1";
380
- node.style.transform = "none";
381
- }
382
- void node.offsetHeight;
383
- } else if (exitStyle) {
384
- ignoreCancelEvents = true;
385
- node.style.transition = "none";
386
- var resetStyle1 = {};
387
- var _iteratorNormalCompletion1 = true,
388
- _didIteratorError1 = false,
389
- _iteratorError1 = void 0;
390
- try {
391
- for (var _iterator1 = Object.keys(exitStyle)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
392
- var key1 = _step1.value;
393
- var resetValue1 = getResetValue(key1);
394
- if (resetValue1 !== void 0) {
395
- resetStyle1[key1] = resetValue1;
396
- }
397
- }
398
- } catch (err) {
399
- _didIteratorError1 = true;
400
- _iteratorError1 = err;
401
- } finally {
402
- try {
403
- if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
404
- _iterator1.return();
405
- }
406
- } finally {
407
- if (_didIteratorError1) {
408
- throw _iteratorError1;
409
- }
410
- }
411
- }
412
- applyStylesToNode(node, resetStyle1);
413
- void node.offsetHeight;
414
- rafId = requestAnimationFrame(function () {
415
- if (cycleId !== exitCycleIdRef.current) return;
416
- node.style.transition = exitTransitionString;
417
- void node.offsetHeight;
418
- applyStylesToNode(node, exitStyle);
419
- ignoreCancelEvents = false;
420
- });
421
- }
422
- var maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200;
423
- var animationConfigs = (0, import_animation_helpers.getAnimationConfigsForKeys)(normalized, animations, keys, defaultAnimation);
424
- var _iteratorNormalCompletion2 = true,
425
- _didIteratorError2 = false,
426
- _iteratorError2 = void 0;
427
- try {
428
- for (var _iterator2 = animationConfigs.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
429
- var animationValue = _step2.value;
430
- if (animationValue) {
431
- var duration = extractDuration(animationValue);
432
- if (duration > maxDuration) {
433
- maxDuration = duration;
434
- }
435
- }
436
- }
437
- } catch (err) {
438
- _didIteratorError2 = true;
439
- _iteratorError2 = err;
440
- } finally {
441
- try {
442
- if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
443
- _iterator2.return();
444
- }
445
- } finally {
446
- if (_didIteratorError2) {
447
- throw _iteratorError2;
448
- }
449
- }
450
- }
451
- var _normalized_delay;
452
- var delay = (_normalized_delay = normalized.delay) !== null && _normalized_delay !== void 0 ? _normalized_delay : 0;
453
- var fallbackTimeout = maxDuration + delay;
454
- var timeoutId = setTimeout(function () {
455
- completeExit();
456
- }, fallbackTimeout);
457
- var transitioningProps = new Set(keys);
458
- var completedCount = 0;
459
- var onFinishAnimation = function (event) {
460
- if (event.target !== node) return;
461
- var eventProp = event.propertyName;
462
- if (transitioningProps.has(eventProp) || eventProp === "all") {
463
- completedCount++;
464
- if (completedCount >= transitioningProps.size) {
465
- clearTimeout(timeoutId);
466
- completeExit();
467
- }
468
- }
469
- };
470
- var onCancelAnimation = function () {
471
- if (ignoreCancelEvents) return;
472
- clearTimeout(timeoutId);
473
- completeExit();
474
- };
475
- node.addEventListener("transitionend", onFinishAnimation);
476
- node.addEventListener("transitioncancel", onCancelAnimation);
477
- if (wasInterrupted) {
478
- rafId = requestAnimationFrame(function () {
479
- if (cycleId !== exitCycleIdRef.current) return;
480
- node.style.transition = exitTransitionString;
481
- void node.offsetHeight;
482
- applyStylesToNode(node, exitStyle);
483
- ignoreCancelEvents = false;
484
- });
485
- }
486
- return function () {
487
- clearTimeout(timeoutId);
488
- if (rafId !== void 0) cancelAnimationFrame(rafId);
489
- node.removeEventListener("transitionend", onFinishAnimation);
490
- node.removeEventListener("transitioncancel", onCancelAnimation);
491
- node.style.transition = "";
492
- };
493
- }, [isExiting]);
494
- if (isHydrating) {
495
- return null;
496
- }
497
- if (!(0, import_animation_helpers.hasAnimation)(normalized)) {
498
- return null;
499
- }
500
- if (Array.isArray(style.transform)) {
501
- style.transform = (0, import_web.transformsToString)(style.transform);
502
- }
503
- var delayStr = normalized.delay ? ` ${normalized.delay}ms` : "";
504
- var durationOverride = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
505
- style.transition = keys.map(function (key) {
506
- var propAnimation = normalized.properties[key];
507
- var animationValue = null;
508
- if (typeof propAnimation === "string") {
509
- animationValue = animations[propAnimation];
510
- } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object" && propAnimation.type) {
511
- animationValue = animations[propAnimation.type];
512
- } else if (defaultAnimation) {
513
- animationValue = defaultAnimation;
514
- }
515
- if (animationValue && durationOverride) {
516
- animationValue = applyDurationOverride(animationValue, durationOverride);
517
- }
518
- return animationValue ? `${key} ${animationValue}${delayStr}` : null;
519
- }).filter(Boolean).join(", ");
520
- if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
521
- console.info("CSS animation", {
522
- props,
523
- animations,
524
- normalized,
525
- defaultAnimation,
526
- style,
527
- isEntering,
528
- isExiting
529
- });
530
- }
531
- return {
532
- style,
533
- className: isEntering ? "t_unmounted" : ""
534
- };
535
- }
536
- };
207
+ return {
208
+ animations,
209
+ usePresence: import_use_presence.usePresence,
210
+ ResetPresence: import_use_presence.ResetPresence,
211
+ inputStyle: "css",
212
+ outputStyle: "css",
213
+ useAnimatedNumber: import_animated_number.useAnimatedNumber,
214
+ useAnimatedNumberReaction: import_animated_number.useAnimatedNumberReaction,
215
+ useAnimatedNumberStyle: import_animated_number.useAnimatedNumberStyle,
216
+ useAnimatedNumbersStyle: import_animated_number.useAnimatedNumbersStyle,
217
+ useAnimations: function(param) {
218
+ var { props, presence, style, componentState, stateRef, styleState, onTransition } = param;
219
+ var _styleState_programLifecycleStyleKeys;
220
+ var isHydrating = componentState.unmounted === true;
221
+ var isEntering = !!componentState.unmounted;
222
+ var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
223
+ var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
224
+ var onTransitionRef = import_react.default.useRef(onTransition);
225
+ onTransitionRef.current = onTransition;
226
+ var emit = function(phase, cause, finished) {
227
+ var _onTransitionRef_current;
228
+ (_onTransitionRef_current = onTransitionRef.current) === null || _onTransitionRef_current === void 0 ? void 0 : _onTransitionRef_current.call(onTransitionRef, phase === "end" ? {
229
+ phase,
230
+ cause,
231
+ finished
232
+ } : {
233
+ phase,
234
+ cause
235
+ });
236
+ };
237
+ var wasEnteringRef = import_react.default.useRef(isEntering);
238
+ var justFinishedEntering = wasEnteringRef.current && !isEntering;
239
+ import_react.default.useEffect(function() {
240
+ wasEnteringRef.current = isEntering;
241
+ });
242
+ var exitCycleIdRef = import_react.default.useRef(0);
243
+ var exitCompletedRef = import_react.default.useRef(false);
244
+ var wasExitingRef = import_react.default.useRef(false);
245
+ var sendExitCompleteRef = import_react.default.useRef(sendExitComplete);
246
+ var lastMountedStyleRef = import_react.default.useRef({});
247
+ sendExitCompleteRef.current = sendExitComplete;
248
+ var exitCSSProperties = getLifecycleCSSProperties(styleState === null || styleState === void 0 ? void 0 : (_styleState_programLifecycleStyleKeys = styleState.programLifecycleStyleKeys) === null || _styleState_programLifecycleStyleKeys === void 0 ? void 0 : _styleState_programLifecycleStyleKeys.exit);
249
+ var exitCSSPropertiesSignature = exitCSSProperties.join("\0");
250
+ var enterCycleIdRef = import_react.default.useRef(0);
251
+ var enterStartedRef = import_react.default.useRef(false);
252
+ var updateCycleIdRef = import_react.default.useRef(0);
253
+ var updateInFlightRef = import_react.default.useRef(false);
254
+ var prevUpdateSigRef = import_react.default.useRef(null);
255
+ var exitStartedRef = import_react.default.useRef(false);
256
+ var justStartedExiting = isExiting && !wasExitingRef.current;
257
+ var justStoppedExiting = !isExiting && wasExitingRef.current;
258
+ if (justStartedExiting) {
259
+ exitCycleIdRef.current++;
260
+ exitCompletedRef.current = false;
261
+ }
262
+ if (justStoppedExiting) {
263
+ exitCycleIdRef.current++;
264
+ }
265
+ import_react.default.useEffect(function() {
266
+ wasExitingRef.current = isExiting;
267
+ });
268
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
269
+ if (isExiting) return;
270
+ var host = stateRef.current.host;
271
+ if (!host || !exitCSSProperties.length) {
272
+ lastMountedStyleRef.current = {};
273
+ return;
274
+ }
275
+ var node = host;
276
+ var capture = function() {
277
+ if (stateRef.current.host !== node || wasExitingRef.current) return;
278
+ lastMountedStyleRef.current = readComputedProperties(node, exitCSSProperties);
279
+ };
280
+ if (justFinishedEntering) {
281
+ void waitForAnimations(node).then(capture);
282
+ } else {
283
+ capture();
284
+ }
285
+ }, [
286
+ isExiting,
287
+ justFinishedEntering,
288
+ exitCSSPropertiesSignature
289
+ ]);
290
+ var _styleState_effectiveTransition;
291
+ var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
292
+ var normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
293
+ var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
294
+ var effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
295
+ var defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
296
+ var animatedProperties = (0, import_animation_helpers.getAnimatedProperties)(normalized);
297
+ var hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
298
+ var hasPerPropertyConfigs = animatedProperties.length > 0;
299
+ var keys;
300
+ if (props.animateOnly) {
301
+ keys = props.animateOnly;
302
+ } else if (hasPerPropertyConfigs && !hasDefault) {
303
+ keys = animatedProperties;
304
+ } else if (hasPerPropertyConfigs && hasDefault) {
305
+ keys = ["all", ...animatedProperties];
306
+ } else {
307
+ keys = ["all"];
308
+ }
309
+ var transition;
310
+ var getTransition = function() {
311
+ var _normalized_config;
312
+ if (transition !== void 0) return transition;
313
+ var delay = normalized.delay ? ` ${normalized.delay}ms` : "";
314
+ var duration = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
315
+ transition = keys.flatMap(function(key) {
316
+ var propertyAnimation = normalized.properties[key];
317
+ var animation = defaultAnimation;
318
+ if (typeof propertyAnimation === "string") {
319
+ animation = animations[propertyAnimation];
320
+ } else if (propertyAnimation === null || propertyAnimation === void 0 ? void 0 : propertyAnimation.type) {
321
+ animation = animations[propertyAnimation.type];
322
+ }
323
+ if (animation && duration) {
324
+ animation = applyDurationOverride(animation, duration);
325
+ }
326
+ return animation ? getCSSProperties(key).map(function(property) {
327
+ return `${property} ${animation}${delay}`;
328
+ }) : [];
329
+ }).join(", ");
330
+ return transition;
331
+ };
332
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
333
+ var host = stateRef.current.host;
334
+ if (!sendExitComplete || !isExiting || !host) return;
335
+ var node = host;
336
+ var cycleId = exitCycleIdRef.current;
337
+ if (!exitStartedRef.current) {
338
+ exitStartedRef.current = true;
339
+ emit("start", "exit");
340
+ }
341
+ var completeExit = function() {
342
+ var finished = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
343
+ var _sendExitCompleteRef_current;
344
+ if (cycleId !== exitCycleIdRef.current) return;
345
+ if (exitCompletedRef.current) return;
346
+ exitCompletedRef.current = true;
347
+ if (exitStartedRef.current) {
348
+ exitStartedRef.current = false;
349
+ emit("end", "exit", finished);
350
+ }
351
+ (_sendExitCompleteRef_current = sendExitCompleteRef.current) === null || _sendExitCompleteRef_current === void 0 ? void 0 : _sendExitCompleteRef_current.call(sendExitCompleteRef);
352
+ };
353
+ if (keys.length === 0) {
354
+ completeExit();
355
+ return;
356
+ }
357
+ var rafId;
358
+ var disposed = false;
359
+ var mountedStyle = lastMountedStyleRef.current;
360
+ var canRestart = exitCSSProperties.length > 0 && Object.keys(mountedStyle).length > 0;
361
+ var exitTarget;
362
+ if (canRestart) {
363
+ node.style.transition = "none";
364
+ exitTarget = readComputedProperties(node, exitCSSProperties);
365
+ applyCSSProperties(node, mountedStyle);
366
+ void node.offsetHeight;
367
+ rafId = requestAnimationFrame(function() {
368
+ if (cycleId !== exitCycleIdRef.current) return;
369
+ node.style.transition = getTransition();
370
+ void node.offsetHeight;
371
+ applyCSSProperties(node, exitTarget);
372
+ });
373
+ }
374
+ void waitForAnimations(node).then(function(finished) {
375
+ if (!disposed) completeExit(finished);
376
+ });
377
+ return function() {
378
+ disposed = true;
379
+ if (rafId !== void 0) cancelAnimationFrame(rafId);
380
+ clearCSSProperties(node, exitCSSProperties);
381
+ node.style.transition = "";
382
+ };
383
+ }, [isExiting, exitCSSPropertiesSignature]);
384
+ var styleSignature = onTransition ? (function() {
385
+ var { transition: _t, ...rest } = style;
386
+ var _styleState_classNames;
387
+ return `${JSON.stringify((_styleState_classNames = styleState === null || styleState === void 0 ? void 0 : styleState.classNames) !== null && _styleState_classNames !== void 0 ? _styleState_classNames : null)}|${JSON.stringify(rest)}`;
388
+ })() : "";
389
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
390
+ var host = stateRef.current.host;
391
+ if (!onTransitionRef.current || isExiting || !justFinishedEntering || !host) {
392
+ return;
393
+ }
394
+ var node = host;
395
+ var cycleId = ++enterCycleIdRef.current;
396
+ enterStartedRef.current = true;
397
+ emit("start", "enter");
398
+ void waitForAnimations(node).then(function(finished) {
399
+ if (cycleId !== enterCycleIdRef.current || !enterStartedRef.current) return;
400
+ enterStartedRef.current = false;
401
+ emit("end", "enter", finished);
402
+ });
403
+ }, [justFinishedEntering, isExiting]);
404
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
405
+ var host = stateRef.current.host;
406
+ if (!onTransitionRef.current || isEntering || justFinishedEntering || isExiting || !host) {
407
+ prevUpdateSigRef.current = styleSignature;
408
+ return;
409
+ }
410
+ if (prevUpdateSigRef.current === null) {
411
+ prevUpdateSigRef.current = styleSignature;
412
+ return;
413
+ }
414
+ if (styleSignature === prevUpdateSigRef.current) return;
415
+ prevUpdateSigRef.current = styleSignature;
416
+ var node = host;
417
+ if (updateInFlightRef.current) {
418
+ emit("end", "update", false);
419
+ }
420
+ updateInFlightRef.current = true;
421
+ var cycleId = ++updateCycleIdRef.current;
422
+ emit("start", "update");
423
+ void waitForAnimations(node).then(function(finished) {
424
+ if (cycleId !== updateCycleIdRef.current) return;
425
+ updateInFlightRef.current = false;
426
+ emit("end", "update", finished);
427
+ });
428
+ }, [
429
+ styleSignature,
430
+ isEntering,
431
+ justFinishedEntering,
432
+ isExiting
433
+ ]);
434
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
435
+ if (justStartedExiting && enterStartedRef.current) {
436
+ enterCycleIdRef.current++;
437
+ enterStartedRef.current = false;
438
+ emit("end", "enter", false);
439
+ }
440
+ if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
441
+ exitStartedRef.current = false;
442
+ emit("end", "exit", false);
443
+ }
444
+ }, [justStartedExiting, justStoppedExiting]);
445
+ if (isHydrating) {
446
+ return null;
447
+ }
448
+ if (!(0, import_animation_helpers.hasAnimation)(normalized)) {
449
+ return null;
450
+ }
451
+ if (Array.isArray(style.transform)) {
452
+ style.transform = (0, import_web.transformsToString)(style.transform);
453
+ }
454
+ style.transition = getTransition();
455
+ if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
456
+ console.info("CSS animation", {
457
+ props,
458
+ animations,
459
+ normalized,
460
+ defaultAnimation,
461
+ style,
462
+ isEntering,
463
+ isExiting
464
+ });
465
+ }
466
+ return {
467
+ style,
468
+ className: isEntering ? "t_unmounted" : ""
469
+ };
470
+ }
471
+ };
537
472
  }
473
+
538
474
  //# sourceMappingURL=createAnimations.native.js.map