@hanzogui/animations-react-native 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 +356 -252
- package/dist/cjs/createAnimations.native.js +410 -315
- 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/cjs/polyfill.cjs +3 -1
- package/dist/cjs/polyfill.native.js +3 -1
- package/dist/cjs/polyfill.native.js.map +1 -1
- package/dist/esm/createAnimations.mjs +325 -224
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +379 -287
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/dist/esm/polyfill.mjs +3 -1
- package/dist/esm/polyfill.mjs.map +1 -1
- package/dist/esm/polyfill.native.js +3 -1
- package/dist/esm/polyfill.native.js.map +1 -1
- package/package.json +6 -6
- package/src/createAnimations.tsx +9 -1
- package/types/createAnimations.d.ts +1 -0
- package/types/createAnimations.d.ts.map +2 -2
|
@@ -4,33 +4,35 @@ 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
|
AnimatedText: () => AnimatedText,
|
|
@@ -38,74 +40,79 @@ __export(createAnimations_exports, {
|
|
|
38
40
|
createAnimations: () => createAnimations,
|
|
39
41
|
useAnimatedNumber: () => useAnimatedNumber,
|
|
40
42
|
useAnimatedNumberReaction: () => useAnimatedNumberReaction,
|
|
41
|
-
useAnimatedNumberStyle: () => useAnimatedNumberStyle
|
|
43
|
+
useAnimatedNumberStyle: () => useAnimatedNumberStyle,
|
|
44
|
+
useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
|
|
42
45
|
});
|
|
43
46
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
44
|
-
var import_animation_helpers = require("@hanzogui/animation-helpers")
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
var import_animation_helpers = require("@hanzogui/animation-helpers");
|
|
48
|
+
var import_constants = require("@hanzogui/constants");
|
|
49
|
+
var import_use_presence = require("@hanzogui/use-presence");
|
|
50
|
+
var import_web = require("@hanzogui/web");
|
|
51
|
+
var import_react = __toESM(require("react"), 1);
|
|
52
|
+
var import_react_native = require("react-native");
|
|
50
53
|
function _type_of(obj) {
|
|
51
54
|
"@swc/helpers - typeof";
|
|
52
55
|
|
|
53
|
-
return obj && typeof Symbol
|
|
56
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
54
57
|
}
|
|
55
|
-
var isFabric = !import_constants.isWeb && typeof global
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
|
|
58
|
+
var isFabric = !import_constants.isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
|
|
59
|
+
var resolveDynamicValue = function (value, isDark) {
|
|
60
|
+
if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
|
|
61
|
+
var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
|
|
62
|
+
return dynamicValue;
|
|
63
|
+
}
|
|
64
|
+
return value;
|
|
65
|
+
};
|
|
66
|
+
var animatedStyleKey = {
|
|
67
|
+
transform: true,
|
|
68
|
+
opacity: true
|
|
69
|
+
};
|
|
70
|
+
var colorStyleKey = {
|
|
71
|
+
backgroundColor: true,
|
|
72
|
+
color: true,
|
|
73
|
+
borderColor: true,
|
|
74
|
+
borderLeftColor: true,
|
|
75
|
+
borderRightColor: true,
|
|
76
|
+
borderTopColor: true,
|
|
77
|
+
borderBottomColor: true
|
|
78
|
+
};
|
|
79
|
+
var costlyToAnimateStyleKey = {
|
|
80
|
+
borderRadius: true,
|
|
81
|
+
borderTopLeftRadius: true,
|
|
82
|
+
borderTopRightRadius: true,
|
|
83
|
+
borderBottomLeftRadius: true,
|
|
84
|
+
borderBottomRightRadius: true,
|
|
85
|
+
borderWidth: true,
|
|
86
|
+
borderLeftWidth: true,
|
|
87
|
+
borderRightWidth: true,
|
|
88
|
+
borderTopWidth: true,
|
|
89
|
+
borderBottomWidth: true,
|
|
90
|
+
...colorStyleKey
|
|
91
|
+
};
|
|
92
|
+
var AnimatedView = import_react_native.Animated.View;
|
|
93
|
+
var AnimatedText = import_react_native.Animated.Text;
|
|
91
94
|
function useAnimatedNumber(initial) {
|
|
92
95
|
var state = import_react.default.useRef(null);
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
if (!state.current) {
|
|
97
|
+
state.current = {
|
|
98
|
+
composite: null,
|
|
99
|
+
val: new import_react_native.Animated.Value(initial),
|
|
100
|
+
strategy: {
|
|
101
|
+
type: "spring"
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
100
106
|
getInstance() {
|
|
101
107
|
return state.current.val;
|
|
102
108
|
},
|
|
103
109
|
getValue() {
|
|
104
|
-
return state.current.val
|
|
110
|
+
return state.current.val["_value"];
|
|
105
111
|
},
|
|
106
112
|
stop() {
|
|
107
113
|
var _state_current_composite;
|
|
108
|
-
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0
|
|
114
|
+
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
115
|
+
state.current.composite = null;
|
|
109
116
|
},
|
|
110
117
|
setValue(next) {
|
|
111
118
|
var {
|
|
@@ -114,297 +121,357 @@ function useAnimatedNumber(initial) {
|
|
|
114
121
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
|
|
115
122
|
type: "spring"
|
|
116
123
|
},
|
|
117
|
-
onFinish = arguments.length > 2 ? arguments[2] : void 0
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
if (type === "direct")
|
|
124
|
+
onFinish = arguments.length > 2 ? arguments[2] : void 0;
|
|
125
|
+
var val = state.current.val;
|
|
126
|
+
var handleFinish = onFinish ? function (param) {
|
|
127
|
+
var {
|
|
128
|
+
finished
|
|
129
|
+
} = param;
|
|
130
|
+
return finished ? onFinish() : null;
|
|
131
|
+
} : void 0;
|
|
132
|
+
if (type === "direct") {
|
|
133
|
+
val.setValue(next);
|
|
134
|
+
} else if (type === "spring") {
|
|
126
135
|
var _state_current_composite;
|
|
127
|
-
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0
|
|
136
|
+
(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
|
|
128
137
|
var composite = import_react_native.Animated.spring(val, {
|
|
129
138
|
...config,
|
|
130
139
|
toValue: next,
|
|
131
140
|
useNativeDriver: isFabric
|
|
132
141
|
});
|
|
133
|
-
composite.start(handleFinish)
|
|
142
|
+
composite.start(handleFinish);
|
|
143
|
+
state.current.composite = composite;
|
|
134
144
|
} else {
|
|
135
145
|
var _state_current_composite1;
|
|
136
|
-
(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0
|
|
146
|
+
(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
|
|
137
147
|
var composite1 = import_react_native.Animated.timing(val, {
|
|
138
148
|
...config,
|
|
139
149
|
toValue: next,
|
|
140
150
|
useNativeDriver: isFabric
|
|
141
151
|
});
|
|
142
|
-
composite1.start(handleFinish)
|
|
152
|
+
composite1.start(handleFinish);
|
|
153
|
+
state.current.composite = composite1;
|
|
143
154
|
}
|
|
144
155
|
}
|
|
145
156
|
};
|
|
146
157
|
}
|
|
147
158
|
var useAnimatedNumberReaction = function (param, onValue) {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
159
|
+
var {
|
|
160
|
+
value
|
|
161
|
+
} = param;
|
|
162
|
+
var onChange = (0, import_web.useEvent)(function (current) {
|
|
163
|
+
onValue(current.value);
|
|
164
|
+
});
|
|
165
|
+
import_react.default.useEffect(function () {
|
|
166
|
+
var id = value.getInstance().addListener(onChange);
|
|
167
|
+
return function () {
|
|
168
|
+
value.getInstance().removeListener(id);
|
|
169
|
+
};
|
|
170
|
+
}, [value, onChange]);
|
|
171
|
+
};
|
|
172
|
+
var useAnimatedNumberStyle = function (value, getStyle) {
|
|
173
|
+
return getStyle(value.getInstance());
|
|
174
|
+
};
|
|
175
|
+
var useAnimatedNumbersStyle = function (vals, getStyle) {
|
|
176
|
+
return getStyle(...vals.map(function (v) {
|
|
177
|
+
return v.getInstance();
|
|
178
|
+
}));
|
|
179
|
+
};
|
|
164
180
|
function createAnimations(animations, options) {
|
|
165
|
-
var _options_useNativeDriver
|
|
166
|
-
|
|
181
|
+
var _options_useNativeDriver;
|
|
182
|
+
var nativeDriver = (_options_useNativeDriver = options === null || options === void 0 ? void 0 : options.useNativeDriver) !== null && _options_useNativeDriver !== void 0 ? _options_useNativeDriver : isFabric;
|
|
167
183
|
return {
|
|
168
|
-
isReactNative:
|
|
184
|
+
isReactNative: true,
|
|
169
185
|
inputStyle: "value",
|
|
170
186
|
outputStyle: "inline",
|
|
171
|
-
avoidReRenders:
|
|
187
|
+
avoidReRenders: true,
|
|
172
188
|
animations,
|
|
173
|
-
needsCustomComponent:
|
|
189
|
+
needsCustomComponent: true,
|
|
174
190
|
View: AnimatedView,
|
|
175
191
|
Text: AnimatedText,
|
|
176
192
|
useAnimatedNumber,
|
|
177
193
|
useAnimatedNumberReaction,
|
|
178
194
|
useAnimatedNumberStyle,
|
|
195
|
+
useAnimatedNumbersStyle,
|
|
179
196
|
usePresence: import_use_presence.usePresence,
|
|
180
197
|
ResetPresence: import_use_presence.ResetPresence,
|
|
181
198
|
useAnimations: function (param) {
|
|
182
199
|
var {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
200
|
+
props,
|
|
201
|
+
onDidAnimate,
|
|
202
|
+
style,
|
|
203
|
+
componentState,
|
|
204
|
+
presence,
|
|
205
|
+
useStyleEmitter
|
|
206
|
+
} = param;
|
|
207
|
+
var _themeState_name;
|
|
208
|
+
var isDisabled = import_constants.isWeb && componentState.unmounted === true;
|
|
209
|
+
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
210
|
+
var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
|
|
211
|
+
var [, themeState] = (0, import_web.useThemeWithState)({});
|
|
212
|
+
var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
|
|
213
|
+
var animateStyles = import_react.default.useRef({});
|
|
214
|
+
var animatedTranforms = import_react.default.useRef([]);
|
|
215
|
+
var animationsState = import_react.default.useRef(/* @__PURE__ */new WeakMap());
|
|
216
|
+
var exitCycleIdRef = import_react.default.useRef(0);
|
|
217
|
+
var exitCompletedRef = import_react.default.useRef(false);
|
|
218
|
+
var wasExitingRef = import_react.default.useRef(false);
|
|
219
|
+
var justStartedExiting = isExiting && !wasExitingRef.current;
|
|
220
|
+
var justStoppedExiting = !isExiting && wasExitingRef.current;
|
|
221
|
+
if (justStartedExiting) {
|
|
222
|
+
exitCycleIdRef.current++;
|
|
223
|
+
exitCompletedRef.current = false;
|
|
224
|
+
}
|
|
225
|
+
if (justStoppedExiting) {
|
|
226
|
+
exitCycleIdRef.current++;
|
|
227
|
+
}
|
|
228
|
+
var animateOnly = props.animateOnly || [];
|
|
229
|
+
var hasTransitionOnly = !!props.animateOnly;
|
|
230
|
+
var isEntering = !!componentState.unmounted;
|
|
231
|
+
var wasEnteringRef = import_react.default.useRef(isEntering);
|
|
232
|
+
var justFinishedEntering = wasEnteringRef.current && !isEntering;
|
|
210
233
|
import_react.default.useEffect(function () {
|
|
211
234
|
wasEnteringRef.current = isEntering;
|
|
212
235
|
});
|
|
213
|
-
var args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering, hasTransitionOnly]
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
236
|
+
var args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering, hasTransitionOnly];
|
|
237
|
+
var res = import_react.default.useMemo(function () {
|
|
238
|
+
var runners = [];
|
|
239
|
+
var completions = [];
|
|
240
|
+
var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
|
|
241
|
+
var nonAnimatedStyle = {};
|
|
242
|
+
for (var key in style) {
|
|
243
|
+
var rawVal = style[key];
|
|
244
|
+
var val = resolveDynamicValue(rawVal, isDark);
|
|
245
|
+
if (val === void 0) continue;
|
|
246
|
+
if (isDisabled) {
|
|
247
|
+
continue;
|
|
248
|
+
}
|
|
249
|
+
if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
|
|
250
|
+
nonAnimatedStyle[key] = val;
|
|
251
|
+
continue;
|
|
252
|
+
}
|
|
253
|
+
if (hasTransitionOnly && !animateOnly.includes(key)) {
|
|
254
|
+
nonAnimatedStyle[key] = val;
|
|
255
|
+
continue;
|
|
256
|
+
}
|
|
257
|
+
if (key !== "transform") {
|
|
258
|
+
animateStyles.current[key] = update(key, animateStyles.current[key], val);
|
|
259
|
+
continue;
|
|
260
|
+
}
|
|
261
|
+
if (!val) continue;
|
|
262
|
+
if (typeof val === "string") {
|
|
263
|
+
console.warn(`Warning: GUI can't animate string transforms yet!`);
|
|
264
|
+
continue;
|
|
265
|
+
}
|
|
266
|
+
var _iteratorNormalCompletion = true,
|
|
267
|
+
_didIteratorError = false,
|
|
268
|
+
_iteratorError = void 0;
|
|
269
|
+
try {
|
|
270
|
+
for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
271
|
+
var [index, transform] = _step.value;
|
|
272
|
+
var _animatedTranforms_current_index;
|
|
273
|
+
if (!transform) continue;
|
|
274
|
+
var tkey = Object.keys(transform)[0];
|
|
275
|
+
var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
276
|
+
animatedTranforms.current[index] = {
|
|
277
|
+
[tkey]: update(tkey, currentTransform, transform[tkey])
|
|
278
|
+
};
|
|
279
|
+
animatedTranforms.current = [...animatedTranforms.current];
|
|
280
|
+
}
|
|
281
|
+
} catch (err) {
|
|
282
|
+
_didIteratorError = true;
|
|
283
|
+
_iteratorError = err;
|
|
284
|
+
} finally {
|
|
285
|
+
try {
|
|
286
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
287
|
+
_iterator.return();
|
|
234
288
|
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
continue;
|
|
239
|
-
}
|
|
240
|
-
var _iteratorNormalCompletion = !0,
|
|
241
|
-
_didIteratorError = !1,
|
|
242
|
-
_iteratorError = void 0;
|
|
243
|
-
try {
|
|
244
|
-
for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
|
|
245
|
-
var [index, transform] = _step.value,
|
|
246
|
-
_animatedTranforms_current_index;
|
|
247
|
-
if (transform) {
|
|
248
|
-
var tkey = Object.keys(transform)[0],
|
|
249
|
-
currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
250
|
-
animatedTranforms.current[index] = {
|
|
251
|
-
[tkey]: update(tkey, currentTransform, transform[tkey])
|
|
252
|
-
}, animatedTranforms.current = [...animatedTranforms.current];
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
} catch (err) {
|
|
256
|
-
_didIteratorError = !0, _iteratorError = err;
|
|
257
|
-
} finally {
|
|
258
|
-
try {
|
|
259
|
-
!_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
|
|
260
|
-
} finally {
|
|
261
|
-
if (_didIteratorError) throw _iteratorError;
|
|
262
|
-
}
|
|
263
|
-
}
|
|
289
|
+
} finally {
|
|
290
|
+
if (_didIteratorError) {
|
|
291
|
+
throw _iteratorError;
|
|
264
292
|
}
|
|
265
293
|
}
|
|
266
294
|
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
})
|
|
276
|
-
} : {},
|
|
277
|
-
animatedStyle = {
|
|
278
|
-
...Object.fromEntries(Object.entries(animateStyles.current).map(function (param2) {
|
|
279
|
-
var [k, v] = param2,
|
|
280
|
-
_animationsState_current_get;
|
|
281
|
-
return [k, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
|
|
282
|
-
})),
|
|
283
|
-
...animatedTransformStyle
|
|
295
|
+
}
|
|
296
|
+
var animatedTransformStyle = animatedTranforms.current.length > 0 ? {
|
|
297
|
+
transform: animatedTranforms.current.map(function (r) {
|
|
298
|
+
var _animationsState_current_get;
|
|
299
|
+
var key2 = Object.keys(r)[0];
|
|
300
|
+
var val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
|
|
301
|
+
return {
|
|
302
|
+
[key2]: val2
|
|
284
303
|
};
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
304
|
+
})
|
|
305
|
+
} : {};
|
|
306
|
+
var animatedStyle = {
|
|
307
|
+
...Object.fromEntries(Object.entries(animateStyles.current).map(function (param2) {
|
|
308
|
+
var [k, v] = param2;
|
|
309
|
+
var _animationsState_current_get;
|
|
310
|
+
return [k, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
|
|
311
|
+
})),
|
|
312
|
+
...animatedTransformStyle
|
|
313
|
+
};
|
|
314
|
+
return {
|
|
315
|
+
runners,
|
|
316
|
+
completions,
|
|
317
|
+
style: [nonAnimatedStyle, animatedStyle]
|
|
318
|
+
};
|
|
319
|
+
function update(key2, animated, valIn) {
|
|
320
|
+
var isColorStyleKey = colorStyleKey[key2];
|
|
321
|
+
var [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
|
|
322
|
+
var animateToValue = val2;
|
|
323
|
+
var value = animated || new import_react_native.Animated.Value(val2);
|
|
324
|
+
var curInterpolation = animationsState.current.get(value);
|
|
325
|
+
var interpolateArgs;
|
|
326
|
+
if (type) {
|
|
327
|
+
var _curInterpolation_current;
|
|
328
|
+
interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], val2, type);
|
|
329
|
+
animationsState.current.set(value, {
|
|
330
|
+
interpolation: value.interpolate(interpolateArgs),
|
|
331
|
+
current: val2
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
if (isColorStyleKey) {
|
|
335
|
+
animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
|
|
336
|
+
interpolateArgs = getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current,
|
|
305
337
|
// valIn is the next color
|
|
306
|
-
valIn, animateToValue)
|
|
338
|
+
valIn, animateToValue);
|
|
339
|
+
animationsState.current.set(value, {
|
|
307
340
|
current: valIn,
|
|
308
341
|
interpolation: value.interpolate(interpolateArgs),
|
|
309
|
-
animateToValue: curInterpolation
|
|
310
|
-
})
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
342
|
+
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
if (value) {
|
|
346
|
+
var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState);
|
|
347
|
+
var resolve;
|
|
348
|
+
var promise = new Promise(function (res2) {
|
|
349
|
+
resolve = res2;
|
|
350
|
+
});
|
|
351
|
+
completions.push(promise);
|
|
352
|
+
runners.push(function () {
|
|
353
|
+
value.stopAnimation();
|
|
354
|
+
function getAnimation() {
|
|
355
|
+
return import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
356
|
+
toValue: animateToValue,
|
|
357
|
+
useNativeDriver: nativeDriver,
|
|
358
|
+
...animationConfig
|
|
315
359
|
});
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
360
|
+
}
|
|
361
|
+
var animation = animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
|
|
362
|
+
animation.start(function (param2) {
|
|
363
|
+
var {
|
|
364
|
+
finished
|
|
365
|
+
} = param2;
|
|
366
|
+
if (finished || isExiting) {
|
|
367
|
+
resolve();
|
|
324
368
|
}
|
|
325
|
-
var animation = animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
|
|
326
|
-
animation.start(function (param2) {
|
|
327
|
-
var {
|
|
328
|
-
finished
|
|
329
|
-
} = param2;
|
|
330
|
-
(finished || isExiting) && resolve();
|
|
331
|
-
});
|
|
332
369
|
});
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
if (process.env.NODE_ENV === "development") {
|
|
373
|
+
if (props["debug"] === "verbose") {
|
|
374
|
+
console.info(" \u{1F4A0} animate", key2, `from (${value["_value"]}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs);
|
|
333
375
|
}
|
|
334
|
-
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F4A0} animate", key2, `from (${value._value}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs), value;
|
|
335
376
|
}
|
|
336
|
-
|
|
337
|
-
|
|
377
|
+
return value;
|
|
378
|
+
}
|
|
379
|
+
}, args);
|
|
380
|
+
import_react.default.useEffect(function () {
|
|
338
381
|
wasExitingRef.current = isExiting;
|
|
339
|
-
})
|
|
382
|
+
});
|
|
383
|
+
(0, import_constants.useIsomorphicLayoutEffect)(function () {
|
|
340
384
|
res.runners.forEach(function (r) {
|
|
341
385
|
return r();
|
|
342
386
|
});
|
|
343
387
|
var cycleId = exitCycleIdRef.current;
|
|
344
388
|
if (res.completions.length === 0) {
|
|
345
|
-
onDidAnimate
|
|
389
|
+
onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate();
|
|
390
|
+
if (isExiting && !exitCompletedRef.current) {
|
|
391
|
+
exitCompletedRef.current = true;
|
|
392
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
393
|
+
}
|
|
346
394
|
return;
|
|
347
395
|
}
|
|
348
|
-
var cancel =
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
396
|
+
var cancel = false;
|
|
397
|
+
Promise.all(res.completions).then(function () {
|
|
398
|
+
if (cancel) return;
|
|
399
|
+
if (isExiting && cycleId !== exitCycleIdRef.current) return;
|
|
400
|
+
if (isExiting && exitCompletedRef.current) return;
|
|
401
|
+
onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate();
|
|
402
|
+
if (isExiting) {
|
|
403
|
+
exitCompletedRef.current = true;
|
|
404
|
+
sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
|
|
405
|
+
}
|
|
406
|
+
});
|
|
407
|
+
return function () {
|
|
408
|
+
cancel = true;
|
|
353
409
|
};
|
|
354
|
-
}, args)
|
|
410
|
+
}, args);
|
|
411
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle) {
|
|
355
412
|
for (var key in nextStyle) {
|
|
356
|
-
var rawVal = nextStyle[key]
|
|
357
|
-
|
|
358
|
-
if (val
|
|
359
|
-
|
|
360
|
-
|
|
413
|
+
var rawVal = nextStyle[key];
|
|
414
|
+
var val = resolveDynamicValue(rawVal, isDark);
|
|
415
|
+
if (val === void 0) continue;
|
|
416
|
+
if (key === "transform" && Array.isArray(val)) {
|
|
417
|
+
var _iteratorNormalCompletion = true,
|
|
418
|
+
_didIteratorError = false,
|
|
361
419
|
_iteratorError = void 0;
|
|
362
420
|
try {
|
|
363
|
-
for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
364
|
-
var [index, transform] = _step.value
|
|
365
|
-
|
|
366
|
-
if (transform)
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
}
|
|
421
|
+
for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
422
|
+
var [index, transform] = _step.value;
|
|
423
|
+
var _animatedTranforms_current_index;
|
|
424
|
+
if (!transform) continue;
|
|
425
|
+
var tkey = Object.keys(transform)[0];
|
|
426
|
+
var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
|
|
427
|
+
animatedTranforms.current[index] = {
|
|
428
|
+
[tkey]: update(tkey, currentTransform, transform[tkey])
|
|
429
|
+
};
|
|
373
430
|
}
|
|
374
431
|
} catch (err) {
|
|
375
|
-
_didIteratorError =
|
|
432
|
+
_didIteratorError = true;
|
|
433
|
+
_iteratorError = err;
|
|
376
434
|
} finally {
|
|
377
435
|
try {
|
|
378
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
436
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
437
|
+
_iterator.return();
|
|
438
|
+
}
|
|
379
439
|
} finally {
|
|
380
|
-
if (_didIteratorError)
|
|
440
|
+
if (_didIteratorError) {
|
|
441
|
+
throw _iteratorError;
|
|
442
|
+
}
|
|
381
443
|
}
|
|
382
444
|
}
|
|
383
|
-
} else (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key])
|
|
445
|
+
} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key]) {
|
|
446
|
+
animateStyles.current[key] = update(key, animateStyles.current[key], val);
|
|
447
|
+
}
|
|
384
448
|
}
|
|
385
449
|
res.runners.forEach(function (r) {
|
|
386
450
|
return r();
|
|
387
451
|
});
|
|
388
452
|
function update(key2, animated, valIn) {
|
|
389
|
-
var isColor = colorStyleKey[key2]
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
453
|
+
var isColor = colorStyleKey[key2];
|
|
454
|
+
var [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
|
|
455
|
+
var animateToValue = numVal;
|
|
456
|
+
var value = animated || new import_react_native.Animated.Value(numVal);
|
|
457
|
+
var curInterpolation = animationsState.current.get(value);
|
|
394
458
|
if (type) {
|
|
395
459
|
var _curInterpolation_current;
|
|
396
460
|
animationsState.current.set(value, {
|
|
397
|
-
interpolation: value.interpolate(getInterpolated((_curInterpolation_current = curInterpolation
|
|
461
|
+
interpolation: value.interpolate(getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], numVal, type)),
|
|
398
462
|
current: numVal
|
|
399
463
|
});
|
|
400
464
|
}
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
465
|
+
if (isColor) {
|
|
466
|
+
animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
|
|
467
|
+
animationsState.current.set(value, {
|
|
468
|
+
current: valIn,
|
|
469
|
+
interpolation: value.interpolate(getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue)),
|
|
470
|
+
animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
|
|
471
|
+
});
|
|
472
|
+
}
|
|
406
473
|
var animationConfig = getAnimationConfig(key2, animations, props.transition, "default");
|
|
407
|
-
|
|
474
|
+
res.runners.push(function () {
|
|
408
475
|
value.stopAnimation();
|
|
409
476
|
var anim = import_react_native.Animated[animationConfig.type || "spring"](value, {
|
|
410
477
|
toValue: animateToValue,
|
|
@@ -412,46 +479,72 @@ function createAnimations(animations, options) {
|
|
|
412
479
|
...animationConfig
|
|
413
480
|
});
|
|
414
481
|
(animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), anim]) : anim).start();
|
|
415
|
-
})
|
|
482
|
+
});
|
|
483
|
+
return value;
|
|
484
|
+
}
|
|
485
|
+
});
|
|
486
|
+
if (process.env.NODE_ENV === "development") {
|
|
487
|
+
if (props["debug"] === "verbose") {
|
|
488
|
+
console.info(`Animated`, {
|
|
489
|
+
response: res,
|
|
490
|
+
inputStyle: style,
|
|
491
|
+
isExiting
|
|
492
|
+
});
|
|
416
493
|
}
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
inputStyle: style,
|
|
420
|
-
isExiting
|
|
421
|
-
}), res;
|
|
494
|
+
}
|
|
495
|
+
return res;
|
|
422
496
|
}
|
|
423
497
|
};
|
|
424
498
|
}
|
|
425
499
|
function getColorInterpolated(currentColor, nextColor, animateToValue) {
|
|
426
|
-
var inputRange = [0, 1]
|
|
427
|
-
|
|
428
|
-
|
|
500
|
+
var inputRange = [0, 1];
|
|
501
|
+
var outputRange = [currentColor ? currentColor : nextColor, nextColor];
|
|
502
|
+
if (animateToValue === 0) {
|
|
503
|
+
outputRange.reverse();
|
|
504
|
+
}
|
|
505
|
+
return {
|
|
429
506
|
inputRange,
|
|
430
507
|
outputRange
|
|
431
508
|
};
|
|
432
509
|
}
|
|
433
510
|
function getInterpolated(current, next) {
|
|
434
511
|
var postfix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "deg";
|
|
435
|
-
next === current
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
512
|
+
if (next === current) {
|
|
513
|
+
current = next - 1e-9;
|
|
514
|
+
}
|
|
515
|
+
var inputRange = [current, next];
|
|
516
|
+
var outputRange = [`${current}${postfix}`, `${next}${postfix}`];
|
|
517
|
+
if (next < current) {
|
|
518
|
+
inputRange.reverse();
|
|
519
|
+
outputRange.reverse();
|
|
520
|
+
}
|
|
521
|
+
return {
|
|
439
522
|
inputRange,
|
|
440
523
|
outputRange
|
|
441
524
|
};
|
|
442
525
|
}
|
|
443
526
|
function getAnimationConfig(key, animations, transition) {
|
|
444
|
-
var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default"
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
527
|
+
var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
|
|
528
|
+
var normalized = (0, import_animation_helpers.normalizeTransition)(transition);
|
|
529
|
+
var shortKey = transformShorthands[key];
|
|
530
|
+
var _normalized_properties_key;
|
|
531
|
+
var propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey];
|
|
532
|
+
var animationType = null;
|
|
533
|
+
var extraConf = {};
|
|
534
|
+
if (typeof propAnimation === "string") {
|
|
535
|
+
animationType = propAnimation;
|
|
536
|
+
} else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
|
|
537
|
+
animationType = propAnimation.type || (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
538
|
+
extraConf = propAnimation;
|
|
539
|
+
} else {
|
|
540
|
+
animationType = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
541
|
+
}
|
|
542
|
+
if (normalized.delay && !extraConf.delay) {
|
|
543
|
+
extraConf = {
|
|
544
|
+
...extraConf,
|
|
545
|
+
delay: normalized.delay
|
|
546
|
+
};
|
|
547
|
+
}
|
|
455
548
|
var found = animationType ? animations[animationType] : {};
|
|
456
549
|
return {
|
|
457
550
|
...found,
|
|
@@ -468,10 +561,12 @@ var transformShorthands = {
|
|
|
468
561
|
translateY: "y"
|
|
469
562
|
};
|
|
470
563
|
function getValue(input) {
|
|
471
|
-
var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] :
|
|
472
|
-
if (typeof input
|
|
473
|
-
|
|
474
|
-
|
|
564
|
+
var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
565
|
+
if (typeof input !== "string") {
|
|
566
|
+
return [input];
|
|
567
|
+
}
|
|
568
|
+
var _input_match;
|
|
569
|
+
var [_, number, after] = (_input_match = input.match(/([-0-9]+)(deg|%|px)/)) !== null && _input_match !== void 0 ? _input_match : [];
|
|
475
570
|
return [+number, after];
|
|
476
571
|
}
|
|
477
572
|
//# sourceMappingURL=createAnimations.native.js.map
|