@tamagui/animations-css 1.142.0 → 2.0.0-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.
- package/dist/cjs/createAnimations.cjs +13 -6
- package/dist/cjs/createAnimations.js +11 -6
- package/dist/cjs/createAnimations.js.map +1 -1
- package/dist/cjs/createAnimations.native.js +14 -7
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/esm/createAnimations.js +11 -6
- package/dist/esm/createAnimations.js.map +1 -1
- package/dist/esm/createAnimations.mjs +13 -6
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +14 -7
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/package.json +6 -6
- package/src/createAnimations.tsx +7 -2
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -101,11 +101,13 @@ function createAnimations(animations) {
|
|
|
101
101
|
[animationKey, animationConfig] = Array.isArray(props.animation) ? props.animation : [props.animation],
|
|
102
102
|
animation = animations[animationKey],
|
|
103
103
|
keys = props.animateOnly ?? ["all"];
|
|
104
|
-
|
|
104
|
+
if ((0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
105
105
|
const host = stateRef.current.host;
|
|
106
106
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
107
107
|
const node = host,
|
|
108
|
-
|
|
108
|
+
animationDuration = animation ? extractDuration(animation) : 200,
|
|
109
|
+
delay = typeof animationConfig?.delay == "number" ? animationConfig.delay : 0,
|
|
110
|
+
fallbackTimeout = animationDuration + delay,
|
|
109
111
|
timeoutId = setTimeout(() => {
|
|
110
112
|
sendExitComplete?.();
|
|
111
113
|
}, fallbackTimeout),
|
|
@@ -115,10 +117,15 @@ function createAnimations(animations) {
|
|
|
115
117
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
116
118
|
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
117
119
|
};
|
|
118
|
-
}, [sendExitComplete, isExiting]), animation
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
}, [sendExitComplete, isExiting]), animation) {
|
|
121
|
+
Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform));
|
|
122
|
+
const delay = typeof animationConfig?.delay == "number" ? ` ${animationConfig.delay}ms` : "";
|
|
123
|
+
style.transition = keys.map(key => {
|
|
124
|
+
const override = animations[animationConfig?.[key]] ?? animation;
|
|
125
|
+
return `${key} ${override}${delay}`;
|
|
126
|
+
}).join(", ");
|
|
127
|
+
}
|
|
128
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
|
|
122
129
|
props,
|
|
123
130
|
animations,
|
|
124
131
|
animation,
|
|
@@ -77,10 +77,10 @@ function createAnimations(animations) {
|
|
|
77
77
|
},
|
|
78
78
|
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
79
79
|
const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = Array.isArray(props.animation) ? props.animation : [props.animation], animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
|
|
80
|
-
|
|
80
|
+
if ((0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
81
81
|
const host = stateRef.current.host;
|
|
82
82
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
83
|
-
const node = host,
|
|
83
|
+
const node = host, animationDuration = animation ? extractDuration(animation) : 200, delay = typeof animationConfig?.delay == "number" ? animationConfig.delay : 0, fallbackTimeout = animationDuration + delay, timeoutId = setTimeout(() => {
|
|
84
84
|
sendExitComplete?.();
|
|
85
85
|
}, fallbackTimeout), onFinishAnimation = () => {
|
|
86
86
|
clearTimeout(timeoutId), sendExitComplete?.();
|
|
@@ -88,10 +88,15 @@ function createAnimations(animations) {
|
|
|
88
88
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
89
89
|
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
90
90
|
};
|
|
91
|
-
}, [sendExitComplete, isExiting]), animation
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
}, [sendExitComplete, isExiting]), animation) {
|
|
92
|
+
Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform));
|
|
93
|
+
const delay = typeof animationConfig?.delay == "number" ? ` ${animationConfig.delay}ms` : "";
|
|
94
|
+
style.transition = keys.map((key) => {
|
|
95
|
+
const override = animations[animationConfig?.[key]] ?? animation;
|
|
96
|
+
return `${key} ${override}${delay}`;
|
|
97
|
+
}).join(", ");
|
|
98
|
+
}
|
|
99
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
|
|
95
100
|
props,
|
|
96
101
|
animations,
|
|
97
102
|
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;AAOhC,SAAS,gBAAgB,WAA2B;AAElD,QAAM,UAAU,UAAU,MAAM,sBAAsB;AACtD,MAAI;AACF,WAAO,OAAO,SAAS,QAAQ,CAAC,GAAG,EAAE;AAIvC,QAAM,SAAS,UAAU,MAAM,qBAAqB;AACpD,SAAI,SACK,KAAK,MAAM,OAAO,WAAW,OAAO,CAAC,CAAC,IAAI,GAAI,IAIhD;AACT;AAEO,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,oBAAoB;AAAA,IAEpB,kBAAkB,SAA4C;AAC5D,YAAM,CAAC,KAAK,MAAM,IAAI,aAAAA,QAAM,SAAS,OAAO,GACtC,CAAC,UAAU,WAAW,QAAI,uBAA+B;AAE/D,6DAA0B,MAAM;AAC9B,QAAI,aACF,WAAW,GACX,YAAY,MAAS;AAAA,MAEzB,GAAG,CAAC,QAAQ,CAAC,GAEN;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM,QAAQC,WAAU;AAC/B,iBAAO,IAAI,GACX,YAAYA,SAAQ;AAAA,QACtB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,MAAM,GAAG,SAAS;AAC5C,mBAAAD,QAAM,UAAU,MAAM;AACpB,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,SAAS,MAAM;AACvE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,MAAM,QAAQ,MAAM,SAAS,IACjE,MAAM,YACN,CAAC,MAAM,SAAS,GACd,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["React", "onFinish"]
|
|
6
6
|
}
|
|
@@ -106,11 +106,13 @@ function createAnimations(animations) {
|
|
|
106
106
|
animation = animations[animationKey],
|
|
107
107
|
_props_animateOnly,
|
|
108
108
|
keys = (_props_animateOnly = props.animateOnly) !== null && _props_animateOnly !== void 0 ? _props_animateOnly : ["all"];
|
|
109
|
-
|
|
109
|
+
if ((0, import_constants.useIsomorphicLayoutEffect)(function () {
|
|
110
110
|
var host = stateRef.current.host;
|
|
111
111
|
if (!(!sendExitComplete || !isExiting || !host)) {
|
|
112
112
|
var node = host,
|
|
113
|
-
|
|
113
|
+
animationDuration = animation ? extractDuration(animation) : 200,
|
|
114
|
+
delay2 = typeof animationConfig?.delay == "number" ? animationConfig.delay : 0,
|
|
115
|
+
fallbackTimeout = animationDuration + delay2,
|
|
114
116
|
timeoutId = setTimeout(function () {
|
|
115
117
|
sendExitComplete?.();
|
|
116
118
|
}, fallbackTimeout),
|
|
@@ -121,11 +123,16 @@ function createAnimations(animations) {
|
|
|
121
123
|
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
122
124
|
};
|
|
123
125
|
}
|
|
124
|
-
}, [sendExitComplete, isExiting]), animation
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
}, [sendExitComplete, isExiting]), animation) {
|
|
127
|
+
Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform));
|
|
128
|
+
var delay = typeof animationConfig?.delay == "number" ? ` ${animationConfig.delay}ms` : "";
|
|
129
|
+
style.transition = keys.map(function (key) {
|
|
130
|
+
var _animations_animationConfig_key,
|
|
131
|
+
override = (_animations_animationConfig_key = animations[animationConfig?.[key]]) !== null && _animations_animationConfig_key !== void 0 ? _animations_animationConfig_key : animation;
|
|
132
|
+
return `${key} ${override}${delay}`;
|
|
133
|
+
}).join(", ");
|
|
134
|
+
}
|
|
135
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
|
|
129
136
|
props,
|
|
130
137
|
animations,
|
|
131
138
|
animation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","createAnimations_exports","__export","createAnimations","module","exports","import_constants","require","import_use_presence","import_web","import_react","__toESM","extractDuration","animation","msMatch","match","Number","parseInt","sMatch","Math","round","parseFloat","animations","reactionListeners","WeakMap","usePresence","ResetPresence","supportsCSS","classNameAnimation","useAnimatedNumber","initial","val","setVal","default","useState","onFinish","setOnFinish","useIsomorphicLayoutEffect","getInstance","getValue","setValue","next","config","onFinish2","stop","useAnimatedNumberReaction","param","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","_props_animateOnly","keys","animateOnly","host","current","node","fallbackTimeout","timeoutId","setTimeout","onFinishAnimation","clearTimeout","addEventListener","removeEventListener","transform","transformsToString","transition","map","key","_animations_animationConfig_key","override","join","process","env","NODE_ENV","debug","console","info"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,wBAAA;AAAAC,QAAA,CAAAD,wBAAA;EAAAE,gBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA0C,CAAAK,wBAC1C;AAUA,IAAAK,gBAAS,GAAAC,OAAgB,qBAA2B;EAAAC,mBAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;EAAAG,YAAA,GAAAC,OAAA,CAAAJ,OAAA;AAElD,SAAMK,eAAUA,CAAAC,SAAgB;EAChC,IAAIC,OAAA,GAAAD,SAAA,CAAAE,KAAA;EACF,IAAAD,OAAO,EAIT,OAAME,MAAS,CAAAC,QAAA,CAAUH,OAAM;EAC/B,IAAAI,MAAI,GAAAL,SACU,CAAAE,KAAM,sBAAkB;EAKxC,OAAAG,MAAA,GAAAC,IAAA,CAAAC,KAAA,CAAAJ,MAAA,CAAAK,UAAA,CAAAH,MAAA;AAEO;AACL,SAAMf,iBAAAmB,UAAoB;EAE1B,IAAAC,iBAAO,sBAAAC,OAAA;EAAA,OACL;IACAF,UAAA;IACAG,WAAA,EAAAjB,mBAAA,CAAAiB,WAAA;IACAC,aAAa,EAAAlB,mBAAA,CAAAkB,aAAA;IACbC,WAAA;IAEAC,kBAAkB;IAChBC,iBAAYA,CAAAC,OAAU;MAGtB,KAAAC,GAAA,EAAAC,MAAA,IAAAtB,YAAA,CAAAuB,OAAA,CAAAC,QAAA,CAAAJ,OAA0B;QAAA,CAAMK,QAAA,EAAAC,WAAA,QAAA1B,YAAA,CAAAwB,QAAA;MAC9B,OAAI,IAAA5B,gBACS,CAAA+B,yBACU;QAEzBF,QAAI,KAASA,QAEN,MAAAC,WAAA;MAAA,GACL,CACED,QAAA,CAAO,CACT;QACAG,WAAWA,CAAA;UACT,OAAON,MAAA;QACT;QACAO,SAAA,EAAS;UACP,OAAOR,GAAA;QAET;QACAS,QAAOA,CAAAC,IAAA,EAAAC,MAAA,EAAAC,SAAA;UAACX,MAAA,CAAAS,IAAA,GAAAL,WAAA,CAAAO,SAAA;QACV;QACFC,KAAA,GAEA;MACE;IACE;IACAC,yBAAYA,CAAAC,KAAA,EAAAC,OAAsB;MAClC;QAAI/C;MAAC,IAAO8C,KAAA;MACVpC,YAAM,CAAAuB,OAAO,CAAAe,SAAA,aAAkB;QAC/B,IAAAC,QAAA,GAAAjD,KAAkB,CAAAsC,WAAI,EAAU;UAAAY,KAChC,GAAA3B,iBAAQ,CAAA4B,GAAA,CAAAF,QAAA;QACV,KAAAC,KAAA;UACA,IAAAT,IAAA,GAAM,eACC,IAAMW,GAAA;UACX7B,iBAAc,CAAA8B,GAAO,CAAAJ,QAAA,EAAAR,IAAA,GAAAS,KAAA,GAAAT,IAAA;QACvB;QACF,OAAKS,KAAA,CAAAI,GAAA,CAAAP,OAAA;UACPG,KAAA,EAAAK,MAAA,CAAAR,OAAA;QAEA;MACE;IACF;IAEAS,sBAAkBA,CAAAzB,GAAO,EAAA0B,QAAU;MACjC,OAAMA,QAAA,CAAA1B,GAAa,CAACQ,QAAC;
|
|
1
|
+
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","createAnimations_exports","__export","createAnimations","module","exports","import_constants","require","import_use_presence","import_web","import_react","__toESM","extractDuration","animation","msMatch","match","Number","parseInt","sMatch","Math","round","parseFloat","animations","reactionListeners","WeakMap","usePresence","ResetPresence","supportsCSS","classNameAnimation","useAnimatedNumber","initial","val","setVal","default","useState","onFinish","setOnFinish","useIsomorphicLayoutEffect","getInstance","getValue","setValue","next","config","onFinish2","stop","useAnimatedNumberReaction","param","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","_props_animateOnly","keys","animateOnly","host","current","node","animationDuration","delay2","delay","fallbackTimeout","timeoutId","setTimeout","onFinishAnimation","clearTimeout","addEventListener","removeEventListener","transform","transformsToString","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":[]}
|
|
@@ -53,10 +53,10 @@ function createAnimations(animations) {
|
|
|
53
53
|
},
|
|
54
54
|
useAnimations: ({ props, presence, style, componentState, stateRef }) => {
|
|
55
55
|
const isEntering = !!componentState.unmounted, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], [animationKey, animationConfig] = Array.isArray(props.animation) ? props.animation : [props.animation], animation = animations[animationKey], keys = props.animateOnly ?? ["all"];
|
|
56
|
-
|
|
56
|
+
if (useIsomorphicLayoutEffect(() => {
|
|
57
57
|
const host = stateRef.current.host;
|
|
58
58
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
59
|
-
const node = host,
|
|
59
|
+
const node = host, animationDuration = animation ? extractDuration(animation) : 200, delay = typeof animationConfig?.delay == "number" ? animationConfig.delay : 0, fallbackTimeout = animationDuration + delay, timeoutId = setTimeout(() => {
|
|
60
60
|
sendExitComplete?.();
|
|
61
61
|
}, fallbackTimeout), onFinishAnimation = () => {
|
|
62
62
|
clearTimeout(timeoutId), sendExitComplete?.();
|
|
@@ -64,10 +64,15 @@ function createAnimations(animations) {
|
|
|
64
64
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
65
65
|
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
66
66
|
};
|
|
67
|
-
}, [sendExitComplete, isExiting]), animation
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
}, [sendExitComplete, isExiting]), animation) {
|
|
68
|
+
Array.isArray(style.transform) && (style.transform = transformsToString(style.transform));
|
|
69
|
+
const delay = typeof animationConfig?.delay == "number" ? ` ${animationConfig.delay}ms` : "";
|
|
70
|
+
style.transition = keys.map((key) => {
|
|
71
|
+
const override = animations[animationConfig?.[key]] ?? animation;
|
|
72
|
+
return `${key} ${override}${delay}`;
|
|
73
|
+
}).join(", ");
|
|
74
|
+
}
|
|
75
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
|
|
71
76
|
props,
|
|
72
77
|
animations,
|
|
73
78
|
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;AAOhC,SAAS,gBAAgB,WAA2B;AAElD,QAAM,UAAU,UAAU,MAAM,sBAAsB;AACtD,MAAI;AACF,WAAO,OAAO,SAAS,QAAQ,CAAC,GAAG,EAAE;AAIvC,QAAM,SAAS,UAAU,MAAM,qBAAqB;AACpD,SAAI,SACK,KAAK,MAAM,OAAO,WAAW,OAAO,CAAC,CAAC,IAAI,GAAI,IAIhD;AACT;AAEO,SAAS,iBAAmC,YAAmC;AACpF,QAAM,oBAAoB,oBAAI,QAA4B;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,oBAAoB;AAAA,IAEpB,kBAAkB,SAA4C;AAC5D,YAAM,CAAC,KAAK,MAAM,IAAI,MAAM,SAAS,OAAO,GACtC,CAAC,UAAU,WAAW,IAAI,SAA+B;AAE/D,uCAA0B,MAAM;AAC9B,QAAI,aACF,WAAW,GACX,YAAY,MAAS;AAAA,MAEzB,GAAG,CAAC,QAAQ,CAAC,GAEN;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM,QAAQA,WAAU;AAC/B,iBAAO,IAAI,GACX,YAAYA,SAAQ;AAAA,QACtB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,MAAM,GAAG,SAAS;AAC5C,YAAM,UAAU,MAAM;AACpB,cAAM,WAAW,MAAM,YAAY;AACnC,YAAI,QAAQ,kBAAkB,IAAI,QAAQ;AAC1C,YAAI,CAAC,OAAO;AACV,gBAAM,OAAO,oBAAI,IAAc;AAC/B,4BAAkB,IAAI,UAAU,IAAI,GACpC,QAAQ;AAAA,QACV;AACA,qBAAM,IAAI,OAAO,GACV,MAAM;AACX,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,gBAAgB,SAAS,MAAM;AACvE,YAAM,aAAa,CAAC,CAAC,eAAe,WAC9B,YAAY,WAAW,CAAC,MAAM,IAC9B,mBAAmB,WAAW,CAAC,GAE/B,CAAC,cAAc,eAAe,IAAI,MAAM,QAAQ,MAAM,SAAS,IACjE,MAAM,YACN,CAAC,MAAM,SAAS,GACd,YAAY,WAAW,YAAY,GACnC,OAAO,MAAM,eAAe,CAAC,KAAK;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["onFinish"]
|
|
6
6
|
}
|
|
@@ -65,11 +65,13 @@ function createAnimations(animations) {
|
|
|
65
65
|
[animationKey, animationConfig] = Array.isArray(props.animation) ? props.animation : [props.animation],
|
|
66
66
|
animation = animations[animationKey],
|
|
67
67
|
keys = props.animateOnly ?? ["all"];
|
|
68
|
-
|
|
68
|
+
if (useIsomorphicLayoutEffect(() => {
|
|
69
69
|
const host = stateRef.current.host;
|
|
70
70
|
if (!sendExitComplete || !isExiting || !host) return;
|
|
71
71
|
const node = host,
|
|
72
|
-
|
|
72
|
+
animationDuration = animation ? extractDuration(animation) : 200,
|
|
73
|
+
delay = typeof animationConfig?.delay == "number" ? animationConfig.delay : 0,
|
|
74
|
+
fallbackTimeout = animationDuration + delay,
|
|
73
75
|
timeoutId = setTimeout(() => {
|
|
74
76
|
sendExitComplete?.();
|
|
75
77
|
}, fallbackTimeout),
|
|
@@ -79,10 +81,15 @@ function createAnimations(animations) {
|
|
|
79
81
|
return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
|
|
80
82
|
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
81
83
|
};
|
|
82
|
-
}, [sendExitComplete, isExiting]), animation
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
}, [sendExitComplete, isExiting]), animation) {
|
|
85
|
+
Array.isArray(style.transform) && (style.transform = transformsToString(style.transform));
|
|
86
|
+
const delay = typeof animationConfig?.delay == "number" ? ` ${animationConfig.delay}ms` : "";
|
|
87
|
+
style.transition = keys.map(key => {
|
|
88
|
+
const override = animations[animationConfig?.[key]] ?? animation;
|
|
89
|
+
return `${key} ${override}${delay}`;
|
|
90
|
+
}).join(", ");
|
|
91
|
+
}
|
|
92
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
|
|
86
93
|
props,
|
|
87
94
|
animations,
|
|
88
95
|
animation,
|
|
@@ -1 +1 @@
|
|
|
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","classNameAnimation","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":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,aAAA,EAAeC,WAAA,QAAmB;AAE3C,SAASC,kBAAA,QAA0B;AACnC,OAAOC,KAAA,IAASC,QAAA,QAAgB;AAOhC,SAASC,gBAAgBC,SAAA,EAA2B;EAElD,MAAMC,OAAA,GAAUD,SAAA,CAAUE,KAAA,CAAM,sBAAsB;EACtD,IAAID,OAAA,EACF,OAAOE,MAAA,CAAOC,QAAA,CAASH,OAAA,CAAQ,CAAC,GAAG,EAAE;EAIvC,MAAMI,MAAA,GAASL,SAAA,CAAUE,KAAA,CAAM,qBAAqB;EACpD,OAAIG,MAAA,GACKC,IAAA,CAAKC,KAAA,CAAMJ,MAAA,CAAOK,UAAA,CAAWH,MAAA,CAAO,CAAC,CAAC,IAAI,GAAI,IAIhD;AACT;AAEO,SAASI,iBAAmCC,UAAA,EAAmC;EACpF,MAAMC,iBAAA,GAAoB,mBAAIC,OAAA,CAA4B;EAE1D,OAAO;IACLF,UAAA;IACAf,WAAA;IACAD,aAAA;IACAmB,WAAA,EAAa;IACbC,kBAAA,EAAoB;IAEpBC,kBAAkBC,OAAA,EAA4C;MAC5D,MAAM,CAACC,GAAA,EAAKC,MAAM,IAAIrB,KAAA,CAAMC,QAAA,CAASkB,OAAO;QACtC,CAACG,QAAA,EAAUC,WAAW,IAAItB,QAAA,CAA+B;MAE/D,OAAAL,yBAAA,CAA0B,MAAM;QAC1B0B,QAAA,KACFA,QAAA,GAAW,GACXC,WAAA,CAAY,MAAS;MAEzB,GAAG,CAACD,QAAQ,CAAC,GAEN;QACLE,YAAA,EAAc;UACZ,OAAOH,MAAA;QACT;QACAI,SAAA,EAAW;UACT,OAAOL,GAAA;QACT;QACAM,SAASC,IAAA,EAAMC,MAAA,EAAQC,SAAA,EAAU;UAC/BR,MAAA,CAAOM,IAAI,GACXJ,WAAA,CAAYM,SAAQ;QACtB;QACAC,KAAA,EAAO,CAAC;MACV;IACF;IAEAC,0BAA0B;MAAEC;IAAM,GAAGC,OAAA,EAAS;MAC5CjC,KAAA,CAAMkC,SAAA,CAAU,MAAM;QACpB,MAAMC,QAAA,GAAWH,KAAA,CAAMR,WAAA,CAAY;QACnC,IAAIY,KAAA,GAAQtB,iBAAA,CAAkBuB,GAAA,CAAIF,QAAQ;QAC1C,IAAI,CAACC,KAAA,EAAO;UACV,MAAMT,IAAA,GAAO,mBAAIW,GAAA,CAAc;UAC/BxB,iBAAA,CAAkByB,GAAA,CAAIJ,QAAA,EAAUR,IAAI,GACpCS,KAAA,GAAQT,IAAA;QACV;QACA,OAAAS,KAAA,CAAMI,GAAA,CAAIP,OAAO,GACV,MAAM;UACXG,KAAA,EAAOK,MAAA,CAAOR,OAAO;QACvB;MACF,GAAG,EAAE;IACP;IAEAS,uBAAuBtB,GAAA,EAAKuB,QAAA,EAAU;MACpC,OAAOA,QAAA,CAASvB,GAAA,CAAIK,QAAA,CAAS,CAAC;IAChC;IAEAmB,aAAA,EAAeA,CAAC;MAAEC,KAAA;MAAOC,QAAA;MAAUC,KAAA;MAAOC,cAAA;MAAgBC;IAAS,MAAM;MACvE,MAAMC,UAAA,GAAa,CAAC,CAACF,cAAA,CAAeG,SAAA;QAC9BC,SAAA,GAAYN,QAAA,GAAW,CAAC,MAAM;QAC9BO,gBAAA,GAAmBP,QAAA,GAAW,CAAC;QAE/B,CAACQ,YAAA,EAAcC,eAAe,IAAIC,KAAA,CAAMC,OAAA,CAAQZ,KAAA,CAAM1C,SAAS,IACjE0C,KAAA,CAAM1C,SAAA,GACN,CAAC0C,KAAA,CAAM1C,SAAS;QACdA,SAAA,GAAYU,UAAA,CAAWyC,YAAY;QACnCI,IAAA,GAAOb,KAAA,CAAMc,WAAA,IAAe,CAAC,KAAK;
|
|
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","classNameAnimation","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","animationDuration","delay","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":[]}
|
|
@@ -68,11 +68,13 @@ function createAnimations(animations) {
|
|
|
68
68
|
animation = animations[animationKey],
|
|
69
69
|
_props_animateOnly,
|
|
70
70
|
keys = (_props_animateOnly = props.animateOnly) !== null && _props_animateOnly !== void 0 ? _props_animateOnly : ["all"];
|
|
71
|
-
|
|
71
|
+
if (useIsomorphicLayoutEffect(function () {
|
|
72
72
|
var host = stateRef.current.host;
|
|
73
73
|
if (!(!sendExitComplete || !isExiting || !host)) {
|
|
74
74
|
var node = host,
|
|
75
|
-
|
|
75
|
+
animationDuration = animation ? extractDuration(animation) : 200,
|
|
76
|
+
delay2 = typeof animationConfig?.delay == "number" ? animationConfig.delay : 0,
|
|
77
|
+
fallbackTimeout = animationDuration + delay2,
|
|
76
78
|
timeoutId = setTimeout(function () {
|
|
77
79
|
sendExitComplete?.();
|
|
78
80
|
}, fallbackTimeout),
|
|
@@ -83,11 +85,16 @@ function createAnimations(animations) {
|
|
|
83
85
|
clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
|
|
84
86
|
};
|
|
85
87
|
}
|
|
86
|
-
}, [sendExitComplete, isExiting]), animation
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
}, [sendExitComplete, isExiting]), animation) {
|
|
89
|
+
Array.isArray(style.transform) && (style.transform = transformsToString(style.transform));
|
|
90
|
+
var delay = typeof animationConfig?.delay == "number" ? ` ${animationConfig.delay}ms` : "";
|
|
91
|
+
style.transition = keys.map(function (key) {
|
|
92
|
+
var _animations_animationConfig_key,
|
|
93
|
+
override = (_animations_animationConfig_key = animations[animationConfig?.[key]]) !== null && _animations_animationConfig_key !== void 0 ? _animations_animationConfig_key : animation;
|
|
94
|
+
return `${key} ${override}${delay}`;
|
|
95
|
+
}).join(", ");
|
|
96
|
+
}
|
|
97
|
+
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
|
|
91
98
|
props,
|
|
92
99
|
animations,
|
|
93
100
|
animation,
|
|
@@ -1 +1 @@
|
|
|
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","classNameAnimation","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":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,aAAA,EAAeC,WAAA,QAAmB;AAE3C,SAASC,kBAAA,QAA0B;AACnC,OAAOC,KAAA,IAASC,QAAA,QAAgB;AAOhC,SAASC,gBAAgBC,SAAA,EAA2B;EAElD,IAAAC,OAAM,GAAAD,SAAU,CAAAE,KAAU,uBAAM;EAChC,IAAID,OAAA,EACF,OAAOE,MAAA,CAAOC,QAAA,CAASH,OAAA,CAAQ,CAAC,GAAG,EAAE;EAIvC,IAAAI,MAAM,GAAAL,SAAS,CAAAE,KAAU,sBAAM;EAC/B,OAAIG,MAAA,GACKC,IAAA,CAAKC,KAAA,CAAMJ,MAAA,CAAOK,UAAA,CAAWH,MAAA,CAAO,CAAC,CAAC,IAAI,GAAI,IAIhD;AACT;AAEO,SAASI,iBAAmCC,UAAA,EAAmC;EACpF,IAAAC,iBAAM,kBAAoB,IAAAC,OAAI;EAE9B,OAAO;IACLF,UAAA;IACAf,WAAA;IACAD,aAAA;IACAmB,WAAA,EAAa;IACbC,kBAAA,EAAoB;IAEpBC,kBAAkBC,OAAA,EAA4C;MAC5D,KAAAC,GAAO,EAAAC,MAAK,IAAMrB,KAAI,CAAAC,QAAM,CAAAkB,OAAS;QAAO,CAAAG,QACrC,EAAAC,WAAU,IAAWtB,QAAI;MAEhC,OAAAL,yBAAA,CAA0B,YAAM;QAC1B0B,QAAA,KACFA,QAAA,GAAW,GACXC,WAAA,CAAY,MAAS;MAEzB,GAAG,CAGDD,QAAA,CACE;QACFE,YAAA;UACA,OAAAH,MAAW;QACT;QACFI,SAAA;UACA,OAASL,GAAA;QACP;QAEFM,SAAAC,IAAA,EAAAC,MAAA,EAAAC,SAAA;UACAR,MAAO,CAAAM,IAAA,GAAAJ,WAAA,CAAAM,SAAA;QAAC;QACVC,KAAA,GACF;MAEA;IACE;IACEC,yBAAiBA,CAAAC,KAAM,EAAAC,OAAY;MACnC;QAAIC;MAAA,IAAQF,KAAA;MACZhC,KAAA,CAAImC,SAAQ;QACV,IAAAC,QAAM,GAAOF,KAAA,CAAAV,WAAA;UAAIa,KAAc,GAAAvB,iBAAA,CAAAwB,GAAA,CAAAF,QAAA;QAC/B,KAAAC,KAAA;UAEF,IAAAV,IAAA,sBAAAY,GAAA;UACAzB,iBAAU,CAAA0B,GAAA,CAAOJ,QACV,EAAMT,IAAA,GAAAU,KAAA,GAAAV,IAAA;QACX;QACF,OAAAU,KAAA,CAAAI,GAAA,CAAAR,OAAA;UACEI,KAAC,EAAAK,MAAA,CAAAT,OAAA;QACP;MAEA;IACE;IACFU,uBAAAvB,GAAA,EAAAwB,QAAA;MAEA,OAAAA,QAAgB,CAAExB,GAAA,CAAAK,QAAO;IACvB;
|
|
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","classNameAnimation","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","animationDuration","delay2","delay","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": "
|
|
3
|
+
"version": "2.0.0-001",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@tamagui/constants": "
|
|
33
|
-
"@tamagui/cubic-bezier-animator": "
|
|
34
|
-
"@tamagui/use-presence": "
|
|
35
|
-
"@tamagui/web": "
|
|
32
|
+
"@tamagui/constants": "2.0.0-001",
|
|
33
|
+
"@tamagui/cubic-bezier-animator": "2.0.0-001",
|
|
34
|
+
"@tamagui/use-presence": "2.0.0-001",
|
|
35
|
+
"@tamagui/web": "2.0.0-001"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tamagui/build": "
|
|
38
|
+
"@tamagui/build": "2.0.0-001",
|
|
39
39
|
"react": "*",
|
|
40
40
|
"react-dom": "*"
|
|
41
41
|
},
|
package/src/createAnimations.tsx
CHANGED
|
@@ -108,7 +108,10 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
108
108
|
*/
|
|
109
109
|
|
|
110
110
|
// Use timeout as primary, transition events as backup for reliable exit handling
|
|
111
|
-
const
|
|
111
|
+
const animationDuration = animation ? extractDuration(animation) : 200
|
|
112
|
+
const delay =
|
|
113
|
+
typeof animationConfig?.delay === 'number' ? animationConfig.delay : 0
|
|
114
|
+
const fallbackTimeout = animationDuration + delay
|
|
112
115
|
|
|
113
116
|
const timeoutId = setTimeout(() => {
|
|
114
117
|
sendExitComplete?.()
|
|
@@ -138,10 +141,12 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
138
141
|
// add css transition
|
|
139
142
|
// TODO: we disabled the transform transition, because it will create issue for inverse function and animate function
|
|
140
143
|
// for non layout transform properties either use animate function or find a workaround to do it with css
|
|
144
|
+
const delay =
|
|
145
|
+
typeof animationConfig?.delay === 'number' ? ` ${animationConfig.delay}ms` : ''
|
|
141
146
|
style.transition = keys
|
|
142
147
|
.map((key) => {
|
|
143
148
|
const override = animations[animationConfig?.[key]] ?? animation
|
|
144
|
-
return `${key} ${override}`
|
|
149
|
+
return `${key} ${override}${delay}`
|
|
145
150
|
})
|
|
146
151
|
.join(', ')
|
|
147
152
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"src/createAnimations.tsx"
|
|
6
6
|
],
|
|
7
7
|
"sourcesContent": [
|
|
8
|
-
"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 classNameAnimation: 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
|
|
8
|
+
"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 classNameAnimation: 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 animationDuration = animation ? extractDuration(animation) : 200\n const delay =\n typeof animationConfig?.delay === 'number' ? animationConfig.delay : 0\n const fallbackTimeout = animationDuration + delay\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 const delay =\n typeof animationConfig?.delay === 'number' ? ` ${animationConfig.delay}ms` : ''\n style.transition = keys\n .map((key) => {\n const override = animations[animationConfig?.[key]] ?? animation\n return `${key} ${override}${delay}`\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"
|
|
9
9
|
],
|
|
10
10
|
"version": 3
|
|
11
11
|
}
|