@tamagui/animations-css 1.0.1-beta.214 → 1.0.1-beta.215
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.js +1 -1
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +1 -1
- package/dist/esm/createAnimations.js.map +2 -2
- package/package.json +4 -5
- package/src/createAnimations.tsx +1 -1
- package/dist/jsx/createAnimations.js +0 -76
- package/dist/jsx/createAnimations.js.map +0 -7
- package/dist/jsx/index.js +0 -2
- package/dist/jsx/index.js.map +0 -7
|
@@ -54,7 +54,7 @@ function createAnimations(animations) {
|
|
|
54
54
|
const [isPresent, sendExitComplete] = (0, import_use_presence.usePresence)();
|
|
55
55
|
const presence = (0, import_react.useContext)(import_use_presence.PresenceContext);
|
|
56
56
|
const isExiting = isPresent === false;
|
|
57
|
-
const isEntering =
|
|
57
|
+
const isEntering = state.unmounted;
|
|
58
58
|
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
|
|
59
59
|
const animation = animations[animationKey];
|
|
60
60
|
if (!animation) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n View: Stack,\n Text: Text,\n animations,\n\n useAnimatedNumber(initial) {\n const val = useRef(initial)\n return {\n getInstance() {\n return val\n },\n getValue() {\n return val.current\n },\n setValue(next) {\n val.current = next\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction(val, reaction) {\n // TODO use event listeners, would need access to the corresponsing node...\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: (props, { getStyle, state, hostRef }) => {\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n const isExiting = isPresent === false\n const isEntering =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwE;AACxE,0BAA6C;AAC7C,mBAA4C;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,UAAM,qBAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,QAAI,iCAAY;AAClD,YAAM,eAAW,yBAAW,mCAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,
|
|
4
|
+
"sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n View: Stack,\n Text: Text,\n animations,\n\n useAnimatedNumber(initial) {\n const val = useRef(initial)\n return {\n getInstance() {\n return val\n },\n getValue() {\n return val.current\n },\n setValue(next) {\n val.current = next\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction(val, reaction) {\n // TODO use event listeners, would need access to the corresponsing node...\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: (props, { getStyle, state, hostRef }) => {\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n const isExiting = isPresent === false\n const isEntering = state.unmounted\n const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n const animation = animations[animationKey as any]\n if (!animation) {\n return null\n }\n\n const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n useIsomorphicLayoutEffect(() => {\n if (!sendExitComplete || !isExiting || !hostRef.current) return\n const node = hostRef.current 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.addEventListener('transitioncancel', onFinishAnimation)\n }\n }, [sendExitComplete, isExiting])\n\n const style = {\n transition: `${keys} ${animation}`,\n ...getStyle({\n isEntering,\n isExiting,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n }),\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n // eslint-disable-next-line no-console\n console.log('CSS animation', style, { isEntering, isExiting })\n }\n\n return useMemo(() => {\n return { style }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(style)])\n },\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwE;AACxE,0BAA6C;AAC7C,mBAA4C;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,UAAM,qBAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,QAAI,iCAAY;AAClD,YAAM,eAAW,yBAAW,mCAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,MAAM;AACzB,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,iDAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,YAAM,QAAQ;AAAA,QACZ,YAAY,GAAG,QAAQ;AAAA,QACvB,GAAG,SAAS;AAAA,UACV;AAAA,UACA;AAAA,UACA,aAAa,qCAAU;AAAA,UACvB,cAAc,qCAAU;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,iBAAO,sBAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ function createAnimations(animations) {
|
|
|
31
31
|
const [isPresent, sendExitComplete] = usePresence();
|
|
32
32
|
const presence = useContext(PresenceContext);
|
|
33
33
|
const isExiting = isPresent === false;
|
|
34
|
-
const isEntering =
|
|
34
|
+
const isEntering = state.unmounted;
|
|
35
35
|
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
|
|
36
36
|
const animation = animations[animationKey];
|
|
37
37
|
if (!animation) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n View: Stack,\n Text: Text,\n animations,\n\n useAnimatedNumber(initial) {\n const val = useRef(initial)\n return {\n getInstance() {\n return val\n },\n getValue() {\n return val.current\n },\n setValue(next) {\n val.current = next\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction(val, reaction) {\n // TODO use event listeners, would need access to the corresponsing node...\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: (props, { getStyle, state, hostRef }) => {\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n const isExiting = isPresent === false\n const isEntering =
|
|
5
|
-
"mappings": "AAAA,SAA0B,OAAO,MAAM,iCAAiC;AACxE,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,YAAY,SAAS,cAAc;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,OAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,
|
|
4
|
+
"sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n View: Stack,\n Text: Text,\n animations,\n\n useAnimatedNumber(initial) {\n const val = useRef(initial)\n return {\n getInstance() {\n return val\n },\n getValue() {\n return val.current\n },\n setValue(next) {\n val.current = next\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction(val, reaction) {\n // TODO use event listeners, would need access to the corresponsing node...\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: (props, { getStyle, state, hostRef }) => {\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n const isExiting = isPresent === false\n const isEntering = state.unmounted\n const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n const animation = animations[animationKey as any]\n if (!animation) {\n return null\n }\n\n const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n useIsomorphicLayoutEffect(() => {\n if (!sendExitComplete || !isExiting || !hostRef.current) return\n const node = hostRef.current 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.addEventListener('transitioncancel', onFinishAnimation)\n }\n }, [sendExitComplete, isExiting])\n\n const style = {\n transition: `${keys} ${animation}`,\n ...getStyle({\n isEntering,\n isExiting,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n }),\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n // eslint-disable-next-line no-console\n console.log('CSS animation', style, { isEntering, isExiting })\n }\n\n return useMemo(() => {\n return { style }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(style)])\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAA0B,OAAO,MAAM,iCAAiC;AACxE,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,YAAY,SAAS,cAAc;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,OAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,MAAM;AACzB,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,YAAM,QAAQ;AAAA,QACZ,YAAY,GAAG,QAAQ;AAAA,QACvB,GAAG,SAAS;AAAA,UACV;AAAA,UACA;AAAA,UACA,aAAa,qCAAU;AAAA,UACvB,cAAc,qCAAU;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-css",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.215",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"types": "./types/index.d.ts",
|
|
8
8
|
"main": "dist/cjs",
|
|
9
9
|
"module": "dist/esm",
|
|
10
|
-
"module:jsx": "dist/jsx",
|
|
11
10
|
"files": [
|
|
12
11
|
"src",
|
|
13
12
|
"types",
|
|
14
13
|
"dist"
|
|
15
14
|
],
|
|
16
15
|
"dependencies": {
|
|
17
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
18
|
-
"@tamagui/use-presence": "^1.0.1-beta.
|
|
16
|
+
"@tamagui/core": "^1.0.1-beta.215",
|
|
17
|
+
"@tamagui/use-presence": "^1.0.1-beta.215"
|
|
19
18
|
},
|
|
20
19
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
20
|
+
"@tamagui/build": "^1.0.1-beta.215"
|
|
22
21
|
},
|
|
23
22
|
"scripts": {
|
|
24
23
|
"build": "tamagui-build",
|
package/src/createAnimations.tsx
CHANGED
|
@@ -36,7 +36,7 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
|
|
|
36
36
|
const [isPresent, sendExitComplete] = usePresence()
|
|
37
37
|
const presence = useContext(PresenceContext)
|
|
38
38
|
const isExiting = isPresent === false
|
|
39
|
-
const isEntering =
|
|
39
|
+
const isEntering = state.unmounted
|
|
40
40
|
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation
|
|
41
41
|
const animation = animations[animationKey as any]
|
|
42
42
|
if (!animation) {
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { Stack, Text, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
2
|
-
import { PresenceContext, usePresence } from "@tamagui/use-presence";
|
|
3
|
-
import { useContext, useMemo, useRef } from "react";
|
|
4
|
-
function createAnimations(animations) {
|
|
5
|
-
return {
|
|
6
|
-
View: Stack,
|
|
7
|
-
Text,
|
|
8
|
-
animations,
|
|
9
|
-
useAnimatedNumber(initial) {
|
|
10
|
-
const val = useRef(initial);
|
|
11
|
-
return {
|
|
12
|
-
getInstance() {
|
|
13
|
-
return val;
|
|
14
|
-
},
|
|
15
|
-
getValue() {
|
|
16
|
-
return val.current;
|
|
17
|
-
},
|
|
18
|
-
setValue(next) {
|
|
19
|
-
val.current = next;
|
|
20
|
-
},
|
|
21
|
-
stop() {
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
},
|
|
25
|
-
useAnimatedNumberReaction(val, reaction) {
|
|
26
|
-
},
|
|
27
|
-
useAnimatedNumberStyle(val, getStyle) {
|
|
28
|
-
return getStyle(val.getValue());
|
|
29
|
-
},
|
|
30
|
-
useAnimations: (props, { getStyle, state, hostRef }) => {
|
|
31
|
-
const [isPresent, sendExitComplete] = usePresence();
|
|
32
|
-
const presence = useContext(PresenceContext);
|
|
33
|
-
const isExiting = isPresent === false;
|
|
34
|
-
const isEntering = !state.mounted;
|
|
35
|
-
const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
|
|
36
|
-
const animation = animations[animationKey];
|
|
37
|
-
if (!animation) {
|
|
38
|
-
return null;
|
|
39
|
-
}
|
|
40
|
-
const keys = props.animateOnly ? props.animateOnly.join(" ") : "all";
|
|
41
|
-
useIsomorphicLayoutEffect(() => {
|
|
42
|
-
if (!sendExitComplete || !isExiting || !hostRef.current)
|
|
43
|
-
return;
|
|
44
|
-
const node = hostRef.current;
|
|
45
|
-
const onFinishAnimation = () => {
|
|
46
|
-
sendExitComplete?.();
|
|
47
|
-
};
|
|
48
|
-
node.addEventListener("transitionend", onFinishAnimation);
|
|
49
|
-
node.addEventListener("transitioncancel", onFinishAnimation);
|
|
50
|
-
return () => {
|
|
51
|
-
node.removeEventListener("transitionend", onFinishAnimation);
|
|
52
|
-
node.addEventListener("transitioncancel", onFinishAnimation);
|
|
53
|
-
};
|
|
54
|
-
}, [sendExitComplete, isExiting]);
|
|
55
|
-
const style = {
|
|
56
|
-
transition: `${keys} ${animation}`,
|
|
57
|
-
...getStyle({
|
|
58
|
-
isEntering,
|
|
59
|
-
isExiting,
|
|
60
|
-
exitVariant: presence?.exitVariant,
|
|
61
|
-
enterVariant: presence?.enterVariant
|
|
62
|
-
})
|
|
63
|
-
};
|
|
64
|
-
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
65
|
-
console.log("CSS animation", style, { isEntering, isExiting });
|
|
66
|
-
}
|
|
67
|
-
return useMemo(() => {
|
|
68
|
-
return { style };
|
|
69
|
-
}, [JSON.stringify(style)]);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
}
|
|
73
|
-
export {
|
|
74
|
-
createAnimations
|
|
75
|
-
};
|
|
76
|
-
//# sourceMappingURL=createAnimations.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimationDriver, Stack, Text, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { PresenceContext, usePresence } from '@tamagui/use-presence'\nimport { useContext, useMemo, useRef } from 'react'\n\nexport function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {\n return {\n View: Stack,\n Text: Text,\n animations,\n\n useAnimatedNumber(initial) {\n const val = useRef(initial)\n return {\n getInstance() {\n return val\n },\n getValue() {\n return val.current\n },\n setValue(next) {\n val.current = next\n },\n stop() {},\n }\n },\n\n useAnimatedNumberReaction(val, reaction) {\n // TODO use event listeners, would need access to the corresponsing node...\n },\n\n useAnimatedNumberStyle(val, getStyle) {\n return getStyle(val.getValue())\n },\n\n useAnimations: (props, { getStyle, state, hostRef }) => {\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation\n const animation = animations[animationKey as any]\n if (!animation) {\n return null\n }\n\n const keys = props.animateOnly ? props.animateOnly.join(' ') : 'all'\n\n useIsomorphicLayoutEffect(() => {\n if (!sendExitComplete || !isExiting || !hostRef.current) return\n const node = hostRef.current 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.addEventListener('transitioncancel', onFinishAnimation)\n }\n }, [sendExitComplete, isExiting])\n\n const style = {\n transition: `${keys} ${animation}`,\n ...getStyle({\n isEntering,\n isExiting,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n }),\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n // eslint-disable-next-line no-console\n console.log('CSS animation', style, { isEntering, isExiting })\n }\n\n return useMemo(() => {\n return { style }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(style)])\n },\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAA0B,OAAO,MAAM,iCAAiC;AACxE,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,YAAY,SAAS,cAAc;AAErC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IAEA,kBAAkB,SAAS;AACzB,YAAM,MAAM,OAAO,OAAO;AAC1B,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AACb,cAAI,UAAU;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,KAAK,UAAU;AAAA,IAEzC;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,OAAO,EAAE,UAAU,OAAO,QAAQ,MAAM;AACtD,YAAM,CAAC,WAAW,gBAAgB,IAAI,YAAY;AAClD,YAAM,WAAW,WAAW,eAAe;AAC3C,YAAM,YAAY,cAAc;AAChC,YAAM,aAAa,CAAC,MAAM;AAC1B,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAM,UAAU,KAAK,MAAM;AACjF,YAAM,YAAY,WAAW;AAC7B,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B,6BAAmB;AAAA,QACrB;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,YAAM,QAAQ;AAAA,QACZ,YAAY,GAAG,QAAQ;AAAA,QACvB,GAAG,SAAS;AAAA,UACV;AAAA,UACA;AAAA,UACA,aAAa,UAAU;AAAA,UACvB,cAAc,UAAU;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/jsx/index.js
DELETED