@micromag/core 0.3.423 → 0.3.429
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/assets/css/styles.css +13 -13
- package/assets/css/vendor.css +1 -1
- package/es/components.js +32 -48
- package/es/hooks.js +9 -8
- package/es/index.js +202 -120
- package/es/utils.js +109 -5
- package/lib/components.js +1101 -1157
- package/lib/contexts.js +199 -233
- package/lib/hooks.js +89 -124
- package/lib/index.js +660 -603
- package/lib/utils.js +155 -73
- package/package.json +22 -7
- package/scss/styles.scss +1 -1
- package/scss/upload.scss +2 -2
- package/scss/vendor.scss +1 -1
package/lib/hooks.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
6
4
|
var react = require('react');
|
|
7
5
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
@@ -25,40 +23,6 @@ var contexts = require('@micromag/core/contexts');
|
|
|
25
23
|
var cssMediaquery = require('css-mediaquery');
|
|
26
24
|
var clamp = require('lodash/clamp');
|
|
27
25
|
|
|
28
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
29
|
-
|
|
30
|
-
function _interopNamespace(e) {
|
|
31
|
-
if (e && e.__esModule) return e;
|
|
32
|
-
var n = Object.create(null);
|
|
33
|
-
if (e) {
|
|
34
|
-
Object.keys(e).forEach(function (k) {
|
|
35
|
-
if (k !== 'default') {
|
|
36
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
37
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
get: function () { return e[k]; }
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
n["default"] = e;
|
|
45
|
-
return Object.freeze(n);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
49
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
50
|
-
var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
|
|
51
|
-
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
|
|
52
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
53
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
54
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
55
|
-
var screenfull__default = /*#__PURE__*/_interopDefaultLegacy(screenfull);
|
|
56
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
57
|
-
var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
|
|
58
|
-
var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
|
|
59
|
-
var raf__default = /*#__PURE__*/_interopDefaultLegacy(raf);
|
|
60
|
-
var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
|
|
61
|
-
|
|
62
26
|
function useActivityDetector() {
|
|
63
27
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
64
28
|
_ref$element = _ref.element,
|
|
@@ -69,7 +33,7 @@ function useActivityDetector() {
|
|
|
69
33
|
timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
|
|
70
34
|
var ref = react.useRef(providedElement);
|
|
71
35
|
var _useState = react.useState(false),
|
|
72
|
-
_useState2 =
|
|
36
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
73
37
|
detected = _useState2[0],
|
|
74
38
|
setDetected = _useState2[1];
|
|
75
39
|
var detectedRef = react.useRef(detected);
|
|
@@ -161,9 +125,9 @@ var useFormattedDate = function useFormattedDate() {
|
|
|
161
125
|
_ref$showToday = _ref.showToday,
|
|
162
126
|
showToday = _ref$showToday === void 0 ? true : _ref$showToday;
|
|
163
127
|
var intl = reactIntl.useIntl();
|
|
164
|
-
var today =
|
|
128
|
+
var today = dayjs();
|
|
165
129
|
return react.useCallback(function (date) {
|
|
166
|
-
var dateToFormat =
|
|
130
|
+
var dateToFormat = isString(date) ? dayjs(date) : date;
|
|
167
131
|
if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
|
|
168
132
|
return intl.formatMessage({
|
|
169
133
|
id: "v4Qtl9",
|
|
@@ -173,7 +137,7 @@ var useFormattedDate = function useFormattedDate() {
|
|
|
173
137
|
}]
|
|
174
138
|
});
|
|
175
139
|
}
|
|
176
|
-
return intl.formatDate(
|
|
140
|
+
return intl.formatDate(dayjs(date).toDate(), _objectSpread({
|
|
177
141
|
year: 'numeric',
|
|
178
142
|
month: 'long',
|
|
179
143
|
day: '2-digit'
|
|
@@ -189,9 +153,9 @@ var useFormattedTime = function useFormattedTime() {
|
|
|
189
153
|
_ref2$timeGap = _ref2.timeGap,
|
|
190
154
|
timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
|
|
191
155
|
var intl = reactIntl.useIntl();
|
|
192
|
-
var now =
|
|
156
|
+
var now = dayjs();
|
|
193
157
|
return react.useCallback(function (date) {
|
|
194
|
-
var dateToFormat =
|
|
158
|
+
var dateToFormat = isString(date) ? dayjs(date) : date;
|
|
195
159
|
if (showNow && dateToFormat.format('YYYY-MM-DD') === now.format('YYYY-MM-DD') && dateToFormat.hour() === now.hour() && dateToFormat.minute() > now.minute() - timeGap && dateToFormat.minute() < now.minute() + timeGap) {
|
|
196
160
|
return intl.formatMessage({
|
|
197
161
|
id: "3na7F8",
|
|
@@ -201,7 +165,7 @@ var useFormattedTime = function useFormattedTime() {
|
|
|
201
165
|
}]
|
|
202
166
|
});
|
|
203
167
|
}
|
|
204
|
-
return intl.formatTime(dateToFormat.toDate(),
|
|
168
|
+
return intl.formatTime(dateToFormat.toDate(), _objectSpread({
|
|
205
169
|
hour: 'numeric',
|
|
206
170
|
minute: 'numeric'
|
|
207
171
|
}, format));
|
|
@@ -247,17 +211,17 @@ function useDragProgress() {
|
|
|
247
211
|
var refDragging = react.useRef(false);
|
|
248
212
|
var refProgress = react.useRef(wantedProgress);
|
|
249
213
|
var _useState = react.useState(false),
|
|
250
|
-
_useState2 =
|
|
214
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
251
215
|
dragging = _useState2[0],
|
|
252
216
|
setDragging = _useState2[1];
|
|
253
217
|
var spring = react.useCallback(function () {
|
|
254
|
-
return
|
|
218
|
+
return _objectSpread({
|
|
255
219
|
progress: wantedProgress,
|
|
256
220
|
immediate: dragging || disabled
|
|
257
221
|
}, springParams);
|
|
258
222
|
}, [wantedProgress, disabled]);
|
|
259
223
|
var _useSpring = core$1.useSpring(spring),
|
|
260
|
-
_useSpring2 =
|
|
224
|
+
_useSpring2 = _slicedToArray(_useSpring, 2),
|
|
261
225
|
progress = _useSpring2[0].progress,
|
|
262
226
|
api = _useSpring2[1];
|
|
263
227
|
var onDrag = react.useCallback(function (gestureState) {
|
|
@@ -314,21 +278,21 @@ var useForm = function useForm() {
|
|
|
314
278
|
providedFields = _ref$fields === void 0 ? [] : _ref$fields,
|
|
315
279
|
_ref$injectInFields = _ref.injectInFields,
|
|
316
280
|
injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
|
|
317
|
-
opts =
|
|
281
|
+
opts = _objectWithoutProperties(_ref, _excluded$3);
|
|
318
282
|
var fieldsNames = react.useMemo(function () {
|
|
319
283
|
return providedFields.length > 0 ? providedFields.map(function (_ref2) {
|
|
320
284
|
var name = _ref2.name;
|
|
321
285
|
return name;
|
|
322
286
|
}) : [];
|
|
323
287
|
}, [providedFields]);
|
|
324
|
-
var _useBaseForm = forms.useForm(
|
|
288
|
+
var _useBaseForm = forms.useForm(_objectSpread({
|
|
325
289
|
fields: fieldsNames
|
|
326
290
|
}, opts)),
|
|
327
291
|
fields = _useBaseForm.fields,
|
|
328
|
-
form =
|
|
329
|
-
return
|
|
292
|
+
form = _objectWithoutProperties(_useBaseForm, _excluded2);
|
|
293
|
+
return _objectSpread(_objectSpread({}, form), {}, {
|
|
330
294
|
fields: injectInFields ? providedFields.map(function (it) {
|
|
331
|
-
return
|
|
295
|
+
return _objectSpread(_objectSpread({}, it), fields[it.name] || null);
|
|
332
296
|
}) : providedFields
|
|
333
297
|
});
|
|
334
298
|
};
|
|
@@ -347,12 +311,11 @@ var useFormTransition = function useFormTransition() {
|
|
|
347
311
|
return null;
|
|
348
312
|
}, [paths]);
|
|
349
313
|
var name = react.useMemo(function () {
|
|
350
|
-
var _classNames, _classNames2, _classNames3;
|
|
351
314
|
return {
|
|
352
|
-
enter:
|
|
353
|
-
enterActive:
|
|
315
|
+
enter: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.enterRight, direction === 'right'), styles.enterLeft, direction === 'left'), styles.enterTop, direction === 'top'), styles.enterBottom, direction === 'bottom')) || 'none',
|
|
316
|
+
enterActive: classNames(_defineProperty(_defineProperty({}, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), styles.enterActiveVertical, direction === 'top' || direction === 'bottom')) || 'none',
|
|
354
317
|
leave: styles.leave || 'none',
|
|
355
|
-
leaveActive:
|
|
318
|
+
leaveActive: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.leaveActiveRight, direction === 'right'), styles.leaveActiveLeft, direction === 'left'), styles.leaveActiveTop, direction === 'top'), styles.leaveActiveBottom, direction === 'bottom')) || 'none'
|
|
356
319
|
};
|
|
357
320
|
}, [direction]);
|
|
358
321
|
return {
|
|
@@ -363,23 +326,23 @@ var useFormTransition = function useFormTransition() {
|
|
|
363
326
|
};
|
|
364
327
|
|
|
365
328
|
var useFullscreen = function useFullscreen(element) {
|
|
366
|
-
var enabled =
|
|
329
|
+
var enabled = screenfull.isEnabled;
|
|
367
330
|
var _useState = react.useState(false),
|
|
368
|
-
_useState2 =
|
|
331
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
369
332
|
active = _useState2[0],
|
|
370
333
|
setActive = _useState2[1];
|
|
371
334
|
var fullscreen = react.useCallback(function () {
|
|
372
|
-
if (
|
|
335
|
+
if (screenfull.isEnabled) {
|
|
373
336
|
if (typeof element !== 'undefined' && element !== null) {
|
|
374
|
-
|
|
337
|
+
screenfull.request(element);
|
|
375
338
|
} else {
|
|
376
|
-
|
|
339
|
+
screenfull.request();
|
|
377
340
|
}
|
|
378
341
|
}
|
|
379
342
|
}, [element]);
|
|
380
343
|
var unFullscreen = react.useCallback(function () {
|
|
381
|
-
if (
|
|
382
|
-
|
|
344
|
+
if (screenfull.isEnabled) {
|
|
345
|
+
screenfull.exit();
|
|
383
346
|
}
|
|
384
347
|
}, []);
|
|
385
348
|
var toggle = react.useCallback(function () {
|
|
@@ -391,14 +354,14 @@ var useFullscreen = function useFullscreen(element) {
|
|
|
391
354
|
}, [active, fullscreen, unFullscreen]);
|
|
392
355
|
react.useEffect(function () {
|
|
393
356
|
var onChange = function onChange() {
|
|
394
|
-
setActive(
|
|
357
|
+
setActive(screenfull.isFullscreen);
|
|
395
358
|
};
|
|
396
|
-
if (
|
|
397
|
-
|
|
359
|
+
if (screenfull.isEnabled) {
|
|
360
|
+
screenfull.on('change', onChange);
|
|
398
361
|
}
|
|
399
362
|
return function () {
|
|
400
|
-
if (
|
|
401
|
-
|
|
363
|
+
if (screenfull.isEnabled) {
|
|
364
|
+
screenfull.off('change', onChange);
|
|
402
365
|
}
|
|
403
366
|
};
|
|
404
367
|
}, []);
|
|
@@ -433,21 +396,21 @@ var createObserver = function createObserver(Observer) {
|
|
|
433
396
|
}) || null;
|
|
434
397
|
if (currentSubscriber !== null) {
|
|
435
398
|
return subscribers.map(function (it) {
|
|
436
|
-
return it.element === element && it.callbacks.indexOf(callback) === -1 ?
|
|
437
|
-
callbacks: [].concat(
|
|
399
|
+
return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
|
|
400
|
+
callbacks: [].concat(_toConsumableArray(it.callbacks), [callback])
|
|
438
401
|
}) : it;
|
|
439
402
|
}).filter(function (it) {
|
|
440
403
|
return it.callbacks.length > 0;
|
|
441
404
|
});
|
|
442
405
|
}
|
|
443
|
-
return [].concat(
|
|
406
|
+
return [].concat(_toConsumableArray(subscribers), [{
|
|
444
407
|
element: element,
|
|
445
408
|
callbacks: [callback]
|
|
446
409
|
}]);
|
|
447
410
|
};
|
|
448
411
|
var removeSubscriber = function removeSubscriber(element, callback) {
|
|
449
412
|
return subscribers.map(function (it) {
|
|
450
|
-
return it.element === element ?
|
|
413
|
+
return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
|
|
451
414
|
callbacks: it.callbacks.filter(function (subCallback) {
|
|
452
415
|
return subCallback !== callback;
|
|
453
416
|
})
|
|
@@ -527,7 +490,7 @@ var useObserver = function useObserver(Observer) {
|
|
|
527
490
|
_opts$disabled = opts.disabled,
|
|
528
491
|
disabled = _opts$disabled === void 0 ? false : _opts$disabled;
|
|
529
492
|
var _useState = react.useState(initialEntry),
|
|
530
|
-
_useState2 =
|
|
493
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
531
494
|
entry = _useState2[0],
|
|
532
495
|
setEntry = _useState2[1];
|
|
533
496
|
var nodeRef = react.useRef(null);
|
|
@@ -621,7 +584,7 @@ var useResizeObserver = function useResizeObserver() {
|
|
|
621
584
|
var useDimensionObserver = function useDimensionObserver() {
|
|
622
585
|
var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
|
|
623
586
|
entry = _useResizeObserver.entry,
|
|
624
|
-
rest =
|
|
587
|
+
rest = _objectWithoutProperties(_useResizeObserver, _excluded$2);
|
|
625
588
|
var _ref5 = entry || {},
|
|
626
589
|
_ref5$contentRect = _ref5.contentRect,
|
|
627
590
|
contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
|
|
@@ -632,12 +595,12 @@ var useDimensionObserver = function useDimensionObserver() {
|
|
|
632
595
|
width = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
633
596
|
_ref6$height = _ref6.height,
|
|
634
597
|
height = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
635
|
-
var _ref7 =
|
|
598
|
+
var _ref7 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
|
|
636
599
|
_ref7$blockSize = _ref7.blockSize,
|
|
637
600
|
blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
|
|
638
601
|
_ref7$inlineSize = _ref7.inlineSize,
|
|
639
602
|
inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
|
|
640
|
-
return
|
|
603
|
+
return _objectSpread(_objectSpread({}, rest), {}, {
|
|
641
604
|
entry: entry,
|
|
642
605
|
width: inlineSize || width,
|
|
643
606
|
height: blockSize || height
|
|
@@ -682,7 +645,7 @@ var addFontLoading = function addFontLoading(name) {
|
|
|
682
645
|
fontsMap.active = fontsMap.active.filter(function (it) {
|
|
683
646
|
return it !== name;
|
|
684
647
|
});
|
|
685
|
-
fontsMap.loading = [].concat(
|
|
648
|
+
fontsMap.loading = [].concat(_toConsumableArray(fontsMap.loading), [name]);
|
|
686
649
|
};
|
|
687
650
|
var removeFontLoading = function removeFontLoading(name) {
|
|
688
651
|
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
@@ -693,16 +656,16 @@ var addFontActive = function addFontActive(name) {
|
|
|
693
656
|
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
694
657
|
return it !== name;
|
|
695
658
|
});
|
|
696
|
-
fontsMap.active = [].concat(
|
|
659
|
+
fontsMap.active = [].concat(_toConsumableArray(fontsMap.active), [name]);
|
|
697
660
|
};
|
|
698
661
|
var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
699
662
|
var _useState = react.useState(false),
|
|
700
|
-
_useState2 =
|
|
663
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
701
664
|
loaded = _useState2[0],
|
|
702
665
|
setLoaded = _useState2[1];
|
|
703
666
|
react.useEffect(function () {
|
|
704
667
|
var config = fonts.reduce(function (newConfig, font) {
|
|
705
|
-
var _ref =
|
|
668
|
+
var _ref = isObject(font) ? font : {
|
|
706
669
|
type: 'system',
|
|
707
670
|
name: font
|
|
708
671
|
},
|
|
@@ -711,14 +674,14 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
711
674
|
_ref$variants = _ref.variants,
|
|
712
675
|
variants = _ref$variants === void 0 ? [] : _ref$variants;
|
|
713
676
|
if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
|
|
714
|
-
return
|
|
715
|
-
families: [].concat(
|
|
677
|
+
return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
|
|
678
|
+
families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
|
|
716
679
|
return it !== null;
|
|
717
680
|
}).join(',')].filter(function (it) {
|
|
718
681
|
return it !== null && it.length > 0;
|
|
719
682
|
}).join(':') : [name, (variants !== null ? [{
|
|
720
683
|
fvd: 'n4'
|
|
721
|
-
}].concat(
|
|
684
|
+
}].concat(_toConsumableArray(variants)) : []).map(function (_ref2) {
|
|
722
685
|
var _ref2$fvd = _ref2.fvd,
|
|
723
686
|
fvd = _ref2$fvd === void 0 ? null : _ref2$fvd,
|
|
724
687
|
_ref2$weight = _ref2.weight,
|
|
@@ -741,9 +704,9 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
741
704
|
}, null);
|
|
742
705
|
var hasConfig = config !== null;
|
|
743
706
|
if (hasConfig && typeof window !== 'undefined') {
|
|
744
|
-
|
|
707
|
+
import('webfontloader').then(function (_ref3) {
|
|
745
708
|
var WebFont = _ref3["default"];
|
|
746
|
-
return WebFont.load(
|
|
709
|
+
return WebFont.load(_objectSpread(_objectSpread({}, config), {}, {
|
|
747
710
|
timeout: 3000,
|
|
748
711
|
active: function active() {
|
|
749
712
|
return setLoaded(true);
|
|
@@ -805,11 +768,11 @@ var useLongPress = function useLongPress() {
|
|
|
805
768
|
_ref$delay = _ref.delay,
|
|
806
769
|
delay = _ref$delay === void 0 ? 350 : _ref$delay;
|
|
807
770
|
var _useState = react.useState(false),
|
|
808
|
-
_useState2 =
|
|
771
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
809
772
|
pressed = _useState2[0],
|
|
810
773
|
setPressed = _useState2[1];
|
|
811
774
|
var _useState3 = react.useState(false),
|
|
812
|
-
_useState4 =
|
|
775
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
813
776
|
triggered = _useState4[0],
|
|
814
777
|
setTriggered = _useState4[1];
|
|
815
778
|
var timeout = react.useRef(null);
|
|
@@ -925,31 +888,31 @@ var useMediaApi = function useMediaApi() {
|
|
|
925
888
|
onLoadedMetadata = _ref$onLoadedMetadata === void 0 ? null : _ref$onLoadedMetadata;
|
|
926
889
|
var ref = react.useRef(null);
|
|
927
890
|
var _useState = react.useState(null),
|
|
928
|
-
_useState2 =
|
|
891
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
929
892
|
currentTime = _useState2[0],
|
|
930
893
|
setCurrentTime = _useState2[1];
|
|
931
894
|
var _useState3 = react.useState(null),
|
|
932
|
-
_useState4 =
|
|
895
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
933
896
|
duration = _useState4[0],
|
|
934
897
|
setDuration = _useState4[1];
|
|
935
898
|
var _useState5 = react.useState(false),
|
|
936
|
-
_useState6 =
|
|
899
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
937
900
|
playing = _useState6[0],
|
|
938
901
|
setPlaying = _useState6[1];
|
|
939
902
|
var _useState7 = react.useState(false),
|
|
940
|
-
_useState8 =
|
|
903
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
941
904
|
ready = _useState8[0],
|
|
942
905
|
setReady = _useState8[1];
|
|
943
906
|
var _useState9 = react.useState(false),
|
|
944
|
-
_useState10 =
|
|
907
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
945
908
|
dataReady = _useState10[0],
|
|
946
909
|
setDataReady = _useState10[1];
|
|
947
910
|
var _useState11 = react.useState(true),
|
|
948
|
-
_useState12 =
|
|
911
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
949
912
|
initialPlay = _useState12[0],
|
|
950
913
|
setInitialPlay = _useState12[1];
|
|
951
914
|
var _useState13 = react.useState(false),
|
|
952
|
-
_useState14 =
|
|
915
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
953
916
|
suspended = _useState14[0],
|
|
954
917
|
setSuspended = _useState14[1];
|
|
955
918
|
var progressStepsReached = react.useRef({});
|
|
@@ -1232,7 +1195,7 @@ function useMediaCurrentTime(element) {
|
|
|
1232
1195
|
_ref$onUpdate = _ref.onUpdate,
|
|
1233
1196
|
customOnUpdate = _ref$onUpdate === void 0 ? null : _ref$onUpdate;
|
|
1234
1197
|
var _useState = react.useState(0),
|
|
1235
|
-
_useState2 =
|
|
1198
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1236
1199
|
currentTime = _useState2[0],
|
|
1237
1200
|
setCurrentTime = _useState2[1];
|
|
1238
1201
|
var realCurrentTime = react.useRef(currentTime);
|
|
@@ -1293,7 +1256,7 @@ function useMediaDuration(element) {
|
|
|
1293
1256
|
_ref$id = _ref.id,
|
|
1294
1257
|
id = _ref$id === void 0 ? null : _ref$id;
|
|
1295
1258
|
var _useState = react.useState(element !== null ? element.duration || 0 : 0),
|
|
1296
|
-
_useState2 =
|
|
1259
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1297
1260
|
duration = _useState2[0],
|
|
1298
1261
|
setDuration = _useState2[1];
|
|
1299
1262
|
var realDuration = react.useRef(duration);
|
|
@@ -1306,6 +1269,8 @@ function useMediaDuration(element) {
|
|
|
1306
1269
|
}
|
|
1307
1270
|
react.useEffect(function () {
|
|
1308
1271
|
if (element === null) {
|
|
1272
|
+
realDuration.current = 0;
|
|
1273
|
+
setDuration(0);
|
|
1309
1274
|
return function () {};
|
|
1310
1275
|
}
|
|
1311
1276
|
function updateDuration() {
|
|
@@ -1353,22 +1318,22 @@ function useMediaProgress(media) {
|
|
|
1353
1318
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1354
1319
|
_ref$disabled = _ref.disabled,
|
|
1355
1320
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1356
|
-
props =
|
|
1321
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
1357
1322
|
var _useState = react.useState(!disabled),
|
|
1358
|
-
_useState2 =
|
|
1323
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1359
1324
|
playing = _useState2[0],
|
|
1360
1325
|
setPlaying = _useState2[1];
|
|
1361
|
-
var duration = useMediaDuration(media,
|
|
1326
|
+
var duration = useMediaDuration(media, _objectSpread({
|
|
1362
1327
|
disabled: disabled || !playing
|
|
1363
1328
|
}, props));
|
|
1364
1329
|
var _useState3 = react.useState(0),
|
|
1365
|
-
_useState4 =
|
|
1330
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1366
1331
|
progress = _useState4[0],
|
|
1367
1332
|
setProgress = _useState4[1];
|
|
1368
1333
|
var realProgressRef = react.useRef(progress);
|
|
1369
|
-
var updateTimeRef = react.useRef(
|
|
1334
|
+
var updateTimeRef = react.useRef(Date.now() / 1000);
|
|
1370
1335
|
var updateProgress = react.useCallback(function (newProgress) {
|
|
1371
|
-
updateTimeRef.current =
|
|
1336
|
+
updateTimeRef.current = Date.now() / 1000;
|
|
1372
1337
|
realProgressRef.current = newProgress;
|
|
1373
1338
|
setProgress(newProgress);
|
|
1374
1339
|
}, [setProgress]);
|
|
@@ -1436,18 +1401,18 @@ function useMediaProgress(media) {
|
|
|
1436
1401
|
if (canceled) {
|
|
1437
1402
|
return;
|
|
1438
1403
|
}
|
|
1439
|
-
var newTime =
|
|
1404
|
+
var newTime = Date.now() / 1000;
|
|
1440
1405
|
var elapsed = newTime - updateTimeRef.current;
|
|
1441
1406
|
updateTimeRef.current = newTime;
|
|
1442
|
-
var step = elapsed /
|
|
1407
|
+
var step = elapsed / duration;
|
|
1443
1408
|
var newProgress = realProgressRef.current + step;
|
|
1444
1409
|
updateProgress(newProgress);
|
|
1445
|
-
handle =
|
|
1410
|
+
handle = raf(tick);
|
|
1446
1411
|
}
|
|
1447
1412
|
tick();
|
|
1448
1413
|
return function () {
|
|
1449
1414
|
canceled = true;
|
|
1450
|
-
|
|
1415
|
+
raf.cancel(handle);
|
|
1451
1416
|
};
|
|
1452
1417
|
}, [media, playing, disabled, duration, updateProgress]);
|
|
1453
1418
|
return realProgressRef.current;
|
|
@@ -1458,7 +1423,7 @@ function useMediaReady(element) {
|
|
|
1458
1423
|
_ref$id = _ref.id,
|
|
1459
1424
|
id = _ref$id === void 0 ? null : _ref$id;
|
|
1460
1425
|
var _useState = react.useState(element !== null && element.readyState > 0),
|
|
1461
|
-
_useState2 =
|
|
1426
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1462
1427
|
ready = _useState2[0],
|
|
1463
1428
|
setReady = _useState2[1];
|
|
1464
1429
|
var realReady = react.useRef(ready);
|
|
@@ -1528,7 +1493,7 @@ var useMediasParser = function useMediasParser() {
|
|
|
1528
1493
|
function useMediaThumbnail(media) {
|
|
1529
1494
|
var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
1530
1495
|
var thumbnail = react.useMemo(function () {
|
|
1531
|
-
if (
|
|
1496
|
+
if (isObject(file)) {
|
|
1532
1497
|
return file;
|
|
1533
1498
|
}
|
|
1534
1499
|
var _ref = media || {},
|
|
@@ -1574,7 +1539,7 @@ function useMediaWaveform(media) {
|
|
|
1574
1539
|
_ref3$waveform = _ref3.waveform,
|
|
1575
1540
|
waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
|
|
1576
1541
|
var _useState = react.useState(null),
|
|
1577
|
-
_useState2 =
|
|
1542
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1578
1543
|
audioLevels = _useState2[0],
|
|
1579
1544
|
setAudioLevels = _useState2[1];
|
|
1580
1545
|
react.useEffect(function () {
|
|
@@ -1586,7 +1551,7 @@ function useMediaWaveform(media) {
|
|
|
1586
1551
|
}));
|
|
1587
1552
|
} else if (url !== null && fake) {
|
|
1588
1553
|
var fakeLength = 1000;
|
|
1589
|
-
setAudioLevels(
|
|
1554
|
+
setAudioLevels(_toConsumableArray(new Array(fakeLength)).map(function () {
|
|
1590
1555
|
return Math.random();
|
|
1591
1556
|
}));
|
|
1592
1557
|
} else if (url !== null && AudioContext !== null) {
|
|
@@ -1716,14 +1681,14 @@ var useScreenSize = function useScreenSize(_ref) {
|
|
|
1716
1681
|
width: "".concat(width, "px"),
|
|
1717
1682
|
height: "".concat(height, "px")
|
|
1718
1683
|
};
|
|
1719
|
-
var matchingScreens =
|
|
1684
|
+
var matchingScreens = _toConsumableArray(screens).reverse().filter(function (_ref2) {
|
|
1720
1685
|
var _ref2$mediaQuery = _ref2.mediaQuery,
|
|
1721
1686
|
mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
|
|
1722
1687
|
return mediaQuery === null || cssMediaquery.match(mediaQuery, media);
|
|
1723
1688
|
});
|
|
1724
1689
|
return {
|
|
1725
1690
|
screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
|
|
1726
|
-
screens:
|
|
1691
|
+
screens: _toConsumableArray(matchingScreens).reverse().map(function (_ref3) {
|
|
1727
1692
|
var name = _ref3.name;
|
|
1728
1693
|
return name;
|
|
1729
1694
|
}),
|
|
@@ -1742,7 +1707,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
1742
1707
|
width = _ref4$width === void 0 ? null : _ref4$width,
|
|
1743
1708
|
_ref4$height = _ref4.height,
|
|
1744
1709
|
height = _ref4$height === void 0 ? null : _ref4$height,
|
|
1745
|
-
opts =
|
|
1710
|
+
opts = _objectWithoutProperties(_ref4, _excluded);
|
|
1746
1711
|
var _useDimensionObserver = useDimensionObserver(),
|
|
1747
1712
|
ref = _useDimensionObserver.ref,
|
|
1748
1713
|
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
@@ -1788,7 +1753,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
1788
1753
|
finalHeight -= 1;
|
|
1789
1754
|
}
|
|
1790
1755
|
var scale = finalWidth > 0 ? finalWidth / screenWidth : null;
|
|
1791
|
-
var screenSize = useScreenSize(
|
|
1756
|
+
var screenSize = useScreenSize(_objectSpread({
|
|
1792
1757
|
width: withoutScale || scale === null ? finalWidth : screenWidth,
|
|
1793
1758
|
height: withoutScale || scale === null ? finalHeight : finalHeight / scale,
|
|
1794
1759
|
landscape: landscape,
|
|
@@ -1812,7 +1777,7 @@ var getWindowSize = function getWindowSize() {
|
|
|
1812
1777
|
};
|
|
1813
1778
|
var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
1814
1779
|
var _useState = react.useState(getWindowSize()),
|
|
1815
|
-
_useState2 =
|
|
1780
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1816
1781
|
windowSize = _useState2[0],
|
|
1817
1782
|
setWindowSize = _useState2[1];
|
|
1818
1783
|
react.useEffect(function () {
|
|
@@ -1828,7 +1793,7 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
|
1828
1793
|
}
|
|
1829
1794
|
};
|
|
1830
1795
|
}, [setWindowSize]);
|
|
1831
|
-
return useScreenSize(
|
|
1796
|
+
return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
|
|
1832
1797
|
};
|
|
1833
1798
|
|
|
1834
1799
|
var getValueFromSpring = function getValueFromSpring(s) {
|
|
@@ -1841,13 +1806,13 @@ var getValueFromSpring = function getValueFromSpring(s) {
|
|
|
1841
1806
|
};
|
|
1842
1807
|
function useSpringValue(wantedProgress, immediate, params) {
|
|
1843
1808
|
var _useState = react.useState(wantedProgress),
|
|
1844
|
-
_useState2 =
|
|
1809
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1845
1810
|
progress = _useState2[0],
|
|
1846
1811
|
setProgress = _useState2[1];
|
|
1847
1812
|
var onChange = react.useCallback(function (spring) {
|
|
1848
1813
|
return setProgress(getValueFromSpring(spring));
|
|
1849
1814
|
}, [setProgress]);
|
|
1850
|
-
core$1.useSpring(
|
|
1815
|
+
core$1.useSpring(_objectSpread({
|
|
1851
1816
|
progress: wantedProgress,
|
|
1852
1817
|
onChange: onChange,
|
|
1853
1818
|
immediate: immediate
|
|
@@ -1915,20 +1880,20 @@ var useSwipe = function useSwipe() {
|
|
|
1915
1880
|
x: disabled ? 0 : i * currentWidth,
|
|
1916
1881
|
y: 0,
|
|
1917
1882
|
zIndex: i,
|
|
1918
|
-
config:
|
|
1883
|
+
config: _objectSpread({}, !withSpring ? {
|
|
1919
1884
|
duration: 1
|
|
1920
1885
|
} : null)
|
|
1921
1886
|
};
|
|
1922
1887
|
}),
|
|
1923
|
-
_useSprings2 =
|
|
1888
|
+
_useSprings2 = _slicedToArray(_useSprings, 2),
|
|
1924
1889
|
itemsWithProps = _useSprings2[0],
|
|
1925
1890
|
set = _useSprings2[1];
|
|
1926
1891
|
var bind = react$1.useDrag(function (_ref3) {
|
|
1927
1892
|
var down = _ref3.down,
|
|
1928
|
-
_ref3$movement =
|
|
1893
|
+
_ref3$movement = _slicedToArray(_ref3.movement, 2),
|
|
1929
1894
|
mx = _ref3$movement[0],
|
|
1930
1895
|
my = _ref3$movement[1],
|
|
1931
|
-
_ref3$direction =
|
|
1896
|
+
_ref3$direction = _slicedToArray(_ref3.direction, 1),
|
|
1932
1897
|
xDir = _ref3$direction[0],
|
|
1933
1898
|
cancel = _ref3.cancel,
|
|
1934
1899
|
tap = _ref3.tap;
|
|
@@ -1960,7 +1925,7 @@ var useSwipe = function useSwipe() {
|
|
|
1960
1925
|
if (down) {
|
|
1961
1926
|
// Snap to next slide
|
|
1962
1927
|
if (Math.abs(movementX) > currentWidth / swipeWidthThreshold) {
|
|
1963
|
-
index.current =
|
|
1928
|
+
index.current = clamp(index.current + (xDir > 0 ? -1 : 1), 0, count - 1);
|
|
1964
1929
|
lockedAxis.current = null;
|
|
1965
1930
|
cancel();
|
|
1966
1931
|
if (onSwipeEnd !== null) {
|
|
@@ -2085,7 +2050,7 @@ var useTrackScreenEvent = function useTrackScreenEvent() {
|
|
|
2085
2050
|
var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2086
2051
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2087
2052
|
if (type !== null && action !== null) {
|
|
2088
|
-
tracking.trackEvent("screen_".concat(type), action, label,
|
|
2053
|
+
tracking.trackEvent("screen_".concat(type), action, label, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
|
|
2089
2054
|
}
|
|
2090
2055
|
}, [screenContext]);
|
|
2091
2056
|
};
|
|
@@ -2104,7 +2069,7 @@ var useTrackScreenMedia = function useTrackScreenMedia() {
|
|
|
2104
2069
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2105
2070
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2106
2071
|
if (type !== null && media !== null && action !== null) {
|
|
2107
|
-
tracking.trackMedia("screen_".concat(type), media, action,
|
|
2072
|
+
tracking.trackMedia("screen_".concat(type), media, action, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
|
|
2108
2073
|
}
|
|
2109
2074
|
}, [screenContext]);
|
|
2110
2075
|
};
|