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