UNPKG

77.9 kBJavaScriptView Raw
1'use strict';
2
3function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
5var React = require('react');
6var React__default = _interopDefault(React);
7var objectWithoutPropertiesLoose = require('./objectWithoutPropertiesLoose-1af20ad0.js');
8var ReactDOM = _interopDefault(require('react-dom'));
9
10var bugfixes = undefined;
11var applyAnimatedValues = undefined;
12var colorNames = [];
13var requestFrame = function requestFrame(cb) {
14 return typeof window !== 'undefined' && window.requestAnimationFrame(cb);
15};
16var interpolation = undefined;
17var now = function now() {
18 return Date.now();
19};
20var createAnimatedStyle = undefined;
21var injectApplyAnimatedValues = function injectApplyAnimatedValues(fn, transform) {
22 return applyAnimatedValues = {
23 fn: fn,
24 transform: transform
25 };
26};
27var injectColorNames = function injectColorNames(names) {
28 return colorNames = names;
29};
30var injectBugfixes = function injectBugfixes(fn) {
31 return bugfixes = fn;
32};
33var injectInterpolation = function injectInterpolation(cls) {
34 return interpolation = cls;
35};
36var injectCreateAnimatedStyle = function injectCreateAnimatedStyle(factory) {
37 return createAnimatedStyle = factory;
38};
39
40var Animated =
41/*#__PURE__*/
42function () {
43 function Animated() {}
44
45 var _proto = Animated.prototype;
46
47 _proto.attach = function attach() {};
48
49 _proto.detach = function detach() {};
50
51 _proto.getValue = function getValue() {};
52
53 _proto.getAnimatedValue = function getAnimatedValue() {
54 return this.getValue();
55 };
56
57 _proto.addChild = function addChild(child) {};
58
59 _proto.removeChild = function removeChild(child) {};
60
61 _proto.getChildren = function getChildren() {
62 return [];
63 };
64
65 return Animated;
66}();
67
68var getValues = function getValues(object) {
69 return Object.keys(object).map(function (k) {
70 return object[k];
71 });
72};
73
74var AnimatedWithChildren =
75/*#__PURE__*/
76function (_Animated) {
77 objectWithoutPropertiesLoose._inheritsLoose(AnimatedWithChildren, _Animated);
78
79 function AnimatedWithChildren() {
80 var _this;
81
82 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
83 args[_key] = arguments[_key];
84 }
85
86 _this = _Animated.call.apply(_Animated, [this].concat(args)) || this;
87 _this.children = [];
88
89 _this.getChildren = function () {
90 return _this.children;
91 };
92
93 _this.getPayload = function (index) {
94 if (index === void 0) {
95 index = undefined;
96 }
97
98 return index !== void 0 && _this.payload ? _this.payload[index] : _this.payload || objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this));
99 };
100
101 return _this;
102 }
103
104 var _proto = AnimatedWithChildren.prototype;
105
106 _proto.addChild = function addChild(child) {
107 if (this.children.length === 0) this.attach();
108 this.children.push(child);
109 };
110
111 _proto.removeChild = function removeChild(child) {
112 var index = this.children.indexOf(child);
113 this.children.splice(index, 1);
114 if (this.children.length === 0) this.detach();
115 };
116
117 return AnimatedWithChildren;
118}(Animated);
119var AnimatedArrayWithChildren =
120/*#__PURE__*/
121function (_AnimatedWithChildren) {
122 objectWithoutPropertiesLoose._inheritsLoose(AnimatedArrayWithChildren, _AnimatedWithChildren);
123
124 function AnimatedArrayWithChildren() {
125 var _this2;
126
127 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
128 args[_key2] = arguments[_key2];
129 }
130
131 _this2 = _AnimatedWithChildren.call.apply(_AnimatedWithChildren, [this].concat(args)) || this;
132 _this2.payload = [];
133
134 _this2.getAnimatedValue = function () {
135 return _this2.getValue();
136 };
137
138 _this2.attach = function () {
139 return _this2.payload.forEach(function (p) {
140 return p instanceof Animated && p.addChild(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this2)));
141 });
142 };
143
144 _this2.detach = function () {
145 return _this2.payload.forEach(function (p) {
146 return p instanceof Animated && p.removeChild(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this2)));
147 });
148 };
149
150 return _this2;
151 }
152
153 return AnimatedArrayWithChildren;
154}(AnimatedWithChildren);
155var AnimatedObjectWithChildren =
156/*#__PURE__*/
157function (_AnimatedWithChildren2) {
158 objectWithoutPropertiesLoose._inheritsLoose(AnimatedObjectWithChildren, _AnimatedWithChildren2);
159
160 function AnimatedObjectWithChildren() {
161 var _this3;
162
163 for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
164 args[_key3] = arguments[_key3];
165 }
166
167 _this3 = _AnimatedWithChildren2.call.apply(_AnimatedWithChildren2, [this].concat(args)) || this;
168 _this3.payload = {};
169
170 _this3.getAnimatedValue = function () {
171 return _this3.getValue(true);
172 };
173
174 _this3.attach = function () {
175 return getValues(_this3.payload).forEach(function (s) {
176 return s instanceof Animated && s.addChild(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this3)));
177 });
178 };
179
180 _this3.detach = function () {
181 return getValues(_this3.payload).forEach(function (s) {
182 return s instanceof Animated && s.removeChild(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this3)));
183 });
184 };
185
186 return _this3;
187 }
188
189 var _proto2 = AnimatedObjectWithChildren.prototype;
190
191 _proto2.getValue = function getValue(animated) {
192 if (animated === void 0) {
193 animated = false;
194 }
195
196 var payload = {};
197
198 for (var key in this.payload) {
199 var value = this.payload[key];
200 if (animated && !(value instanceof Animated)) continue;
201 payload[key] = value instanceof Animated ? value[animated ? 'getAnimatedValue' : 'getValue']() : value;
202 }
203
204 return payload;
205 };
206
207 return AnimatedObjectWithChildren;
208}(AnimatedWithChildren);
209
210var AnimatedStyle =
211/*#__PURE__*/
212function (_AnimatedObjectWithCh) {
213 objectWithoutPropertiesLoose._inheritsLoose(AnimatedStyle, _AnimatedObjectWithCh);
214
215 function AnimatedStyle(style) {
216 var _this;
217
218 _this = _AnimatedObjectWithCh.call(this) || this;
219 style = style || {};
220 if (style.transform && !(style.transform instanceof Animated)) style = applyAnimatedValues.transform(style);
221 _this.payload = style;
222 return _this;
223 }
224
225 return AnimatedStyle;
226}(AnimatedObjectWithChildren);
227
228// http://www.w3.org/TR/css3-color/#svg-color
229var colors = {
230 transparent: 0x00000000,
231 aliceblue: 0xf0f8ffff,
232 antiquewhite: 0xfaebd7ff,
233 aqua: 0x00ffffff,
234 aquamarine: 0x7fffd4ff,
235 azure: 0xf0ffffff,
236 beige: 0xf5f5dcff,
237 bisque: 0xffe4c4ff,
238 black: 0x000000ff,
239 blanchedalmond: 0xffebcdff,
240 blue: 0x0000ffff,
241 blueviolet: 0x8a2be2ff,
242 brown: 0xa52a2aff,
243 burlywood: 0xdeb887ff,
244 burntsienna: 0xea7e5dff,
245 cadetblue: 0x5f9ea0ff,
246 chartreuse: 0x7fff00ff,
247 chocolate: 0xd2691eff,
248 coral: 0xff7f50ff,
249 cornflowerblue: 0x6495edff,
250 cornsilk: 0xfff8dcff,
251 crimson: 0xdc143cff,
252 cyan: 0x00ffffff,
253 darkblue: 0x00008bff,
254 darkcyan: 0x008b8bff,
255 darkgoldenrod: 0xb8860bff,
256 darkgray: 0xa9a9a9ff,
257 darkgreen: 0x006400ff,
258 darkgrey: 0xa9a9a9ff,
259 darkkhaki: 0xbdb76bff,
260 darkmagenta: 0x8b008bff,
261 darkolivegreen: 0x556b2fff,
262 darkorange: 0xff8c00ff,
263 darkorchid: 0x9932ccff,
264 darkred: 0x8b0000ff,
265 darksalmon: 0xe9967aff,
266 darkseagreen: 0x8fbc8fff,
267 darkslateblue: 0x483d8bff,
268 darkslategray: 0x2f4f4fff,
269 darkslategrey: 0x2f4f4fff,
270 darkturquoise: 0x00ced1ff,
271 darkviolet: 0x9400d3ff,
272 deeppink: 0xff1493ff,
273 deepskyblue: 0x00bfffff,
274 dimgray: 0x696969ff,
275 dimgrey: 0x696969ff,
276 dodgerblue: 0x1e90ffff,
277 firebrick: 0xb22222ff,
278 floralwhite: 0xfffaf0ff,
279 forestgreen: 0x228b22ff,
280 fuchsia: 0xff00ffff,
281 gainsboro: 0xdcdcdcff,
282 ghostwhite: 0xf8f8ffff,
283 gold: 0xffd700ff,
284 goldenrod: 0xdaa520ff,
285 gray: 0x808080ff,
286 green: 0x008000ff,
287 greenyellow: 0xadff2fff,
288 grey: 0x808080ff,
289 honeydew: 0xf0fff0ff,
290 hotpink: 0xff69b4ff,
291 indianred: 0xcd5c5cff,
292 indigo: 0x4b0082ff,
293 ivory: 0xfffff0ff,
294 khaki: 0xf0e68cff,
295 lavender: 0xe6e6faff,
296 lavenderblush: 0xfff0f5ff,
297 lawngreen: 0x7cfc00ff,
298 lemonchiffon: 0xfffacdff,
299 lightblue: 0xadd8e6ff,
300 lightcoral: 0xf08080ff,
301 lightcyan: 0xe0ffffff,
302 lightgoldenrodyellow: 0xfafad2ff,
303 lightgray: 0xd3d3d3ff,
304 lightgreen: 0x90ee90ff,
305 lightgrey: 0xd3d3d3ff,
306 lightpink: 0xffb6c1ff,
307 lightsalmon: 0xffa07aff,
308 lightseagreen: 0x20b2aaff,
309 lightskyblue: 0x87cefaff,
310 lightslategray: 0x778899ff,
311 lightslategrey: 0x778899ff,
312 lightsteelblue: 0xb0c4deff,
313 lightyellow: 0xffffe0ff,
314 lime: 0x00ff00ff,
315 limegreen: 0x32cd32ff,
316 linen: 0xfaf0e6ff,
317 magenta: 0xff00ffff,
318 maroon: 0x800000ff,
319 mediumaquamarine: 0x66cdaaff,
320 mediumblue: 0x0000cdff,
321 mediumorchid: 0xba55d3ff,
322 mediumpurple: 0x9370dbff,
323 mediumseagreen: 0x3cb371ff,
324 mediumslateblue: 0x7b68eeff,
325 mediumspringgreen: 0x00fa9aff,
326 mediumturquoise: 0x48d1ccff,
327 mediumvioletred: 0xc71585ff,
328 midnightblue: 0x191970ff,
329 mintcream: 0xf5fffaff,
330 mistyrose: 0xffe4e1ff,
331 moccasin: 0xffe4b5ff,
332 navajowhite: 0xffdeadff,
333 navy: 0x000080ff,
334 oldlace: 0xfdf5e6ff,
335 olive: 0x808000ff,
336 olivedrab: 0x6b8e23ff,
337 orange: 0xffa500ff,
338 orangered: 0xff4500ff,
339 orchid: 0xda70d6ff,
340 palegoldenrod: 0xeee8aaff,
341 palegreen: 0x98fb98ff,
342 paleturquoise: 0xafeeeeff,
343 palevioletred: 0xdb7093ff,
344 papayawhip: 0xffefd5ff,
345 peachpuff: 0xffdab9ff,
346 peru: 0xcd853fff,
347 pink: 0xffc0cbff,
348 plum: 0xdda0ddff,
349 powderblue: 0xb0e0e6ff,
350 purple: 0x800080ff,
351 rebeccapurple: 0x663399ff,
352 red: 0xff0000ff,
353 rosybrown: 0xbc8f8fff,
354 royalblue: 0x4169e1ff,
355 saddlebrown: 0x8b4513ff,
356 salmon: 0xfa8072ff,
357 sandybrown: 0xf4a460ff,
358 seagreen: 0x2e8b57ff,
359 seashell: 0xfff5eeff,
360 sienna: 0xa0522dff,
361 silver: 0xc0c0c0ff,
362 skyblue: 0x87ceebff,
363 slateblue: 0x6a5acdff,
364 slategray: 0x708090ff,
365 slategrey: 0x708090ff,
366 snow: 0xfffafaff,
367 springgreen: 0x00ff7fff,
368 steelblue: 0x4682b4ff,
369 tan: 0xd2b48cff,
370 teal: 0x008080ff,
371 thistle: 0xd8bfd8ff,
372 tomato: 0xff6347ff,
373 turquoise: 0x40e0d0ff,
374 violet: 0xee82eeff,
375 wheat: 0xf5deb3ff,
376 white: 0xffffffff,
377 whitesmoke: 0xf5f5f5ff,
378 yellow: 0xffff00ff,
379 yellowgreen: 0x9acd32ff
380};
381
382var Interpolation =
383/*#__PURE__*/
384function () {
385 function Interpolation() {}
386
387 // Default config = config, args
388 // Short config = range, output, extrapolate
389 Interpolation.create = function create(config, output, extra) {
390 if (typeof config === 'function') return config;else if (interpolation && config.output && typeof config.output[0] === 'string') return interpolation(config);else if (Array.isArray(config)) return Interpolation.create({
391 range: config,
392 output: output,
393 extrapolate: extra || 'extend'
394 });
395 var outputRange = config.output;
396 var inputRange = config.range || [0, 1];
397
398 var easing = config.easing || function (t) {
399 return t;
400 };
401
402 var extrapolateLeft = 'extend';
403 var map = config.map;
404 if (config.extrapolateLeft !== undefined) extrapolateLeft = config.extrapolateLeft;else if (config.extrapolate !== undefined) extrapolateLeft = config.extrapolate;
405 var extrapolateRight = 'extend';
406 if (config.extrapolateRight !== undefined) extrapolateRight = config.extrapolateRight;else if (config.extrapolate !== undefined) extrapolateRight = config.extrapolate;
407 return function (input) {
408 var range = findRange(input, inputRange);
409 return interpolate(input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, map);
410 };
411 };
412
413 return Interpolation;
414}();
415
416function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
417 var result = map ? map(input) : input; // Extrapolate
418
419 if (result < inputMin) {
420 if (extrapolateLeft === 'identity') return result;else if (extrapolateLeft === 'clamp') result = inputMin;
421 }
422
423 if (result > inputMax) {
424 if (extrapolateRight === 'identity') return result;else if (extrapolateRight === 'clamp') result = inputMax;
425 }
426
427 if (outputMin === outputMax) return outputMin;
428 if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax; // Input Range
429
430 if (inputMin === -Infinity) result = -result;else if (inputMax === Infinity) result = result - inputMin;else result = (result - inputMin) / (inputMax - inputMin); // Easing
431
432 result = easing(result); // Output Range
433
434 if (outputMin === -Infinity) result = -result;else if (outputMax === Infinity) result = result + outputMin;else result = result * (outputMax - outputMin) + outputMin;
435 return result;
436}
437
438function findRange(input, inputRange) {
439 for (var i = 1; i < inputRange.length - 1; ++i) {
440 if (inputRange[i] >= input) break;
441 }
442
443 return i - 1;
444}
445
446// const INTEGER = '[-+]?\\d+';
447var NUMBER = '[-+]?\\d*\\.?\\d+';
448var PERCENTAGE = NUMBER + '%';
449
450function call() {
451 return '\\(\\s*(' + Array.prototype.slice.call(arguments).join(')\\s*,\\s*(') + ')\\s*\\)';
452}
453
454var rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
455var rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
456var hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
457var hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
458var hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
459var hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
460var hex6 = /^#([0-9a-fA-F]{6})$/;
461var hex8 = /^#([0-9a-fA-F]{8})$/;
462
463/*
464https://github.com/react-community/normalize-css-color
465
466BSD 3-Clause License
467
468Copyright (c) 2016, React Community
469All rights reserved.
470
471Redistribution and use in source and binary forms, with or without
472modification, are permitted provided that the following conditions are met:
473
474* Redistributions of source code must retain the above copyright notice, this
475 list of conditions and the following disclaimer.
476
477* Redistributions in binary form must reproduce the above copyright notice,
478 this list of conditions and the following disclaimer in the documentation
479 and/or other materials provided with the distribution.
480
481* Neither the name of the copyright holder nor the names of its
482 contributors may be used to endorse or promote products derived from
483 this software without specific prior written permission.
484
485THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
486AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
487IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
488DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
489FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
490DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
491SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
492CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
493OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
494OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
495*/
496function normalizeColor(color) {
497 var match;
498
499 if (typeof color === 'number') {
500 return color >>> 0 === color && color >= 0 && color <= 0xffffffff ? color : null;
501 } // Ordered based on occurrences on Facebook codebase
502
503
504 if (match = hex6.exec(color)) return parseInt(match[1] + 'ff', 16) >>> 0;
505 if (colors.hasOwnProperty(color)) return colors[color];
506
507 if (match = rgb.exec(color)) {
508 return (parse255(match[1]) << 24 | // r
509 parse255(match[2]) << 16 | // g
510 parse255(match[3]) << 8 | // b
511 0x000000ff) >>> // a
512 0;
513 }
514
515 if (match = rgba.exec(color)) {
516 return (parse255(match[1]) << 24 | // r
517 parse255(match[2]) << 16 | // g
518 parse255(match[3]) << 8 | // b
519 parse1(match[4])) >>> // a
520 0;
521 }
522
523 if (match = hex3.exec(color)) {
524 return parseInt(match[1] + match[1] + // r
525 match[2] + match[2] + // g
526 match[3] + match[3] + // b
527 'ff', // a
528 16) >>> 0;
529 } // https://drafts.csswg.org/css-color-4/#hex-notation
530
531
532 if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;
533
534 if (match = hex4.exec(color)) {
535 return parseInt(match[1] + match[1] + // r
536 match[2] + match[2] + // g
537 match[3] + match[3] + // b
538 match[4] + match[4], // a
539 16) >>> 0;
540 }
541
542 if (match = hsl.exec(color)) {
543 return (hslToRgb(parse360(match[1]), // h
544 parsePercentage(match[2]), // s
545 parsePercentage(match[3]) // l
546 ) | 0x000000ff) >>> // a
547 0;
548 }
549
550 if (match = hsla.exec(color)) {
551 return (hslToRgb(parse360(match[1]), // h
552 parsePercentage(match[2]), // s
553 parsePercentage(match[3]) // l
554 ) | parse1(match[4])) >>> // a
555 0;
556 }
557
558 return null;
559}
560
561function hue2rgb(p, q, t) {
562 if (t < 0) t += 1;
563 if (t > 1) t -= 1;
564 if (t < 1 / 6) return p + (q - p) * 6 * t;
565 if (t < 1 / 2) return q;
566 if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
567 return p;
568}
569
570function hslToRgb(h, s, l) {
571 var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
572 var p = 2 * l - q;
573 var r = hue2rgb(p, q, h + 1 / 3);
574 var g = hue2rgb(p, q, h);
575 var b = hue2rgb(p, q, h - 1 / 3);
576 return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
577}
578
579function parse255(str) {
580 var int = parseInt(str, 10);
581 if (int < 0) return 0;
582 if (int > 255) return 255;
583 return int;
584}
585
586function parse360(str) {
587 var int = parseFloat(str);
588 return (int % 360 + 360) % 360 / 360;
589}
590
591function parse1(str) {
592 var num = parseFloat(str);
593 if (num < 0) return 0;
594 if (num > 1) return 255;
595 return Math.round(num * 255);
596}
597
598function parsePercentage(str) {
599 // parseFloat conveniently ignores the final %
600 var int = parseFloat(str);
601 if (int < 0) return 0;
602 if (int > 100) return 1;
603 return int / 100;
604}
605
606function colorToRgba(input) {
607 var int32Color = normalizeColor(input);
608 if (int32Color === null) return input;
609 int32Color = int32Color || 0;
610 var r = (int32Color & 0xff000000) >>> 24;
611 var g = (int32Color & 0x00ff0000) >>> 16;
612 var b = (int32Color & 0x0000ff00) >>> 8;
613 var a = (int32Color & 0x000000ff) / 255;
614 return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
615} // Problem: https://github.com/animatedjs/animated/pull/102
616// Solution: https://stackoverflow.com/questions/638565/parsing-scientific-notation-sensibly/658662
617
618
619var stringShapeRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g; // Covers rgb, rgba, hsl, hsla
620// Taken from https://gist.github.com/olmokramer/82ccce673f86db7cda5e
621
622var colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi; // Covers color names (transparent, blue, etc.)
623
624var colorNamesRegex = new RegExp("(" + Object.keys(colors).join('|') + ")", 'g');
625/**
626 * Supports string shapes by extracting numbers so new values can be computed,
627 * and recombines those values into new strings of the same shape. Supports
628 * things like:
629 *
630 * rgba(123, 42, 99, 0.36) // colors
631 * -45deg // values with units
632 * 0 2px 2px 0px rgba(0, 0, 0, 0.12) // box shadows
633 */
634
635function createInterpolation(config) {
636 // Replace colors with rgba
637 var outputRange = config.output.map(function (rangeValue) {
638 return rangeValue.replace(colorRegex, colorToRgba);
639 }).map(function (rangeValue) {
640 return rangeValue.replace(colorNamesRegex, colorToRgba);
641 }); // ->
642 // [
643 // [0, 50],
644 // [100, 150],
645 // [200, 250],
646 // [0, 0.5],
647 // ]
648
649 var outputRanges = outputRange[0].match(stringShapeRegex).map(function () {
650 return [];
651 });
652 outputRange.forEach(function (value) {
653 value.match(stringShapeRegex).forEach(function (number, i) {
654 return outputRanges[i].push(+number);
655 });
656 });
657 var interpolations = outputRange[0].match(stringShapeRegex).map(function (value, i) {
658 return Interpolation.create(objectWithoutPropertiesLoose._extends({}, config, {
659 output: outputRanges[i]
660 }));
661 });
662 return function (input) {
663 var i = 0;
664 return outputRange[0] // 'rgba(0, 100, 200, 0)'
665 // ->
666 // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
667 .replace(stringShapeRegex, function () {
668 return interpolations[i++](input);
669 }) // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
670 // round the opacity (4th column).
671 .replace(/rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi, function (_, p1, p2, p3, p4) {
672 return "rgba(" + Math.round(p1) + ", " + Math.round(p2) + ", " + Math.round(p3) + ", " + p4 + ")";
673 });
674 };
675}
676
677var AnimatedInterpolation =
678/*#__PURE__*/
679function (_AnimatedArrayWithChi) {
680 objectWithoutPropertiesLoose._inheritsLoose(AnimatedInterpolation, _AnimatedArrayWithChi);
681
682 function AnimatedInterpolation(parents, _config, _arg) {
683 var _this;
684
685 _this = _AnimatedArrayWithChi.call(this) || this;
686
687 _this.getValue = function () {
688 var _this2;
689
690 return (_this2 = _this).calc.apply(_this2, _this.payload.map(function (value) {
691 return value.getValue();
692 }));
693 };
694
695 _this.updateConfig = function (config, arg) {
696 return _this.calc = Interpolation.create(config, arg);
697 };
698
699 _this.interpolate = function (config, arg) {
700 return new AnimatedInterpolation(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this)), config, arg);
701 };
702
703 _this.payload = // AnimatedArrays should unfold, except AnimatedInterpolation which is taken as is
704 parents instanceof AnimatedArrayWithChildren && !parents.updateConfig ? parents.payload : Array.isArray(parents) ? parents : [parents];
705 _this.calc = Interpolation.create(_config, _arg);
706 return _this;
707 }
708
709 return AnimatedInterpolation;
710}(AnimatedArrayWithChildren);
711
712/**
713 * Animated works by building a directed acyclic graph of dependencies
714 * transparently when you render your Animated components.
715 *
716 * new Animated.Value(0)
717 * .interpolate() .interpolate() new Animated.Value(1)
718 * opacity translateY scale
719 * style transform
720 * View#234 style
721 * View#123
722 *
723 * A) Top Down phase
724 * When an Animated.Value is updated, we recursively go down through this
725 * graph in order to find leaf nodes: the views that we flag as needing
726 * an update.
727 *
728 * B) Bottom Up phase
729 * When a view is flagged as needing an update, we recursively go back up
730 * in order to build the new value that it needs. The reason why we need
731 * this two-phases process is to deal with composite props such as
732 * transform which can receive values from multiple parents.
733 */
734
735function findAnimatedStyles(node, styles) {
736 if (typeof node.update === 'function') styles.add(node);else node.getChildren().forEach(function (child) {
737 return findAnimatedStyles(child, styles);
738 });
739}
740/**
741 * Standard value for driving animations. One `Animated.Value` can drive
742 * multiple properties in a synchronized fashion, but can only be driven by one
743 * mechanism at a time. Using a new mechanism (e.g. starting a new animation,
744 * or calling `setValue`) will stop any previous ones.
745 */
746
747
748var AnimatedValue =
749/*#__PURE__*/
750function (_AnimatedWithChildren) {
751 objectWithoutPropertiesLoose._inheritsLoose(AnimatedValue, _AnimatedWithChildren);
752
753 function AnimatedValue(_value) {
754 var _this;
755
756 _this = _AnimatedWithChildren.call(this) || this;
757
758 _this.setValue = function (value, flush) {
759 if (flush === void 0) {
760 flush = true;
761 }
762
763 _this.value = value;
764 if (flush) _this.flush();
765 };
766
767 _this.getValue = function () {
768 return _this.value;
769 };
770
771 _this.updateStyles = function () {
772 return findAnimatedStyles(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this)), _this.animatedStyles);
773 };
774
775 _this.updateValue = function (value) {
776 return _this.flush(_this.value = value);
777 };
778
779 _this.interpolate = function (config, arg) {
780 return new AnimatedInterpolation(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this)), config, arg);
781 };
782
783 _this.value = _value;
784 _this.animatedStyles = new Set();
785 _this.done = false;
786 _this.startPosition = _value;
787 _this.lastPosition = _value;
788 _this.lastVelocity = undefined;
789 _this.lastTime = undefined;
790 _this.controller = undefined;
791 return _this;
792 }
793
794 var _proto = AnimatedValue.prototype;
795
796 _proto.flush = function flush() {
797 if (this.animatedStyles.size === 0) this.updateStyles();
798 this.animatedStyles.forEach(function (animatedStyle) {
799 return animatedStyle.update();
800 });
801 };
802
803 _proto.prepare = function prepare(controller) {
804 // Values stay loyal to their original controller, this is also a way to
805 // detect trailing values originating from a foreign controller
806 if (this.controller === undefined) this.controller = controller;
807
808 if (this.controller === controller) {
809 this.startPosition = this.value;
810 this.lastPosition = this.value;
811 this.lastVelocity = controller.isActive ? this.lastVelocity : undefined;
812 this.lastTime = controller.isActive ? this.lastTime : undefined;
813 this.done = false;
814 this.animatedStyles.clear();
815 }
816 };
817
818 return AnimatedValue;
819}(AnimatedWithChildren);
820
821var AnimatedArray =
822/*#__PURE__*/
823function (_AnimatedArrayWithChi) {
824 objectWithoutPropertiesLoose._inheritsLoose(AnimatedArray, _AnimatedArrayWithChi);
825
826 function AnimatedArray(array) {
827 var _this;
828
829 _this = _AnimatedArrayWithChi.call(this) || this;
830
831 _this.setValue = function (value, flush) {
832 if (flush === void 0) {
833 flush = true;
834 }
835
836 if (Array.isArray(value)) {
837 if (value.length === _this.payload.length) value.forEach(function (v, i) {
838 return _this.payload[i].setValue(v, flush);
839 });
840 } else _this.payload.forEach(function (v, i) {
841 return _this.payload[i].setValue(value, flush);
842 });
843 };
844
845 _this.getValue = function () {
846 return _this.payload.map(function (v) {
847 return v.getValue();
848 });
849 };
850
851 _this.interpolate = function (config, arg) {
852 return new AnimatedInterpolation(objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this)), config, arg);
853 };
854
855 _this.payload = array.map(function (n) {
856 return new AnimatedValue(n);
857 });
858 return _this;
859 }
860
861 return AnimatedArray;
862}(AnimatedArrayWithChildren);
863
864function withDefault(value, defaultValue) {
865 return value === undefined || value === null ? defaultValue : value;
866}
867function toArray(a) {
868 return a !== void 0 ? Array.isArray(a) ? a : [a] : [];
869}
870function shallowEqual(a, b) {
871 if (typeof a !== typeof b) return false;
872 if (typeof a === 'string' || typeof a === 'number') return a === b;
873 var i;
874
875 for (i in a) {
876 if (!(i in b)) return false;
877 }
878
879 for (i in b) {
880 if (a[i] !== b[i]) return false;
881 }
882
883 return i === void 0 ? a === b : true;
884}
885function callProp(obj) {
886 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
887 args[_key - 1] = arguments[_key];
888 }
889
890 return typeof obj === 'function' ? obj.apply(void 0, args) : obj;
891}
892function getValues$1(object) {
893 return Object.keys(object).map(function (k) {
894 return object[k];
895 });
896}
897function getForwardProps(props) {
898 var to = props.to,
899 from = props.from,
900 config = props.config,
901 native = props.native,
902 onStart = props.onStart,
903 onRest = props.onRest,
904 onFrame = props.onFrame,
905 children = props.children,
906 reset = props.reset,
907 reverse = props.reverse,
908 force = props.force,
909 immediate = props.immediate,
910 impl = props.impl,
911 inject = props.inject,
912 delay = props.delay,
913 attach = props.attach,
914 destroyed = props.destroyed,
915 interpolateTo = props.interpolateTo,
916 autoStart = props.autoStart,
917 ref = props.ref,
918 forward = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(props, ["to", "from", "config", "native", "onStart", "onRest", "onFrame", "children", "reset", "reverse", "force", "immediate", "impl", "inject", "delay", "attach", "destroyed", "interpolateTo", "autoStart", "ref"]);
919
920 return forward;
921}
922function interpolateTo(props) {
923 var forward = getForwardProps(props);
924 var rest = Object.keys(props).reduce(function (a, k) {
925 var _extends2;
926
927 return forward[k] !== void 0 ? a : objectWithoutPropertiesLoose._extends({}, a, (_extends2 = {}, _extends2[k] = props[k], _extends2));
928 }, {});
929 return objectWithoutPropertiesLoose._extends({
930 to: forward
931 }, rest);
932}
933function convertToAnimatedValue(acc, _ref) {
934 var _extends3;
935
936 var name = _ref[0],
937 value = _ref[1];
938 return objectWithoutPropertiesLoose._extends({}, acc, (_extends3 = {}, _extends3[name] = new (Array.isArray(value) ? AnimatedArray : AnimatedValue)(value), _extends3));
939}
940function convertValues(props) {
941 var from = props.from,
942 to = props.to,
943 native = props.native;
944 var allProps = Object.entries(objectWithoutPropertiesLoose._extends({}, from, to));
945 return native ? allProps.reduce(convertToAnimatedValue, {}) : objectWithoutPropertiesLoose._extends({}, from, to);
946}
947function handleRef(ref, forward) {
948 if (forward) {
949 // If it's a function, assume it's a ref callback
950 if (typeof forward === 'function') forward(ref);else if (typeof forward === 'object') {
951 // If it's an object and has a 'current' property, assume it's a ref object
952 forward.current = ref;
953 }
954 }
955
956 return ref;
957}
958
959var check = function check(value) {
960 return value === 'auto';
961};
962
963var overwrite = function overwrite(width, height) {
964 return function (acc, _ref) {
965 var _extends2;
966
967 var name = _ref[0],
968 value = _ref[1];
969 return objectWithoutPropertiesLoose._extends({}, acc, (_extends2 = {}, _extends2[name] = value === 'auto' ? ~name.indexOf('height') ? height : width : value, _extends2));
970 };
971};
972
973function fixAuto(props, callback) {
974 var from = props.from,
975 to = props.to,
976 children = props.children; // Dry-route props back if nothing's using 'auto' in there
977 // TODO: deal with "null"
978
979 if (!(getValues$1(to).some(check) || getValues$1(from).some(check))) return; // Fetch render v-dom
980
981 var element = children(convertValues(props)); // A spring can return undefined/null, check against that (#153)
982
983 if (!element) return; // Or it could be an array (#346) ...
984
985 if (Array.isArray(element)) element = {
986 type: 'div',
987 props: {
988 children: element
989 } // Extract styles
990
991 };
992 var elementStyles = element.props.style; // Return v.dom with injected ref
993
994 return React__default.createElement(element.type, objectWithoutPropertiesLoose._extends({
995 key: element.key ? element.key : undefined
996 }, element.props, {
997 style: objectWithoutPropertiesLoose._extends({}, elementStyles, {
998 position: 'absolute',
999 visibility: 'hidden'
1000 }),
1001 ref: function ref(_ref2) {
1002 if (_ref2) {
1003 // Once it's rendered out, fetch bounds (minus padding/margin/borders)
1004 var node = ReactDOM.findDOMNode(_ref2);
1005 var width, height;
1006 var cs = getComputedStyle(node);
1007
1008 if (cs.boxSizing === 'border-box') {
1009 width = node.offsetWidth;
1010 height = node.offsetHeight;
1011 } else {
1012 var paddingX = parseFloat(cs.paddingLeft || 0) + parseFloat(cs.paddingRight || 0);
1013 var paddingY = parseFloat(cs.paddingTop || 0) + parseFloat(cs.paddingBottom || 0);
1014 var borderX = parseFloat(cs.borderLeftWidth || 0) + parseFloat(cs.borderRightWidth || 0);
1015 var borderY = parseFloat(cs.borderTopWidth || 0) + parseFloat(cs.borderBottomWidth || 0);
1016 width = node.offsetWidth - paddingX - borderX;
1017 height = node.offsetHeight - paddingY - borderY;
1018 }
1019
1020 var convert = overwrite(width, height);
1021 callback(objectWithoutPropertiesLoose._extends({}, props, {
1022 from: Object.entries(from).reduce(convert, from),
1023 to: Object.entries(to).reduce(convert, to)
1024 }));
1025 }
1026 }
1027 }));
1028}
1029
1030var isUnitlessNumber = {
1031 animationIterationCount: true,
1032 borderImageOutset: true,
1033 borderImageSlice: true,
1034 borderImageWidth: true,
1035 boxFlex: true,
1036 boxFlexGroup: true,
1037 boxOrdinalGroup: true,
1038 columnCount: true,
1039 columns: true,
1040 flex: true,
1041 flexGrow: true,
1042 flexPositive: true,
1043 flexShrink: true,
1044 flexNegative: true,
1045 flexOrder: true,
1046 gridRow: true,
1047 gridRowEnd: true,
1048 gridRowSpan: true,
1049 gridRowStart: true,
1050 gridColumn: true,
1051 gridColumnEnd: true,
1052 gridColumnSpan: true,
1053 gridColumnStart: true,
1054 fontWeight: true,
1055 lineClamp: true,
1056 lineHeight: true,
1057 opacity: true,
1058 order: true,
1059 orphans: true,
1060 tabSize: true,
1061 widows: true,
1062 zIndex: true,
1063 zoom: true,
1064 // SVG-related properties
1065 fillOpacity: true,
1066 floodOpacity: true,
1067 stopOpacity: true,
1068 strokeDasharray: true,
1069 strokeDashoffset: true,
1070 strokeMiterlimit: true,
1071 strokeOpacity: true,
1072 strokeWidth: true
1073};
1074
1075var prefixKey = function prefixKey(prefix, key) {
1076 return prefix + key.charAt(0).toUpperCase() + key.substring(1);
1077};
1078
1079var prefixes = ['Webkit', 'Ms', 'Moz', 'O'];
1080isUnitlessNumber = Object.keys(isUnitlessNumber).reduce(function (acc, prop) {
1081 prefixes.forEach(function (prefix) {
1082 return acc[prefixKey(prefix, prop)] = acc[prop];
1083 });
1084 return acc;
1085}, isUnitlessNumber);
1086
1087function dangerousStyleValue(name, value, isCustomProperty) {
1088 if (value == null || typeof value === 'boolean' || value === '') return '';
1089 if (!isCustomProperty && typeof value === 'number' && value !== 0 && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
1090
1091 return ('' + value).trim();
1092}
1093
1094var attributeCache = {};
1095injectCreateAnimatedStyle(function (style) {
1096 return new AnimatedStyle(style);
1097});
1098injectInterpolation(createInterpolation);
1099injectColorNames(colors);
1100injectBugfixes(fixAuto);
1101injectApplyAnimatedValues(function (instance, props) {
1102 if (instance.nodeType && instance.setAttribute !== undefined) {
1103 var style = props.style,
1104 children = props.children,
1105 scrollTop = props.scrollTop,
1106 scrollLeft = props.scrollLeft,
1107 attributes = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(props, ["style", "children", "scrollTop", "scrollLeft"]);
1108
1109 if (scrollTop !== void 0) instance.scrollTop = scrollTop;
1110 if (scrollLeft !== void 0) instance.scrollLeft = scrollLeft; // Set textContent, if children is an animatable value
1111
1112 if (children !== void 0) instance.textContent = children; // Set styles ...
1113
1114 for (var styleName in style) {
1115 if (!style.hasOwnProperty(styleName)) continue;
1116 var isCustomProperty = styleName.indexOf('--') === 0;
1117 var styleValue = dangerousStyleValue(styleName, style[styleName], isCustomProperty);
1118 if (styleName === 'float') styleName = 'cssFloat';
1119 if (isCustomProperty) instance.style.setProperty(styleName, styleValue);else instance.style[styleName] = styleValue;
1120 } // Set attributes ...
1121
1122
1123 for (var name in attributes) {
1124 // Attributes are written in dash case
1125 var dashCase = attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, function (n) {
1126 return '-' + n.toLowerCase();
1127 }));
1128 if (typeof instance.getAttribute(dashCase) !== 'undefined') instance.setAttribute(dashCase, attributes[name]);
1129 }
1130 } else return false;
1131}, function (style) {
1132 return style;
1133});
1134
1135var active = false;
1136var controllers = new Set();
1137
1138var frameLoop = function frameLoop() {
1139 var time = now();
1140
1141 for (var _iterator = controllers, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
1142 var _ref;
1143
1144 if (_isArray) {
1145 if (_i >= _iterator.length) break;
1146 _ref = _iterator[_i++];
1147 } else {
1148 _i = _iterator.next();
1149 if (_i.done) break;
1150 _ref = _i.value;
1151 }
1152
1153 var controller = _ref;
1154 var isDone = true;
1155 var noChange = true;
1156
1157 for (var configIdx = 0; configIdx < controller.configs.length; configIdx++) {
1158 var config = controller.configs[configIdx];
1159 var endOfAnimation = void 0,
1160 lastTime = void 0;
1161
1162 for (var valIdx = 0; valIdx < config.animatedValues.length; valIdx++) {
1163 var animation = config.animatedValues[valIdx]; // If an animation is done, skip, until all of them conclude
1164
1165 if (animation.done) continue;
1166 var from = config.fromValues[valIdx];
1167 var to = config.toValues[valIdx];
1168 var position = animation.lastPosition;
1169 var isAnimated = to instanceof Animated;
1170
1171 var _velocity = Array.isArray(config.initialVelocity) ? config.initialVelocity[valIdx] : config.initialVelocity;
1172
1173 if (isAnimated) to = to.getValue(); // Conclude animation if it's either immediate, or from-values match end-state
1174
1175 if (config.immediate || !isAnimated && !config.decay && from === to) {
1176 animation.updateValue(to);
1177 animation.done = true;
1178 continue;
1179 } // Doing delay here instead of setTimeout is one async worry less
1180
1181
1182 if (config.delay && time - controller.startTime < config.delay) {
1183 isDone = false;
1184 continue;
1185 } // Flag change
1186
1187
1188 noChange = false; // Break animation when string values are involved
1189
1190 if (typeof from === 'string' || typeof to === 'string') {
1191 animation.updateValue(to);
1192 animation.done = true;
1193 continue;
1194 }
1195
1196 if (config.duration !== void 0) {
1197 /** Duration easing */
1198 position = from + config.easing((time - controller.startTime - config.delay) / config.duration) * (to - from);
1199 endOfAnimation = time >= controller.startTime + config.delay + config.duration;
1200 } else if (config.decay) {
1201 /** Decay easing */
1202 position = from + _velocity / (1 - 0.998) * (1 - Math.exp(-(1 - 0.998) * (time - controller.startTime)));
1203 endOfAnimation = Math.abs(animation.lastPosition - position) < 0.1;
1204 if (endOfAnimation) to = position;
1205 } else {
1206 /** Spring easing */
1207 lastTime = animation.lastTime !== void 0 ? animation.lastTime : time;
1208 _velocity = animation.lastVelocity !== void 0 ? animation.lastVelocity : config.initialVelocity; // If we lost a lot of frames just jump to the end.
1209
1210 if (time > lastTime + 64) lastTime = time; // http://gafferongames.com/game-physics/fix-your-timestep/
1211
1212 var numSteps = Math.floor(time - lastTime);
1213
1214 for (var i = 0; i < numSteps; ++i) {
1215 var force = -config.tension * (position - to);
1216 var damping = -config.friction * _velocity;
1217 var acceleration = (force + damping) / config.mass;
1218 _velocity = _velocity + acceleration * 1 / 1000;
1219 position = position + _velocity * 1 / 1000;
1220 } // Conditions for stopping the spring animation
1221
1222
1223 var isOvershooting = config.clamp && config.tension !== 0 ? from < to ? position > to : position < to : false;
1224 var isVelocity = Math.abs(_velocity) <= config.precision;
1225 var isDisplacement = config.tension !== 0 ? Math.abs(to - position) <= config.precision : true;
1226 endOfAnimation = isOvershooting || isVelocity && isDisplacement;
1227 animation.lastVelocity = _velocity;
1228 animation.lastTime = time;
1229 } // Trails aren't done until their parents conclude
1230
1231
1232 if (isAnimated && !config.toValues[valIdx].done) endOfAnimation = false;
1233
1234 if (endOfAnimation) {
1235 // Ensure that we end up with a round value
1236 if (animation.value !== to) position = to;
1237 animation.done = true;
1238 } else isDone = false;
1239
1240 animation.updateValue(position);
1241 animation.lastPosition = position;
1242 } // Keep track of updated values only when necessary
1243
1244
1245 if (controller.props.onFrame || !controller.props.native) controller.animatedProps[config.name] = config.interpolation.getValue();
1246 } // Update callbacks in the end of the frame
1247
1248
1249 if (controller.props.onFrame || !controller.props.native) {
1250 if (!controller.props.native && controller.onUpdate) controller.onUpdate();
1251 if (controller.props.onFrame) controller.props.onFrame(controller.animatedProps);
1252 } // Either call onEnd or next frame
1253
1254
1255 if (isDone) {
1256 controllers.delete(controller);
1257 controller.debouncedOnEnd({
1258 finished: true,
1259 noChange: noChange
1260 });
1261 }
1262 } // Loop over as long as there are controllers ...
1263
1264
1265 if (controllers.size) requestFrame(frameLoop);else active = false;
1266};
1267
1268var addController = function addController(controller) {
1269 if (!controllers.has(controller)) {
1270 controllers.add(controller);
1271 if (!active) requestFrame(frameLoop);
1272 active = true;
1273 }
1274};
1275
1276var removeController = function removeController(controller) {
1277 if (controllers.has(controller)) {
1278 controllers.delete(controller);
1279 }
1280};
1281
1282var Controller =
1283/*#__PURE__*/
1284function () {
1285 function Controller(props, config) {
1286 var _this = this;
1287
1288 if (config === void 0) {
1289 config = {
1290 native: true,
1291 interpolateTo: true,
1292 autoStart: true
1293 };
1294 }
1295
1296 this.getValues = function () {
1297 return _this.props.native ? _this.interpolations : _this.animatedProps;
1298 };
1299
1300 this.dependents = new Set();
1301 this.isActive = false;
1302 this.hasChanged = false;
1303 this.props = {};
1304 this.merged = {};
1305 this.animations = {};
1306 this.interpolations = {};
1307 this.animatedProps = {};
1308 this.configs = [];
1309 this.frame = undefined;
1310 this.startTime = undefined;
1311 this.lastTime = undefined;
1312 this.update(objectWithoutPropertiesLoose._extends({}, props, config));
1313 }
1314
1315 var _proto = Controller.prototype;
1316
1317 _proto.update = function update(props) {
1318 var _this2 = this;
1319
1320 this.props = objectWithoutPropertiesLoose._extends({}, this.props, props);
1321
1322 var _ref = this.props.interpolateTo ? interpolateTo(this.props) : this.props,
1323 _ref$from = _ref.from,
1324 from = _ref$from === void 0 ? {} : _ref$from,
1325 _ref$to = _ref.to,
1326 to = _ref$to === void 0 ? {} : _ref$to,
1327 _ref$config = _ref.config,
1328 config = _ref$config === void 0 ? {} : _ref$config,
1329 _ref$delay = _ref.delay,
1330 delay = _ref$delay === void 0 ? 0 : _ref$delay,
1331 reverse = _ref.reverse,
1332 attach = _ref.attach,
1333 reset = _ref.reset,
1334 immediate = _ref.immediate,
1335 autoStart = _ref.autoStart,
1336 ref = _ref.ref; // Reverse values when requested
1337
1338
1339 if (reverse) {
1340 var _ref2 = [to, from];
1341 from = _ref2[0];
1342 to = _ref2[1];
1343 }
1344
1345 this.hasChanged = false; // Attachment handling, trailed springs can "attach" themselves to a previous spring
1346
1347 var target = attach && attach(this); // Reset merged props when necessary
1348
1349 var extra = reset ? {} : this.merged; // This will collect all props that were ever set
1350
1351 this.merged = objectWithoutPropertiesLoose._extends({}, from, extra, to); // Reduces input { name: value } pairs into animated values
1352
1353 this.animations = Object.entries(this.merged).reduce(function (acc, _ref3, i) {
1354 var name = _ref3[0],
1355 value = _ref3[1];
1356 // Issue cached entries, except on reset
1357 var entry = !reset && acc[name] || {}; // Figure out what the value is supposed to be
1358
1359 var isNumber = typeof value === 'number';
1360 var isString = typeof value === 'string' && !value.startsWith('#') && !/\d/.test(value) && !colorNames[value];
1361 var isArray = !isNumber && !isString && Array.isArray(value);
1362 var fromValue = from[name] !== undefined ? from[name] : value;
1363 var toValue = isNumber || isArray ? value : isString ? value : 1;
1364 var toConfig = callProp(config, name);
1365 if (target) toValue = target.animations[name].parent; // Detect changes, animated values will be checked in the raf-loop
1366
1367 if (toConfig.decay !== void 0 || !shallowEqual(entry.changes, value)) {
1368 var _extends2;
1369
1370 _this2.hasChanged = true;
1371 var parent, interpolation$$1;
1372 if (isNumber || isString) parent = interpolation$$1 = entry.parent || new AnimatedValue(fromValue);else if (isArray) parent = interpolation$$1 = entry.parent || new AnimatedArray(fromValue);else {
1373 var prev = entry.interpolation && entry.interpolation.calc(entry.parent.value);
1374
1375 if (entry.parent) {
1376 parent = entry.parent;
1377 parent.setValue(0, false);
1378 } else parent = new AnimatedValue(0);
1379
1380 var range = {
1381 output: [prev !== void 0 ? prev : fromValue, value]
1382 };
1383
1384 if (entry.interpolation) {
1385 interpolation$$1 = entry.interpolation;
1386 entry.interpolation.updateConfig(range);
1387 } else interpolation$$1 = parent.interpolate(range);
1388 } // Set immediate values
1389
1390 if (callProp(immediate, name)) parent.setValue(value, false); // Reset animated values
1391
1392 var animatedValues = toArray(parent.getPayload());
1393 animatedValues.forEach(function (value) {
1394 return value.prepare(_this2);
1395 });
1396 return objectWithoutPropertiesLoose._extends({}, acc, (_extends2 = {}, _extends2[name] = objectWithoutPropertiesLoose._extends({}, entry, {
1397 name: name,
1398 parent: parent,
1399 interpolation: interpolation$$1,
1400 animatedValues: animatedValues,
1401 changes: value,
1402 fromValues: toArray(parent.getValue()),
1403 toValues: toArray(target ? toValue.getPayload() : toValue),
1404 immediate: callProp(immediate, name),
1405 delay: withDefault(toConfig.delay, delay || 0),
1406 initialVelocity: withDefault(toConfig.velocity, 0),
1407 clamp: withDefault(toConfig.clamp, false),
1408 precision: withDefault(toConfig.precision, 0.01),
1409 tension: withDefault(toConfig.tension, 170),
1410 friction: withDefault(toConfig.friction, 26),
1411 mass: withDefault(toConfig.mass, 1),
1412 duration: toConfig.duration,
1413 easing: withDefault(toConfig.easing, function (t) {
1414 return t;
1415 }),
1416 decay: toConfig.decay
1417 }), _extends2));
1418 } else return acc;
1419 }, this.animations);
1420
1421 if (this.hasChanged) {
1422 this.configs = getValues$1(this.animations);
1423 this.animatedProps = {};
1424 this.interpolations = {};
1425
1426 for (var key in this.animations) {
1427 this.interpolations[key] = this.animations[key].interpolation;
1428 this.animatedProps[key] = this.animations[key].interpolation.getValue();
1429 }
1430 } // TODO: clean up ref in controller
1431
1432
1433 for (var _len = arguments.length, start = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
1434 start[_key - 1] = arguments[_key];
1435 }
1436
1437 if (!ref && (autoStart || start.length)) this.start.apply(this, start);
1438 var onEnd = start[0],
1439 onUpdate = start[1];
1440 this.onEnd = typeof onEnd === 'function' && onEnd;
1441 this.onUpdate = onUpdate;
1442 return this.getValues();
1443 };
1444
1445 _proto.start = function start(onEnd, onUpdate) {
1446 var _this3 = this;
1447
1448 this.startTime = now();
1449 if (this.isActive) this.stop();
1450 this.isActive = true;
1451 this.onEnd = typeof onEnd === 'function' && onEnd;
1452 this.onUpdate = onUpdate;
1453 if (this.props.onStart) this.props.onStart();
1454 addController(this);
1455 return new Promise(function (res) {
1456 return _this3.resolve = res;
1457 });
1458 };
1459
1460 _proto.stop = function stop(finished) {
1461 if (finished === void 0) {
1462 finished = false;
1463 }
1464
1465 // Reset collected changes since the animation has been stopped cold turkey
1466 if (finished) getValues$1(this.animations).forEach(function (a) {
1467 return a.changes = undefined;
1468 });
1469 this.debouncedOnEnd({
1470 finished: finished
1471 });
1472 };
1473
1474 _proto.destroy = function destroy() {
1475 removeController(this);
1476 this.props = {};
1477 this.merged = {};
1478 this.animations = {};
1479 this.interpolations = {};
1480 this.animatedProps = {};
1481 this.configs = [];
1482 };
1483
1484 _proto.debouncedOnEnd = function debouncedOnEnd(result) {
1485 removeController(this);
1486 this.isActive = false;
1487 var onEnd = this.onEnd;
1488 this.onEnd = null;
1489 if (onEnd) onEnd(result);
1490 if (this.resolve) this.resolve();
1491 this.resolve = null;
1492 };
1493
1494 return Controller;
1495}();
1496
1497var AnimatedProps =
1498/*#__PURE__*/
1499function (_AnimatedObjectWithCh) {
1500 objectWithoutPropertiesLoose._inheritsLoose(AnimatedProps, _AnimatedObjectWithCh);
1501
1502 function AnimatedProps(props, callback) {
1503 var _this;
1504
1505 _this = _AnimatedObjectWithCh.call(this) || this;
1506 if (props.style) props = objectWithoutPropertiesLoose._extends({}, props, {
1507 style: createAnimatedStyle(props.style)
1508 });
1509 _this.payload = props;
1510 _this.update = callback;
1511
1512 _this.attach();
1513
1514 return _this;
1515 }
1516
1517 return AnimatedProps;
1518}(AnimatedObjectWithChildren);
1519
1520function createAnimatedComponent(Component) {
1521 var AnimatedComponent =
1522 /*#__PURE__*/
1523 function (_React$Component) {
1524 objectWithoutPropertiesLoose._inheritsLoose(AnimatedComponent, _React$Component);
1525
1526 function AnimatedComponent(props) {
1527 var _this;
1528
1529 _this = _React$Component.call(this) || this;
1530
1531 _this.callback = function () {
1532 if (_this.node) {
1533 var didUpdate = applyAnimatedValues.fn(_this.node, _this.propsAnimated.getAnimatedValue(), objectWithoutPropertiesLoose._assertThisInitialized(objectWithoutPropertiesLoose._assertThisInitialized(_this)));
1534 if (didUpdate === false) _this.forceUpdate();
1535 }
1536 };
1537
1538 _this.attachProps(props);
1539
1540 return _this;
1541 }
1542
1543 var _proto = AnimatedComponent.prototype;
1544
1545 _proto.componentWillUnmount = function componentWillUnmount() {
1546 this.propsAnimated && this.propsAnimated.detach();
1547 };
1548
1549 _proto.setNativeProps = function setNativeProps(props) {
1550 var didUpdate = applyAnimatedValues.fn(this.node, props, this);
1551 if (didUpdate === false) this.forceUpdate();
1552 } // The system is best designed when setNativeProps is implemented. It is
1553 // able to avoid re-rendering and directly set the attributes that
1554 // changed. However, setNativeProps can only be implemented on leaf
1555 // native components. If you want to animate a composite component, you
1556 // need to re-render it. In this case, we have a fallback that uses
1557 // forceUpdate.
1558 ;
1559
1560 _proto.attachProps = function attachProps(_ref) {
1561 var forwardRef = _ref.forwardRef,
1562 nextProps = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_ref, ["forwardRef"]);
1563
1564 var oldPropsAnimated = this.propsAnimated;
1565 this.propsAnimated = new AnimatedProps(nextProps, this.callback); // When you call detach, it removes the element from the parent list
1566 // of children. If it goes to 0, then the parent also detaches itself
1567 // and so on.
1568 // An optimization is to attach the new elements and THEN detach the old
1569 // ones instead of detaching and THEN attaching.
1570 // This way the intermediate state isn't to go to 0 and trigger
1571 // this expensive recursive detaching to then re-attach everything on
1572 // the very next operation.
1573
1574 oldPropsAnimated && oldPropsAnimated.detach();
1575 };
1576
1577 _proto.shouldComponentUpdate = function shouldComponentUpdate(props) {
1578 var style = props.style,
1579 nextProps = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(props, ["style"]);
1580
1581 var _this$props = this.props,
1582 currentStyle = _this$props.style,
1583 currentProps = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_this$props, ["style"]);
1584
1585 if (!shallowEqual(currentProps, nextProps) || !shallowEqual(currentStyle, style)) {
1586 this.attachProps(props);
1587 return true;
1588 }
1589
1590 return false;
1591 };
1592
1593 _proto.render = function render() {
1594 var _this2 = this;
1595
1596 var _this$propsAnimated$g = this.propsAnimated.getValue(),
1597 scrollTop = _this$propsAnimated$g.scrollTop,
1598 scrollLeft = _this$propsAnimated$g.scrollLeft,
1599 animatedProps = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_this$propsAnimated$g, ["scrollTop", "scrollLeft"]);
1600
1601 return React__default.createElement(Component, objectWithoutPropertiesLoose._extends({}, animatedProps, {
1602 ref: function ref(node) {
1603 return _this2.node = handleRef(node, _this2.props.forwardRef);
1604 }
1605 }));
1606 };
1607
1608 return AnimatedComponent;
1609 }(React__default.Component);
1610
1611 return React__default.forwardRef(function (props, ref) {
1612 return React__default.createElement(AnimatedComponent, objectWithoutPropertiesLoose._extends({}, props, {
1613 forwardRef: ref
1614 }));
1615 });
1616}
1617
1618var config = {
1619 default: {
1620 tension: 170,
1621 friction: 26
1622 },
1623 gentle: {
1624 tension: 120,
1625 friction: 14
1626 },
1627 wobbly: {
1628 tension: 180,
1629 friction: 12
1630 },
1631 stiff: {
1632 tension: 210,
1633 friction: 20
1634 },
1635 slow: {
1636 tension: 280,
1637 friction: 60
1638 },
1639 molasses: {
1640 tension: 280,
1641 friction: 120
1642 }
1643};
1644
1645var Spring =
1646/*#__PURE__*/
1647function (_React$Component) {
1648 objectWithoutPropertiesLoose._inheritsLoose(Spring, _React$Component);
1649
1650 function Spring() {
1651 var _this;
1652
1653 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1654 args[_key] = arguments[_key];
1655 }
1656
1657 _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
1658 _this.state = {
1659 lastProps: {
1660 from: {},
1661 to: {}
1662 },
1663 propsChanged: false,
1664 internal: false
1665 };
1666 _this.controller = new Controller(null, null);
1667 _this.didUpdate = false;
1668 _this.didInject = false;
1669 _this.finished = true;
1670
1671 _this.start = function () {
1672 _this.finished = false;
1673 var wasMounted = _this.mounted;
1674
1675 _this.controller.start(function (props) {
1676 return _this.finish(objectWithoutPropertiesLoose._extends({}, props, {
1677 wasMounted: wasMounted
1678 }));
1679 }, _this.update);
1680 };
1681
1682 _this.stop = function () {
1683 return _this.controller.stop(true);
1684 };
1685
1686 _this.update = function () {
1687 return _this.mounted && _this.setState({
1688 internal: true
1689 });
1690 };
1691
1692 _this.finish = function (_ref) {
1693 var finished = _ref.finished,
1694 noChange = _ref.noChange,
1695 wasMounted = _ref.wasMounted;
1696 _this.finished = true;
1697
1698 if (_this.mounted && finished) {
1699 // Only call onRest if either we *were* mounted, or when there were changes
1700 if (_this.props.onRest && (wasMounted || !noChange)) _this.props.onRest(_this.controller.merged); // Restore end-state
1701
1702 if (_this.mounted && _this.didInject) {
1703 _this.afterInject = convertValues(_this.props);
1704
1705 _this.setState({
1706 internal: true
1707 });
1708 } // If we have an inject or values to apply after the animation we ping here
1709
1710
1711 if (_this.mounted && (_this.didInject || _this.props.after)) _this.setState({
1712 internal: true
1713 });
1714 _this.didInject = false;
1715 }
1716 };
1717
1718 return _this;
1719 }
1720
1721 var _proto = Spring.prototype;
1722
1723 _proto.componentDidMount = function componentDidMount() {
1724 // componentDidUpdate isn't called on mount, we call it here to start animating
1725 this.componentDidUpdate();
1726 this.mounted = true;
1727 };
1728
1729 _proto.componentWillUnmount = function componentWillUnmount() {
1730 // Stop all ongoing animtions
1731 this.mounted = false;
1732 this.stop();
1733 };
1734
1735 Spring.getDerivedStateFromProps = function getDerivedStateFromProps(props, _ref2) {
1736 var internal = _ref2.internal,
1737 lastProps = _ref2.lastProps;
1738 // The following is a test against props that could alter the animation
1739 var from = props.from,
1740 to = props.to,
1741 reset = props.reset,
1742 force = props.force;
1743 var propsChanged = !shallowEqual(to, lastProps.to) || !shallowEqual(from, lastProps.from) || reset && !internal || force && !internal;
1744 return {
1745 propsChanged: propsChanged,
1746 lastProps: props,
1747 internal: false
1748 };
1749 };
1750
1751 _proto.render = function render() {
1752 var _this2 = this;
1753
1754 var children = this.props.children;
1755 var propsChanged = this.state.propsChanged; // Inject phase -----------------------------------------------------------
1756 // Handle injected frames, for instance targets/web/fix-auto
1757 // An inject will return an intermediary React node which measures itself out
1758 // .. and returns a callback when the values sought after are ready, usually "auto".
1759
1760 if (this.props.inject && propsChanged && !this.injectProps) {
1761 var frame = this.props.inject(this.props, function (injectProps) {
1762 // The inject frame has rendered, now let's update animations...
1763 _this2.injectProps = injectProps;
1764
1765 _this2.setState({
1766 internal: true
1767 });
1768 }); // Render out injected frame
1769
1770 if (frame) return frame;
1771 } // Update phase -----------------------------------------------------------
1772
1773
1774 if (this.injectProps || propsChanged) {
1775 // We can potentially cause setState, but we're inside render, the flag prevents that
1776 this.didInject = false; // Update animations, this turns from/to props into AnimatedValues
1777 // An update can occur on injected props, or when own-props have changed.
1778
1779 if (this.injectProps) {
1780 this.controller.update(this.injectProps); // didInject is needed, because there will be a 3rd stage, where the original values
1781 // .. will be restored after the animation is finished. When someone animates towards
1782 // .. "auto", the end-result should be "auto", not "1999px", which would block nested
1783 // .. height/width changes.
1784
1785 this.didInject = true;
1786 } else if (propsChanged) this.controller.update(this.props); // Flag an update that occured, componentDidUpdate will start the animation later on
1787
1788
1789 this.didUpdate = true;
1790 this.afterInject = undefined;
1791 this.injectProps = undefined;
1792 } // Render phase -----------------------------------------------------------
1793 // Render out raw values or AnimatedValues depending on "native"
1794
1795
1796 var values = objectWithoutPropertiesLoose._extends({}, this.controller.getValues(), this.afterInject);
1797
1798 if (this.finished) values = objectWithoutPropertiesLoose._extends({}, values, this.props.after);
1799 return Object.keys(values).length ? children(values) : null;
1800 };
1801
1802 _proto.componentDidUpdate = function componentDidUpdate() {
1803 // The animation has to start *after* render, since at that point the scene
1804 // .. graph should be established, so we do it here. Unfortunatelly, non-native
1805 // .. animations as well as "auto"-injects call forceUpdate, so it's causing a loop.
1806 // .. didUpdate prevents that as it gets set only on prop changes.
1807 if (this.didUpdate) this.start();
1808 this.didUpdate = false;
1809 };
1810
1811 return Spring;
1812}(React__default.Component);
1813
1814Spring.defaultProps = {
1815 from: {},
1816 to: {},
1817 config: config.default,
1818 native: false,
1819 immediate: false,
1820 reset: false,
1821 force: false,
1822 inject: bugfixes
1823};
1824
1825var Trail =
1826/*#__PURE__*/
1827function (_React$PureComponent) {
1828 objectWithoutPropertiesLoose._inheritsLoose(Trail, _React$PureComponent);
1829
1830 function Trail() {
1831 var _this;
1832
1833 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1834 args[_key] = arguments[_key];
1835 }
1836
1837 _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
1838 _this.first = true;
1839 _this.instances = new Set();
1840
1841 _this.hook = function (instance, index, length, reverse) {
1842 // Add instance to set
1843 _this.instances.add(instance); // Return undefined on the first index and from then on the previous instance
1844
1845
1846 if (reverse ? index === length - 1 : index === 0) return undefined;else return Array.from(_this.instances)[reverse ? index + 1 : index - 1];
1847 };
1848
1849 return _this;
1850 }
1851
1852 var _proto = Trail.prototype;
1853
1854 _proto.render = function render() {
1855 var _this2 = this;
1856
1857 var _this$props = this.props,
1858 items = _this$props.items,
1859 _children = _this$props.children,
1860 _this$props$from = _this$props.from,
1861 from = _this$props$from === void 0 ? {} : _this$props$from,
1862 initial = _this$props.initial,
1863 reverse = _this$props.reverse,
1864 keys = _this$props.keys,
1865 delay = _this$props.delay,
1866 onRest = _this$props.onRest,
1867 props = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_this$props, ["items", "children", "from", "initial", "reverse", "keys", "delay", "onRest"]);
1868
1869 var array = toArray(items);
1870 return toArray(array).map(function (item, i) {
1871 return React__default.createElement(Spring, objectWithoutPropertiesLoose._extends({
1872 onRest: i === 0 ? onRest : null,
1873 key: typeof keys === 'function' ? keys(item) : toArray(keys)[i],
1874 from: _this2.first && initial !== void 0 ? initial || {} : from
1875 }, props, {
1876 delay: i === 0 && delay || undefined,
1877 attach: function attach(instance) {
1878 return _this2.hook(instance, i, array.length, reverse);
1879 },
1880 children: function children(props) {
1881 var child = _children(item, i);
1882
1883 return child ? child(props) : null;
1884 }
1885 }));
1886 });
1887 };
1888
1889 _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
1890 this.first = false;
1891 if (prevProps.items !== this.props.items) this.instances.clear();
1892 };
1893
1894 return Trail;
1895}(React__default.PureComponent);
1896
1897Trail.defaultProps = {
1898 keys: function keys(item) {
1899 return item;
1900 }
1901};
1902
1903var DEFAULT = '__default';
1904
1905var KeyframesImpl =
1906/*#__PURE__*/
1907function (_React$PureComponent) {
1908 objectWithoutPropertiesLoose._inheritsLoose(KeyframesImpl, _React$PureComponent);
1909
1910 function KeyframesImpl() {
1911 var _this;
1912
1913 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1914 args[_key] = arguments[_key];
1915 }
1916
1917 _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
1918 _this.guid = 0;
1919 _this.state = {
1920 props: {},
1921 resolve: function resolve() {
1922 return null;
1923 },
1924 last: true,
1925 index: 0
1926 };
1927
1928 _this.next = function (props, last, index) {
1929 if (last === void 0) {
1930 last = true;
1931 }
1932
1933 if (index === void 0) {
1934 index = 0;
1935 }
1936
1937 _this.running = true;
1938 return new Promise(function (resolve) {
1939 _this.mounted && _this.setState(function (state) {
1940 return {
1941 props: props,
1942 resolve: resolve,
1943 last: last,
1944 index: index
1945 };
1946 }, function () {
1947 return _this.running = false;
1948 });
1949 });
1950 };
1951
1952 return _this;
1953 }
1954
1955 var _proto = KeyframesImpl.prototype;
1956
1957 _proto.componentDidMount = function componentDidMount() {
1958 this.mounted = true;
1959 this.componentDidUpdate({});
1960 };
1961
1962 _proto.componentWillUnmount = function componentWillUnmount() {
1963 this.mounted = false;
1964 };
1965
1966 _proto.componentDidUpdate = function componentDidUpdate(previous) {
1967 var _this2 = this;
1968
1969 var _this$props = this.props,
1970 states = _this$props.states,
1971 f = _this$props.filter,
1972 state = _this$props.state;
1973
1974 if (previous.state !== this.props.state || this.props.reset && !this.running || !shallowEqual(states[state], previous.states[previous.state])) {
1975 if (states && state && states[state]) {
1976 (function () {
1977 var localId = ++_this2.guid;
1978 var slots = states[state];
1979
1980 if (slots) {
1981 if (Array.isArray(slots)) {
1982 var q = Promise.resolve();
1983
1984 var _loop = function _loop(i) {
1985 var index = i;
1986 var slot = slots[index];
1987 var last = index === slots.length - 1;
1988 q = q.then(function () {
1989 return localId === _this2.guid && _this2.next(f(slot), last, index);
1990 });
1991 };
1992
1993 for (var i = 0; i < slots.length; i++) {
1994 _loop(i);
1995 }
1996 } else if (typeof slots === 'function') {
1997 var index = 0;
1998 slots( // next
1999 function (props, last) {
2000 if (last === void 0) {
2001 last = false;
2002 }
2003
2004 return localId === _this2.guid && _this2.next(f(props), last, index++);
2005 }, // cancel
2006 function () {
2007 return requestFrame(function () {
2008 return _this2.instance && _this2.instance.stop();
2009 });
2010 }, // ownprops
2011 _this2.props);
2012 } else {
2013 _this2.next(f(states[state]));
2014 }
2015 }
2016 })();
2017 }
2018 }
2019 };
2020
2021 _proto.render = function render() {
2022 var _this3 = this;
2023
2024 var _this$state = this.state,
2025 props = _this$state.props,
2026 resolve = _this$state.resolve,
2027 last = _this$state.last,
2028 index = _this$state.index;
2029 if (!props || Object.keys(props).length === 0) return null;
2030
2031 var _this$props2 = this.props,
2032 state = _this$props2.state,
2033 filter = _this$props2.filter,
2034 states = _this$props2.states,
2035 config = _this$props2.config,
2036 Component = _this$props2.primitive,
2037 _onRest = _this$props2.onRest,
2038 forwardRef = _this$props2.forwardRef,
2039 rest = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_this$props2, ["state", "filter", "states", "config", "primitive", "onRest", "forwardRef"]); // Arrayed configs need an index to process
2040
2041
2042 if (Array.isArray(config)) config = config[index];
2043 return React__default.createElement(Component, objectWithoutPropertiesLoose._extends({
2044 ref: function ref(_ref) {
2045 return _this3.instance = handleRef(_ref, forwardRef);
2046 },
2047 config: config
2048 }, rest, props, {
2049 onRest: function onRest(args) {
2050 resolve(args);
2051 if (_onRest && last) _onRest(args);
2052 }
2053 }));
2054 };
2055
2056 return KeyframesImpl;
2057}(React__default.PureComponent);
2058
2059KeyframesImpl.defaultProps = {
2060 state: DEFAULT
2061};
2062var Keyframes = React__default.forwardRef(function (props, ref) {
2063 return React__default.createElement(KeyframesImpl, objectWithoutPropertiesLoose._extends({}, props, {
2064 forwardRef: ref
2065 }));
2066});
2067
2068Keyframes.create = function (primitive) {
2069 return function (states, filter) {
2070 var _states;
2071
2072 if (filter === void 0) {
2073 filter = function filter(states) {
2074 return states;
2075 };
2076 }
2077
2078 if (typeof states === 'function' || Array.isArray(states)) states = (_states = {}, _states[DEFAULT] = states, _states);
2079 return function (props) {
2080 return React__default.createElement(KeyframesImpl, objectWithoutPropertiesLoose._extends({
2081 primitive: primitive,
2082 states: states,
2083 filter: filter
2084 }, props));
2085 };
2086 };
2087};
2088
2089Keyframes.Spring = function (states) {
2090 return Keyframes.create(Spring)(states, interpolateTo);
2091};
2092
2093Keyframes.Trail = function (states) {
2094 return Keyframes.create(Trail)(states, interpolateTo);
2095};
2096
2097var guid = 0;
2098
2099var get = function get(props) {
2100 var items = props.items,
2101 keys = props.keys,
2102 rest = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(props, ["items", "keys"]);
2103
2104 items = toArray(items !== void 0 ? items : null);
2105 keys = typeof keys === 'function' ? items.map(keys) : toArray(keys); // Make sure numeric keys are interpreted as Strings (5 !== "5")
2106
2107 return objectWithoutPropertiesLoose._extends({
2108 items: items,
2109 keys: keys.map(function (key) {
2110 return String(key);
2111 })
2112 }, rest);
2113};
2114
2115var Transition =
2116/*#__PURE__*/
2117function (_React$PureComponent) {
2118 objectWithoutPropertiesLoose._inheritsLoose(Transition, _React$PureComponent);
2119
2120 var _proto = Transition.prototype;
2121
2122 _proto.componentDidMount = function componentDidMount() {
2123 this.mounted = true;
2124 };
2125
2126 _proto.componentWillUnmount = function componentWillUnmount() {
2127 this.mounted = false;
2128 };
2129
2130 function Transition(prevProps) {
2131 var _this;
2132
2133 _this = _React$PureComponent.call(this, prevProps) || this;
2134
2135 _this.destroyItem = function (item, key, state) {
2136 return function (values) {
2137 var _this$props = _this.props,
2138 onRest = _this$props.onRest,
2139 onDestroyed = _this$props.onDestroyed;
2140
2141 if (_this.mounted) {
2142 onDestroyed && onDestroyed(item);
2143
2144 _this.setState(function (_ref) {
2145 var deleted = _ref.deleted;
2146 return {
2147 deleted: deleted.filter(function (t) {
2148 return t.key !== key;
2149 })
2150 };
2151 });
2152
2153 onRest && onRest(item, state, values);
2154 }
2155 };
2156 };
2157
2158 _this.state = {
2159 first: true,
2160 transitions: [],
2161 current: {},
2162 deleted: [],
2163 prevProps: prevProps
2164 };
2165 return _this;
2166 }
2167
2168 Transition.getDerivedStateFromProps = function getDerivedStateFromProps(props, _ref2) {
2169 var first = _ref2.first,
2170 prevProps = _ref2.prevProps,
2171 state = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_ref2, ["first", "prevProps"]);
2172
2173 var _get = get(props),
2174 items = _get.items,
2175 keys = _get.keys,
2176 initial = _get.initial,
2177 from = _get.from,
2178 enter = _get.enter,
2179 leave = _get.leave,
2180 update = _get.update,
2181 _get$trail = _get.trail,
2182 trail = _get$trail === void 0 ? 0 : _get$trail,
2183 unique = _get.unique,
2184 config = _get.config;
2185
2186 var _get2 = get(prevProps),
2187 _keys = _get2.keys,
2188 _items = _get2.items;
2189
2190 var current = objectWithoutPropertiesLoose._extends({}, state.current);
2191
2192 var deleted = [].concat(state.deleted); // Compare next keys with current keys
2193
2194 var currentKeys = Object.keys(current);
2195 var currentSet = new Set(currentKeys);
2196 var nextSet = new Set(keys);
2197 var added = keys.filter(function (item) {
2198 return !currentSet.has(item);
2199 });
2200 var removed = state.transitions.filter(function (item) {
2201 return !item.destroyed && !nextSet.has(item.originalKey);
2202 }).map(function (i) {
2203 return i.originalKey;
2204 });
2205 var updated = keys.filter(function (item) {
2206 return currentSet.has(item);
2207 });
2208 var delay = 0;
2209 added.forEach(function (key) {
2210 // In unique mode, remove fading out transitions if their key comes in again
2211 if (unique && deleted.find(function (d) {
2212 return d.originalKey === key;
2213 })) deleted = deleted.filter(function (t) {
2214 return t.originalKey !== key;
2215 });
2216 var keyIndex = keys.indexOf(key);
2217 var item = items[keyIndex];
2218 var state = 'enter';
2219 current[key] = {
2220 state: state,
2221 originalKey: key,
2222 key: unique ? String(key) : guid++,
2223 item: item,
2224 trail: delay = delay + trail,
2225 config: callProp(config, item, state),
2226 from: callProp(first ? initial !== void 0 ? initial || {} : from : from, item),
2227 to: callProp(enter, item)
2228 };
2229 });
2230 removed.forEach(function (key) {
2231 var keyIndex = _keys.indexOf(key);
2232
2233 var item = _items[keyIndex];
2234 var state = 'leave';
2235 deleted.push(objectWithoutPropertiesLoose._extends({}, current[key], {
2236 state: state,
2237 destroyed: true,
2238 left: _keys[Math.max(0, keyIndex - 1)],
2239 right: _keys[Math.min(_keys.length, keyIndex + 1)],
2240 trail: delay = delay + trail,
2241 config: callProp(config, item, state),
2242 to: callProp(leave, item)
2243 }));
2244 delete current[key];
2245 });
2246 updated.forEach(function (key) {
2247 var keyIndex = keys.indexOf(key);
2248 var item = items[keyIndex];
2249 var state = 'update';
2250 current[key] = objectWithoutPropertiesLoose._extends({}, current[key], {
2251 item: item,
2252 state: state,
2253 trail: delay = delay + trail,
2254 config: callProp(config, item, state),
2255 to: callProp(update, item)
2256 });
2257 }); // This tries to restore order for deleted items by finding their last known siblings
2258
2259 var out = keys.map(function (key) {
2260 return current[key];
2261 });
2262 deleted.forEach(function (_ref3) {
2263 var left = _ref3.left,
2264 right = _ref3.right,
2265 transition = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_ref3, ["left", "right"]);
2266
2267 var pos; // Was it the element on the left, if yes, move there ...
2268
2269 if ((pos = out.findIndex(function (t) {
2270 return t.originalKey === left;
2271 })) !== -1) pos += 1; // Or how about the element on the right ...
2272
2273 if (pos === -1) pos = out.findIndex(function (t) {
2274 return t.originalKey === right;
2275 }); // Maybe we'll find it in the list of deleted items
2276
2277 if (pos === -1) pos = deleted.findIndex(function (t) {
2278 return t.originalKey === left;
2279 }); // Checking right side as well
2280
2281 if (pos === -1) pos = deleted.findIndex(function (t) {
2282 return t.originalKey === right;
2283 }); // And if nothing else helps, move it to the start ¯\_(ツ)_/¯
2284
2285 pos = Math.max(0, pos);
2286 out = [].concat(out.slice(0, pos), [transition], out.slice(pos));
2287 });
2288 return {
2289 first: first && added.length === 0,
2290 transitions: out,
2291 current: current,
2292 deleted: deleted,
2293 prevProps: props
2294 };
2295 };
2296
2297 _proto.render = function render() {
2298 var _this2 = this;
2299
2300 var _this$props2 = this.props,
2301 initial = _this$props2.initial,
2302 _this$props2$from = _this$props2.from,
2303 _this$props2$enter = _this$props2.enter,
2304 _this$props2$leave = _this$props2.leave,
2305 _this$props2$update = _this$props2.update,
2306 onDestroyed = _this$props2.onDestroyed,
2307 keys = _this$props2.keys,
2308 items = _this$props2.items,
2309 onFrame = _this$props2.onFrame,
2310 onRest = _this$props2.onRest,
2311 onStart = _this$props2.onStart,
2312 trail = _this$props2.trail,
2313 config = _this$props2.config,
2314 _children = _this$props2.children,
2315 unique = _this$props2.unique,
2316 reset = _this$props2.reset,
2317 extra = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_this$props2, ["initial", "from", "enter", "leave", "update", "onDestroyed", "keys", "items", "onFrame", "onRest", "onStart", "trail", "config", "children", "unique", "reset"]);
2318
2319 return this.state.transitions.map(function (_ref4, i) {
2320 var _ref5;
2321
2322 var state = _ref4.state,
2323 key = _ref4.key,
2324 item = _ref4.item,
2325 from = _ref4.from,
2326 to = _ref4.to,
2327 trail = _ref4.trail,
2328 config = _ref4.config,
2329 destroyed = _ref4.destroyed;
2330 return React__default.createElement(Keyframes, objectWithoutPropertiesLoose._extends({
2331 reset: reset && state === 'enter',
2332 primitive: Spring,
2333 state: state,
2334 filter: interpolateTo,
2335 states: (_ref5 = {}, _ref5[state] = to, _ref5),
2336 key: key,
2337 onRest: destroyed ? _this2.destroyItem(item, key, state) : onRest && function (values) {
2338 return onRest(item, state, values);
2339 },
2340 onStart: onStart && function () {
2341 return onStart(item, state);
2342 },
2343 onFrame: onFrame && function (values) {
2344 return onFrame(item, state, values);
2345 },
2346 delay: trail,
2347 config: config
2348 }, extra, {
2349 from: from,
2350 children: function children(props) {
2351 var child = _children(item, state, i);
2352
2353 return child ? child(props) : null;
2354 }
2355 }));
2356 });
2357 };
2358
2359 return Transition;
2360}(React__default.PureComponent);
2361
2362Transition.defaultProps = {
2363 keys: function keys(item) {
2364 return item;
2365 },
2366 unique: false,
2367 reset: false
2368};
2369
2370var domElements = ['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', 'marquee', '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', // SVG
2371'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
2372var extendedAnimated = domElements.reduce(function (acc, element) {
2373 acc[element] = createAnimatedComponent(element);
2374 return acc;
2375}, createAnimatedComponent);
2376
2377exports.Spring = Spring;
2378exports.Transition = Transition;
2379exports.extendedAnimated = extendedAnimated;
2380//# sourceMappingURL=web-d0294535.js.map