@hanzogui/animations-motion 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 +503 -254
- package/dist/cjs/createAnimations.native.js +593 -319
- package/dist/cjs/createAnimations.native.js.map +1 -1
- package/dist/cjs/index.cjs +7 -5
- package/dist/cjs/index.native.js +21 -13
- 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 +473 -226
- package/dist/esm/createAnimations.mjs.map +1 -1
- package/dist/esm/createAnimations.native.js +563 -291
- package/dist/esm/createAnimations.native.js.map +1 -1
- package/dist/esm/index.native.js +9 -3
- package/dist/esm/index.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 +5 -5
- package/src/createAnimations.tsx +104 -18
- package/types/createAnimations.d.ts.map +2 -2
|
@@ -4,251 +4,365 @@ 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
|
disableAnimationProps: () => disableAnimationProps
|
|
38
40
|
});
|
|
39
41
|
module.exports = __toCommonJS(createAnimations_exports);
|
|
40
|
-
var import_jsx_runtime = require("react/jsx-runtime")
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
|
+
var import_animation_helpers = require("@hanzogui/animation-helpers");
|
|
44
|
+
var import_use_presence = require("@hanzogui/use-presence");
|
|
45
|
+
var import_web = require("@hanzogui/web");
|
|
46
|
+
var import_react = require("motion/react");
|
|
47
|
+
var import_react2 = __toESM(require("react"), 1);
|
|
46
48
|
function _instanceof(left, right) {
|
|
47
|
-
|
|
49
|
+
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
|
|
50
|
+
return !!right[Symbol.hasInstance](left);
|
|
51
|
+
} else {
|
|
52
|
+
return left instanceof right;
|
|
53
|
+
}
|
|
48
54
|
}
|
|
49
55
|
function _type_of(obj) {
|
|
50
56
|
"@swc/helpers - typeof";
|
|
51
57
|
|
|
52
|
-
return obj && typeof Symbol
|
|
58
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
53
59
|
}
|
|
54
|
-
var isServer = typeof window
|
|
60
|
+
var isServer = typeof window === "undefined";
|
|
55
61
|
function useAnimateSSRSafe() {
|
|
56
|
-
|
|
62
|
+
if (isServer) {
|
|
63
|
+
return [(0, import_react2.useRef)(null), function () {}];
|
|
64
|
+
}
|
|
65
|
+
return (0, import_react.useAnimate)();
|
|
57
66
|
}
|
|
58
67
|
var MotionValueStrategy = /* @__PURE__ */new WeakMap();
|
|
68
|
+
var PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
|
|
69
|
+
function settlePendingMotionOnFinish(mv, controls) {
|
|
70
|
+
var onFinish = PendingMotionOnFinish.get(mv);
|
|
71
|
+
if (!onFinish) return;
|
|
72
|
+
PendingMotionOnFinish.delete(mv);
|
|
73
|
+
controls.then(function () {
|
|
74
|
+
return onFinish();
|
|
75
|
+
}).catch(function () {
|
|
76
|
+
return onFinish();
|
|
77
|
+
});
|
|
78
|
+
}
|
|
59
79
|
function createAnimations(animations) {
|
|
60
|
-
var isHydratingGlobal
|
|
61
|
-
|
|
80
|
+
var isHydratingGlobal;
|
|
81
|
+
var hydratingComponents = /* @__PURE__ */new Set();
|
|
62
82
|
return {
|
|
63
83
|
View: MotionView,
|
|
64
84
|
Text: MotionText,
|
|
65
|
-
isReactNative:
|
|
85
|
+
isReactNative: false,
|
|
66
86
|
inputStyle: "css",
|
|
67
87
|
outputStyle: "inline",
|
|
68
|
-
avoidReRenders:
|
|
88
|
+
avoidReRenders: true,
|
|
69
89
|
animations,
|
|
70
90
|
usePresence: import_use_presence.usePresence,
|
|
71
91
|
ResetPresence: import_use_presence.ResetPresence,
|
|
72
92
|
onMount() {
|
|
73
|
-
isHydratingGlobal =
|
|
93
|
+
isHydratingGlobal = false;
|
|
94
|
+
hydratingComponents.forEach(function (cb) {
|
|
74
95
|
return cb();
|
|
75
96
|
});
|
|
76
97
|
},
|
|
77
98
|
useAnimations: function (animationProps) {
|
|
78
|
-
isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR
|
|
99
|
+
if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
|
|
100
|
+
isHydratingGlobal = true;
|
|
101
|
+
}
|
|
79
102
|
var {
|
|
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
|
-
|
|
103
|
+
props,
|
|
104
|
+
style,
|
|
105
|
+
componentState,
|
|
106
|
+
stateRef,
|
|
107
|
+
useStyleEmitter,
|
|
108
|
+
presence
|
|
109
|
+
} = animationProps;
|
|
110
|
+
var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
|
|
111
|
+
var isComponentHydrating = componentState.unmounted === true;
|
|
112
|
+
var isMounting = componentState.unmounted === "should-enter";
|
|
113
|
+
var isEntering = !!componentState.unmounted;
|
|
114
|
+
var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
|
|
115
|
+
var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
|
|
116
|
+
var refs = (0, import_react2.useRef)(null);
|
|
117
|
+
if (!refs.current) {
|
|
118
|
+
refs.current = {
|
|
119
|
+
isFirstRender: true,
|
|
120
|
+
lastDoAnimate: null,
|
|
121
|
+
lastDontAnimate: null,
|
|
122
|
+
controls: null,
|
|
123
|
+
lastAnimateAt: 0,
|
|
124
|
+
disposed: false,
|
|
125
|
+
wasExiting: false,
|
|
126
|
+
isExiting: false,
|
|
127
|
+
sendExitComplete: void 0,
|
|
128
|
+
animationState: "default",
|
|
129
|
+
frozenExitTarget: null,
|
|
130
|
+
exitCompleteScheduled: false,
|
|
131
|
+
wasEntering: false
|
|
132
|
+
};
|
|
133
|
+
}
|
|
109
134
|
var justFinishedEntering = refs.current.wasEntering && !isEntering;
|
|
110
135
|
(0, import_react2.useEffect)(function () {
|
|
111
136
|
refs.current.wasEntering = isEntering;
|
|
112
137
|
});
|
|
113
|
-
var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default"
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
refs.current.isExiting = isExiting
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
138
|
+
var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
|
|
139
|
+
var disableAnimation = isComponentHydrating || isMounting || !animationKey;
|
|
140
|
+
var [scope, animate] = useAnimateSSRSafe();
|
|
141
|
+
refs.current.isExiting = isExiting;
|
|
142
|
+
refs.current.sendExitComplete = sendExitComplete;
|
|
143
|
+
refs.current.animationState = animationState;
|
|
144
|
+
var justStartedExiting = isExiting && !refs.current.wasExiting;
|
|
145
|
+
var justStoppedExiting = !isExiting && refs.current.wasExiting;
|
|
146
|
+
if (justStartedExiting || justStoppedExiting) {
|
|
147
|
+
refs.current.frozenExitTarget = null;
|
|
148
|
+
refs.current.exitCompleteScheduled = false;
|
|
149
|
+
}
|
|
150
|
+
(0, import_react2.useEffect)(function () {
|
|
120
151
|
refs.current.wasExiting = isExiting;
|
|
121
152
|
});
|
|
122
153
|
var {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
154
|
+
dontAnimate = {},
|
|
155
|
+
doAnimate,
|
|
156
|
+
animationOptions
|
|
157
|
+
} = getMotionAnimatedProps(props, style, disableAnimation, animationState);
|
|
158
|
+
var [firstRenderStyle] = (0, import_react2.useState)(style);
|
|
159
|
+
if (refs.current.isFirstRender) {
|
|
160
|
+
refs.current.lastDontAnimate = firstRenderStyle;
|
|
161
|
+
}
|
|
129
162
|
var [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
|
|
130
163
|
(0, import_react2.useLayoutEffect)(function () {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
164
|
+
if (isHydratingGlobal) {
|
|
165
|
+
hydratingComponents.add(function () {
|
|
166
|
+
setIsHydrating(false);
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
return function () {
|
|
170
|
+
refs.current.disposed = true;
|
|
135
171
|
};
|
|
136
172
|
}, []);
|
|
137
173
|
var flushAnimation = function (param) {
|
|
138
174
|
var {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
isCurrentlyExiting && refs.current.frozenExitTarget
|
|
148
|
-
|
|
149
|
-
|
|
175
|
+
doAnimate: doAnimateRaw = {},
|
|
176
|
+
animationOptions: passedOptions = {},
|
|
177
|
+
dontAnimate: dontAnimate2
|
|
178
|
+
} = param;
|
|
179
|
+
var startedControls = null;
|
|
180
|
+
var isCurrentlyExiting = refs.current.isExiting;
|
|
181
|
+
var currentSendExitComplete = refs.current.sendExitComplete;
|
|
182
|
+
var doAnimate2 = doAnimateRaw;
|
|
183
|
+
if (isCurrentlyExiting && refs.current.frozenExitTarget) {
|
|
184
|
+
doAnimate2 = refs.current.frozenExitTarget;
|
|
185
|
+
}
|
|
186
|
+
var _props_transition;
|
|
187
|
+
var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
|
|
150
188
|
try {
|
|
151
189
|
var node = stateRef.current.host;
|
|
152
|
-
if (refs.current.isFirstRender
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
190
|
+
if (refs.current.isFirstRender) {
|
|
191
|
+
refs.current.lastDontAnimate = null;
|
|
192
|
+
refs.current.lastDoAnimate = null;
|
|
193
|
+
}
|
|
194
|
+
if (process.env.NODE_ENV === "development") {
|
|
195
|
+
if (props["debug"] && props["debug"] !== "profile") {
|
|
196
|
+
console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
|
|
197
|
+
console.info({
|
|
198
|
+
props,
|
|
199
|
+
componentState,
|
|
200
|
+
doAnimate: doAnimate2,
|
|
201
|
+
dontAnimate: dontAnimate2,
|
|
202
|
+
animationOptions: animationOptions2,
|
|
203
|
+
animationProps,
|
|
204
|
+
lastDoAnimate: {
|
|
205
|
+
...refs.current.lastDoAnimate
|
|
206
|
+
},
|
|
207
|
+
lastDontAnimate: {
|
|
208
|
+
...refs.current.lastDontAnimate
|
|
209
|
+
},
|
|
210
|
+
isExiting,
|
|
211
|
+
style,
|
|
212
|
+
node
|
|
213
|
+
});
|
|
214
|
+
console.groupCollapsed(`trace >`);
|
|
215
|
+
console.trace();
|
|
216
|
+
console.groupEnd();
|
|
217
|
+
console.groupEnd();
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
if (!_instanceof(node, HTMLElement)) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
169
223
|
var prevDont = refs.current.lastDontAnimate;
|
|
170
|
-
if (dontAnimate2)
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
224
|
+
if (dontAnimate2) {
|
|
225
|
+
if (prevDont) {
|
|
226
|
+
removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
|
|
227
|
+
var changed = getDiff(prevDont, dontAnimate2);
|
|
228
|
+
if (changed) {
|
|
229
|
+
Object.assign(node.style, changed);
|
|
230
|
+
}
|
|
231
|
+
} else {
|
|
232
|
+
Object.assign(node.style, dontAnimate2);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
175
235
|
if (doAnimate2) {
|
|
176
|
-
if (prevDont)
|
|
236
|
+
if (prevDont) {
|
|
237
|
+
for (var key in prevDont) {
|
|
238
|
+
if (key in doAnimate2) {
|
|
239
|
+
node.style[key] = prevDont[key];
|
|
240
|
+
if (refs.current.lastDoAnimate) {
|
|
241
|
+
refs.current.lastDoAnimate[key] = prevDont[key];
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
177
246
|
var lastAnimated = refs.current.lastDoAnimate;
|
|
178
|
-
|
|
247
|
+
if (lastAnimated) {
|
|
248
|
+
removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
|
|
249
|
+
}
|
|
179
250
|
var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
|
|
180
251
|
if (diff) {
|
|
181
|
-
isCurrentlyExiting && !refs.current.frozenExitTarget
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
252
|
+
if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
|
|
253
|
+
refs.current.frozenExitTarget = {
|
|
254
|
+
...doAnimate2
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
var isPopperPosition = node.hasAttribute("data-popper-animate-position");
|
|
258
|
+
var midFlightValues = null;
|
|
186
259
|
if (refs.current.controls) {
|
|
187
260
|
try {
|
|
188
261
|
var computed = getComputedStyle(node);
|
|
189
262
|
midFlightValues = {};
|
|
190
263
|
for (var key1 in diff) {
|
|
191
264
|
var val = computed[key1];
|
|
192
|
-
val !== void 0 && val !== ""
|
|
265
|
+
if (val !== void 0 && val !== "") {
|
|
266
|
+
midFlightValues[key1] = val;
|
|
267
|
+
}
|
|
193
268
|
}
|
|
194
|
-
} catch {}
|
|
195
|
-
if (isCurrentlyExiting
|
|
269
|
+
} catch (e) {}
|
|
270
|
+
if (isCurrentlyExiting) {
|
|
271
|
+
refs.current.controls.stop();
|
|
272
|
+
}
|
|
273
|
+
if (midFlightValues) {
|
|
274
|
+
for (var key2 in midFlightValues) {
|
|
275
|
+
;
|
|
276
|
+
node.style[key2] = midFlightValues[key2];
|
|
277
|
+
}
|
|
278
|
+
}
|
|
196
279
|
if (isPopperPosition) {
|
|
197
|
-
var anims = node.getAnimations()
|
|
198
|
-
|
|
199
|
-
_didIteratorError =
|
|
280
|
+
var anims = node.getAnimations();
|
|
281
|
+
var _iteratorNormalCompletion = true,
|
|
282
|
+
_didIteratorError = false,
|
|
200
283
|
_iteratorError = void 0;
|
|
201
284
|
try {
|
|
202
|
-
for (var _iterator = anims[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
285
|
+
for (var _iterator = anims[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
203
286
|
var anim = _step.value;
|
|
204
287
|
anim.cancel();
|
|
205
288
|
}
|
|
206
289
|
} catch (err) {
|
|
207
|
-
_didIteratorError =
|
|
290
|
+
_didIteratorError = true;
|
|
291
|
+
_iteratorError = err;
|
|
208
292
|
} finally {
|
|
209
293
|
try {
|
|
210
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
294
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
295
|
+
_iterator.return();
|
|
296
|
+
}
|
|
211
297
|
} finally {
|
|
212
|
-
if (_didIteratorError)
|
|
298
|
+
if (_didIteratorError) {
|
|
299
|
+
throw _iteratorError;
|
|
300
|
+
}
|
|
213
301
|
}
|
|
214
302
|
}
|
|
215
303
|
}
|
|
216
304
|
}
|
|
217
305
|
var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
|
|
218
|
-
midFlightValues
|
|
306
|
+
if ((midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && fixedDiff.transform) {
|
|
307
|
+
fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
|
|
308
|
+
}
|
|
309
|
+
startedControls = animate(scope.current, fixedDiff, animationOptions2);
|
|
310
|
+
refs.current.controls = startedControls;
|
|
311
|
+
refs.current.lastAnimateAt = Date.now();
|
|
219
312
|
}
|
|
220
313
|
}
|
|
221
314
|
refs.current.lastDontAnimate = dontAnimate2 ? {
|
|
222
315
|
...dontAnimate2
|
|
223
|
-
} : {}
|
|
316
|
+
} : {};
|
|
317
|
+
refs.current.lastDoAnimate = doAnimate2 ? {
|
|
224
318
|
...doAnimate2
|
|
225
319
|
} : {};
|
|
226
320
|
} finally {
|
|
227
|
-
isCurrentlyExiting && currentSendExitComplete
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
321
|
+
if (isCurrentlyExiting && currentSendExitComplete) {
|
|
322
|
+
if (startedControls) {
|
|
323
|
+
refs.current.exitCompleteScheduled = true;
|
|
324
|
+
startedControls.finished.then(function () {
|
|
325
|
+
if (refs.current.isExiting) {
|
|
326
|
+
currentSendExitComplete();
|
|
327
|
+
}
|
|
328
|
+
}).catch(function () {
|
|
329
|
+
if (refs.current.isExiting) {
|
|
330
|
+
currentSendExitComplete();
|
|
331
|
+
}
|
|
332
|
+
});
|
|
333
|
+
} else if (!refs.current.exitCompleteScheduled) {
|
|
334
|
+
currentSendExitComplete();
|
|
335
|
+
}
|
|
336
|
+
}
|
|
232
337
|
}
|
|
233
338
|
};
|
|
234
|
-
|
|
339
|
+
useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition) {
|
|
235
340
|
var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
|
|
236
341
|
flushAnimation(_$animationProps);
|
|
237
|
-
})
|
|
342
|
+
});
|
|
343
|
+
(0, import_web.useIsomorphicLayoutEffect)(function () {
|
|
238
344
|
if (refs.current.isFirstRender) {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
345
|
+
refs.current.isFirstRender = false;
|
|
346
|
+
if (isHydrating) {
|
|
347
|
+
if (doAnimate && Object.keys(doAnimate).length > 0) {
|
|
348
|
+
refs.current.lastDoAnimate = {
|
|
349
|
+
...doAnimate
|
|
350
|
+
};
|
|
351
|
+
} else {
|
|
352
|
+
refs.current.lastDoAnimate = dontAnimate ? {
|
|
353
|
+
...dontAnimate
|
|
354
|
+
} : {};
|
|
355
|
+
}
|
|
356
|
+
refs.current.lastDontAnimate = dontAnimate ? {
|
|
245
357
|
...dontAnimate
|
|
246
|
-
} : {}
|
|
358
|
+
} : {};
|
|
359
|
+
refs.current.lastAnimateAt = Date.now();
|
|
247
360
|
return;
|
|
248
361
|
}
|
|
249
362
|
refs.current.lastDontAnimate = dontAnimate ? {
|
|
250
363
|
...dontAnimate
|
|
251
|
-
} : {}
|
|
364
|
+
} : {};
|
|
365
|
+
refs.current.lastDoAnimate = doAnimate ? {
|
|
252
366
|
...doAnimate
|
|
253
367
|
} : {};
|
|
254
368
|
return;
|
|
@@ -258,16 +372,24 @@ function createAnimations(animations) {
|
|
|
258
372
|
dontAnimate,
|
|
259
373
|
animationOptions
|
|
260
374
|
});
|
|
261
|
-
}, [style, isExiting, disableAnimation])
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
375
|
+
}, [style, isExiting, disableAnimation]);
|
|
376
|
+
if (process.env.NODE_ENV === "development") {
|
|
377
|
+
if (props["debug"] && props["debug"] !== "profile") {
|
|
378
|
+
console.groupCollapsed(`[motion] render`);
|
|
379
|
+
console.info({
|
|
380
|
+
style,
|
|
381
|
+
doAnimate,
|
|
382
|
+
dontAnimate,
|
|
383
|
+
scope,
|
|
384
|
+
animationOptions,
|
|
385
|
+
isExiting,
|
|
386
|
+
isFirstRender: refs.current.isFirstRender,
|
|
387
|
+
animationProps
|
|
388
|
+
});
|
|
389
|
+
console.groupEnd();
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
return {
|
|
271
393
|
style: firstRenderStyle,
|
|
272
394
|
ref: scope,
|
|
273
395
|
render: "div"
|
|
@@ -288,14 +410,24 @@ function createAnimations(animations) {
|
|
|
288
410
|
type: "spring"
|
|
289
411
|
},
|
|
290
412
|
onFinish = arguments.length > 2 ? arguments[2] : void 0;
|
|
291
|
-
if (config.type === "direct")
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
if (MotionValueStrategy.set(motionValue, config), onFinish) var unsubscribe = motionValue.on("change", function (value) {
|
|
295
|
-
Math.abs(value - next) < 0.01 && (unsubscribe(), onFinish());
|
|
413
|
+
if (config.type === "direct") {
|
|
414
|
+
MotionValueStrategy.set(motionValue, {
|
|
415
|
+
type: "direct"
|
|
296
416
|
});
|
|
297
417
|
motionValue.set(next);
|
|
418
|
+
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
MotionValueStrategy.set(motionValue, config);
|
|
422
|
+
if (onFinish) {
|
|
423
|
+
var prior = PendingMotionOnFinish.get(motionValue);
|
|
424
|
+
if (prior) {
|
|
425
|
+
PendingMotionOnFinish.delete(motionValue);
|
|
426
|
+
prior();
|
|
427
|
+
}
|
|
428
|
+
PendingMotionOnFinish.set(motionValue, onFinish);
|
|
298
429
|
}
|
|
430
|
+
motionValue.set(next);
|
|
299
431
|
},
|
|
300
432
|
stop() {
|
|
301
433
|
motionValue.stop();
|
|
@@ -305,15 +437,16 @@ function createAnimations(animations) {
|
|
|
305
437
|
},
|
|
306
438
|
useAnimatedNumberReaction(param, onValue) {
|
|
307
439
|
var {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
440
|
+
value
|
|
441
|
+
} = param;
|
|
442
|
+
var instance = value.getInstance();
|
|
311
443
|
(0, import_react.useMotionValueEvent)(instance, "change", onValue);
|
|
312
444
|
},
|
|
313
445
|
useAnimatedNumberStyle(val, getStyleProp) {
|
|
314
|
-
var motionValue = val.getInstance()
|
|
315
|
-
|
|
316
|
-
|
|
446
|
+
var motionValue = val.getInstance();
|
|
447
|
+
var getStyleRef = (0, import_react2.useRef)(getStyleProp);
|
|
448
|
+
getStyleRef.current = getStyleProp;
|
|
449
|
+
return (0, import_react2.useMemo)(function () {
|
|
317
450
|
return {
|
|
318
451
|
getStyle: function (cur) {
|
|
319
452
|
return getStyleRef.current(cur);
|
|
@@ -321,22 +454,48 @@ function createAnimations(animations) {
|
|
|
321
454
|
motionValue
|
|
322
455
|
};
|
|
323
456
|
}, []);
|
|
457
|
+
},
|
|
458
|
+
useAnimatedNumbersStyle(vals, getStyleProp) {
|
|
459
|
+
var motionValues = vals.map(function (v) {
|
|
460
|
+
return v.getInstance();
|
|
461
|
+
});
|
|
462
|
+
var getStyleRef = (0, import_react2.useRef)(getStyleProp);
|
|
463
|
+
getStyleRef.current = getStyleProp;
|
|
464
|
+
return (0, import_react2.useMemo)(function () {
|
|
465
|
+
return {
|
|
466
|
+
getStyle: function () {
|
|
467
|
+
for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
468
|
+
currentValues[_key] = arguments[_key];
|
|
469
|
+
}
|
|
470
|
+
return getStyleRef.current(...currentValues);
|
|
471
|
+
},
|
|
472
|
+
motionValues
|
|
473
|
+
};
|
|
474
|
+
}, []);
|
|
324
475
|
}
|
|
325
476
|
};
|
|
326
477
|
function getMotionAnimatedProps(props, style, disable) {
|
|
327
478
|
var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default",
|
|
328
479
|
transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
|
|
329
|
-
if (disable)
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
480
|
+
if (disable) {
|
|
481
|
+
return {
|
|
482
|
+
dontAnimate: style
|
|
483
|
+
};
|
|
484
|
+
}
|
|
485
|
+
var _ref;
|
|
486
|
+
var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
|
|
487
|
+
var dontAnimate;
|
|
488
|
+
var doAnimate;
|
|
489
|
+
var animateOnly = props.animateOnly;
|
|
337
490
|
for (var key in style) {
|
|
338
491
|
var value = style[key];
|
|
339
|
-
disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)
|
|
492
|
+
if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
|
|
493
|
+
dontAnimate || (dontAnimate = {});
|
|
494
|
+
dontAnimate[key] = value;
|
|
495
|
+
} else {
|
|
496
|
+
doAnimate || (doAnimate = {});
|
|
497
|
+
doAnimate[key] = value;
|
|
498
|
+
}
|
|
340
499
|
}
|
|
341
500
|
return {
|
|
342
501
|
dontAnimate,
|
|
@@ -345,31 +504,51 @@ function createAnimations(animations) {
|
|
|
345
504
|
};
|
|
346
505
|
}
|
|
347
506
|
function getAnimationOptions(transitionProp) {
|
|
348
|
-
var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default"
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
!effectiveKey && animationState === "default"
|
|
507
|
+
var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
|
|
508
|
+
var normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
|
|
509
|
+
var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
|
|
510
|
+
if (!effectiveKey && animationState === "default") {
|
|
511
|
+
effectiveKey = normalized.enter || normalized.exit || null;
|
|
512
|
+
}
|
|
352
513
|
var globalConfigOverride = normalized.config ? {
|
|
353
514
|
...normalized.config
|
|
354
515
|
} : void 0;
|
|
355
|
-
if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride)
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
516
|
+
if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
|
|
517
|
+
return {};
|
|
518
|
+
}
|
|
519
|
+
var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
|
|
520
|
+
var delay = normalized.delay;
|
|
521
|
+
var result = {};
|
|
522
|
+
if (defaultConfig) {
|
|
523
|
+
Object.assign(result, defaultConfig);
|
|
524
|
+
}
|
|
525
|
+
if (globalConfigOverride) {
|
|
526
|
+
Object.assign(result, globalConfigOverride);
|
|
527
|
+
if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
|
|
528
|
+
result.type = "tween";
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
if (delay) {
|
|
532
|
+
result.delay = delay;
|
|
533
|
+
}
|
|
534
|
+
if (defaultConfig || globalConfigOverride || delay) {
|
|
535
|
+
result.default = {
|
|
536
|
+
...defaultConfig,
|
|
537
|
+
...globalConfigOverride,
|
|
538
|
+
...(delay ? {
|
|
539
|
+
delay
|
|
540
|
+
} : null)
|
|
541
|
+
};
|
|
542
|
+
}
|
|
543
|
+
var _iteratorNormalCompletion = true,
|
|
544
|
+
_didIteratorError = false,
|
|
368
545
|
_iteratorError = void 0;
|
|
369
546
|
try {
|
|
370
|
-
for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion =
|
|
547
|
+
for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
371
548
|
var [propName, animationNameOrConfig] = _step.value;
|
|
372
|
-
if (typeof animationNameOrConfig
|
|
549
|
+
if (typeof animationNameOrConfig === "string") {
|
|
550
|
+
result[propName] = withInferredType(animations[animationNameOrConfig]);
|
|
551
|
+
} else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
|
|
373
552
|
var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
|
|
374
553
|
result[propName] = {
|
|
375
554
|
...baseConfig,
|
|
@@ -378,23 +557,35 @@ function createAnimations(animations) {
|
|
|
378
557
|
}
|
|
379
558
|
}
|
|
380
559
|
} catch (err) {
|
|
381
|
-
_didIteratorError =
|
|
560
|
+
_didIteratorError = true;
|
|
561
|
+
_iteratorError = err;
|
|
382
562
|
} finally {
|
|
383
563
|
try {
|
|
384
|
-
!_iteratorNormalCompletion && _iterator.return != null
|
|
564
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
565
|
+
_iterator.return();
|
|
566
|
+
}
|
|
385
567
|
} finally {
|
|
386
|
-
if (_didIteratorError)
|
|
568
|
+
if (_didIteratorError) {
|
|
569
|
+
throw _iteratorError;
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
convertMsToS(result);
|
|
574
|
+
convertMsToS(result.default);
|
|
575
|
+
for (var key in result) {
|
|
576
|
+
if (key !== "default" && _type_of(result[key]) === "object") {
|
|
577
|
+
convertMsToS(result[key]);
|
|
387
578
|
}
|
|
388
579
|
}
|
|
389
|
-
convertMsToS(result), convertMsToS(result.default);
|
|
390
|
-
for (var key in result) key !== "default" && _type_of(result[key]) === "object" && convertMsToS(result[key]);
|
|
391
580
|
return result;
|
|
392
581
|
}
|
|
393
582
|
}
|
|
394
583
|
function withInferredType(config) {
|
|
395
|
-
if (!config)
|
|
396
|
-
|
|
397
|
-
|
|
584
|
+
if (!config) {
|
|
585
|
+
return {
|
|
586
|
+
type: "spring"
|
|
587
|
+
};
|
|
588
|
+
}
|
|
398
589
|
var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
|
|
399
590
|
return {
|
|
400
591
|
type: isTimingBased ? "tween" : "spring",
|
|
@@ -402,146 +593,229 @@ function withInferredType(config) {
|
|
|
402
593
|
};
|
|
403
594
|
}
|
|
404
595
|
function convertMsToS(config) {
|
|
405
|
-
if (config
|
|
596
|
+
if (!config) return;
|
|
597
|
+
if (typeof config.delay === "number") config.delay = config.delay / 1e3;
|
|
598
|
+
if (typeof config.duration === "number") {
|
|
406
599
|
var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
|
|
407
|
-
|
|
600
|
+
if (isTimingBased) {
|
|
601
|
+
config.duration = config.duration / 1e3;
|
|
602
|
+
}
|
|
408
603
|
}
|
|
409
604
|
}
|
|
410
605
|
function removeRemovedStyles(prev, next, node, dontClearIfIn) {
|
|
411
|
-
for (var key in prev)
|
|
412
|
-
if (
|
|
413
|
-
|
|
606
|
+
for (var key in prev) {
|
|
607
|
+
if (!(key in next)) {
|
|
608
|
+
if (dontClearIfIn && key in dontClearIfIn) {
|
|
609
|
+
continue;
|
|
610
|
+
}
|
|
611
|
+
node.style[key] = "";
|
|
612
|
+
}
|
|
414
613
|
}
|
|
415
614
|
}
|
|
416
|
-
var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"])
|
|
417
|
-
|
|
418
|
-
|
|
615
|
+
var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
|
|
616
|
+
var MotionView = createMotionView("div");
|
|
617
|
+
var MotionText = createMotionView("span");
|
|
419
618
|
function createMotionView(defaultTag) {
|
|
420
|
-
var isText = defaultTag === "span"
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
619
|
+
var isText = defaultTag === "span";
|
|
620
|
+
var Component = /* @__PURE__ */(0, import_react2.forwardRef)(function (propsIn, ref) {
|
|
621
|
+
var _hooks_usePropsTransform;
|
|
622
|
+
var {
|
|
623
|
+
forwardedRef,
|
|
624
|
+
animation,
|
|
625
|
+
render = defaultTag,
|
|
626
|
+
style,
|
|
627
|
+
...propsRest
|
|
628
|
+
} = propsIn;
|
|
629
|
+
var [scope, animate] = useAnimateSSRSafe();
|
|
630
|
+
var hostRef = (0, import_react2.useRef)(null);
|
|
631
|
+
var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope);
|
|
632
|
+
var stateRef = (0, import_react2.useRef)(null);
|
|
633
|
+
if (!stateRef.current) {
|
|
634
|
+
stateRef.current = {
|
|
435
635
|
get host() {
|
|
436
636
|
return hostRef.current;
|
|
437
637
|
}
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
try {
|
|
456
|
-
!_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
|
|
457
|
-
} finally {
|
|
458
|
-
if (_didIteratorError) throw _iteratorError;
|
|
459
|
-
}
|
|
638
|
+
};
|
|
639
|
+
}
|
|
640
|
+
var [_, state] = (0, import_web.useThemeWithState)({});
|
|
641
|
+
var styles = Array.isArray(style) ? style : [style];
|
|
642
|
+
var [animatedStyle, nonAnimatedStyles] = function () {
|
|
643
|
+
var animatedStyle2;
|
|
644
|
+
var nonAnimatedStyles2 = [];
|
|
645
|
+
var _iteratorNormalCompletion = true,
|
|
646
|
+
_didIteratorError = false,
|
|
647
|
+
_iteratorError = void 0;
|
|
648
|
+
try {
|
|
649
|
+
for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
650
|
+
var style2 = _step.value;
|
|
651
|
+
if (style2.getStyle) {
|
|
652
|
+
animatedStyle2 = style2;
|
|
653
|
+
} else {
|
|
654
|
+
nonAnimatedStyles2.push(style2);
|
|
460
655
|
}
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
}
|
|
471
|
-
|
|
656
|
+
}
|
|
657
|
+
} catch (err) {
|
|
658
|
+
_didIteratorError = true;
|
|
659
|
+
_iteratorError = err;
|
|
660
|
+
} finally {
|
|
661
|
+
try {
|
|
662
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
663
|
+
_iterator.return();
|
|
664
|
+
}
|
|
665
|
+
} finally {
|
|
666
|
+
if (_didIteratorError) {
|
|
667
|
+
throw _iteratorError;
|
|
668
|
+
}
|
|
669
|
+
}
|
|
472
670
|
}
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
671
|
+
return [animatedStyle2, nonAnimatedStyles2];
|
|
672
|
+
}();
|
|
673
|
+
function getProps(props2) {
|
|
674
|
+
var out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, {
|
|
675
|
+
unmounted: false
|
|
676
|
+
}, {
|
|
677
|
+
isAnimated: false,
|
|
678
|
+
noClass: true,
|
|
679
|
+
resolveValues: "auto"
|
|
680
|
+
});
|
|
681
|
+
if (!out) {
|
|
682
|
+
return {};
|
|
683
|
+
}
|
|
684
|
+
if (out.viewProps.style) {
|
|
685
|
+
(0, import_web.fixStyles)(out.viewProps.style);
|
|
686
|
+
(0, import_web.styleToCSS)(out.viewProps.style);
|
|
687
|
+
}
|
|
688
|
+
return out.viewProps;
|
|
689
|
+
}
|
|
690
|
+
var props = getProps({
|
|
691
|
+
...propsRest,
|
|
692
|
+
style: nonAnimatedStyles
|
|
693
|
+
});
|
|
694
|
+
var Element = render || "div";
|
|
695
|
+
var transformedProps = (_hooks_usePropsTransform = import_web.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_web.hooks, render, props, stateRef, false);
|
|
696
|
+
(0, import_react2.useEffect)(function () {
|
|
697
|
+
if (!animatedStyle) return;
|
|
698
|
+
if (animatedStyle.motionValues) {
|
|
699
|
+
var mvs = animatedStyle.motionValues;
|
|
700
|
+
var unsubs = mvs.map(function (mv) {
|
|
701
|
+
return mv.on("change", function () {
|
|
702
|
+
var currentValues = mvs.map(function (v) {
|
|
703
|
+
return v.get();
|
|
704
|
+
});
|
|
705
|
+
var nextStyle = animatedStyle.getStyle(...currentValues);
|
|
706
|
+
var animationConfig = MotionValueStrategy.get(mv);
|
|
707
|
+
var node = hostRef.current;
|
|
708
|
+
var webStyle = getProps({
|
|
485
709
|
style: nextStyle
|
|
486
710
|
}).style;
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
711
|
+
if (webStyle && _instanceof(node, HTMLElement)) {
|
|
712
|
+
var motionAnimationConfig = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
|
|
713
|
+
type: "tween",
|
|
714
|
+
duration: ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || 0) / 1e3
|
|
715
|
+
} : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
|
|
716
|
+
type: "tween",
|
|
717
|
+
duration: 0
|
|
718
|
+
} : {
|
|
719
|
+
type: "spring",
|
|
720
|
+
...animationConfig
|
|
721
|
+
};
|
|
722
|
+
var controls = animate(node, webStyle, motionAnimationConfig);
|
|
723
|
+
settlePendingMotionOnFinish(mv, controls);
|
|
724
|
+
}
|
|
725
|
+
});
|
|
500
726
|
});
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
727
|
+
return function () {
|
|
728
|
+
return unsubs.forEach(function (fn) {
|
|
729
|
+
return fn();
|
|
730
|
+
});
|
|
731
|
+
};
|
|
732
|
+
}
|
|
733
|
+
if (!animatedStyle.motionValue) return;
|
|
734
|
+
return animatedStyle.motionValue.on("change", function (value) {
|
|
735
|
+
var nextStyle = animatedStyle.getStyle(value);
|
|
736
|
+
var animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
|
|
737
|
+
var node = hostRef.current;
|
|
738
|
+
var webStyle = getProps({
|
|
739
|
+
style: nextStyle
|
|
740
|
+
}).style;
|
|
741
|
+
if (webStyle && _instanceof(node, HTMLElement)) {
|
|
742
|
+
var motionAnimationConfig = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
|
|
743
|
+
type: "tween",
|
|
744
|
+
duration: ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || 0) / 1e3
|
|
745
|
+
} : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
|
|
746
|
+
type: "tween",
|
|
747
|
+
duration: 0
|
|
748
|
+
} : {
|
|
749
|
+
type: "spring",
|
|
750
|
+
...animationConfig
|
|
751
|
+
};
|
|
752
|
+
var controls = animate(node, webStyle, motionAnimationConfig);
|
|
753
|
+
settlePendingMotionOnFinish(animatedStyle.motionValue, controls);
|
|
754
|
+
}
|
|
504
755
|
});
|
|
756
|
+
}, [animatedStyle]);
|
|
757
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
|
|
758
|
+
...transformedProps,
|
|
759
|
+
ref: composedRefs
|
|
505
760
|
});
|
|
506
|
-
|
|
761
|
+
});
|
|
762
|
+
Component["acceptRenderProp"] = true;
|
|
763
|
+
return Component;
|
|
507
764
|
}
|
|
508
765
|
function getDiff(previous, next) {
|
|
509
|
-
if (!previous)
|
|
766
|
+
if (!previous) {
|
|
767
|
+
return next;
|
|
768
|
+
}
|
|
510
769
|
var diff = null;
|
|
511
|
-
for (var key in next)
|
|
770
|
+
for (var key in next) {
|
|
771
|
+
if (next[key] !== previous[key]) {
|
|
772
|
+
diff || (diff = {});
|
|
773
|
+
diff[key] = next[key];
|
|
774
|
+
}
|
|
775
|
+
}
|
|
512
776
|
return diff;
|
|
513
777
|
}
|
|
514
778
|
function fixTransparentColors(diff, previous, next) {
|
|
515
779
|
var result = diff;
|
|
516
|
-
for (var key in diff)
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
var
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
780
|
+
for (var key in diff) {
|
|
781
|
+
if (diff[key] === "transparent") {
|
|
782
|
+
var fixed = "rgba(0, 0, 0, 0)";
|
|
783
|
+
var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
|
|
784
|
+
var _iteratorNormalCompletion = true,
|
|
785
|
+
_didIteratorError = false,
|
|
786
|
+
_iteratorError = void 0;
|
|
787
|
+
try {
|
|
788
|
+
for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
789
|
+
var candidate = _step.value;
|
|
790
|
+
if (typeof candidate === "string" && candidate !== "transparent") {
|
|
791
|
+
var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
|
|
792
|
+
if (rgbaMatch) {
|
|
793
|
+
fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
|
|
794
|
+
break;
|
|
795
|
+
}
|
|
530
796
|
}
|
|
531
797
|
}
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
} finally {
|
|
536
|
-
try {
|
|
537
|
-
!_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
|
|
798
|
+
} catch (err) {
|
|
799
|
+
_didIteratorError = true;
|
|
800
|
+
_iteratorError = err;
|
|
538
801
|
} finally {
|
|
539
|
-
|
|
802
|
+
try {
|
|
803
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
804
|
+
_iterator.return();
|
|
805
|
+
}
|
|
806
|
+
} finally {
|
|
807
|
+
if (_didIteratorError) {
|
|
808
|
+
throw _iteratorError;
|
|
809
|
+
}
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
if (result === diff) {
|
|
813
|
+
result = {
|
|
814
|
+
...diff
|
|
815
|
+
};
|
|
540
816
|
}
|
|
817
|
+
result[key] = fixed;
|
|
541
818
|
}
|
|
542
|
-
result === diff && (result = {
|
|
543
|
-
...diff
|
|
544
|
-
}), result[key] = fixed;
|
|
545
819
|
}
|
|
546
820
|
return result;
|
|
547
821
|
}
|