@hanzogui/animations-reanimated 3.0.6 → 4.4.0
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 +477 -334
- package/dist/cjs/createAnimations.native.js +561 -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 +449 -308
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +533 -383
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/package.json +5 -5
- package/src/createAnimations.tsx +164 -123
- 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,172 @@ 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.useDerivedValue)(function () {
|
|
389
|
+
"worklet";
|
|
390
|
+
|
|
391
|
+
return getStyle(instance.value);
|
|
392
|
+
});
|
|
332
393
|
return (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
333
|
-
|
|
334
|
-
|
|
394
|
+
"worklet";
|
|
395
|
+
|
|
396
|
+
return styleVal.value;
|
|
397
|
+
});
|
|
398
|
+
},
|
|
399
|
+
useAnimatedNumbersStyle(vals, getStyle) {
|
|
400
|
+
var instances = vals.map(function (v) {
|
|
401
|
+
return v.getInstance();
|
|
402
|
+
});
|
|
403
|
+
return (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
404
|
+
"worklet";
|
|
405
|
+
|
|
406
|
+
var currentValues = instances.map(function (inst) {
|
|
407
|
+
return inst.value;
|
|
408
|
+
});
|
|
409
|
+
return getStyle(...currentValues);
|
|
410
|
+
}, import_core.isWeb ? [getStyle, ...instances] : void 0);
|
|
335
411
|
},
|
|
336
412
|
// =========================================================================
|
|
337
413
|
// useAnimations - Main animation hook for components
|
|
338
414
|
// =========================================================================
|
|
339
415
|
useAnimations(animationProps) {
|
|
340
416
|
var {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
417
|
+
props,
|
|
418
|
+
presence,
|
|
419
|
+
style,
|
|
420
|
+
componentState,
|
|
421
|
+
useStyleEmitter,
|
|
422
|
+
themeName,
|
|
423
|
+
stateRef,
|
|
424
|
+
styleState
|
|
425
|
+
} = animationProps;
|
|
426
|
+
var isHydrating = componentState.unmounted === true;
|
|
427
|
+
var isMounting = componentState.unmounted === "should-enter";
|
|
428
|
+
var isEntering = !!componentState.unmounted;
|
|
429
|
+
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
430
|
+
var wasEnteringRef = (0, import_react.useRef)(isEntering);
|
|
431
|
+
var justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
356
432
|
import_react.default.useEffect(function () {
|
|
357
433
|
wasEnteringRef.current = isEntering;
|
|
358
434
|
});
|
|
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
|
-
|
|
435
|
+
var _styleState_effectiveTransition;
|
|
436
|
+
var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
|
|
437
|
+
var normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
|
|
438
|
+
var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
|
|
439
|
+
var animationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
440
|
+
var disableAnimation = isHydrating || !animationKey;
|
|
441
|
+
var isDark = (themeName === null || themeName === void 0 ? void 0 : themeName.startsWith("dark")) || false;
|
|
442
|
+
var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
|
|
443
|
+
var exitCycleIdRef = (0, import_react.useRef)(0);
|
|
444
|
+
var pendingExitKeysRef = (0, import_react.useRef)(/* @__PURE__ */new Set());
|
|
445
|
+
var exitCompletedRef = (0, import_react.useRef)(false);
|
|
446
|
+
var wasExitingRef = (0, import_react.useRef)(false);
|
|
447
|
+
var justStartedExiting = isExiting && !wasExitingRef.current;
|
|
448
|
+
var justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
449
|
+
var markExitKeyDone = (0, import_core.useEvent)(function (key3, cycleId, finished) {
|
|
450
|
+
if (cycleId !== exitCycleIdRef.current) return;
|
|
451
|
+
if (exitCompletedRef.current) return;
|
|
452
|
+
pendingExitKeysRef.current.delete(key3);
|
|
453
|
+
if (pendingExitKeysRef.current.size === 0) {
|
|
454
|
+
exitCompletedRef.current = true;
|
|
455
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
456
|
+
}
|
|
457
|
+
});
|
|
458
|
+
var isExitingRef = (0, import_react_native_reanimated.useSharedValue)(isExiting);
|
|
459
|
+
var exitCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(exitCycleIdRef.current);
|
|
460
|
+
if (justStartedExiting) {
|
|
461
|
+
exitCycleIdRef.current++;
|
|
462
|
+
exitCompletedRef.current = false;
|
|
463
|
+
pendingExitKeysRef.current.clear();
|
|
464
|
+
}
|
|
465
|
+
if (justStoppedExiting) {
|
|
466
|
+
exitCycleIdRef.current++;
|
|
467
|
+
pendingExitKeysRef.current.clear();
|
|
468
|
+
}
|
|
469
|
+
(0, import_core.useIsomorphicLayoutEffect)(function () {
|
|
470
|
+
isExitingRef.value = isExiting;
|
|
471
|
+
exitCycleIdShared.value = exitCycleIdRef.current;
|
|
472
|
+
}, [isExiting, exitCycleIdRef.current]);
|
|
473
|
+
import_react.default.useEffect(function () {
|
|
381
474
|
wasExitingRef.current = isExiting;
|
|
382
475
|
});
|
|
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
|
-
canAnimateProperty(key3, value, animateOnly2) ? animated[key3] = value : staticStyles2[key3] = value;
|
|
402
|
-
}
|
|
476
|
+
var animatedTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
477
|
+
var staticTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
478
|
+
var transformTargetsRef = (0, import_react_native_reanimated.useSharedValue)(null);
|
|
479
|
+
var {
|
|
480
|
+
animatedStyles,
|
|
481
|
+
staticStyles
|
|
482
|
+
} = (0, import_react.useMemo)(function () {
|
|
483
|
+
var animated = {};
|
|
484
|
+
var staticStyles2 = {};
|
|
485
|
+
var animateOnly2 = props.animateOnly;
|
|
486
|
+
for (var key3 in style) {
|
|
487
|
+
var rawValue = style[key3];
|
|
488
|
+
var value = resolveDynamicValue(rawValue, isDark);
|
|
489
|
+
if (value === void 0) continue;
|
|
490
|
+
if (disableAnimation) {
|
|
491
|
+
staticStyles2[key3] = value;
|
|
492
|
+
continue;
|
|
403
493
|
}
|
|
404
|
-
if (
|
|
494
|
+
if (canAnimateProperty(key3, value, animateOnly2)) {
|
|
495
|
+
animated[key3] = value;
|
|
496
|
+
} else {
|
|
497
|
+
staticStyles2[key3] = value;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
if (isMounting) {
|
|
501
|
+
for (var key1 in animated) {
|
|
502
|
+
staticStyles2[key1] = animated[key1];
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
return {
|
|
506
|
+
animatedStyles: animated,
|
|
507
|
+
staticStyles: staticStyles2
|
|
508
|
+
};
|
|
509
|
+
}, [disableAnimation, style, isDark, isMounting, props.animateOnly]);
|
|
510
|
+
var {
|
|
511
|
+
baseConfig,
|
|
512
|
+
propertyConfigs
|
|
513
|
+
} = (0, import_react.useMemo)(function () {
|
|
514
|
+
if (isHydrating) {
|
|
405
515
|
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
516
|
baseConfig: {
|
|
416
517
|
type: "timing",
|
|
417
518
|
duration: 0
|
|
418
519
|
},
|
|
419
520
|
propertyConfigs: {}
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
521
|
+
};
|
|
522
|
+
}
|
|
523
|
+
return buildTransitionConfig(props.transition, animations, animationState, getStyleKeys(animatedStyles));
|
|
524
|
+
}, [isHydrating, props.transition, animatedStyles, animationState]);
|
|
525
|
+
var configRef = (0, import_react_native_reanimated.useSharedValue)({
|
|
526
|
+
baseConfig,
|
|
527
|
+
propertyConfigs,
|
|
528
|
+
disableAnimation,
|
|
529
|
+
isHydrating
|
|
530
|
+
});
|
|
428
531
|
(0, import_core.useIsomorphicLayoutEffect)(function () {
|
|
429
532
|
configRef.set({
|
|
430
533
|
baseConfig,
|
|
@@ -432,16 +535,17 @@ function createAnimations(animationsConfig) {
|
|
|
432
535
|
disableAnimation,
|
|
433
536
|
isHydrating
|
|
434
537
|
});
|
|
435
|
-
}, [baseConfig, propertyConfigs, disableAnimation, isHydrating])
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
538
|
+
}, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
|
|
539
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition2) {
|
|
540
|
+
var animateOnly2 = props.animateOnly;
|
|
541
|
+
var animated = {};
|
|
542
|
+
var statics = {};
|
|
543
|
+
var transforms2 = [];
|
|
544
|
+
var transitionToUse = effectiveTransition2 !== null && effectiveTransition2 !== void 0 ? effectiveTransition2 : props.transition;
|
|
545
|
+
var {
|
|
546
|
+
baseConfig: newBase,
|
|
547
|
+
propertyConfigs: newPropertyConfigs
|
|
548
|
+
} = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
|
|
445
549
|
configRef.set({
|
|
446
550
|
baseConfig: newBase,
|
|
447
551
|
propertyConfigs: newPropertyConfigs,
|
|
@@ -449,172 +553,220 @@ function createAnimations(animationsConfig) {
|
|
|
449
553
|
isHydrating: configRef.get().isHydrating
|
|
450
554
|
});
|
|
451
555
|
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
|
-
|
|
556
|
+
var rawValue = nextStyle[key3];
|
|
557
|
+
var value = resolveDynamicValue(rawValue, isDark);
|
|
558
|
+
if (value == void 0) continue;
|
|
559
|
+
if (configRef.get().disableAnimation) {
|
|
560
|
+
statics[key3] = value;
|
|
561
|
+
continue;
|
|
562
|
+
}
|
|
563
|
+
if (key3 === "transform" && Array.isArray(value)) {
|
|
564
|
+
var _iteratorNormalCompletion2 = true,
|
|
565
|
+
_didIteratorError2 = false,
|
|
566
|
+
_iteratorError2 = void 0;
|
|
567
|
+
try {
|
|
568
|
+
for (var _iterator2 = value[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
|
569
|
+
var t2 = _step2.value;
|
|
570
|
+
if (t2 && (typeof t2 === "undefined" ? "undefined" : _type_of(t2)) === "object") {
|
|
571
|
+
var tKey2 = Object.keys(t2)[0];
|
|
572
|
+
var tVal = t2[tKey2];
|
|
573
|
+
if (typeof tVal === "number" || typeof tVal === "string") {
|
|
574
|
+
transforms2.push(t2);
|
|
470
575
|
}
|
|
471
576
|
}
|
|
472
|
-
}
|
|
473
|
-
|
|
577
|
+
}
|
|
578
|
+
} catch (err) {
|
|
579
|
+
_didIteratorError2 = true;
|
|
580
|
+
_iteratorError2 = err;
|
|
581
|
+
} finally {
|
|
582
|
+
try {
|
|
583
|
+
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
|
|
584
|
+
_iterator2.return();
|
|
585
|
+
}
|
|
474
586
|
} finally {
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
} finally {
|
|
478
|
-
if (_didIteratorError2) throw _iteratorError2;
|
|
587
|
+
if (_didIteratorError2) {
|
|
588
|
+
throw _iteratorError2;
|
|
479
589
|
}
|
|
480
590
|
}
|
|
481
|
-
continue;
|
|
482
591
|
}
|
|
483
|
-
|
|
592
|
+
continue;
|
|
593
|
+
}
|
|
594
|
+
if (canAnimateProperty(key3, value, animateOnly2)) {
|
|
595
|
+
animated[key3] = value;
|
|
596
|
+
} else {
|
|
597
|
+
statics[key3] = value;
|
|
484
598
|
}
|
|
485
599
|
}
|
|
486
|
-
animatedTargetsRef.set(animated)
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
600
|
+
animatedTargetsRef.set(animated);
|
|
601
|
+
staticTargetsRef.set(statics);
|
|
602
|
+
transformTargetsRef.set(transforms2);
|
|
603
|
+
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
604
|
+
console.info("[animations-reanimated] useStyleEmitter update", {
|
|
605
|
+
animated,
|
|
606
|
+
statics,
|
|
607
|
+
transforms: transforms2
|
|
608
|
+
});
|
|
609
|
+
}
|
|
491
610
|
});
|
|
492
|
-
var exitKeysRegistered = (0, import_react.useRef)(
|
|
611
|
+
var exitKeysRegistered = (0, import_react.useRef)(false);
|
|
493
612
|
if (justStartedExiting && sendExitComplete) {
|
|
494
|
-
var exitKeys = []
|
|
495
|
-
|
|
496
|
-
for (var key2 in animatedStyles)
|
|
613
|
+
var exitKeys = [];
|
|
614
|
+
var animateOnly = props.animateOnly;
|
|
615
|
+
for (var key2 in animatedStyles) {
|
|
616
|
+
if (key2 === "transform") continue;
|
|
617
|
+
if (canAnimateProperty(key2, animatedStyles[key2], animateOnly)) {
|
|
618
|
+
exitKeys.push(key2);
|
|
619
|
+
}
|
|
620
|
+
}
|
|
497
621
|
var transforms = animatedStyles.transform;
|
|
498
622
|
if (transforms && Array.isArray(transforms)) {
|
|
499
|
-
var _iteratorNormalCompletion =
|
|
500
|
-
_didIteratorError =
|
|
623
|
+
var _iteratorNormalCompletion = true,
|
|
624
|
+
_didIteratorError = false,
|
|
501
625
|
_iteratorError = void 0;
|
|
502
626
|
try {
|
|
503
|
-
for (var _iterator = transforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
627
|
+
for (var _iterator = transforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
504
628
|
var t = _step.value;
|
|
505
|
-
if (t)
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
629
|
+
if (!t) continue;
|
|
630
|
+
var tKey = Object.keys(t)[0];
|
|
631
|
+
if (tKey) {
|
|
632
|
+
if (animateOnly && !animateOnly.includes(tKey)) {
|
|
633
|
+
continue;
|
|
510
634
|
}
|
|
635
|
+
exitKeys.push(`transform:${tKey}`);
|
|
511
636
|
}
|
|
512
637
|
}
|
|
513
638
|
} catch (err) {
|
|
514
|
-
_didIteratorError =
|
|
639
|
+
_didIteratorError = true;
|
|
640
|
+
_iteratorError = err;
|
|
515
641
|
} finally {
|
|
516
642
|
try {
|
|
517
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
643
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
644
|
+
_iterator.return();
|
|
645
|
+
}
|
|
518
646
|
} finally {
|
|
519
|
-
if (_didIteratorError)
|
|
647
|
+
if (_didIteratorError) {
|
|
648
|
+
throw _iteratorError;
|
|
649
|
+
}
|
|
520
650
|
}
|
|
521
651
|
}
|
|
522
652
|
}
|
|
523
|
-
pendingExitKeysRef.current = new Set(exitKeys)
|
|
653
|
+
pendingExitKeysRef.current = new Set(exitKeys);
|
|
654
|
+
exitKeysRegistered.current = exitKeys.length > 0;
|
|
524
655
|
}
|
|
525
656
|
import_react.default.useEffect(function () {
|
|
526
|
-
!justStartedExiting || !sendExitComplete
|
|
657
|
+
if (!justStartedExiting || !sendExitComplete) return;
|
|
658
|
+
if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
|
|
659
|
+
if (!exitCompletedRef.current) {
|
|
660
|
+
exitCompletedRef.current = true;
|
|
661
|
+
sendExitComplete();
|
|
662
|
+
}
|
|
663
|
+
}
|
|
527
664
|
}, [justStartedExiting, sendExitComplete]);
|
|
528
665
|
var animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(function () {
|
|
529
666
|
"worklet";
|
|
530
667
|
|
|
531
668
|
var _loop = function (key12) {
|
|
532
669
|
if (key12 === "transform") return "continue";
|
|
533
|
-
var targetValue = animatedValues[key12]
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
670
|
+
var targetValue = animatedValues[key12];
|
|
671
|
+
var _config_propertyConfigs_key;
|
|
672
|
+
var propConfig = (_config_propertyConfigs_key = config.propertyConfigs[key12]) !== null && _config_propertyConfigs_key !== void 0 ? _config_propertyConfigs_key : config.baseConfig;
|
|
673
|
+
var callback = void 0;
|
|
537
674
|
if (currentlyExiting) {
|
|
538
|
-
var capturedKey = key12
|
|
539
|
-
|
|
675
|
+
var capturedKey = key12;
|
|
676
|
+
var capturedCycleId = currentCycleId;
|
|
540
677
|
callback = function (finished) {
|
|
541
678
|
"worklet";
|
|
542
679
|
|
|
543
|
-
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(capturedKey, capturedCycleId, finished
|
|
680
|
+
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(capturedKey, capturedCycleId, finished !== null && finished !== void 0 ? finished : false);
|
|
544
681
|
};
|
|
545
682
|
}
|
|
546
683
|
result[key12] = applyAnimation(targetValue, propConfig, callback);
|
|
547
684
|
};
|
|
548
|
-
if (disableAnimation || isHydrating)
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
685
|
+
if (disableAnimation || isHydrating) {
|
|
686
|
+
return {};
|
|
687
|
+
}
|
|
688
|
+
var result = {};
|
|
689
|
+
var config = configRef.get();
|
|
690
|
+
var emitterAnimated = animatedTargetsRef.value;
|
|
691
|
+
var emitterStatic = staticTargetsRef.value;
|
|
692
|
+
var emitterTransforms = transformTargetsRef.value;
|
|
693
|
+
var hasEmitterUpdates = emitterAnimated !== null;
|
|
694
|
+
var animatedValues = hasEmitterUpdates ? emitterAnimated : animatedStyles;
|
|
695
|
+
var staticValues = hasEmitterUpdates ? emitterStatic : {};
|
|
696
|
+
var currentlyExiting = isExitingRef.value;
|
|
697
|
+
var currentCycleId = exitCycleIdShared.value;
|
|
698
|
+
for (var key3 in staticValues) {
|
|
699
|
+
result[key3] = staticValues[key3];
|
|
700
|
+
}
|
|
560
701
|
for (var key1 in animatedValues) _loop(key1);
|
|
561
702
|
var transforms2 = hasEmitterUpdates ? emitterTransforms : animatedStyles.transform;
|
|
562
703
|
if (transforms2 && Array.isArray(transforms2)) {
|
|
563
|
-
var validTransforms = []
|
|
564
|
-
|
|
565
|
-
_didIteratorError2 =
|
|
704
|
+
var validTransforms = [];
|
|
705
|
+
var _iteratorNormalCompletion2 = true,
|
|
706
|
+
_didIteratorError2 = false,
|
|
566
707
|
_iteratorError2 = void 0;
|
|
567
708
|
try {
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
709
|
+
var _loop1 = function () {
|
|
710
|
+
var t2 = _step2.value;
|
|
711
|
+
if (!t2) return "continue";
|
|
712
|
+
var keys = Object.keys(t2);
|
|
713
|
+
if (keys.length === 0) return "continue";
|
|
714
|
+
var value = t2[keys[0]];
|
|
715
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
716
|
+
var transformKey = Object.keys(t2)[0];
|
|
717
|
+
var targetValue = t2[transformKey];
|
|
718
|
+
var _config_propertyConfigs_transformKey;
|
|
719
|
+
var propConfig = (_config_propertyConfigs_transformKey = config.propertyConfigs[transformKey]) !== null && _config_propertyConfigs_transformKey !== void 0 ? _config_propertyConfigs_transformKey : config.baseConfig;
|
|
720
|
+
var callback = void 0;
|
|
721
|
+
if (currentlyExiting) {
|
|
722
|
+
var capturedKey = `transform:${transformKey}`;
|
|
723
|
+
var capturedCycleId = currentCycleId;
|
|
724
|
+
callback = function (finished) {
|
|
725
|
+
"worklet";
|
|
585
726
|
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
}
|
|
589
|
-
validTransforms.push({
|
|
590
|
-
[transformKey]: applyAnimation(targetValue, propConfig, callback)
|
|
591
|
-
});
|
|
727
|
+
(0, import_react_native_reanimated.runOnJS)(markExitKeyDone)(capturedKey, capturedCycleId, finished !== null && finished !== void 0 ? finished : false);
|
|
728
|
+
};
|
|
592
729
|
}
|
|
593
|
-
|
|
730
|
+
validTransforms.push({
|
|
731
|
+
[transformKey]: applyAnimation(targetValue, propConfig, callback)
|
|
732
|
+
});
|
|
733
|
+
}
|
|
734
|
+
};
|
|
735
|
+
for (var _iterator2 = transforms2[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _loop1();
|
|
594
736
|
} catch (err) {
|
|
595
|
-
_didIteratorError2 =
|
|
737
|
+
_didIteratorError2 = true;
|
|
738
|
+
_iteratorError2 = err;
|
|
596
739
|
} finally {
|
|
597
740
|
try {
|
|
598
|
-
!_iteratorNormalCompletion2 && _iterator2.return != null
|
|
741
|
+
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
|
|
742
|
+
_iterator2.return();
|
|
743
|
+
}
|
|
599
744
|
} finally {
|
|
600
|
-
if (_didIteratorError2)
|
|
745
|
+
if (_didIteratorError2) {
|
|
746
|
+
throw _iteratorError2;
|
|
747
|
+
}
|
|
601
748
|
}
|
|
602
749
|
}
|
|
603
|
-
validTransforms.length > 0
|
|
750
|
+
if (validTransforms.length > 0) {
|
|
751
|
+
result.transform = validTransforms;
|
|
752
|
+
}
|
|
604
753
|
}
|
|
605
754
|
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
|
-
|
|
755
|
+
}, import_core.isWeb ? [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
|
|
756
|
+
// pass SharedValues so the mapper watches them on web (no babel plugin)
|
|
757
|
+
animatedTargetsRef, staticTargetsRef, transformTargetsRef, isExitingRef, exitCycleIdShared, markExitKeyDone] : void 0);
|
|
758
|
+
if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
|
|
759
|
+
console.info("[animations-reanimated] useAnimations", {
|
|
760
|
+
animationKey,
|
|
761
|
+
componentState,
|
|
762
|
+
isExiting,
|
|
763
|
+
animatedStyles,
|
|
764
|
+
staticStyles,
|
|
765
|
+
baseConfig,
|
|
766
|
+
propertyConfigs
|
|
767
|
+
});
|
|
768
|
+
}
|
|
769
|
+
return {
|
|
618
770
|
style: [staticStyles, animatedStyle]
|
|
619
771
|
};
|
|
620
772
|
}
|