@tamagui/animations-css 1.131.0 → 1.131.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.
- package/dist/cjs/createAnimations.cjs +12 -2
- package/dist/cjs/createAnimations.js +11 -2
- package/dist/cjs/createAnimations.js.map +1 -1
- package/dist/cjs/createAnimations.native.js +11 -2
- package/dist/cjs/createAnimations.native.js.map +2 -2
- package/dist/esm/createAnimations.js +11 -2
- package/dist/esm/createAnimations.js.map +1 -1
- package/dist/esm/createAnimations.mjs +12 -2
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +12 -2
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/package.json +6 -6
- package/src/createAnimations.tsx +45 -4
- package/types/createAnimations.d.ts.map +2 -2
|
@@ -38,6 +38,12 @@ var import_constants = require("@tamagui/constants"),
|
|
|
38
38
|
import_use_presence = require("@tamagui/use-presence"),
|
|
39
39
|
import_web = require("@tamagui/web"),
|
|
40
40
|
import_react = __toESM(require("react"));
|
|
41
|
+
function extractDuration(animation) {
|
|
42
|
+
const msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/);
|
|
43
|
+
if (msMatch) return Number.parseInt(msMatch[1], 10);
|
|
44
|
+
const sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/);
|
|
45
|
+
return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
|
|
46
|
+
}
|
|
41
47
|
function createAnimations(animations) {
|
|
42
48
|
const reactionListeners = /* @__PURE__ */new WeakMap();
|
|
43
49
|
return {
|
|
@@ -98,11 +104,15 @@ function createAnimations(animations) {
|
|
|
98
104
|
const host = stateRef.current.host;
|
|
99
105
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
100
106
|
const node = host,
|
|
101
|
-
|
|
107
|
+
fallbackTimeout = animation ? extractDuration(animation) : 200,
|
|
108
|
+
timeoutId = setTimeout(() => {
|
|
102
109
|
sendExitComplete?.();
|
|
110
|
+
}, fallbackTimeout),
|
|
111
|
+
onFinishAnimation = () => {
|
|
112
|
+
clearTimeout(timeoutId), sendExitComplete?.();
|
|
103
113
|
};
|
|
104
114
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
105
|
-
node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
115
|
+
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
106
116
|
};
|
|
107
117
|
}, [sendExitComplete, isExiting]), animation && (Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform)), style.transition = keys.map(key => {
|
|
108
118
|
const override = animations[animationConfig?.[key]] ?? animation;
|
|
@@ -26,6 +26,13 @@ __export(createAnimations_exports, {
|
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
28
28
|
var import_constants = require("@tamagui/constants"), import_use_presence = require("@tamagui/use-presence"), import_web = require("@tamagui/web"), import_react = __toESM(require("react"));
|
|
29
|
+
function extractDuration(animation) {
|
|
30
|
+
const msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/);
|
|
31
|
+
if (msMatch)
|
|
32
|
+
return Number.parseInt(msMatch[1], 10);
|
|
33
|
+
const sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/);
|
|
34
|
+
return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
|
|
35
|
+
}
|
|
29
36
|
function createAnimations(animations) {
|
|
30
37
|
const reactionListeners = /* @__PURE__ */ new WeakMap();
|
|
31
38
|
return {
|
|
@@ -72,11 +79,13 @@ function createAnimations(animations) {
|
|
|
72
79
|
return (0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
73
80
|
const host = stateRef.current.host;
|
|
74
81
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
75
|
-
const node = host,
|
|
82
|
+
const node = host, fallbackTimeout = animation ? extractDuration(animation) : 200, timeoutId = setTimeout(() => {
|
|
76
83
|
sendExitComplete?.();
|
|
84
|
+
}, fallbackTimeout), onFinishAnimation = () => {
|
|
85
|
+
clearTimeout(timeoutId), sendExitComplete?.();
|
|
77
86
|
};
|
|
78
87
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
79
|
-
node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
88
|
+
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
80
89
|
};
|
|
81
90
|
}, [sendExitComplete, isExiting]), animation && (Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform)), style.transition = keys.map((key) => {
|
|
82
91
|
const override = animations[animationConfig?.[key]] ?? animation;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,sBAA2C,kCAE3C,aAAmC,yBACnC,eAAgC;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["React", "onFinish"]
|
|
6
6
|
}
|
|
@@ -27,6 +27,13 @@ __export(createAnimations_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
29
29
|
var import_constants = require("@tamagui/constants"), import_use_presence = require("@tamagui/use-presence"), import_web = require("@tamagui/web"), import_react = __toESM(require("react"));
|
|
30
|
+
function extractDuration(animation) {
|
|
31
|
+
var msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/);
|
|
32
|
+
if (msMatch)
|
|
33
|
+
return Number.parseInt(msMatch[1], 10);
|
|
34
|
+
var sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/);
|
|
35
|
+
return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
|
|
36
|
+
}
|
|
30
37
|
function createAnimations(animations) {
|
|
31
38
|
var reactionListeners = /* @__PURE__ */ new WeakMap();
|
|
32
39
|
return {
|
|
@@ -79,11 +86,13 @@ function createAnimations(animations) {
|
|
|
79
86
|
return (0, import_constants.useIsomorphicLayoutEffect)(function() {
|
|
80
87
|
var host = stateRef.current.host;
|
|
81
88
|
if (!(!sendExitComplete || !isExiting || !host)) {
|
|
82
|
-
var node = host,
|
|
89
|
+
var node = host, fallbackTimeout = animation ? extractDuration(animation) : 200, timeoutId = setTimeout(function() {
|
|
83
90
|
sendExitComplete == null || sendExitComplete();
|
|
91
|
+
}, fallbackTimeout), onFinishAnimation = function() {
|
|
92
|
+
clearTimeout(timeoutId), sendExitComplete == null || sendExitComplete();
|
|
84
93
|
};
|
|
85
94
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), function() {
|
|
86
|
-
node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
95
|
+
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
87
96
|
};
|
|
88
97
|
}
|
|
89
98
|
}, [
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;uBAA0C,+BAC1C,sBAA2C,kCAE3C,aAAmC,yBACnC,eAAgC;
|
|
5
|
-
"names": ["createAnimations", "animations", "reactionListeners", "WeakMap", "usePresence", "ResetPresence", "supportsCSS", "useAnimatedNumber", "initial", "val", "setVal", "React", "useState", "onFinish", "setOnFinish", "useIsomorphicLayoutEffect", "undefined", "getInstance", "getValue", "setValue", "next", "config", "stop", "useAnimatedNumberReaction", "onValue", "value", "useEffect", "instance", "queue", "get", "Set", "set", "add", "delete", "useAnimatedNumberStyle", "getStyle", "useAnimations", "props", "presence", "style", "componentState", "stateRef", "isEntering", "unmounted", "isExiting", "sendExitComplete", "animationKey", "animationConfig", "Array", "isArray", "
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["extractDuration", "animation", "msMatch", "match", "Number", "parseInt", "sMatch", "Math", "round", "parseFloat", "createAnimations", "animations", "reactionListeners", "WeakMap", "usePresence", "ResetPresence", "supportsCSS", "useAnimatedNumber", "initial", "val", "setVal", "React", "useState", "onFinish", "setOnFinish", "useIsomorphicLayoutEffect", "undefined", "getInstance", "getValue", "setValue", "next", "config", "stop", "useAnimatedNumberReaction", "onValue", "value", "useEffect", "instance", "queue", "get", "Set", "set", "add", "delete", "useAnimatedNumberStyle", "getStyle", "useAnimations", "props", "presence", "style", "componentState", "stateRef", "isEntering", "unmounted", "isExiting", "sendExitComplete", "animationKey", "animationConfig", "Array", "isArray", "keys", "animateOnly", "host", "current", "node", "fallbackTimeout", "timeoutId", "setTimeout", "onFinishAnimation", "clearTimeout", "addEventListener", "removeEventListener", "transform", "transformsToString", "transition", "map", "key", "override", "join", "process", "env", "NODE_ENV", "console", "info", "className"]
|
|
6
6
|
}
|
|
@@ -2,6 +2,13 @@ import { useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
|
2
2
|
import { ResetPresence, usePresence } from "@tamagui/use-presence";
|
|
3
3
|
import { transformsToString } from "@tamagui/web";
|
|
4
4
|
import React, { useState } from "react";
|
|
5
|
+
function extractDuration(animation) {
|
|
6
|
+
const msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/);
|
|
7
|
+
if (msMatch)
|
|
8
|
+
return Number.parseInt(msMatch[1], 10);
|
|
9
|
+
const sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/);
|
|
10
|
+
return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
|
|
11
|
+
}
|
|
5
12
|
function createAnimations(animations) {
|
|
6
13
|
const reactionListeners = /* @__PURE__ */ new WeakMap();
|
|
7
14
|
return {
|
|
@@ -48,11 +55,13 @@ function createAnimations(animations) {
|
|
|
48
55
|
return useIsomorphicLayoutEffect(() => {
|
|
49
56
|
const host = stateRef.current.host;
|
|
50
57
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
51
|
-
const node = host,
|
|
58
|
+
const node = host, fallbackTimeout = animation ? extractDuration(animation) : 200, timeoutId = setTimeout(() => {
|
|
52
59
|
sendExitComplete?.();
|
|
60
|
+
}, fallbackTimeout), onFinishAnimation = () => {
|
|
61
|
+
clearTimeout(timeoutId), sendExitComplete?.();
|
|
53
62
|
};
|
|
54
63
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
55
|
-
node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
64
|
+
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
56
65
|
};
|
|
57
66
|
}, [sendExitComplete, isExiting]), animation && (Array.isArray(style.transform) && (style.transform = transformsToString(style.transform)), style.transition = keys.map((key) => {
|
|
58
67
|
const override = animations[animationConfig?.[key]] ?? animation;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,eAAe,mBAAmB;AAE3C,SAAS,0BAA0B;AACnC,OAAO,SAAS,gBAAgB;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["onFinish"]
|
|
6
6
|
}
|
|
@@ -2,6 +2,12 @@ import { useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
|
2
2
|
import { ResetPresence, usePresence } from "@tamagui/use-presence";
|
|
3
3
|
import { transformsToString } from "@tamagui/web";
|
|
4
4
|
import React, { useState } from "react";
|
|
5
|
+
function extractDuration(animation) {
|
|
6
|
+
const msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/);
|
|
7
|
+
if (msMatch) return Number.parseInt(msMatch[1], 10);
|
|
8
|
+
const sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/);
|
|
9
|
+
return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
|
|
10
|
+
}
|
|
5
11
|
function createAnimations(animations) {
|
|
6
12
|
const reactionListeners = /* @__PURE__ */new WeakMap();
|
|
7
13
|
return {
|
|
@@ -62,11 +68,15 @@ function createAnimations(animations) {
|
|
|
62
68
|
const host = stateRef.current.host;
|
|
63
69
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
64
70
|
const node = host,
|
|
65
|
-
|
|
71
|
+
fallbackTimeout = animation ? extractDuration(animation) : 200,
|
|
72
|
+
timeoutId = setTimeout(() => {
|
|
66
73
|
sendExitComplete?.();
|
|
74
|
+
}, fallbackTimeout),
|
|
75
|
+
onFinishAnimation = () => {
|
|
76
|
+
clearTimeout(timeoutId), sendExitComplete?.();
|
|
67
77
|
};
|
|
68
78
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
69
|
-
node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
79
|
+
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
70
80
|
};
|
|
71
81
|
}, [sendExitComplete, isExiting]), animation && (Array.isArray(style.transform) && (style.transform = transformsToString(style.transform)), style.transition = keys.map(key => {
|
|
72
82
|
const override = animations[animationConfig?.[key]] ?? animation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIsomorphicLayoutEffect","ResetPresence","usePresence","transformsToString","React","useState","createAnimations","animations","reactionListeners","WeakMap","supportsCSS","useAnimatedNumber","initial","val","setVal","onFinish","setOnFinish","getInstance","getValue","setValue","next","config","onFinish2","stop","useAnimatedNumberReaction","value","onValue","useEffect","instance","queue","get","Set","set","add","delete","useAnimatedNumberStyle","getStyle","useAnimations","props","presence","style","componentState","stateRef","isEntering","unmounted","isExiting","sendExitComplete","animationKey","animationConfig","Array","isArray","
|
|
1
|
+
{"version":3,"names":["useIsomorphicLayoutEffect","ResetPresence","usePresence","transformsToString","React","useState","extractDuration","animation","msMatch","match","Number","parseInt","sMatch","Math","round","parseFloat","createAnimations","animations","reactionListeners","WeakMap","supportsCSS","useAnimatedNumber","initial","val","setVal","onFinish","setOnFinish","getInstance","getValue","setValue","next","config","onFinish2","stop","useAnimatedNumberReaction","value","onValue","useEffect","instance","queue","get","Set","set","add","delete","useAnimatedNumberStyle","getStyle","useAnimations","props","presence","style","componentState","stateRef","isEntering","unmounted","isExiting","sendExitComplete","animationKey","animationConfig","Array","isArray","keys","animateOnly","host","current","node","fallbackTimeout","timeoutId","setTimeout","onFinishAnimation","clearTimeout","addEventListener","removeEventListener","transform","transition","map","key","override","join","process","env","NODE_ENV","debug","console","info","className"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -2,6 +2,12 @@ import { useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
|
2
2
|
import { ResetPresence, usePresence } from "@tamagui/use-presence";
|
|
3
3
|
import { transformsToString } from "@tamagui/web";
|
|
4
4
|
import React, { useState } from "react";
|
|
5
|
+
function extractDuration(animation) {
|
|
6
|
+
var msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/);
|
|
7
|
+
if (msMatch) return Number.parseInt(msMatch[1], 10);
|
|
8
|
+
var sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/);
|
|
9
|
+
return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
|
|
10
|
+
}
|
|
5
11
|
function createAnimations(animations) {
|
|
6
12
|
var reactionListeners = /* @__PURE__ */new WeakMap();
|
|
7
13
|
return {
|
|
@@ -65,11 +71,15 @@ function createAnimations(animations) {
|
|
|
65
71
|
var host = stateRef.current.host;
|
|
66
72
|
if (!(!sendExitComplete || !isExiting || !host)) {
|
|
67
73
|
var node = host,
|
|
68
|
-
|
|
74
|
+
fallbackTimeout = animation ? extractDuration(animation) : 200,
|
|
75
|
+
timeoutId = setTimeout(function () {
|
|
69
76
|
sendExitComplete?.();
|
|
77
|
+
}, fallbackTimeout),
|
|
78
|
+
onFinishAnimation = function () {
|
|
79
|
+
clearTimeout(timeoutId), sendExitComplete?.();
|
|
70
80
|
};
|
|
71
81
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), function () {
|
|
72
|
-
node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
82
|
+
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
73
83
|
};
|
|
74
84
|
}
|
|
75
85
|
}, [sendExitComplete, isExiting]), animation && (Array.isArray(style.transform) && (style.transform = transformsToString(style.transform)), style.transition = keys.map(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIsomorphicLayoutEffect","ResetPresence","usePresence","transformsToString","React","useState","createAnimations","animations","reactionListeners","WeakMap","supportsCSS","useAnimatedNumber","initial","val","setVal","onFinish","setOnFinish","getInstance","getValue","setValue","next","config","onFinish2","stop","useAnimatedNumberReaction","param","onValue","value","useEffect","instance","queue","get","Set","set","add","delete","useAnimatedNumberStyle","getStyle","useAnimations","props","presence","style","componentState","stateRef","isEntering","unmounted","isExiting","sendExitComplete","animationKey","animationConfig","Array","isArray","
|
|
1
|
+
{"version":3,"names":["useIsomorphicLayoutEffect","ResetPresence","usePresence","transformsToString","React","useState","extractDuration","animation","msMatch","match","Number","parseInt","sMatch","Math","round","parseFloat","createAnimations","animations","reactionListeners","WeakMap","supportsCSS","useAnimatedNumber","initial","val","setVal","onFinish","setOnFinish","getInstance","getValue","setValue","next","config","onFinish2","stop","useAnimatedNumberReaction","param","onValue","value","useEffect","instance","queue","get","Set","set","add","delete","useAnimatedNumberStyle","getStyle","useAnimations","props","presence","style","componentState","stateRef","isEntering","unmounted","isExiting","sendExitComplete","animationKey","animationConfig","Array","isArray","_props_animateOnly","keys","animateOnly","host","current","node","fallbackTimeout","timeoutId","setTimeout","onFinishAnimation","clearTimeout","addEventListener","removeEventListener","transform","transition","map","key","_animations_animationConfig_key","override","join","process","env","NODE_ENV","debug","console","info"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-css",
|
|
3
|
-
"version": "1.131.
|
|
3
|
+
"version": "1.131.2",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@tamagui/constants": "1.131.
|
|
30
|
-
"@tamagui/cubic-bezier-animator": "1.131.
|
|
31
|
-
"@tamagui/use-presence": "1.131.
|
|
32
|
-
"@tamagui/web": "1.131.
|
|
29
|
+
"@tamagui/constants": "1.131.2",
|
|
30
|
+
"@tamagui/cubic-bezier-animator": "1.131.2",
|
|
31
|
+
"@tamagui/use-presence": "1.131.2",
|
|
32
|
+
"@tamagui/web": "1.131.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@tamagui/build": "1.131.
|
|
35
|
+
"@tamagui/build": "1.131.2",
|
|
36
36
|
"react": "*",
|
|
37
37
|
"react-dom": "*"
|
|
38
38
|
},
|
package/src/createAnimations.tsx
CHANGED
|
@@ -4,6 +4,28 @@ import type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'
|
|
|
4
4
|
import { transformsToString } from '@tamagui/web'
|
|
5
5
|
import React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Helper function to extract duration from CSS animation string
|
|
9
|
+
* Examples: "ease-in 200ms" -> 200, "cubic-bezier(0.215, 0.610, 0.355, 1.000) 400ms" -> 400
|
|
10
|
+
* "ease-in 0.5s" -> 500, "slow 2s" -> 2000
|
|
11
|
+
*/
|
|
12
|
+
function extractDuration(animation: string): number {
|
|
13
|
+
// Try to match milliseconds first
|
|
14
|
+
const msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/)
|
|
15
|
+
if (msMatch) {
|
|
16
|
+
return Number.parseInt(msMatch[1], 10)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Try to match seconds and convert to milliseconds
|
|
20
|
+
const sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/)
|
|
21
|
+
if (sMatch) {
|
|
22
|
+
return Math.round(Number.parseFloat(sMatch[1]) * 1000)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Default to 300ms if no duration found
|
|
26
|
+
return 300
|
|
27
|
+
}
|
|
28
|
+
|
|
7
29
|
export function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {
|
|
8
30
|
const reactionListeners = new WeakMap<any, Set<Function>>()
|
|
9
31
|
|
|
@@ -74,12 +96,34 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
74
96
|
const host = stateRef.current.host
|
|
75
97
|
if (!sendExitComplete || !isExiting || !host) return
|
|
76
98
|
const node = host as HTMLElement
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Exit animation handling for Dialog/Modal components
|
|
102
|
+
*
|
|
103
|
+
* The Challenge: When users close dialogs (via Escape key or clicking outside),
|
|
104
|
+
* the element can disappear from the DOM before CSS transitions finish, which causes:
|
|
105
|
+
* 1. Dialogs to stick around on screen
|
|
106
|
+
* 2. Event handlers to stop working
|
|
107
|
+
*/
|
|
108
|
+
|
|
109
|
+
// Use timeout as primary, transition events as backup for reliable exit handling
|
|
110
|
+
const fallbackTimeout = animation ? extractDuration(animation) : 200
|
|
111
|
+
|
|
112
|
+
const timeoutId = setTimeout(() => {
|
|
113
|
+
sendExitComplete?.()
|
|
114
|
+
}, fallbackTimeout)
|
|
115
|
+
|
|
116
|
+
// Listen for transition completion events as backup
|
|
77
117
|
const onFinishAnimation = () => {
|
|
118
|
+
clearTimeout(timeoutId)
|
|
78
119
|
sendExitComplete?.()
|
|
79
120
|
}
|
|
121
|
+
|
|
80
122
|
node.addEventListener('transitionend', onFinishAnimation)
|
|
81
123
|
node.addEventListener('transitioncancel', onFinishAnimation)
|
|
124
|
+
|
|
82
125
|
return () => {
|
|
126
|
+
clearTimeout(timeoutId)
|
|
83
127
|
node.removeEventListener('transitionend', onFinishAnimation)
|
|
84
128
|
node.removeEventListener('transitioncancel', onFinishAnimation)
|
|
85
129
|
}
|
|
@@ -178,7 +222,4 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
178
222
|
// scaleY: height / fromHeight,
|
|
179
223
|
// }
|
|
180
224
|
|
|
181
|
-
// el.style.transform = `
|
|
182
|
-
|
|
183
|
-
// return transform
|
|
184
|
-
// }
|
|
225
|
+
// el.style.transform = `
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"mappings": "AAEA,cAAc,uBAAgD,cAAc;
|
|
2
|
+
"mappings": "AAEA,cAAc,uBAAgD,cAAc;AA0B5E,OAAO,iBAAS,iBAAiB,UAAU,QAAQA,YAAY,IAAI,gBAAgB",
|
|
3
3
|
"names": [
|
|
4
4
|
"animations: A"
|
|
5
5
|
],
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"src/createAnimations.tsx"
|
|
8
8
|
],
|
|
9
9
|
"sourcesContent": [
|
|
10
|
-
"import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'\nimport { transformsToString } from '@tamagui/web'\nimport React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n const reactionListeners = new WeakMap<any, Set<Function>>()\n\n return {\n animations,\n usePresence,\n ResetPresence,\n supportsCSS: true,\n\n useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {\n const [val, setVal] = React.useState(initial)\n const [onFinish, setOnFinish] = useState<Function | undefined>()\n\n useIsomorphicLayoutEffect(() => {\n if (onFinish) {\n onFinish?.()\n setOnFinish(undefined)\n }\n }, [onFinish])\n\n return {\n getInstance() {\n return setVal\n },\n getValue() {\n return val\n },\n setValue(next, config, onFinish) {\n setVal(next)\n setOnFinish(onFinish)\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction({ value }, onValue) {\n React.useEffect(() => {\n const instance = value.getInstance()\n let queue = reactionListeners.get(instance)\n if (!queue) {\n const next = new Set<Function>()\n reactionListeners.set(instance, next)\n queue = next!\n }\n queue.add(onValue)\n return () => {\n queue?.delete(onValue)\n }\n }, [])\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: ({ props, presence, style, componentState, stateRef }) => {\n const isEntering = !!componentState.unmounted\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n // const initialPositionRef = useRef<any>(null)\n const [animationKey, animationConfig] = Array.isArray(props.animation)\n ? props.animation\n : [props.animation]\n const animation = animations[animationKey]\n const keys = props.animateOnly ?? ['all']\n\n useIsomorphicLayoutEffect(() => {\n const host = stateRef.current.host\n if (!sendExitComplete || !isExiting || !host) return\n const node = host as HTMLElement\n const onFinishAnimation = () => {\n sendExitComplete?.()\n }\n node.addEventListener('transitionend', onFinishAnimation)\n node.addEventListener('transitioncancel', onFinishAnimation)\n return () => {\n node.removeEventListener('transitionend', onFinishAnimation)\n node.removeEventListener('transitioncancel', onFinishAnimation)\n }\n }, [sendExitComplete, isExiting])\n\n if (animation) {\n if (Array.isArray(style.transform)) {\n style.transform = transformsToString(style.transform)\n }\n\n // add css transition\n // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function\n // for non layout transform properties either use animate function or find a workaround to do it with css\n style.transition = keys\n .map((key) => {\n const override = animations[animationConfig?.[key]] ?? animation\n return `${key} ${override}`\n })\n .join(', ')\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.info('CSS animation', {\n props,\n animations,\n animation,\n animationKey,\n style,\n isEntering,\n isExiting,\n })\n }\n\n if (!animation) {\n return null\n }\n\n return { style, className: isEntering ? 't_unmounted' : '' }\n },\n }\n}\n\n// layout animations\n// useIsomorphicLayoutEffect(() => {\n// if (!host || !props.layout) {\n// return\n// }\n// // @ts-ignore\n// const boundingBox = host?.getBoundingClientRect()\n// if (isChanged(initialPositionRef.current, boundingBox)) {\n// const transform = invert(\n// host,\n// boundingBox,\n// initialPositionRef.current\n// )\n\n// animate({\n// from: transform,\n// to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },\n// duration: 1000,\n// onUpdate: ({ x, y, scaleX, scaleY }) => {\n// // @ts-ignore\n// host.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`\n// // TODO: handle childRef inverse scale\n// // childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${\n// // 1 / scaleY\n// // })`\n// },\n// // TODO: extract ease-in from string and convert/map it to a cubicBezier array\n// cubicBezier: [0, 1.38, 1, -0.41],\n// })\n// }\n// initialPositionRef.current = boundingBox\n// })\n\n// style.transition = `${keys} ${animation}${\n// props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''\n// }`\n\n// const isChanged = (initialBox: any, finalBox: any) => {\n// // we just mounted, so we don't have complete data yet\n// if (!initialBox || !finalBox) return false\n\n// // deep compare the two boxes\n// return JSON.stringify(initialBox) !== JSON.stringify(finalBox)\n// }\n\n// const invert = (el, from, to) => {\n// const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from\n// const { x, y, width, height } = to\n\n// const transform = {\n// x: x - fromX - (fromWidth - width) / 2,\n// y: y - fromY - (fromHeight - height) / 2,\n// scaleX: width / fromWidth,\n// scaleY: height / fromHeight,\n// }\n\n// el.style.transform =
|
|
10
|
+
"import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'\nimport { transformsToString } from '@tamagui/web'\nimport React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'\n\n/**\n * Helper function to extract duration from CSS animation string\n * Examples: \"ease-in 200ms\" -> 200, \"cubic-bezier(0.215, 0.610, 0.355, 1.000) 400ms\" -> 400\n * \"ease-in 0.5s\" -> 500, \"slow 2s\" -> 2000\n */\nfunction extractDuration(animation: string): number {\n // Try to match milliseconds first\n const msMatch = animation.match(/(\\d+(?:\\.\\d+)?)\\s*ms/)\n if (msMatch) {\n return Number.parseInt(msMatch[1], 10)\n }\n\n // Try to match seconds and convert to milliseconds\n const sMatch = animation.match(/(\\d+(?:\\.\\d+)?)\\s*s/)\n if (sMatch) {\n return Math.round(Number.parseFloat(sMatch[1]) * 1000)\n }\n\n // Default to 300ms if no duration found\n return 300\n}\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n const reactionListeners = new WeakMap<any, Set<Function>>()\n\n return {\n animations,\n usePresence,\n ResetPresence,\n supportsCSS: true,\n\n useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {\n const [val, setVal] = React.useState(initial)\n const [onFinish, setOnFinish] = useState<Function | undefined>()\n\n useIsomorphicLayoutEffect(() => {\n if (onFinish) {\n onFinish?.()\n setOnFinish(undefined)\n }\n }, [onFinish])\n\n return {\n getInstance() {\n return setVal\n },\n getValue() {\n return val\n },\n setValue(next, config, onFinish) {\n setVal(next)\n setOnFinish(onFinish)\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction({ value }, onValue) {\n React.useEffect(() => {\n const instance = value.getInstance()\n let queue = reactionListeners.get(instance)\n if (!queue) {\n const next = new Set<Function>()\n reactionListeners.set(instance, next)\n queue = next!\n }\n queue.add(onValue)\n return () => {\n queue?.delete(onValue)\n }\n }, [])\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: ({ props, presence, style, componentState, stateRef }) => {\n const isEntering = !!componentState.unmounted\n const isExiting = presence?.[0] === false\n const sendExitComplete = presence?.[1]\n // const initialPositionRef = useRef<any>(null)\n const [animationKey, animationConfig] = Array.isArray(props.animation)\n ? props.animation\n : [props.animation]\n const animation = animations[animationKey]\n const keys = props.animateOnly ?? ['all']\n\n useIsomorphicLayoutEffect(() => {\n const host = stateRef.current.host\n if (!sendExitComplete || !isExiting || !host) return\n const node = host as HTMLElement\n\n /**\n * Exit animation handling for Dialog/Modal components\n *\n * The Challenge: When users close dialogs (via Escape key or clicking outside),\n * the element can disappear from the DOM before CSS transitions finish, which causes:\n * 1. Dialogs to stick around on screen\n * 2. Event handlers to stop working\n */\n\n // Use timeout as primary, transition events as backup for reliable exit handling\n const fallbackTimeout = animation ? extractDuration(animation) : 200\n\n const timeoutId = setTimeout(() => {\n sendExitComplete?.()\n }, fallbackTimeout)\n\n // Listen for transition completion events as backup\n const onFinishAnimation = () => {\n clearTimeout(timeoutId)\n sendExitComplete?.()\n }\n\n node.addEventListener('transitionend', onFinishAnimation)\n node.addEventListener('transitioncancel', onFinishAnimation)\n\n return () => {\n clearTimeout(timeoutId)\n node.removeEventListener('transitionend', onFinishAnimation)\n node.removeEventListener('transitioncancel', onFinishAnimation)\n }\n }, [sendExitComplete, isExiting])\n\n if (animation) {\n if (Array.isArray(style.transform)) {\n style.transform = transformsToString(style.transform)\n }\n\n // add css transition\n // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function\n // for non layout transform properties either use animate function or find a workaround to do it with css\n style.transition = keys\n .map((key) => {\n const override = animations[animationConfig?.[key]] ?? animation\n return `${key} ${override}`\n })\n .join(', ')\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.info('CSS animation', {\n props,\n animations,\n animation,\n animationKey,\n style,\n isEntering,\n isExiting,\n })\n }\n\n if (!animation) {\n return null\n }\n\n return { style, className: isEntering ? 't_unmounted' : '' }\n },\n }\n}\n\n// layout animations\n// useIsomorphicLayoutEffect(() => {\n// if (!host || !props.layout) {\n// return\n// }\n// // @ts-ignore\n// const boundingBox = host?.getBoundingClientRect()\n// if (isChanged(initialPositionRef.current, boundingBox)) {\n// const transform = invert(\n// host,\n// boundingBox,\n// initialPositionRef.current\n// )\n\n// animate({\n// from: transform,\n// to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },\n// duration: 1000,\n// onUpdate: ({ x, y, scaleX, scaleY }) => {\n// // @ts-ignore\n// host.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`\n// // TODO: handle childRef inverse scale\n// // childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${\n// // 1 / scaleY\n// // })`\n// },\n// // TODO: extract ease-in from string and convert/map it to a cubicBezier array\n// cubicBezier: [0, 1.38, 1, -0.41],\n// })\n// }\n// initialPositionRef.current = boundingBox\n// })\n\n// style.transition = `${keys} ${animation}${\n// props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''\n// }`\n\n// const isChanged = (initialBox: any, finalBox: any) => {\n// // we just mounted, so we don't have complete data yet\n// if (!initialBox || !finalBox) return false\n\n// // deep compare the two boxes\n// return JSON.stringify(initialBox) !== JSON.stringify(finalBox)\n// }\n\n// const invert = (el, from, to) => {\n// const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from\n// const { x, y, width, height } = to\n\n// const transform = {\n// x: x - fromX - (fromWidth - width) / 2,\n// y: y - fromY - (fromHeight - height) / 2,\n// scaleX: width / fromWidth,\n// scaleY: height / fromHeight,\n// }\n\n// el.style.transform = `\n"
|
|
11
11
|
],
|
|
12
12
|
"version": 3
|
|
13
13
|
}
|