@hanzogui/animations-reanimated 3.0.5 → 4.3.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 +484 -334
- package/dist/cjs/createAnimations.native.js +568 -409
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/cjs/index.cjs +7 -5
- package/dist/cjs/index.native.js +7 -5
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/createAnimations.mjs +456 -308
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +540 -383
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/package.json +5 -5
- package/src/createAnimations.tsx +172 -124
- package/types/createAnimations.d.ts.map +2 -2
|
@@ -4,223 +4,255 @@ var __create = Object.create;
|
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
5
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf
|
|
8
|
-
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
9
|
var __export = (target, all) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
for (var name in all) __defProp(target, name, {
|
|
11
|
+
get: all[name],
|
|
12
|
+
enumerable: true
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
17
18
|
get: () => from[key],
|
|
18
19
|
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
20
|
});
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
22
24
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
30
|
+
value: mod,
|
|
31
|
+
enumerable: true
|
|
32
|
+
}) : target, mod));
|
|
33
|
+
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
34
|
+
value: true
|
|
35
|
+
}), mod);
|
|
34
36
|
var createAnimations_exports = {};
|
|
35
37
|
__export(createAnimations_exports, {
|
|
36
38
|
createAnimations: () => createAnimations
|
|
37
39
|
});
|
|
38
40
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
39
|
-
var import_jsx_runtime = require("react/jsx-runtime")
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var import_animation_helpers = require("@hanzogui/animation-helpers");
|
|
43
|
+
var import_core = require("@hanzogui/core");
|
|
44
|
+
var import_use_presence = require("@hanzogui/use-presence");
|
|
45
|
+
var import_react = __toESM(require("react"), 1);
|
|
46
|
+
var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
|
|
45
47
|
function _type_of(obj) {
|
|
46
48
|
"@swc/helpers - typeof";
|
|
47
49
|
|
|
48
|
-
return obj && typeof Symbol
|
|
50
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
49
51
|
}
|
|
50
52
|
var getDefaultExport = function (module2) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
53
|
+
var mod = module2;
|
|
54
|
+
if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
|
|
55
|
+
return mod.default || mod;
|
|
56
|
+
}
|
|
57
|
+
return mod;
|
|
58
|
+
};
|
|
59
|
+
var Animated = getDefaultExport(import_react_native_reanimated.default);
|
|
60
|
+
var resolveDynamicValue = function (value, isDark) {
|
|
61
|
+
if (value !== null && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value && _type_of(value.dynamic) === "object") {
|
|
62
|
+
var dynamic = value.dynamic;
|
|
63
|
+
return isDark ? dynamic.dark : dynamic.light;
|
|
64
|
+
}
|
|
65
|
+
return value;
|
|
66
|
+
};
|
|
67
|
+
var applyAnimation = function (targetValue, config, callback) {
|
|
68
|
+
"worklet";
|
|
64
69
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
70
|
+
var delay = config.delay;
|
|
71
|
+
var animatedValue;
|
|
72
|
+
if (config.type === "timing") {
|
|
73
|
+
animatedValue = (0, import_react_native_reanimated.withTiming)(targetValue, config, callback);
|
|
74
|
+
} else {
|
|
75
|
+
animatedValue = (0, import_react_native_reanimated.withSpring)(targetValue, config, callback);
|
|
76
|
+
}
|
|
77
|
+
if (delay && delay > 0) {
|
|
78
|
+
animatedValue = (0, import_react_native_reanimated.withDelay)(delay, animatedValue);
|
|
79
|
+
}
|
|
80
|
+
return animatedValue;
|
|
81
|
+
};
|
|
82
|
+
var ANIMATABLE_PROPERTIES = {
|
|
83
|
+
// Transform
|
|
84
|
+
transform: true,
|
|
85
|
+
// Opacity
|
|
86
|
+
opacity: true,
|
|
87
|
+
// Dimensions
|
|
88
|
+
height: true,
|
|
89
|
+
width: true,
|
|
90
|
+
minWidth: true,
|
|
91
|
+
minHeight: true,
|
|
92
|
+
maxWidth: true,
|
|
93
|
+
maxHeight: true,
|
|
94
|
+
// Background
|
|
95
|
+
backgroundColor: true,
|
|
96
|
+
// Border colors
|
|
97
|
+
borderColor: true,
|
|
98
|
+
borderLeftColor: true,
|
|
99
|
+
borderRightColor: true,
|
|
100
|
+
borderTopColor: true,
|
|
101
|
+
borderBottomColor: true,
|
|
102
|
+
// Border radius
|
|
103
|
+
borderRadius: true,
|
|
104
|
+
borderTopLeftRadius: true,
|
|
105
|
+
borderTopRightRadius: true,
|
|
106
|
+
borderBottomLeftRadius: true,
|
|
107
|
+
borderBottomRightRadius: true,
|
|
108
|
+
// Border width
|
|
109
|
+
borderWidth: true,
|
|
110
|
+
borderLeftWidth: true,
|
|
111
|
+
borderRightWidth: true,
|
|
112
|
+
borderTopWidth: true,
|
|
113
|
+
borderBottomWidth: true,
|
|
114
|
+
// Text
|
|
115
|
+
color: true,
|
|
116
|
+
fontSize: true,
|
|
117
|
+
fontWeight: true,
|
|
118
|
+
lineHeight: true,
|
|
119
|
+
letterSpacing: true,
|
|
120
|
+
// Position
|
|
121
|
+
left: true,
|
|
122
|
+
right: true,
|
|
123
|
+
top: true,
|
|
124
|
+
bottom: true,
|
|
125
|
+
// Margin
|
|
126
|
+
margin: true,
|
|
127
|
+
marginTop: true,
|
|
128
|
+
marginBottom: true,
|
|
129
|
+
marginLeft: true,
|
|
130
|
+
marginRight: true,
|
|
131
|
+
marginHorizontal: true,
|
|
132
|
+
marginVertical: true,
|
|
133
|
+
// Padding
|
|
134
|
+
padding: true,
|
|
135
|
+
paddingTop: true,
|
|
136
|
+
paddingBottom: true,
|
|
137
|
+
paddingLeft: true,
|
|
138
|
+
paddingRight: true,
|
|
139
|
+
paddingHorizontal: true,
|
|
140
|
+
paddingVertical: true,
|
|
141
|
+
// Flex/Gap
|
|
142
|
+
gap: true,
|
|
143
|
+
rowGap: true,
|
|
144
|
+
columnGap: true,
|
|
145
|
+
flex: true,
|
|
146
|
+
flexGrow: true,
|
|
147
|
+
flexShrink: true
|
|
148
|
+
};
|
|
149
|
+
var canAnimateProperty = function (key, value, animateOnly) {
|
|
150
|
+
if (!ANIMATABLE_PROPERTIES[key]) return false;
|
|
151
|
+
if (value === "auto") return false;
|
|
152
|
+
if (typeof value === "string" && value.startsWith("calc")) return false;
|
|
153
|
+
if (animateOnly && !animateOnly.includes(key)) return false;
|
|
154
|
+
return true;
|
|
155
|
+
};
|
|
139
156
|
function createWebAnimatedComponent(defaultTag) {
|
|
140
|
-
var isText = defaultTag === "span"
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
return Component
|
|
157
|
+
var isText = defaultTag === "span";
|
|
158
|
+
var Component = Animated.createAnimatedComponent(/* @__PURE__ */(0, import_react.forwardRef)(function (propsIn, ref) {
|
|
159
|
+
var _hooks_usePropsTransform;
|
|
160
|
+
var {
|
|
161
|
+
forwardedRef,
|
|
162
|
+
render = defaultTag,
|
|
163
|
+
...rest
|
|
164
|
+
} = propsIn;
|
|
165
|
+
var hostRef = (0, import_react.useRef)(null);
|
|
166
|
+
var composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef);
|
|
167
|
+
var stateRef = (0, import_react.useRef)({
|
|
168
|
+
get host() {
|
|
169
|
+
return hostRef.current;
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
var [, themeState] = (0, import_core.useThemeWithState)({});
|
|
173
|
+
var _themeState_theme, _themeState_name;
|
|
174
|
+
var result = (0, import_core.getSplitStyles)(rest, isText ? import_core.Text.staticConfig : import_core.View.staticConfig, (_themeState_theme = themeState === null || themeState === void 0 ? void 0 : themeState.theme) !== null && _themeState_theme !== void 0 ? _themeState_theme : {}, (_themeState_name = themeState === null || themeState === void 0 ? void 0 : themeState.name) !== null && _themeState_name !== void 0 ? _themeState_name : "", {
|
|
175
|
+
unmounted: false
|
|
176
|
+
}, {
|
|
177
|
+
isAnimated: false,
|
|
178
|
+
noClass: true
|
|
179
|
+
});
|
|
180
|
+
var _result_viewProps;
|
|
181
|
+
var viewProps = (_result_viewProps = result === null || result === void 0 ? void 0 : result.viewProps) !== null && _result_viewProps !== void 0 ? _result_viewProps : {};
|
|
182
|
+
var Element = render;
|
|
183
|
+
var transformedProps = (_hooks_usePropsTransform = import_core.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_core.hooks, render, viewProps, stateRef, false);
|
|
184
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
|
|
185
|
+
...transformedProps,
|
|
186
|
+
ref: composedRefs
|
|
187
|
+
});
|
|
188
|
+
}));
|
|
189
|
+
Component.acceptRenderProp = true;
|
|
190
|
+
return Component;
|
|
174
191
|
}
|
|
175
|
-
var AnimatedView = createWebAnimatedComponent("div")
|
|
176
|
-
|
|
192
|
+
var AnimatedView = createWebAnimatedComponent("div");
|
|
193
|
+
var AnimatedText = createWebAnimatedComponent("span");
|
|
177
194
|
function buildTransitionConfig(transition, animations, animationState, styleKeys) {
|
|
178
|
-
var normalized = (0, import_animation_helpers.normalizeTransition)(transition)
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
195
|
+
var normalized = (0, import_animation_helpers.normalizeTransition)(transition);
|
|
196
|
+
var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
197
|
+
var _animations_effectiveKey;
|
|
198
|
+
var base = effectiveKey ? (_animations_effectiveKey = animations[effectiveKey]) !== null && _animations_effectiveKey !== void 0 ? _animations_effectiveKey : {
|
|
199
|
+
type: "spring"
|
|
200
|
+
} : {
|
|
201
|
+
type: "spring"
|
|
202
|
+
};
|
|
203
|
+
if (normalized.delay) {
|
|
204
|
+
base = {
|
|
205
|
+
...base,
|
|
206
|
+
delay: normalized.delay
|
|
185
207
|
};
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
208
|
+
}
|
|
209
|
+
if (normalized.config) {
|
|
210
|
+
base = {
|
|
211
|
+
...base,
|
|
212
|
+
...normalized.config
|
|
213
|
+
};
|
|
214
|
+
if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
|
|
215
|
+
base = {
|
|
216
|
+
...base,
|
|
217
|
+
type: "timing"
|
|
218
|
+
};
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
var propertyConfigs = {};
|
|
222
|
+
var _iteratorNormalCompletion = true,
|
|
223
|
+
_didIteratorError = false,
|
|
199
224
|
_iteratorError = void 0;
|
|
200
225
|
try {
|
|
201
|
-
for (var _iterator = styleKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
202
|
-
var key = _step.value
|
|
203
|
-
|
|
204
|
-
if (typeof propAnimation
|
|
226
|
+
for (var _iterator = styleKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
227
|
+
var key = _step.value;
|
|
228
|
+
var propAnimation = normalized.properties[key];
|
|
229
|
+
if (typeof propAnimation === "string") {
|
|
205
230
|
var _animations_propAnimation;
|
|
206
231
|
propertyConfigs[key] = (_animations_propAnimation = animations[propAnimation]) !== null && _animations_propAnimation !== void 0 ? _animations_propAnimation : base;
|
|
207
|
-
} else if (propAnimation && (typeof propAnimation
|
|
208
|
-
var configType = propAnimation.type
|
|
209
|
-
|
|
210
|
-
|
|
232
|
+
} else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
|
|
233
|
+
var configType = propAnimation.type;
|
|
234
|
+
var _animations_configType;
|
|
235
|
+
var baseForProp = configType ? (_animations_configType = animations[configType]) !== null && _animations_configType !== void 0 ? _animations_configType : base : base;
|
|
211
236
|
propertyConfigs[key] = {
|
|
212
237
|
...baseForProp,
|
|
213
238
|
...propAnimation
|
|
214
239
|
};
|
|
215
|
-
} else
|
|
240
|
+
} else {
|
|
241
|
+
propertyConfigs[key] = base;
|
|
242
|
+
}
|
|
216
243
|
}
|
|
217
244
|
} catch (err) {
|
|
218
|
-
_didIteratorError =
|
|
245
|
+
_didIteratorError = true;
|
|
246
|
+
_iteratorError = err;
|
|
219
247
|
} finally {
|
|
220
248
|
try {
|
|
221
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
249
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
250
|
+
_iterator.return();
|
|
251
|
+
}
|
|
222
252
|
} finally {
|
|
223
|
-
if (_didIteratorError)
|
|
253
|
+
if (_didIteratorError) {
|
|
254
|
+
throw _iteratorError;
|
|
255
|
+
}
|
|
224
256
|
}
|
|
225
257
|
}
|
|
226
258
|
return {
|
|
@@ -231,21 +263,28 @@ function buildTransitionConfig(transition, animations, animationState, styleKeys
|
|
|
231
263
|
function getStyleKeys(style) {
|
|
232
264
|
var keys = new Set(Object.keys(style));
|
|
233
265
|
if (style.transform && Array.isArray(style.transform)) {
|
|
234
|
-
var _iteratorNormalCompletion =
|
|
235
|
-
_didIteratorError =
|
|
266
|
+
var _iteratorNormalCompletion = true,
|
|
267
|
+
_didIteratorError = false,
|
|
236
268
|
_iteratorError = void 0;
|
|
237
269
|
try {
|
|
238
|
-
for (var _iterator = style.transform[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
270
|
+
for (var _iterator = style.transform[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
239
271
|
var t = _step.value;
|
|
240
|
-
t && (typeof t
|
|
272
|
+
if (t && (typeof t === "undefined" ? "undefined" : _type_of(t)) === "object") {
|
|
273
|
+
keys.add(Object.keys(t)[0]);
|
|
274
|
+
}
|
|
241
275
|
}
|
|
242
276
|
} catch (err) {
|
|
243
|
-
_didIteratorError =
|
|
277
|
+
_didIteratorError = true;
|
|
278
|
+
_iteratorError = err;
|
|
244
279
|
} finally {
|
|
245
280
|
try {
|
|
246
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
281
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
282
|
+
_iterator.return();
|
|
283
|
+
}
|
|
247
284
|
} finally {
|
|
248
|
-
if (_didIteratorError)
|
|
285
|
+
if (_didIteratorError) {
|
|
286
|
+
throw _iteratorError;
|
|
287
|
+
}
|
|
249
288
|
}
|
|
250
289
|
}
|
|
251
290
|
}
|
|
@@ -253,18 +292,20 @@ function getStyleKeys(style) {
|
|
|
253
292
|
}
|
|
254
293
|
function createAnimations(animationsConfig) {
|
|
255
294
|
var animations = {};
|
|
256
|
-
for (var key in animationsConfig)
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
295
|
+
for (var key in animationsConfig) {
|
|
296
|
+
animations[key] = {
|
|
297
|
+
type: "spring",
|
|
298
|
+
...animationsConfig[key]
|
|
299
|
+
};
|
|
300
|
+
}
|
|
260
301
|
return {
|
|
261
|
-
needsCustomComponent:
|
|
302
|
+
needsCustomComponent: true,
|
|
262
303
|
View: import_core.isWeb ? AnimatedView : Animated.View,
|
|
263
304
|
Text: import_core.isWeb ? AnimatedText : Animated.Text,
|
|
264
|
-
isReactNative:
|
|
305
|
+
isReactNative: true,
|
|
265
306
|
inputStyle: "value",
|
|
266
307
|
outputStyle: "inline",
|
|
267
|
-
avoidReRenders:
|
|
308
|
+
avoidReRenders: true,
|
|
268
309
|
animations,
|
|
269
310
|
usePresence: import_use_presence.usePresence,
|
|
270
311
|
ResetPresence: import_use_presence.ResetPresence,
|
|
@@ -286,22 +327,31 @@ function createAnimations(animationsConfig) {
|
|
|
286
327
|
return sharedValue.value;
|
|
287
328
|
},
|
|
288
329
|
setValue(next) {
|
|
289
|
-
"worklet";
|
|
290
|
-
|
|
291
330
|
var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
|
|
292
331
|
type: "spring"
|
|
293
332
|
},
|
|
294
|
-
onFinish = arguments.length > 2 ? arguments[2] : void 0
|
|
295
|
-
|
|
333
|
+
onFinish = arguments.length > 2 ? arguments[2] : void 0;
|
|
334
|
+
if (config.type === "direct") {
|
|
335
|
+
sharedValue.value = next;
|
|
336
|
+
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
|
|
337
|
+
} else {
|
|
338
|
+
var cb = onFinish ? function () {
|
|
296
339
|
"worklet";
|
|
297
340
|
|
|
298
341
|
(0, import_react_native_reanimated.runOnJS)(onFinish)();
|
|
299
342
|
} : void 0;
|
|
300
|
-
|
|
343
|
+
if (import_core.isWeb) {
|
|
344
|
+
sharedValue.value = config.type === "spring" ? (0, import_react_native_reanimated.withSpring)(next, config, cb) : (0, import_react_native_reanimated.withTiming)(next, config, cb);
|
|
345
|
+
} else {
|
|
346
|
+
(0, import_react_native_reanimated.runOnUI)(function () {
|
|
347
|
+
"worklet";
|
|
348
|
+
|
|
349
|
+
sharedValue.value = config.type === "spring" ? (0, import_react_native_reanimated.withSpring)(next, config, cb) : (0, import_react_native_reanimated.withTiming)(next, config, cb);
|
|
350
|
+
})();
|
|
351
|
+
}
|
|
352
|
+
}
|
|
301
353
|
},
|
|
302
354
|
stop() {
|
|
303
|
-
"worklet";
|
|
304
|
-
|
|
305
355
|
(0, import_react_native_reanimated.cancelAnimation)(sharedValue);
|
|
306
356
|
}
|
|
307
357
|
};
|
|
@@ -312,119 +362,179 @@ function createAnimations(animationsConfig) {
|
|
|
312
362
|
// =========================================================================
|
|
313
363
|
useAnimatedNumberReaction(param, onValue) {
|
|
314
364
|
var {
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
365
|
+
value
|
|
366
|
+
} = param;
|
|
367
|
+
var instance = value.getInstance();
|
|
318
368
|
return (0, import_react_native_reanimated.useAnimatedReaction)(function () {
|
|
319
369
|
return instance.value;
|
|
320
370
|
}, function (next, prev) {
|
|
321
|
-
prev !== next
|
|
371
|
+
if (prev !== next) {
|
|
372
|
+
(0, import_react_native_reanimated.runOnJS)(onValue)(next);
|
|
373
|
+
}
|
|
322
374
|
}, [onValue, instance]);
|
|
323
375
|
},
|
|
324
376
|
// =========================================================================
|
|
325
377
|
// useAnimatedNumberStyle - Create animated styles from values
|
|
326
378
|
// =========================================================================
|
|
327
379
|
useAnimatedNumberStyle(val, getStyle) {
|
|
328
|
-
var instance = val.getInstance()
|
|
329
|
-
|
|
330
|
-
|
|
380
|
+
var instance = val.getInstance();
|
|
381
|
+
if (import_core.isWeb) {
|
|
382
|
+
return (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
383
|
+
"worklet";
|
|
384
|
+
|
|
385
|
+
return getStyle(instance.value);
|
|
331
386
|
}, [instance, getStyle]);
|
|
387
|
+
}
|
|
388
|
+
var styleVal = (0, import_react_native_reanimated.useSharedValue)(getStyle(instance.value));
|
|
389
|
+
(0, import_react_native_reanimated.useAnimatedReaction)(function () {
|
|
390
|
+
"worklet";
|
|
391
|
+
|
|
392
|
+
return instance.value;
|
|
393
|
+
}, function (current, previous) {
|
|
394
|
+
"worklet";
|
|
395
|
+
|
|
396
|
+
if (current !== previous) {
|
|
397
|
+
styleVal.value = getStyle(current);
|
|
398
|
+
}
|
|
399
|
+
});
|
|
332
400
|
return (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
333
|
-
|
|
334
|
-
|
|
401
|
+
"worklet";
|
|
402
|
+
|
|
403
|
+
return styleVal.value;
|
|
404
|
+
});
|
|
405
|
+
},
|
|
406
|
+
useAnimatedNumbersStyle(vals, getStyle) {
|
|
407
|
+
var instances = vals.map(function (v) {
|
|
408
|
+
return v.getInstance();
|
|
409
|
+
});
|
|
410
|
+
return (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
411
|
+
"worklet";
|
|
412
|
+
|
|
413
|
+
var currentValues = instances.map(function (inst) {
|
|
414
|
+
return inst.value;
|
|
415
|
+
});
|
|
416
|
+
return getStyle(...currentValues);
|
|
417
|
+
}, import_core.isWeb ? [getStyle, ...instances] : void 0);
|
|
335
418
|
},
|
|
336
419
|
// =========================================================================
|
|
337
420
|
// useAnimations - Main animation hook for components
|
|
338
421
|
// =========================================================================
|
|
339
422
|
useAnimations(animationProps) {
|
|
340
423
|
var {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
424
|
+
props,
|
|
425
|
+
presence,
|
|
426
|
+
style,
|
|
427
|
+
componentState,
|
|
428
|
+
useStyleEmitter,
|
|
429
|
+
themeName,
|
|
430
|
+
stateRef,
|
|
431
|
+
styleState
|
|
432
|
+
} = animationProps;
|
|
433
|
+
var isHydrating = componentState.unmounted === true;
|
|
434
|
+
var isMounting = componentState.unmounted === "should-enter";
|
|
435
|
+
var isEntering = !!componentState.unmounted;
|
|
436
|
+
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
437
|
+
var wasEnteringRef = (0, import_react.useRef)(isEntering);
|
|
438
|
+
var justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
356
439
|
import_react.default.useEffect(function () {
|
|
357
440
|
wasEnteringRef.current = isEntering;
|
|
358
441
|
});
|
|
359
|
-
var _styleState_effectiveTransition
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
442
|
+
var _styleState_effectiveTransition;
|
|
443
|
+
var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
|
|
444
|
+
var normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
|
|
445
|
+
var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
|
|
446
|
+
var animationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
447
|
+
var disableAnimation = isHydrating || !animationKey;
|
|
448
|
+
var isDark = (themeName === null || themeName === void 0 ? void 0 : themeName.startsWith("dark")) || false;
|
|
449
|
+
var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
|
|
450
|
+
var exitCycleIdRef = (0, import_react.useRef)(0);
|
|
451
|
+
var pendingExitKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
|
|
452
|
+
var exitCompletedRef = (0, import_react.useRef)(false);
|
|
453
|
+
var wasExitingRef = (0, import_react.useRef)(false);
|
|
454
|
+
var justStartedExiting = isExiting && !wasExitingRef.current;
|
|
455
|
+
var justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
456
|
+
var markExitKeyDone = (0, import_core.useEvent)(function (key3, cycleId, finished) {
|
|
457
|
+
if (cycleId !== exitCycleIdRef.current) return;
|
|
458
|
+
if (exitCompletedRef.current) return;
|
|
459
|
+
pendingExitKeysRef.current.delete(key3);
|
|
460
|
+
if (pendingExitKeysRef.current.size === 0) {
|
|
461
|
+
exitCompletedRef.current = true;
|
|
462
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
463
|
+
}
|
|
464
|
+
});
|
|
465
|
+
var isExitingRef = (0, import_react_native_reanimated.useSharedValue)(isExiting);
|
|
466
|
+
var exitCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(exitCycleIdRef.current);
|
|
467
|
+
if (justStartedExiting) {
|
|
468
|
+
exitCycleIdRef.current++;
|
|
469
|
+
exitCompletedRef.current = false;
|
|
470
|
+
pendingExitKeysRef.current.clear();
|
|
471
|
+
}
|
|
472
|
+
if (justStoppedExiting) {
|
|
473
|
+
exitCycleIdRef.current++;
|
|
474
|
+
pendingExitKeysRef.current.clear();
|
|
475
|
+
}
|
|
476
|
+
(0, import_core.useIsomorphicLayoutEffect)(function () {
|
|
477
|
+
isExitingRef.value = isExiting;
|
|
478
|
+
exitCycleIdShared.value = exitCycleIdRef.current;
|
|
479
|
+
}, [isExiting, exitCycleIdRef.current]);
|
|
480
|
+
import_react.default.useEffect(function () {
|
|
381
481
|
wasExitingRef.current = isExiting;
|
|
382
482
|
});
|
|
383
|
-
var animatedTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null)
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
483
|
+
var animatedTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
484
|
+
var staticTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
485
|
+
var transformTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
486
|
+
var {
|
|
487
|
+
animatedStyles,
|
|
488
|
+
staticStyles
|
|
489
|
+
} = (0, import_react.useMemo)(function () {
|
|
490
|
+
var animated = {};
|
|
491
|
+
var staticStyles2 = {};
|
|
492
|
+
var animateOnly2 = props.animateOnly;
|
|
493
|
+
for (var key3 in style) {
|
|
494
|
+
var rawValue = style[key3];
|
|
495
|
+
var value = resolveDynamicValue(rawValue, isDark);
|
|
496
|
+
if (value === void 0) continue;
|
|
497
|
+
if (disableAnimation) {
|
|
498
|
+
staticStyles2[key3] = value;
|
|
499
|
+
continue;
|
|
500
|
+
}
|
|
501
|
+
if (canAnimateProperty(key3, value, animateOnly2)) {
|
|
502
|
+
animated[key3] = value;
|
|
503
|
+
} else {
|
|
504
|
+
staticStyles2[key3] = value;
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
if (isMounting) {
|
|
508
|
+
for (var key1 in animated) {
|
|
509
|
+
staticStyles2[key1] = animated[key1];
|
|
403
510
|
}
|
|
404
|
-
|
|
511
|
+
}
|
|
512
|
+
return {
|
|
513
|
+
animatedStyles: animated,
|
|
514
|
+
staticStyles: staticStyles2
|
|
515
|
+
};
|
|
516
|
+
}, [disableAnimation, style, isDark, isMounting, props.animateOnly]);
|
|
517
|
+
var {
|
|
518
|
+
baseConfig,
|
|
519
|
+
propertyConfigs
|
|
520
|
+
} = (0, import_react.useMemo)(function () {
|
|
521
|
+
if (isHydrating) {
|
|
405
522
|
return {
|
|
406
|
-
animatedStyles: animated,
|
|
407
|
-
staticStyles: staticStyles2
|
|
408
|
-
};
|
|
409
|
-
}, [disableAnimation, style, isDark, isMounting, props.animateOnly]),
|
|
410
|
-
{
|
|
411
|
-
baseConfig,
|
|
412
|
-
propertyConfigs
|
|
413
|
-
} = (0, import_react.useMemo)(function () {
|
|
414
|
-
return isHydrating ? {
|
|
415
523
|
baseConfig: {
|
|
416
524
|
type: "timing",
|
|
417
525
|
duration: 0
|
|
418
526
|
},
|
|
419
527
|
propertyConfigs: {}
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
528
|
+
};
|
|
529
|
+
}
|
|
530
|
+
return buildTransitionConfig(props.transition, animations, animationState, getStyleKeys(animatedStyles));
|
|
531
|
+
}, [isHydrating, props.transition, animatedStyles, animationState]);
|
|
532
|
+
var configRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
533
|
+
baseConfig,
|
|
534
|
+
propertyConfigs,
|
|
535
|
+
disableAnimation,
|
|
536
|
+
isHydrating
|
|
537
|
+
});
|
|
428
538
|
(0, import_core.useIsomorphicLayoutEffect)(function () {
|
|
429
539
|
configRef.set({
|
|
430
540
|
baseConfig,
|
|
@@ -432,16 +542,17 @@ function createAnimations(animationsConfig) {
|
|
|
432
542
|
disableAnimation,
|
|
433
543
|
isHydrating
|
|
434
544
|
});
|
|
435
|
-
}, [baseConfig, propertyConfigs, disableAnimation, isHydrating])
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
545
|
+
}, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
|
|
546
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition2) {
|
|
547
|
+
var animateOnly2 = props.animateOnly;
|
|
548
|
+
var animated = {};
|
|
549
|
+
var statics = {};
|
|
550
|
+
var transforms2 = [];
|
|
551
|
+
var transitionToUse = effectiveTransition2 !== null && effectiveTransition2 !== void 0 ? effectiveTransition2 : props.transition;
|
|
552
|
+
var {
|
|
553
|
+
baseConfig: newBase,
|
|
554
|
+
propertyConfigs: newPropertyConfigs
|
|
555
|
+
} = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
|
|
445
556
|
configRef.set({
|
|
446
557
|
baseConfig: newBase,
|
|
447
558
|
propertyConfigs: newPropertyConfigs,
|
|
@@ -449,172 +560,220 @@ function createAnimations(animationsConfig) {
|
|
|
449
560
|
isHydrating: configRef.get().isHydrating
|
|
450
561
|
});
|
|
451
562
|
for (var key3 in nextStyle) {
|
|
452
|
-
var rawValue = nextStyle[key3]
|
|
453
|
-
|
|
454
|
-
if (value
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
563
|
+
var rawValue = nextStyle[key3];
|
|
564
|
+
var value = resolveDynamicValue(rawValue, isDark);
|
|
565
|
+
if (value == void 0) continue;
|
|
566
|
+
if (configRef.get().disableAnimation) {
|
|
567
|
+
statics[key3] = value;
|
|
568
|
+
continue;
|
|
569
|
+
}
|
|
570
|
+
if (key3 === "transform" && Array.isArray(value)) {
|
|
571
|
+
var _iteratorNormalCompletion2 = true,
|
|
572
|
+
_didIteratorError2 = false,
|
|
573
|
+
_iteratorError2 = void 0;
|
|
574
|
+
try {
|
|
575
|
+
for (var _iterator2 = value[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
|
576
|
+
var t2 = _step2.value;
|
|
577
|
+
if (t2 && (typeof t2 === "undefined" ? "undefined" : _type_of(t2)) === "object") {
|
|
578
|
+
var tKey2 = Object.keys(t2)[0];
|
|
579
|
+
var tVal = t2[tKey2];
|
|
580
|
+
if (typeof tVal === "number" || typeof tVal === "string") {
|
|
581
|
+
transforms2.push(t2);
|
|
470
582
|
}
|
|
471
583
|
}
|
|
472
|
-
}
|
|
473
|
-
|
|
584
|
+
}
|
|
585
|
+
} catch (err) {
|
|
586
|
+
_didIteratorError2 = true;
|
|
587
|
+
_iteratorError2 = err;
|
|
588
|
+
} finally {
|
|
589
|
+
try {
|
|
590
|
+
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
|
|
591
|
+
_iterator2.return();
|
|
592
|
+
}
|
|
474
593
|
} finally {
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
} finally {
|
|
478
|
-
if (_didIteratorError2) throw _iteratorError2;
|
|
594
|
+
if (_didIteratorError2) {
|
|
595
|
+
throw _iteratorError2;
|
|
479
596
|
}
|
|
480
597
|
}
|
|
481
|
-
continue;
|
|
482
598
|
}
|
|
483
|
-
|
|
599
|
+
continue;
|
|
600
|
+
}
|
|
601
|
+
if (canAnimateProperty(key3, value, animateOnly2)) {
|
|
602
|
+
animated[key3] = value;
|
|
603
|
+
} else {
|
|
604
|
+
statics[key3] = value;
|
|
484
605
|
}
|
|
485
606
|
}
|
|
486
|
-
animatedTargetsRef.set(animated)
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
607
|
+
animatedTargetsRef.set(animated);
|
|
608
|
+
staticTargetsRef.set(statics);
|
|
609
|
+
transformTargetsRef.set(transforms2);
|
|
610
|
+
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
611
|
+
console.info("[animations-reanimated] useStyleEmitter update", {
|
|
612
|
+
animated,
|
|
613
|
+
statics,
|
|
614
|
+
transforms: transforms2
|
|
615
|
+
});
|
|
616
|
+
}
|
|
491
617
|
});
|
|
492
|
-
var exitKeysRegistered = (0, import_react.useRef)(
|
|
618
|
+
var exitKeysRegistered = (0, import_react.useRef)(false);
|
|
493
619
|
if (justStartedExiting && sendExitComplete) {
|
|
494
|
-
var exitKeys = []
|
|
495
|
-
|
|
496
|
-
for (var key2 in animatedStyles)
|
|
620
|
+
var exitKeys = [];
|
|
621
|
+
var animateOnly = props.animateOnly;
|
|
622
|
+
for (var key2 in animatedStyles) {
|
|
623
|
+
if (key2 === "transform") continue;
|
|
624
|
+
if (canAnimateProperty(key2, animatedStyles[key2], animateOnly)) {
|
|
625
|
+
exitKeys.push(key2);
|
|
626
|
+
}
|
|
627
|
+
}
|
|
497
628
|
var transforms = animatedStyles.transform;
|
|
498
629
|
if (transforms && Array.isArray(transforms)) {
|
|
499
|
-
var _iteratorNormalCompletion =
|
|
500
|
-
_didIteratorError =
|
|
630
|
+
var _iteratorNormalCompletion = true,
|
|
631
|
+
_didIteratorError = false,
|
|
501
632
|
_iteratorError = void 0;
|
|
502
633
|
try {
|
|
503
|
-
for (var _iterator = transforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
634
|
+
for (var _iterator = transforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
504
635
|
var t = _step.value;
|
|
505
|
-
if (t)
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
636
|
+
if (!t) continue;
|
|
637
|
+
var tKey = Object.keys(t)[0];
|
|
638
|
+
if (tKey) {
|
|
639
|
+
if (animateOnly && !animateOnly.includes(tKey)) {
|
|
640
|
+
continue;
|
|
510
641
|
}
|
|
642
|
+
exitKeys.push(`transform:${tKey}`);
|
|
511
643
|
}
|
|
512
644
|
}
|
|
513
645
|
} catch (err) {
|
|
514
|
-
_didIteratorError =
|
|
646
|
+
_didIteratorError = true;
|
|
647
|
+
_iteratorError = err;
|
|
515
648
|
} finally {
|
|
516
649
|
try {
|
|
517
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
650
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
651
|
+
_iterator.return();
|
|
652
|
+
}
|
|
518
653
|
} finally {
|
|
519
|
-
if (_didIteratorError)
|
|
654
|
+
if (_didIteratorError) {
|
|
655
|
+
throw _iteratorError;
|
|
656
|
+
}
|
|
520
657
|
}
|
|
521
658
|
}
|
|
522
659
|
}
|
|
523
|
-
pendingExitKeysRef.current = new Set(exitKeys)
|
|
660
|
+
pendingExitKeysRef.current = new Set(exitKeys);
|
|
661
|
+
exitKeysRegistered.current = exitKeys.length > 0;
|
|
524
662
|
}
|
|
525
663
|
import_react.default.useEffect(function () {
|
|
526
|
-
!justStartedExiting || !sendExitComplete
|
|
664
|
+
if (!justStartedExiting || !sendExitComplete) return;
|
|
665
|
+
if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
|
|
666
|
+
if (!exitCompletedRef.current) {
|
|
667
|
+
exitCompletedRef.current = true;
|
|
668
|
+
sendExitComplete();
|
|
669
|
+
}
|
|
670
|
+
}
|
|
527
671
|
}, [justStartedExiting, sendExitComplete]);
|
|
528
672
|
var animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
529
673
|
"worklet";
|
|
530
674
|
|
|
531
675
|
var _loop = function (key12) {
|
|
532
676
|
if (key12 === "transform") return "continue";
|
|
533
|
-
var targetValue = animatedValues[key12]
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
677
|
+
var targetValue = animatedValues[key12];
|
|
678
|
+
var _config_propertyConfigs_key;
|
|
679
|
+
var propConfig = (_config_propertyConfigs_key = config.propertyConfigs[key12]) !== null && _config_propertyConfigs_key !== void 0 ? _config_propertyConfigs_key : config.baseConfig;
|
|
680
|
+
var callback = void 0;
|
|
537
681
|
if (currentlyExiting) {
|
|
538
|
-
var capturedKey = key12
|
|
539
|
-
|
|
682
|
+
var capturedKey = key12;
|
|
683
|
+
var capturedCycleId = currentCycleId;
|
|
540
684
|
callback = function (finished) {
|
|
541
685
|
"worklet";
|
|
542
686
|
|
|
543
|
-
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(capturedKey, capturedCycleId, finished
|
|
687
|
+
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(capturedKey, capturedCycleId, finished !== null && finished !== void 0 ? finished : false);
|
|
544
688
|
};
|
|
545
689
|
}
|
|
546
690
|
result[key12] = applyAnimation(targetValue, propConfig, callback);
|
|
547
691
|
};
|
|
548
|
-
if (disableAnimation || isHydrating)
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
692
|
+
if (disableAnimation || isHydrating) {
|
|
693
|
+
return {};
|
|
694
|
+
}
|
|
695
|
+
var result = {};
|
|
696
|
+
var config = configRef.get();
|
|
697
|
+
var emitterAnimated = animatedTargetsRef.value;
|
|
698
|
+
var emitterStatic = staticTargetsRef.value;
|
|
699
|
+
var emitterTransforms = transformTargetsRef.value;
|
|
700
|
+
var hasEmitterUpdates = emitterAnimated !== null;
|
|
701
|
+
var animatedValues = hasEmitterUpdates ? emitterAnimated : animatedStyles;
|
|
702
|
+
var staticValues = hasEmitterUpdates ? emitterStatic : {};
|
|
703
|
+
var currentlyExiting = isExitingRef.value;
|
|
704
|
+
var currentCycleId = exitCycleIdShared.value;
|
|
705
|
+
for (var key3 in staticValues) {
|
|
706
|
+
result[key3] = staticValues[key3];
|
|
707
|
+
}
|
|
560
708
|
for (var key1 in animatedValues) _loop(key1);
|
|
561
709
|
var transforms2 = hasEmitterUpdates ? emitterTransforms : animatedStyles.transform;
|
|
562
710
|
if (transforms2 && Array.isArray(transforms2)) {
|
|
563
|
-
var validTransforms = []
|
|
564
|
-
|
|
565
|
-
_didIteratorError2 =
|
|
711
|
+
var validTransforms = [];
|
|
712
|
+
var _iteratorNormalCompletion2 = true,
|
|
713
|
+
_didIteratorError2 = false,
|
|
566
714
|
_iteratorError2 = void 0;
|
|
567
715
|
try {
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
716
|
+
var _loop1 = function () {
|
|
717
|
+
var t2 = _step2.value;
|
|
718
|
+
if (!t2) return "continue";
|
|
719
|
+
var keys = Object.keys(t2);
|
|
720
|
+
if (keys.length === 0) return "continue";
|
|
721
|
+
var value = t2[keys[0]];
|
|
722
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
723
|
+
var transformKey = Object.keys(t2)[0];
|
|
724
|
+
var targetValue = t2[transformKey];
|
|
725
|
+
var _config_propertyConfigs_transformKey;
|
|
726
|
+
var propConfig = (_config_propertyConfigs_transformKey = config.propertyConfigs[transformKey]) !== null && _config_propertyConfigs_transformKey !== void 0 ? _config_propertyConfigs_transformKey : config.baseConfig;
|
|
727
|
+
var callback = void 0;
|
|
728
|
+
if (currentlyExiting) {
|
|
729
|
+
var capturedKey = `transform:${transformKey}`;
|
|
730
|
+
var capturedCycleId = currentCycleId;
|
|
731
|
+
callback = function (finished) {
|
|
732
|
+
"worklet";
|
|
585
733
|
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
}
|
|
589
|
-
validTransforms.push({
|
|
590
|
-
[transformKey]: applyAnimation(targetValue, propConfig, callback)
|
|
591
|
-
});
|
|
734
|
+
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(capturedKey, capturedCycleId, finished !== null && finished !== void 0 ? finished : false);
|
|
735
|
+
};
|
|
592
736
|
}
|
|
593
|
-
|
|
737
|
+
validTransforms.push({
|
|
738
|
+
[transformKey]: applyAnimation(targetValue, propConfig, callback)
|
|
739
|
+
});
|
|
740
|
+
}
|
|
741
|
+
};
|
|
742
|
+
for (var _iterator2 = transforms2[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _loop1();
|
|
594
743
|
} catch (err) {
|
|
595
|
-
_didIteratorError2 =
|
|
744
|
+
_didIteratorError2 = true;
|
|
745
|
+
_iteratorError2 = err;
|
|
596
746
|
} finally {
|
|
597
747
|
try {
|
|
598
|
-
!_iteratorNormalCompletion2 && _iterator2.return != null
|
|
748
|
+
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
|
|
749
|
+
_iterator2.return();
|
|
750
|
+
}
|
|
599
751
|
} finally {
|
|
600
|
-
if (_didIteratorError2)
|
|
752
|
+
if (_didIteratorError2) {
|
|
753
|
+
throw _iteratorError2;
|
|
754
|
+
}
|
|
601
755
|
}
|
|
602
756
|
}
|
|
603
|
-
validTransforms.length > 0
|
|
757
|
+
if (validTransforms.length > 0) {
|
|
758
|
+
result.transform = validTransforms;
|
|
759
|
+
}
|
|
604
760
|
}
|
|
605
761
|
return result;
|
|
606
|
-
}, [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
|
|
607
|
-
//
|
|
608
|
-
animatedTargetsRef, staticTargetsRef, transformTargetsRef, isExitingRef, exitCycleIdShared, markExitKeyDone]);
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
762
|
+
}, import_core.isWeb ? [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
|
|
763
|
+
// pass SharedValues so the mapper watches them on web (no babel plugin)
|
|
764
|
+
animatedTargetsRef, staticTargetsRef, transformTargetsRef, isExitingRef, exitCycleIdShared, markExitKeyDone] : void 0);
|
|
765
|
+
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
766
|
+
console.info("[animations-reanimated] useAnimations", {
|
|
767
|
+
animationKey,
|
|
768
|
+
componentState,
|
|
769
|
+
isExiting,
|
|
770
|
+
animatedStyles,
|
|
771
|
+
staticStyles,
|
|
772
|
+
baseConfig,
|
|
773
|
+
propertyConfigs
|
|
774
|
+
});
|
|
775
|
+
}
|
|
776
|
+
return {
|
|
618
777
|
style: [staticStyles, animatedStyle]
|
|
619
778
|
};
|
|
620
779
|
}
|