@tamagui/animations-react-native 1.0.1-beta.100 → 1.0.1-beta.103
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 +76 -10
- package/dist/cjs/createAnimations.js.map +2 -2
- package/dist/esm/createAnimations.js +79 -11
- package/dist/esm/createAnimations.js.map +2 -2
- package/dist/jsx/createAnimations.js +62 -11
- package/dist/jsx/createAnimations.js.map +2 -2
- package/package.json +4 -4
- package/src/createAnimations.tsx +85 -11
- package/types/createAnimations.d.ts +2 -1
- package/types/createAnimations.d.ts.map +1 -1
|
@@ -1,7 +1,24 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
3
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
5
22
|
var __export = (target, all) => {
|
|
6
23
|
for (var name in all)
|
|
7
24
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -21,8 +38,13 @@ __export(createAnimations_exports, {
|
|
|
21
38
|
});
|
|
22
39
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
23
40
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
41
|
+
var import_core = require("@tamagui/core");
|
|
24
42
|
var import_react = require("react");
|
|
25
43
|
var import_react_native = require("react-native");
|
|
44
|
+
const animatedStyleKey = {
|
|
45
|
+
transform: true,
|
|
46
|
+
opacity: true
|
|
47
|
+
};
|
|
26
48
|
function createAnimations(animations) {
|
|
27
49
|
const AnimatedView = import_react_native.Animated.View;
|
|
28
50
|
const AnimatedText = import_react_native.Animated.Text;
|
|
@@ -34,7 +56,7 @@ function createAnimations(animations) {
|
|
|
34
56
|
View: AnimatedView,
|
|
35
57
|
Text: AnimatedText,
|
|
36
58
|
useAnimations: (props, helpers) => {
|
|
37
|
-
var _a, _b;
|
|
59
|
+
var _a, _b, _c;
|
|
38
60
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
39
61
|
const [isPresent, sendExitComplete] = (0, import_animate_presence.usePresence)();
|
|
40
62
|
const presence = (0, import_react.useContext)(import_animate_presence.PresenceContext);
|
|
@@ -50,20 +72,58 @@ function createAnimations(animations) {
|
|
|
50
72
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
51
73
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
52
74
|
});
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
75
|
+
const animateStyles = (0, import_react.useRef)({});
|
|
76
|
+
const animatedTranforms = (0, import_react.useRef)([]);
|
|
77
|
+
const interpolations = /* @__PURE__ */ new WeakMap();
|
|
78
|
+
const runners = [];
|
|
79
|
+
function update(animated, valIn) {
|
|
80
|
+
let val = valIn;
|
|
81
|
+
let postfix = "";
|
|
82
|
+
if (typeof val === "string") {
|
|
83
|
+
const [numbers, after] = val.split(/[0-9]+/);
|
|
84
|
+
postfix = after;
|
|
85
|
+
val = +numbers;
|
|
86
|
+
}
|
|
87
|
+
if (animated) {
|
|
88
|
+
const animationConfig = typeof props.animation === "string" && animations[props.animation];
|
|
89
|
+
runners.push(() => {
|
|
90
|
+
import_react_native.Animated.spring(animated, __spreadValues({
|
|
91
|
+
toValue: val,
|
|
92
|
+
useNativeDriver: !import_core.isWeb
|
|
93
|
+
}, animationConfig)).start();
|
|
94
|
+
});
|
|
95
|
+
return animated;
|
|
96
|
+
} else {
|
|
97
|
+
const res = new import_react_native.Animated.Value(val);
|
|
98
|
+
interpolations.set(res, postfix);
|
|
99
|
+
return res;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
const nonAnimatedStyle = {};
|
|
59
103
|
for (const key of Object.keys(all)) {
|
|
104
|
+
const val = all[key];
|
|
60
105
|
if (animatedStyleKey[key]) {
|
|
61
|
-
|
|
106
|
+
if (key === "transform") {
|
|
107
|
+
if (val) {
|
|
108
|
+
for (const [index, transform] of val.entries()) {
|
|
109
|
+
if (!transform)
|
|
110
|
+
continue;
|
|
111
|
+
const tkey = Object.keys(transform)[0];
|
|
112
|
+
animatedTranforms.current[index] = {
|
|
113
|
+
[tkey]: update((_c = animatedTranforms.current[index]) == null ? void 0 : _c[tkey], transform[tkey])
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
} else {
|
|
118
|
+
animateStyles.current[key] = update(animateStyles.current[key], val);
|
|
119
|
+
}
|
|
62
120
|
} else {
|
|
63
|
-
nonAnimatedStyle[key] =
|
|
121
|
+
nonAnimatedStyle[key] = val;
|
|
64
122
|
}
|
|
65
123
|
}
|
|
66
|
-
const animatedStyle = {}
|
|
124
|
+
const animatedStyle = __spreadProps(__spreadValues({}, animateStyles.current), {
|
|
125
|
+
transform: animatedTranforms.current
|
|
126
|
+
});
|
|
67
127
|
const args = [
|
|
68
128
|
JSON.stringify(all),
|
|
69
129
|
state.mounted,
|
|
@@ -78,6 +138,12 @@ function createAnimations(animations) {
|
|
|
78
138
|
presence == null ? void 0 : presence.exitVariant,
|
|
79
139
|
presence == null ? void 0 : presence.enterVariant
|
|
80
140
|
];
|
|
141
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
142
|
+
for (const runner of runners) {
|
|
143
|
+
console.log("gogo");
|
|
144
|
+
runner();
|
|
145
|
+
}
|
|
146
|
+
}, args);
|
|
81
147
|
return (0, import_react.useMemo)(() => {
|
|
82
148
|
return {
|
|
83
149
|
style: [nonAnimatedStyle, animatedStyle]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n// | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n// | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n// | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = new WeakMap<Animated.Value, string>()\n\n // TODO loop and create values, run them if they change\n\n const runners: Function[] = []\n\n function update(animated: Animated.Value | undefined, valIn: any) {\n let val = valIn\n let postfix = ''\n if (typeof val === 'string') {\n const [numbers, after] = val.split(/[0-9]+/)\n postfix = after\n val = +numbers\n }\n if (animated) {\n const animationConfig = typeof props.animation === 'string' && animations[props.animation]\n runners.push(() => {\n // console.log('animate to', val, animationConfig)\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start()\n })\n return animated\n } else {\n const res = new Animated.Value(val)\n // console.log('set up', res, (val) =>\n // Animated.spring(res, { toValue: val, useNativeDriver: false }).start()\n // )\n interpolations.set(res, postfix)\n return res\n }\n }\n\n const nonAnimatedStyle = {}\n for (const key of Object.keys(all)) {\n const val = all[key]\n if (animatedStyleKey[key]) {\n if (key === 'transform') {\n // for now just support one transform key\n if (val) {\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n // console.log('tkey', tkey)\n animatedTranforms.current[index] = {\n [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(animateStyles.current[key], val)\n }\n } else {\n nonAnimatedStyle[key] = val\n }\n }\n\n const animatedStyle = {\n ...animateStyles.current,\n transform: animatedTranforms.current,\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n onDidAnimateCb,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useLayoutEffect(() => {\n //\n for (const runner of runners) {\n console.log('gogo')\n runner()\n }\n }, args)\n\n // const callback = (\n // isExiting: boolean,\n // exitingStyleProps: Record<string, boolean>,\n // key: string,\n // value: any\n // ) => {\n // return (completed, current) => {\n // onDidAnimateCb(key, completed, current, {\n // attemptedValue: value,\n // })\n // if (isExiting) {\n // exitingStyleProps[key] = false\n // const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // // if this is true, then we've finished our exit animations\n // if (!areStylesExiting) {\n // sendExitComplete?.()\n // }\n // }\n // }\n // }\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,30 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1
20
|
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
2
|
-
import {
|
|
21
|
+
import { isWeb } from "@tamagui/core";
|
|
22
|
+
import { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
|
|
3
23
|
import { Animated } from "react-native";
|
|
24
|
+
const animatedStyleKey = {
|
|
25
|
+
transform: true,
|
|
26
|
+
opacity: true
|
|
27
|
+
};
|
|
4
28
|
function createAnimations(animations) {
|
|
5
29
|
const AnimatedView = Animated.View;
|
|
6
30
|
const AnimatedText = Animated.Text;
|
|
@@ -12,7 +36,7 @@ function createAnimations(animations) {
|
|
|
12
36
|
View: AnimatedView,
|
|
13
37
|
Text: AnimatedText,
|
|
14
38
|
useAnimations: (props, helpers) => {
|
|
15
|
-
var _a, _b;
|
|
39
|
+
var _a, _b, _c;
|
|
16
40
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
17
41
|
const [isPresent, sendExitComplete] = usePresence();
|
|
18
42
|
const presence = useContext(PresenceContext);
|
|
@@ -28,20 +52,58 @@ function createAnimations(animations) {
|
|
|
28
52
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
29
53
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
30
54
|
});
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
55
|
+
const animateStyles = useRef({});
|
|
56
|
+
const animatedTranforms = useRef([]);
|
|
57
|
+
const interpolations = /* @__PURE__ */ new WeakMap();
|
|
58
|
+
const runners = [];
|
|
59
|
+
function update(animated, valIn) {
|
|
60
|
+
let val = valIn;
|
|
61
|
+
let postfix = "";
|
|
62
|
+
if (typeof val === "string") {
|
|
63
|
+
const [numbers, after] = val.split(/[0-9]+/);
|
|
64
|
+
postfix = after;
|
|
65
|
+
val = +numbers;
|
|
66
|
+
}
|
|
67
|
+
if (animated) {
|
|
68
|
+
const animationConfig = typeof props.animation === "string" && animations[props.animation];
|
|
69
|
+
runners.push(() => {
|
|
70
|
+
Animated.spring(animated, __spreadValues({
|
|
71
|
+
toValue: val,
|
|
72
|
+
useNativeDriver: !isWeb
|
|
73
|
+
}, animationConfig)).start();
|
|
74
|
+
});
|
|
75
|
+
return animated;
|
|
76
|
+
} else {
|
|
77
|
+
const res = new Animated.Value(val);
|
|
78
|
+
interpolations.set(res, postfix);
|
|
79
|
+
return res;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
const nonAnimatedStyle = {};
|
|
37
83
|
for (const key of Object.keys(all)) {
|
|
84
|
+
const val = all[key];
|
|
38
85
|
if (animatedStyleKey[key]) {
|
|
39
|
-
|
|
86
|
+
if (key === "transform") {
|
|
87
|
+
if (val) {
|
|
88
|
+
for (const [index, transform] of val.entries()) {
|
|
89
|
+
if (!transform)
|
|
90
|
+
continue;
|
|
91
|
+
const tkey = Object.keys(transform)[0];
|
|
92
|
+
animatedTranforms.current[index] = {
|
|
93
|
+
[tkey]: update((_c = animatedTranforms.current[index]) == null ? void 0 : _c[tkey], transform[tkey])
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
} else {
|
|
98
|
+
animateStyles.current[key] = update(animateStyles.current[key], val);
|
|
99
|
+
}
|
|
40
100
|
} else {
|
|
41
|
-
nonAnimatedStyle[key] =
|
|
101
|
+
nonAnimatedStyle[key] = val;
|
|
42
102
|
}
|
|
43
103
|
}
|
|
44
|
-
const animatedStyle = {}
|
|
104
|
+
const animatedStyle = __spreadProps(__spreadValues({}, animateStyles.current), {
|
|
105
|
+
transform: animatedTranforms.current
|
|
106
|
+
});
|
|
45
107
|
const args = [
|
|
46
108
|
JSON.stringify(all),
|
|
47
109
|
state.mounted,
|
|
@@ -56,6 +118,12 @@ function createAnimations(animations) {
|
|
|
56
118
|
presence == null ? void 0 : presence.exitVariant,
|
|
57
119
|
presence == null ? void 0 : presence.enterVariant
|
|
58
120
|
];
|
|
121
|
+
useLayoutEffect(() => {
|
|
122
|
+
for (const runner of runners) {
|
|
123
|
+
console.log("gogo");
|
|
124
|
+
runner();
|
|
125
|
+
}
|
|
126
|
+
}, args);
|
|
59
127
|
return useMemo(() => {
|
|
60
128
|
return {
|
|
61
129
|
style: [nonAnimatedStyle, animatedStyle]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n// | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n// | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n// | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = new WeakMap<Animated.Value, string>()\n\n // TODO loop and create values, run them if they change\n\n const runners: Function[] = []\n\n function update(animated: Animated.Value | undefined, valIn: any) {\n let val = valIn\n let postfix = ''\n if (typeof val === 'string') {\n const [numbers, after] = val.split(/[0-9]+/)\n postfix = after\n val = +numbers\n }\n if (animated) {\n const animationConfig = typeof props.animation === 'string' && animations[props.animation]\n runners.push(() => {\n // console.log('animate to', val, animationConfig)\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start()\n })\n return animated\n } else {\n const res = new Animated.Value(val)\n // console.log('set up', res, (val) =>\n // Animated.spring(res, { toValue: val, useNativeDriver: false }).start()\n // )\n interpolations.set(res, postfix)\n return res\n }\n }\n\n const nonAnimatedStyle = {}\n for (const key of Object.keys(all)) {\n const val = all[key]\n if (animatedStyleKey[key]) {\n if (key === 'transform') {\n // for now just support one transform key\n if (val) {\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n // console.log('tkey', tkey)\n animatedTranforms.current[index] = {\n [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(animateStyles.current[key], val)\n }\n } else {\n nonAnimatedStyle[key] = val\n }\n }\n\n const animatedStyle = {\n ...animateStyles.current,\n transform: animatedTranforms.current,\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n onDidAnimateCb,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useLayoutEffect(() => {\n //\n for (const runner of runners) {\n console.log('gogo')\n runner()\n }\n }, args)\n\n // const callback = (\n // isExiting: boolean,\n // exitingStyleProps: Record<string, boolean>,\n // key: string,\n // value: any\n // ) => {\n // return (completed, current) => {\n // onDidAnimateCb(key, completed, current, {\n // attemptedValue: value,\n // })\n // if (isExiting) {\n // exitingStyleProps[key] = false\n // const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // // if this is true, then we've finished our exit animations\n // if (!areStylesExiting) {\n // sendExitComplete?.()\n // }\n // }\n // }\n // }\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { PresenceContext, usePresence } from "@tamagui/animate-presence";
|
|
2
|
-
import {
|
|
2
|
+
import { isWeb } from "@tamagui/core";
|
|
3
|
+
import { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
|
|
3
4
|
import { Animated } from "react-native";
|
|
5
|
+
const animatedStyleKey = {
|
|
6
|
+
transform: true,
|
|
7
|
+
opacity: true
|
|
8
|
+
};
|
|
4
9
|
function createAnimations(animations) {
|
|
5
10
|
const AnimatedView = Animated.View;
|
|
6
11
|
const AnimatedText = Animated.Text;
|
|
@@ -12,7 +17,7 @@ function createAnimations(animations) {
|
|
|
12
17
|
View: AnimatedView,
|
|
13
18
|
Text: AnimatedText,
|
|
14
19
|
useAnimations: (props, helpers) => {
|
|
15
|
-
var _a, _b;
|
|
20
|
+
var _a, _b, _c;
|
|
16
21
|
const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers;
|
|
17
22
|
const [isPresent, sendExitComplete] = usePresence();
|
|
18
23
|
const presence = useContext(PresenceContext);
|
|
@@ -28,20 +33,60 @@ function createAnimations(animations) {
|
|
|
28
33
|
exitVariant: presence == null ? void 0 : presence.exitVariant,
|
|
29
34
|
enterVariant: presence == null ? void 0 : presence.enterVariant
|
|
30
35
|
});
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
const animateStyles = useRef({});
|
|
37
|
+
const animatedTranforms = useRef([]);
|
|
38
|
+
const interpolations = /* @__PURE__ */ new WeakMap();
|
|
39
|
+
const runners = [];
|
|
40
|
+
function update(animated, valIn) {
|
|
41
|
+
let val = valIn;
|
|
42
|
+
let postfix = "";
|
|
43
|
+
if (typeof val === "string") {
|
|
44
|
+
const [numbers, after] = val.split(/[0-9]+/);
|
|
45
|
+
postfix = after;
|
|
46
|
+
val = +numbers;
|
|
47
|
+
}
|
|
48
|
+
if (animated) {
|
|
49
|
+
const animationConfig = typeof props.animation === "string" && animations[props.animation];
|
|
50
|
+
runners.push(() => {
|
|
51
|
+
Animated.spring(animated, {
|
|
52
|
+
toValue: val,
|
|
53
|
+
useNativeDriver: !isWeb,
|
|
54
|
+
...animationConfig
|
|
55
|
+
}).start();
|
|
56
|
+
});
|
|
57
|
+
return animated;
|
|
58
|
+
} else {
|
|
59
|
+
const res = new Animated.Value(val);
|
|
60
|
+
interpolations.set(res, postfix);
|
|
61
|
+
return res;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
const nonAnimatedStyle = {};
|
|
37
65
|
for (const key of Object.keys(all)) {
|
|
66
|
+
const val = all[key];
|
|
38
67
|
if (animatedStyleKey[key]) {
|
|
39
|
-
|
|
68
|
+
if (key === "transform") {
|
|
69
|
+
if (val) {
|
|
70
|
+
for (const [index, transform] of val.entries()) {
|
|
71
|
+
if (!transform)
|
|
72
|
+
continue;
|
|
73
|
+
const tkey = Object.keys(transform)[0];
|
|
74
|
+
animatedTranforms.current[index] = {
|
|
75
|
+
[tkey]: update((_c = animatedTranforms.current[index]) == null ? void 0 : _c[tkey], transform[tkey])
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
} else {
|
|
80
|
+
animateStyles.current[key] = update(animateStyles.current[key], val);
|
|
81
|
+
}
|
|
40
82
|
} else {
|
|
41
|
-
nonAnimatedStyle[key] =
|
|
83
|
+
nonAnimatedStyle[key] = val;
|
|
42
84
|
}
|
|
43
85
|
}
|
|
44
|
-
const animatedStyle = {
|
|
86
|
+
const animatedStyle = {
|
|
87
|
+
...animateStyles.current,
|
|
88
|
+
transform: animatedTranforms.current
|
|
89
|
+
};
|
|
45
90
|
const args = [
|
|
46
91
|
JSON.stringify(all),
|
|
47
92
|
state.mounted,
|
|
@@ -56,6 +101,12 @@ function createAnimations(animations) {
|
|
|
56
101
|
presence == null ? void 0 : presence.exitVariant,
|
|
57
102
|
presence == null ? void 0 : presence.enterVariant
|
|
58
103
|
];
|
|
104
|
+
useLayoutEffect(() => {
|
|
105
|
+
for (const runner of runners) {
|
|
106
|
+
console.log("gogo");
|
|
107
|
+
runner();
|
|
108
|
+
}
|
|
109
|
+
}, args);
|
|
59
110
|
return useMemo(() => {
|
|
60
111
|
return {
|
|
61
112
|
style: [nonAnimatedStyle, animatedStyle]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createAnimations.tsx"],
|
|
4
|
-
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp } from '@tamagui/core'\nimport { useCallback, useContext, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig =
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import { PresenceContext, usePresence } from '@tamagui/animate-presence'\nimport { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'\nimport { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\n\ntype AnimationsConfig<A extends Object = any> = {\n [Key in keyof A]: AnimationConfig\n}\n\ntype AnimationConfig = Partial<\n Pick<\n Animated.SpringAnimationConfig,\n | 'delay'\n | 'bounciness'\n | 'damping'\n | 'friction'\n | 'mass'\n | 'overshootClamping'\n | 'speed'\n | 'stiffness'\n | 'tension'\n | 'velocity'\n >\n>\n// | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)\n// | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)\n// | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)\n\nconst animatedStyleKey = {\n transform: true,\n opacity: true,\n}\n\nexport function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {\n const AnimatedView = Animated.View\n const AnimatedText = Animated.Text\n\n AnimatedView['displayName'] = 'AnimatedView'\n AnimatedText['displayName'] = 'AnimatedText'\n\n return {\n avoidClasses: true,\n animations,\n View: AnimatedView,\n Text: AnimatedText,\n useAnimations: (props, helpers) => {\n const { pseudos, onDidAnimate, delay, getStyle, state, staticConfig } = helpers\n const [isPresent, sendExitComplete] = usePresence()\n const presence = useContext(PresenceContext)\n\n const exitStyle = presence?.exitVariant\n ? staticConfig.variantsParsed?.[presence.exitVariant]?.true || pseudos.exitStyle\n : pseudos.exitStyle\n\n const onDidAnimateCb = useCallback<NonNullable<typeof onDidAnimate>>(\n (...args) => {\n onDidAnimate?.(...args)\n },\n [onDidAnimate]\n )\n\n const isExiting = isPresent === false\n const isEntering = !state.mounted\n\n const all = getStyle({\n isExiting,\n isEntering,\n exitVariant: presence?.exitVariant,\n enterVariant: presence?.enterVariant,\n })\n\n const animateStyles = useRef<Record<string, Animated.Value>>({})\n const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])\n const interpolations = new WeakMap<Animated.Value, string>()\n\n // TODO loop and create values, run them if they change\n\n const runners: Function[] = []\n\n function update(animated: Animated.Value | undefined, valIn: any) {\n let val = valIn\n let postfix = ''\n if (typeof val === 'string') {\n const [numbers, after] = val.split(/[0-9]+/)\n postfix = after\n val = +numbers\n }\n if (animated) {\n const animationConfig = typeof props.animation === 'string' && animations[props.animation]\n runners.push(() => {\n // console.log('animate to', val, animationConfig)\n Animated.spring(animated, {\n toValue: val,\n useNativeDriver: !isWeb,\n ...animationConfig,\n }).start()\n })\n return animated\n } else {\n const res = new Animated.Value(val)\n // console.log('set up', res, (val) =>\n // Animated.spring(res, { toValue: val, useNativeDriver: false }).start()\n // )\n interpolations.set(res, postfix)\n return res\n }\n }\n\n const nonAnimatedStyle = {}\n for (const key of Object.keys(all)) {\n const val = all[key]\n if (animatedStyleKey[key]) {\n if (key === 'transform') {\n // for now just support one transform key\n if (val) {\n for (const [index, transform] of val.entries()) {\n if (!transform) continue\n const tkey = Object.keys(transform)[0]\n // console.log('tkey', tkey)\n animatedTranforms.current[index] = {\n [tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),\n }\n }\n }\n } else {\n animateStyles.current[key] = update(animateStyles.current[key], val)\n }\n } else {\n nonAnimatedStyle[key] = val\n }\n }\n\n const animatedStyle = {\n ...animateStyles.current,\n transform: animatedTranforms.current,\n }\n\n const args = [\n JSON.stringify(all),\n state.mounted,\n state.hover,\n state.press,\n state.pressIn,\n state.focus,\n delay,\n isPresent,\n onDidAnimate,\n onDidAnimateCb,\n presence?.exitVariant,\n presence?.enterVariant,\n ]\n\n useLayoutEffect(() => {\n //\n for (const runner of runners) {\n console.log('gogo')\n runner()\n }\n }, args)\n\n // const callback = (\n // isExiting: boolean,\n // exitingStyleProps: Record<string, boolean>,\n // key: string,\n // value: any\n // ) => {\n // return (completed, current) => {\n // onDidAnimateCb(key, completed, current, {\n // attemptedValue: value,\n // })\n // if (isExiting) {\n // exitingStyleProps[key] = false\n // const areStylesExiting = Object.values(exitingStyleProps).some(Boolean)\n // // if this is true, then we've finished our exit animations\n // if (!areStylesExiting) {\n // sendExitComplete?.()\n // }\n // }\n // }\n // }\n\n return useMemo(() => {\n return {\n style: [nonAnimatedStyle, animatedStyle],\n }\n }, args)\n },\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/animations-react-native",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.103",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"sideEffects": true,
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"dist"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
18
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
17
|
+
"@tamagui/animate-presence": "^1.0.1-beta.103",
|
|
18
|
+
"@tamagui/core": "^1.0.1-beta.103"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
21
|
+
"@tamagui/build": "^1.0.1-beta.103",
|
|
22
22
|
"react": "*",
|
|
23
23
|
"react-dom": "*",
|
|
24
24
|
"react-native": "*"
|
package/src/createAnimations.tsx
CHANGED
|
@@ -1,17 +1,36 @@
|
|
|
1
1
|
import { PresenceContext, usePresence } from '@tamagui/animate-presence'
|
|
2
|
-
import { AnimationDriver, AnimationProp } from '@tamagui/core'
|
|
3
|
-
import { useCallback, useContext, useMemo, useRef, useState } from 'react'
|
|
2
|
+
import { AnimationDriver, AnimationProp, isWeb } from '@tamagui/core'
|
|
3
|
+
import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
|
4
4
|
import { Animated } from 'react-native'
|
|
5
5
|
|
|
6
6
|
type AnimationsConfig<A extends Object = any> = {
|
|
7
7
|
[Key in keyof A]: AnimationConfig
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
type AnimationConfig =
|
|
10
|
+
type AnimationConfig = Partial<
|
|
11
|
+
Pick<
|
|
12
|
+
Animated.SpringAnimationConfig,
|
|
13
|
+
| 'delay'
|
|
14
|
+
| 'bounciness'
|
|
15
|
+
| 'damping'
|
|
16
|
+
| 'friction'
|
|
17
|
+
| 'mass'
|
|
18
|
+
| 'overshootClamping'
|
|
19
|
+
| 'speed'
|
|
20
|
+
| 'stiffness'
|
|
21
|
+
| 'tension'
|
|
22
|
+
| 'velocity'
|
|
23
|
+
>
|
|
24
|
+
>
|
|
11
25
|
// | ({ type: 'timing'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithTimingConfig)
|
|
12
26
|
// | ({ type: 'spring'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithSpringConfig)
|
|
13
27
|
// | ({ type: 'decay'; loop?: number; repeat?: number; repeatReverse?: boolean } & WithDecayConfig)
|
|
14
28
|
|
|
29
|
+
const animatedStyleKey = {
|
|
30
|
+
transform: true,
|
|
31
|
+
opacity: true,
|
|
32
|
+
}
|
|
33
|
+
|
|
15
34
|
export function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A> {
|
|
16
35
|
const AnimatedView = Animated.View
|
|
17
36
|
const AnimatedText = Animated.Text
|
|
@@ -50,24 +69,71 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
50
69
|
enterVariant: presence?.enterVariant,
|
|
51
70
|
})
|
|
52
71
|
|
|
53
|
-
const
|
|
72
|
+
const animateStyles = useRef<Record<string, Animated.Value>>({})
|
|
73
|
+
const animatedTranforms = useRef<{ [key: string]: Animated.Value }[]>([])
|
|
74
|
+
const interpolations = new WeakMap<Animated.Value, string>()
|
|
54
75
|
|
|
55
76
|
// TODO loop and create values, run them if they change
|
|
56
77
|
|
|
57
|
-
const [
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
78
|
+
const runners: Function[] = []
|
|
79
|
+
|
|
80
|
+
function update(animated: Animated.Value | undefined, valIn: any) {
|
|
81
|
+
let val = valIn
|
|
82
|
+
let postfix = ''
|
|
83
|
+
if (typeof val === 'string') {
|
|
84
|
+
const [numbers, after] = val.split(/[0-9]+/)
|
|
85
|
+
postfix = after
|
|
86
|
+
val = +numbers
|
|
87
|
+
}
|
|
88
|
+
if (animated) {
|
|
89
|
+
const animationConfig = typeof props.animation === 'string' && animations[props.animation]
|
|
90
|
+
runners.push(() => {
|
|
91
|
+
// console.log('animate to', val, animationConfig)
|
|
92
|
+
Animated.spring(animated, {
|
|
93
|
+
toValue: val,
|
|
94
|
+
useNativeDriver: !isWeb,
|
|
95
|
+
...animationConfig,
|
|
96
|
+
}).start()
|
|
97
|
+
})
|
|
98
|
+
return animated
|
|
99
|
+
} else {
|
|
100
|
+
const res = new Animated.Value(val)
|
|
101
|
+
// console.log('set up', res, (val) =>
|
|
102
|
+
// Animated.spring(res, { toValue: val, useNativeDriver: false }).start()
|
|
103
|
+
// )
|
|
104
|
+
interpolations.set(res, postfix)
|
|
105
|
+
return res
|
|
106
|
+
}
|
|
61
107
|
}
|
|
108
|
+
|
|
109
|
+
const nonAnimatedStyle = {}
|
|
62
110
|
for (const key of Object.keys(all)) {
|
|
111
|
+
const val = all[key]
|
|
63
112
|
if (animatedStyleKey[key]) {
|
|
64
|
-
|
|
113
|
+
if (key === 'transform') {
|
|
114
|
+
// for now just support one transform key
|
|
115
|
+
if (val) {
|
|
116
|
+
for (const [index, transform] of val.entries()) {
|
|
117
|
+
if (!transform) continue
|
|
118
|
+
const tkey = Object.keys(transform)[0]
|
|
119
|
+
// console.log('tkey', tkey)
|
|
120
|
+
animatedTranforms.current[index] = {
|
|
121
|
+
[tkey]: update(animatedTranforms.current[index]?.[tkey], transform[tkey]),
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
} else {
|
|
126
|
+
animateStyles.current[key] = update(animateStyles.current[key], val)
|
|
127
|
+
}
|
|
65
128
|
} else {
|
|
66
|
-
nonAnimatedStyle[key] =
|
|
129
|
+
nonAnimatedStyle[key] = val
|
|
67
130
|
}
|
|
68
131
|
}
|
|
69
132
|
|
|
70
|
-
const animatedStyle = {
|
|
133
|
+
const animatedStyle = {
|
|
134
|
+
...animateStyles.current,
|
|
135
|
+
transform: animatedTranforms.current,
|
|
136
|
+
}
|
|
71
137
|
|
|
72
138
|
const args = [
|
|
73
139
|
JSON.stringify(all),
|
|
@@ -84,6 +150,14 @@ export function createAnimations<A extends AnimationsConfig>(animations: A): Ani
|
|
|
84
150
|
presence?.enterVariant,
|
|
85
151
|
]
|
|
86
152
|
|
|
153
|
+
useLayoutEffect(() => {
|
|
154
|
+
//
|
|
155
|
+
for (const runner of runners) {
|
|
156
|
+
console.log('gogo')
|
|
157
|
+
runner()
|
|
158
|
+
}
|
|
159
|
+
}, args)
|
|
160
|
+
|
|
87
161
|
// const callback = (
|
|
88
162
|
// isExiting: boolean,
|
|
89
163
|
// exitingStyleProps: Record<string, boolean>,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { AnimationDriver } from '@tamagui/core';
|
|
2
|
+
import { Animated } from 'react-native';
|
|
2
3
|
declare type AnimationsConfig<A extends Object = any> = {
|
|
3
4
|
[Key in keyof A]: AnimationConfig;
|
|
4
5
|
};
|
|
5
|
-
declare type AnimationConfig =
|
|
6
|
+
declare type AnimationConfig = Partial<Pick<Animated.SpringAnimationConfig, 'delay' | 'bounciness' | 'damping' | 'friction' | 'mass' | 'overshootClamping' | 'speed' | 'stiffness' | 'tension' | 'velocity'>>;
|
|
6
7
|
export declare function createAnimations<A extends AnimationsConfig>(animations: A): AnimationDriver<A>;
|
|
7
8
|
export {};
|
|
8
9
|
//# sourceMappingURL=createAnimations.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI;KAC7C,GAAG,IAAI,MAAM,CAAC,GAAG,eAAe;CAClC,CAAA;AAED,aAAK,eAAe,GAAG,OAAO,CAC5B,IAAI,CACF,QAAQ,CAAC,qBAAqB,EAC5B,OAAO,GACP,YAAY,GACZ,SAAS,GACT,UAAU,GACV,MAAM,GACN,mBAAmB,GACnB,OAAO,GACP,WAAW,GACX,SAAS,GACT,UAAU,CACb,CACF,CAAA;AAUD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA2J9F"}
|