react-spring-carousel 3.0.0-beta005 → 3.0.0-beta006

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/index.js CHANGED
@@ -1,3732 +1,19 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
- var React = require('react');
5
- var reactDom = require('react-dom');
6
- var react = require('@use-gesture/react');
4
+ var web = require('@react-spring/web');
5
+ var react = require('react');
6
+ var react$1 = require('@use-gesture/react');
7
7
  var screenfull = require('screenfull');
8
8
 
9
- function _interopNamespaceDefault(e) {
10
- var n = Object.create(null);
11
- if (e) {
12
- Object.keys(e).forEach(function (k) {
13
- if (k !== 'default') {
14
- var d = Object.getOwnPropertyDescriptor(e, k);
15
- Object.defineProperty(n, k, d.get ? d : {
16
- enumerable: true,
17
- get: function () { return e[k]; }
18
- });
19
- }
20
- });
21
- }
22
- n.default = e;
23
- return Object.freeze(n);
24
- }
25
-
26
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
27
-
28
- let updateQueue = makeQueue();
29
- const raf = fn => schedule(fn, updateQueue);
30
- let writeQueue = makeQueue();
31
-
32
- raf.write = fn => schedule(fn, writeQueue);
33
-
34
- let onStartQueue = makeQueue();
35
-
36
- raf.onStart = fn => schedule(fn, onStartQueue);
37
-
38
- let onFrameQueue = makeQueue();
39
-
40
- raf.onFrame = fn => schedule(fn, onFrameQueue);
41
-
42
- let onFinishQueue = makeQueue();
43
-
44
- raf.onFinish = fn => schedule(fn, onFinishQueue);
45
-
46
- let timeouts = [];
47
-
48
- raf.setTimeout = (handler, ms) => {
49
- let time = raf.now() + ms;
50
-
51
- let cancel = () => {
52
- let i = timeouts.findIndex(t => t.cancel == cancel);
53
- if (~i) timeouts.splice(i, 1);
54
- pendingCount -= ~i ? 1 : 0;
55
- };
56
-
57
- let timeout = {
58
- time,
59
- handler,
60
- cancel
61
- };
62
- timeouts.splice(findTimeout(time), 0, timeout);
63
- pendingCount += 1;
64
- start();
65
- return timeout;
66
- };
67
-
68
- let findTimeout = time => ~(~timeouts.findIndex(t => t.time > time) || ~timeouts.length);
69
-
70
- raf.cancel = fn => {
71
- onStartQueue.delete(fn);
72
- onFrameQueue.delete(fn);
73
- onFinishQueue.delete(fn);
74
- updateQueue.delete(fn);
75
- writeQueue.delete(fn);
76
- };
77
-
78
- raf.sync = fn => {
79
- sync = true;
80
- raf.batchedUpdates(fn);
81
- sync = false;
82
- };
83
-
84
- raf.throttle = fn => {
85
- let lastArgs;
86
-
87
- function queuedFn() {
88
- try {
89
- fn(...lastArgs);
90
- } finally {
91
- lastArgs = null;
92
- }
93
- }
94
-
95
- function throttled(...args) {
96
- lastArgs = args;
97
- raf.onStart(queuedFn);
98
- }
99
-
100
- throttled.handler = fn;
101
-
102
- throttled.cancel = () => {
103
- onStartQueue.delete(queuedFn);
104
- lastArgs = null;
105
- };
106
-
107
- return throttled;
108
- };
109
-
110
- let nativeRaf = typeof window != 'undefined' ? window.requestAnimationFrame : () => {};
111
-
112
- raf.use = impl => nativeRaf = impl;
113
-
114
- raf.now = typeof performance != 'undefined' ? () => performance.now() : Date.now;
115
-
116
- raf.batchedUpdates = fn => fn();
117
-
118
- raf.catch = console.error;
119
- raf.frameLoop = 'always';
120
-
121
- raf.advance = () => {
122
- if (raf.frameLoop !== 'demand') {
123
- console.warn('Cannot call the manual advancement of rafz whilst frameLoop is not set as demand');
124
- } else {
125
- update();
126
- }
127
- };
128
-
129
- let ts = -1;
130
- let pendingCount = 0;
131
- let sync = false;
132
-
133
- function schedule(fn, queue) {
134
- if (sync) {
135
- queue.delete(fn);
136
- fn(0);
137
- } else {
138
- queue.add(fn);
139
- start();
140
- }
141
- }
142
-
143
- function start() {
144
- if (ts < 0) {
145
- ts = 0;
146
-
147
- if (raf.frameLoop !== 'demand') {
148
- nativeRaf(loop);
149
- }
150
- }
151
- }
152
-
153
- function stop() {
154
- ts = -1;
155
- }
156
-
157
- function loop() {
158
- if (~ts) {
159
- nativeRaf(loop);
160
- raf.batchedUpdates(update);
161
- }
162
- }
163
-
164
- function update() {
165
- let prevTs = ts;
166
- ts = raf.now();
167
- let count = findTimeout(ts);
168
-
169
- if (count) {
170
- eachSafely(timeouts.splice(0, count), t => t.handler());
171
- pendingCount -= count;
172
- }
173
-
174
- if (!pendingCount) {
175
- stop();
176
- return;
177
- }
178
-
179
- onStartQueue.flush();
180
- updateQueue.flush(prevTs ? Math.min(64, ts - prevTs) : 16.667);
181
- onFrameQueue.flush();
182
- writeQueue.flush();
183
- onFinishQueue.flush();
184
- }
185
-
186
- function makeQueue() {
187
- let next = new Set();
188
- let current = next;
189
- return {
190
- add(fn) {
191
- pendingCount += current == next && !next.has(fn) ? 1 : 0;
192
- next.add(fn);
193
- },
194
-
195
- delete(fn) {
196
- pendingCount -= current == next && next.has(fn) ? 1 : 0;
197
- return next.delete(fn);
198
- },
199
-
200
- flush(arg) {
201
- if (current.size) {
202
- next = new Set();
203
- pendingCount -= current.size;
204
- eachSafely(current, fn => fn(arg) && next.add(fn));
205
- pendingCount += next.size;
206
- current = next;
207
- }
208
- }
209
-
210
- };
211
- }
212
-
213
- function eachSafely(values, each) {
214
- values.forEach(value => {
215
- try {
216
- each(value);
217
- } catch (e) {
218
- raf.catch(e);
219
- }
220
- });
221
- }
222
-
223
- function noop() {}
224
- const defineHidden = (obj, key, value) => Object.defineProperty(obj, key, {
225
- value,
226
- writable: true,
227
- configurable: true
228
- });
229
- const is = {
230
- arr: Array.isArray,
231
- obj: a => !!a && a.constructor.name === 'Object',
232
- fun: a => typeof a === 'function',
233
- str: a => typeof a === 'string',
234
- num: a => typeof a === 'number',
235
- und: a => a === undefined
236
- };
237
- function isEqual(a, b) {
238
- if (is.arr(a)) {
239
- if (!is.arr(b) || a.length !== b.length) return false;
240
-
241
- for (let i = 0; i < a.length; i++) {
242
- if (a[i] !== b[i]) return false;
243
- }
244
-
245
- return true;
246
- }
247
-
248
- return a === b;
249
- }
250
- const each = (obj, fn) => obj.forEach(fn);
251
- function eachProp(obj, fn, ctx) {
252
- if (is.arr(obj)) {
253
- for (let i = 0; i < obj.length; i++) {
254
- fn.call(ctx, obj[i], `${i}`);
255
- }
256
-
257
- return;
258
- }
259
-
260
- for (const key in obj) {
261
- if (obj.hasOwnProperty(key)) {
262
- fn.call(ctx, obj[key], key);
263
- }
264
- }
265
- }
266
- const toArray = a => is.und(a) ? [] : is.arr(a) ? a : [a];
267
- function flush(queue, iterator) {
268
- if (queue.size) {
269
- const items = Array.from(queue);
270
- queue.clear();
271
- each(items, iterator);
272
- }
273
- }
274
- const flushCalls = (queue, ...args) => flush(queue, fn => fn(...args));
275
- const isSSR = () => typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
276
-
277
- let createStringInterpolator$1;
278
- let to;
279
- let colors$1 = null;
280
- let skipAnimation = false;
281
- let willAdvance = noop;
282
- const assign = globals => {
283
- if (globals.to) to = globals.to;
284
- if (globals.now) raf.now = globals.now;
285
- if (globals.colors !== undefined) colors$1 = globals.colors;
286
- if (globals.skipAnimation != null) skipAnimation = globals.skipAnimation;
287
- if (globals.createStringInterpolator) createStringInterpolator$1 = globals.createStringInterpolator;
288
- if (globals.requestAnimationFrame) raf.use(globals.requestAnimationFrame);
289
- if (globals.batchedUpdates) raf.batchedUpdates = globals.batchedUpdates;
290
- if (globals.willAdvance) willAdvance = globals.willAdvance;
291
- if (globals.frameLoop) raf.frameLoop = globals.frameLoop;
292
- };
293
-
294
- var globals = /*#__PURE__*/Object.freeze({
295
- __proto__: null,
296
- get createStringInterpolator () { return createStringInterpolator$1; },
297
- get to () { return to; },
298
- get colors () { return colors$1; },
299
- get skipAnimation () { return skipAnimation; },
300
- get willAdvance () { return willAdvance; },
301
- assign: assign
302
- });
303
-
304
- const startQueue = new Set();
305
- let currentFrame = [];
306
- let prevFrame = [];
307
- let priority = 0;
308
- const frameLoop = {
309
- get idle() {
310
- return !startQueue.size && !currentFrame.length;
311
- },
312
-
313
- start(animation) {
314
- if (priority > animation.priority) {
315
- startQueue.add(animation);
316
- raf.onStart(flushStartQueue);
317
- } else {
318
- startSafely(animation);
319
- raf(advance);
320
- }
321
- },
322
-
323
- advance,
324
-
325
- sort(animation) {
326
- if (priority) {
327
- raf.onFrame(() => frameLoop.sort(animation));
328
- } else {
329
- const prevIndex = currentFrame.indexOf(animation);
330
-
331
- if (~prevIndex) {
332
- currentFrame.splice(prevIndex, 1);
333
- startUnsafely(animation);
334
- }
335
- }
336
- },
337
-
338
- clear() {
339
- currentFrame = [];
340
- startQueue.clear();
341
- }
342
-
343
- };
344
-
345
- function flushStartQueue() {
346
- startQueue.forEach(startSafely);
347
- startQueue.clear();
348
- raf(advance);
349
- }
350
-
351
- function startSafely(animation) {
352
- if (!currentFrame.includes(animation)) startUnsafely(animation);
353
- }
354
-
355
- function startUnsafely(animation) {
356
- currentFrame.splice(findIndex(currentFrame, other => other.priority > animation.priority), 0, animation);
357
- }
358
-
359
- function advance(dt) {
360
- const nextFrame = prevFrame;
361
-
362
- for (let i = 0; i < currentFrame.length; i++) {
363
- const animation = currentFrame[i];
364
- priority = animation.priority;
365
-
366
- if (!animation.idle) {
367
- willAdvance(animation);
368
- animation.advance(dt);
369
-
370
- if (!animation.idle) {
371
- nextFrame.push(animation);
372
- }
373
- }
374
- }
375
-
376
- priority = 0;
377
- prevFrame = currentFrame;
378
- prevFrame.length = 0;
379
- currentFrame = nextFrame;
380
- return currentFrame.length > 0;
381
- }
382
-
383
- function findIndex(arr, test) {
384
- const index = arr.findIndex(test);
385
- return index < 0 ? arr.length : index;
386
- }
387
-
388
- const colors = {
389
- transparent: 0x00000000,
390
- aliceblue: 0xf0f8ffff,
391
- antiquewhite: 0xfaebd7ff,
392
- aqua: 0x00ffffff,
393
- aquamarine: 0x7fffd4ff,
394
- azure: 0xf0ffffff,
395
- beige: 0xf5f5dcff,
396
- bisque: 0xffe4c4ff,
397
- black: 0x000000ff,
398
- blanchedalmond: 0xffebcdff,
399
- blue: 0x0000ffff,
400
- blueviolet: 0x8a2be2ff,
401
- brown: 0xa52a2aff,
402
- burlywood: 0xdeb887ff,
403
- burntsienna: 0xea7e5dff,
404
- cadetblue: 0x5f9ea0ff,
405
- chartreuse: 0x7fff00ff,
406
- chocolate: 0xd2691eff,
407
- coral: 0xff7f50ff,
408
- cornflowerblue: 0x6495edff,
409
- cornsilk: 0xfff8dcff,
410
- crimson: 0xdc143cff,
411
- cyan: 0x00ffffff,
412
- darkblue: 0x00008bff,
413
- darkcyan: 0x008b8bff,
414
- darkgoldenrod: 0xb8860bff,
415
- darkgray: 0xa9a9a9ff,
416
- darkgreen: 0x006400ff,
417
- darkgrey: 0xa9a9a9ff,
418
- darkkhaki: 0xbdb76bff,
419
- darkmagenta: 0x8b008bff,
420
- darkolivegreen: 0x556b2fff,
421
- darkorange: 0xff8c00ff,
422
- darkorchid: 0x9932ccff,
423
- darkred: 0x8b0000ff,
424
- darksalmon: 0xe9967aff,
425
- darkseagreen: 0x8fbc8fff,
426
- darkslateblue: 0x483d8bff,
427
- darkslategray: 0x2f4f4fff,
428
- darkslategrey: 0x2f4f4fff,
429
- darkturquoise: 0x00ced1ff,
430
- darkviolet: 0x9400d3ff,
431
- deeppink: 0xff1493ff,
432
- deepskyblue: 0x00bfffff,
433
- dimgray: 0x696969ff,
434
- dimgrey: 0x696969ff,
435
- dodgerblue: 0x1e90ffff,
436
- firebrick: 0xb22222ff,
437
- floralwhite: 0xfffaf0ff,
438
- forestgreen: 0x228b22ff,
439
- fuchsia: 0xff00ffff,
440
- gainsboro: 0xdcdcdcff,
441
- ghostwhite: 0xf8f8ffff,
442
- gold: 0xffd700ff,
443
- goldenrod: 0xdaa520ff,
444
- gray: 0x808080ff,
445
- green: 0x008000ff,
446
- greenyellow: 0xadff2fff,
447
- grey: 0x808080ff,
448
- honeydew: 0xf0fff0ff,
449
- hotpink: 0xff69b4ff,
450
- indianred: 0xcd5c5cff,
451
- indigo: 0x4b0082ff,
452
- ivory: 0xfffff0ff,
453
- khaki: 0xf0e68cff,
454
- lavender: 0xe6e6faff,
455
- lavenderblush: 0xfff0f5ff,
456
- lawngreen: 0x7cfc00ff,
457
- lemonchiffon: 0xfffacdff,
458
- lightblue: 0xadd8e6ff,
459
- lightcoral: 0xf08080ff,
460
- lightcyan: 0xe0ffffff,
461
- lightgoldenrodyellow: 0xfafad2ff,
462
- lightgray: 0xd3d3d3ff,
463
- lightgreen: 0x90ee90ff,
464
- lightgrey: 0xd3d3d3ff,
465
- lightpink: 0xffb6c1ff,
466
- lightsalmon: 0xffa07aff,
467
- lightseagreen: 0x20b2aaff,
468
- lightskyblue: 0x87cefaff,
469
- lightslategray: 0x778899ff,
470
- lightslategrey: 0x778899ff,
471
- lightsteelblue: 0xb0c4deff,
472
- lightyellow: 0xffffe0ff,
473
- lime: 0x00ff00ff,
474
- limegreen: 0x32cd32ff,
475
- linen: 0xfaf0e6ff,
476
- magenta: 0xff00ffff,
477
- maroon: 0x800000ff,
478
- mediumaquamarine: 0x66cdaaff,
479
- mediumblue: 0x0000cdff,
480
- mediumorchid: 0xba55d3ff,
481
- mediumpurple: 0x9370dbff,
482
- mediumseagreen: 0x3cb371ff,
483
- mediumslateblue: 0x7b68eeff,
484
- mediumspringgreen: 0x00fa9aff,
485
- mediumturquoise: 0x48d1ccff,
486
- mediumvioletred: 0xc71585ff,
487
- midnightblue: 0x191970ff,
488
- mintcream: 0xf5fffaff,
489
- mistyrose: 0xffe4e1ff,
490
- moccasin: 0xffe4b5ff,
491
- navajowhite: 0xffdeadff,
492
- navy: 0x000080ff,
493
- oldlace: 0xfdf5e6ff,
494
- olive: 0x808000ff,
495
- olivedrab: 0x6b8e23ff,
496
- orange: 0xffa500ff,
497
- orangered: 0xff4500ff,
498
- orchid: 0xda70d6ff,
499
- palegoldenrod: 0xeee8aaff,
500
- palegreen: 0x98fb98ff,
501
- paleturquoise: 0xafeeeeff,
502
- palevioletred: 0xdb7093ff,
503
- papayawhip: 0xffefd5ff,
504
- peachpuff: 0xffdab9ff,
505
- peru: 0xcd853fff,
506
- pink: 0xffc0cbff,
507
- plum: 0xdda0ddff,
508
- powderblue: 0xb0e0e6ff,
509
- purple: 0x800080ff,
510
- rebeccapurple: 0x663399ff,
511
- red: 0xff0000ff,
512
- rosybrown: 0xbc8f8fff,
513
- royalblue: 0x4169e1ff,
514
- saddlebrown: 0x8b4513ff,
515
- salmon: 0xfa8072ff,
516
- sandybrown: 0xf4a460ff,
517
- seagreen: 0x2e8b57ff,
518
- seashell: 0xfff5eeff,
519
- sienna: 0xa0522dff,
520
- silver: 0xc0c0c0ff,
521
- skyblue: 0x87ceebff,
522
- slateblue: 0x6a5acdff,
523
- slategray: 0x708090ff,
524
- slategrey: 0x708090ff,
525
- snow: 0xfffafaff,
526
- springgreen: 0x00ff7fff,
527
- steelblue: 0x4682b4ff,
528
- tan: 0xd2b48cff,
529
- teal: 0x008080ff,
530
- thistle: 0xd8bfd8ff,
531
- tomato: 0xff6347ff,
532
- turquoise: 0x40e0d0ff,
533
- violet: 0xee82eeff,
534
- wheat: 0xf5deb3ff,
535
- white: 0xffffffff,
536
- whitesmoke: 0xf5f5f5ff,
537
- yellow: 0xffff00ff,
538
- yellowgreen: 0x9acd32ff
539
- };
540
-
541
- const NUMBER = '[-+]?\\d*\\.?\\d+';
542
- const PERCENTAGE = NUMBER + '%';
543
-
544
- function call(...parts) {
545
- return '\\(\\s*(' + parts.join(')\\s*,\\s*(') + ')\\s*\\)';
546
- }
547
-
548
- const rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
549
- const rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
550
- const hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
551
- const hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
552
- const hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
553
- const hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
554
- const hex6 = /^#([0-9a-fA-F]{6})$/;
555
- const hex8 = /^#([0-9a-fA-F]{8})$/;
556
-
557
- function normalizeColor(color) {
558
- let match;
559
-
560
- if (typeof color === 'number') {
561
- return color >>> 0 === color && color >= 0 && color <= 0xffffffff ? color : null;
562
- }
563
-
564
- if (match = hex6.exec(color)) return parseInt(match[1] + 'ff', 16) >>> 0;
565
-
566
- if (colors$1 && colors$1[color] !== undefined) {
567
- return colors$1[color];
568
- }
569
-
570
- if (match = rgb.exec(color)) {
571
- return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 0x000000ff) >>> 0;
572
- }
573
-
574
- if (match = rgba.exec(color)) {
575
- return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
576
- }
577
-
578
- if (match = hex3.exec(color)) {
579
- return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + 'ff', 16) >>> 0;
580
- }
581
-
582
- if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;
583
-
584
- if (match = hex4.exec(color)) {
585
- return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
586
- }
587
-
588
- if (match = hsl.exec(color)) {
589
- return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 0x000000ff) >>> 0;
590
- }
591
-
592
- if (match = hsla.exec(color)) {
593
- return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
594
- }
595
-
596
- return null;
597
- }
598
-
599
- function hue2rgb(p, q, t) {
600
- if (t < 0) t += 1;
601
- if (t > 1) t -= 1;
602
- if (t < 1 / 6) return p + (q - p) * 6 * t;
603
- if (t < 1 / 2) return q;
604
- if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
605
- return p;
606
- }
607
-
608
- function hslToRgb(h, s, l) {
609
- const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
610
- const p = 2 * l - q;
611
- const r = hue2rgb(p, q, h + 1 / 3);
612
- const g = hue2rgb(p, q, h);
613
- const b = hue2rgb(p, q, h - 1 / 3);
614
- return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
615
- }
616
-
617
- function parse255(str) {
618
- const int = parseInt(str, 10);
619
- if (int < 0) return 0;
620
- if (int > 255) return 255;
621
- return int;
622
- }
623
-
624
- function parse360(str) {
625
- const int = parseFloat(str);
626
- return (int % 360 + 360) % 360 / 360;
627
- }
628
-
629
- function parse1(str) {
630
- const num = parseFloat(str);
631
- if (num < 0) return 0;
632
- if (num > 1) return 255;
633
- return Math.round(num * 255);
634
- }
635
-
636
- function parsePercentage(str) {
637
- const int = parseFloat(str);
638
- if (int < 0) return 0;
639
- if (int > 100) return 1;
640
- return int / 100;
641
- }
642
-
643
- function colorToRgba(input) {
644
- let int32Color = normalizeColor(input);
645
- if (int32Color === null) return input;
646
- int32Color = int32Color || 0;
647
- let r = (int32Color & 0xff000000) >>> 24;
648
- let g = (int32Color & 0x00ff0000) >>> 16;
649
- let b = (int32Color & 0x0000ff00) >>> 8;
650
- let a = (int32Color & 0x000000ff) / 255;
651
- return `rgba(${r}, ${g}, ${b}, ${a})`;
652
- }
653
-
654
- const createInterpolator = (range, output, extrapolate) => {
655
- if (is.fun(range)) {
656
- return range;
657
- }
658
-
659
- if (is.arr(range)) {
660
- return createInterpolator({
661
- range,
662
- output: output,
663
- extrapolate
664
- });
665
- }
666
-
667
- if (is.str(range.output[0])) {
668
- return createStringInterpolator$1(range);
669
- }
670
-
671
- const config = range;
672
- const outputRange = config.output;
673
- const inputRange = config.range || [0, 1];
674
- const extrapolateLeft = config.extrapolateLeft || config.extrapolate || 'extend';
675
- const extrapolateRight = config.extrapolateRight || config.extrapolate || 'extend';
676
-
677
- const easing = config.easing || (t => t);
678
-
679
- return input => {
680
- const range = findRange(input, inputRange);
681
- return interpolate(input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, config.map);
682
- };
683
- };
684
-
685
- function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
686
- let result = map ? map(input) : input;
687
-
688
- if (result < inputMin) {
689
- if (extrapolateLeft === 'identity') return result;else if (extrapolateLeft === 'clamp') result = inputMin;
690
- }
691
-
692
- if (result > inputMax) {
693
- if (extrapolateRight === 'identity') return result;else if (extrapolateRight === 'clamp') result = inputMax;
694
- }
695
-
696
- if (outputMin === outputMax) return outputMin;
697
- if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;
698
- if (inputMin === -Infinity) result = -result;else if (inputMax === Infinity) result = result - inputMin;else result = (result - inputMin) / (inputMax - inputMin);
699
- result = easing(result);
700
- if (outputMin === -Infinity) result = -result;else if (outputMax === Infinity) result = result + outputMin;else result = result * (outputMax - outputMin) + outputMin;
701
- return result;
702
- }
703
-
704
- function findRange(input, inputRange) {
705
- for (var i = 1; i < inputRange.length - 1; ++i) if (inputRange[i] >= input) break;
706
-
707
- return i - 1;
708
- }
709
-
710
- function _extends$2() {
711
- _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
712
- for (var i = 1; i < arguments.length; i++) {
713
- var source = arguments[i];
714
-
715
- for (var key in source) {
716
- if (Object.prototype.hasOwnProperty.call(source, key)) {
717
- target[key] = source[key];
718
- }
719
- }
720
- }
721
-
722
- return target;
723
- };
724
- return _extends$2.apply(this, arguments);
725
- }
726
-
727
- const $get = Symbol.for('FluidValue.get');
728
- const $observers = Symbol.for('FluidValue.observers');
729
-
730
- const hasFluidValue = arg => Boolean(arg && arg[$get]);
731
-
732
- const getFluidValue = arg => arg && arg[$get] ? arg[$get]() : arg;
733
-
734
- const getFluidObservers = target => target[$observers] || null;
735
-
736
- function callFluidObserver(observer, event) {
737
- if (observer.eventObserved) {
738
- observer.eventObserved(event);
739
- } else {
740
- observer(event);
741
- }
742
- }
743
-
744
- function callFluidObservers(target, event) {
745
- let observers = target[$observers];
746
-
747
- if (observers) {
748
- observers.forEach(observer => {
749
- callFluidObserver(observer, event);
750
- });
751
- }
752
- }
753
-
754
- class FluidValue {
755
- constructor(get) {
756
- this[$get] = void 0;
757
- this[$observers] = void 0;
758
-
759
- if (!get && !(get = this.get)) {
760
- throw Error('Unknown getter');
761
- }
762
-
763
- setFluidGetter(this, get);
764
- }
765
-
766
- }
767
-
768
- const setFluidGetter = (target, get) => setHidden(target, $get, get);
769
-
770
- function addFluidObserver(target, observer) {
771
- if (target[$get]) {
772
- let observers = target[$observers];
773
-
774
- if (!observers) {
775
- setHidden(target, $observers, observers = new Set());
776
- }
777
-
778
- if (!observers.has(observer)) {
779
- observers.add(observer);
780
-
781
- if (target.observerAdded) {
782
- target.observerAdded(observers.size, observer);
783
- }
784
- }
785
- }
786
-
787
- return observer;
788
- }
789
-
790
- function removeFluidObserver(target, observer) {
791
- let observers = target[$observers];
792
-
793
- if (observers && observers.has(observer)) {
794
- const count = observers.size - 1;
795
-
796
- if (count) {
797
- observers.delete(observer);
798
- } else {
799
- target[$observers] = null;
800
- }
801
-
802
- if (target.observerRemoved) {
803
- target.observerRemoved(count, observer);
804
- }
805
- }
806
- }
807
-
808
- const setHidden = (target, key, value) => Object.defineProperty(target, key, {
809
- value,
810
- writable: true,
811
- configurable: true
812
- });
813
-
814
- const numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
815
- const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
816
- const unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, 'i');
817
- const rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
818
- const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
819
-
820
- const variableToRgba = input => {
821
- const [token, fallback] = parseCSSVariable(input);
822
-
823
- if (!token || isSSR()) {
824
- return input;
825
- }
826
-
827
- const value = window.getComputedStyle(document.documentElement).getPropertyValue(token);
828
-
829
- if (value) {
830
- return value.trim();
831
- } else if (fallback && fallback.startsWith('--')) {
832
- const _value = window.getComputedStyle(document.documentElement).getPropertyValue(fallback);
833
-
834
- if (_value) {
835
- return _value;
836
- } else {
837
- return input;
838
- }
839
- } else if (fallback && cssVariableRegex.test(fallback)) {
840
- return variableToRgba(fallback);
841
- } else if (fallback) {
842
- return fallback;
843
- }
844
-
845
- return input;
846
- };
847
-
848
- const parseCSSVariable = current => {
849
- const match = cssVariableRegex.exec(current);
850
- if (!match) return [,];
851
- const [, token, fallback] = match;
852
- return [token, fallback];
853
- };
854
-
855
- let namedColorRegex;
856
-
857
- const rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
858
-
859
- const createStringInterpolator = config => {
860
- if (!namedColorRegex) namedColorRegex = colors$1 ? new RegExp(`(${Object.keys(colors$1).join('|')})(?!\\w)`, 'g') : /^\b$/;
861
- const output = config.output.map(value => {
862
- return getFluidValue(value).replace(cssVariableRegex, variableToRgba).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba);
863
- });
864
- const keyframes = output.map(value => value.match(numberRegex).map(Number));
865
- const outputRanges = keyframes[0].map((_, i) => keyframes.map(values => {
866
- if (!(i in values)) {
867
- throw Error('The arity of each "output" value must be equal');
868
- }
869
-
870
- return values[i];
871
- }));
872
- const interpolators = outputRanges.map(output => createInterpolator(_extends$2({}, config, {
873
- output
874
- })));
875
- return input => {
876
- var _output$find;
877
-
878
- const missingUnit = !unitRegex.test(output[0]) && ((_output$find = output.find(value => unitRegex.test(value))) == null ? void 0 : _output$find.replace(numberRegex, ''));
879
- let i = 0;
880
- return output[0].replace(numberRegex, () => `${interpolators[i++](input)}${missingUnit || ''}`).replace(rgbaRegex, rgbaRound);
881
- };
882
- };
883
-
884
- const prefix = 'react-spring: ';
885
-
886
- const once = fn => {
887
- const func = fn;
888
- let called = false;
889
-
890
- if (typeof func != 'function') {
891
- throw new TypeError(`${prefix}once requires a function parameter`);
892
- }
893
-
894
- return (...args) => {
895
- if (!called) {
896
- func(...args);
897
- called = true;
898
- }
899
- };
900
- };
901
-
902
- const warnInterpolate = once(console.warn);
903
- function deprecateInterpolate() {
904
- warnInterpolate(`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`);
905
- }
906
- const warnDirectCall = once(console.warn);
907
- function deprecateDirectCall() {
908
- warnDirectCall(`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`);
909
- }
910
-
911
- function isAnimatedString(value) {
912
- return is.str(value) && (value[0] == '#' || /\d/.test(value) || !isSSR() && cssVariableRegex.test(value) || value in (colors$1 || {}));
913
- }
914
-
915
- const useIsomorphicLayoutEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
916
-
917
- const useIsMounted = () => {
918
- const isMounted = React.useRef(false);
919
- useIsomorphicLayoutEffect(() => {
920
- isMounted.current = true;
921
- return () => {
922
- isMounted.current = false;
923
- };
924
- }, []);
925
- return isMounted;
926
- };
927
-
928
- function useForceUpdate() {
929
- const update = React.useState()[1];
930
- const isMounted = useIsMounted();
931
- return () => {
932
- if (isMounted.current) {
933
- update(Math.random());
934
- }
935
- };
936
- }
937
-
938
- function useMemoOne(getResult, inputs) {
939
- const [initial] = React.useState(() => ({
940
- inputs,
941
- result: getResult()
942
- }));
943
- const committed = React.useRef();
944
- const prevCache = committed.current;
945
- let cache = prevCache;
946
-
947
- if (cache) {
948
- const useCache = Boolean(inputs && cache.inputs && areInputsEqual(inputs, cache.inputs));
949
-
950
- if (!useCache) {
951
- cache = {
952
- inputs,
953
- result: getResult()
954
- };
955
- }
956
- } else {
957
- cache = initial;
958
- }
959
-
960
- React.useEffect(() => {
961
- committed.current = cache;
962
-
963
- if (prevCache == initial) {
964
- initial.inputs = initial.result = undefined;
965
- }
966
- }, [cache]);
967
- return cache.result;
968
- }
969
-
970
- function areInputsEqual(next, prev) {
971
- if (next.length !== prev.length) {
972
- return false;
973
- }
974
-
975
- for (let i = 0; i < next.length; i++) {
976
- if (next[i] !== prev[i]) {
977
- return false;
978
- }
979
- }
980
-
981
- return true;
982
- }
983
-
984
- const useOnce = effect => React.useEffect(effect, emptyDeps);
985
- const emptyDeps = [];
986
-
987
- function usePrev(value) {
988
- const prevRef = React.useRef();
989
- React.useEffect(() => {
990
- prevRef.current = value;
991
- });
992
- return prevRef.current;
993
- }
994
-
995
- const $node = Symbol.for('Animated:node');
996
- const isAnimated = value => !!value && value[$node] === value;
997
- const getAnimated = owner => owner && owner[$node];
998
- const setAnimated = (owner, node) => defineHidden(owner, $node, node);
999
- const getPayload = owner => owner && owner[$node] && owner[$node].getPayload();
1000
- class Animated {
1001
- constructor() {
1002
- this.payload = void 0;
1003
- setAnimated(this, this);
1004
- }
1005
-
1006
- getPayload() {
1007
- return this.payload || [];
1008
- }
1009
-
1010
- }
1011
-
1012
- class AnimatedValue extends Animated {
1013
- constructor(_value) {
1014
- super();
1015
- this.done = true;
1016
- this.elapsedTime = void 0;
1017
- this.lastPosition = void 0;
1018
- this.lastVelocity = void 0;
1019
- this.v0 = void 0;
1020
- this.durationProgress = 0;
1021
- this._value = _value;
1022
-
1023
- if (is.num(this._value)) {
1024
- this.lastPosition = this._value;
1025
- }
1026
- }
1027
-
1028
- static create(value) {
1029
- return new AnimatedValue(value);
1030
- }
1031
-
1032
- getPayload() {
1033
- return [this];
1034
- }
1035
-
1036
- getValue() {
1037
- return this._value;
1038
- }
1039
-
1040
- setValue(value, step) {
1041
- if (is.num(value)) {
1042
- this.lastPosition = value;
1043
-
1044
- if (step) {
1045
- value = Math.round(value / step) * step;
1046
-
1047
- if (this.done) {
1048
- this.lastPosition = value;
1049
- }
1050
- }
1051
- }
1052
-
1053
- if (this._value === value) {
1054
- return false;
1055
- }
1056
-
1057
- this._value = value;
1058
- return true;
1059
- }
1060
-
1061
- reset() {
1062
- const {
1063
- done
1064
- } = this;
1065
- this.done = false;
1066
-
1067
- if (is.num(this._value)) {
1068
- this.elapsedTime = 0;
1069
- this.durationProgress = 0;
1070
- this.lastPosition = this._value;
1071
- if (done) this.lastVelocity = null;
1072
- this.v0 = null;
1073
- }
1074
- }
1075
-
1076
- }
1077
-
1078
- class AnimatedString extends AnimatedValue {
1079
- constructor(value) {
1080
- super(0);
1081
- this._string = null;
1082
- this._toString = void 0;
1083
- this._toString = createInterpolator({
1084
- output: [value, value]
1085
- });
1086
- }
1087
-
1088
- static create(value) {
1089
- return new AnimatedString(value);
1090
- }
1091
-
1092
- getValue() {
1093
- let value = this._string;
1094
- return value == null ? this._string = this._toString(this._value) : value;
1095
- }
1096
-
1097
- setValue(value) {
1098
- if (is.str(value)) {
1099
- if (value == this._string) {
1100
- return false;
1101
- }
1102
-
1103
- this._string = value;
1104
- this._value = 1;
1105
- } else if (super.setValue(value)) {
1106
- this._string = null;
1107
- } else {
1108
- return false;
1109
- }
1110
-
1111
- return true;
1112
- }
1113
-
1114
- reset(goal) {
1115
- if (goal) {
1116
- this._toString = createInterpolator({
1117
- output: [this.getValue(), goal]
1118
- });
1119
- }
1120
-
1121
- this._value = 0;
1122
- super.reset();
1123
- }
1124
-
1125
- }
1126
-
1127
- const TreeContext = {
1128
- dependencies: null
1129
- };
1130
-
1131
- class AnimatedObject extends Animated {
1132
- constructor(source) {
1133
- super();
1134
- this.source = source;
1135
- this.setValue(source);
1136
- }
1137
-
1138
- getValue(animated) {
1139
- const values = {};
1140
- eachProp(this.source, (source, key) => {
1141
- if (isAnimated(source)) {
1142
- values[key] = source.getValue(animated);
1143
- } else if (hasFluidValue(source)) {
1144
- values[key] = getFluidValue(source);
1145
- } else if (!animated) {
1146
- values[key] = source;
1147
- }
1148
- });
1149
- return values;
1150
- }
1151
-
1152
- setValue(source) {
1153
- this.source = source;
1154
- this.payload = this._makePayload(source);
1155
- }
1156
-
1157
- reset() {
1158
- if (this.payload) {
1159
- each(this.payload, node => node.reset());
1160
- }
1161
- }
1162
-
1163
- _makePayload(source) {
1164
- if (source) {
1165
- const payload = new Set();
1166
- eachProp(source, this._addToPayload, payload);
1167
- return Array.from(payload);
1168
- }
1169
- }
1170
-
1171
- _addToPayload(source) {
1172
- if (TreeContext.dependencies && hasFluidValue(source)) {
1173
- TreeContext.dependencies.add(source);
1174
- }
1175
-
1176
- const payload = getPayload(source);
1177
-
1178
- if (payload) {
1179
- each(payload, node => this.add(node));
1180
- }
1181
- }
1182
-
1183
- }
1184
-
1185
- class AnimatedArray extends AnimatedObject {
1186
- constructor(source) {
1187
- super(source);
1188
- }
1189
-
1190
- static create(source) {
1191
- return new AnimatedArray(source);
1192
- }
1193
-
1194
- getValue() {
1195
- return this.source.map(node => node.getValue());
1196
- }
1197
-
1198
- setValue(source) {
1199
- const payload = this.getPayload();
1200
-
1201
- if (source.length == payload.length) {
1202
- return payload.map((node, i) => node.setValue(source[i])).some(Boolean);
1203
- }
1204
-
1205
- super.setValue(source.map(makeAnimated));
1206
- return true;
1207
- }
1208
-
1209
- }
1210
-
1211
- function makeAnimated(value) {
1212
- const nodeType = isAnimatedString(value) ? AnimatedString : AnimatedValue;
1213
- return nodeType.create(value);
1214
- }
1215
-
1216
- function getAnimatedType(value) {
1217
- const parentNode = getAnimated(value);
1218
- return parentNode ? parentNode.constructor : is.arr(value) ? AnimatedArray : isAnimatedString(value) ? AnimatedString : AnimatedValue;
1219
- }
1220
-
1221
- function _extends$1() {
1222
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
1223
- for (var i = 1; i < arguments.length; i++) {
1224
- var source = arguments[i];
1225
-
1226
- for (var key in source) {
1227
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1228
- target[key] = source[key];
1229
- }
1230
- }
1231
- }
1232
-
1233
- return target;
1234
- };
1235
- return _extends$1.apply(this, arguments);
1236
- }
1237
-
1238
- const withAnimated = (Component, host) => {
1239
- const hasInstance = !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent;
1240
- return React.forwardRef((givenProps, givenRef) => {
1241
- const instanceRef = React.useRef(null);
1242
- const ref = hasInstance && React.useCallback(value => {
1243
- instanceRef.current = updateRef(givenRef, value);
1244
- }, [givenRef]);
1245
- const [props, deps] = getAnimatedState(givenProps, host);
1246
- const forceUpdate = useForceUpdate();
1247
-
1248
- const callback = () => {
1249
- const instance = instanceRef.current;
1250
-
1251
- if (hasInstance && !instance) {
1252
- return;
1253
- }
1254
-
1255
- const didUpdate = instance ? host.applyAnimatedValues(instance, props.getValue(true)) : false;
1256
-
1257
- if (didUpdate === false) {
1258
- forceUpdate();
1259
- }
1260
- };
1261
-
1262
- const observer = new PropsObserver(callback, deps);
1263
- const observerRef = React.useRef();
1264
- useIsomorphicLayoutEffect(() => {
1265
- observerRef.current = observer;
1266
- each(deps, dep => addFluidObserver(dep, observer));
1267
- return () => {
1268
- if (observerRef.current) {
1269
- each(observerRef.current.deps, dep => removeFluidObserver(dep, observerRef.current));
1270
- raf.cancel(observerRef.current.update);
1271
- }
1272
- };
1273
- });
1274
- React.useEffect(callback, []);
1275
- useOnce(() => () => {
1276
- const observer = observerRef.current;
1277
- each(observer.deps, dep => removeFluidObserver(dep, observer));
1278
- });
1279
- const usedProps = host.getComponentProps(props.getValue());
1280
- return React__namespace.createElement(Component, _extends$1({}, usedProps, {
1281
- ref: ref
1282
- }));
1283
- });
1284
- };
1285
-
1286
- class PropsObserver {
1287
- constructor(update, deps) {
1288
- this.update = update;
1289
- this.deps = deps;
1290
- }
1291
-
1292
- eventObserved(event) {
1293
- if (event.type == 'change') {
1294
- raf.write(this.update);
1295
- }
1296
- }
1297
-
1298
- }
1299
-
1300
- function getAnimatedState(props, host) {
1301
- const dependencies = new Set();
1302
- TreeContext.dependencies = dependencies;
1303
- if (props.style) props = _extends$1({}, props, {
1304
- style: host.createAnimatedStyle(props.style)
1305
- });
1306
- props = new AnimatedObject(props);
1307
- TreeContext.dependencies = null;
1308
- return [props, dependencies];
1309
- }
1310
-
1311
- function updateRef(ref, value) {
1312
- if (ref) {
1313
- if (is.fun(ref)) ref(value);else ref.current = value;
1314
- }
1315
-
1316
- return value;
1317
- }
1318
-
1319
- const cacheKey = Symbol.for('AnimatedComponent');
1320
- const createHost = (components, {
1321
- applyAnimatedValues: _applyAnimatedValues = () => false,
1322
- createAnimatedStyle: _createAnimatedStyle = style => new AnimatedObject(style),
1323
- getComponentProps: _getComponentProps = props => props
1324
- } = {}) => {
1325
- const hostConfig = {
1326
- applyAnimatedValues: _applyAnimatedValues,
1327
- createAnimatedStyle: _createAnimatedStyle,
1328
- getComponentProps: _getComponentProps
1329
- };
1330
-
1331
- const animated = Component => {
1332
- const displayName = getDisplayName(Component) || 'Anonymous';
1333
-
1334
- if (is.str(Component)) {
1335
- Component = animated[Component] || (animated[Component] = withAnimated(Component, hostConfig));
1336
- } else {
1337
- Component = Component[cacheKey] || (Component[cacheKey] = withAnimated(Component, hostConfig));
1338
- }
1339
-
1340
- Component.displayName = `Animated(${displayName})`;
1341
- return Component;
1342
- };
1343
-
1344
- eachProp(components, (Component, key) => {
1345
- if (is.arr(components)) {
1346
- key = getDisplayName(Component);
1347
- }
1348
-
1349
- animated[key] = animated(Component);
1350
- });
1351
- return {
1352
- animated
1353
- };
1354
- };
1355
-
1356
- const getDisplayName = arg => is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;
1357
-
1358
- function _extends() {
1359
- _extends = Object.assign ? Object.assign.bind() : function (target) {
1360
- for (var i = 1; i < arguments.length; i++) {
1361
- var source = arguments[i];
1362
-
1363
- for (var key in source) {
1364
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1365
- target[key] = source[key];
1366
- }
1367
- }
1368
- }
1369
-
1370
- return target;
1371
- };
1372
- return _extends.apply(this, arguments);
1373
- }
1374
-
1375
- function callProp(value, ...args) {
1376
- return is.fun(value) ? value(...args) : value;
1377
- }
1378
- const matchProp = (value, key) => value === true || !!(key && value && (is.fun(value) ? value(key) : toArray(value).includes(key)));
1379
- const resolveProp = (prop, key) => is.obj(prop) ? key && prop[key] : prop;
1380
- const getDefaultProp = (props, key) => props.default === true ? props[key] : props.default ? props.default[key] : undefined;
1381
-
1382
- const noopTransform = value => value;
1383
-
1384
- const getDefaultProps = (props, transform = noopTransform) => {
1385
- let keys = DEFAULT_PROPS;
1386
-
1387
- if (props.default && props.default !== true) {
1388
- props = props.default;
1389
- keys = Object.keys(props);
1390
- }
1391
-
1392
- const defaults = {};
1393
-
1394
- for (const key of keys) {
1395
- const value = transform(props[key], key);
1396
-
1397
- if (!is.und(value)) {
1398
- defaults[key] = value;
1399
- }
1400
- }
1401
-
1402
- return defaults;
1403
- };
1404
- const DEFAULT_PROPS = ['config', 'onProps', 'onStart', 'onChange', 'onPause', 'onResume', 'onRest'];
1405
- const RESERVED_PROPS = {
1406
- config: 1,
1407
- from: 1,
1408
- to: 1,
1409
- ref: 1,
1410
- loop: 1,
1411
- reset: 1,
1412
- pause: 1,
1413
- cancel: 1,
1414
- reverse: 1,
1415
- immediate: 1,
1416
- default: 1,
1417
- delay: 1,
1418
- onProps: 1,
1419
- onStart: 1,
1420
- onChange: 1,
1421
- onPause: 1,
1422
- onResume: 1,
1423
- onRest: 1,
1424
- onResolve: 1,
1425
- items: 1,
1426
- trail: 1,
1427
- sort: 1,
1428
- expires: 1,
1429
- initial: 1,
1430
- enter: 1,
1431
- update: 1,
1432
- leave: 1,
1433
- children: 1,
1434
- onDestroyed: 1,
1435
- keys: 1,
1436
- callId: 1,
1437
- parentId: 1
1438
- };
1439
-
1440
- function getForwardProps(props) {
1441
- const forward = {};
1442
- let count = 0;
1443
- eachProp(props, (value, prop) => {
1444
- if (!RESERVED_PROPS[prop]) {
1445
- forward[prop] = value;
1446
- count++;
1447
- }
1448
- });
1449
-
1450
- if (count) {
1451
- return forward;
1452
- }
1453
- }
1454
-
1455
- function inferTo(props) {
1456
- const to = getForwardProps(props);
1457
-
1458
- if (to) {
1459
- const out = {
1460
- to
1461
- };
1462
- eachProp(props, (val, key) => key in to || (out[key] = val));
1463
- return out;
1464
- }
1465
-
1466
- return _extends({}, props);
1467
- }
1468
- function computeGoal(value) {
1469
- value = getFluidValue(value);
1470
- return is.arr(value) ? value.map(computeGoal) : isAnimatedString(value) ? globals.createStringInterpolator({
1471
- range: [0, 1],
1472
- output: [value, value]
1473
- })(1) : value;
1474
- }
1475
- function hasProps(props) {
1476
- for (const _ in props) return true;
1477
-
1478
- return false;
1479
- }
1480
- function isAsyncTo(to) {
1481
- return is.fun(to) || is.arr(to) && is.obj(to[0]);
1482
- }
1483
- function detachRefs(ctrl, ref) {
1484
- var _ctrl$ref;
1485
-
1486
- (_ctrl$ref = ctrl.ref) == null ? void 0 : _ctrl$ref.delete(ctrl);
1487
- ref == null ? void 0 : ref.delete(ctrl);
1488
- }
1489
- function replaceRef(ctrl, ref) {
1490
- if (ref && ctrl.ref !== ref) {
1491
- var _ctrl$ref2;
1492
-
1493
- (_ctrl$ref2 = ctrl.ref) == null ? void 0 : _ctrl$ref2.delete(ctrl);
1494
- ref.add(ctrl);
1495
- ctrl.ref = ref;
1496
- }
1497
- }
1498
-
1499
- const config = {
1500
- default: {
1501
- tension: 170,
1502
- friction: 26
1503
- },
1504
- gentle: {
1505
- tension: 120,
1506
- friction: 14
1507
- },
1508
- wobbly: {
1509
- tension: 180,
1510
- friction: 12
1511
- },
1512
- stiff: {
1513
- tension: 210,
1514
- friction: 20
1515
- },
1516
- slow: {
1517
- tension: 280,
1518
- friction: 60
1519
- },
1520
- molasses: {
1521
- tension: 280,
1522
- friction: 120
1523
- }
1524
- };
1525
- const c1 = 1.70158;
1526
- const c2 = c1 * 1.525;
1527
- const c3 = c1 + 1;
1528
- const c4 = 2 * Math.PI / 3;
1529
- const c5 = 2 * Math.PI / 4.5;
1530
-
1531
- const bounceOut = x => {
1532
- const n1 = 7.5625;
1533
- const d1 = 2.75;
1534
-
1535
- if (x < 1 / d1) {
1536
- return n1 * x * x;
1537
- } else if (x < 2 / d1) {
1538
- return n1 * (x -= 1.5 / d1) * x + 0.75;
1539
- } else if (x < 2.5 / d1) {
1540
- return n1 * (x -= 2.25 / d1) * x + 0.9375;
1541
- } else {
1542
- return n1 * (x -= 2.625 / d1) * x + 0.984375;
1543
- }
1544
- };
1545
-
1546
- const easings = {
1547
- linear: x => x,
1548
- easeInQuad: x => x * x,
1549
- easeOutQuad: x => 1 - (1 - x) * (1 - x),
1550
- easeInOutQuad: x => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
1551
- easeInCubic: x => x * x * x,
1552
- easeOutCubic: x => 1 - Math.pow(1 - x, 3),
1553
- easeInOutCubic: x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
1554
- easeInQuart: x => x * x * x * x,
1555
- easeOutQuart: x => 1 - Math.pow(1 - x, 4),
1556
- easeInOutQuart: x => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
1557
- easeInQuint: x => x * x * x * x * x,
1558
- easeOutQuint: x => 1 - Math.pow(1 - x, 5),
1559
- easeInOutQuint: x => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
1560
- easeInSine: x => 1 - Math.cos(x * Math.PI / 2),
1561
- easeOutSine: x => Math.sin(x * Math.PI / 2),
1562
- easeInOutSine: x => -(Math.cos(Math.PI * x) - 1) / 2,
1563
- easeInExpo: x => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
1564
- easeOutExpo: x => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
1565
- easeInOutExpo: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
1566
- easeInCirc: x => 1 - Math.sqrt(1 - Math.pow(x, 2)),
1567
- easeOutCirc: x => Math.sqrt(1 - Math.pow(x - 1, 2)),
1568
- easeInOutCirc: x => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
1569
- easeInBack: x => c3 * x * x * x - c1 * x * x,
1570
- easeOutBack: x => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
1571
- easeInOutBack: x => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
1572
- easeInElastic: x => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
1573
- easeOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
1574
- easeInOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
1575
- easeInBounce: x => 1 - bounceOut(1 - x),
1576
- easeOutBounce: bounceOut,
1577
- easeInOutBounce: x => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2
1578
- };
1579
-
1580
- const defaults = _extends({}, config.default, {
1581
- mass: 1,
1582
- damping: 1,
1583
- easing: easings.linear,
1584
- clamp: false
1585
- });
1586
-
1587
- class AnimationConfig {
1588
- constructor() {
1589
- this.tension = void 0;
1590
- this.friction = void 0;
1591
- this.frequency = void 0;
1592
- this.damping = void 0;
1593
- this.mass = void 0;
1594
- this.velocity = 0;
1595
- this.restVelocity = void 0;
1596
- this.precision = void 0;
1597
- this.progress = void 0;
1598
- this.duration = void 0;
1599
- this.easing = void 0;
1600
- this.clamp = void 0;
1601
- this.bounce = void 0;
1602
- this.decay = void 0;
1603
- this.round = void 0;
1604
- Object.assign(this, defaults);
1605
- }
1606
-
1607
- }
1608
- function mergeConfig(config, newConfig, defaultConfig) {
1609
- if (defaultConfig) {
1610
- defaultConfig = _extends({}, defaultConfig);
1611
- sanitizeConfig(defaultConfig, newConfig);
1612
- newConfig = _extends({}, defaultConfig, newConfig);
1613
- }
1614
-
1615
- sanitizeConfig(config, newConfig);
1616
- Object.assign(config, newConfig);
1617
-
1618
- for (const key in defaults) {
1619
- if (config[key] == null) {
1620
- config[key] = defaults[key];
1621
- }
1622
- }
1623
-
1624
- let {
1625
- mass,
1626
- frequency,
1627
- damping
1628
- } = config;
1629
-
1630
- if (!is.und(frequency)) {
1631
- if (frequency < 0.01) frequency = 0.01;
1632
- if (damping < 0) damping = 0;
1633
- config.tension = Math.pow(2 * Math.PI / frequency, 2) * mass;
1634
- config.friction = 4 * Math.PI * damping * mass / frequency;
1635
- }
1636
-
1637
- return config;
1638
- }
1639
-
1640
- function sanitizeConfig(config, props) {
1641
- if (!is.und(props.decay)) {
1642
- config.duration = undefined;
1643
- } else {
1644
- const isTensionConfig = !is.und(props.tension) || !is.und(props.friction);
1645
-
1646
- if (isTensionConfig || !is.und(props.frequency) || !is.und(props.damping) || !is.und(props.mass)) {
1647
- config.duration = undefined;
1648
- config.decay = undefined;
1649
- }
1650
-
1651
- if (isTensionConfig) {
1652
- config.frequency = undefined;
1653
- }
1654
- }
1655
- }
1656
-
1657
- const emptyArray = [];
1658
- class Animation {
1659
- constructor() {
1660
- this.changed = false;
1661
- this.values = emptyArray;
1662
- this.toValues = null;
1663
- this.fromValues = emptyArray;
1664
- this.to = void 0;
1665
- this.from = void 0;
1666
- this.config = new AnimationConfig();
1667
- this.immediate = false;
1668
- }
1669
-
1670
- }
1671
-
1672
- function scheduleProps(callId, {
1673
- key,
1674
- props,
1675
- defaultProps,
1676
- state,
1677
- actions
1678
- }) {
1679
- return new Promise((resolve, reject) => {
1680
- var _props$cancel;
1681
-
1682
- let delay;
1683
- let timeout;
1684
- let cancel = matchProp((_props$cancel = props.cancel) != null ? _props$cancel : defaultProps == null ? void 0 : defaultProps.cancel, key);
1685
-
1686
- if (cancel) {
1687
- onStart();
1688
- } else {
1689
- if (!is.und(props.pause)) {
1690
- state.paused = matchProp(props.pause, key);
1691
- }
1692
-
1693
- let pause = defaultProps == null ? void 0 : defaultProps.pause;
1694
-
1695
- if (pause !== true) {
1696
- pause = state.paused || matchProp(pause, key);
1697
- }
1698
-
1699
- delay = callProp(props.delay || 0, key);
1700
-
1701
- if (pause) {
1702
- state.resumeQueue.add(onResume);
1703
- actions.pause();
1704
- } else {
1705
- actions.resume();
1706
- onResume();
1707
- }
1708
- }
1709
-
1710
- function onPause() {
1711
- state.resumeQueue.add(onResume);
1712
- state.timeouts.delete(timeout);
1713
- timeout.cancel();
1714
- delay = timeout.time - raf.now();
1715
- }
1716
-
1717
- function onResume() {
1718
- if (delay > 0 && !globals.skipAnimation) {
1719
- state.delayed = true;
1720
- timeout = raf.setTimeout(onStart, delay);
1721
- state.pauseQueue.add(onPause);
1722
- state.timeouts.add(timeout);
1723
- } else {
1724
- onStart();
1725
- }
1726
- }
1727
-
1728
- function onStart() {
1729
- if (state.delayed) {
1730
- state.delayed = false;
1731
- }
1732
-
1733
- state.pauseQueue.delete(onPause);
1734
- state.timeouts.delete(timeout);
1735
-
1736
- if (callId <= (state.cancelId || 0)) {
1737
- cancel = true;
1738
- }
1739
-
1740
- try {
1741
- actions.start(_extends({}, props, {
1742
- callId,
1743
- cancel
1744
- }), resolve);
1745
- } catch (err) {
1746
- reject(err);
1747
- }
1748
- }
1749
- });
1750
- }
1751
-
1752
- const getCombinedResult = (target, results) => results.length == 1 ? results[0] : results.some(result => result.cancelled) ? getCancelledResult(target.get()) : results.every(result => result.noop) ? getNoopResult(target.get()) : getFinishedResult(target.get(), results.every(result => result.finished));
1753
- const getNoopResult = value => ({
1754
- value,
1755
- noop: true,
1756
- finished: true,
1757
- cancelled: false
1758
- });
1759
- const getFinishedResult = (value, finished, cancelled = false) => ({
1760
- value,
1761
- finished,
1762
- cancelled
1763
- });
1764
- const getCancelledResult = value => ({
1765
- value,
1766
- cancelled: true,
1767
- finished: false
1768
- });
1769
-
1770
- function runAsync(to, props, state, target) {
1771
- const {
1772
- callId,
1773
- parentId,
1774
- onRest
1775
- } = props;
1776
- const {
1777
- asyncTo: prevTo,
1778
- promise: prevPromise
1779
- } = state;
1780
-
1781
- if (!parentId && to === prevTo && !props.reset) {
1782
- return prevPromise;
1783
- }
1784
-
1785
- return state.promise = (async () => {
1786
- state.asyncId = callId;
1787
- state.asyncTo = to;
1788
- const defaultProps = getDefaultProps(props, (value, key) => key === 'onRest' ? undefined : value);
1789
- let preventBail;
1790
- let bail;
1791
- const bailPromise = new Promise((resolve, reject) => (preventBail = resolve, bail = reject));
1792
-
1793
- const bailIfEnded = bailSignal => {
1794
- const bailResult = callId <= (state.cancelId || 0) && getCancelledResult(target) || callId !== state.asyncId && getFinishedResult(target, false);
1795
-
1796
- if (bailResult) {
1797
- bailSignal.result = bailResult;
1798
- bail(bailSignal);
1799
- throw bailSignal;
1800
- }
1801
- };
1802
-
1803
- const animate = (arg1, arg2) => {
1804
- const bailSignal = new BailSignal();
1805
- const skipAnimationSignal = new SkipAniamtionSignal();
1806
- return (async () => {
1807
- if (globals.skipAnimation) {
1808
- stopAsync(state);
1809
- skipAnimationSignal.result = getFinishedResult(target, false);
1810
- bail(skipAnimationSignal);
1811
- throw skipAnimationSignal;
1812
- }
1813
-
1814
- bailIfEnded(bailSignal);
1815
- const props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {
1816
- to: arg1
1817
- });
1818
- props.parentId = callId;
1819
- eachProp(defaultProps, (value, key) => {
1820
- if (is.und(props[key])) {
1821
- props[key] = value;
1822
- }
1823
- });
1824
- const result = await target.start(props);
1825
- bailIfEnded(bailSignal);
1826
-
1827
- if (state.paused) {
1828
- await new Promise(resume => {
1829
- state.resumeQueue.add(resume);
1830
- });
1831
- }
1832
-
1833
- return result;
1834
- })();
1835
- };
1836
-
1837
- let result;
1838
-
1839
- if (globals.skipAnimation) {
1840
- stopAsync(state);
1841
- return getFinishedResult(target, false);
1842
- }
1843
-
1844
- try {
1845
- let animating;
1846
-
1847
- if (is.arr(to)) {
1848
- animating = (async queue => {
1849
- for (const props of queue) {
1850
- await animate(props);
1851
- }
1852
- })(to);
1853
- } else {
1854
- animating = Promise.resolve(to(animate, target.stop.bind(target)));
1855
- }
1856
-
1857
- await Promise.all([animating.then(preventBail), bailPromise]);
1858
- result = getFinishedResult(target.get(), true, false);
1859
- } catch (err) {
1860
- if (err instanceof BailSignal) {
1861
- result = err.result;
1862
- } else if (err instanceof SkipAniamtionSignal) {
1863
- result = err.result;
1864
- } else {
1865
- throw err;
1866
- }
1867
- } finally {
1868
- if (callId == state.asyncId) {
1869
- state.asyncId = parentId;
1870
- state.asyncTo = parentId ? prevTo : undefined;
1871
- state.promise = parentId ? prevPromise : undefined;
1872
- }
1873
- }
1874
-
1875
- if (is.fun(onRest)) {
1876
- raf.batchedUpdates(() => {
1877
- onRest(result, target, target.item);
1878
- });
1879
- }
1880
-
1881
- return result;
1882
- })();
1883
- }
1884
- function stopAsync(state, cancelId) {
1885
- flush(state.timeouts, t => t.cancel());
1886
- state.pauseQueue.clear();
1887
- state.resumeQueue.clear();
1888
- state.asyncId = state.asyncTo = state.promise = undefined;
1889
- if (cancelId) state.cancelId = cancelId;
1890
- }
1891
- class BailSignal extends Error {
1892
- constructor() {
1893
- super('An async animation has been interrupted. You see this error because you ' + 'forgot to use `await` or `.catch(...)` on its returned promise.');
1894
- this.result = void 0;
1895
- }
1896
-
1897
- }
1898
- class SkipAniamtionSignal extends Error {
1899
- constructor() {
1900
- super('SkipAnimationSignal');
1901
- this.result = void 0;
1902
- }
1903
-
1904
- }
1905
-
1906
- const isFrameValue = value => value instanceof FrameValue;
1907
- let nextId$1 = 1;
1908
- class FrameValue extends FluidValue {
1909
- constructor(...args) {
1910
- super(...args);
1911
- this.id = nextId$1++;
1912
- this.key = void 0;
1913
- this._priority = 0;
1914
- }
1915
-
1916
- get priority() {
1917
- return this._priority;
1918
- }
1919
-
1920
- set priority(priority) {
1921
- if (this._priority != priority) {
1922
- this._priority = priority;
1923
-
1924
- this._onPriorityChange(priority);
1925
- }
1926
- }
1927
-
1928
- get() {
1929
- const node = getAnimated(this);
1930
- return node && node.getValue();
1931
- }
1932
-
1933
- to(...args) {
1934
- return globals.to(this, args);
1935
- }
1936
-
1937
- interpolate(...args) {
1938
- deprecateInterpolate();
1939
- return globals.to(this, args);
1940
- }
1941
-
1942
- toJSON() {
1943
- return this.get();
1944
- }
1945
-
1946
- observerAdded(count) {
1947
- if (count == 1) this._attach();
1948
- }
1949
-
1950
- observerRemoved(count) {
1951
- if (count == 0) this._detach();
1952
- }
1953
-
1954
- _attach() {}
1955
-
1956
- _detach() {}
1957
-
1958
- _onChange(value, idle = false) {
1959
- callFluidObservers(this, {
1960
- type: 'change',
1961
- parent: this,
1962
- value,
1963
- idle
1964
- });
1965
- }
1966
-
1967
- _onPriorityChange(priority) {
1968
- if (!this.idle) {
1969
- frameLoop.sort(this);
1970
- }
1971
-
1972
- callFluidObservers(this, {
1973
- type: 'priority',
1974
- parent: this,
1975
- priority
1976
- });
1977
- }
1978
-
1979
- }
1980
-
1981
- const $P = Symbol.for('SpringPhase');
1982
- const HAS_ANIMATED = 1;
1983
- const IS_ANIMATING = 2;
1984
- const IS_PAUSED = 4;
1985
- const hasAnimated = target => (target[$P] & HAS_ANIMATED) > 0;
1986
- const isAnimating = target => (target[$P] & IS_ANIMATING) > 0;
1987
- const isPaused = target => (target[$P] & IS_PAUSED) > 0;
1988
- const setActiveBit = (target, active) => active ? target[$P] |= IS_ANIMATING | HAS_ANIMATED : target[$P] &= ~IS_ANIMATING;
1989
- const setPausedBit = (target, paused) => paused ? target[$P] |= IS_PAUSED : target[$P] &= ~IS_PAUSED;
1990
-
1991
- class SpringValue extends FrameValue {
1992
- constructor(arg1, arg2) {
1993
- super();
1994
- this.key = void 0;
1995
- this.animation = new Animation();
1996
- this.queue = void 0;
1997
- this.defaultProps = {};
1998
- this._state = {
1999
- paused: false,
2000
- delayed: false,
2001
- pauseQueue: new Set(),
2002
- resumeQueue: new Set(),
2003
- timeouts: new Set()
2004
- };
2005
- this._pendingCalls = new Set();
2006
- this._lastCallId = 0;
2007
- this._lastToId = 0;
2008
- this._memoizedDuration = 0;
2009
-
2010
- if (!is.und(arg1) || !is.und(arg2)) {
2011
- const props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {
2012
- from: arg1
2013
- });
2014
-
2015
- if (is.und(props.default)) {
2016
- props.default = true;
2017
- }
2018
-
2019
- this.start(props);
2020
- }
2021
- }
2022
-
2023
- get idle() {
2024
- return !(isAnimating(this) || this._state.asyncTo) || isPaused(this);
2025
- }
2026
-
2027
- get goal() {
2028
- return getFluidValue(this.animation.to);
2029
- }
2030
-
2031
- get velocity() {
2032
- const node = getAnimated(this);
2033
- return node instanceof AnimatedValue ? node.lastVelocity || 0 : node.getPayload().map(node => node.lastVelocity || 0);
2034
- }
2035
-
2036
- get hasAnimated() {
2037
- return hasAnimated(this);
2038
- }
2039
-
2040
- get isAnimating() {
2041
- return isAnimating(this);
2042
- }
2043
-
2044
- get isPaused() {
2045
- return isPaused(this);
2046
- }
2047
-
2048
- get isDelayed() {
2049
- return this._state.delayed;
2050
- }
2051
-
2052
- advance(dt) {
2053
- let idle = true;
2054
- let changed = false;
2055
- const anim = this.animation;
2056
- let {
2057
- config,
2058
- toValues
2059
- } = anim;
2060
- const payload = getPayload(anim.to);
2061
-
2062
- if (!payload && hasFluidValue(anim.to)) {
2063
- toValues = toArray(getFluidValue(anim.to));
2064
- }
2065
-
2066
- anim.values.forEach((node, i) => {
2067
- if (node.done) return;
2068
- const to = node.constructor == AnimatedString ? 1 : payload ? payload[i].lastPosition : toValues[i];
2069
- let finished = anim.immediate;
2070
- let position = to;
2071
-
2072
- if (!finished) {
2073
- position = node.lastPosition;
2074
-
2075
- if (config.tension <= 0) {
2076
- node.done = true;
2077
- return;
2078
- }
2079
-
2080
- let elapsed = node.elapsedTime += dt;
2081
- const from = anim.fromValues[i];
2082
- const v0 = node.v0 != null ? node.v0 : node.v0 = is.arr(config.velocity) ? config.velocity[i] : config.velocity;
2083
- let velocity;
2084
- const precision = config.precision || (from == to ? 0.005 : Math.min(1, Math.abs(to - from) * 0.001));
2085
-
2086
- if (!is.und(config.duration)) {
2087
- let p = 1;
2088
-
2089
- if (config.duration > 0) {
2090
- if (this._memoizedDuration !== config.duration) {
2091
- this._memoizedDuration = config.duration;
2092
-
2093
- if (node.durationProgress > 0) {
2094
- node.elapsedTime = config.duration * node.durationProgress;
2095
- elapsed = node.elapsedTime += dt;
2096
- }
2097
- }
2098
-
2099
- p = (config.progress || 0) + elapsed / this._memoizedDuration;
2100
- p = p > 1 ? 1 : p < 0 ? 0 : p;
2101
- node.durationProgress = p;
2102
- }
2103
-
2104
- position = from + config.easing(p) * (to - from);
2105
- velocity = (position - node.lastPosition) / dt;
2106
- finished = p == 1;
2107
- } else if (config.decay) {
2108
- const decay = config.decay === true ? 0.998 : config.decay;
2109
- const e = Math.exp(-(1 - decay) * elapsed);
2110
- position = from + v0 / (1 - decay) * (1 - e);
2111
- finished = Math.abs(node.lastPosition - position) <= precision;
2112
- velocity = v0 * e;
2113
- } else {
2114
- velocity = node.lastVelocity == null ? v0 : node.lastVelocity;
2115
- const restVelocity = config.restVelocity || precision / 10;
2116
- const bounceFactor = config.clamp ? 0 : config.bounce;
2117
- const canBounce = !is.und(bounceFactor);
2118
- const isGrowing = from == to ? node.v0 > 0 : from < to;
2119
- let isMoving;
2120
- let isBouncing = false;
2121
- const step = 1;
2122
- const numSteps = Math.ceil(dt / step);
2123
-
2124
- for (let n = 0; n < numSteps; ++n) {
2125
- isMoving = Math.abs(velocity) > restVelocity;
2126
-
2127
- if (!isMoving) {
2128
- finished = Math.abs(to - position) <= precision;
2129
-
2130
- if (finished) {
2131
- break;
2132
- }
2133
- }
2134
-
2135
- if (canBounce) {
2136
- isBouncing = position == to || position > to == isGrowing;
2137
-
2138
- if (isBouncing) {
2139
- velocity = -velocity * bounceFactor;
2140
- position = to;
2141
- }
2142
- }
2143
-
2144
- const springForce = -config.tension * 0.000001 * (position - to);
2145
- const dampingForce = -config.friction * 0.001 * velocity;
2146
- const acceleration = (springForce + dampingForce) / config.mass;
2147
- velocity = velocity + acceleration * step;
2148
- position = position + velocity * step;
2149
- }
2150
- }
2151
-
2152
- node.lastVelocity = velocity;
2153
-
2154
- if (Number.isNaN(position)) {
2155
- console.warn(`Got NaN while animating:`, this);
2156
- finished = true;
2157
- }
2158
- }
2159
-
2160
- if (payload && !payload[i].done) {
2161
- finished = false;
2162
- }
2163
-
2164
- if (finished) {
2165
- node.done = true;
2166
- } else {
2167
- idle = false;
2168
- }
2169
-
2170
- if (node.setValue(position, config.round)) {
2171
- changed = true;
2172
- }
2173
- });
2174
- const node = getAnimated(this);
2175
- const currVal = node.getValue();
2176
-
2177
- if (idle) {
2178
- const finalVal = getFluidValue(anim.to);
2179
-
2180
- if ((currVal !== finalVal || changed) && !config.decay) {
2181
- node.setValue(finalVal);
2182
-
2183
- this._onChange(finalVal);
2184
- } else if (changed && config.decay) {
2185
- this._onChange(currVal);
2186
- }
2187
-
2188
- this._stop();
2189
- } else if (changed) {
2190
- this._onChange(currVal);
2191
- }
2192
- }
2193
-
2194
- set(value) {
2195
- raf.batchedUpdates(() => {
2196
- this._stop();
2197
-
2198
- this._focus(value);
2199
-
2200
- this._set(value);
2201
- });
2202
- return this;
2203
- }
2204
-
2205
- pause() {
2206
- this._update({
2207
- pause: true
2208
- });
2209
- }
2210
-
2211
- resume() {
2212
- this._update({
2213
- pause: false
2214
- });
2215
- }
2216
-
2217
- finish() {
2218
- if (isAnimating(this)) {
2219
- const {
2220
- to,
2221
- config
2222
- } = this.animation;
2223
- raf.batchedUpdates(() => {
2224
- this._onStart();
2225
-
2226
- if (!config.decay) {
2227
- this._set(to, false);
2228
- }
2229
-
2230
- this._stop();
2231
- });
2232
- }
2233
-
2234
- return this;
2235
- }
2236
-
2237
- update(props) {
2238
- const queue = this.queue || (this.queue = []);
2239
- queue.push(props);
2240
- return this;
2241
- }
2242
-
2243
- start(to, arg2) {
2244
- let queue;
2245
-
2246
- if (!is.und(to)) {
2247
- queue = [is.obj(to) ? to : _extends({}, arg2, {
2248
- to
2249
- })];
2250
- } else {
2251
- queue = this.queue || [];
2252
- this.queue = [];
2253
- }
2254
-
2255
- return Promise.all(queue.map(props => {
2256
- const up = this._update(props);
2257
-
2258
- return up;
2259
- })).then(results => getCombinedResult(this, results));
2260
- }
2261
-
2262
- stop(cancel) {
2263
- const {
2264
- to
2265
- } = this.animation;
2266
-
2267
- this._focus(this.get());
2268
-
2269
- stopAsync(this._state, cancel && this._lastCallId);
2270
- raf.batchedUpdates(() => this._stop(to, cancel));
2271
- return this;
2272
- }
2273
-
2274
- reset() {
2275
- this._update({
2276
- reset: true
2277
- });
2278
- }
2279
-
2280
- eventObserved(event) {
2281
- if (event.type == 'change') {
2282
- this._start();
2283
- } else if (event.type == 'priority') {
2284
- this.priority = event.priority + 1;
2285
- }
2286
- }
2287
-
2288
- _prepareNode(props) {
2289
- const key = this.key || '';
2290
- let {
2291
- to,
2292
- from
2293
- } = props;
2294
- to = is.obj(to) ? to[key] : to;
2295
-
2296
- if (to == null || isAsyncTo(to)) {
2297
- to = undefined;
2298
- }
2299
-
2300
- from = is.obj(from) ? from[key] : from;
2301
-
2302
- if (from == null) {
2303
- from = undefined;
2304
- }
2305
-
2306
- const range = {
2307
- to,
2308
- from
2309
- };
2310
-
2311
- if (!hasAnimated(this)) {
2312
- if (props.reverse) [to, from] = [from, to];
2313
- from = getFluidValue(from);
2314
-
2315
- if (!is.und(from)) {
2316
- this._set(from);
2317
- } else if (!getAnimated(this)) {
2318
- this._set(to);
2319
- }
2320
- }
2321
-
2322
- return range;
2323
- }
2324
-
2325
- _update(_ref, isLoop) {
2326
- let props = _extends({}, _ref);
2327
-
2328
- const {
2329
- key,
2330
- defaultProps
2331
- } = this;
2332
- if (props.default) Object.assign(defaultProps, getDefaultProps(props, (value, prop) => /^on/.test(prop) ? resolveProp(value, key) : value));
2333
- mergeActiveFn(this, props, 'onProps');
2334
- sendEvent(this, 'onProps', props, this);
2335
-
2336
- const range = this._prepareNode(props);
2337
-
2338
- if (Object.isFrozen(this)) {
2339
- throw Error('Cannot animate a `SpringValue` object that is frozen. ' + 'Did you forget to pass your component to `animated(...)` before animating its props?');
2340
- }
2341
-
2342
- const state = this._state;
2343
- return scheduleProps(++this._lastCallId, {
2344
- key,
2345
- props,
2346
- defaultProps,
2347
- state,
2348
- actions: {
2349
- pause: () => {
2350
- if (!isPaused(this)) {
2351
- setPausedBit(this, true);
2352
- flushCalls(state.pauseQueue);
2353
- sendEvent(this, 'onPause', getFinishedResult(this, checkFinished(this, this.animation.to)), this);
2354
- }
2355
- },
2356
- resume: () => {
2357
- if (isPaused(this)) {
2358
- setPausedBit(this, false);
2359
-
2360
- if (isAnimating(this)) {
2361
- this._resume();
2362
- }
2363
-
2364
- flushCalls(state.resumeQueue);
2365
- sendEvent(this, 'onResume', getFinishedResult(this, checkFinished(this, this.animation.to)), this);
2366
- }
2367
- },
2368
- start: this._merge.bind(this, range)
2369
- }
2370
- }).then(result => {
2371
- if (props.loop && result.finished && !(isLoop && result.noop)) {
2372
- const nextProps = createLoopUpdate(props);
2373
-
2374
- if (nextProps) {
2375
- return this._update(nextProps, true);
2376
- }
2377
- }
2378
-
2379
- return result;
2380
- });
2381
- }
2382
-
2383
- _merge(range, props, resolve) {
2384
- if (props.cancel) {
2385
- this.stop(true);
2386
- return resolve(getCancelledResult(this));
2387
- }
2388
-
2389
- const hasToProp = !is.und(range.to);
2390
- const hasFromProp = !is.und(range.from);
2391
-
2392
- if (hasToProp || hasFromProp) {
2393
- if (props.callId > this._lastToId) {
2394
- this._lastToId = props.callId;
2395
- } else {
2396
- return resolve(getCancelledResult(this));
2397
- }
2398
- }
2399
-
2400
- const {
2401
- key,
2402
- defaultProps,
2403
- animation: anim
2404
- } = this;
2405
- const {
2406
- to: prevTo,
2407
- from: prevFrom
2408
- } = anim;
2409
- let {
2410
- to = prevTo,
2411
- from = prevFrom
2412
- } = range;
2413
-
2414
- if (hasFromProp && !hasToProp && (!props.default || is.und(to))) {
2415
- to = from;
2416
- }
2417
-
2418
- if (props.reverse) [to, from] = [from, to];
2419
- const hasFromChanged = !isEqual(from, prevFrom);
2420
-
2421
- if (hasFromChanged) {
2422
- anim.from = from;
2423
- }
2424
-
2425
- from = getFluidValue(from);
2426
- const hasToChanged = !isEqual(to, prevTo);
2427
-
2428
- if (hasToChanged) {
2429
- this._focus(to);
2430
- }
2431
-
2432
- const hasAsyncTo = isAsyncTo(props.to);
2433
- const {
2434
- config
2435
- } = anim;
2436
- const {
2437
- decay,
2438
- velocity
2439
- } = config;
2440
-
2441
- if (hasToProp || hasFromProp) {
2442
- config.velocity = 0;
2443
- }
2444
-
2445
- if (props.config && !hasAsyncTo) {
2446
- mergeConfig(config, callProp(props.config, key), props.config !== defaultProps.config ? callProp(defaultProps.config, key) : void 0);
2447
- }
2448
-
2449
- let node = getAnimated(this);
2450
-
2451
- if (!node || is.und(to)) {
2452
- return resolve(getFinishedResult(this, true));
2453
- }
2454
-
2455
- const reset = is.und(props.reset) ? hasFromProp && !props.default : !is.und(from) && matchProp(props.reset, key);
2456
- const value = reset ? from : this.get();
2457
- const goal = computeGoal(to);
2458
- const isAnimatable = is.num(goal) || is.arr(goal) || isAnimatedString(goal);
2459
- const immediate = !hasAsyncTo && (!isAnimatable || matchProp(defaultProps.immediate || props.immediate, key));
2460
-
2461
- if (hasToChanged) {
2462
- const nodeType = getAnimatedType(to);
2463
-
2464
- if (nodeType !== node.constructor) {
2465
- if (immediate) {
2466
- node = this._set(goal);
2467
- } else throw Error(`Cannot animate between ${node.constructor.name} and ${nodeType.name}, as the "to" prop suggests`);
2468
- }
2469
- }
2470
-
2471
- const goalType = node.constructor;
2472
- let started = hasFluidValue(to);
2473
- let finished = false;
2474
-
2475
- if (!started) {
2476
- const hasValueChanged = reset || !hasAnimated(this) && hasFromChanged;
2477
-
2478
- if (hasToChanged || hasValueChanged) {
2479
- finished = isEqual(computeGoal(value), goal);
2480
- started = !finished;
2481
- }
2482
-
2483
- if (!isEqual(anim.immediate, immediate) && !immediate || !isEqual(config.decay, decay) || !isEqual(config.velocity, velocity)) {
2484
- started = true;
2485
- }
2486
- }
2487
-
2488
- if (finished && isAnimating(this)) {
2489
- if (anim.changed && !reset) {
2490
- started = true;
2491
- } else if (!started) {
2492
- this._stop(prevTo);
2493
- }
2494
- }
2495
-
2496
- if (!hasAsyncTo) {
2497
- if (started || hasFluidValue(prevTo)) {
2498
- anim.values = node.getPayload();
2499
- anim.toValues = hasFluidValue(to) ? null : goalType == AnimatedString ? [1] : toArray(goal);
2500
- }
2501
-
2502
- if (anim.immediate != immediate) {
2503
- anim.immediate = immediate;
2504
-
2505
- if (!immediate && !reset) {
2506
- this._set(prevTo);
2507
- }
2508
- }
2509
-
2510
- if (started) {
2511
- const {
2512
- onRest
2513
- } = anim;
2514
- each(ACTIVE_EVENTS, type => mergeActiveFn(this, props, type));
2515
- const result = getFinishedResult(this, checkFinished(this, prevTo));
2516
- flushCalls(this._pendingCalls, result);
2517
-
2518
- this._pendingCalls.add(resolve);
2519
-
2520
- if (anim.changed) raf.batchedUpdates(() => {
2521
- anim.changed = !reset;
2522
- onRest == null ? void 0 : onRest(result, this);
2523
-
2524
- if (reset) {
2525
- callProp(defaultProps.onRest, result);
2526
- } else {
2527
- anim.onStart == null ? void 0 : anim.onStart(result, this);
2528
- }
2529
- });
2530
- }
2531
- }
2532
-
2533
- if (reset) {
2534
- this._set(value);
2535
- }
2536
-
2537
- if (hasAsyncTo) {
2538
- resolve(runAsync(props.to, props, this._state, this));
2539
- } else if (started) {
2540
- this._start();
2541
- } else if (isAnimating(this) && !hasToChanged) {
2542
- this._pendingCalls.add(resolve);
2543
- } else {
2544
- resolve(getNoopResult(value));
2545
- }
2546
- }
2547
-
2548
- _focus(value) {
2549
- const anim = this.animation;
2550
-
2551
- if (value !== anim.to) {
2552
- if (getFluidObservers(this)) {
2553
- this._detach();
2554
- }
2555
-
2556
- anim.to = value;
2557
-
2558
- if (getFluidObservers(this)) {
2559
- this._attach();
2560
- }
2561
- }
2562
- }
2563
-
2564
- _attach() {
2565
- let priority = 0;
2566
- const {
2567
- to
2568
- } = this.animation;
2569
-
2570
- if (hasFluidValue(to)) {
2571
- addFluidObserver(to, this);
2572
-
2573
- if (isFrameValue(to)) {
2574
- priority = to.priority + 1;
2575
- }
2576
- }
2577
-
2578
- this.priority = priority;
2579
- }
2580
-
2581
- _detach() {
2582
- const {
2583
- to
2584
- } = this.animation;
2585
-
2586
- if (hasFluidValue(to)) {
2587
- removeFluidObserver(to, this);
2588
- }
2589
- }
2590
-
2591
- _set(arg, idle = true) {
2592
- const value = getFluidValue(arg);
2593
-
2594
- if (!is.und(value)) {
2595
- const oldNode = getAnimated(this);
2596
-
2597
- if (!oldNode || !isEqual(value, oldNode.getValue())) {
2598
- const nodeType = getAnimatedType(value);
2599
-
2600
- if (!oldNode || oldNode.constructor != nodeType) {
2601
- setAnimated(this, nodeType.create(value));
2602
- } else {
2603
- oldNode.setValue(value);
2604
- }
2605
-
2606
- if (oldNode) {
2607
- raf.batchedUpdates(() => {
2608
- this._onChange(value, idle);
2609
- });
2610
- }
2611
- }
2612
- }
2613
-
2614
- return getAnimated(this);
2615
- }
2616
-
2617
- _onStart() {
2618
- const anim = this.animation;
2619
-
2620
- if (!anim.changed) {
2621
- anim.changed = true;
2622
- sendEvent(this, 'onStart', getFinishedResult(this, checkFinished(this, anim.to)), this);
2623
- }
2624
- }
2625
-
2626
- _onChange(value, idle) {
2627
- if (!idle) {
2628
- this._onStart();
2629
-
2630
- callProp(this.animation.onChange, value, this);
2631
- }
2632
-
2633
- callProp(this.defaultProps.onChange, value, this);
2634
-
2635
- super._onChange(value, idle);
2636
- }
2637
-
2638
- _start() {
2639
- const anim = this.animation;
2640
- getAnimated(this).reset(getFluidValue(anim.to));
2641
-
2642
- if (!anim.immediate) {
2643
- anim.fromValues = anim.values.map(node => node.lastPosition);
2644
- }
2645
-
2646
- if (!isAnimating(this)) {
2647
- setActiveBit(this, true);
2648
-
2649
- if (!isPaused(this)) {
2650
- this._resume();
2651
- }
2652
- }
2653
- }
2654
-
2655
- _resume() {
2656
- if (globals.skipAnimation) {
2657
- this.finish();
2658
- } else {
2659
- frameLoop.start(this);
2660
- }
2661
- }
2662
-
2663
- _stop(goal, cancel) {
2664
- if (isAnimating(this)) {
2665
- setActiveBit(this, false);
2666
- const anim = this.animation;
2667
- each(anim.values, node => {
2668
- node.done = true;
2669
- });
2670
-
2671
- if (anim.toValues) {
2672
- anim.onChange = anim.onPause = anim.onResume = undefined;
2673
- }
2674
-
2675
- callFluidObservers(this, {
2676
- type: 'idle',
2677
- parent: this
2678
- });
2679
- const result = cancel ? getCancelledResult(this.get()) : getFinishedResult(this.get(), checkFinished(this, goal != null ? goal : anim.to));
2680
- flushCalls(this._pendingCalls, result);
2681
-
2682
- if (anim.changed) {
2683
- anim.changed = false;
2684
- sendEvent(this, 'onRest', result, this);
2685
- }
2686
- }
2687
- }
2688
-
2689
- }
2690
-
2691
- function checkFinished(target, to) {
2692
- const goal = computeGoal(to);
2693
- const value = computeGoal(target.get());
2694
- return isEqual(value, goal);
2695
- }
2696
-
2697
- function createLoopUpdate(props, loop = props.loop, to = props.to) {
2698
- let loopRet = callProp(loop);
2699
-
2700
- if (loopRet) {
2701
- const overrides = loopRet !== true && inferTo(loopRet);
2702
- const reverse = (overrides || props).reverse;
2703
- const reset = !overrides || overrides.reset;
2704
- return createUpdate(_extends({}, props, {
2705
- loop,
2706
- default: false,
2707
- pause: undefined,
2708
- to: !reverse || isAsyncTo(to) ? to : undefined,
2709
- from: reset ? props.from : undefined,
2710
- reset
2711
- }, overrides));
2712
- }
2713
- }
2714
- function createUpdate(props) {
2715
- const {
2716
- to,
2717
- from
2718
- } = props = inferTo(props);
2719
- const keys = new Set();
2720
- if (is.obj(to)) findDefined(to, keys);
2721
- if (is.obj(from)) findDefined(from, keys);
2722
- props.keys = keys.size ? Array.from(keys) : null;
2723
- return props;
2724
- }
2725
- function declareUpdate(props) {
2726
- const update = createUpdate(props);
2727
-
2728
- if (is.und(update.default)) {
2729
- update.default = getDefaultProps(update);
2730
- }
2731
-
2732
- return update;
2733
- }
2734
-
2735
- function findDefined(values, keys) {
2736
- eachProp(values, (value, key) => value != null && keys.add(key));
2737
- }
2738
-
2739
- const ACTIVE_EVENTS = ['onStart', 'onRest', 'onChange', 'onPause', 'onResume'];
2740
-
2741
- function mergeActiveFn(target, props, type) {
2742
- target.animation[type] = props[type] !== getDefaultProp(props, type) ? resolveProp(props[type], target.key) : undefined;
2743
- }
2744
-
2745
- function sendEvent(target, type, ...args) {
2746
- var _target$animation$typ, _target$animation, _target$defaultProps$, _target$defaultProps;
2747
-
2748
- (_target$animation$typ = (_target$animation = target.animation)[type]) == null ? void 0 : _target$animation$typ.call(_target$animation, ...args);
2749
- (_target$defaultProps$ = (_target$defaultProps = target.defaultProps)[type]) == null ? void 0 : _target$defaultProps$.call(_target$defaultProps, ...args);
2750
- }
2751
-
2752
- const BATCHED_EVENTS = ['onStart', 'onChange', 'onRest'];
2753
- let nextId = 1;
2754
- class Controller {
2755
- constructor(props, flush) {
2756
- this.id = nextId++;
2757
- this.springs = {};
2758
- this.queue = [];
2759
- this.ref = void 0;
2760
- this._flush = void 0;
2761
- this._initialProps = void 0;
2762
- this._lastAsyncId = 0;
2763
- this._active = new Set();
2764
- this._changed = new Set();
2765
- this._started = false;
2766
- this._item = void 0;
2767
- this._state = {
2768
- paused: false,
2769
- pauseQueue: new Set(),
2770
- resumeQueue: new Set(),
2771
- timeouts: new Set()
2772
- };
2773
- this._events = {
2774
- onStart: new Map(),
2775
- onChange: new Map(),
2776
- onRest: new Map()
2777
- };
2778
- this._onFrame = this._onFrame.bind(this);
2779
-
2780
- if (flush) {
2781
- this._flush = flush;
2782
- }
2783
-
2784
- if (props) {
2785
- this.start(_extends({
2786
- default: true
2787
- }, props));
2788
- }
2789
- }
2790
-
2791
- get idle() {
2792
- return !this._state.asyncTo && Object.values(this.springs).every(spring => {
2793
- return spring.idle && !spring.isDelayed && !spring.isPaused;
2794
- });
2795
- }
2796
-
2797
- get item() {
2798
- return this._item;
2799
- }
2800
-
2801
- set item(item) {
2802
- this._item = item;
2803
- }
2804
-
2805
- get() {
2806
- const values = {};
2807
- this.each((spring, key) => values[key] = spring.get());
2808
- return values;
2809
- }
2810
-
2811
- set(values) {
2812
- for (const key in values) {
2813
- const value = values[key];
2814
-
2815
- if (!is.und(value)) {
2816
- this.springs[key].set(value);
2817
- }
2818
- }
2819
- }
2820
-
2821
- update(props) {
2822
- if (props) {
2823
- this.queue.push(createUpdate(props));
2824
- }
2825
-
2826
- return this;
2827
- }
2828
-
2829
- start(props) {
2830
- let {
2831
- queue
2832
- } = this;
2833
-
2834
- if (props) {
2835
- queue = toArray(props).map(createUpdate);
2836
- } else {
2837
- this.queue = [];
2838
- }
2839
-
2840
- if (this._flush) {
2841
- return this._flush(this, queue);
2842
- }
2843
-
2844
- prepareKeys(this, queue);
2845
- return flushUpdateQueue(this, queue);
2846
- }
2847
-
2848
- stop(arg, keys) {
2849
- if (arg !== !!arg) {
2850
- keys = arg;
2851
- }
2852
-
2853
- if (keys) {
2854
- const springs = this.springs;
2855
- each(toArray(keys), key => springs[key].stop(!!arg));
2856
- } else {
2857
- stopAsync(this._state, this._lastAsyncId);
2858
- this.each(spring => spring.stop(!!arg));
2859
- }
2860
-
2861
- return this;
2862
- }
2863
-
2864
- pause(keys) {
2865
- if (is.und(keys)) {
2866
- this.start({
2867
- pause: true
2868
- });
2869
- } else {
2870
- const springs = this.springs;
2871
- each(toArray(keys), key => springs[key].pause());
2872
- }
2873
-
2874
- return this;
2875
- }
2876
-
2877
- resume(keys) {
2878
- if (is.und(keys)) {
2879
- this.start({
2880
- pause: false
2881
- });
2882
- } else {
2883
- const springs = this.springs;
2884
- each(toArray(keys), key => springs[key].resume());
2885
- }
2886
-
2887
- return this;
2888
- }
2889
-
2890
- each(iterator) {
2891
- eachProp(this.springs, iterator);
2892
- }
2893
-
2894
- _onFrame() {
2895
- const {
2896
- onStart,
2897
- onChange,
2898
- onRest
2899
- } = this._events;
2900
- const active = this._active.size > 0;
2901
- const changed = this._changed.size > 0;
2902
-
2903
- if (active && !this._started || changed && !this._started) {
2904
- this._started = true;
2905
- flush(onStart, ([onStart, result]) => {
2906
- result.value = this.get();
2907
- onStart(result, this, this._item);
2908
- });
2909
- }
2910
-
2911
- const idle = !active && this._started;
2912
- const values = changed || idle && onRest.size ? this.get() : null;
2913
-
2914
- if (changed && onChange.size) {
2915
- flush(onChange, ([onChange, result]) => {
2916
- result.value = values;
2917
- onChange(result, this, this._item);
2918
- });
2919
- }
2920
-
2921
- if (idle) {
2922
- this._started = false;
2923
- flush(onRest, ([onRest, result]) => {
2924
- result.value = values;
2925
- onRest(result, this, this._item);
2926
- });
2927
- }
2928
- }
2929
-
2930
- eventObserved(event) {
2931
- if (event.type == 'change') {
2932
- this._changed.add(event.parent);
2933
-
2934
- if (!event.idle) {
2935
- this._active.add(event.parent);
2936
- }
2937
- } else if (event.type == 'idle') {
2938
- this._active.delete(event.parent);
2939
- } else return;
2940
-
2941
- raf.onFrame(this._onFrame);
2942
- }
2943
-
2944
- }
2945
- function flushUpdateQueue(ctrl, queue) {
2946
- return Promise.all(queue.map(props => flushUpdate(ctrl, props))).then(results => getCombinedResult(ctrl, results));
2947
- }
2948
- async function flushUpdate(ctrl, props, isLoop) {
2949
- const {
2950
- keys,
2951
- to,
2952
- from,
2953
- loop,
2954
- onRest,
2955
- onResolve
2956
- } = props;
2957
- const defaults = is.obj(props.default) && props.default;
2958
-
2959
- if (loop) {
2960
- props.loop = false;
2961
- }
2962
-
2963
- if (to === false) props.to = null;
2964
- if (from === false) props.from = null;
2965
- const asyncTo = is.arr(to) || is.fun(to) ? to : undefined;
2966
-
2967
- if (asyncTo) {
2968
- props.to = undefined;
2969
- props.onRest = undefined;
2970
-
2971
- if (defaults) {
2972
- defaults.onRest = undefined;
2973
- }
2974
- } else {
2975
- each(BATCHED_EVENTS, key => {
2976
- const handler = props[key];
2977
-
2978
- if (is.fun(handler)) {
2979
- const queue = ctrl['_events'][key];
2980
-
2981
- props[key] = ({
2982
- finished,
2983
- cancelled
2984
- }) => {
2985
- const result = queue.get(handler);
2986
-
2987
- if (result) {
2988
- if (!finished) result.finished = false;
2989
- if (cancelled) result.cancelled = true;
2990
- } else {
2991
- queue.set(handler, {
2992
- value: null,
2993
- finished: finished || false,
2994
- cancelled: cancelled || false
2995
- });
2996
- }
2997
- };
2998
-
2999
- if (defaults) {
3000
- defaults[key] = props[key];
3001
- }
3002
- }
3003
- });
3004
- }
3005
-
3006
- const state = ctrl['_state'];
3007
-
3008
- if (props.pause === !state.paused) {
3009
- state.paused = props.pause;
3010
- flushCalls(props.pause ? state.pauseQueue : state.resumeQueue);
3011
- } else if (state.paused) {
3012
- props.pause = true;
3013
- }
3014
-
3015
- const promises = (keys || Object.keys(ctrl.springs)).map(key => ctrl.springs[key].start(props));
3016
- const cancel = props.cancel === true || getDefaultProp(props, 'cancel') === true;
3017
-
3018
- if (asyncTo || cancel && state.asyncId) {
3019
- promises.push(scheduleProps(++ctrl['_lastAsyncId'], {
3020
- props,
3021
- state,
3022
- actions: {
3023
- pause: noop,
3024
- resume: noop,
3025
-
3026
- start(props, resolve) {
3027
- if (cancel) {
3028
- stopAsync(state, ctrl['_lastAsyncId']);
3029
- resolve(getCancelledResult(ctrl));
3030
- } else {
3031
- props.onRest = onRest;
3032
- resolve(runAsync(asyncTo, props, state, ctrl));
3033
- }
3034
- }
3035
-
3036
- }
3037
- }));
3038
- }
3039
-
3040
- if (state.paused) {
3041
- await new Promise(resume => {
3042
- state.resumeQueue.add(resume);
3043
- });
3044
- }
3045
-
3046
- const result = getCombinedResult(ctrl, await Promise.all(promises));
3047
-
3048
- if (loop && result.finished && !(isLoop && result.noop)) {
3049
- const nextProps = createLoopUpdate(props, loop, to);
3050
-
3051
- if (nextProps) {
3052
- prepareKeys(ctrl, [nextProps]);
3053
- return flushUpdate(ctrl, nextProps, true);
3054
- }
3055
- }
3056
-
3057
- if (onResolve) {
3058
- raf.batchedUpdates(() => onResolve(result, ctrl, ctrl.item));
3059
- }
3060
-
3061
- return result;
3062
- }
3063
- function getSprings(ctrl, props) {
3064
- const springs = _extends({}, ctrl.springs);
3065
-
3066
- if (props) {
3067
- each(toArray(props), props => {
3068
- if (is.und(props.keys)) {
3069
- props = createUpdate(props);
3070
- }
3071
-
3072
- if (!is.obj(props.to)) {
3073
- props = _extends({}, props, {
3074
- to: undefined
3075
- });
3076
- }
3077
-
3078
- prepareSprings(springs, props, key => {
3079
- return createSpring(key);
3080
- });
3081
- });
3082
- }
3083
-
3084
- setSprings(ctrl, springs);
3085
- return springs;
3086
- }
3087
- function setSprings(ctrl, springs) {
3088
- eachProp(springs, (spring, key) => {
3089
- if (!ctrl.springs[key]) {
3090
- ctrl.springs[key] = spring;
3091
- addFluidObserver(spring, ctrl);
3092
- }
3093
- });
3094
- }
3095
-
3096
- function createSpring(key, observer) {
3097
- const spring = new SpringValue();
3098
- spring.key = key;
3099
-
3100
- if (observer) {
3101
- addFluidObserver(spring, observer);
3102
- }
3103
-
3104
- return spring;
3105
- }
3106
-
3107
- function prepareSprings(springs, props, create) {
3108
- if (props.keys) {
3109
- each(props.keys, key => {
3110
- const spring = springs[key] || (springs[key] = create(key));
3111
- spring['_prepareNode'](props);
3112
- });
3113
- }
3114
- }
3115
-
3116
- function prepareKeys(ctrl, queue) {
3117
- each(queue, props => {
3118
- prepareSprings(ctrl.springs, props, key => {
3119
- return createSpring(key, ctrl);
3120
- });
3121
- });
3122
- }
3123
-
3124
- function _objectWithoutPropertiesLoose$1(source, excluded) {
3125
- if (source == null) return {};
3126
- var target = {};
3127
- var sourceKeys = Object.keys(source);
3128
- var key, i;
3129
-
3130
- for (i = 0; i < sourceKeys.length; i++) {
3131
- key = sourceKeys[i];
3132
- if (excluded.indexOf(key) >= 0) continue;
3133
- target[key] = source[key];
3134
- }
3135
-
3136
- return target;
3137
- }
3138
-
3139
- const _excluded$3 = ["children"];
3140
- const SpringContext = _ref => {
3141
- let {
3142
- children
3143
- } = _ref,
3144
- props = _objectWithoutPropertiesLoose$1(_ref, _excluded$3);
3145
-
3146
- const inherited = React.useContext(ctx);
3147
- const pause = props.pause || !!inherited.pause,
3148
- immediate = props.immediate || !!inherited.immediate;
3149
- props = useMemoOne(() => ({
3150
- pause,
3151
- immediate
3152
- }), [pause, immediate]);
3153
- const {
3154
- Provider
3155
- } = ctx;
3156
- return React__namespace.createElement(Provider, {
3157
- value: props
3158
- }, children);
3159
- };
3160
- const ctx = makeContext(SpringContext, {});
3161
- SpringContext.Provider = ctx.Provider;
3162
- SpringContext.Consumer = ctx.Consumer;
3163
-
3164
- function makeContext(target, init) {
3165
- Object.assign(target, React__namespace.createContext(init));
3166
- target.Provider._context = target;
3167
- target.Consumer._context = target;
3168
- return target;
3169
- }
3170
-
3171
- const SpringRef = () => {
3172
- const current = [];
3173
-
3174
- const SpringRef = function SpringRef(props) {
3175
- deprecateDirectCall();
3176
- const results = [];
3177
- each(current, (ctrl, i) => {
3178
- if (is.und(props)) {
3179
- results.push(ctrl.start());
3180
- } else {
3181
- const update = _getProps(props, ctrl, i);
3182
-
3183
- if (update) {
3184
- results.push(ctrl.start(update));
3185
- }
3186
- }
3187
- });
3188
- return results;
3189
- };
3190
-
3191
- SpringRef.current = current;
3192
-
3193
- SpringRef.add = function (ctrl) {
3194
- if (!current.includes(ctrl)) {
3195
- current.push(ctrl);
3196
- }
3197
- };
3198
-
3199
- SpringRef.delete = function (ctrl) {
3200
- const i = current.indexOf(ctrl);
3201
- if (~i) current.splice(i, 1);
3202
- };
3203
-
3204
- SpringRef.pause = function () {
3205
- each(current, ctrl => ctrl.pause(...arguments));
3206
- return this;
3207
- };
3208
-
3209
- SpringRef.resume = function () {
3210
- each(current, ctrl => ctrl.resume(...arguments));
3211
- return this;
3212
- };
3213
-
3214
- SpringRef.set = function (values) {
3215
- each(current, ctrl => ctrl.set(values));
3216
- };
3217
-
3218
- SpringRef.start = function (props) {
3219
- const results = [];
3220
- each(current, (ctrl, i) => {
3221
- if (is.und(props)) {
3222
- results.push(ctrl.start());
3223
- } else {
3224
- const update = this._getProps(props, ctrl, i);
3225
-
3226
- if (update) {
3227
- results.push(ctrl.start(update));
3228
- }
3229
- }
3230
- });
3231
- return results;
3232
- };
3233
-
3234
- SpringRef.stop = function () {
3235
- each(current, ctrl => ctrl.stop(...arguments));
3236
- return this;
3237
- };
3238
-
3239
- SpringRef.update = function (props) {
3240
- each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
3241
- return this;
3242
- };
3243
-
3244
- const _getProps = function _getProps(arg, ctrl, index) {
3245
- return is.fun(arg) ? arg(index, ctrl) : arg;
3246
- };
3247
-
3248
- SpringRef._getProps = _getProps;
3249
- return SpringRef;
3250
- };
3251
-
3252
- function useSprings(length, props, deps) {
3253
- const propsFn = is.fun(props) && props;
3254
- if (propsFn && !deps) deps = [];
3255
- const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
3256
- const layoutId = React.useRef(0);
3257
- const forceUpdate = useForceUpdate();
3258
- const state = React.useMemo(() => ({
3259
- ctrls: [],
3260
- queue: [],
3261
-
3262
- flush(ctrl, updates) {
3263
- const springs = getSprings(ctrl, updates);
3264
- const canFlushSync = layoutId.current > 0 && !state.queue.length && !Object.keys(springs).some(key => !ctrl.springs[key]);
3265
- return canFlushSync ? flushUpdateQueue(ctrl, updates) : new Promise(resolve => {
3266
- setSprings(ctrl, springs);
3267
- state.queue.push(() => {
3268
- resolve(flushUpdateQueue(ctrl, updates));
3269
- });
3270
- forceUpdate();
3271
- });
3272
- }
3273
-
3274
- }), []);
3275
- const ctrls = React.useRef([...state.ctrls]);
3276
- const updates = [];
3277
- const prevLength = usePrev(length) || 0;
3278
- React.useMemo(() => {
3279
- each(ctrls.current.slice(length, prevLength), ctrl => {
3280
- detachRefs(ctrl, ref);
3281
- ctrl.stop(true);
3282
- });
3283
- ctrls.current.length = length;
3284
- declareUpdates(prevLength, length);
3285
- }, [length]);
3286
- React.useMemo(() => {
3287
- declareUpdates(0, Math.min(prevLength, length));
3288
- }, deps);
3289
-
3290
- function declareUpdates(startIndex, endIndex) {
3291
- for (let i = startIndex; i < endIndex; i++) {
3292
- const ctrl = ctrls.current[i] || (ctrls.current[i] = new Controller(null, state.flush));
3293
- const update = propsFn ? propsFn(i, ctrl) : props[i];
3294
-
3295
- if (update) {
3296
- updates[i] = declareUpdate(update);
3297
- }
3298
- }
3299
- }
3300
-
3301
- const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]));
3302
- const context = React.useContext(SpringContext);
3303
- const prevContext = usePrev(context);
3304
- const hasContext = context !== prevContext && hasProps(context);
3305
- useIsomorphicLayoutEffect(() => {
3306
- layoutId.current++;
3307
- state.ctrls = ctrls.current;
3308
- const {
3309
- queue
3310
- } = state;
3311
-
3312
- if (queue.length) {
3313
- state.queue = [];
3314
- each(queue, cb => cb());
3315
- }
3316
-
3317
- each(ctrls.current, (ctrl, i) => {
3318
- ref == null ? void 0 : ref.add(ctrl);
3319
-
3320
- if (hasContext) {
3321
- ctrl.start({
3322
- default: context
3323
- });
3324
- }
3325
-
3326
- const update = updates[i];
3327
-
3328
- if (update) {
3329
- replaceRef(ctrl, update.ref);
3330
-
3331
- if (ctrl.ref) {
3332
- ctrl.queue.push(update);
3333
- } else {
3334
- ctrl.start(update);
3335
- }
3336
- }
3337
- });
3338
- });
3339
- useOnce(() => () => {
3340
- each(state.ctrls, ctrl => ctrl.stop(true));
3341
- });
3342
- const values = springs.map(x => _extends({}, x));
3343
- return ref ? [values, ref] : values;
3344
- }
3345
-
3346
- function useSpring(props, deps) {
3347
- const isFn = is.fun(props);
3348
- const [[values], ref] = useSprings(1, isFn ? props : [props], isFn ? deps || [] : deps);
3349
- return isFn || arguments.length == 2 ? [values, ref] : values;
3350
- }
3351
-
3352
- let TransitionPhase;
3353
-
3354
- (function (TransitionPhase) {
3355
- TransitionPhase["MOUNT"] = "mount";
3356
- TransitionPhase["ENTER"] = "enter";
3357
- TransitionPhase["UPDATE"] = "update";
3358
- TransitionPhase["LEAVE"] = "leave";
3359
- })(TransitionPhase || (TransitionPhase = {}));
3360
-
3361
- class Interpolation extends FrameValue {
3362
- constructor(source, args) {
3363
- super();
3364
- this.key = void 0;
3365
- this.idle = true;
3366
- this.calc = void 0;
3367
- this._active = new Set();
3368
- this.source = source;
3369
- this.calc = createInterpolator(...args);
3370
-
3371
- const value = this._get();
3372
-
3373
- const nodeType = getAnimatedType(value);
3374
- setAnimated(this, nodeType.create(value));
3375
- }
3376
-
3377
- advance(_dt) {
3378
- const value = this._get();
3379
-
3380
- const oldValue = this.get();
3381
-
3382
- if (!isEqual(value, oldValue)) {
3383
- getAnimated(this).setValue(value);
3384
-
3385
- this._onChange(value, this.idle);
3386
- }
3387
-
3388
- if (!this.idle && checkIdle(this._active)) {
3389
- becomeIdle(this);
3390
- }
3391
- }
3392
-
3393
- _get() {
3394
- const inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray(getFluidValue(this.source));
3395
- return this.calc(...inputs);
3396
- }
3397
-
3398
- _start() {
3399
- if (this.idle && !checkIdle(this._active)) {
3400
- this.idle = false;
3401
- each(getPayload(this), node => {
3402
- node.done = false;
3403
- });
3404
-
3405
- if (globals.skipAnimation) {
3406
- raf.batchedUpdates(() => this.advance());
3407
- becomeIdle(this);
3408
- } else {
3409
- frameLoop.start(this);
3410
- }
3411
- }
3412
- }
3413
-
3414
- _attach() {
3415
- let priority = 1;
3416
- each(toArray(this.source), source => {
3417
- if (hasFluidValue(source)) {
3418
- addFluidObserver(source, this);
3419
- }
3420
-
3421
- if (isFrameValue(source)) {
3422
- if (!source.idle) {
3423
- this._active.add(source);
3424
- }
3425
-
3426
- priority = Math.max(priority, source.priority + 1);
3427
- }
3428
- });
3429
- this.priority = priority;
3430
-
3431
- this._start();
3432
- }
3433
-
3434
- _detach() {
3435
- each(toArray(this.source), source => {
3436
- if (hasFluidValue(source)) {
3437
- removeFluidObserver(source, this);
3438
- }
3439
- });
3440
-
3441
- this._active.clear();
3442
-
3443
- becomeIdle(this);
3444
- }
3445
-
3446
- eventObserved(event) {
3447
- if (event.type == 'change') {
3448
- if (event.idle) {
3449
- this.advance();
3450
- } else {
3451
- this._active.add(event.parent);
3452
-
3453
- this._start();
3454
- }
3455
- } else if (event.type == 'idle') {
3456
- this._active.delete(event.parent);
3457
- } else if (event.type == 'priority') {
3458
- this.priority = toArray(this.source).reduce((highest, parent) => Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1), 0);
3459
- }
3460
- }
3461
-
3462
- }
3463
-
3464
- function isIdle(source) {
3465
- return source.idle !== false;
3466
- }
3467
-
3468
- function checkIdle(active) {
3469
- return !active.size || Array.from(active).every(isIdle);
3470
- }
3471
-
3472
- function becomeIdle(self) {
3473
- if (!self.idle) {
3474
- self.idle = true;
3475
- each(getPayload(self), node => {
3476
- node.done = true;
3477
- });
3478
- callFluidObservers(self, {
3479
- type: 'idle',
3480
- parent: self
3481
- });
3482
- }
3483
- }
3484
-
3485
- globals.assign({
3486
- createStringInterpolator,
3487
- to: (source, args) => new Interpolation(source, args)
3488
- });
3489
-
3490
- function _objectWithoutPropertiesLoose(source, excluded) {
3491
- if (source == null) return {};
3492
- var target = {};
3493
- var sourceKeys = Object.keys(source);
3494
- var key, i;
3495
-
3496
- for (i = 0; i < sourceKeys.length; i++) {
3497
- key = sourceKeys[i];
3498
- if (excluded.indexOf(key) >= 0) continue;
3499
- target[key] = source[key];
3500
- }
3501
-
3502
- return target;
3503
- }
3504
-
3505
- const _excluded$2 = ["style", "children", "scrollTop", "scrollLeft"];
3506
- const isCustomPropRE = /^--/;
3507
-
3508
- function dangerousStyleValue(name, value) {
3509
- if (value == null || typeof value === 'boolean' || value === '') return '';
3510
- if (typeof value === 'number' && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px';
3511
- return ('' + value).trim();
3512
- }
3513
-
3514
- const attributeCache = {};
3515
- function applyAnimatedValues(instance, props) {
3516
- if (!instance.nodeType || !instance.setAttribute) {
3517
- return false;
3518
- }
3519
-
3520
- const isFilterElement = instance.nodeName === 'filter' || instance.parentNode && instance.parentNode.nodeName === 'filter';
3521
-
3522
- const _ref = props,
3523
- {
3524
- style,
3525
- children,
3526
- scrollTop,
3527
- scrollLeft
3528
- } = _ref,
3529
- attributes = _objectWithoutPropertiesLoose(_ref, _excluded$2);
3530
-
3531
- const values = Object.values(attributes);
3532
- const names = Object.keys(attributes).map(name => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, n => '-' + n.toLowerCase())));
3533
-
3534
- if (children !== void 0) {
3535
- instance.textContent = children;
3536
- }
3537
-
3538
- for (let name in style) {
3539
- if (style.hasOwnProperty(name)) {
3540
- const value = dangerousStyleValue(name, style[name]);
3541
-
3542
- if (isCustomPropRE.test(name)) {
3543
- instance.style.setProperty(name, value);
3544
- } else {
3545
- instance.style[name] = value;
3546
- }
3547
- }
3548
- }
3549
-
3550
- names.forEach((name, i) => {
3551
- instance.setAttribute(name, values[i]);
3552
- });
3553
-
3554
- if (scrollTop !== void 0) {
3555
- instance.scrollTop = scrollTop;
3556
- }
3557
-
3558
- if (scrollLeft !== void 0) {
3559
- instance.scrollLeft = scrollLeft;
3560
- }
3561
- }
3562
- let isUnitlessNumber = {
3563
- animationIterationCount: true,
3564
- borderImageOutset: true,
3565
- borderImageSlice: true,
3566
- borderImageWidth: true,
3567
- boxFlex: true,
3568
- boxFlexGroup: true,
3569
- boxOrdinalGroup: true,
3570
- columnCount: true,
3571
- columns: true,
3572
- flex: true,
3573
- flexGrow: true,
3574
- flexPositive: true,
3575
- flexShrink: true,
3576
- flexNegative: true,
3577
- flexOrder: true,
3578
- gridRow: true,
3579
- gridRowEnd: true,
3580
- gridRowSpan: true,
3581
- gridRowStart: true,
3582
- gridColumn: true,
3583
- gridColumnEnd: true,
3584
- gridColumnSpan: true,
3585
- gridColumnStart: true,
3586
- fontWeight: true,
3587
- lineClamp: true,
3588
- lineHeight: true,
3589
- opacity: true,
3590
- order: true,
3591
- orphans: true,
3592
- tabSize: true,
3593
- widows: true,
3594
- zIndex: true,
3595
- zoom: true,
3596
- fillOpacity: true,
3597
- floodOpacity: true,
3598
- stopOpacity: true,
3599
- strokeDasharray: true,
3600
- strokeDashoffset: true,
3601
- strokeMiterlimit: true,
3602
- strokeOpacity: true,
3603
- strokeWidth: true
3604
- };
3605
-
3606
- const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
3607
-
3608
- const prefixes = ['Webkit', 'Ms', 'Moz', 'O'];
3609
- isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
3610
- prefixes.forEach(prefix => acc[prefixKey(prefix, prop)] = acc[prop]);
3611
- return acc;
3612
- }, isUnitlessNumber);
3613
-
3614
- const _excluded$1 = ["x", "y", "z"];
3615
- const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
3616
- const pxTransforms = /^(translate)/;
3617
- const degTransforms = /^(rotate|skew)/;
3618
-
3619
- const addUnit = (value, unit) => is.num(value) && value !== 0 ? value + unit : value;
3620
-
3621
- const isValueIdentity = (value, id) => is.arr(value) ? value.every(v => isValueIdentity(v, id)) : is.num(value) ? value === id : parseFloat(value) === id;
3622
-
3623
- class AnimatedStyle extends AnimatedObject {
3624
- constructor(_ref) {
3625
- let {
3626
- x,
3627
- y,
3628
- z
3629
- } = _ref,
3630
- style = _objectWithoutPropertiesLoose(_ref, _excluded$1);
3631
-
3632
- const inputs = [];
3633
- const transforms = [];
3634
-
3635
- if (x || y || z) {
3636
- inputs.push([x || 0, y || 0, z || 0]);
3637
- transforms.push(xyz => [`translate3d(${xyz.map(v => addUnit(v, 'px')).join(',')})`, isValueIdentity(xyz, 0)]);
3638
- }
3639
-
3640
- eachProp(style, (value, key) => {
3641
- if (key === 'transform') {
3642
- inputs.push([value || '']);
3643
- transforms.push(transform => [transform, transform === '']);
3644
- } else if (domTransforms.test(key)) {
3645
- delete style[key];
3646
- if (is.und(value)) return;
3647
- const unit = pxTransforms.test(key) ? 'px' : degTransforms.test(key) ? 'deg' : '';
3648
- inputs.push(toArray(value));
3649
- transforms.push(key === 'rotate3d' ? ([x, y, z, deg]) => [`rotate3d(${x},${y},${z},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : input => [`${key}(${input.map(v => addUnit(v, unit)).join(',')})`, isValueIdentity(input, key.startsWith('scale') ? 1 : 0)]);
3650
- }
3651
- });
3652
-
3653
- if (inputs.length) {
3654
- style.transform = new FluidTransform(inputs, transforms);
3655
- }
3656
-
3657
- super(style);
3658
- }
3659
-
3660
- }
3661
-
3662
- class FluidTransform extends FluidValue {
3663
- constructor(inputs, transforms) {
3664
- super();
3665
- this._value = null;
3666
- this.inputs = inputs;
3667
- this.transforms = transforms;
3668
- }
3669
-
3670
- get() {
3671
- return this._value || (this._value = this._get());
3672
- }
3673
-
3674
- _get() {
3675
- let transform = '';
3676
- let identity = true;
3677
- each(this.inputs, (input, i) => {
3678
- const arg1 = getFluidValue(input[0]);
3679
- const [t, id] = this.transforms[i](is.arr(arg1) ? arg1 : input.map(getFluidValue));
3680
- transform += ' ' + t;
3681
- identity = identity && id;
3682
- });
3683
- return identity ? 'none' : transform;
3684
- }
3685
-
3686
- observerAdded(count) {
3687
- if (count == 1) each(this.inputs, input => each(input, value => hasFluidValue(value) && addFluidObserver(value, this)));
3688
- }
3689
-
3690
- observerRemoved(count) {
3691
- if (count == 0) each(this.inputs, input => each(input, value => hasFluidValue(value) && removeFluidObserver(value, this)));
3692
- }
3693
-
3694
- eventObserved(event) {
3695
- if (event.type == 'change') {
3696
- this._value = null;
3697
- }
3698
-
3699
- callFluidObservers(this, event);
3700
- }
3701
-
3702
- }
3703
-
3704
- const primitives = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
3705
-
3706
- const _excluded = ["scrollTop", "scrollLeft"];
3707
- globals.assign({
3708
- batchedUpdates: reactDom.unstable_batchedUpdates,
3709
- createStringInterpolator,
3710
- colors
3711
- });
3712
- createHost(primitives, {
3713
- applyAnimatedValues,
3714
- createAnimatedStyle: style => new AnimatedStyle(style),
3715
- getComponentProps: _ref => {
3716
- let props = _objectWithoutPropertiesLoose(_ref, _excluded);
3717
-
3718
- return props;
3719
- }
3720
- });
3721
-
3722
9
  const eventLabel = 'RSC::Event';
3723
10
  function useEventsModule() {
3724
- const targetEvent = React.useRef(null);
3725
- React.useEffect(() => {
11
+ const targetEvent = react.useRef(null);
12
+ react.useEffect(() => {
3726
13
  targetEvent.current = document.createElement('div');
3727
14
  }, []);
3728
15
  function useListenToCustomEvent(eventHandler) {
3729
- React.useEffect(() => {
16
+ react.useEffect(() => {
3730
17
  function handleEvent(event) {
3731
18
  eventHandler(event.detail);
3732
19
  }
@@ -3756,8 +43,8 @@ function useEventsModule() {
3756
43
  }
3757
44
 
3758
45
  function useFullscreenModule({ mainCarouselWrapperRef, emitEvent, handleResize, }) {
3759
- const isFullscreen = React.useRef(false);
3760
- React.useEffect(() => {
46
+ const isFullscreen = react.useRef(false);
47
+ react.useEffect(() => {
3761
48
  function handleFullscreenChange() {
3762
49
  if (document.fullscreenElement) {
3763
50
  setIsFullscreen(true);
@@ -3814,8 +101,8 @@ function isInViewport(el) {
3814
101
  rect.right <= (window.innerWidth || document.documentElement.clientWidth));
3815
102
  }
3816
103
  function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThumbsData, items, }) {
3817
- const wrapperRef = React.useRef(null);
3818
- const [spring, setSpring] = useSpring(() => ({
104
+ const wrapperRef = react.useRef(null);
105
+ const [spring, setSpring] = web.useSpring(() => ({
3819
106
  val: 0,
3820
107
  }));
3821
108
  function getTotalScrollValue() {
@@ -3881,12 +168,12 @@ function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThu
3881
168
  }
3882
169
 
3883
170
  function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
3884
- const prevWindowWidth = React.useRef(0);
3885
- const draggingSlideTreshold = React.useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
3886
- const slideActionType = React.useRef('initial');
3887
- const slideModeType = React.useRef('initial');
3888
- const prevSlidedValue = React.useRef(0);
3889
- const [spring, setSpring] = useSpring(() => ({
171
+ const prevWindowWidth = react.useRef(0);
172
+ const draggingSlideTreshold = react.useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
173
+ const slideActionType = react.useRef('initial');
174
+ const slideModeType = react.useRef('initial');
175
+ const prevSlidedValue = react.useRef(0);
176
+ const [spring, setSpring] = web.useSpring(() => ({
3890
177
  val: 0,
3891
178
  pause: !init,
3892
179
  onChange({ value }) {
@@ -3909,12 +196,12 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
3909
196
  }
3910
197
  },
3911
198
  }));
3912
- const activeItem = React.useRef(initialActiveItem);
3913
- const firstItemReached = React.useRef(initialActiveItem === 0);
3914
- const lastItemReached = React.useRef(false);
3915
- const mainCarouselWrapperRef = React.useRef(null);
3916
- const carouselTrackWrapperRef = React.useRef(null);
3917
- const getItems = React.useCallback(() => {
199
+ const activeItem = react.useRef(initialActiveItem);
200
+ const firstItemReached = react.useRef(initialActiveItem === 0);
201
+ const lastItemReached = react.useRef(false);
202
+ const mainCarouselWrapperRef = react.useRef(null);
203
+ const carouselTrackWrapperRef = react.useRef(null);
204
+ const getItems = react.useCallback(() => {
3918
205
  if (withLoop) {
3919
206
  return [
3920
207
  ...items.map(i => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
@@ -3981,7 +268,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
3981
268
  to: {
3982
269
  val: to,
3983
270
  },
3984
- config: Object.assign(Object.assign({}, config.default), { velocity: spring.val.velocity }),
271
+ config: Object.assign(Object.assign({}, web.config.default), { velocity: spring.val.velocity }),
3985
272
  onRest(value) {
3986
273
  if (!immediate && value.finished) {
3987
274
  emitEvent({
@@ -4199,10 +486,10 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4199
486
  nextActiveItem: nextItem,
4200
487
  });
4201
488
  }
4202
- React.useEffect(() => {
489
+ react.useEffect(() => {
4203
490
  prevWindowWidth.current = window.innerWidth;
4204
491
  }, []);
4205
- React.useEffect(() => {
492
+ react.useEffect(() => {
4206
493
  adjustCarouselWrapperPosition();
4207
494
  }, [
4208
495
  initialStartingPosition,
@@ -4214,7 +501,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4214
501
  slideType,
4215
502
  init,
4216
503
  ]);
4217
- React.useLayoutEffect(() => {
504
+ react.useLayoutEffect(() => {
4218
505
  /**
4219
506
  * Set initial track position
4220
507
  */
@@ -4222,7 +509,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4222
509
  adjustCarouselWrapperPosition();
4223
510
  }
4224
511
  }, []);
4225
- React.useEffect(() => {
512
+ react.useEffect(() => {
4226
513
  if (_draggingSlideTreshold) {
4227
514
  draggingSlideTreshold.current = _draggingSlideTreshold;
4228
515
  }
@@ -4230,7 +517,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4230
517
  draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2);
4231
518
  }
4232
519
  }, [_draggingSlideTreshold]);
4233
- React.useEffect(() => {
520
+ react.useEffect(() => {
4234
521
  function handleResize() {
4235
522
  if (window.innerWidth === prevWindowWidth.current)
4236
523
  return;
@@ -4242,7 +529,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4242
529
  window.removeEventListener('resize', handleResize);
4243
530
  };
4244
531
  }, []);
4245
- const bindDrag = react.useDrag(state => {
532
+ const bindDrag = react$1.useDrag(state => {
4246
533
  const isDragging = state.dragging;
4247
534
  const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1];
4248
535
  const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1];
@@ -4321,7 +608,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4321
608
  if (!withLoop && lastItemReached.current) {
4322
609
  setSpring.start({
4323
610
  val: -getTotalScrollValue(),
4324
- config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
611
+ config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
4325
612
  });
4326
613
  }
4327
614
  else {
@@ -4332,7 +619,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4332
619
  if (!withLoop && firstItemReached.current) {
4333
620
  setSpring.start({
4334
621
  val: 0,
4335
- config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
622
+ config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
4336
623
  });
4337
624
  }
4338
625
  else {
@@ -4342,7 +629,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4342
629
  else {
4343
630
  setSpring.start({
4344
631
  val: prevSlidedValue.current,
4345
- config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
632
+ config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
4346
633
  });
4347
634
  }
4348
635
  }
@@ -4477,9 +764,9 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = '
4477
764
  },
4478
765
  };
4479
766
  }
4480
- const Context = React.createContext(undefined);
767
+ const Context = react.createContext(undefined);
4481
768
  function useSpringCarouselContext() {
4482
- const context = React.useContext(Context);
769
+ const context = react.useContext(Context);
4483
770
  if (!context) {
4484
771
  throw new Error('useSpringCarouselContext must be used within the carousel.');
4485
772
  }