1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var tslib = require('tslib');
|
8 | var React = require('react');
|
9 | var sync = require('framesync');
|
10 | var sync__default = _interopDefault(sync);
|
11 | var popcorn = require('@popmotion/popcorn');
|
12 | var styler = require('stylefire');
|
13 | var styler__default = _interopDefault(styler);
|
14 | var heyListen = require('hey-listen');
|
15 | var styleValueTypes = require('style-value-types');
|
16 | var popmotion = require('popmotion');
|
17 | var easingLookup = require('@popmotion/easing');
|
18 |
|
19 | var isFloat = function (value) {
|
20 | return !isNaN(parseFloat(value));
|
21 | };
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | var MotionValue = (function () {
|
28 | |
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 | function MotionValue(init, _a) {
|
37 | var _this = this;
|
38 | var _b = _a === void 0 ? {} : _a, transformer = _b.transformer, parent = _b.parent;
|
39 | |
40 |
|
41 |
|
42 |
|
43 |
|
44 | this.timeDelta = 0;
|
45 | |
46 |
|
47 |
|
48 |
|
49 |
|
50 | this.lastUpdated = 0;
|
51 | |
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 | this.canTrackVelocity = false;
|
59 | this.updateAndNotify = function (v, render) {
|
60 | if (render === void 0) { render = true; }
|
61 | _this.prev = _this.current;
|
62 | _this.current = _this.transformer ? _this.transformer(v) : v;
|
63 | if (_this.updateSubscribers && _this.prev !== _this.current) {
|
64 | _this.updateSubscribers.forEach(_this.notifySubscriber);
|
65 | }
|
66 | if (_this.children) {
|
67 | _this.children.forEach(_this.setChild);
|
68 | }
|
69 | if (render && _this.renderSubscribers) {
|
70 | _this.renderSubscribers.forEach(_this.notifySubscriber);
|
71 | }
|
72 |
|
73 | var _a = sync.getFrameData(), delta = _a.delta, timestamp = _a.timestamp;
|
74 | if (_this.lastUpdated !== timestamp) {
|
75 | _this.timeDelta = delta;
|
76 | _this.lastUpdated = timestamp;
|
77 | sync__default.postRender(_this.scheduleVelocityCheck);
|
78 | }
|
79 | };
|
80 | |
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 | this.notifySubscriber = function (subscriber) {
|
91 | subscriber(_this.current);
|
92 | };
|
93 | |
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | this.scheduleVelocityCheck = function () { return sync__default.postRender(_this.velocityCheck); };
|
102 | |
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 | this.velocityCheck = function (_a) {
|
112 | var timestamp = _a.timestamp;
|
113 | if (timestamp !== _this.lastUpdated) {
|
114 | _this.prev = _this.current;
|
115 | }
|
116 | };
|
117 | |
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 | this.setChild = function (child) { return child.set(_this.current); };
|
125 | this.parent = parent;
|
126 | this.transformer = transformer;
|
127 | this.set(init, false);
|
128 | this.canTrackVelocity = isFloat(this.current);
|
129 | }
|
130 | |
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | MotionValue.prototype.addChild = function (config) {
|
140 | if (config === void 0) { config = {}; }
|
141 | var child = new MotionValue(this.current, tslib.__assign({ parent: this }, config));
|
142 | if (!this.children)
|
143 | this.children = new Set();
|
144 | this.children.add(child);
|
145 | return child;
|
146 | };
|
147 | |
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 | MotionValue.prototype.removeChild = function (child) {
|
155 | if (!this.children) {
|
156 | return;
|
157 | }
|
158 | this.children.delete(child);
|
159 | };
|
160 | |
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 | MotionValue.prototype.subscribeTo = function (subscriptions, subscription) {
|
167 | var _this = this;
|
168 | var updateSubscriber = function () { return subscription(_this.current); };
|
169 | subscriptions.add(updateSubscriber);
|
170 | return function () { return subscriptions.delete(updateSubscriber); };
|
171 | };
|
172 | |
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
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 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 |
|
250 | MotionValue.prototype.onChange = function (subscription) {
|
251 | if (!this.updateSubscribers)
|
252 | this.updateSubscribers = new Set();
|
253 | return this.subscribeTo(this.updateSubscribers, subscription);
|
254 | };
|
255 | |
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 | MotionValue.prototype.onRenderRequest = function (subscription) {
|
264 | if (!this.renderSubscribers)
|
265 | this.renderSubscribers = new Set();
|
266 |
|
267 | this.notifySubscriber(subscription);
|
268 | return this.subscribeTo(this.renderSubscribers, subscription);
|
269 | };
|
270 | |
271 |
|
272 |
|
273 |
|
274 |
|
275 | MotionValue.prototype.attach = function (passiveEffect) {
|
276 | this.passiveEffect = passiveEffect;
|
277 | };
|
278 | |
279 |
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 |
|
292 |
|
293 | MotionValue.prototype.set = function (v, render) {
|
294 | if (render === void 0) { render = true; }
|
295 | if (!render || !this.passiveEffect) {
|
296 | this.updateAndNotify(v, render);
|
297 | }
|
298 | else {
|
299 | this.passiveEffect(v, this.updateAndNotify);
|
300 | }
|
301 | };
|
302 | |
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 | MotionValue.prototype.get = function () {
|
310 | return this.current;
|
311 | };
|
312 | |
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 | MotionValue.prototype.getVelocity = function () {
|
320 |
|
321 | return this.canTrackVelocity
|
322 | ?
|
323 | popcorn.velocityPerSecond(parseFloat(this.current) -
|
324 | parseFloat(this.prev), this.timeDelta)
|
325 | : 0;
|
326 | };
|
327 | |
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 | MotionValue.prototype.start = function (animation) {
|
340 | var _this = this;
|
341 | this.stop();
|
342 | return new Promise(function (resolve) {
|
343 | _this.stopAnimation = animation(resolve);
|
344 | }).then(function () { return _this.clearAnimation(); });
|
345 | };
|
346 | |
347 |
|
348 |
|
349 |
|
350 |
|
351 | MotionValue.prototype.stop = function () {
|
352 | if (this.stopAnimation)
|
353 | this.stopAnimation();
|
354 | this.clearAnimation();
|
355 | };
|
356 | |
357 |
|
358 |
|
359 |
|
360 |
|
361 | MotionValue.prototype.isAnimating = function () {
|
362 | return !!this.stopAnimation;
|
363 | };
|
364 | MotionValue.prototype.clearAnimation = function () {
|
365 | this.stopAnimation = null;
|
366 | };
|
367 | |
368 |
|
369 |
|
370 |
|
371 |
|
372 |
|
373 |
|
374 |
|
375 |
|
376 | MotionValue.prototype.destroy = function () {
|
377 | this.updateSubscribers && this.updateSubscribers.clear();
|
378 | this.renderSubscribers && this.renderSubscribers.clear();
|
379 | this.parent && this.parent.removeChild(this);
|
380 | this.stop();
|
381 | };
|
382 | return MotionValue;
|
383 | }());
|
384 |
|
385 |
|
386 |
|
387 | function motionValue(init, opts) {
|
388 | return new MotionValue(init, opts);
|
389 | }
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 |
|
397 |
|
398 | function useConstant(init) {
|
399 | var ref = React.useRef(null);
|
400 | if (ref.current === null) {
|
401 | ref.current = init();
|
402 | }
|
403 | return ref.current;
|
404 | }
|
405 |
|
406 | var isMotionValue = function (value) {
|
407 | return value instanceof MotionValue;
|
408 | };
|
409 |
|
410 |
|
411 |
|
412 | var updateStyler = styler.createStylerFactory({
|
413 | onRead: function () { return null; },
|
414 | onRender: function (state, _a) {
|
415 | var onUpdate = _a.onUpdate;
|
416 | return onUpdate(state);
|
417 | },
|
418 | });
|
419 | var MotionValuesMap = (function () {
|
420 | function MotionValuesMap() {
|
421 | this.hasMounted = false;
|
422 | this.values = new Map();
|
423 | this.unsubscribers = new Map();
|
424 | }
|
425 | MotionValuesMap.prototype.has = function (key) {
|
426 | return this.values.has(key);
|
427 | };
|
428 | MotionValuesMap.prototype.set = function (key, value) {
|
429 | this.values.set(key, value);
|
430 | if (this.hasMounted) {
|
431 | this.bindValueToOutput(key, value);
|
432 | }
|
433 | };
|
434 | MotionValuesMap.prototype.get = function (key, defaultValue) {
|
435 | var value = this.values.get(key);
|
436 | if (value === undefined && defaultValue !== undefined) {
|
437 | value = new MotionValue(defaultValue);
|
438 | this.set(key, value);
|
439 | }
|
440 | return value;
|
441 | };
|
442 | MotionValuesMap.prototype.forEach = function (callback) {
|
443 | return this.values.forEach(callback);
|
444 | };
|
445 | MotionValuesMap.prototype.bindValueToOutput = function (key, value) {
|
446 | var _this = this;
|
447 | var onRender = function (v) { return _this.output && _this.output(key, v); };
|
448 | var unsubscribeOnRender = value.onRenderRequest(onRender);
|
449 | var onChange = function (v) {
|
450 | _this.onUpdate && _this.onUpdate.set(key, v);
|
451 | };
|
452 | var unsubscribeOnChange = value.onChange(onChange);
|
453 | if (this.unsubscribers.has(key)) {
|
454 | this.unsubscribers.get(key)();
|
455 | }
|
456 | this.unsubscribers.set(key, function () {
|
457 | unsubscribeOnRender();
|
458 | unsubscribeOnChange();
|
459 | });
|
460 | };
|
461 | MotionValuesMap.prototype.setOnUpdate = function (onUpdate) {
|
462 | this.onUpdate = undefined;
|
463 | if (onUpdate) {
|
464 | this.onUpdate = updateStyler({ onUpdate: onUpdate });
|
465 | }
|
466 | };
|
467 | MotionValuesMap.prototype.setTransformTemplate = function (transformTemplate) {
|
468 | if (this.transformTemplate !== transformTemplate) {
|
469 | this.transformTemplate = transformTemplate;
|
470 | this.updateTransformTemplate();
|
471 | }
|
472 | };
|
473 | MotionValuesMap.prototype.getTransformTemplate = function () {
|
474 | return this.transformTemplate;
|
475 | };
|
476 | MotionValuesMap.prototype.updateTransformTemplate = function () {
|
477 | if (this.output) {
|
478 | this.output("transform", this.transformTemplate);
|
479 | }
|
480 | };
|
481 | MotionValuesMap.prototype.mount = function (output) {
|
482 | var _this = this;
|
483 | this.hasMounted = true;
|
484 | if (output)
|
485 | this.output = output;
|
486 | this.values.forEach(function (value, key) { return _this.bindValueToOutput(key, value); });
|
487 | this.updateTransformTemplate();
|
488 | };
|
489 | MotionValuesMap.prototype.unmount = function () {
|
490 | var _this = this;
|
491 | this.values.forEach(function (_value, key) {
|
492 | var unsubscribe = _this.unsubscribers.get(key);
|
493 | unsubscribe && unsubscribe();
|
494 | });
|
495 | };
|
496 | return MotionValuesMap;
|
497 | }());
|
498 | var specialMotionValueProps = new Set(["dragOriginX", "dragOriginY"]);
|
499 | var useMotionValues = function (props) {
|
500 | var motionValues = useConstant(function () {
|
501 | var map = new MotionValuesMap();
|
502 | |
503 |
|
504 |
|
505 |
|
506 |
|
507 |
|
508 | for (var key in props) {
|
509 | if (isMotionValue(props[key]) &&
|
510 | !specialMotionValueProps.has(key)) {
|
511 | map.set(key, props[key]);
|
512 | }
|
513 | }
|
514 | return map;
|
515 | });
|
516 | motionValues.setOnUpdate(props.onUpdate);
|
517 | motionValues.setTransformTemplate(props.transformTemplate);
|
518 | return motionValues;
|
519 | };
|
520 |
|
521 | var session = null;
|
522 | var syncRenderSession = {
|
523 | isOpen: function () { return session !== null; },
|
524 | open: function () {
|
525 | heyListen.invariant(!session, "Sync render session already open");
|
526 | session = [];
|
527 | },
|
528 | flush: function () {
|
529 | heyListen.invariant(session !== null, "No sync render session found");
|
530 | session && session.forEach(function (styler) { return styler.render(); });
|
531 | session = null;
|
532 | },
|
533 | push: function (styler) {
|
534 | heyListen.invariant(session !== null, "No sync render session found");
|
535 | session && session.push(styler);
|
536 | },
|
537 | };
|
538 |
|
539 |
|
540 |
|
541 |
|
542 |
|
543 |
|
544 | var MountComponent = function (_a) {
|
545 | var ref = _a.innerRef, values = _a.values, isStatic = _a.isStatic;
|
546 | React.useEffect(function () {
|
547 | heyListen.invariant(ref.current instanceof Element, "No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`");
|
548 | var domStyler = styler__default(ref.current, {
|
549 | preparseOutput: false,
|
550 | enableHardwareAcceleration: !isStatic,
|
551 | });
|
552 | values.mount(function (key, value) {
|
553 | domStyler.set(key, value);
|
554 | if (syncRenderSession.isOpen()) {
|
555 | syncRenderSession.push(domStyler);
|
556 | }
|
557 | });
|
558 | return function () { return values.unmount(); };
|
559 | }, []);
|
560 | return null;
|
561 | };
|
562 | var Mount = React.memo(MountComponent);
|
563 |
|
564 | var createValueResolver = function (resolver) { return function (values) {
|
565 | var resolvedValues = {};
|
566 | values.forEach(function (value, key) { return (resolvedValues[key] = resolver(value)); });
|
567 | return resolvedValues;
|
568 | }; };
|
569 | var resolveCurrent = createValueResolver(function (value) { return value.get(); });
|
570 |
|
571 | var transformOriginProps = new Set(["originX", "originY", "originZ"]);
|
572 | var isTransformOriginProp = function (key) { return transformOriginProps.has(key); };
|
573 | var buildStyleAttr = function (values, styleProp, isStatic) {
|
574 | var motionValueStyles = resolveCurrent(values);
|
575 | var transformTemplate = values.getTransformTemplate();
|
576 | if (transformTemplate) {
|
577 |
|
578 |
|
579 | motionValueStyles.transform = styleProp.transform
|
580 | ? transformTemplate({}, styleProp.transform)
|
581 | : transformTemplate;
|
582 | }
|
583 | return styler.buildStyleProperty(tslib.__assign(tslib.__assign({}, styleProp), motionValueStyles), !isStatic);
|
584 | };
|
585 | var useMotionStyles = function (values, styleProp, isStatic, transformValues) {
|
586 | if (styleProp === void 0) { styleProp = {}; }
|
587 | var style = {};
|
588 | var prevMotionStyles = React.useRef({}).current;
|
589 | for (var key in styleProp) {
|
590 | var thisStyle = styleProp[key];
|
591 | if (isMotionValue(thisStyle)) {
|
592 |
|
593 | values.set(key, thisStyle);
|
594 | }
|
595 | else if (!isStatic &&
|
596 | (styler.isTransformProp(key) || isTransformOriginProp(key))) {
|
597 |
|
598 |
|
599 |
|
600 |
|
601 |
|
602 |
|
603 |
|
604 | if (!values.has(key)) {
|
605 |
|
606 | values.set(key, motionValue(thisStyle));
|
607 | }
|
608 | else {
|
609 |
|
610 | if (thisStyle !== prevMotionStyles[key]) {
|
611 | var value = values.get(key);
|
612 | value.set(thisStyle);
|
613 | }
|
614 | }
|
615 | prevMotionStyles[key] = thisStyle;
|
616 | }
|
617 | else {
|
618 | style[key] = thisStyle;
|
619 | }
|
620 | }
|
621 | return transformValues ? transformValues(style) : style;
|
622 | };
|
623 |
|
624 | var isKeyframesTarget = function (v) {
|
625 | return Array.isArray(v);
|
626 | };
|
627 |
|
628 | var isCustomValue = function (v) {
|
629 | return Boolean(v && typeof v === "object" && v.mix && v.toValue);
|
630 | };
|
631 | var resolveFinalValueInKeyframes = function (v) {
|
632 |
|
633 | return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
|
634 | };
|
635 |
|
636 | var auto = {
|
637 | test: function (v) { return v === "auto"; },
|
638 | parse: function (v) { return v; },
|
639 | };
|
640 | var dimensionTypes = [styleValueTypes.number, styleValueTypes.px, styleValueTypes.percent, styleValueTypes.degrees, styleValueTypes.vw, styleValueTypes.vh, auto];
|
641 | var valueTypes = tslib.__spreadArrays(dimensionTypes, [styleValueTypes.color, styleValueTypes.complex]);
|
642 | var testValueType = function (v) { return function (type) { return type.test(v); }; };
|
643 | var getDimensionValueType = function (v) {
|
644 | return dimensionTypes.find(testValueType(v));
|
645 | };
|
646 | var getValueType = function (v) { return valueTypes.find(testValueType(v)); };
|
647 |
|
648 | var underDampedSpring = function () { return ({
|
649 | type: "spring",
|
650 | stiffness: 500,
|
651 | damping: 25,
|
652 | restDelta: 0.5,
|
653 | restSpeed: 10,
|
654 | }); };
|
655 | var overDampedSpring = function (to) { return ({
|
656 | type: "spring",
|
657 | stiffness: 700,
|
658 | damping: to === 0 ? 100 : 35,
|
659 | }); };
|
660 | var linearTween = function () { return ({
|
661 | ease: "linear",
|
662 | duration: 0.3,
|
663 | }); };
|
664 | var keyframes = function (values) { return ({
|
665 | type: "keyframes",
|
666 | duration: 0.8,
|
667 | values: values,
|
668 | }); };
|
669 | var defaultTransitions = {
|
670 | x: underDampedSpring,
|
671 | y: underDampedSpring,
|
672 | z: underDampedSpring,
|
673 | rotate: underDampedSpring,
|
674 | rotateX: underDampedSpring,
|
675 | rotateY: underDampedSpring,
|
676 | rotateZ: underDampedSpring,
|
677 | scaleX: overDampedSpring,
|
678 | scaleY: overDampedSpring,
|
679 | scale: overDampedSpring,
|
680 | opacity: linearTween,
|
681 | backgroundColor: linearTween,
|
682 | color: linearTween,
|
683 | default: overDampedSpring,
|
684 | };
|
685 | var getDefaultTransition = function (valueKey, to) {
|
686 | var transitionFactory;
|
687 | if (isKeyframesTarget(to)) {
|
688 | transitionFactory = keyframes;
|
689 | }
|
690 | else {
|
691 | transitionFactory =
|
692 | defaultTransitions[valueKey] || defaultTransitions.default;
|
693 | }
|
694 | return tslib.__assign({ to: to }, transitionFactory(to));
|
695 | };
|
696 |
|
697 |
|
698 |
|
699 |
|
700 |
|
701 |
|
702 |
|
703 |
|
704 |
|
705 |
|
706 |
|
707 |
|
708 |
|
709 |
|
710 |
|
711 |
|
712 |
|
713 |
|
714 | var just = function (_a) {
|
715 | var to = _a.to, duration = _a.duration;
|
716 | return popmotion.action(function (_a) {
|
717 | var update = _a.update, complete = _a.complete;
|
718 | update(to);
|
719 | duration ? popmotion.delay(duration).start({ complete: complete }) : complete();
|
720 | });
|
721 | };
|
722 |
|
723 | var easingDefinitionToFunction = function (definition) {
|
724 | if (Array.isArray(definition)) {
|
725 |
|
726 | heyListen.invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values.");
|
727 | var x1 = definition[0], y1 = definition[1], x2 = definition[2], y2 = definition[3];
|
728 | return easingLookup.cubicBezier(x1, y1, x2, y2);
|
729 | }
|
730 | else if (typeof definition === "string") {
|
731 |
|
732 | heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
|
733 | return easingLookup[definition];
|
734 | }
|
735 | return definition;
|
736 | };
|
737 | var isEasingArray = function (ease) {
|
738 | return Array.isArray(ease) && typeof ease[0] !== "number";
|
739 | };
|
740 |
|
741 | var isDurationAnimation = function (v) {
|
742 | return v.hasOwnProperty("duration") || v.hasOwnProperty("repeatDelay");
|
743 | };
|
744 |
|
745 |
|
746 |
|
747 |
|
748 |
|
749 |
|
750 |
|
751 |
|
752 |
|
753 |
|
754 | var isAnimatable = function (key, value) {
|
755 |
|
756 | if (key === "zIndex")
|
757 | return false;
|
758 |
|
759 |
|
760 |
|
761 | if (typeof value === "number" || Array.isArray(value))
|
762 | return true;
|
763 | if (typeof value === "string" &&
|
764 | styleValueTypes.complex.test(value) &&
|
765 | !value.startsWith("url(")
|
766 | ) {
|
767 | return true;
|
768 | }
|
769 | return false;
|
770 | };
|
771 |
|
772 |
|
773 |
|
774 |
|
775 |
|
776 |
|
777 |
|
778 | var secondsToMilliseconds = function (seconds) { return seconds * 1000; };
|
779 |
|
780 | var transitions = { tween: popmotion.tween, spring: popmotion.spring, keyframes: popmotion.keyframes, inertia: popmotion.inertia, just: just };
|
781 | var transitionOptionParser = {
|
782 | tween: function (opts) {
|
783 | if (opts.ease) {
|
784 | var ease = isEasingArray(opts.ease) ? opts.ease[0] : opts.ease;
|
785 | opts.ease = easingDefinitionToFunction(ease);
|
786 | }
|
787 | return opts;
|
788 | },
|
789 | keyframes: function (_a) {
|
790 | var from = _a.from, to = _a.to, velocity = _a.velocity, opts = tslib.__rest(_a, ["from", "to", "velocity"]);
|
791 | if (opts.values && opts.values[0] === null) {
|
792 | var values = tslib.__spreadArrays(opts.values);
|
793 | values[0] = from;
|
794 | opts.values = values;
|
795 | }
|
796 | if (opts.ease) {
|
797 | opts.easings = isEasingArray(opts.ease)
|
798 | ? opts.ease.map(easingDefinitionToFunction)
|
799 | : easingDefinitionToFunction(opts.ease);
|
800 | }
|
801 | opts.ease = easingLookup.linear;
|
802 | return opts;
|
803 | },
|
804 | };
|
805 | var isTransitionDefined = function (_a) {
|
806 | var when = _a.when, delay = _a.delay, delayChildren = _a.delayChildren, staggerChildren = _a.staggerChildren, staggerDirection = _a.staggerDirection, transition = tslib.__rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection"]);
|
807 | return Object.keys(transition).length;
|
808 | };
|
809 | var getTransitionDefinition = function (key, to, transitionDefinition) {
|
810 | var delay = transitionDefinition ? transitionDefinition.delay : 0;
|
811 |
|
812 |
|
813 |
|
814 | if (transitionDefinition === undefined ||
|
815 | !isTransitionDefined(transitionDefinition)) {
|
816 | return tslib.__assign({ delay: delay }, getDefaultTransition(key, to));
|
817 | }
|
818 | var valueTransitionDefinition = transitionDefinition[key] ||
|
819 | transitionDefinition.default ||
|
820 | transitionDefinition;
|
821 | if (valueTransitionDefinition.type === false) {
|
822 | return {
|
823 | delay: valueTransitionDefinition.hasOwnProperty("delay")
|
824 | ? valueTransitionDefinition.delay
|
825 | : delay,
|
826 | to: isKeyframesTarget(to)
|
827 | ? to[to.length - 1]
|
828 | : to,
|
829 | type: "just",
|
830 | };
|
831 | }
|
832 | else if (isKeyframesTarget(to)) {
|
833 | return tslib.__assign(tslib.__assign({ values: to, duration: 0.8, delay: delay, ease: "linear" }, valueTransitionDefinition), {
|
834 |
|
835 | type: "keyframes" });
|
836 | }
|
837 | else {
|
838 | return tslib.__assign({ type: "tween", to: to,
|
839 | delay: delay }, valueTransitionDefinition);
|
840 | }
|
841 | };
|
842 | var preprocessOptions = function (type, opts) {
|
843 | return transitionOptionParser[type]
|
844 | ? transitionOptionParser[type](opts)
|
845 | : opts;
|
846 | };
|
847 | var getAnimation = function (key, value, target, transition) {
|
848 | var origin = value.get();
|
849 | var isOriginAnimatable = isAnimatable(key, origin);
|
850 | var isTargetAnimatable = isAnimatable(key, target);
|
851 |
|
852 |
|
853 | heyListen.warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to " + target + ". \"" + origin + "\" is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
|
854 |
|
855 | var _a = getTransitionDefinition(key, target, transition), _b = _a.type, type = _b === void 0 ? "tween" : _b, transitionDefinition = tslib.__rest(_a, ["type"]);
|
856 |
|
857 | var actionFactory = isOriginAnimatable && isTargetAnimatable
|
858 | ? transitions[type]
|
859 | : just;
|
860 | var opts = preprocessOptions(type, tslib.__assign({ from: origin, velocity: value.getVelocity() }, transitionDefinition));
|
861 |
|
862 | if (isDurationAnimation(opts)) {
|
863 | if (opts.duration) {
|
864 | opts.duration = secondsToMilliseconds(opts.duration);
|
865 | }
|
866 | if (opts.repeatDelay) {
|
867 | opts.repeatDelay = secondsToMilliseconds(opts.repeatDelay);
|
868 | }
|
869 | }
|
870 | return [actionFactory, opts];
|
871 | };
|
872 |
|
873 |
|
874 |
|
875 |
|
876 |
|
877 | function startAnimation(key, value, target, _a) {
|
878 | var _b = _a.delay, delay = _b === void 0 ? 0 : _b, transition = tslib.__rest(_a, ["delay"]);
|
879 | return value.start(function (complete) {
|
880 | var activeAnimation;
|
881 | var _a = getAnimation(key, value, target, transition), animationFactory = _a[0], _b = _a[1], valueDelay = _b.delay, options = tslib.__rest(_b, ["delay"]);
|
882 | if (valueDelay !== undefined) {
|
883 | delay = valueDelay;
|
884 | }
|
885 | var animate = function () {
|
886 | var animation = animationFactory(options);
|
887 |
|
888 | activeAnimation = animation.start({
|
889 | update: function (v) { return value.set(v); },
|
890 | complete: complete,
|
891 | });
|
892 | };
|
893 |
|
894 |
|
895 | if (delay) {
|
896 | activeAnimation = popmotion.delay(secondsToMilliseconds(delay)).start({
|
897 | complete: animate,
|
898 | });
|
899 | }
|
900 | else {
|
901 | animate();
|
902 | }
|
903 | return function () {
|
904 | if (activeAnimation)
|
905 | activeAnimation.stop();
|
906 | };
|
907 | });
|
908 | }
|
909 |
|
910 |
|
911 |
|
912 |
|
913 |
|
914 | var getCurrent = function (values) {
|
915 | var current = {};
|
916 | values.forEach(function (value, key) { return (current[key] = value.get()); });
|
917 | return current;
|
918 | };
|
919 |
|
920 |
|
921 |
|
922 |
|
923 | var getVelocity = function (values) {
|
924 | var velocity = {};
|
925 | values.forEach(function (value, key) { return (velocity[key] = value.getVelocity()); });
|
926 | return velocity;
|
927 | };
|
928 |
|
929 |
|
930 |
|
931 |
|
932 |
|
933 | var isTargetResolver = function (p) {
|
934 | return typeof p === "function";
|
935 | };
|
936 |
|
937 |
|
938 |
|
939 |
|
940 | var isVariantLabels = function (v) { return Array.isArray(v); };
|
941 |
|
942 |
|
943 |
|
944 | var isNumericalString = function (v) { return /^\d*\.?\d+$/.test(v); };
|
945 |
|
946 |
|
947 |
|
948 |
|
949 |
|
950 | var ValueAnimationControls = (function () {
|
951 | function ValueAnimationControls(_a) {
|
952 | var _this = this;
|
953 | var values = _a.values, readValueFromSource = _a.readValueFromSource, makeTargetAnimatable = _a.makeTargetAnimatable;
|
954 | |
955 |
|
956 |
|
957 |
|
958 |
|
959 | this.props = {};
|
960 | |
961 |
|
962 |
|
963 | this.variants = {};
|
964 | |
965 |
|
966 |
|
967 | this.baseTarget = {};
|
968 | |
969 |
|
970 |
|
971 | this.overrides = [];
|
972 | |
973 |
|
974 |
|
975 | this.resolvedOverrides = [];
|
976 | |
977 |
|
978 |
|
979 | this.activeOverrides = new Set();
|
980 | |
981 |
|
982 |
|
983 | this.isAnimating = new Set();
|
984 | |
985 |
|
986 |
|
987 |
|
988 | this.hasValue = function (key) { return !_this.values.has(key); };
|
989 | this.values = values;
|
990 | this.readValueFromSource = readValueFromSource;
|
991 | this.makeTargetAnimatable = makeTargetAnimatable;
|
992 | this.values.forEach(function (value, key) { return (_this.baseTarget[key] = value.get()); });
|
993 | }
|
994 | |
995 |
|
996 |
|
997 |
|
998 | ValueAnimationControls.prototype.setProps = function (props) {
|
999 | this.props = props;
|
1000 | };
|
1001 | |
1002 |
|
1003 |
|
1004 |
|
1005 | ValueAnimationControls.prototype.setVariants = function (variants) {
|
1006 | if (variants)
|
1007 | this.variants = variants;
|
1008 | };
|
1009 | |
1010 |
|
1011 |
|
1012 |
|
1013 | ValueAnimationControls.prototype.setDefaultTransition = function (transition) {
|
1014 | if (transition)
|
1015 | this.defaultTransition = transition;
|
1016 | };
|
1017 | |
1018 |
|
1019 |
|
1020 |
|
1021 |
|
1022 |
|
1023 | ValueAnimationControls.prototype.setValues = function (definition, _a) {
|
1024 | var _this = this;
|
1025 | var _b = _a === void 0 ? {} : _a, _c = _b.isActive, isActive = _c === void 0 ? new Set() : _c, priority = _b.priority;
|
1026 | var _d = this.resolveVariant(definition), target = _d.target, transitionEnd = _d.transitionEnd;
|
1027 | target = this.transformValues(tslib.__assign(tslib.__assign({}, target), transitionEnd));
|
1028 | return Object.keys(target).forEach(function (key) {
|
1029 | if (isActive.has(key))
|
1030 | return;
|
1031 | isActive.add(key);
|
1032 | if (target) {
|
1033 | var targetValue = resolveFinalValueInKeyframes(target[key]);
|
1034 | if (_this.values.has(key)) {
|
1035 | var value = _this.values.get(key);
|
1036 | value && value.set(targetValue);
|
1037 | }
|
1038 | else {
|
1039 | _this.values.set(key, motionValue(targetValue));
|
1040 | }
|
1041 | if (!priority)
|
1042 | _this.baseTarget[key] = targetValue;
|
1043 | }
|
1044 | });
|
1045 | };
|
1046 | |
1047 |
|
1048 |
|
1049 |
|
1050 |
|
1051 |
|
1052 |
|
1053 |
|
1054 | ValueAnimationControls.prototype.transformValues = function (values) {
|
1055 | var transformValues = this.props.transformValues;
|
1056 | return transformValues ? transformValues(values) : values;
|
1057 | };
|
1058 | |
1059 |
|
1060 |
|
1061 |
|
1062 |
|
1063 |
|
1064 |
|
1065 |
|
1066 |
|
1067 |
|
1068 | ValueAnimationControls.prototype.checkForNewValues = function (target) {
|
1069 | var newValueKeys = Object.keys(target).filter(this.hasValue);
|
1070 | var numNewValues = newValueKeys.length;
|
1071 | if (!numNewValues)
|
1072 | return;
|
1073 | for (var i = 0; i < numNewValues; i++) {
|
1074 | var key = newValueKeys[i];
|
1075 | var targetValue = target[key];
|
1076 | var value = null;
|
1077 |
|
1078 |
|
1079 | if (Array.isArray(targetValue)) {
|
1080 | value = targetValue[0];
|
1081 | }
|
1082 |
|
1083 |
|
1084 |
|
1085 | if (value === null) {
|
1086 | value = this.readValueFromSource(key);
|
1087 | heyListen.invariant(value !== null, "No initial value for \"" + key + "\" can be inferred. Ensure an initial value for \"" + key + "\" is defined on the component.");
|
1088 | }
|
1089 | if (typeof value === "string" && isNumericalString(value)) {
|
1090 |
|
1091 | value = parseFloat(value);
|
1092 | }
|
1093 | else if (!getValueType(value) && styleValueTypes.complex.test(targetValue)) {
|
1094 |
|
1095 | value = styleValueTypes.complex.getAnimatableNone(targetValue);
|
1096 | }
|
1097 | this.values.set(key, motionValue(value));
|
1098 | this.baseTarget[key] = value;
|
1099 | }
|
1100 | };
|
1101 | |
1102 |
|
1103 |
|
1104 |
|
1105 | ValueAnimationControls.prototype.resolveVariant = function (variant) {
|
1106 | if (!variant) {
|
1107 | return {
|
1108 | target: undefined,
|
1109 | transition: undefined,
|
1110 | transitionEnd: undefined,
|
1111 | };
|
1112 | }
|
1113 | if (isTargetResolver(variant)) {
|
1114 |
|
1115 | variant = variant(this.props.custom, getCurrent(this.values), getVelocity(this.values));
|
1116 | }
|
1117 | var _a = variant.transition, transition = _a === void 0 ? this.defaultTransition : _a, transitionEnd = variant.transitionEnd, target = tslib.__rest(variant, ["transition", "transitionEnd"]);
|
1118 | return { transition: transition, transitionEnd: transitionEnd, target: target };
|
1119 | };
|
1120 | |
1121 |
|
1122 |
|
1123 | ValueAnimationControls.prototype.getHighestPriority = function () {
|
1124 | if (!this.activeOverrides.size)
|
1125 | return 0;
|
1126 | return Math.max.apply(Math, Array.from(this.activeOverrides));
|
1127 | };
|
1128 | |
1129 |
|
1130 |
|
1131 |
|
1132 |
|
1133 |
|
1134 |
|
1135 |
|
1136 |
|
1137 | ValueAnimationControls.prototype.setOverride = function (definition, overrideIndex) {
|
1138 | this.overrides[overrideIndex] = definition;
|
1139 | if (this.children) {
|
1140 | this.children.forEach(function (child) {
|
1141 | return child.setOverride(definition, overrideIndex);
|
1142 | });
|
1143 | }
|
1144 | };
|
1145 | |
1146 |
|
1147 |
|
1148 |
|
1149 | ValueAnimationControls.prototype.startOverride = function (overrideIndex) {
|
1150 | var override = this.overrides[overrideIndex];
|
1151 | if (override) {
|
1152 | return this.start(override, { priority: overrideIndex });
|
1153 | }
|
1154 | };
|
1155 | |
1156 |
|
1157 |
|
1158 |
|
1159 |
|
1160 | ValueAnimationControls.prototype.clearOverride = function (overrideIndex) {
|
1161 | var _this = this;
|
1162 | if (this.children) {
|
1163 | this.children.forEach(function (child) { return child.clearOverride(overrideIndex); });
|
1164 | }
|
1165 | var override = this.overrides[overrideIndex];
|
1166 | if (!override)
|
1167 | return;
|
1168 | this.activeOverrides.delete(overrideIndex);
|
1169 | var highest = this.getHighestPriority();
|
1170 | this.resetIsAnimating();
|
1171 | if (highest) {
|
1172 | var highestOverride = this.overrides[highest];
|
1173 | highestOverride && this.startOverride(highest);
|
1174 | }
|
1175 |
|
1176 | var overrideTarget = this.resolvedOverrides[overrideIndex];
|
1177 | if (!overrideTarget)
|
1178 | return;
|
1179 | var remainingValues = {};
|
1180 | for (var key in this.baseTarget) {
|
1181 | if (overrideTarget[key] !== undefined) {
|
1182 | remainingValues[key] = this.baseTarget[key];
|
1183 | }
|
1184 | }
|
1185 | this.onStart();
|
1186 | this.animate(remainingValues).then(function () { return _this.onComplete(); });
|
1187 | };
|
1188 | |
1189 |
|
1190 |
|
1191 | ValueAnimationControls.prototype.apply = function (definition) {
|
1192 | if (Array.isArray(definition)) {
|
1193 | return this.applyVariantLabels(definition);
|
1194 | }
|
1195 | else if (typeof definition === "string") {
|
1196 | return this.applyVariantLabels([definition]);
|
1197 | }
|
1198 | else {
|
1199 | this.setValues(definition);
|
1200 | }
|
1201 | };
|
1202 | |
1203 |
|
1204 |
|
1205 | ValueAnimationControls.prototype.applyVariantLabels = function (variantLabelList) {
|
1206 | var _this = this;
|
1207 | var isActive = new Set();
|
1208 | var reversedList = tslib.__spreadArrays(variantLabelList).reverse();
|
1209 | reversedList.forEach(function (key) {
|
1210 | var _a = _this.resolveVariant(_this.variants[key]), target = _a.target, transitionEnd = _a.transitionEnd;
|
1211 | if (transitionEnd) {
|
1212 | _this.setValues(transitionEnd, { isActive: isActive });
|
1213 | }
|
1214 | if (target) {
|
1215 | _this.setValues(target, { isActive: isActive });
|
1216 | }
|
1217 | if (_this.children && _this.children.size) {
|
1218 | _this.children.forEach(function (child) {
|
1219 | return child.applyVariantLabels(variantLabelList);
|
1220 | });
|
1221 | }
|
1222 | });
|
1223 | };
|
1224 | ValueAnimationControls.prototype.start = function (definition, opts) {
|
1225 | var _this = this;
|
1226 | if (opts === void 0) { opts = {}; }
|
1227 | if (opts.priority) {
|
1228 | this.activeOverrides.add(opts.priority);
|
1229 | }
|
1230 | this.resetIsAnimating(opts.priority);
|
1231 | var animation;
|
1232 | if (isVariantLabels(definition)) {
|
1233 | animation = this.animateVariantLabels(definition, opts);
|
1234 | }
|
1235 | else if (typeof definition === "string") {
|
1236 | animation = this.animateVariant(definition, opts);
|
1237 | }
|
1238 | else {
|
1239 | animation = this.animate(definition, opts);
|
1240 | }
|
1241 | this.onStart();
|
1242 | return animation.then(function () { return _this.onComplete(); });
|
1243 | };
|
1244 | ValueAnimationControls.prototype.animate = function (animationDefinition, _a) {
|
1245 | var _this = this;
|
1246 | var _b = _a === void 0 ? {} : _a, _c = _b.delay, delay = _c === void 0 ? 0 : _c, _d = _b.priority, priority = _d === void 0 ? 0 : _d, transitionOverride = _b.transitionOverride;
|
1247 | var _e = this.resolveVariant(animationDefinition), target = _e.target, transition = _e.transition, transitionEnd = _e.transitionEnd;
|
1248 | if (transitionOverride) {
|
1249 | transition = transitionOverride;
|
1250 | }
|
1251 | if (!target)
|
1252 | return Promise.resolve();
|
1253 | target = this.transformValues(target);
|
1254 | if (transitionEnd) {
|
1255 | transitionEnd = this.transformValues(transitionEnd);
|
1256 | }
|
1257 | this.checkForNewValues(target);
|
1258 | if (this.makeTargetAnimatable) {
|
1259 | var animatable = this.makeTargetAnimatable(target, transitionEnd);
|
1260 | target = animatable.target;
|
1261 | transitionEnd = animatable.transitionEnd;
|
1262 | }
|
1263 | if (priority) {
|
1264 | this.resolvedOverrides[priority] = target;
|
1265 | }
|
1266 | this.checkForNewValues(target);
|
1267 | var animations = [];
|
1268 | for (var key in target) {
|
1269 | var value = this.values.get(key);
|
1270 | if (!value || !target || target[key] === undefined)
|
1271 | continue;
|
1272 | var valueTarget = target[key];
|
1273 | if (!priority) {
|
1274 | this.baseTarget[key] = resolveFinalValueInKeyframes(valueTarget);
|
1275 | }
|
1276 | if (this.isAnimating.has(key))
|
1277 | continue;
|
1278 | this.isAnimating.add(key);
|
1279 | animations.push(startAnimation(key, value, valueTarget, tslib.__assign({ delay: delay }, transition)));
|
1280 | }
|
1281 | var allAnimations = Promise.all(animations);
|
1282 | return transitionEnd
|
1283 | ? allAnimations.then(function () {
|
1284 | _this.setValues(transitionEnd, { priority: priority });
|
1285 | })
|
1286 | : allAnimations;
|
1287 | };
|
1288 | ValueAnimationControls.prototype.animateVariantLabels = function (variantLabels, opts) {
|
1289 | var _this = this;
|
1290 | var animations = tslib.__spreadArrays(variantLabels).reverse()
|
1291 | .map(function (label) { return _this.animateVariant(label, opts); });
|
1292 | return Promise.all(animations);
|
1293 | };
|
1294 | ValueAnimationControls.prototype.animateVariant = function (variantLabel, opts) {
|
1295 | var _this = this;
|
1296 | var when = false;
|
1297 | var delayChildren = 0;
|
1298 | var staggerChildren = 0;
|
1299 | var staggerDirection = 1;
|
1300 | var priority = (opts && opts.priority) || 0;
|
1301 | var variant = this.variants[variantLabel];
|
1302 | var getAnimations = variant
|
1303 | ? function () { return _this.animate(variant, opts); }
|
1304 | : function () { return Promise.resolve(); };
|
1305 | var getChildrenAnimations = this.children
|
1306 | ? function () {
|
1307 | return _this.animateChildren(variantLabel, delayChildren, staggerChildren, staggerDirection, priority);
|
1308 | }
|
1309 | : function () { return Promise.resolve(); };
|
1310 | if (variant && this.children) {
|
1311 | var transition = this.resolveVariant(variant).transition;
|
1312 | if (transition) {
|
1313 | when = transition.when || when;
|
1314 | delayChildren = transition.delayChildren || delayChildren;
|
1315 | staggerChildren = transition.staggerChildren || staggerChildren;
|
1316 | staggerDirection =
|
1317 | transition.staggerDirection || staggerDirection;
|
1318 | }
|
1319 | }
|
1320 | if (when) {
|
1321 | var _a = when === "beforeChildren"
|
1322 | ? [getAnimations, getChildrenAnimations]
|
1323 | : [getChildrenAnimations, getAnimations], first = _a[0], last = _a[1];
|
1324 | return first().then(last);
|
1325 | }
|
1326 | else {
|
1327 | return Promise.all([getAnimations(), getChildrenAnimations()]);
|
1328 | }
|
1329 | };
|
1330 | ValueAnimationControls.prototype.animateChildren = function (variantLabel, delayChildren, staggerChildren, staggerDirection, priority) {
|
1331 | if (delayChildren === void 0) { delayChildren = 0; }
|
1332 | if (staggerChildren === void 0) { staggerChildren = 0; }
|
1333 | if (staggerDirection === void 0) { staggerDirection = 1; }
|
1334 | if (priority === void 0) { priority = 0; }
|
1335 | if (!this.children) {
|
1336 | return Promise.resolve();
|
1337 | }
|
1338 | var animations = [];
|
1339 | var maxStaggerDuration = (this.children.size - 1) * staggerChildren;
|
1340 | var generateStaggerDuration = staggerDirection === 1
|
1341 | ? function (i) { return i * staggerChildren; }
|
1342 | : function (i) { return maxStaggerDuration - i * staggerChildren; };
|
1343 | Array.from(this.children).forEach(function (childControls, i) {
|
1344 | var animation = childControls.animateVariant(variantLabel, {
|
1345 | priority: priority,
|
1346 | delay: delayChildren + generateStaggerDuration(i),
|
1347 | });
|
1348 | animations.push(animation);
|
1349 | });
|
1350 | return Promise.all(animations);
|
1351 | };
|
1352 | ValueAnimationControls.prototype.onStart = function () {
|
1353 | var onAnimationStart = this.props.onAnimationStart;
|
1354 | onAnimationStart && onAnimationStart();
|
1355 | };
|
1356 | ValueAnimationControls.prototype.onComplete = function () {
|
1357 | var onAnimationComplete = this.props.onAnimationComplete;
|
1358 | onAnimationComplete && onAnimationComplete();
|
1359 | };
|
1360 | ValueAnimationControls.prototype.checkOverrideIsAnimating = function (priority) {
|
1361 | var numOverrides = this.overrides.length;
|
1362 | for (var i = priority + 1; i < numOverrides; i++) {
|
1363 | var resolvedOverride = this.resolvedOverrides[i];
|
1364 | if (resolvedOverride) {
|
1365 | for (var key in resolvedOverride) {
|
1366 | this.isAnimating.add(key);
|
1367 | }
|
1368 | }
|
1369 | }
|
1370 | };
|
1371 | ValueAnimationControls.prototype.resetIsAnimating = function (priority) {
|
1372 | if (priority === void 0) { priority = 0; }
|
1373 | this.isAnimating.clear();
|
1374 |
|
1375 |
|
1376 | if (priority < this.getHighestPriority()) {
|
1377 | this.checkOverrideIsAnimating(priority);
|
1378 | }
|
1379 | if (this.children) {
|
1380 | this.children.forEach(function (child) { return child.resetIsAnimating(priority); });
|
1381 | }
|
1382 | };
|
1383 | ValueAnimationControls.prototype.stop = function () {
|
1384 | this.values.forEach(function (value) { return value.stop(); });
|
1385 | };
|
1386 | |
1387 |
|
1388 |
|
1389 |
|
1390 | ValueAnimationControls.prototype.addChild = function (controls) {
|
1391 | if (!this.children) {
|
1392 | this.children = new Set();
|
1393 | }
|
1394 | this.children.add(controls);
|
1395 |
|
1396 |
|
1397 | this.overrides.forEach(function (override, i) {
|
1398 | override && controls.setOverride(override, i);
|
1399 | });
|
1400 | };
|
1401 | ValueAnimationControls.prototype.removeChild = function (controls) {
|
1402 | if (!this.children) {
|
1403 | return;
|
1404 | }
|
1405 | this.children.delete(controls);
|
1406 | };
|
1407 | ValueAnimationControls.prototype.resetChildren = function () {
|
1408 | if (this.children)
|
1409 | this.children.clear();
|
1410 | };
|
1411 | return ValueAnimationControls;
|
1412 | }());
|
1413 |
|
1414 |
|
1415 |
|
1416 |
|
1417 |
|
1418 |
|
1419 |
|
1420 |
|
1421 |
|
1422 |
|
1423 | function useInitialOrEveryRender(callback, isInitialOnly) {
|
1424 | if (isInitialOnly === void 0) { isInitialOnly = false; }
|
1425 | var isInitialRender = React.useRef(true);
|
1426 | if (!isInitialOnly || (isInitialOnly && isInitialRender.current)) {
|
1427 | callback();
|
1428 | }
|
1429 | isInitialRender.current = false;
|
1430 | }
|
1431 |
|
1432 |
|
1433 |
|
1434 |
|
1435 |
|
1436 |
|
1437 | var AnimationControls = (function () {
|
1438 | function AnimationControls() {
|
1439 | |
1440 |
|
1441 |
|
1442 |
|
1443 |
|
1444 | this.hasMounted = false;
|
1445 | |
1446 |
|
1447 |
|
1448 |
|
1449 |
|
1450 | this.pendingAnimations = [];
|
1451 | |
1452 |
|
1453 |
|
1454 |
|
1455 |
|
1456 | this.componentControls = new Set();
|
1457 | }
|
1458 | |
1459 |
|
1460 |
|
1461 |
|
1462 |
|
1463 |
|
1464 |
|
1465 | AnimationControls.prototype.setVariants = function (variants) {
|
1466 | this.variants = variants;
|
1467 | this.componentControls.forEach(function (controls) {
|
1468 | return controls.setVariants(variants);
|
1469 | });
|
1470 | };
|
1471 | |
1472 |
|
1473 |
|
1474 |
|
1475 |
|
1476 |
|
1477 |
|
1478 | AnimationControls.prototype.setDefaultTransition = function (transition) {
|
1479 | this.defaultTransition = transition;
|
1480 | this.componentControls.forEach(function (controls) {
|
1481 | return controls.setDefaultTransition(transition);
|
1482 | });
|
1483 | };
|
1484 | |
1485 |
|
1486 |
|
1487 |
|
1488 |
|
1489 |
|
1490 |
|
1491 |
|
1492 | AnimationControls.prototype.subscribe = function (controls) {
|
1493 | var _this = this;
|
1494 | this.componentControls.add(controls);
|
1495 | if (this.variants)
|
1496 | controls.setVariants(this.variants);
|
1497 | if (this.defaultTransition)
|
1498 | controls.setDefaultTransition(this.defaultTransition);
|
1499 | return function () { return _this.componentControls.delete(controls); };
|
1500 | };
|
1501 | |
1502 |
|
1503 |
|
1504 |
|
1505 |
|
1506 |
|
1507 |
|
1508 |
|
1509 |
|
1510 |
|
1511 |
|
1512 |
|
1513 |
|
1514 |
|
1515 |
|
1516 |
|
1517 |
|
1518 |
|
1519 |
|
1520 | AnimationControls.prototype.start = function (definition, transitionOverride) {
|
1521 | var _this = this;
|
1522 | if (this.hasMounted) {
|
1523 | var animations_1 = [];
|
1524 | this.componentControls.forEach(function (controls) {
|
1525 | var animation = controls.start(definition, {
|
1526 | transitionOverride: transitionOverride,
|
1527 | });
|
1528 | animations_1.push(animation);
|
1529 | });
|
1530 | return Promise.all(animations_1);
|
1531 | }
|
1532 | else {
|
1533 | return new Promise(function (resolve) {
|
1534 | _this.pendingAnimations.push({
|
1535 | animation: [definition, transitionOverride],
|
1536 | resolve: resolve,
|
1537 | });
|
1538 | });
|
1539 | }
|
1540 | };
|
1541 | |
1542 |
|
1543 |
|
1544 |
|
1545 |
|
1546 |
|
1547 |
|
1548 |
|
1549 |
|
1550 |
|
1551 |
|
1552 |
|
1553 |
|
1554 |
|
1555 |
|
1556 |
|
1557 |
|
1558 |
|
1559 |
|
1560 |
|
1561 | AnimationControls.prototype.set = function (definition) {
|
1562 | heyListen.invariant(this.hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
|
1563 | return this.componentControls.forEach(function (controls) {
|
1564 | return controls.apply(definition);
|
1565 | });
|
1566 | };
|
1567 | |
1568 |
|
1569 |
|
1570 |
|
1571 |
|
1572 |
|
1573 |
|
1574 |
|
1575 |
|
1576 | AnimationControls.prototype.stop = function () {
|
1577 | this.componentControls.forEach(function (controls) { return controls.stop(); });
|
1578 | };
|
1579 | |
1580 |
|
1581 |
|
1582 |
|
1583 |
|
1584 | AnimationControls.prototype.mount = function () {
|
1585 | var _this = this;
|
1586 | this.hasMounted = true;
|
1587 | this.pendingAnimations.forEach(function (_a) {
|
1588 | var animation = _a.animation, resolve = _a.resolve;
|
1589 | return _this.start.apply(_this, animation).then(resolve);
|
1590 | });
|
1591 | };
|
1592 | |
1593 |
|
1594 |
|
1595 |
|
1596 |
|
1597 | AnimationControls.prototype.unmount = function () {
|
1598 | this.hasMounted = false;
|
1599 | this.stop();
|
1600 | };
|
1601 | return AnimationControls;
|
1602 | }());
|
1603 |
|
1604 |
|
1605 |
|
1606 | var animationControls = function () { return new AnimationControls(); };
|
1607 |
|
1608 |
|
1609 |
|
1610 |
|
1611 | var MotionContext = React.createContext({
|
1612 | static: false,
|
1613 | });
|
1614 | var isVariantLabel = function (v) {
|
1615 | return typeof v === "string" || Array.isArray(v);
|
1616 | };
|
1617 | var isAnimationControls = function (v) {
|
1618 | return v instanceof AnimationControls;
|
1619 | };
|
1620 |
|
1621 |
|
1622 |
|
1623 |
|
1624 |
|
1625 | var useMotionContext = function (parentContext, controls, values, isStatic, _a) {
|
1626 | if (isStatic === void 0) { isStatic = false; }
|
1627 | var initial = _a.initial, animate = _a.animate, variants = _a.variants, whileTap = _a.whileTap, whileHover = _a.whileHover;
|
1628 |
|
1629 | if (parentContext.exitProps &&
|
1630 | parentContext.exitProps.initial !== undefined) {
|
1631 | initial = parentContext.exitProps.initial;
|
1632 | }
|
1633 | var initialState;
|
1634 | if (initial === false && !isAnimationControls(animate)) {
|
1635 | initialState = animate;
|
1636 | }
|
1637 | else if (typeof initial !== "boolean") {
|
1638 | initialState = initial;
|
1639 | }
|
1640 |
|
1641 |
|
1642 | var hasMounted = React.useRef(false);
|
1643 |
|
1644 |
|
1645 |
|
1646 |
|
1647 |
|
1648 | var shouldPropagateControls = variants ||
|
1649 | isVariantLabel(animate) ||
|
1650 | isVariantLabel(whileTap) ||
|
1651 | isVariantLabel(whileHover) ||
|
1652 | isAnimationControls(animate);
|
1653 |
|
1654 | var targetInitial = isVariantLabel(initialState)
|
1655 | ? initialState
|
1656 | : parentContext.initial;
|
1657 |
|
1658 |
|
1659 | var targetAnimate = isVariantLabel(animate)
|
1660 | ? animate
|
1661 | : parentContext.animate;
|
1662 |
|
1663 |
|
1664 | var initialDependency = isStatic ? targetInitial : null;
|
1665 |
|
1666 |
|
1667 |
|
1668 |
|
1669 | var animateDependency = shouldPropagateControls && isVariantLabel(targetAnimate)
|
1670 | ? targetAnimate
|
1671 | : null;
|
1672 |
|
1673 |
|
1674 |
|
1675 | var context = React.useMemo(function () { return ({
|
1676 | controls: shouldPropagateControls
|
1677 | ? controls
|
1678 | : parentContext.controls,
|
1679 | initial: targetInitial,
|
1680 | animate: targetAnimate,
|
1681 | values: values,
|
1682 | hasMounted: hasMounted,
|
1683 | isReducedMotion: parentContext.isReducedMotion,
|
1684 | }); }, [initialDependency, animateDependency, parentContext.isReducedMotion]);
|
1685 |
|
1686 | context.static = isStatic;
|
1687 |
|
1688 |
|
1689 | useInitialOrEveryRender(function () {
|
1690 | var initialToApply = initialState || parentContext.initial;
|
1691 | initialToApply && controls.apply(initialToApply);
|
1692 | }, !isStatic);
|
1693 | React.useEffect(function () {
|
1694 | hasMounted.current = true;
|
1695 | }, []);
|
1696 | return context;
|
1697 | };
|
1698 |
|
1699 |
|
1700 |
|
1701 |
|
1702 |
|
1703 |
|
1704 |
|
1705 |
|
1706 |
|
1707 |
|
1708 |
|
1709 |
|
1710 |
|
1711 | function useValueAnimationControls(config, props, subscribeToParentControls, parentContext) {
|
1712 | var variants = props.variants, transition = props.transition;
|
1713 | var parentControls = React.useContext(MotionContext).controls;
|
1714 | var controls = useConstant(function () { return new ValueAnimationControls(config); });
|
1715 |
|
1716 | if (!parentContext ||
|
1717 | !parentContext.exitProps ||
|
1718 | !parentContext.exitProps.isExiting) {
|
1719 | controls.resetChildren();
|
1720 | controls.setProps(props);
|
1721 | controls.setVariants(variants);
|
1722 | controls.setDefaultTransition(transition);
|
1723 | }
|
1724 |
|
1725 |
|
1726 | React.useEffect(function () {
|
1727 | if (subscribeToParentControls && parentControls) {
|
1728 | parentControls.addChild(controls);
|
1729 | }
|
1730 | });
|
1731 | React.useEffect(function () {
|
1732 | return function () {
|
1733 |
|
1734 |
|
1735 |
|
1736 | var onAnimationComplete = props.onAnimationComplete, unmountProps = tslib.__rest(props, ["onAnimationComplete"]);
|
1737 | controls.setProps(unmountProps);
|
1738 | parentControls && parentControls.removeChild(controls);
|
1739 | };
|
1740 | }, []);
|
1741 | return controls;
|
1742 | }
|
1743 |
|
1744 | var checkShouldInheritVariant = function (_a) {
|
1745 | var animate = _a.animate, variants = _a.variants, _b = _a.inherit, inherit = _b === void 0 ? true : _b;
|
1746 | return (inherit &&
|
1747 | !!variants &&
|
1748 | (!animate || animate instanceof AnimationControls));
|
1749 | };
|
1750 |
|
1751 |
|
1752 |
|
1753 |
|
1754 |
|
1755 |
|
1756 | function useExternalRef(externalRef) {
|
1757 |
|
1758 |
|
1759 |
|
1760 |
|
1761 | var ref = !externalRef || typeof externalRef === "function"
|
1762 | ? React.useRef(null)
|
1763 | : externalRef;
|
1764 |
|
1765 |
|
1766 |
|
1767 |
|
1768 |
|
1769 | if (externalRef && typeof externalRef === "function") {
|
1770 | React.useEffect(function () {
|
1771 | externalRef(ref.current);
|
1772 | return function () { return externalRef(null); };
|
1773 | }, []);
|
1774 | }
|
1775 | return ref;
|
1776 | }
|
1777 |
|
1778 |
|
1779 |
|
1780 |
|
1781 | var createMotionComponent = function (_a) {
|
1782 | var getValueControlsConfig = _a.getValueControlsConfig, loadFunctionalityComponents = _a.loadFunctionalityComponents, renderComponent = _a.renderComponent;
|
1783 | function MotionComponent(props, externalRef) {
|
1784 | var ref = useExternalRef(externalRef);
|
1785 | var parentContext = React.useContext(MotionContext);
|
1786 | var isStatic = parentContext.static || props.static || false;
|
1787 | var values = useMotionValues(props);
|
1788 | var style = useMotionStyles(values, props.style, isStatic, props.transformValues);
|
1789 | var shouldInheritVariant = checkShouldInheritVariant(props);
|
1790 | var controlsConfig = useConstant(function () {
|
1791 | return getValueControlsConfig(ref, values);
|
1792 | });
|
1793 | var controls = useValueAnimationControls(controlsConfig, props, shouldInheritVariant, parentContext);
|
1794 | var context = useMotionContext(parentContext, controls, values, isStatic, props);
|
1795 | var functionality = isStatic
|
1796 | ? null
|
1797 | : loadFunctionalityComponents(ref, values, props, parentContext, controls, shouldInheritVariant);
|
1798 | var renderedComponent = renderComponent(ref, style, values, props, isStatic);
|
1799 | return (React.createElement(React.Fragment, null,
|
1800 | React.createElement(MotionContext.Provider, { value: context }, renderedComponent),
|
1801 | React.createElement(React.Fragment, null,
|
1802 | React.createElement(Mount, { innerRef: ref, values: values, isStatic: isStatic }),
|
1803 | functionality)));
|
1804 | }
|
1805 | return React.forwardRef(MotionComponent);
|
1806 | };
|
1807 |
|
1808 |
|
1809 |
|
1810 |
|
1811 | var htmlElements = [
|
1812 | "a",
|
1813 | "abbr",
|
1814 | "address",
|
1815 | "area",
|
1816 | "article",
|
1817 | "aside",
|
1818 | "audio",
|
1819 | "b",
|
1820 | "base",
|
1821 | "bdi",
|
1822 | "bdo",
|
1823 | "big",
|
1824 | "blockquote",
|
1825 | "body",
|
1826 | "br",
|
1827 | "button",
|
1828 | "canvas",
|
1829 | "caption",
|
1830 | "cite",
|
1831 | "code",
|
1832 | "col",
|
1833 | "colgroup",
|
1834 | "data",
|
1835 | "datalist",
|
1836 | "dd",
|
1837 | "del",
|
1838 | "details",
|
1839 | "dfn",
|
1840 | "dialog",
|
1841 | "div",
|
1842 | "dl",
|
1843 | "dt",
|
1844 | "em",
|
1845 | "embed",
|
1846 | "fieldset",
|
1847 | "figcaption",
|
1848 | "figure",
|
1849 | "footer",
|
1850 | "form",
|
1851 | "h1",
|
1852 | "h2",
|
1853 | "h3",
|
1854 | "h4",
|
1855 | "h5",
|
1856 | "h6",
|
1857 | "head",
|
1858 | "header",
|
1859 | "hgroup",
|
1860 | "hr",
|
1861 | "html",
|
1862 | "i",
|
1863 | "iframe",
|
1864 | "img",
|
1865 | "input",
|
1866 | "ins",
|
1867 | "kbd",
|
1868 | "keygen",
|
1869 | "label",
|
1870 | "legend",
|
1871 | "li",
|
1872 | "link",
|
1873 | "main",
|
1874 | "map",
|
1875 | "mark",
|
1876 | "menu",
|
1877 | "menuitem",
|
1878 | "meta",
|
1879 | "meter",
|
1880 | "nav",
|
1881 | "noscript",
|
1882 | "object",
|
1883 | "ol",
|
1884 | "optgroup",
|
1885 | "option",
|
1886 | "output",
|
1887 | "p",
|
1888 | "param",
|
1889 | "picture",
|
1890 | "pre",
|
1891 | "progress",
|
1892 | "q",
|
1893 | "rp",
|
1894 | "rt",
|
1895 | "ruby",
|
1896 | "s",
|
1897 | "samp",
|
1898 | "script",
|
1899 | "section",
|
1900 | "select",
|
1901 | "small",
|
1902 | "source",
|
1903 | "span",
|
1904 | "strong",
|
1905 | "style",
|
1906 | "sub",
|
1907 | "summary",
|
1908 | "sup",
|
1909 | "table",
|
1910 | "tbody",
|
1911 | "td",
|
1912 | "textarea",
|
1913 | "tfoot",
|
1914 | "th",
|
1915 | "thead",
|
1916 | "time",
|
1917 | "title",
|
1918 | "tr",
|
1919 | "track",
|
1920 | "u",
|
1921 | "ul",
|
1922 | "var",
|
1923 | "video",
|
1924 | "wbr",
|
1925 | "webview",
|
1926 | ];
|
1927 |
|
1928 |
|
1929 |
|
1930 | var svgElements = [
|
1931 | "animate",
|
1932 | "circle",
|
1933 | "clipPath",
|
1934 | "defs",
|
1935 | "desc",
|
1936 | "ellipse",
|
1937 | "feBlend",
|
1938 | "feColorMatrix",
|
1939 | "feComponentTransfer",
|
1940 | "feComposite",
|
1941 | "feConvolveMatrix",
|
1942 | "feDiffuseLighting",
|
1943 | "feDisplacementMap",
|
1944 | "feDistantLight",
|
1945 | "feDropShadow",
|
1946 | "feFlood",
|
1947 | "feFuncA",
|
1948 | "feFuncB",
|
1949 | "feFuncG",
|
1950 | "feFuncR",
|
1951 | "feGaussianBlur",
|
1952 | "feImage",
|
1953 | "feMerge",
|
1954 | "feMergeNode",
|
1955 | "feMorphology",
|
1956 | "feOffset",
|
1957 | "fePointLight",
|
1958 | "feSpecularLighting",
|
1959 | "feSpotLight",
|
1960 | "feTile",
|
1961 | "feTurbulence",
|
1962 | "filter",
|
1963 | "foreignObject",
|
1964 | "g",
|
1965 | "image",
|
1966 | "line",
|
1967 | "linearGradient",
|
1968 | "marker",
|
1969 | "mask",
|
1970 | "metadata",
|
1971 | "path",
|
1972 | "pattern",
|
1973 | "polygon",
|
1974 | "polyline",
|
1975 | "radialGradient",
|
1976 | "rect",
|
1977 | "stop",
|
1978 | "svg",
|
1979 | "switch",
|
1980 | "symbol",
|
1981 | "text",
|
1982 | "textPath",
|
1983 | "tspan",
|
1984 | "use",
|
1985 | "view",
|
1986 | ];
|
1987 |
|
1988 |
|
1989 |
|
1990 |
|
1991 | var MotionPluginContext = React.createContext({
|
1992 | transformPagePoint: function (p) { return p; },
|
1993 | });
|
1994 |
|
1995 |
|
1996 |
|
1997 |
|
1998 |
|
1999 |
|
2000 | function MotionPlugins(_a) {
|
2001 | var children = _a.children, props = tslib.__rest(_a, ["children"]);
|
2002 | var pluginContext = React.useContext(MotionPluginContext);
|
2003 | var value = React.useRef(tslib.__assign({}, pluginContext)).current;
|
2004 |
|
2005 |
|
2006 | for (var key in props) {
|
2007 | value[key] = props[key];
|
2008 | }
|
2009 | return (React.createElement(MotionPluginContext.Provider, { value: value }, children));
|
2010 | }
|
2011 |
|
2012 | function useUnmountEffect(callback) {
|
2013 | return React.useEffect(function () { return function () { return callback(); }; }, []);
|
2014 | }
|
2015 |
|
2016 | function addDomEvent(target, eventName, handler, options) {
|
2017 | if (!handler)
|
2018 | return;
|
2019 | target.addEventListener(eventName, handler, options);
|
2020 | return function () { return target.removeEventListener(eventName, handler, options); };
|
2021 | }
|
2022 |
|
2023 |
|
2024 |
|
2025 |
|
2026 |
|
2027 |
|
2028 |
|
2029 |
|
2030 |
|
2031 |
|
2032 |
|
2033 |
|
2034 |
|
2035 |
|
2036 |
|
2037 |
|
2038 |
|
2039 |
|
2040 |
|
2041 |
|
2042 |
|
2043 | function useDomEvent(ref, eventName, handler, options) {
|
2044 | React.useEffect(function () {
|
2045 | var element = ref.current;
|
2046 | if (handler && element) {
|
2047 | return addDomEvent(element, eventName, handler, options);
|
2048 | }
|
2049 | }, [ref, eventName, handler, options]);
|
2050 | }
|
2051 |
|
2052 | function isMouseEvent(event) {
|
2053 |
|
2054 | if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
|
2055 | return !!(event.pointerType === "mouse");
|
2056 | }
|
2057 | return event instanceof MouseEvent;
|
2058 | }
|
2059 | function isTouchEvent(event) {
|
2060 | var hasTouches = !!event.touches;
|
2061 | return hasTouches;
|
2062 | }
|
2063 |
|
2064 |
|
2065 |
|
2066 |
|
2067 |
|
2068 | function filterPrimaryPointer(eventHandler) {
|
2069 | if (!eventHandler)
|
2070 | return undefined;
|
2071 | return function (event) {
|
2072 | var isMouseEvent = event instanceof MouseEvent;
|
2073 | var isPrimaryPointer = !isMouseEvent ||
|
2074 | (isMouseEvent && event.button === 0);
|
2075 | if (isPrimaryPointer) {
|
2076 | eventHandler(event);
|
2077 | }
|
2078 | };
|
2079 | }
|
2080 | var defaultPagePoint = { pageX: 0, pageY: 0 };
|
2081 | function pointFromTouch(e) {
|
2082 | var primaryTouch = e.touches[0] || e.changedTouches[0];
|
2083 | var _a = primaryTouch || defaultPagePoint, pageX = _a.pageX, pageY = _a.pageY;
|
2084 | return { x: pageX, y: pageY };
|
2085 | }
|
2086 | function pointFromMouse(_a) {
|
2087 | var _b = _a.pageX, pageX = _b === void 0 ? 0 : _b, _c = _a.pageY, pageY = _c === void 0 ? 0 : _c;
|
2088 | return { x: pageX, y: pageY };
|
2089 | }
|
2090 | function extractEventInfo(event) {
|
2091 | return {
|
2092 | point: isTouchEvent(event)
|
2093 | ? pointFromTouch(event)
|
2094 | : pointFromMouse(event),
|
2095 | };
|
2096 | }
|
2097 | var wrapHandler = function (handler, shouldFilterPrimaryPointer) {
|
2098 | if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; }
|
2099 | if (!handler)
|
2100 | return;
|
2101 | var listener = function (event) { return handler(event, extractEventInfo(event)); };
|
2102 | return shouldFilterPrimaryPointer
|
2103 | ? filterPrimaryPointer(listener)
|
2104 | : listener;
|
2105 | };
|
2106 |
|
2107 | var isBrowser = typeof window !== "undefined";
|
2108 |
|
2109 | var supportsPointerEvents = function () {
|
2110 | return isBrowser && window.onpointerdown === null;
|
2111 | };
|
2112 | var supportsTouchEvents = function () {
|
2113 | return isBrowser && window.ontouchstart === null;
|
2114 | };
|
2115 | var supportsMouseEvents = function () {
|
2116 | return isBrowser && window.onmousedown === null;
|
2117 | };
|
2118 |
|
2119 | var mouseEventNames = {
|
2120 | pointerdown: "mousedown",
|
2121 | pointermove: "mousemove",
|
2122 | pointerup: "mouseup",
|
2123 | pointercancel: "mousecancel",
|
2124 | pointerover: "mouseover",
|
2125 | pointerout: "mouseout",
|
2126 | pointerenter: "mouseenter",
|
2127 | pointerleave: "mouseleave",
|
2128 | };
|
2129 | var touchEventNames = {
|
2130 | pointerdown: "touchstart",
|
2131 | pointermove: "touchmove",
|
2132 | pointerup: "touchend",
|
2133 | pointercancel: "touchcancel",
|
2134 | };
|
2135 | function getPointerEventName(name) {
|
2136 | if (supportsPointerEvents()) {
|
2137 | return name;
|
2138 | }
|
2139 | else if (supportsTouchEvents()) {
|
2140 | return touchEventNames[name];
|
2141 | }
|
2142 | else if (supportsMouseEvents()) {
|
2143 | return mouseEventNames[name];
|
2144 | }
|
2145 | return name;
|
2146 | }
|
2147 | function addPointerEvent(target, eventName, handler, options) {
|
2148 | return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
|
2149 | }
|
2150 | function usePointerEvent(ref, eventName, handler, options) {
|
2151 | return useDomEvent(ref, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
|
2152 | }
|
2153 |
|
2154 |
|
2155 | (function (Point) {
|
2156 |
|
2157 | Point.subtract = function (a, b) {
|
2158 | return { x: a.x - b.x, y: a.y - b.y };
|
2159 | };
|
2160 |
|
2161 | Point.relativeTo = function (idOrElem) {
|
2162 | var elem;
|
2163 | var getElem = function () {
|
2164 |
|
2165 | if (elem !== undefined)
|
2166 | return elem;
|
2167 | if (typeof idOrElem === "string") {
|
2168 | elem = document.getElementById(idOrElem);
|
2169 | }
|
2170 | else {
|
2171 | elem = idOrElem;
|
2172 | }
|
2173 | return elem;
|
2174 | };
|
2175 | return function (_a) {
|
2176 | var x = _a.x, y = _a.y;
|
2177 | var localElem = getElem();
|
2178 | if (!localElem)
|
2179 | return undefined;
|
2180 | var rect = localElem.getBoundingClientRect();
|
2181 | return {
|
2182 | x: x - rect.left - window.scrollX,
|
2183 | y: y - rect.top - window.scrollY,
|
2184 | };
|
2185 | };
|
2186 | };
|
2187 | })(exports.Point || (exports.Point = {}));
|
2188 |
|
2189 | var isViewportScrollBlocked = false;
|
2190 | var isBrowser$1 = typeof window !== "undefined";
|
2191 | if (isBrowser$1) {
|
2192 | document.addEventListener("touchmove", function (event) {
|
2193 | if (isViewportScrollBlocked) {
|
2194 | event.preventDefault();
|
2195 | }
|
2196 | }, { passive: false });
|
2197 | }
|
2198 | var blockViewportScroll = function () { return (isViewportScrollBlocked = true); };
|
2199 | var unblockViewportScroll = function () { return (isViewportScrollBlocked = false); };
|
2200 |
|
2201 |
|
2202 |
|
2203 |
|
2204 | var PanSession = (function () {
|
2205 | function PanSession(event, handlers, _a) {
|
2206 | var _this = this;
|
2207 | var transformPagePoint = (_a === void 0 ? {} : _a).transformPagePoint;
|
2208 | |
2209 |
|
2210 |
|
2211 | this.startEvent = null;
|
2212 | |
2213 |
|
2214 |
|
2215 | this.lastMoveEvent = null;
|
2216 | |
2217 |
|
2218 |
|
2219 | this.lastMoveEventInfo = null;
|
2220 | |
2221 |
|
2222 |
|
2223 | this.handlers = {};
|
2224 | this.updatePoint = function () {
|
2225 | if (!(_this.lastMoveEvent && _this.lastMoveEventInfo))
|
2226 | return;
|
2227 | var info = getPanInfo(_this.lastMoveEventInfo, _this.history);
|
2228 | var isPanStarted = _this.startEvent !== null;
|
2229 |
|
2230 |
|
2231 |
|
2232 | var isDistancePastThreshold = popcorn.distance(info.offset, { x: 0, y: 0 }) >= 3;
|
2233 | if (!isPanStarted && !isDistancePastThreshold)
|
2234 | return;
|
2235 | var point = info.point;
|
2236 | var timestamp = sync.getFrameData().timestamp;
|
2237 | _this.history.push(tslib.__assign(tslib.__assign({}, point), { timestamp: timestamp }));
|
2238 | var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove;
|
2239 | if (!isPanStarted) {
|
2240 | onStart && onStart(_this.lastMoveEvent, info);
|
2241 | _this.startEvent = _this.lastMoveEvent;
|
2242 | }
|
2243 | onMove && onMove(_this.lastMoveEvent, info);
|
2244 | };
|
2245 |
|
2246 | if (isTouchEvent(event) && event.touches.length > 1)
|
2247 | return;
|
2248 | this.handlers = handlers;
|
2249 | this.transformPagePoint = transformPagePoint;
|
2250 | var info = extractEventInfo(event);
|
2251 | var initialInfo = transformPoint(info, this.transformPagePoint);
|
2252 | var point = initialInfo.point;
|
2253 | var timestamp = sync.getFrameData().timestamp;
|
2254 | this.history = [tslib.__assign(tslib.__assign({}, point), { timestamp: timestamp })];
|
2255 | var onSessionStart = handlers.onSessionStart;
|
2256 | onSessionStart &&
|
2257 | onSessionStart(event, getPanInfo(initialInfo, this.history));
|
2258 | var removeOnPointerMove = addPointerEvent(window, "pointermove", function (event, info) { return _this.handlePointerMove(event, info); });
|
2259 | var removeOnPointerUp = addPointerEvent(window, "pointerup", function (event, info) { return _this.handlePointerUp(event, info); });
|
2260 | this.removeListeners = function () {
|
2261 | removeOnPointerMove && removeOnPointerMove();
|
2262 | removeOnPointerUp && removeOnPointerUp();
|
2263 | };
|
2264 | }
|
2265 | PanSession.prototype.handlePointerMove = function (event, info) {
|
2266 | this.lastMoveEvent = event;
|
2267 | this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
|
2268 |
|
2269 | if (isMouseEvent(event) && event.buttons === 0) {
|
2270 | this.handlePointerUp(event, info);
|
2271 | return;
|
2272 | }
|
2273 |
|
2274 | sync__default.update(this.updatePoint, true);
|
2275 | };
|
2276 | PanSession.prototype.handlePointerUp = function (event, info) {
|
2277 | this.end();
|
2278 | var onEnd = this.handlers.onEnd;
|
2279 | if (!onEnd)
|
2280 | return;
|
2281 | var panInfo = getPanInfo(transformPoint(info, this.transformPagePoint), this.history);
|
2282 | onEnd && onEnd(event, panInfo);
|
2283 | };
|
2284 | PanSession.prototype.updateHandlers = function (handlers) {
|
2285 | this.handlers = handlers;
|
2286 | };
|
2287 | PanSession.prototype.end = function () {
|
2288 | this.removeListeners && this.removeListeners();
|
2289 | sync.cancelSync.update(this.updatePoint);
|
2290 | unblockViewportScroll();
|
2291 | };
|
2292 | return PanSession;
|
2293 | }());
|
2294 | function transformPoint(info, transformPagePoint) {
|
2295 | return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
|
2296 | }
|
2297 | function getPanInfo(_a, history) {
|
2298 | var point = _a.point;
|
2299 | return {
|
2300 | point: point,
|
2301 | delta: exports.Point.subtract(point, lastDevicePoint(history)),
|
2302 | offset: exports.Point.subtract(point, startDevicePoint(history)),
|
2303 | velocity: getVelocity$1(history, 0.1),
|
2304 | };
|
2305 | }
|
2306 | function startDevicePoint(history) {
|
2307 | return history[0];
|
2308 | }
|
2309 | function lastDevicePoint(history) {
|
2310 | return history[history.length - 1];
|
2311 | }
|
2312 | function getVelocity$1(history, timeDelta) {
|
2313 | if (history.length < 2) {
|
2314 | return { x: 0, y: 0 };
|
2315 | }
|
2316 | var i = history.length - 1;
|
2317 | var timestampedPoint = null;
|
2318 | var lastPoint = lastDevicePoint(history);
|
2319 | while (i >= 0) {
|
2320 | timestampedPoint = history[i];
|
2321 | if (lastPoint.timestamp - timestampedPoint.timestamp >
|
2322 | secondsToMilliseconds(timeDelta)) {
|
2323 | break;
|
2324 | }
|
2325 | i--;
|
2326 | }
|
2327 | if (!timestampedPoint) {
|
2328 | return { x: 0, y: 0 };
|
2329 | }
|
2330 | var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
|
2331 | if (time === 0) {
|
2332 | return { x: 0, y: 0 };
|
2333 | }
|
2334 | var currentVelocity = {
|
2335 | x: (lastPoint.x - timestampedPoint.x) / time,
|
2336 | y: (lastPoint.y - timestampedPoint.y) / time,
|
2337 | };
|
2338 | if (currentVelocity.x === Infinity) {
|
2339 | currentVelocity.x = 0;
|
2340 | }
|
2341 | if (currentVelocity.y === Infinity) {
|
2342 | currentVelocity.y = 0;
|
2343 | }
|
2344 | return currentVelocity;
|
2345 | }
|
2346 |
|
2347 |
|
2348 |
|
2349 |
|
2350 |
|
2351 |
|
2352 |
|
2353 |
|
2354 |
|
2355 |
|
2356 |
|
2357 |
|
2358 |
|
2359 | function usePanGesture(_a, ref) {
|
2360 | var onPan = _a.onPan, onPanStart = _a.onPanStart, onPanEnd = _a.onPanEnd, onPanSessionStart = _a.onPanSessionStart;
|
2361 | var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
|
2362 | var panSession = React.useRef(null);
|
2363 | var transformPagePoint = React.useContext(MotionPluginContext).transformPagePoint;
|
2364 | var handlers = {
|
2365 | onSessionStart: onPanSessionStart,
|
2366 | onStart: onPanStart,
|
2367 | onMove: onPan,
|
2368 | onEnd: function (event, info) {
|
2369 | panSession.current = null;
|
2370 | onPanEnd && onPanEnd(event, info);
|
2371 | },
|
2372 | };
|
2373 | if (panSession.current !== null) {
|
2374 | panSession.current.updateHandlers(handlers);
|
2375 | }
|
2376 | function onPointerDown(event) {
|
2377 | panSession.current = new PanSession(event, handlers, {
|
2378 | transformPagePoint: transformPagePoint,
|
2379 | });
|
2380 | }
|
2381 | usePointerEvent(ref, "pointerdown", hasPanEvents && onPointerDown);
|
2382 | useUnmountEffect(function () { return panSession.current && panSession.current.end(); });
|
2383 | }
|
2384 |
|
2385 |
|
2386 |
|
2387 |
|
2388 |
|
2389 |
|
2390 |
|
2391 |
|
2392 | var isNodeOrChild = function (parent, child) {
|
2393 | if (!child) {
|
2394 | return false;
|
2395 | }
|
2396 | else if (parent === child) {
|
2397 | return true;
|
2398 | }
|
2399 | else {
|
2400 | return isNodeOrChild(parent, child.parentElement);
|
2401 | }
|
2402 | };
|
2403 |
|
2404 | var order = ["whileHover", "whileTap", "whileDrag"];
|
2405 | var getGesturePriority = function (gesture) {
|
2406 | return order.indexOf(gesture) + 1;
|
2407 | };
|
2408 |
|
2409 | function createLock(name) {
|
2410 | var lock = null;
|
2411 | return function () {
|
2412 | var openLock = function () {
|
2413 | lock = null;
|
2414 | };
|
2415 | if (lock === null) {
|
2416 | lock = name;
|
2417 | return openLock;
|
2418 | }
|
2419 | return false;
|
2420 | };
|
2421 | }
|
2422 | var globalHorizontalLock = createLock("dragHorizontal");
|
2423 | var globalVerticalLock = createLock("dragVertical");
|
2424 | function getGlobalLock(drag) {
|
2425 | var lock = false;
|
2426 | if (drag === "y") {
|
2427 | lock = globalVerticalLock();
|
2428 | }
|
2429 | else if (drag === "x") {
|
2430 | lock = globalHorizontalLock();
|
2431 | }
|
2432 | else {
|
2433 | var openHorizontal_1 = globalHorizontalLock();
|
2434 | var openVertical_1 = globalVerticalLock();
|
2435 | if (openHorizontal_1 && openVertical_1) {
|
2436 | lock = function () {
|
2437 | openHorizontal_1();
|
2438 | openVertical_1();
|
2439 | };
|
2440 | }
|
2441 | else {
|
2442 |
|
2443 | if (openHorizontal_1)
|
2444 | openHorizontal_1();
|
2445 | if (openVertical_1)
|
2446 | openVertical_1();
|
2447 | }
|
2448 | }
|
2449 | return lock;
|
2450 | }
|
2451 |
|
2452 | var tapGesturePriority = getGesturePriority("whileTap");
|
2453 |
|
2454 |
|
2455 |
|
2456 |
|
2457 | function useTapGesture(_a, ref) {
|
2458 | var onTap = _a.onTap, onTapStart = _a.onTapStart, onTapCancel = _a.onTapCancel, whileTap = _a.whileTap, controls = _a.controls;
|
2459 | var hasTapListeners = onTap || onTapStart || onTapCancel || whileTap;
|
2460 | var isTapping = React.useRef(false);
|
2461 | var cancelPointerEventListener = React.useRef(null);
|
2462 | function removePointerUp() {
|
2463 | cancelPointerEventListener.current &&
|
2464 | cancelPointerEventListener.current();
|
2465 | cancelPointerEventListener.current = null;
|
2466 | }
|
2467 | if (whileTap && controls) {
|
2468 | controls.setOverride(whileTap, tapGesturePriority);
|
2469 | }
|
2470 |
|
2471 |
|
2472 | var onPointerUp = React.useRef(null);
|
2473 | onPointerUp.current = function (event, info) {
|
2474 | var element = ref.current;
|
2475 | removePointerUp();
|
2476 | if (!isTapping.current || !element)
|
2477 | return;
|
2478 | isTapping.current = false;
|
2479 | if (controls && whileTap) {
|
2480 | controls.clearOverride(tapGesturePriority);
|
2481 | }
|
2482 |
|
2483 |
|
2484 | var openGestureLock = getGlobalLock(true);
|
2485 | if (!openGestureLock)
|
2486 | return;
|
2487 | openGestureLock();
|
2488 | if (!isNodeOrChild(element, event.target)) {
|
2489 | onTapCancel && onTapCancel(event, info);
|
2490 | }
|
2491 | else {
|
2492 | onTap && onTap(event, info);
|
2493 | }
|
2494 | };
|
2495 | function onPointerDown(event, info) {
|
2496 | removePointerUp();
|
2497 | cancelPointerEventListener.current = addPointerEvent(window, "pointerup", function (event, info) { return onPointerUp.current(event, info); });
|
2498 | var element = ref.current;
|
2499 | if (!element || isTapping.current)
|
2500 | return;
|
2501 | isTapping.current = true;
|
2502 | onTapStart && onTapStart(event, info);
|
2503 | if (controls && whileTap) {
|
2504 | controls.startOverride(tapGesturePriority);
|
2505 | }
|
2506 | }
|
2507 | usePointerEvent(ref, "pointerdown", hasTapListeners ? onPointerDown : undefined);
|
2508 | useUnmountEffect(removePointerUp);
|
2509 | }
|
2510 |
|
2511 | var hoverPriority = getGesturePriority("whileHover");
|
2512 | var filterTouch = function (listener) { return function (event, info) {
|
2513 | if (isMouseEvent(event))
|
2514 | listener(event, info);
|
2515 | }; };
|
2516 |
|
2517 |
|
2518 |
|
2519 |
|
2520 |
|
2521 |
|
2522 | function useHoverGesture(_a, ref) {
|
2523 | var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, controls = _a.controls;
|
2524 | if (whileHover && controls) {
|
2525 | controls.setOverride(whileHover, hoverPriority);
|
2526 | }
|
2527 | usePointerEvent(ref, "pointerenter", filterTouch(function (event, info) {
|
2528 | if (onHoverStart)
|
2529 | onHoverStart(event, info);
|
2530 | if (whileHover && controls) {
|
2531 | controls.startOverride(hoverPriority);
|
2532 | }
|
2533 | }));
|
2534 | usePointerEvent(ref, "pointerleave", filterTouch(function (event, info) {
|
2535 | if (onHoverEnd)
|
2536 | onHoverEnd(event, info);
|
2537 | if (whileHover && controls) {
|
2538 | controls.clearOverride(hoverPriority);
|
2539 | }
|
2540 | }));
|
2541 | }
|
2542 |
|
2543 |
|
2544 |
|
2545 |
|
2546 |
|
2547 |
|
2548 |
|
2549 |
|
2550 | function useGestures(props, ref) {
|
2551 | usePanGesture(props, ref);
|
2552 | useTapGesture(props, ref);
|
2553 | useHoverGesture(props, ref);
|
2554 | }
|
2555 |
|
2556 | var makeRenderlessComponent = function (hook) { return function (props) {
|
2557 | hook(props);
|
2558 | return null;
|
2559 | }; };
|
2560 |
|
2561 | var gestureProps = [
|
2562 | "onPan",
|
2563 | "onPanStart",
|
2564 | "onPanEnd",
|
2565 | "onPanSessionStart",
|
2566 | "onTap",
|
2567 | "onTapStart",
|
2568 | "onTapCancel",
|
2569 | "whileTap",
|
2570 | "whileHover",
|
2571 | "onHoverStart",
|
2572 | "onHoverEnd",
|
2573 | ];
|
2574 | var Gestures = {
|
2575 | key: "gestures",
|
2576 | shouldRender: function (props) {
|
2577 | return gestureProps.some(function (key) { return props.hasOwnProperty(key); });
|
2578 | },
|
2579 | Component: makeRenderlessComponent(function (_a) {
|
2580 | var innerRef = _a.innerRef, props = tslib.__rest(_a, ["innerRef"]);
|
2581 | useGestures(props, innerRef);
|
2582 | }),
|
2583 | };
|
2584 |
|
2585 | var isRefObject = function (ref) {
|
2586 | return typeof ref === "object" && ref.hasOwnProperty("current");
|
2587 | };
|
2588 |
|
2589 | var noop = function (v) { return v; };
|
2590 |
|
2591 |
|
2592 |
|
2593 | var allowDefaultPointerDown = new Set(["INPUT", "TEXTAREA", "SELECT"]);
|
2594 | var ComponentDragControls = (function () {
|
2595 | function ComponentDragControls(_a) {
|
2596 | var ref = _a.ref, values = _a.values, controls = _a.controls;
|
2597 | |
2598 |
|
2599 |
|
2600 |
|
2601 |
|
2602 | this.isDragging = false;
|
2603 | |
2604 |
|
2605 |
|
2606 |
|
2607 |
|
2608 | this.currentDirection = null;
|
2609 | |
2610 |
|
2611 |
|
2612 |
|
2613 |
|
2614 | this.constraints = false;
|
2615 | |
2616 |
|
2617 |
|
2618 |
|
2619 |
|
2620 | this.props = {
|
2621 | transformPagePoint: noop,
|
2622 | };
|
2623 | |
2624 |
|
2625 |
|
2626 |
|
2627 |
|
2628 | this.point = {};
|
2629 | |
2630 |
|
2631 |
|
2632 |
|
2633 |
|
2634 | this.origin = {
|
2635 | x: motionValue(0),
|
2636 | y: motionValue(0),
|
2637 | };
|
2638 |
|
2639 |
|
2640 |
|
2641 | this.openGlobalLock = null;
|
2642 | |
2643 |
|
2644 |
|
2645 | this.panSession = null;
|
2646 | |
2647 |
|
2648 |
|
2649 |
|
2650 |
|
2651 | this.prevConstraintsBox = {
|
2652 | width: 0,
|
2653 | height: 0,
|
2654 | x: 0,
|
2655 | y: 0,
|
2656 | };
|
2657 | this.ref = ref;
|
2658 | this.values = values;
|
2659 | this.controls = controls;
|
2660 | }
|
2661 | |
2662 |
|
2663 |
|
2664 |
|
2665 |
|
2666 |
|
2667 |
|
2668 |
|
2669 | ComponentDragControls.prototype.start = function (originEvent, _a) {
|
2670 | var _this = this;
|
2671 | var _b = (_a === void 0 ? {} : _a).snapToCursor, snapToCursor = _b === void 0 ? false : _b;
|
2672 | snapToCursor && this.snapToCursor(originEvent);
|
2673 | var onSessionStart = function (event) {
|
2674 |
|
2675 | if (event.target &&
|
2676 | !allowDefaultPointerDown.has(event.target.tagName)) {
|
2677 |
|
2678 |
|
2679 | if (!supportsTouchEvents()) {
|
2680 | event.preventDefault();
|
2681 |
|
2682 | if (document.activeElement instanceof HTMLElement) {
|
2683 | document.activeElement.blur();
|
2684 | }
|
2685 | }
|
2686 | }
|
2687 |
|
2688 |
|
2689 |
|
2690 |
|
2691 |
|
2692 |
|
2693 | blockViewportScroll();
|
2694 |
|
2695 |
|
2696 | bothAxis(function (axis) {
|
2697 | var axisPoint = _this.point[axis];
|
2698 | axisPoint && axisPoint.stop();
|
2699 | });
|
2700 | };
|
2701 | var onStart = function (event, info) {
|
2702 |
|
2703 | if (_this.constraintsNeedResolution) {
|
2704 | var _a = _this.props, dragConstraints = _a.dragConstraints, transformPagePoint_1 = _a.transformPagePoint;
|
2705 | _this.constraints = calculateConstraintsFromDom(dragConstraints, _this.ref, _this.point, transformPagePoint_1);
|
2706 | _this.applyConstraintsToPoint();
|
2707 | }
|
2708 |
|
2709 | bothAxis(function (axis) {
|
2710 | var axisPoint = _this.point[axis];
|
2711 | if (!axisPoint)
|
2712 | return;
|
2713 | _this.origin[axis].set(axisPoint.get());
|
2714 | });
|
2715 |
|
2716 | var _b = _this.props, drag = _b.drag, dragPropagation = _b.dragPropagation;
|
2717 | if (drag && !dragPropagation) {
|
2718 | if (_this.openGlobalLock)
|
2719 | _this.openGlobalLock();
|
2720 | _this.openGlobalLock = getGlobalLock(drag);
|
2721 | if (!_this.openGlobalLock)
|
2722 | return;
|
2723 | }
|
2724 | _this.isDragging = true;
|
2725 | _this.currentDirection = null;
|
2726 | var onDragStart = _this.props.onDragStart;
|
2727 | onDragStart &&
|
2728 | onDragStart(event, convertPanToDrag(info, _this.point));
|
2729 | };
|
2730 | var onMove = function (event, info) {
|
2731 | var _a = _this.props, dragPropagation = _a.dragPropagation, dragDirectionLock = _a.dragDirectionLock;
|
2732 |
|
2733 | if (!dragPropagation && !_this.openGlobalLock)
|
2734 | return;
|
2735 | var offset = info.offset;
|
2736 |
|
2737 | if (dragDirectionLock && _this.currentDirection === null) {
|
2738 | _this.currentDirection = getCurrentDirection(offset);
|
2739 |
|
2740 | if (_this.currentDirection !== null) {
|
2741 | var onDirectionLock = _this.props.onDirectionLock;
|
2742 | onDirectionLock && onDirectionLock(_this.currentDirection);
|
2743 | }
|
2744 | return;
|
2745 | }
|
2746 | _this.updatePoint("x", offset);
|
2747 | _this.updatePoint("y", offset);
|
2748 | var onDrag = _this.props.onDrag;
|
2749 | onDrag && onDrag(event, convertPanToDrag(info, _this.point));
|
2750 | };
|
2751 | var onEnd = function (event, info) {
|
2752 | _this.stop(event, info);
|
2753 | };
|
2754 | var transformPagePoint = this.props.transformPagePoint;
|
2755 | this.panSession = new PanSession(originEvent, {
|
2756 | onSessionStart: onSessionStart,
|
2757 | onStart: onStart,
|
2758 | onMove: onMove,
|
2759 | onEnd: onEnd,
|
2760 | }, { transformPagePoint: transformPagePoint });
|
2761 | };
|
2762 | ComponentDragControls.prototype.cancelDrag = function () {
|
2763 | unblockViewportScroll();
|
2764 | this.isDragging = false;
|
2765 | this.panSession && this.panSession.end();
|
2766 | this.panSession = null;
|
2767 | if (!this.props.dragPropagation && this.openGlobalLock) {
|
2768 | this.openGlobalLock();
|
2769 | this.openGlobalLock = null;
|
2770 | }
|
2771 | };
|
2772 | ComponentDragControls.prototype.stop = function (event, info) {
|
2773 | var _a;
|
2774 | (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
|
2775 | this.panSession = null;
|
2776 | var isDragging = this.isDragging;
|
2777 | this.cancelDrag();
|
2778 | if (!isDragging)
|
2779 | return;
|
2780 | var _b = this.props, dragMomentum = _b.dragMomentum, dragElastic = _b.dragElastic, onDragEnd = _b.onDragEnd;
|
2781 | if (dragMomentum || dragElastic) {
|
2782 | var velocity = info.velocity;
|
2783 | this.animateDragEnd(velocity);
|
2784 | }
|
2785 | else {
|
2786 | this.recordBoxInfo(this.constraints);
|
2787 | }
|
2788 | onDragEnd && onDragEnd(event, convertPanToDrag(info, this.point));
|
2789 | };
|
2790 | ComponentDragControls.prototype.recordBoxInfo = function (constraints) {
|
2791 | if (constraints) {
|
2792 | var right = constraints.right, left = constraints.left, bottom = constraints.bottom, top_1 = constraints.top;
|
2793 | this.prevConstraintsBox.width = (right || 0) - (left || 0);
|
2794 | this.prevConstraintsBox.height = (bottom || 0) - (top_1 || 0);
|
2795 | }
|
2796 | if (this.point.x)
|
2797 | this.prevConstraintsBox.x = this.point.x.get();
|
2798 | if (this.point.y)
|
2799 | this.prevConstraintsBox.y = this.point.y.get();
|
2800 | };
|
2801 | ComponentDragControls.prototype.snapToCursor = function (event) {
|
2802 | var _this = this;
|
2803 | var transformPagePoint = this.props.transformPagePoint;
|
2804 | var point = extractEventInfo(event).point;
|
2805 | var boundingBox = getBoundingBox(this.ref, transformPagePoint);
|
2806 | var center = {
|
2807 | x: boundingBox.width / 2 + boundingBox.left + window.scrollX,
|
2808 | y: boundingBox.height / 2 + boundingBox.top + window.scrollY,
|
2809 | };
|
2810 | var offset = {
|
2811 | x: point.x - center.x,
|
2812 | y: point.y - center.y,
|
2813 | };
|
2814 | bothAxis(function (axis) {
|
2815 | var point = _this.point[axis];
|
2816 | if (!point)
|
2817 | return;
|
2818 | _this.origin[axis].set(point.get());
|
2819 | });
|
2820 | this.updatePoint("x", offset);
|
2821 | this.updatePoint("y", offset);
|
2822 | };
|
2823 | ComponentDragControls.prototype.setPoint = function (axis, value) {
|
2824 | this.point[axis] = value;
|
2825 | };
|
2826 | ComponentDragControls.prototype.updatePoint = function (axis, offset) {
|
2827 | var _a = this.props, drag = _a.drag, dragElastic = _a.dragElastic;
|
2828 | var axisPoint = this.point[axis];
|
2829 |
|
2830 | if (!shouldDrag(axis, drag, this.currentDirection) || !axisPoint)
|
2831 | return;
|
2832 | var current = applyConstraints(axis, this.origin[axis].get() + offset[axis], this.constraints, dragElastic);
|
2833 | axisPoint.set(current);
|
2834 | };
|
2835 | ComponentDragControls.prototype.updateProps = function (_a) {
|
2836 | var _this = this;
|
2837 | var _b = _a.drag, drag = _b === void 0 ? false : _b, _c = _a.dragDirectionLock, dragDirectionLock = _c === void 0 ? false : _c, _d = _a.dragPropagation, dragPropagation = _d === void 0 ? false : _d, _e = _a.dragConstraints, dragConstraints = _e === void 0 ? false : _e, _f = _a.dragElastic, dragElastic = _f === void 0 ? true : _f, _g = _a.dragMomentum, dragMomentum = _g === void 0 ? true : _g, remainingProps = tslib.__rest(_a, ["drag", "dragDirectionLock", "dragPropagation", "dragConstraints", "dragElastic", "dragMomentum"]);
|
2838 | this.props = tslib.__assign({ drag: drag,
|
2839 | dragDirectionLock: dragDirectionLock,
|
2840 | dragPropagation: dragPropagation,
|
2841 | dragConstraints: dragConstraints,
|
2842 | dragElastic: dragElastic,
|
2843 | dragMomentum: dragMomentum }, remainingProps);
|
2844 | var _dragValueX = remainingProps._dragValueX, _dragValueY = remainingProps._dragValueY, dragOriginX = remainingProps.dragOriginX, dragOriginY = remainingProps.dragOriginY;
|
2845 | if (dragOriginX)
|
2846 | this.origin.x = dragOriginX;
|
2847 | if (dragOriginY)
|
2848 | this.origin.y = dragOriginY;
|
2849 |
|
2850 |
|
2851 | bothAxis(function (axis) {
|
2852 | if (!shouldDrag(axis, drag, _this.currentDirection))
|
2853 | return;
|
2854 | var defaultValue = axis === "x" ? _dragValueX : _dragValueY;
|
2855 | _this.setPoint(axis, defaultValue || _this.values.get(axis, 0));
|
2856 | });
|
2857 |
|
2858 |
|
2859 | this.constraintsNeedResolution = isRefObject(dragConstraints);
|
2860 | this.constraints = this.constraintsNeedResolution
|
2861 | ? this.constraints || false
|
2862 | : dragConstraints;
|
2863 | };
|
2864 | ComponentDragControls.prototype.applyConstraintsToPoint = function (constraints) {
|
2865 | var _this = this;
|
2866 | if (constraints === void 0) { constraints = this.constraints; }
|
2867 | return bothAxis(function (axis) {
|
2868 | var axisPoint = _this.point[axis];
|
2869 | axisPoint &&
|
2870 | !axisPoint.isAnimating() &&
|
2871 | applyConstraints(axis, axisPoint, constraints, 0);
|
2872 | });
|
2873 | };
|
2874 | ComponentDragControls.prototype.animateDragEnd = function (velocity) {
|
2875 | var _this = this;
|
2876 | var _a = this.props, drag = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition, _dragValueX = _a._dragValueX, _dragValueY = _a._dragValueY, _dragTransitionControls = _a._dragTransitionControls;
|
2877 | var momentumAnimations = bothAxis(function (axis) {
|
2878 | var _a;
|
2879 | if (!shouldDrag(axis, drag, _this.currentDirection)) {
|
2880 | return;
|
2881 | }
|
2882 | var transition = _this.constraints
|
2883 | ? getConstraints(axis, _this.constraints)
|
2884 | : {};
|
2885 | |
2886 |
|
2887 |
|
2888 |
|
2889 |
|
2890 |
|
2891 | var bounceStiffness = dragElastic ? 200 : 1000000;
|
2892 | var bounceDamping = dragElastic ? 40 : 10000000;
|
2893 | var animationControls = _dragTransitionControls || _this.controls;
|
2894 | var inertia = tslib.__assign(tslib.__assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness,
|
2895 | bounceDamping: bounceDamping, timeConstant: 750, restDelta: 1 }, dragTransition), transition);
|
2896 | var externalAxisMotionValue = axis === "x" ? _dragValueX : _dragValueY;
|
2897 |
|
2898 |
|
2899 |
|
2900 | return externalAxisMotionValue
|
2901 | ? startAnimation(axis, externalAxisMotionValue, 0, inertia)
|
2902 | : animationControls.start((_a = {},
|
2903 | _a[axis] = 0,
|
2904 | _a.transition = inertia,
|
2905 | _a));
|
2906 | });
|
2907 |
|
2908 | return Promise.all(momentumAnimations).then(function () {
|
2909 | _this.recordBoxInfo(_this.constraints);
|
2910 | _this.scalePoint();
|
2911 | var onDragTransitionEnd = _this.props.onDragTransitionEnd;
|
2912 | onDragTransitionEnd && onDragTransitionEnd();
|
2913 | });
|
2914 | };
|
2915 | ComponentDragControls.prototype.scalePoint = function () {
|
2916 | var _this = this;
|
2917 | var _a = this.props, dragConstraints = _a.dragConstraints, transformPagePoint = _a.transformPagePoint;
|
2918 | if (!isRefObject(dragConstraints))
|
2919 | return;
|
2920 | var constraintsBox = getBoundingBox(dragConstraints, transformPagePoint);
|
2921 | var draggableBox = getBoundingBox(this.ref, transformPagePoint);
|
2922 |
|
2923 | var scaleAxisPoint = function (axis, dimension) {
|
2924 | var pointToScale = _this.point[axis];
|
2925 | if (!pointToScale)
|
2926 | return;
|
2927 |
|
2928 | if (pointToScale.isAnimating()) {
|
2929 | pointToScale.stop();
|
2930 | _this.recordBoxInfo();
|
2931 | return;
|
2932 | }
|
2933 |
|
2934 |
|
2935 | var scale = _this.prevConstraintsBox[dimension]
|
2936 | ? (constraintsBox[dimension] - draggableBox[dimension]) /
|
2937 | _this.prevConstraintsBox[dimension]
|
2938 | : 1;
|
2939 | pointToScale.set(_this.prevConstraintsBox[axis] * scale);
|
2940 | };
|
2941 | scaleAxisPoint("x", "width");
|
2942 | scaleAxisPoint("y", "height");
|
2943 | };
|
2944 | ComponentDragControls.prototype.mount = function (element) {
|
2945 | var _this = this;
|
2946 | var stopPointerListener = addPointerEvent(element, "pointerdown", function (event) {
|
2947 | var _a = _this.props, drag = _a.drag, _b = _a.dragListener, dragListener = _b === void 0 ? true : _b;
|
2948 | drag && dragListener && _this.start(event);
|
2949 | });
|
2950 | var stopResizeListener = addDomEvent(window, "resize", function () {
|
2951 | return _this.scalePoint();
|
2952 | });
|
2953 | if (this.constraintsNeedResolution) {
|
2954 | var _a = this.props, dragConstraints = _a.dragConstraints, transformPagePoint = _a.transformPagePoint;
|
2955 | var constraints = calculateConstraintsFromDom(dragConstraints, this.ref, this.point, transformPagePoint);
|
2956 | this.applyConstraintsToPoint(constraints);
|
2957 | this.recordBoxInfo(constraints);
|
2958 | }
|
2959 | else if (!this.isDragging && this.constraints) {
|
2960 | this.applyConstraintsToPoint();
|
2961 | }
|
2962 | return function () {
|
2963 | stopPointerListener && stopPointerListener();
|
2964 | stopResizeListener && stopResizeListener();
|
2965 | _this.cancelDrag();
|
2966 | };
|
2967 | };
|
2968 | return ComponentDragControls;
|
2969 | }());
|
2970 |
|
2971 | function bothAxis(handler) {
|
2972 | return [handler("x"), handler("y")];
|
2973 | }
|
2974 | function convertPanToDrag(info, point) {
|
2975 | return tslib.__assign(tslib.__assign({}, info), { point: {
|
2976 | x: point.x ? point.x.get() : 0,
|
2977 | y: point.y ? point.y.get() : 0,
|
2978 | } });
|
2979 | }
|
2980 | function getConstraints(axis, _a) {
|
2981 | var top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left;
|
2982 | if (axis === "x") {
|
2983 | return { min: left, max: right };
|
2984 | }
|
2985 | else {
|
2986 | return { min: top, max: bottom };
|
2987 | }
|
2988 | }
|
2989 | function shouldDrag(direction, drag, currentDirection) {
|
2990 | return ((drag === true || drag === direction) &&
|
2991 | (currentDirection === null || currentDirection === direction));
|
2992 | }
|
2993 |
|
2994 |
|
2995 |
|
2996 |
|
2997 |
|
2998 |
|
2999 |
|
3000 | function getCurrentDirection(offset, lockThreshold) {
|
3001 | if (lockThreshold === void 0) { lockThreshold = 10; }
|
3002 | var direction = null;
|
3003 | if (Math.abs(offset.y) > lockThreshold) {
|
3004 | direction = "y";
|
3005 | }
|
3006 | else if (Math.abs(offset.x) > lockThreshold) {
|
3007 | direction = "x";
|
3008 | }
|
3009 | return direction;
|
3010 | }
|
3011 |
|
3012 |
|
3013 |
|
3014 |
|
3015 |
|
3016 |
|
3017 | function calculateConstraintsFromDom(constraintsRef, draggableRef, point, transformPagePoint) {
|
3018 | heyListen.invariant(constraintsRef.current !== null && draggableRef.current !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
|
3019 | var parentBoundingBox = getBoundingBox(constraintsRef, transformPagePoint);
|
3020 | var draggableBoundingBox = getBoundingBox(draggableRef, transformPagePoint);
|
3021 | var left = parentBoundingBox.left -
|
3022 | draggableBoundingBox.left +
|
3023 | getCurrentOffset(point.x);
|
3024 | var top = parentBoundingBox.top -
|
3025 | draggableBoundingBox.top +
|
3026 | getCurrentOffset(point.y);
|
3027 | var right = parentBoundingBox.width - draggableBoundingBox.width + left;
|
3028 | var bottom = parentBoundingBox.height - draggableBoundingBox.height + top;
|
3029 | return { top: top, left: left, right: right, bottom: bottom };
|
3030 | }
|
3031 | function getBoundingBox(ref, transformPagePoint) {
|
3032 | var rect = ref.current.getBoundingClientRect();
|
3033 | var _a = transformPagePoint({
|
3034 | x: rect.left,
|
3035 | y: rect.top,
|
3036 | }), left = _a.x, top = _a.y;
|
3037 | var _b = transformPagePoint({
|
3038 | x: rect.width,
|
3039 | y: rect.height,
|
3040 | }), width = _b.x, height = _b.y;
|
3041 | return { left: left, top: top, width: width, height: height };
|
3042 | }
|
3043 | function getCurrentOffset(point) {
|
3044 | return point ? point.get() : 0;
|
3045 | }
|
3046 | function applyConstraints(axis, value, constraints, dragElastic) {
|
3047 | var constrainedValue = value instanceof MotionValue ? value.get() : value;
|
3048 | if (!constraints) {
|
3049 | return constrainedValue;
|
3050 | }
|
3051 | var _a = getConstraints(axis, constraints), min = _a.min, max = _a.max;
|
3052 | if (min !== undefined && constrainedValue < min) {
|
3053 | constrainedValue = dragElastic
|
3054 | ? applyOverdrag(min, constrainedValue, dragElastic)
|
3055 | : Math.max(min, constrainedValue);
|
3056 | }
|
3057 | else if (max !== undefined && constrainedValue > max) {
|
3058 | constrainedValue = dragElastic
|
3059 | ? applyOverdrag(max, constrainedValue, dragElastic)
|
3060 | : Math.min(max, constrainedValue);
|
3061 | }
|
3062 | if (value instanceof MotionValue) {
|
3063 | value.set(constrainedValue);
|
3064 | }
|
3065 | return constrainedValue;
|
3066 | }
|
3067 | function applyOverdrag(origin, current, dragElastic) {
|
3068 | var dragFactor = typeof dragElastic === "number" ? dragElastic : 0.35;
|
3069 | return popcorn.mix(origin, current, dragFactor);
|
3070 | }
|
3071 |
|
3072 |
|
3073 |
|
3074 |
|
3075 |
|
3076 |
|
3077 |
|
3078 |
|
3079 |
|
3080 |
|
3081 |
|
3082 | function useDrag(props, ref, values, controls) {
|
3083 | var groupDragControls = props.dragControls;
|
3084 | var transformPagePoint = React.useContext(MotionPluginContext).transformPagePoint;
|
3085 | var dragControls = useConstant(function () { return new ComponentDragControls({ ref: ref, values: values, controls: controls }); });
|
3086 | dragControls.updateProps(tslib.__assign(tslib.__assign({}, props), { transformPagePoint: transformPagePoint }));
|
3087 | React.useEffect(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls]);
|
3088 | React.useEffect(function () { return dragControls.mount(ref.current); }, []);
|
3089 | }
|
3090 |
|
3091 | var Drag = {
|
3092 | key: "drag",
|
3093 | shouldRender: function (props) { return !!props.drag; },
|
3094 | Component: makeRenderlessComponent(function (_a) {
|
3095 | var innerRef = _a.innerRef, values = _a.values, controls = _a.controls, props = tslib.__rest(_a, ["innerRef", "values", "controls"]);
|
3096 | return useDrag(props, innerRef, values, controls);
|
3097 | }),
|
3098 | };
|
3099 |
|
3100 | function isCSSVariable(value) {
|
3101 | return typeof value === "string" && value.startsWith("var(--");
|
3102 | }
|
3103 |
|
3104 |
|
3105 |
|
3106 |
|
3107 |
|
3108 |
|
3109 |
|
3110 |
|
3111 |
|
3112 | var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
|
3113 | function parseCSSVariable(current) {
|
3114 | var match = cssVariableRegex.exec(current);
|
3115 | if (!match)
|
3116 | return [,];
|
3117 | var token = match[1], fallback = match[2];
|
3118 | return [token, fallback];
|
3119 | }
|
3120 | var maxDepth = 4;
|
3121 | function getVariableValue(current, element, depth) {
|
3122 | if (depth === void 0) { depth = 1; }
|
3123 | heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
|
3124 | var _a = parseCSSVariable(current), token = _a[0], fallback = _a[1];
|
3125 |
|
3126 | if (!token)
|
3127 | return;
|
3128 |
|
3129 | var resolved = window.getComputedStyle(element).getPropertyValue(token);
|
3130 | if (resolved) {
|
3131 | return resolved;
|
3132 | }
|
3133 | else if (isCSSVariable(fallback)) {
|
3134 |
|
3135 | return getVariableValue(fallback, element, depth + 1);
|
3136 | }
|
3137 | else {
|
3138 | return fallback;
|
3139 | }
|
3140 | }
|
3141 |
|
3142 |
|
3143 |
|
3144 |
|
3145 |
|
3146 | function resolveCSSVariables(values, ref, _a, transitionEnd) {
|
3147 | var target = tslib.__rest(_a, []);
|
3148 | var element = ref.current;
|
3149 | if (!(element instanceof HTMLElement))
|
3150 | return { target: target, transitionEnd: transitionEnd };
|
3151 |
|
3152 |
|
3153 | if (transitionEnd) {
|
3154 | transitionEnd = tslib.__assign({}, transitionEnd);
|
3155 | }
|
3156 |
|
3157 | values.forEach(function (value) {
|
3158 | var current = value.get();
|
3159 | if (!isCSSVariable(current))
|
3160 | return;
|
3161 | var resolved = getVariableValue(current, element);
|
3162 | if (resolved)
|
3163 | value.set(resolved);
|
3164 | });
|
3165 |
|
3166 |
|
3167 | for (var key in target) {
|
3168 | var current = target[key];
|
3169 | if (!isCSSVariable(current))
|
3170 | continue;
|
3171 | var resolved = getVariableValue(current, element);
|
3172 | if (!resolved)
|
3173 | continue;
|
3174 |
|
3175 | target[key] = resolved;
|
3176 |
|
3177 |
|
3178 |
|
3179 | if (transitionEnd && transitionEnd[key] === undefined) {
|
3180 | transitionEnd[key] = current;
|
3181 | }
|
3182 | }
|
3183 | return { target: target, transitionEnd: transitionEnd };
|
3184 | }
|
3185 |
|
3186 | var positionalKeys = new Set([
|
3187 | "width",
|
3188 | "height",
|
3189 | "top",
|
3190 | "left",
|
3191 | "right",
|
3192 | "bottom",
|
3193 | "x",
|
3194 | "y",
|
3195 | ]);
|
3196 | var isPositionalKey = function (key) { return positionalKeys.has(key); };
|
3197 | var hasPositionalKey = function (target) {
|
3198 | return Object.keys(target).some(isPositionalKey);
|
3199 | };
|
3200 | var setAndResetVelocity = function (value, to) {
|
3201 |
|
3202 |
|
3203 | value.set(to, false);
|
3204 | value.set(to);
|
3205 | };
|
3206 | var isNumOrPxType = function (v) {
|
3207 | return v === styleValueTypes.number || v === styleValueTypes.px;
|
3208 | };
|
3209 | var BoundingBoxDimension;
|
3210 | (function (BoundingBoxDimension) {
|
3211 | BoundingBoxDimension["width"] = "width";
|
3212 | BoundingBoxDimension["height"] = "height";
|
3213 | BoundingBoxDimension["left"] = "left";
|
3214 | BoundingBoxDimension["right"] = "right";
|
3215 | BoundingBoxDimension["top"] = "top";
|
3216 | BoundingBoxDimension["bottom"] = "bottom";
|
3217 | })(BoundingBoxDimension || (BoundingBoxDimension = {}));
|
3218 | var getPosFromMatrix = function (matrix, pos) {
|
3219 | return parseFloat(matrix.split(", ")[pos]);
|
3220 | };
|
3221 | var getTranslateFromMatrix = function (pos2, pos3) { return function (_bbox, _a) {
|
3222 | var transform = _a.transform;
|
3223 | if (transform === "none" || !transform)
|
3224 | return 0;
|
3225 | var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
|
3226 | if (matrix3d) {
|
3227 | return getPosFromMatrix(matrix3d[1], pos3);
|
3228 | }
|
3229 | else {
|
3230 | var matrix = transform.match(/^matrix\((.+)\)$/);
|
3231 | return getPosFromMatrix(matrix[1], pos2);
|
3232 | }
|
3233 | }; };
|
3234 | var transformKeys = new Set(["x", "y", "z"]);
|
3235 | var nonTranslationalTransformKeys = styler.transformProps.filter(function (key) { return !transformKeys.has(key); });
|
3236 | function removeNonTranslationalTransform(values, elementStyler) {
|
3237 | var removedTransforms = [];
|
3238 | nonTranslationalTransformKeys.forEach(function (key) {
|
3239 | var value = values.get(key);
|
3240 | if (value !== undefined) {
|
3241 | removedTransforms.push([key, value.get()]);
|
3242 | value.set(key.startsWith("scale") ? 1 : 0);
|
3243 | }
|
3244 | });
|
3245 |
|
3246 | if (removedTransforms.length)
|
3247 | elementStyler.render();
|
3248 | return removedTransforms;
|
3249 | }
|
3250 | var positionalValues = {
|
3251 |
|
3252 | width: function (_a) {
|
3253 | var width = _a.width;
|
3254 | return width;
|
3255 | },
|
3256 | height: function (_a) {
|
3257 | var height = _a.height;
|
3258 | return height;
|
3259 | },
|
3260 | top: function (_bbox, _a) {
|
3261 | var top = _a.top;
|
3262 | return parseFloat(top);
|
3263 | },
|
3264 | left: function (_bbox, _a) {
|
3265 | var left = _a.left;
|
3266 | return parseFloat(left);
|
3267 | },
|
3268 | bottom: function (_a, _b) {
|
3269 | var height = _a.height;
|
3270 | var top = _b.top;
|
3271 | return parseFloat(top) + height;
|
3272 | },
|
3273 | right: function (_a, _b) {
|
3274 | var width = _a.width;
|
3275 | var left = _b.left;
|
3276 | return parseFloat(left) + width;
|
3277 | },
|
3278 |
|
3279 | x: getTranslateFromMatrix(4, 13),
|
3280 | y: getTranslateFromMatrix(5, 14),
|
3281 | };
|
3282 | var convertChangedValueTypes = function (target, values, element, elementStyler, changedKeys) {
|
3283 | var originBbox = element.getBoundingClientRect();
|
3284 | var elementComputedStyle = getComputedStyle(element);
|
3285 | var display = elementComputedStyle.display, top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform;
|
3286 | var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform };
|
3287 |
|
3288 |
|
3289 | if (display === "none") {
|
3290 | elementStyler.set("display", target.display || "block");
|
3291 | }
|
3292 |
|
3293 | elementStyler.render();
|
3294 | var targetBbox = element.getBoundingClientRect();
|
3295 | changedKeys.forEach(function (key) {
|
3296 |
|
3297 |
|
3298 | var value = values.get(key);
|
3299 | setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
|
3300 | target[key] = positionalValues[key](targetBbox, elementComputedStyle);
|
3301 | });
|
3302 | return target;
|
3303 | };
|
3304 | var checkAndConvertChangedValueTypes = function (values, ref, target, transitionEnd) {
|
3305 | if (transitionEnd === void 0) { transitionEnd = {}; }
|
3306 | target = tslib.__assign({}, target);
|
3307 | transitionEnd = tslib.__assign({}, transitionEnd);
|
3308 | var element = ref.current;
|
3309 | var elementStyler = styler__default(element);
|
3310 | var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
|
3311 |
|
3312 |
|
3313 | var removedTransformValues = [];
|
3314 | var hasAttemptedToRemoveTransformValues = false;
|
3315 | var changedValueTypeKeys = targetPositionalKeys.reduce(function (acc, key) {
|
3316 | var value = values.get(key);
|
3317 | if (!value)
|
3318 | return acc;
|
3319 | var from = value.get();
|
3320 | var to = target[key];
|
3321 | var fromType = getDimensionValueType(from);
|
3322 | var toType;
|
3323 |
|
3324 |
|
3325 |
|
3326 |
|
3327 | if (isKeyframesTarget(to)) {
|
3328 | var numKeyframes = to.length;
|
3329 | for (var i = to[0] === null ? 1 : 0; i < numKeyframes; i++) {
|
3330 | if (!toType) {
|
3331 | toType = getDimensionValueType(to[i]);
|
3332 | heyListen.invariant(toType === fromType ||
|
3333 | (isNumOrPxType(fromType) &&
|
3334 | isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
|
3335 | }
|
3336 | else {
|
3337 | heyListen.invariant(getDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
|
3338 | }
|
3339 | }
|
3340 | }
|
3341 | else {
|
3342 | toType = getDimensionValueType(to);
|
3343 | }
|
3344 | if (fromType !== toType) {
|
3345 |
|
3346 |
|
3347 | if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
|
3348 | var current = value.get();
|
3349 | if (typeof current === "string") {
|
3350 | value.set(parseFloat(current));
|
3351 | }
|
3352 | if (typeof to === "string") {
|
3353 | target[key] = parseFloat(to);
|
3354 | }
|
3355 | else if (Array.isArray(to) && toType === styleValueTypes.px) {
|
3356 | target[key] = to.map(parseFloat);
|
3357 | }
|
3358 | }
|
3359 | else {
|
3360 |
|
3361 |
|
3362 | if (!hasAttemptedToRemoveTransformValues) {
|
3363 | removedTransformValues = removeNonTranslationalTransform(values, elementStyler);
|
3364 | hasAttemptedToRemoveTransformValues = true;
|
3365 | }
|
3366 | acc.push(key);
|
3367 | transitionEnd[key] =
|
3368 | transitionEnd[key] !== undefined
|
3369 | ? transitionEnd[key]
|
3370 | : target[key];
|
3371 | setAndResetVelocity(value, to);
|
3372 | }
|
3373 | }
|
3374 | return acc;
|
3375 | }, []);
|
3376 | if (changedValueTypeKeys.length) {
|
3377 | var convertedTarget = convertChangedValueTypes(target, values, element, elementStyler, changedValueTypeKeys);
|
3378 |
|
3379 | if (removedTransformValues.length) {
|
3380 | removedTransformValues.forEach(function (_a) {
|
3381 | var key = _a[0], value = _a[1];
|
3382 | values.get(key).set(value);
|
3383 | });
|
3384 | }
|
3385 |
|
3386 | elementStyler.render();
|
3387 | return { target: convertedTarget, transitionEnd: transitionEnd };
|
3388 | }
|
3389 | else {
|
3390 | return { target: target, transitionEnd: transitionEnd };
|
3391 | }
|
3392 | };
|
3393 |
|
3394 |
|
3395 |
|
3396 |
|
3397 |
|
3398 |
|
3399 |
|
3400 |
|
3401 |
|
3402 |
|
3403 |
|
3404 | function unitConversion(values, ref, target, transitionEnd) {
|
3405 | return hasPositionalKey(target)
|
3406 | ? checkAndConvertChangedValueTypes(values, ref, target, transitionEnd)
|
3407 | : { target: target, transitionEnd: transitionEnd };
|
3408 | }
|
3409 |
|
3410 | var parseDomVariant = function (values, ref) {
|
3411 | return function (target, transitionEnd) {
|
3412 | var resolved = resolveCSSVariables(values, ref, target, transitionEnd);
|
3413 | target = resolved.target;
|
3414 | transitionEnd = resolved.transitionEnd;
|
3415 | return unitConversion(values, ref, target, transitionEnd);
|
3416 | };
|
3417 | };
|
3418 |
|
3419 | function useForceUpdate() {
|
3420 | var _a = React.useState(0), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
|
3421 | return React.useCallback(function () { return setForcedRenderCount(forcedRenderCount + 1); }, [
|
3422 | forcedRenderCount,
|
3423 | ]);
|
3424 | }
|
3425 |
|
3426 | var SyncLayoutContext = React.createContext(null);
|
3427 |
|
3428 |
|
3429 |
|
3430 |
|
3431 |
|
3432 |
|
3433 |
|
3434 |
|
3435 |
|
3436 |
|
3437 |
|
3438 |
|
3439 |
|
3440 |
|
3441 |
|
3442 |
|
3443 |
|
3444 |
|
3445 |
|
3446 |
|
3447 |
|
3448 |
|
3449 |
|
3450 |
|
3451 |
|
3452 |
|
3453 |
|
3454 |
|
3455 |
|
3456 |
|
3457 |
|
3458 | var UnstableSyncLayout = function (_a) {
|
3459 | var children = _a.children;
|
3460 | var forceUpdate = useForceUpdate();
|
3461 | return (React.createElement(SyncLayoutContext.Provider, { value: forceUpdate }, children));
|
3462 | };
|
3463 |
|
3464 | var _a;
|
3465 | var StepName;
|
3466 | (function (StepName) {
|
3467 | StepName["Prepare"] = "prepare";
|
3468 | StepName["Read"] = "read";
|
3469 | StepName["Render"] = "render";
|
3470 | })(StepName || (StepName = {}));
|
3471 | var stepOrder = [StepName.Prepare, StepName.Read, StepName.Render];
|
3472 | var jobs = stepOrder.reduce(function (acc, key) {
|
3473 | acc[key] = [];
|
3474 | return acc;
|
3475 | }, {});
|
3476 | var jobsNeedProcessing = false;
|
3477 | function flushCallbackList(list) {
|
3478 | var numJobs = list.length;
|
3479 | for (var i = 0; i < numJobs; i++) {
|
3480 | list[i]();
|
3481 | }
|
3482 | list.length = 0;
|
3483 | }
|
3484 | function flushAllJobs() {
|
3485 | if (!jobsNeedProcessing)
|
3486 | return;
|
3487 | flushCallbackList(jobs.prepare);
|
3488 | flushCallbackList(jobs.read);
|
3489 | flushCallbackList(jobs.render);
|
3490 | jobsNeedProcessing = false;
|
3491 | }
|
3492 |
|
3493 |
|
3494 |
|
3495 |
|
3496 | var createUseSyncEffect = function (stepName) { return function (callback) {
|
3497 | if (!callback)
|
3498 | return;
|
3499 | jobsNeedProcessing = true;
|
3500 | jobs[stepName].push(callback);
|
3501 | }; };
|
3502 | var layoutSync = (_a = {},
|
3503 | _a[StepName.Prepare] = createUseSyncEffect(StepName.Prepare),
|
3504 | _a[StepName.Read] = createUseSyncEffect(StepName.Read),
|
3505 | _a[StepName.Render] = createUseSyncEffect(StepName.Render),
|
3506 | _a.flush = flushAllJobs,
|
3507 | _a);
|
3508 |
|
3509 | function isHTMLElement(element) {
|
3510 | return element instanceof HTMLElement;
|
3511 | }
|
3512 |
|
3513 | var defaultLayoutTransition = {
|
3514 | duration: 0.8,
|
3515 | ease: [0.45, 0.05, 0.19, 1.0],
|
3516 | };
|
3517 | var defaultPositionTransition = underDampedSpring();
|
3518 | function getDefaultLayoutTransition(isPositionOnly) {
|
3519 | return isPositionOnly ? defaultPositionTransition : defaultLayoutTransition;
|
3520 | }
|
3521 | function isResolver(transition) {
|
3522 | return typeof transition === "function";
|
3523 | }
|
3524 | var axisLabels = {
|
3525 | x: {
|
3526 | id: "x",
|
3527 | size: "width",
|
3528 | min: "left",
|
3529 | max: "right",
|
3530 | origin: "originX",
|
3531 | },
|
3532 | y: {
|
3533 | id: "y",
|
3534 | size: "height",
|
3535 | min: "top",
|
3536 | max: "bottom",
|
3537 | origin: "originY",
|
3538 | },
|
3539 | };
|
3540 | function centerOf(min, max) {
|
3541 | return (min + max) / 2;
|
3542 | }
|
3543 | function calcAxisDelta(prev, next, names) {
|
3544 | var _a;
|
3545 | var sizeDelta = prev[names.size] - next[names.size];
|
3546 | var origin = 0.5;
|
3547 |
|
3548 |
|
3549 |
|
3550 | if (sizeDelta) {
|
3551 | if (prev[names.min] === next[names.min]) {
|
3552 | origin = 0;
|
3553 | }
|
3554 | else if (prev[names.max] === next[names.max]) {
|
3555 | origin = 1;
|
3556 | }
|
3557 | }
|
3558 | var delta = (_a = {},
|
3559 | _a[names.size] = sizeDelta,
|
3560 | _a[names.origin] = origin,
|
3561 | _a[names.id] =
|
3562 |
|
3563 | origin === 0.5
|
3564 | ? centerOf(prev[names.min], prev[names.max]) -
|
3565 | centerOf(next[names.min], next[names.max])
|
3566 | : 0,
|
3567 | _a);
|
3568 | return delta;
|
3569 | }
|
3570 | function calcDelta(prev, next) {
|
3571 | var delta = tslib.__assign(tslib.__assign({}, calcAxisDelta(prev, next, axisLabels.x)), calcAxisDelta(prev, next, axisLabels.y));
|
3572 | return delta;
|
3573 | }
|
3574 | var offset = {
|
3575 | getLayout: function (_a) {
|
3576 | var offset = _a.offset;
|
3577 | return offset;
|
3578 | },
|
3579 | measure: function (element) {
|
3580 | var offsetLeft = element.offsetLeft, offsetTop = element.offsetTop, offsetWidth = element.offsetWidth, offsetHeight = element.offsetHeight;
|
3581 | return {
|
3582 | left: offsetLeft,
|
3583 | top: offsetTop,
|
3584 | right: offsetLeft + offsetWidth,
|
3585 | bottom: offsetTop + offsetHeight,
|
3586 | width: offsetWidth,
|
3587 | height: offsetHeight,
|
3588 | };
|
3589 | },
|
3590 | };
|
3591 | var boundingBox = {
|
3592 | getLayout: function (_a) {
|
3593 | var boundingBox = _a.boundingBox;
|
3594 | return boundingBox;
|
3595 | },
|
3596 | measure: function (element) {
|
3597 | var _a = element.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height, right = _a.right, bottom = _a.bottom;
|
3598 | return { left: left, top: top, width: width, height: height, right: right, bottom: bottom };
|
3599 | },
|
3600 | };
|
3601 | function readPositionStyle(element) {
|
3602 | return window.getComputedStyle(element).position;
|
3603 | }
|
3604 | function getLayoutType(prev, next, isPositionOnly) {
|
3605 | return isPositionOnly && prev === next ? offset : boundingBox;
|
3606 | }
|
3607 | function isSizeKey(key) {
|
3608 | return key === "width" || key === "height";
|
3609 | }
|
3610 | function getTransition(_a) {
|
3611 | var layoutTransition = _a.layoutTransition, positionTransition = _a.positionTransition;
|
3612 | return layoutTransition || positionTransition;
|
3613 | }
|
3614 | var LayoutAnimation = (function (_super) {
|
3615 | tslib.__extends(LayoutAnimation, _super);
|
3616 | function LayoutAnimation() {
|
3617 | return _super !== null && _super.apply(this, arguments) || this;
|
3618 | }
|
3619 |
|
3620 |
|
3621 | LayoutAnimation.prototype.getSnapshotBeforeUpdate = function () {
|
3622 | var _a = this.props, innerRef = _a.innerRef, positionTransition = _a.positionTransition, values = _a.values, controls = _a.controls;
|
3623 | var element = innerRef.current;
|
3624 | if (!isHTMLElement(element))
|
3625 | return;
|
3626 | var layoutTransition = getTransition(this.props);
|
3627 | var isPositionOnly = !!positionTransition;
|
3628 | var positionStyle = readPositionStyle(element);
|
3629 | var prev = {
|
3630 | offset: offset.measure(element),
|
3631 | boundingBox: boundingBox.measure(element),
|
3632 | };
|
3633 | var transform;
|
3634 | var next;
|
3635 | var compare;
|
3636 |
|
3637 |
|
3638 |
|
3639 | layoutSync.prepare(function () {
|
3640 |
|
3641 |
|
3642 | transform = element.style.transform;
|
3643 | element.style.transform = "";
|
3644 | });
|
3645 | layoutSync.read(function () {
|
3646 |
|
3647 | next = {
|
3648 | offset: offset.measure(element),
|
3649 | boundingBox: boundingBox.measure(element),
|
3650 | };
|
3651 | var nextPosition = readPositionStyle(element);
|
3652 | compare = getLayoutType(positionStyle, nextPosition, isPositionOnly);
|
3653 | });
|
3654 | layoutSync.render(function () {
|
3655 |
|
3656 |
|
3657 | var prevLayout = compare.getLayout(prev);
|
3658 | var nextLayout = compare.getLayout(next);
|
3659 | var delta = calcDelta(prevLayout, nextLayout);
|
3660 | var hasAnyChanged = delta.x || delta.y || delta.width || delta.height;
|
3661 | if (!hasAnyChanged) {
|
3662 |
|
3663 | transform && (element.style.transform = transform);
|
3664 | return;
|
3665 | }
|
3666 | styler__default(element).set({
|
3667 | originX: delta.originX,
|
3668 | originY: delta.originY,
|
3669 | });
|
3670 | syncRenderSession.open();
|
3671 | var target = {};
|
3672 | var transition = {};
|
3673 | var transitionDefinition = isResolver(layoutTransition)
|
3674 | ? layoutTransition({ delta: delta })
|
3675 | : layoutTransition;
|
3676 | function makeTransition(layoutKey, transformKey, targetValue, visualOrigin) {
|
3677 |
|
3678 | var deltaKey = isSizeKey(layoutKey) ? layoutKey : transformKey;
|
3679 | if (!delta[deltaKey])
|
3680 | return;
|
3681 | var baseTransition = typeof transitionDefinition === "boolean"
|
3682 | ? tslib.__assign({}, getDefaultLayoutTransition(isPositionOnly)) : transitionDefinition;
|
3683 | var value = values.get(transformKey, targetValue);
|
3684 | var velocity = value.getVelocity();
|
3685 | transition[transformKey] = baseTransition[transformKey]
|
3686 | ? tslib.__assign({}, baseTransition[transformKey]) : tslib.__assign({}, baseTransition);
|
3687 | if (transition[transformKey].velocity === undefined) {
|
3688 | transition[transformKey].velocity = velocity || 0;
|
3689 | }
|
3690 |
|
3691 |
|
3692 | target[transformKey] = targetValue;
|
3693 | var offsetToApply = !isSizeKey(layoutKey) && compare === offset
|
3694 | ? value.get()
|
3695 | : 0;
|
3696 | value.set(visualOrigin + offsetToApply);
|
3697 | }
|
3698 | makeTransition("left", "x", 0, delta.x);
|
3699 | makeTransition("top", "y", 0, delta.y);
|
3700 | if (!isPositionOnly) {
|
3701 | makeTransition("width", "scaleX", 1, prev.boundingBox.width / next.boundingBox.width);
|
3702 | makeTransition("height", "scaleY", 1, prev.boundingBox.height / next.boundingBox.height);
|
3703 | }
|
3704 | target.transition = transition;
|
3705 |
|
3706 |
|
3707 | transitionDefinition && controls.start(target);
|
3708 |
|
3709 | syncRenderSession.flush();
|
3710 | });
|
3711 | return null;
|
3712 | };
|
3713 | LayoutAnimation.prototype.componentDidUpdate = function () {
|
3714 | layoutSync.flush();
|
3715 | };
|
3716 | LayoutAnimation.prototype.render = function () {
|
3717 | return null;
|
3718 | };
|
3719 | LayoutAnimation.contextType = SyncLayoutContext;
|
3720 | return LayoutAnimation;
|
3721 | }(React.Component));
|
3722 | var Layout = {
|
3723 | key: "layout",
|
3724 | shouldRender: function (_a) {
|
3725 | var positionTransition = _a.positionTransition, layoutTransition = _a.layoutTransition;
|
3726 | heyListen.invariant(!(positionTransition && layoutTransition), "Don't set both positionTransition and layoutTransition on the same component");
|
3727 | return (typeof window !== "undefined" &&
|
3728 | !!(positionTransition || layoutTransition));
|
3729 | },
|
3730 | Component: LayoutAnimation,
|
3731 | };
|
3732 |
|
3733 |
|
3734 |
|
3735 |
|
3736 |
|
3737 |
|
3738 |
|
3739 | var validMotionProps = new Set([
|
3740 | "initial",
|
3741 | "animate",
|
3742 | "exit",
|
3743 | "style",
|
3744 | "variants",
|
3745 | "transition",
|
3746 | "transformTemplate",
|
3747 | "transformValues",
|
3748 | "custom",
|
3749 | "inherit",
|
3750 | "static",
|
3751 | "positionTransition",
|
3752 | "layoutTransition",
|
3753 | "onAnimationStart",
|
3754 | "onAnimationComplete",
|
3755 | "onUpdate",
|
3756 | "onDragStart",
|
3757 | "onDrag",
|
3758 | "onDragEnd",
|
3759 | "onDirectionLock",
|
3760 | "onDragTransitionEnd",
|
3761 | "drag",
|
3762 | "dragControls",
|
3763 | "dragListener",
|
3764 | "dragConstraints",
|
3765 | "dragDirectionLock",
|
3766 | "dragElastic",
|
3767 | "dragMomentum",
|
3768 | "dragPropagation",
|
3769 | "dragTransition",
|
3770 | "_dragValueX",
|
3771 | "_dragValueY",
|
3772 | "_dragTransitionControls",
|
3773 | "dragOriginX",
|
3774 | "dragOriginY",
|
3775 | "onPan",
|
3776 | "onPanStart",
|
3777 | "onPanEnd",
|
3778 | "onPanSessionStart",
|
3779 | "onTap",
|
3780 | "onTapStart",
|
3781 | "onTapCancel",
|
3782 | "whileHover",
|
3783 | "whileTap",
|
3784 | "onHoverEnd",
|
3785 | "onHoverStart",
|
3786 | ]);
|
3787 |
|
3788 |
|
3789 |
|
3790 |
|
3791 |
|
3792 |
|
3793 |
|
3794 |
|
3795 | function isValidMotionProp(key) {
|
3796 | return validMotionProps.has(key);
|
3797 | }
|
3798 |
|
3799 | var AnimatePropType;
|
3800 | (function (AnimatePropType) {
|
3801 | AnimatePropType["Target"] = "Target";
|
3802 | AnimatePropType["VariantLabel"] = "VariantLabel";
|
3803 | AnimatePropType["AnimationSubscription"] = "AnimationSubscription";
|
3804 | })(AnimatePropType || (AnimatePropType = {}));
|
3805 |
|
3806 | function shallowCompare(next, prev) {
|
3807 | if (prev === null)
|
3808 | return false;
|
3809 | var prevLength = prev.length;
|
3810 | if (prevLength !== next.length)
|
3811 | return false;
|
3812 | for (var i = 0; i < prevLength; i++) {
|
3813 | if (prev[i] !== next[i])
|
3814 | return false;
|
3815 | }
|
3816 | return true;
|
3817 | }
|
3818 |
|
3819 | var hasUpdated = function (prev, next) {
|
3820 | return (next !== undefined &&
|
3821 | (Array.isArray(prev) && Array.isArray(next)
|
3822 | ? !shallowCompare(next, prev)
|
3823 | : prev !== next));
|
3824 | };
|
3825 | function targetWithoutTransition(_a, mergeTransitionEnd) {
|
3826 | if (mergeTransitionEnd === void 0) { mergeTransitionEnd = false; }
|
3827 | var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
|
3828 | return mergeTransitionEnd
|
3829 | ? tslib.__assign(tslib.__assign({}, target), transitionEnd)
|
3830 | : target;
|
3831 | }
|
3832 |
|
3833 |
|
3834 |
|
3835 |
|
3836 |
|
3837 |
|
3838 |
|
3839 |
|
3840 |
|
3841 |
|
3842 |
|
3843 |
|
3844 |
|
3845 |
|
3846 |
|
3847 |
|
3848 |
|
3849 |
|
3850 |
|
3851 |
|
3852 |
|
3853 | function useAnimateProp(targetAndTransition, controls, values, defaultTransition) {
|
3854 | var isInitialRender = React.useRef(true);
|
3855 | var prevValues = React.useRef(null);
|
3856 | if (!prevValues.current) {
|
3857 | prevValues.current = targetWithoutTransition(targetAndTransition, true);
|
3858 | }
|
3859 | React.useEffect(function () {
|
3860 | var targetToAnimate = {};
|
3861 |
|
3862 | var animatingTarget = targetWithoutTransition(targetAndTransition);
|
3863 |
|
3864 | var finalTarget = targetWithoutTransition(targetAndTransition, true);
|
3865 |
|
3866 | for (var key in animatingTarget) {
|
3867 |
|
3868 |
|
3869 | var shouldAnimateOnMount = isInitialRender.current &&
|
3870 | (!values.has(key) ||
|
3871 | values.get(key).get() !== finalTarget[key]);
|
3872 |
|
3873 |
|
3874 | var isValidValue = finalTarget[key] !== null;
|
3875 | var valueHasUpdated = hasUpdated(prevValues.current[key], finalTarget[key]);
|
3876 | if (isValidValue && (valueHasUpdated || shouldAnimateOnMount)) {
|
3877 | targetToAnimate[key] = animatingTarget[key];
|
3878 | }
|
3879 | }
|
3880 | isInitialRender.current = false;
|
3881 | prevValues.current = tslib.__assign(tslib.__assign({}, prevValues.current), finalTarget);
|
3882 | if (Object.keys(targetToAnimate).length) {
|
3883 | controls.start(tslib.__assign(tslib.__assign({}, targetToAnimate), { transition: targetAndTransition.transition || defaultTransition, transitionEnd: targetAndTransition.transitionEnd }));
|
3884 | }
|
3885 | }, [targetAndTransition]);
|
3886 | }
|
3887 |
|
3888 | var labelsToArray = function (label) {
|
3889 | if (!label) {
|
3890 | return [];
|
3891 | }
|
3892 | if (Array.isArray(label)) {
|
3893 | return label;
|
3894 | }
|
3895 | return [label];
|
3896 | };
|
3897 | var resolveVariantLabels = function (variant) {
|
3898 | var unresolvedVariant = variant instanceof MotionValue ? variant.get() : variant;
|
3899 | return Array.from(new Set(labelsToArray(unresolvedVariant)));
|
3900 | };
|
3901 |
|
3902 |
|
3903 |
|
3904 |
|
3905 |
|
3906 | var asDependencyList = function (list) { return [
|
3907 | list.join(","),
|
3908 | ]; };
|
3909 |
|
3910 | var hasVariantChanged = function (oldVariant, newVariant) {
|
3911 | return oldVariant.join(",") !== newVariant.join(",");
|
3912 | };
|
3913 |
|
3914 |
|
3915 |
|
3916 |
|
3917 |
|
3918 |
|
3919 |
|
3920 |
|
3921 |
|
3922 |
|
3923 | function useVariants(initial, animate, inherit, controls) {
|
3924 | var targetVariants = resolveVariantLabels(animate);
|
3925 | var context = React.useContext(MotionContext);
|
3926 | var parentAlreadyMounted = context.hasMounted && context.hasMounted.current;
|
3927 | var hasMounted = React.useRef(false);
|
3928 | React.useEffect(function () {
|
3929 | var shouldAnimate = false;
|
3930 | if (inherit) {
|
3931 |
|
3932 |
|
3933 |
|
3934 | shouldAnimate = !!parentAlreadyMounted;
|
3935 | targetVariants = resolveVariantLabels(context.animate);
|
3936 | }
|
3937 | else {
|
3938 | shouldAnimate =
|
3939 | hasMounted.current ||
|
3940 | hasVariantChanged(resolveVariantLabels(initial), targetVariants);
|
3941 | }
|
3942 | shouldAnimate && controls.start(targetVariants);
|
3943 | hasMounted.current = true;
|
3944 | }, asDependencyList(targetVariants));
|
3945 | }
|
3946 |
|
3947 |
|
3948 |
|
3949 |
|
3950 |
|
3951 |
|
3952 |
|
3953 |
|
3954 |
|
3955 |
|
3956 | function useAnimationGroupSubscription(animation, controls) {
|
3957 | var unsubscribe = React.useMemo(function () { return animation.subscribe(controls); }, [
|
3958 | animation,
|
3959 | ]);
|
3960 | React.useEffect(function () { return function () {
|
3961 | unsubscribe && unsubscribe();
|
3962 | }; }, [unsubscribe]);
|
3963 | }
|
3964 |
|
3965 | var _a$1, _b;
|
3966 | var AnimatePropComponents = (_a$1 = {},
|
3967 | _a$1[AnimatePropType.Target] = makeRenderlessComponent(function (_a) {
|
3968 | var animate = _a.animate, controls = _a.controls, values = _a.values, transition = _a.transition;
|
3969 | return useAnimateProp(animate, controls, values, transition);
|
3970 | }),
|
3971 | _a$1[AnimatePropType.VariantLabel] = makeRenderlessComponent(function (_a) {
|
3972 | var animate = _a.animate, _b = _a.inherit, inherit = _b === void 0 ? true : _b, controls = _a.controls, initial = _a.initial;
|
3973 | return useVariants(initial, animate, inherit, controls);
|
3974 | }),
|
3975 | _a$1[AnimatePropType.AnimationSubscription] = makeRenderlessComponent(function (_a) {
|
3976 | var animate = _a.animate, controls = _a.controls;
|
3977 | return useAnimationGroupSubscription(animate, controls);
|
3978 | }),
|
3979 | _a$1);
|
3980 | var isVariantLabel$1 = function (prop) {
|
3981 | return Array.isArray(prop) || typeof prop === "string";
|
3982 | };
|
3983 | var isAnimationSubscription = function (_a) {
|
3984 | var animate = _a.animate;
|
3985 | return animate instanceof AnimationControls;
|
3986 | };
|
3987 | var animationProps = ["initial", "animate", "whileTap", "whileHover"];
|
3988 | var animatePropTypeTests = (_b = {},
|
3989 | _b[AnimatePropType.Target] = function (props) {
|
3990 | return (props.animate !== undefined &&
|
3991 | !isVariantLabel$1(props.animate) &&
|
3992 | !isAnimationSubscription(props));
|
3993 | },
|
3994 | _b[AnimatePropType.VariantLabel] = function (props) {
|
3995 | return (props.variants !== undefined ||
|
3996 | animationProps.some(function (key) { return typeof props[key] === "string"; }));
|
3997 | },
|
3998 | _b[AnimatePropType.AnimationSubscription] = isAnimationSubscription,
|
3999 | _b);
|
4000 | var getAnimationComponent = function (props) {
|
4001 | var animatePropType = undefined;
|
4002 | for (var key in AnimatePropType) {
|
4003 | if (animatePropTypeTests[key](props)) {
|
4004 | animatePropType = key;
|
4005 | }
|
4006 | }
|
4007 | return animatePropType ? AnimatePropComponents[animatePropType] : undefined;
|
4008 | };
|
4009 |
|
4010 | var Exit = {
|
4011 | key: "exit",
|
4012 | shouldRender: function (_a, _b) {
|
4013 | var exit = _a.exit;
|
4014 | var exitProps = _b.exitProps;
|
4015 | var hasExitProps = !!exitProps;
|
4016 | var hasExitAnimation = !!exit;
|
4017 | heyListen.invariant(!hasExitProps || (hasExitProps && hasExitAnimation), "No exit prop defined on a child of AnimatePresence.");
|
4018 | return hasExitProps && hasExitAnimation;
|
4019 | },
|
4020 | Component: makeRenderlessComponent(function (props) {
|
4021 | var animate = props.animate, controls = props.controls, parentContext = props.parentContext, exit = props.exit;
|
4022 | var exitProps = parentContext.exitProps;
|
4023 | var isPlayingExitAnimation = React.useRef(false);
|
4024 |
|
4025 | if (!exitProps || !exit)
|
4026 | return;
|
4027 | var isExiting = exitProps.isExiting, custom = exitProps.custom, onExitComplete = exitProps.onExitComplete;
|
4028 | React.useEffect(function () {
|
4029 | if (isExiting) {
|
4030 | if (!isPlayingExitAnimation.current && exit) {
|
4031 | controls.setProps(tslib.__assign(tslib.__assign({}, props), { custom: custom !== undefined ? custom : props.custom }));
|
4032 | controls.start(exit).then(onExitComplete);
|
4033 | }
|
4034 | isPlayingExitAnimation.current = true;
|
4035 | }
|
4036 | else if (isPlayingExitAnimation.current &&
|
4037 | animate &&
|
4038 | !(animate instanceof AnimationControls)) {
|
4039 | controls.start(animate);
|
4040 | }
|
4041 | if (!isExiting) {
|
4042 | isPlayingExitAnimation.current = false;
|
4043 | }
|
4044 | }, [isExiting]);
|
4045 | }),
|
4046 | };
|
4047 |
|
4048 | var isPropValid = function (key) { return !isValidMotionProp(key); };
|
4049 |
|
4050 |
|
4051 |
|
4052 |
|
4053 |
|
4054 |
|
4055 |
|
4056 |
|
4057 |
|
4058 |
|
4059 |
|
4060 |
|
4061 |
|
4062 | try {
|
4063 | var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
|
4064 | isPropValid = function (key) {
|
4065 |
|
4066 | if (key.startsWith("on")) {
|
4067 | return !isValidMotionProp(key);
|
4068 | }
|
4069 | else {
|
4070 | return emotionIsPropValid_1(key);
|
4071 | }
|
4072 | };
|
4073 | }
|
4074 | catch (_a) {
|
4075 |
|
4076 | }
|
4077 | function filterValidProps(props) {
|
4078 | var domProps = {};
|
4079 | for (var key in props) {
|
4080 | if (isPropValid(key)) {
|
4081 | domProps[key] = props[key];
|
4082 | }
|
4083 | }
|
4084 | return domProps;
|
4085 | }
|
4086 | var buildSVGProps = function (values, style) {
|
4087 | var motionValueStyles = resolveCurrent(values);
|
4088 | var props = styler.buildSVGAttrs(motionValueStyles, undefined, undefined, undefined, undefined, false);
|
4089 | props.style = tslib.__assign(tslib.__assign({}, style), props.style);
|
4090 | return props;
|
4091 | };
|
4092 | var functionalityComponents = [Layout, Drag, Gestures, Exit];
|
4093 | var numFunctionalityComponents = functionalityComponents.length;
|
4094 |
|
4095 |
|
4096 |
|
4097 |
|
4098 |
|
4099 | function createDomMotionConfig(Component) {
|
4100 | var isDOM = typeof Component === "string";
|
4101 | var isSVG = isDOM && svgElements.indexOf(Component) !== -1;
|
4102 | return {
|
4103 | renderComponent: function (ref, style, values, props, isStatic) {
|
4104 | var forwardedProps = isDOM ? filterValidProps(props) : props;
|
4105 | var staticVisualStyles = isSVG
|
4106 | ? buildSVGProps(values, style)
|
4107 | : { style: buildStyleAttr(values, style, isStatic) };
|
4108 | return React.createElement(Component, tslib.__assign(tslib.__assign(tslib.__assign({}, forwardedProps), { ref: ref }), staticVisualStyles));
|
4109 | },
|
4110 | |
4111 |
|
4112 |
|
4113 |
|
4114 |
|
4115 |
|
4116 |
|
4117 |
|
4118 |
|
4119 |
|
4120 |
|
4121 |
|
4122 |
|
4123 |
|
4124 |
|
4125 |
|
4126 |
|
4127 |
|
4128 |
|
4129 | loadFunctionalityComponents: function (ref, values, props, context, controls, inherit) {
|
4130 | var activeComponents = [];
|
4131 |
|
4132 | var Animation = getAnimationComponent(props);
|
4133 | if (Animation) {
|
4134 | activeComponents.push(React.createElement(Animation, { key: "animation", initial: props.initial, animate: props.animate, variants: props.variants, transition: props.transition, controls: controls, inherit: inherit, values: values }));
|
4135 | }
|
4136 | for (var i = 0; i < numFunctionalityComponents; i++) {
|
4137 | var _a = functionalityComponents[i], shouldRender = _a.shouldRender, key = _a.key, Component_1 = _a.Component;
|
4138 | if (shouldRender(props, context)) {
|
4139 | activeComponents.push(React.createElement(Component_1, tslib.__assign({ key: key }, props, { parentContext: context, values: values, controls: controls, innerRef: ref })));
|
4140 | }
|
4141 | }
|
4142 | return activeComponents;
|
4143 | },
|
4144 | getValueControlsConfig: function (ref, values) {
|
4145 | return {
|
4146 | values: values,
|
4147 | readValueFromSource: function (key) {
|
4148 | return styler__default(ref.current).get(key);
|
4149 | },
|
4150 |
|
4151 |
|
4152 |
|
4153 | makeTargetAnimatable: parseDomVariant(values, ref),
|
4154 | };
|
4155 | },
|
4156 | };
|
4157 | }
|
4158 |
|
4159 | var htmlMotionComponents = htmlElements.reduce(function (acc, Component) {
|
4160 | var config = createDomMotionConfig(Component);
|
4161 |
|
4162 |
|
4163 | acc[Component] = createMotionComponent(config);
|
4164 | return acc;
|
4165 | }, {});
|
4166 | var svgMotionComponents = svgElements.reduce(function (acc, Component) {
|
4167 |
|
4168 |
|
4169 | acc[Component] = createMotionComponent(createDomMotionConfig(Component));
|
4170 | return acc;
|
4171 | }, {});
|
4172 |
|
4173 |
|
4174 |
|
4175 |
|
4176 |
|
4177 |
|
4178 |
|
4179 |
|
4180 |
|
4181 |
|
4182 |
|
4183 |
|
4184 |
|
4185 |
|
4186 |
|
4187 |
|
4188 |
|
4189 |
|
4190 |
|
4191 | var motion = tslib.__assign(tslib.__assign({
|
4192 | |
4193 |
|
4194 |
|
4195 |
|
4196 |
|
4197 |
|
4198 |
|
4199 |
|
4200 |
|
4201 |
|
4202 |
|
4203 |
|
4204 |
|
4205 |
|
4206 |
|
4207 | custom: function custom(Component) {
|
4208 | return createMotionComponent(createDomMotionConfig(Component));
|
4209 | } }, htmlMotionComponents), svgMotionComponents);
|
4210 |
|
4211 |
|
4212 |
|
4213 |
|
4214 |
|
4215 |
|
4216 |
|
4217 |
|
4218 |
|
4219 |
|
4220 |
|
4221 |
|
4222 |
|
4223 |
|
4224 |
|
4225 |
|
4226 |
|
4227 |
|
4228 |
|
4229 |
|
4230 |
|
4231 |
|
4232 |
|
4233 |
|
4234 |
|
4235 |
|
4236 |
|
4237 |
|
4238 |
|
4239 |
|
4240 | function useMotionValue(initial) {
|
4241 | return useConstant(function () { return motionValue(initial); });
|
4242 | }
|
4243 |
|
4244 |
|
4245 |
|
4246 |
|
4247 |
|
4248 |
|
4249 |
|
4250 |
|
4251 | function unwrapMotionValue(value) {
|
4252 | var unwrappedValue = value instanceof MotionValue ? value.get() : value;
|
4253 | return isCustomValue(unwrappedValue)
|
4254 | ? unwrappedValue.toValue()
|
4255 | : unwrappedValue;
|
4256 | }
|
4257 |
|
4258 | var isCustomValueType = function (v) {
|
4259 | return typeof v === "object" && v.mix;
|
4260 | };
|
4261 | var getMixer = function (v) { return (isCustomValueType(v) ? v.mix : undefined); };
|
4262 | function transform() {
|
4263 | var args = [];
|
4264 | for (var _i = 0; _i < arguments.length; _i++) {
|
4265 | args[_i] = arguments[_i];
|
4266 | }
|
4267 | var useImmediate = !Array.isArray(args[0]);
|
4268 | var argOffset = useImmediate ? 0 : -1;
|
4269 | var inputValue = args[0 + argOffset];
|
4270 | var inputRange = args[1 + argOffset];
|
4271 | var outputRange = args[2 + argOffset];
|
4272 | var options = args[3 + argOffset];
|
4273 | var interpolator = popcorn.interpolate(inputRange, outputRange, tslib.__assign({ mixer: getMixer(outputRange[0]) }, options));
|
4274 | return useImmediate ? interpolator(inputValue) : interpolator;
|
4275 | }
|
4276 |
|
4277 | var isTransformer = function (v) {
|
4278 | return typeof v === "function";
|
4279 | };
|
4280 | var noop$1 = function (v) { return v; };
|
4281 | function useTransform(parent, customTransform, to, options) {
|
4282 | var value = React.useRef(null);
|
4283 | var comparitor = [parent];
|
4284 | var transformer = noop$1;
|
4285 | if (isTransformer(customTransform)) {
|
4286 | transformer = customTransform;
|
4287 | }
|
4288 | else if (Array.isArray(to)) {
|
4289 | var from = customTransform;
|
4290 | transformer = transform(from, to, options);
|
4291 | comparitor = [parent, from.join(","), to.join(",")];
|
4292 | }
|
4293 | return React.useMemo(function () {
|
4294 | if (value.current)
|
4295 | value.current.destroy();
|
4296 | value.current = parent.addChild({ transformer: transformer });
|
4297 | return value.current;
|
4298 | }, comparitor);
|
4299 | }
|
4300 |
|
4301 |
|
4302 |
|
4303 |
|
4304 | var maxScale = 100000;
|
4305 | var invertScale = function (scale) { return (scale > 0.001 ? 1 / scale : maxScale); };
|
4306 |
|
4307 |
|
4308 |
|
4309 |
|
4310 |
|
4311 |
|
4312 |
|
4313 |
|
4314 |
|
4315 |
|
4316 |
|
4317 |
|
4318 |
|
4319 |
|
4320 |
|
4321 |
|
4322 |
|
4323 |
|
4324 |
|
4325 |
|
4326 |
|
4327 |
|
4328 |
|
4329 |
|
4330 |
|
4331 |
|
4332 |
|
4333 |
|
4334 |
|
4335 |
|
4336 | function useInvertedScale(scale) {
|
4337 | var parentScaleX = useMotionValue(1);
|
4338 | var parentScaleY = useMotionValue(1);
|
4339 | var values = React.useContext(MotionContext).values;
|
4340 | heyListen.invariant(!!(scale || values), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
|
4341 | if (scale) {
|
4342 | parentScaleX = scale.scaleX || parentScaleX;
|
4343 | parentScaleY = scale.scaleY || parentScaleY;
|
4344 | }
|
4345 | else if (values) {
|
4346 | parentScaleX = values.get("scaleX", 1);
|
4347 | parentScaleY = values.get("scaleY", 1);
|
4348 | }
|
4349 | var scaleX = useTransform(parentScaleX, invertScale);
|
4350 | var scaleY = useTransform(parentScaleY, invertScale);
|
4351 | return { scaleX: scaleX, scaleY: scaleY };
|
4352 | }
|
4353 |
|
4354 | function useOnChange(value, callback) {
|
4355 | React.useEffect(function () { return (isMotionValue(value) ? value.onChange(callback) : undefined); }, [value]);
|
4356 | }
|
4357 |
|
4358 |
|
4359 |
|
4360 |
|
4361 |
|
4362 |
|
4363 |
|
4364 |
|
4365 |
|
4366 |
|
4367 |
|
4368 |
|
4369 |
|
4370 |
|
4371 |
|
4372 |
|
4373 |
|
4374 |
|
4375 |
|
4376 |
|
4377 | function useSpring(source, config) {
|
4378 | if (config === void 0) { config = {}; }
|
4379 | var activeSpringAnimation = React.useRef(null);
|
4380 | var value = useMotionValue(isMotionValue(source) ? source.get() : source);
|
4381 | React.useMemo(function () {
|
4382 | return value.attach(function (v, set) {
|
4383 | if (activeSpringAnimation.current) {
|
4384 | activeSpringAnimation.current.stop();
|
4385 | }
|
4386 | activeSpringAnimation.current = popmotion.spring(tslib.__assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config)).start(set);
|
4387 | return value.get();
|
4388 | });
|
4389 | }, Object.values(config));
|
4390 | useOnChange(source, function (v) { return value.set(parseFloat(v)); });
|
4391 | return value;
|
4392 | }
|
4393 |
|
4394 | var scrollX = motionValue(0);
|
4395 | var scrollY = motionValue(0);
|
4396 | var scrollXProgress = motionValue(0);
|
4397 | var scrollYProgress = motionValue(0);
|
4398 | var setProgress = function (offset, maxOffset, value) {
|
4399 | value.set(!maxOffset || !offset ? 0 : offset / maxOffset);
|
4400 | };
|
4401 | var hasEventListener = false;
|
4402 | var addScrollListener = function () {
|
4403 | hasEventListener = true;
|
4404 | if (typeof window === "undefined")
|
4405 | return;
|
4406 | var updateScrollValues = function () {
|
4407 | var xOffset = window.pageXOffset;
|
4408 | var yOffset = window.pageYOffset;
|
4409 |
|
4410 | scrollX.set(xOffset);
|
4411 | scrollY.set(yOffset);
|
4412 |
|
4413 | setProgress(xOffset, document.body.clientWidth - window.innerWidth, scrollXProgress);
|
4414 | setProgress(yOffset, document.body.clientHeight - window.innerHeight, scrollYProgress);
|
4415 | };
|
4416 | updateScrollValues();
|
4417 | window.addEventListener("resize", updateScrollValues);
|
4418 | window.addEventListener("scroll", updateScrollValues, { passive: true });
|
4419 | };
|
4420 | var viewportMotionValues = {
|
4421 | scrollX: scrollX,
|
4422 | scrollY: scrollY,
|
4423 | scrollXProgress: scrollXProgress,
|
4424 | scrollYProgress: scrollYProgress,
|
4425 | };
|
4426 |
|
4427 |
|
4428 |
|
4429 |
|
4430 |
|
4431 |
|
4432 |
|
4433 |
|
4434 |
|
4435 |
|
4436 |
|
4437 |
|
4438 |
|
4439 |
|
4440 |
|
4441 |
|
4442 |
|
4443 |
|
4444 |
|
4445 |
|
4446 |
|
4447 |
|
4448 |
|
4449 |
|
4450 |
|
4451 |
|
4452 |
|
4453 |
|
4454 |
|
4455 |
|
4456 |
|
4457 |
|
4458 |
|
4459 |
|
4460 |
|
4461 |
|
4462 |
|
4463 |
|
4464 |
|
4465 |
|
4466 |
|
4467 |
|
4468 |
|
4469 |
|
4470 | function useViewportScroll() {
|
4471 | if (!hasEventListener) {
|
4472 | addScrollListener();
|
4473 | }
|
4474 | return viewportMotionValues;
|
4475 | }
|
4476 |
|
4477 |
|
4478 |
|
4479 |
|
4480 |
|
4481 |
|
4482 |
|
4483 |
|
4484 |
|
4485 |
|
4486 |
|
4487 |
|
4488 |
|
4489 |
|
4490 |
|
4491 |
|
4492 |
|
4493 |
|
4494 |
|
4495 |
|
4496 |
|
4497 |
|
4498 |
|
4499 |
|
4500 |
|
4501 |
|
4502 |
|
4503 |
|
4504 |
|
4505 |
|
4506 |
|
4507 |
|
4508 |
|
4509 |
|
4510 |
|
4511 |
|
4512 |
|
4513 |
|
4514 |
|
4515 |
|
4516 |
|
4517 |
|
4518 |
|
4519 |
|
4520 |
|
4521 |
|
4522 |
|
4523 |
|
4524 |
|
4525 |
|
4526 | function useAnimation() {
|
4527 | var animationControls = useConstant(function () { return new AnimationControls(); });
|
4528 | React.useEffect(function () {
|
4529 | animationControls.mount();
|
4530 | return function () { return animationControls.unmount(); };
|
4531 | }, []);
|
4532 | return animationControls;
|
4533 | }
|
4534 |
|
4535 |
|
4536 |
|
4537 |
|
4538 |
|
4539 |
|
4540 |
|
4541 |
|
4542 |
|
4543 |
|
4544 |
|
4545 |
|
4546 |
|
4547 |
|
4548 |
|
4549 |
|
4550 |
|
4551 |
|
4552 |
|
4553 |
|
4554 |
|
4555 |
|
4556 |
|
4557 |
|
4558 |
|
4559 |
|
4560 |
|
4561 |
|
4562 |
|
4563 |
|
4564 |
|
4565 |
|
4566 |
|
4567 |
|
4568 |
|
4569 |
|
4570 | function useAnimatedState(initialState) {
|
4571 | var _a = React.useState(initialState), animationState = _a[0], onUpdate = _a[1];
|
4572 | var config = useConstant(function () { return ({ onUpdate: onUpdate }); });
|
4573 | var values = useMotionValues(config);
|
4574 | var controls = useValueAnimationControls({
|
4575 | values: values,
|
4576 | readValueFromSource: function (key) { return animationState[key]; },
|
4577 | }, {}, false);
|
4578 | var startAnimation = useConstant(function () { return function (animationDefinition) {
|
4579 | return controls.start(animationDefinition);
|
4580 | }; });
|
4581 | React.useEffect(function () {
|
4582 | values.mount();
|
4583 | return function () { return values.unmount(); };
|
4584 | }, []);
|
4585 | return [animationState, startAnimation];
|
4586 | }
|
4587 |
|
4588 |
|
4589 |
|
4590 |
|
4591 |
|
4592 |
|
4593 |
|
4594 |
|
4595 |
|
4596 |
|
4597 |
|
4598 |
|
4599 |
|
4600 |
|
4601 |
|
4602 |
|
4603 |
|
4604 |
|
4605 |
|
4606 |
|
4607 |
|
4608 |
|
4609 |
|
4610 |
|
4611 |
|
4612 |
|
4613 |
|
4614 |
|
4615 |
|
4616 |
|
4617 |
|
4618 |
|
4619 |
|
4620 |
|
4621 |
|
4622 |
|
4623 |
|
4624 |
|
4625 |
|
4626 |
|
4627 |
|
4628 |
|
4629 |
|
4630 |
|
4631 |
|
4632 |
|
4633 |
|
4634 | function useCycle() {
|
4635 | var items = [];
|
4636 | for (var _i = 0; _i < arguments.length; _i++) {
|
4637 | items[_i] = arguments[_i];
|
4638 | }
|
4639 |
|
4640 | heyListen.warning(items.length > 1, "useCycle syntax has changed. `useCycle([0, 1, 2])` becomes `useCycle(0, 1, 2)`");
|
4641 | var index = React.useRef(0);
|
4642 | var _a = React.useState(items[index.current]), item = _a[0], setItem = _a[1];
|
4643 | return [
|
4644 | item,
|
4645 | function (next) {
|
4646 | index.current =
|
4647 | typeof next !== "number"
|
4648 | ? popcorn.wrap(0, items.length, index.current + 1)
|
4649 | : next;
|
4650 | setItem(items[index.current]);
|
4651 | },
|
4652 | ];
|
4653 | }
|
4654 |
|
4655 |
|
4656 |
|
4657 |
|
4658 |
|
4659 |
|
4660 |
|
4661 |
|
4662 |
|
4663 |
|
4664 |
|
4665 |
|
4666 |
|
4667 |
|
4668 |
|
4669 |
|
4670 |
|
4671 |
|
4672 |
|
4673 |
|
4674 |
|
4675 |
|
4676 |
|
4677 |
|
4678 |
|
4679 |
|
4680 |
|
4681 |
|
4682 |
|
4683 |
|
4684 |
|
4685 |
|
4686 |
|
4687 |
|
4688 |
|
4689 |
|
4690 |
|
4691 |
|
4692 |
|
4693 |
|
4694 | var DragControls = (function () {
|
4695 | function DragControls() {
|
4696 | this.componentControls = new Set();
|
4697 | }
|
4698 | |
4699 |
|
4700 |
|
4701 |
|
4702 |
|
4703 | DragControls.prototype.subscribe = function (controls) {
|
4704 | var _this = this;
|
4705 | this.componentControls.add(controls);
|
4706 | return function () { return _this.componentControls.delete(controls); };
|
4707 | };
|
4708 | |
4709 |
|
4710 |
|
4711 |
|
4712 |
|
4713 |
|
4714 |
|
4715 |
|
4716 |
|
4717 |
|
4718 |
|
4719 |
|
4720 |
|
4721 |
|
4722 |
|
4723 | DragControls.prototype.start = function (event, options) {
|
4724 | this.componentControls.forEach(function (controls) {
|
4725 | controls.start(event.nativeEvent || event, options);
|
4726 | });
|
4727 | };
|
4728 | return DragControls;
|
4729 | }());
|
4730 | var createDragControls = function () { return new DragControls(); };
|
4731 |
|
4732 |
|
4733 |
|
4734 |
|
4735 |
|
4736 |
|
4737 |
|
4738 |
|
4739 |
|
4740 |
|
4741 |
|
4742 |
|
4743 |
|
4744 |
|
4745 |
|
4746 |
|
4747 |
|
4748 |
|
4749 |
|
4750 |
|
4751 |
|
4752 |
|
4753 |
|
4754 |
|
4755 |
|
4756 |
|
4757 |
|
4758 |
|
4759 |
|
4760 |
|
4761 |
|
4762 |
|
4763 |
|
4764 |
|
4765 |
|
4766 |
|
4767 |
|
4768 |
|
4769 |
|
4770 |
|
4771 |
|
4772 |
|
4773 |
|
4774 |
|
4775 |
|
4776 | function useDragControls() {
|
4777 | return useConstant(createDragControls);
|
4778 | }
|
4779 |
|
4780 | var PresenceChild = function (_a) {
|
4781 | var children = _a.children, exitProps = _a.exitProps;
|
4782 | var context = React.useContext(MotionContext);
|
4783 |
|
4784 |
|
4785 | context = tslib.__assign(tslib.__assign({}, context), { exitProps: exitProps || {} });
|
4786 | return (React.createElement(MotionContext.Provider, { value: context }, children));
|
4787 | };
|
4788 | function getChildKey(child) {
|
4789 | return child.key || "";
|
4790 | }
|
4791 | function updateChildLookup(children, allChildren) {
|
4792 | var seenChildren = process.env.NODE_ENV !== "production" ? new Set() : null;
|
4793 | children.forEach(function (child) {
|
4794 | var key = getChildKey(child);
|
4795 | if (process.env.NODE_ENV !== "production" && seenChildren) {
|
4796 | if (seenChildren.has(key)) {
|
4797 | console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
|
4798 | }
|
4799 | seenChildren.add(key);
|
4800 | }
|
4801 | allChildren.set(key, child);
|
4802 | });
|
4803 | }
|
4804 | function onlyElements(children) {
|
4805 | var filtered = [];
|
4806 |
|
4807 | React.Children.forEach(children, function (child) {
|
4808 | if (React.isValidElement(child))
|
4809 | filtered.push(child);
|
4810 | });
|
4811 | return filtered;
|
4812 | }
|
4813 |
|
4814 |
|
4815 |
|
4816 |
|
4817 |
|
4818 |
|
4819 |
|
4820 |
|
4821 |
|
4822 |
|
4823 |
|
4824 |
|
4825 |
|
4826 |
|
4827 |
|
4828 |
|
4829 |
|
4830 |
|
4831 |
|
4832 |
|
4833 |
|
4834 |
|
4835 |
|
4836 |
|
4837 |
|
4838 |
|
4839 |
|
4840 |
|
4841 |
|
4842 |
|
4843 |
|
4844 |
|
4845 |
|
4846 |
|
4847 |
|
4848 |
|
4849 |
|
4850 |
|
4851 |
|
4852 |
|
4853 |
|
4854 |
|
4855 |
|
4856 |
|
4857 |
|
4858 |
|
4859 |
|
4860 |
|
4861 |
|
4862 |
|
4863 |
|
4864 |
|
4865 |
|
4866 |
|
4867 |
|
4868 |
|
4869 |
|
4870 |
|
4871 | var AnimatePresence = function (_a) {
|
4872 | var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter;
|
4873 |
|
4874 |
|
4875 | var localForceUpdate = useForceUpdate();
|
4876 | var contextForceUpdate = React.useContext(SyncLayoutContext);
|
4877 | var forceUpdate = contextForceUpdate || localForceUpdate;
|
4878 | var isInitialRender = React.useRef(true);
|
4879 |
|
4880 | var filteredChildren = onlyElements(children);
|
4881 |
|
4882 |
|
4883 | var presentChildren = React.useRef(filteredChildren);
|
4884 |
|
4885 | var allChildren = React.useRef(new Map())
|
4886 | .current;
|
4887 |
|
4888 | var exiting = React.useRef(new Set()).current;
|
4889 | updateChildLookup(filteredChildren, allChildren);
|
4890 |
|
4891 |
|
4892 | if (isInitialRender.current) {
|
4893 | isInitialRender.current = false;
|
4894 | return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), exitProps: initial ? undefined : { initial: false } }, child)); })));
|
4895 | }
|
4896 |
|
4897 | var childrenToRender = tslib.__spreadArrays(filteredChildren);
|
4898 |
|
4899 |
|
4900 | var presentKeys = presentChildren.current.map(getChildKey);
|
4901 | var targetKeys = filteredChildren.map(getChildKey);
|
4902 |
|
4903 | var numPresent = presentKeys.length;
|
4904 | for (var i = 0; i < numPresent; i++) {
|
4905 | var key = presentKeys[i];
|
4906 | if (targetKeys.indexOf(key) === -1) {
|
4907 | exiting.add(key);
|
4908 | }
|
4909 | else {
|
4910 |
|
4911 | exiting.delete(key);
|
4912 | }
|
4913 | }
|
4914 |
|
4915 |
|
4916 | if (exitBeforeEnter && exiting.size) {
|
4917 | childrenToRender = [];
|
4918 | }
|
4919 |
|
4920 |
|
4921 | exiting.forEach(function (key) {
|
4922 |
|
4923 | if (targetKeys.indexOf(key) !== -1)
|
4924 | return;
|
4925 | var child = allChildren.get(key);
|
4926 | if (!child)
|
4927 | return;
|
4928 | var insertionIndex = presentKeys.indexOf(key);
|
4929 | var onExit = function () {
|
4930 | exiting.delete(key);
|
4931 |
|
4932 | var removeIndex = presentChildren.current.findIndex(function (child) { return child.key === key; });
|
4933 | presentChildren.current.splice(removeIndex, 1);
|
4934 |
|
4935 | if (!exiting.size) {
|
4936 | presentChildren.current = filteredChildren;
|
4937 | forceUpdate();
|
4938 | onExitComplete && onExitComplete();
|
4939 | }
|
4940 | };
|
4941 | var exitProps = {
|
4942 | custom: custom,
|
4943 | isExiting: true,
|
4944 | onExitComplete: onExit,
|
4945 | };
|
4946 | childrenToRender.splice(insertionIndex, 0, React.createElement(PresenceChild, { key: getChildKey(child), exitProps: exitProps }, child));
|
4947 | });
|
4948 |
|
4949 |
|
4950 | childrenToRender = childrenToRender.map(function (child) {
|
4951 | var key = child.key;
|
4952 | return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child) }, child));
|
4953 | });
|
4954 | presentChildren.current = childrenToRender;
|
4955 | if (process.env.NODE_ENV !== "production" &&
|
4956 | exitBeforeEnter &&
|
4957 | childrenToRender.length > 1) {
|
4958 | console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
|
4959 | }
|
4960 | return (React.createElement(React.Fragment, null, exiting.size
|
4961 | ? childrenToRender
|
4962 | : childrenToRender.map(function (child) { return React.cloneElement(child); })));
|
4963 | };
|
4964 |
|
4965 |
|
4966 |
|
4967 |
|
4968 |
|
4969 |
|
4970 |
|
4971 |
|
4972 |
|
4973 |
|
4974 |
|
4975 |
|
4976 |
|
4977 |
|
4978 |
|
4979 |
|
4980 |
|
4981 |
|
4982 |
|
4983 |
|
4984 |
|
4985 |
|
4986 |
|
4987 | function usePresence() {
|
4988 | var exitProps = React.useContext(MotionContext).exitProps;
|
4989 | if (!exitProps)
|
4990 | return [true];
|
4991 | var isExiting = exitProps.isExiting, onExitComplete = exitProps.onExitComplete;
|
4992 | return isExiting && onExitComplete ? [false, onExitComplete] : [true];
|
4993 | }
|
4994 |
|
4995 |
|
4996 | var prefersReducedMotion = motionValue(null);
|
4997 | if (typeof window !== "undefined") {
|
4998 | if (window.matchMedia) {
|
4999 | var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
|
5000 | var setReducedMotionPreferences = function () {
|
5001 | return prefersReducedMotion.set(motionMediaQuery_1.matches);
|
5002 | };
|
5003 | motionMediaQuery_1.addListener(setReducedMotionPreferences);
|
5004 | setReducedMotionPreferences();
|
5005 | }
|
5006 | else {
|
5007 | prefersReducedMotion.set(false);
|
5008 | }
|
5009 | }
|
5010 | function determineShouldReduceMotion(prefersReduced, isReducedMotion) {
|
5011 | return typeof isReducedMotion === "boolean"
|
5012 | ? isReducedMotion
|
5013 | : Boolean(prefersReduced);
|
5014 | }
|
5015 |
|
5016 |
|
5017 |
|
5018 |
|
5019 |
|
5020 |
|
5021 |
|
5022 |
|
5023 |
|
5024 |
|
5025 |
|
5026 |
|
5027 |
|
5028 |
|
5029 |
|
5030 |
|
5031 |
|
5032 |
|
5033 |
|
5034 |
|
5035 |
|
5036 |
|
5037 |
|
5038 |
|
5039 |
|
5040 |
|
5041 |
|
5042 | function useReducedMotion() {
|
5043 | var isReducedMotion = React.useContext(MotionContext).isReducedMotion;
|
5044 | var _a = React.useState(determineShouldReduceMotion(prefersReducedMotion.get(), isReducedMotion)), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
|
5045 | React.useEffect(function () {
|
5046 | return prefersReducedMotion.onChange(function (v) {
|
5047 | setShouldReduceMotion(determineShouldReduceMotion(v, isReducedMotion));
|
5048 | });
|
5049 | }, [setShouldReduceMotion, isReducedMotion]);
|
5050 | return shouldReduceMotion;
|
5051 | }
|
5052 |
|
5053 |
|
5054 |
|
5055 |
|
5056 |
|
5057 |
|
5058 |
|
5059 | function ReducedMotion(_a) {
|
5060 | var children = _a.children, enabled = _a.enabled;
|
5061 | var context = React.useContext(MotionContext);
|
5062 | context = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, context), { isReducedMotion: enabled })); }, [enabled]);
|
5063 | return (React.createElement(MotionContext.Provider, { value: context }, children));
|
5064 | }
|
5065 |
|
5066 | exports.AnimatePresence = AnimatePresence;
|
5067 | exports.AnimationControls = AnimationControls;
|
5068 | exports.DragControls = DragControls;
|
5069 | exports.MotionContext = MotionContext;
|
5070 | exports.MotionPluginContext = MotionPluginContext;
|
5071 | exports.MotionPlugins = MotionPlugins;
|
5072 | exports.MotionValue = MotionValue;
|
5073 | exports.ReducedMotion = ReducedMotion;
|
5074 | exports.UnstableSyncLayout = UnstableSyncLayout;
|
5075 | exports.animationControls = animationControls;
|
5076 | exports.createMotionComponent = createMotionComponent;
|
5077 | exports.isValidMotionProp = isValidMotionProp;
|
5078 | exports.motion = motion;
|
5079 | exports.motionValue = motionValue;
|
5080 | exports.transform = transform;
|
5081 | exports.unwrapMotionValue = unwrapMotionValue;
|
5082 | exports.useAnimatedState = useAnimatedState;
|
5083 | exports.useAnimation = useAnimation;
|
5084 | exports.useCycle = useCycle;
|
5085 | exports.useDomEvent = useDomEvent;
|
5086 | exports.useDragControls = useDragControls;
|
5087 | exports.useExternalRef = useExternalRef;
|
5088 | exports.useGestures = useGestures;
|
5089 | exports.useInvertedScale = useInvertedScale;
|
5090 | exports.useMotionValue = useMotionValue;
|
5091 | exports.usePanGesture = usePanGesture;
|
5092 | exports.usePresence = usePresence;
|
5093 | exports.useReducedMotion = useReducedMotion;
|
5094 | exports.useSpring = useSpring;
|
5095 | exports.useTapGesture = useTapGesture;
|
5096 | exports.useTransform = useTransform;
|
5097 | exports.useViewportScroll = useViewportScroll;
|