@micromag/core 0.3.311 → 0.3.318
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 +21 -21
- package/assets/css/vendor.css +1 -1
- package/es/components.js +650 -859
- package/es/contexts.js +304 -442
- package/es/hooks.js +437 -694
- package/es/index.js +247 -391
- package/es/utils.js +294 -391
- package/lib/components.js +649 -858
- package/lib/contexts.js +304 -442
- package/lib/hooks.js +437 -694
- package/lib/index.js +247 -391
- package/lib/utils.js +294 -391
- package/package.json +6 -6
package/lib/hooks.js
CHANGED
|
@@ -61,53 +61,42 @@ var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
|
|
|
61
61
|
|
|
62
62
|
function useActivityDetector() {
|
|
63
63
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
_ref$element = _ref.element,
|
|
65
|
+
providedElement = _ref$element === void 0 ? null : _ref$element,
|
|
66
|
+
_ref$disabled = _ref.disabled,
|
|
67
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
68
|
+
_ref$timeout = _ref.timeout,
|
|
69
|
+
timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
|
|
71
70
|
var ref = react.useRef(providedElement);
|
|
72
|
-
|
|
73
71
|
var _useState = react.useState(false),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
73
|
+
detected = _useState2[0],
|
|
74
|
+
setDetected = _useState2[1];
|
|
78
75
|
var detectedRef = react.useRef(detected);
|
|
79
|
-
|
|
80
76
|
if (providedElement !== null && providedElement !== ref.current) {
|
|
81
77
|
ref.current = providedElement;
|
|
82
78
|
}
|
|
83
|
-
|
|
84
79
|
react.useEffect(function () {
|
|
85
80
|
var _ref$current = ref.current,
|
|
86
|
-
|
|
87
|
-
|
|
81
|
+
element = _ref$current === void 0 ? null : _ref$current;
|
|
88
82
|
if (element === null || disabled) {
|
|
89
83
|
return function () {};
|
|
90
84
|
}
|
|
91
|
-
|
|
92
85
|
var timeout = null;
|
|
93
|
-
|
|
94
86
|
function onActivity() {
|
|
95
87
|
if (timeout !== null) {
|
|
96
88
|
clearTimeout(timeout);
|
|
97
89
|
timeout = null;
|
|
98
90
|
}
|
|
99
|
-
|
|
100
91
|
if (!detectedRef.current) {
|
|
101
92
|
detectedRef.current = true;
|
|
102
93
|
setDetected(true);
|
|
103
94
|
}
|
|
104
|
-
|
|
105
95
|
timeout = setTimeout(function () {
|
|
106
96
|
detectedRef.current = false;
|
|
107
97
|
setDetected(false);
|
|
108
98
|
}, timeoutDelay);
|
|
109
99
|
}
|
|
110
|
-
|
|
111
100
|
element.addEventListener('keydown', onActivity);
|
|
112
101
|
element.addEventListener('mousedown', onActivity);
|
|
113
102
|
element.addEventListener('mousemove', onActivity);
|
|
@@ -122,7 +111,6 @@ function useActivityDetector() {
|
|
|
122
111
|
clearTimeout(timeout);
|
|
123
112
|
timeout = null;
|
|
124
113
|
}
|
|
125
|
-
|
|
126
114
|
element.removeEventListener('keydown', onActivity);
|
|
127
115
|
element.removeEventListener('mousedown', onActivity);
|
|
128
116
|
element.removeEventListener('mousemove', onActivity);
|
|
@@ -142,27 +130,22 @@ function useActivityDetector() {
|
|
|
142
130
|
|
|
143
131
|
var useAnimationFrame = function useAnimationFrame(onFrame) {
|
|
144
132
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
133
|
+
_ref$disabled = _ref.disabled,
|
|
134
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
148
135
|
var requestRef = react.useRef(null);
|
|
149
136
|
var startTimeRef = react.useRef(null);
|
|
150
|
-
|
|
151
137
|
var callback = function callback(time) {
|
|
152
138
|
if (!startTimeRef.current) {
|
|
153
139
|
startTimeRef.current = time;
|
|
154
140
|
}
|
|
155
|
-
|
|
156
141
|
var progress = time - startTimeRef.current;
|
|
157
142
|
onFrame(progress);
|
|
158
143
|
requestRef.current = requestAnimationFrame(callback);
|
|
159
144
|
};
|
|
160
|
-
|
|
161
145
|
react.useEffect(function () {
|
|
162
146
|
if (!disabled) {
|
|
163
147
|
requestRef.current = requestAnimationFrame(callback);
|
|
164
148
|
}
|
|
165
|
-
|
|
166
149
|
return function () {
|
|
167
150
|
if (requestRef.current !== null) {
|
|
168
151
|
cancelAnimationFrame(requestRef.current);
|
|
@@ -173,16 +156,14 @@ var useAnimationFrame = function useAnimationFrame(onFrame) {
|
|
|
173
156
|
|
|
174
157
|
var useFormattedDate = function useFormattedDate() {
|
|
175
158
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
159
|
+
_ref$format = _ref.format,
|
|
160
|
+
format = _ref$format === void 0 ? null : _ref$format,
|
|
161
|
+
_ref$showToday = _ref.showToday,
|
|
162
|
+
showToday = _ref$showToday === void 0 ? true : _ref$showToday;
|
|
181
163
|
var intl = reactIntl.useIntl();
|
|
182
164
|
var today = dayjs__default["default"]();
|
|
183
165
|
return react.useCallback(function (date) {
|
|
184
166
|
var dateToFormat = isString__default["default"](date) ? dayjs__default["default"](date) : date;
|
|
185
|
-
|
|
186
167
|
if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
|
|
187
168
|
return intl.formatMessage({
|
|
188
169
|
id: "v4Qtl9",
|
|
@@ -192,7 +173,6 @@ var useFormattedDate = function useFormattedDate() {
|
|
|
192
173
|
}]
|
|
193
174
|
});
|
|
194
175
|
}
|
|
195
|
-
|
|
196
176
|
return intl.formatDate(dayjs__default["default"](date).toDate(), _objectSpread__default["default"]({
|
|
197
177
|
year: 'numeric',
|
|
198
178
|
month: 'long',
|
|
@@ -202,18 +182,16 @@ var useFormattedDate = function useFormattedDate() {
|
|
|
202
182
|
};
|
|
203
183
|
var useFormattedTime = function useFormattedTime() {
|
|
204
184
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
185
|
+
_ref2$format = _ref2.format,
|
|
186
|
+
format = _ref2$format === void 0 ? null : _ref2$format,
|
|
187
|
+
_ref2$showNow = _ref2.showNow,
|
|
188
|
+
showNow = _ref2$showNow === void 0 ? true : _ref2$showNow,
|
|
189
|
+
_ref2$timeGap = _ref2.timeGap,
|
|
190
|
+
timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
|
|
212
191
|
var intl = reactIntl.useIntl();
|
|
213
192
|
var now = dayjs__default["default"]();
|
|
214
193
|
return react.useCallback(function (date) {
|
|
215
194
|
var dateToFormat = isString__default["default"](date) ? dayjs__default["default"](date) : date;
|
|
216
|
-
|
|
217
195
|
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) {
|
|
218
196
|
return intl.formatMessage({
|
|
219
197
|
id: "3na7F8",
|
|
@@ -223,7 +201,6 @@ var useFormattedTime = function useFormattedTime() {
|
|
|
223
201
|
}]
|
|
224
202
|
});
|
|
225
203
|
}
|
|
226
|
-
|
|
227
204
|
return intl.formatTime(dateToFormat.toDate(), _objectSpread__default["default"]({
|
|
228
205
|
hour: 'numeric',
|
|
229
206
|
minute: 'numeric'
|
|
@@ -250,74 +227,62 @@ var useDocumentEvent = utils.createUseEvent(eventsManager$1);
|
|
|
250
227
|
|
|
251
228
|
function useDragProgress() {
|
|
252
229
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
230
|
+
wantedProgress = _ref.progress,
|
|
231
|
+
_ref$onTap = _ref.onTap,
|
|
232
|
+
onTap = _ref$onTap === void 0 ? null : _ref$onTap,
|
|
233
|
+
_ref$disabled = _ref.disabled,
|
|
234
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
235
|
+
_ref$dragDisabled = _ref.dragDisabled,
|
|
236
|
+
dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
|
|
237
|
+
_ref$computeProgress = _ref.computeProgress,
|
|
238
|
+
computeProgress = _ref$computeProgress === void 0 ? null : _ref$computeProgress,
|
|
239
|
+
_ref$onProgress = _ref.onProgress,
|
|
240
|
+
onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
|
|
241
|
+
_ref$springParams = _ref.springParams,
|
|
242
|
+
springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
|
|
243
|
+
_ref$dragOptions = _ref.dragOptions,
|
|
244
|
+
dragOptions = _ref$dragOptions === void 0 ? {
|
|
245
|
+
filterTaps: true
|
|
246
|
+
} : _ref$dragOptions;
|
|
271
247
|
var refDragging = react.useRef(false);
|
|
272
248
|
var refProgress = react.useRef(wantedProgress);
|
|
273
|
-
|
|
274
249
|
var _useState = react.useState(false),
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
250
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
251
|
+
dragging = _useState2[0],
|
|
252
|
+
setDragging = _useState2[1];
|
|
279
253
|
var spring = react.useCallback(function () {
|
|
280
254
|
return _objectSpread__default["default"]({
|
|
281
255
|
progress: wantedProgress,
|
|
282
256
|
immediate: dragging || disabled
|
|
283
257
|
}, springParams);
|
|
284
|
-
}, []);
|
|
285
|
-
|
|
258
|
+
}, [wantedProgress, disabled]);
|
|
286
259
|
var _useSpring = core$1.useSpring(spring),
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
260
|
+
_useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
|
|
261
|
+
progress = _useSpring2[0].progress,
|
|
262
|
+
api = _useSpring2[1];
|
|
291
263
|
var onDrag = react.useCallback(function (gestureState) {
|
|
264
|
+
var active = gestureState.active,
|
|
265
|
+
tap = gestureState.tap;
|
|
292
266
|
if (disabled) {
|
|
293
267
|
return;
|
|
294
268
|
}
|
|
295
|
-
|
|
296
|
-
var active = gestureState.active,
|
|
297
|
-
tap = gestureState.tap;
|
|
298
|
-
|
|
299
269
|
if (tap) {
|
|
300
270
|
if (onTap !== null) onTap(gestureState);
|
|
301
271
|
return;
|
|
302
272
|
}
|
|
303
|
-
|
|
304
273
|
if (dragDisabled) {
|
|
305
274
|
return;
|
|
306
275
|
}
|
|
307
|
-
|
|
308
276
|
var newProgress = computeProgress(gestureState);
|
|
309
277
|
refDragging.current = active;
|
|
310
278
|
refProgress.current = newProgress;
|
|
311
|
-
|
|
312
279
|
if (active !== dragging) {
|
|
313
280
|
setDragging(active);
|
|
314
281
|
}
|
|
315
|
-
|
|
316
282
|
api.start({
|
|
317
283
|
progress: newProgress,
|
|
318
284
|
immediate: active
|
|
319
285
|
});
|
|
320
|
-
|
|
321
286
|
if (onProgress !== null) {
|
|
322
287
|
onProgress(newProgress, gestureState);
|
|
323
288
|
}
|
|
@@ -340,29 +305,27 @@ function useDragProgress() {
|
|
|
340
305
|
}
|
|
341
306
|
|
|
342
307
|
var _excluded$3 = ["fields", "injectInFields"],
|
|
343
|
-
|
|
308
|
+
_excluded2 = ["fields"];
|
|
344
309
|
|
|
310
|
+
// eslint-disable-next-line
|
|
345
311
|
var useForm = function useForm() {
|
|
346
312
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
313
|
+
_ref$fields = _ref.fields,
|
|
314
|
+
providedFields = _ref$fields === void 0 ? [] : _ref$fields,
|
|
315
|
+
_ref$injectInFields = _ref.injectInFields,
|
|
316
|
+
injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
|
|
317
|
+
opts = _objectWithoutProperties__default["default"](_ref, _excluded$3);
|
|
353
318
|
var fieldsNames = react.useMemo(function () {
|
|
354
319
|
return providedFields.length > 0 ? providedFields.map(function (_ref2) {
|
|
355
320
|
var name = _ref2.name;
|
|
356
321
|
return name;
|
|
357
322
|
}) : [];
|
|
358
323
|
}, [providedFields]);
|
|
359
|
-
|
|
360
324
|
var _useBaseForm = forms.useForm(_objectSpread__default["default"]({
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
325
|
+
fields: fieldsNames
|
|
326
|
+
}, opts)),
|
|
327
|
+
fields = _useBaseForm.fields,
|
|
328
|
+
form = _objectWithoutProperties__default["default"](_useBaseForm, _excluded2);
|
|
366
329
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, form), {}, {
|
|
367
330
|
fields: injectInFields ? providedFields.map(function (it) {
|
|
368
331
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), fields[it.name] || null);
|
|
@@ -376,18 +339,15 @@ var useFormTransition = function useFormTransition() {
|
|
|
376
339
|
var lastPageRef = react.useRef(paths || []);
|
|
377
340
|
var direction = react.useMemo(function () {
|
|
378
341
|
var currentPartsCount = paths.length;
|
|
379
|
-
|
|
380
342
|
if (lastPageRef.current) {
|
|
381
343
|
var previousPartsCount = lastPageRef.current.length;
|
|
382
344
|
lastPageRef.current = paths || [];
|
|
383
345
|
return currentPartsCount > previousPartsCount ? 'right' : 'left';
|
|
384
346
|
}
|
|
385
|
-
|
|
386
347
|
return null;
|
|
387
348
|
}, [paths]);
|
|
388
349
|
var name = react.useMemo(function () {
|
|
389
350
|
var _classNames, _classNames2, _classNames3;
|
|
390
|
-
|
|
391
351
|
return {
|
|
392
352
|
enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
|
|
393
353
|
enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
|
|
@@ -404,12 +364,10 @@ var useFormTransition = function useFormTransition() {
|
|
|
404
364
|
|
|
405
365
|
var useFullscreen = function useFullscreen(element) {
|
|
406
366
|
var enabled = screenfull__default["default"].isEnabled;
|
|
407
|
-
|
|
408
367
|
var _useState = react.useState(false),
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
368
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
369
|
+
active = _useState2[0],
|
|
370
|
+
setActive = _useState2[1];
|
|
413
371
|
var fullscreen = react.useCallback(function () {
|
|
414
372
|
if (screenfull__default["default"].isEnabled) {
|
|
415
373
|
if (typeof element !== 'undefined' && element !== null) {
|
|
@@ -435,11 +393,9 @@ var useFullscreen = function useFullscreen(element) {
|
|
|
435
393
|
var onChange = function onChange() {
|
|
436
394
|
setActive(screenfull__default["default"].isFullscreen);
|
|
437
395
|
};
|
|
438
|
-
|
|
439
396
|
if (screenfull__default["default"].isEnabled) {
|
|
440
397
|
screenfull__default["default"].on('change', onChange);
|
|
441
398
|
}
|
|
442
|
-
|
|
443
399
|
return function () {
|
|
444
400
|
if (screenfull__default["default"].isEnabled) {
|
|
445
401
|
screenfull__default["default"].off('change', onChange);
|
|
@@ -456,31 +412,25 @@ var useFullscreen = function useFullscreen(element) {
|
|
|
456
412
|
};
|
|
457
413
|
|
|
458
414
|
var _excluded$2 = ["entry"];
|
|
459
|
-
|
|
460
415
|
var buildThresholdArray = function buildThresholdArray() {
|
|
461
416
|
return [0, 1.0];
|
|
462
417
|
};
|
|
463
|
-
|
|
464
418
|
var observersCache = new Map();
|
|
465
|
-
|
|
466
419
|
var getOptionsKey = function getOptionsKey(_ref) {
|
|
467
420
|
var _ref$root = _ref.root,
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
421
|
+
root = _ref$root === void 0 ? null : _ref$root,
|
|
422
|
+
rootMargin = _ref.rootMargin,
|
|
423
|
+
_ref$threshold = _ref.threshold,
|
|
424
|
+
threshold = _ref$threshold === void 0 ? null : _ref$threshold;
|
|
472
425
|
return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
|
|
473
426
|
};
|
|
474
|
-
|
|
475
427
|
var createObserver = function createObserver(Observer) {
|
|
476
428
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
477
429
|
var subscribers = [];
|
|
478
|
-
|
|
479
430
|
var addSubscriber = function addSubscriber(element, callback) {
|
|
480
431
|
var currentSubscriber = subscribers.find(function (it) {
|
|
481
432
|
return it.element === element;
|
|
482
433
|
}) || null;
|
|
483
|
-
|
|
484
434
|
if (currentSubscriber !== null) {
|
|
485
435
|
return subscribers.map(function (it) {
|
|
486
436
|
return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
|
|
@@ -490,13 +440,11 @@ var createObserver = function createObserver(Observer) {
|
|
|
490
440
|
return it.callbacks.length > 0;
|
|
491
441
|
});
|
|
492
442
|
}
|
|
493
|
-
|
|
494
443
|
return [].concat(_toConsumableArray__default["default"](subscribers), [{
|
|
495
444
|
element: element,
|
|
496
445
|
callbacks: [callback]
|
|
497
446
|
}]);
|
|
498
447
|
};
|
|
499
|
-
|
|
500
448
|
var removeSubscriber = function removeSubscriber(element, callback) {
|
|
501
449
|
return subscribers.map(function (it) {
|
|
502
450
|
return it.element === element ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
|
|
@@ -508,13 +456,11 @@ var createObserver = function createObserver(Observer) {
|
|
|
508
456
|
return it.callbacks.length > 0;
|
|
509
457
|
});
|
|
510
458
|
};
|
|
511
|
-
|
|
512
459
|
var onUpdate = function onUpdate(entries) {
|
|
513
460
|
entries.forEach(function (entry) {
|
|
514
461
|
subscribers.forEach(function (_ref2) {
|
|
515
462
|
var element = _ref2.element,
|
|
516
|
-
|
|
517
|
-
|
|
463
|
+
callbacks = _ref2.callbacks;
|
|
518
464
|
if (element === entry.target) {
|
|
519
465
|
callbacks.forEach(function (callback) {
|
|
520
466
|
callback(entry);
|
|
@@ -523,13 +469,10 @@ var createObserver = function createObserver(Observer) {
|
|
|
523
469
|
});
|
|
524
470
|
});
|
|
525
471
|
};
|
|
526
|
-
|
|
527
472
|
var observer = new Observer(onUpdate, options);
|
|
528
|
-
|
|
529
473
|
var unsubscribe = function unsubscribe(element) {
|
|
530
474
|
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
531
475
|
subscribers = removeSubscriber(element, callback);
|
|
532
|
-
|
|
533
476
|
if (typeof observer.unobserve === 'undefined') {
|
|
534
477
|
observer.disconnect();
|
|
535
478
|
subscribers.forEach(function (subscriber) {
|
|
@@ -537,103 +480,82 @@ var createObserver = function createObserver(Observer) {
|
|
|
537
480
|
});
|
|
538
481
|
return;
|
|
539
482
|
}
|
|
540
|
-
|
|
541
483
|
var currentSubscriber = subscribers.find(function (it) {
|
|
542
484
|
return it.element === element;
|
|
543
485
|
}) || null;
|
|
544
|
-
|
|
545
486
|
if (currentSubscriber === null) {
|
|
546
487
|
observer.unobserve(element);
|
|
547
488
|
}
|
|
548
489
|
};
|
|
549
|
-
|
|
550
490
|
var subscribe = function subscribe(element, callback) {
|
|
551
491
|
var currentSubscriber = subscribers.find(function (it) {
|
|
552
492
|
return it.element === element;
|
|
553
493
|
}) || null;
|
|
554
494
|
subscribers = addSubscriber(element, callback);
|
|
555
|
-
|
|
556
495
|
if (currentSubscriber === null) {
|
|
557
496
|
observer.observe(element);
|
|
558
497
|
}
|
|
559
498
|
};
|
|
560
|
-
|
|
561
499
|
return {
|
|
562
500
|
subscribe: subscribe,
|
|
563
501
|
unsubscribe: unsubscribe,
|
|
564
502
|
observer: observer
|
|
565
503
|
};
|
|
566
504
|
};
|
|
567
|
-
|
|
568
505
|
var getObserver = function getObserver(Observer) {
|
|
569
506
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
570
507
|
var observerKey = getOptionsKey(options);
|
|
571
|
-
|
|
572
508
|
if (!observersCache.has(Observer)) {
|
|
573
509
|
observersCache.set(Observer, {});
|
|
574
510
|
}
|
|
575
|
-
|
|
576
511
|
var observers = observersCache.get(Observer);
|
|
577
|
-
|
|
578
512
|
if (typeof observers[observerKey] === 'undefined') {
|
|
579
513
|
observers[observerKey] = createObserver(Observer, options);
|
|
580
514
|
observersCache.set(Observer, observers);
|
|
581
515
|
}
|
|
582
|
-
|
|
583
516
|
return observers[observerKey];
|
|
584
517
|
};
|
|
585
518
|
var useObserver = function useObserver(Observer) {
|
|
586
519
|
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
587
520
|
var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
588
521
|
var _opts$root = opts.root,
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
522
|
+
root = _opts$root === void 0 ? null : _opts$root,
|
|
523
|
+
_opts$rootMargin = opts.rootMargin,
|
|
524
|
+
rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
|
|
525
|
+
_opts$threshold = opts.threshold,
|
|
526
|
+
threshold = _opts$threshold === void 0 ? null : _opts$threshold,
|
|
527
|
+
_opts$disabled = opts.disabled,
|
|
528
|
+
disabled = _opts$disabled === void 0 ? false : _opts$disabled;
|
|
597
529
|
var _useState = react.useState(initialEntry),
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
530
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
531
|
+
entry = _useState2[0],
|
|
532
|
+
setEntry = _useState2[1];
|
|
602
533
|
var nodeRef = react.useRef(null);
|
|
603
534
|
var currentElement = react.useRef(null);
|
|
604
535
|
var elementChanged = nodeRef.current !== currentElement.current;
|
|
605
536
|
react.useEffect(function () {
|
|
606
537
|
var nodeElement = nodeRef.current;
|
|
607
|
-
|
|
608
538
|
var callback = function callback(newEntry) {
|
|
609
539
|
return setEntry(newEntry);
|
|
610
540
|
};
|
|
611
|
-
|
|
612
541
|
var unsubscribe = null;
|
|
613
|
-
|
|
614
542
|
if (nodeElement !== null) {
|
|
615
543
|
var newOpts = {};
|
|
616
|
-
|
|
617
544
|
if (root !== null) {
|
|
618
545
|
newOpts.root = root;
|
|
619
546
|
}
|
|
620
|
-
|
|
621
547
|
if (rootMargin !== null) {
|
|
622
548
|
newOpts.rootMargin = rootMargin;
|
|
623
549
|
}
|
|
624
|
-
|
|
625
550
|
if (threshold !== null) {
|
|
626
551
|
newOpts.threshold = threshold;
|
|
627
552
|
}
|
|
628
|
-
|
|
629
553
|
var _getObserver = getObserver(Observer, newOpts),
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
554
|
+
subscribe = _getObserver.subscribe,
|
|
555
|
+
localUnsubscribe = _getObserver.unsubscribe;
|
|
633
556
|
unsubscribe = localUnsubscribe;
|
|
634
557
|
subscribe(nodeElement, callback);
|
|
635
558
|
}
|
|
636
|
-
|
|
637
559
|
currentElement.current = nodeElement;
|
|
638
560
|
return function () {
|
|
639
561
|
if (unsubscribe !== null) {
|
|
@@ -646,10 +568,10 @@ var useObserver = function useObserver(Observer) {
|
|
|
646
568
|
entry: entry
|
|
647
569
|
};
|
|
648
570
|
};
|
|
571
|
+
|
|
649
572
|
/**
|
|
650
573
|
* Intersection Observer
|
|
651
574
|
*/
|
|
652
|
-
|
|
653
575
|
var thresholdArray = buildThresholdArray();
|
|
654
576
|
var intersectionObserverInitialEntry = {
|
|
655
577
|
target: null,
|
|
@@ -663,15 +585,14 @@ var intersectionObserverInitialEntry = {
|
|
|
663
585
|
};
|
|
664
586
|
var useIntersectionObserver = function useIntersectionObserver() {
|
|
665
587
|
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
588
|
+
_ref3$root = _ref3.root,
|
|
589
|
+
root = _ref3$root === void 0 ? null : _ref3$root,
|
|
590
|
+
_ref3$rootMargin = _ref3.rootMargin,
|
|
591
|
+
rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
|
|
592
|
+
_ref3$threshold = _ref3.threshold,
|
|
593
|
+
threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
|
|
594
|
+
_ref3$disabled = _ref3.disabled,
|
|
595
|
+
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
|
|
675
596
|
return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
|
|
676
597
|
root: root,
|
|
677
598
|
rootMargin: rootMargin,
|
|
@@ -679,10 +600,10 @@ var useIntersectionObserver = function useIntersectionObserver() {
|
|
|
679
600
|
disabled: disabled
|
|
680
601
|
}, intersectionObserverInitialEntry);
|
|
681
602
|
};
|
|
603
|
+
|
|
682
604
|
/**
|
|
683
605
|
* Resize Observer
|
|
684
606
|
*/
|
|
685
|
-
|
|
686
607
|
var resizeObserverInitialEntry = {
|
|
687
608
|
target: null,
|
|
688
609
|
contentRect: null,
|
|
@@ -691,36 +612,31 @@ var resizeObserverInitialEntry = {
|
|
|
691
612
|
};
|
|
692
613
|
var useResizeObserver = function useResizeObserver() {
|
|
693
614
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
615
|
+
_ref4$disabled = _ref4.disabled,
|
|
616
|
+
disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
|
|
697
617
|
return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
|
|
698
618
|
disabled: disabled
|
|
699
619
|
}, resizeObserverInitialEntry);
|
|
700
620
|
};
|
|
701
621
|
var useDimensionObserver = function useDimensionObserver() {
|
|
702
622
|
var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
623
|
+
entry = _useResizeObserver.entry,
|
|
624
|
+
rest = _objectWithoutProperties__default["default"](_useResizeObserver, _excluded$2);
|
|
706
625
|
var _ref5 = entry || {},
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
626
|
+
_ref5$contentRect = _ref5.contentRect,
|
|
627
|
+
contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
|
|
628
|
+
_ref5$borderBoxSize = _ref5.borderBoxSize,
|
|
629
|
+
borderBoxSize = _ref5$borderBoxSize === void 0 ? null : _ref5$borderBoxSize;
|
|
712
630
|
var _ref6 = contentRect || {},
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
631
|
+
_ref6$width = _ref6.width,
|
|
632
|
+
width = _ref6$width === void 0 ? 0 : _ref6$width,
|
|
633
|
+
_ref6$height = _ref6.height,
|
|
634
|
+
height = _ref6$height === void 0 ? 0 : _ref6$height;
|
|
718
635
|
var _ref7 = isArray__default["default"](borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
636
|
+
_ref7$blockSize = _ref7.blockSize,
|
|
637
|
+
blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
|
|
638
|
+
_ref7$inlineSize = _ref7.inlineSize,
|
|
639
|
+
inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
|
|
724
640
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
|
|
725
641
|
entry: entry,
|
|
726
642
|
width: inlineSize || width,
|
|
@@ -730,25 +646,21 @@ var useDimensionObserver = function useDimensionObserver() {
|
|
|
730
646
|
|
|
731
647
|
var useIsVisible = function useIsVisible() {
|
|
732
648
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
649
|
+
rootMargin = _ref.rootMargin,
|
|
650
|
+
_ref$threshold = _ref.threshold,
|
|
651
|
+
threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
|
|
652
|
+
_ref$persist = _ref.persist,
|
|
653
|
+
persist = _ref$persist === void 0 ? false : _ref$persist;
|
|
739
654
|
var _useIntersectionObser = useIntersectionObserver({
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
655
|
+
rootMargin: rootMargin,
|
|
656
|
+
threshold: threshold
|
|
657
|
+
}),
|
|
658
|
+
ref = _useIntersectionObser.ref,
|
|
659
|
+
isIntersecting = _useIntersectionObser.entry.isIntersecting;
|
|
746
660
|
var wasIntersecting = react.useRef(isIntersecting);
|
|
747
|
-
|
|
748
661
|
if (isIntersecting && !wasIntersecting.current) {
|
|
749
662
|
wasIntersecting.current = isIntersecting;
|
|
750
663
|
}
|
|
751
|
-
|
|
752
664
|
var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
753
665
|
return {
|
|
754
666
|
ref: ref,
|
|
@@ -760,52 +672,44 @@ var fontsMap = {
|
|
|
760
672
|
loading: [],
|
|
761
673
|
active: []
|
|
762
674
|
};
|
|
763
|
-
|
|
764
675
|
var isFontLoading = function isFontLoading(name) {
|
|
765
676
|
return fontsMap.loading.indexOf(name) !== -1;
|
|
766
677
|
};
|
|
767
|
-
|
|
768
678
|
var isFontActive = function isFontActive(name) {
|
|
769
679
|
return fontsMap.active.indexOf(name) !== -1;
|
|
770
680
|
};
|
|
771
|
-
|
|
772
681
|
var addFontLoading = function addFontLoading(name) {
|
|
773
682
|
fontsMap.active = fontsMap.active.filter(function (it) {
|
|
774
683
|
return it !== name;
|
|
775
684
|
});
|
|
776
685
|
fontsMap.loading = [].concat(_toConsumableArray__default["default"](fontsMap.loading), [name]);
|
|
777
686
|
};
|
|
778
|
-
|
|
779
687
|
var removeFontLoading = function removeFontLoading(name) {
|
|
780
688
|
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
781
689
|
return it !== name;
|
|
782
690
|
});
|
|
783
691
|
};
|
|
784
|
-
|
|
785
692
|
var addFontActive = function addFontActive(name) {
|
|
786
693
|
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
787
694
|
return it !== name;
|
|
788
695
|
});
|
|
789
696
|
fontsMap.active = [].concat(_toConsumableArray__default["default"](fontsMap.active), [name]);
|
|
790
697
|
};
|
|
791
|
-
|
|
792
698
|
var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
793
699
|
var _useState = react.useState(false),
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
700
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
701
|
+
loaded = _useState2[0],
|
|
702
|
+
setLoaded = _useState2[1];
|
|
798
703
|
react.useEffect(function () {
|
|
799
704
|
var config = fonts.reduce(function (newConfig, font) {
|
|
800
705
|
var _ref = isObject__default["default"](font) ? font : {
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
706
|
+
type: 'system',
|
|
707
|
+
name: font
|
|
708
|
+
},
|
|
709
|
+
type = _ref.type,
|
|
710
|
+
name = _ref.name,
|
|
711
|
+
_ref$variants = _ref.variants,
|
|
712
|
+
variants = _ref$variants === void 0 ? [] : _ref$variants;
|
|
809
713
|
if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
|
|
810
714
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, newConfig), {}, _defineProperty__default["default"]({}, type, {
|
|
811
715
|
families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
|
|
@@ -816,11 +720,11 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
816
720
|
fvd: 'n4'
|
|
817
721
|
}].concat(_toConsumableArray__default["default"](variants)) : []).map(function (_ref2) {
|
|
818
722
|
var _ref2$fvd = _ref2.fvd,
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
723
|
+
fvd = _ref2$fvd === void 0 ? null : _ref2$fvd,
|
|
724
|
+
_ref2$weight = _ref2.weight,
|
|
725
|
+
weight = _ref2$weight === void 0 ? null : _ref2$weight,
|
|
726
|
+
_ref2$style = _ref2.style,
|
|
727
|
+
style = _ref2$style === void 0 ? null : _ref2$style;
|
|
824
728
|
return fvd || [style, weight].filter(function (it) {
|
|
825
729
|
return it !== null;
|
|
826
730
|
}).map(function (it) {
|
|
@@ -833,11 +737,9 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
833
737
|
}).join(':')])
|
|
834
738
|
}));
|
|
835
739
|
}
|
|
836
|
-
|
|
837
740
|
return newConfig;
|
|
838
741
|
}, null);
|
|
839
742
|
var hasConfig = config !== null;
|
|
840
|
-
|
|
841
743
|
if (hasConfig && typeof window !== 'undefined') {
|
|
842
744
|
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref3) {
|
|
843
745
|
var WebFont = _ref3["default"];
|
|
@@ -869,73 +771,60 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
|
869
771
|
var isTouchEvent = function isTouchEvent(event) {
|
|
870
772
|
return 'touches' in event;
|
|
871
773
|
};
|
|
872
|
-
|
|
873
774
|
var preventDefault = function preventDefault(event) {
|
|
874
775
|
if (!isTouchEvent(event)) return false;
|
|
875
|
-
|
|
876
776
|
if (event.touches.length < 2 && event.preventDefault) {
|
|
877
777
|
event.preventDefault();
|
|
878
778
|
}
|
|
879
|
-
|
|
880
779
|
return false;
|
|
881
780
|
};
|
|
882
|
-
|
|
883
781
|
var preventClickDefault = function preventClickDefault(e) {
|
|
884
782
|
if (e.preventDefault) {
|
|
885
783
|
e.preventDefault();
|
|
886
784
|
}
|
|
887
|
-
|
|
888
785
|
if (e.stopPropagation) {
|
|
889
786
|
e.stopPropagation();
|
|
890
787
|
}
|
|
891
788
|
};
|
|
892
|
-
|
|
893
789
|
var useLongPress = function useLongPress() {
|
|
894
790
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
791
|
+
_ref$onLongPress = _ref.onLongPress,
|
|
792
|
+
onLongPress = _ref$onLongPress === void 0 ? null : _ref$onLongPress,
|
|
793
|
+
_ref$onLongPressStart = _ref.onLongPressStart,
|
|
794
|
+
onLongPressStart = _ref$onLongPressStart === void 0 ? null : _ref$onLongPressStart,
|
|
795
|
+
_ref$onLongPressEnd = _ref.onLongPressEnd,
|
|
796
|
+
onLongPressEnd = _ref$onLongPressEnd === void 0 ? null : _ref$onLongPressEnd,
|
|
797
|
+
_ref$onClick = _ref.onClick,
|
|
798
|
+
onClick = _ref$onClick === void 0 ? null : _ref$onClick,
|
|
799
|
+
_ref$shouldPreventDef = _ref.shouldPreventDefault,
|
|
800
|
+
shouldPreventDefault = _ref$shouldPreventDef === void 0 ? true : _ref$shouldPreventDef,
|
|
801
|
+
_ref$shouldStopPropag = _ref.shouldStopPropagation,
|
|
802
|
+
shouldStopPropagation = _ref$shouldStopPropag === void 0 ? false : _ref$shouldStopPropag,
|
|
803
|
+
_ref$preventClick = _ref.preventClick,
|
|
804
|
+
preventClick = _ref$preventClick === void 0 ? false : _ref$preventClick,
|
|
805
|
+
_ref$delay = _ref.delay,
|
|
806
|
+
delay = _ref$delay === void 0 ? 350 : _ref$delay;
|
|
912
807
|
var _useState = react.useState(false),
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
808
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
809
|
+
pressed = _useState2[0],
|
|
810
|
+
setPressed = _useState2[1];
|
|
917
811
|
var _useState3 = react.useState(false),
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
812
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
813
|
+
triggered = _useState4[0],
|
|
814
|
+
setTriggered = _useState4[1];
|
|
922
815
|
var timeout = react.useRef(null);
|
|
923
816
|
var target = react.useRef(null);
|
|
924
817
|
var start = react.useCallback(function (event, props) {
|
|
925
818
|
setPressed(true);
|
|
926
|
-
|
|
927
819
|
if (shouldStopPropagation) {
|
|
928
820
|
event.stopPropagation();
|
|
929
821
|
}
|
|
930
|
-
|
|
931
822
|
if (event.target !== null) {
|
|
932
823
|
target.current = event.target;
|
|
933
824
|
}
|
|
934
|
-
|
|
935
825
|
if (onLongPressStart !== null) {
|
|
936
826
|
onLongPressStart(event, props);
|
|
937
827
|
}
|
|
938
|
-
|
|
939
828
|
timeout.current = setTimeout(function () {
|
|
940
829
|
if (shouldPreventDefault && target.current !== null) {
|
|
941
830
|
target.current.addEventListener('touchend', preventDefault, {
|
|
@@ -945,25 +834,20 @@ var useLongPress = function useLongPress() {
|
|
|
945
834
|
passive: false
|
|
946
835
|
});
|
|
947
836
|
}
|
|
948
|
-
|
|
949
837
|
setTriggered(true);
|
|
950
|
-
|
|
951
838
|
if (onLongPress !== null) {
|
|
952
839
|
onLongPress(event, props);
|
|
953
840
|
setPressed(false);
|
|
954
841
|
}
|
|
955
|
-
|
|
956
842
|
timeout.current = null;
|
|
957
843
|
}, delay);
|
|
958
844
|
}, [onLongPress, onLongPressStart, delay, setPressed, shouldPreventDefault]);
|
|
959
845
|
var clear = react.useCallback(function (event, props) {
|
|
960
846
|
var shouldTriggerClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
961
847
|
setPressed(false);
|
|
962
|
-
|
|
963
848
|
if (preventClick && triggered) {
|
|
964
849
|
return;
|
|
965
850
|
}
|
|
966
|
-
|
|
967
851
|
if (timeout.current !== null) {
|
|
968
852
|
clearTimeout(timeout.current);
|
|
969
853
|
} else if (shouldPreventDefault && target.current !== null) {
|
|
@@ -973,15 +857,12 @@ var useLongPress = function useLongPress() {
|
|
|
973
857
|
target.current.removeEventListener('click', preventClickDefault);
|
|
974
858
|
}, 10);
|
|
975
859
|
}
|
|
976
|
-
|
|
977
860
|
if (shouldTriggerClick && !triggered && onClick !== null) {
|
|
978
861
|
onClick(props);
|
|
979
862
|
}
|
|
980
|
-
|
|
981
863
|
onLongPressEnd(event, props, triggered);
|
|
982
864
|
setTriggered(false);
|
|
983
865
|
}, [shouldPreventDefault, onClick, onLongPressEnd, setPressed, triggered, preventClick]);
|
|
984
|
-
|
|
985
866
|
var bind = function bind() {
|
|
986
867
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
987
868
|
return {
|
|
@@ -1002,7 +883,6 @@ var useLongPress = function useLongPress() {
|
|
|
1002
883
|
}
|
|
1003
884
|
};
|
|
1004
885
|
};
|
|
1005
|
-
|
|
1006
886
|
return {
|
|
1007
887
|
bind: bind,
|
|
1008
888
|
pressed: pressed,
|
|
@@ -1011,97 +891,86 @@ var useLongPress = function useLongPress() {
|
|
|
1011
891
|
};
|
|
1012
892
|
|
|
1013
893
|
var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
|
|
1014
|
-
|
|
1015
894
|
var useMediaApi = function useMediaApi() {
|
|
1016
895
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
896
|
+
_ref$url = _ref.url,
|
|
897
|
+
url = _ref$url === void 0 ? null : _ref$url,
|
|
898
|
+
_ref$onTimeUpdate = _ref.onTimeUpdate,
|
|
899
|
+
onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
|
|
900
|
+
_ref$onProgressStep = _ref.onProgressStep,
|
|
901
|
+
onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
|
|
902
|
+
_ref$onDurationChange = _ref.onDurationChange,
|
|
903
|
+
onDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
|
|
904
|
+
_ref$onVolumeChange = _ref.onVolumeChange,
|
|
905
|
+
onVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
|
|
906
|
+
_ref$onPlay = _ref.onPlay,
|
|
907
|
+
onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
|
|
908
|
+
_ref$onPause = _ref.onPause,
|
|
909
|
+
onPause = _ref$onPause === void 0 ? null : _ref$onPause,
|
|
910
|
+
_ref$onEnded = _ref.onEnded,
|
|
911
|
+
onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
|
|
912
|
+
_ref$onSeeked = _ref.onSeeked,
|
|
913
|
+
onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
|
|
914
|
+
_ref$onSuspend = _ref.onSuspend,
|
|
915
|
+
onSuspend = _ref$onSuspend === void 0 ? null : _ref$onSuspend,
|
|
916
|
+
_ref$onLoadStart = _ref.onLoadStart,
|
|
917
|
+
onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
|
|
918
|
+
_ref$onCanPlayThough = _ref.onCanPlayThough,
|
|
919
|
+
onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough,
|
|
920
|
+
_ref$onCanPlay = _ref.onCanPlay,
|
|
921
|
+
onCanPlay = _ref$onCanPlay === void 0 ? null : _ref$onCanPlay,
|
|
922
|
+
_ref$onLoadedData = _ref.onLoadedData,
|
|
923
|
+
onLoadedData = _ref$onLoadedData === void 0 ? null : _ref$onLoadedData,
|
|
924
|
+
_ref$onLoadedMetadata = _ref.onLoadedMetadata,
|
|
925
|
+
onLoadedMetadata = _ref$onLoadedMetadata === void 0 ? null : _ref$onLoadedMetadata;
|
|
1048
926
|
var ref = react.useRef(null);
|
|
1049
|
-
|
|
1050
927
|
var _useState = react.useState(null),
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
928
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
929
|
+
currentTime = _useState2[0],
|
|
930
|
+
setCurrentTime = _useState2[1];
|
|
1055
931
|
var _useState3 = react.useState(null),
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
932
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
933
|
+
duration = _useState4[0],
|
|
934
|
+
setDuration = _useState4[1];
|
|
1060
935
|
var _useState5 = react.useState(false),
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
936
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
937
|
+
playing = _useState6[0],
|
|
938
|
+
setPlaying = _useState6[1];
|
|
1065
939
|
var _useState7 = react.useState(false),
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
940
|
+
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
941
|
+
ready = _useState8[0],
|
|
942
|
+
setReady = _useState8[1];
|
|
1070
943
|
var _useState9 = react.useState(false),
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
944
|
+
_useState10 = _slicedToArray__default["default"](_useState9, 2),
|
|
945
|
+
dataReady = _useState10[0],
|
|
946
|
+
setDataReady = _useState10[1];
|
|
1075
947
|
var _useState11 = react.useState(true),
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
948
|
+
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
949
|
+
initialPlay = _useState12[0],
|
|
950
|
+
setInitialPlay = _useState12[1];
|
|
1080
951
|
var _useState13 = react.useState(false),
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
952
|
+
_useState14 = _slicedToArray__default["default"](_useState13, 2),
|
|
953
|
+
suspended = _useState14[0],
|
|
954
|
+
setSuspended = _useState14[1];
|
|
1085
955
|
var progressStepsReached = react.useRef({});
|
|
1086
|
-
var paused = !playing;
|
|
956
|
+
var paused = !playing;
|
|
957
|
+
|
|
958
|
+
// Exposed methods
|
|
1087
959
|
|
|
1088
960
|
var play = react.useCallback(function () {
|
|
1089
961
|
var media = ref.current;
|
|
1090
|
-
|
|
1091
962
|
if (media !== null) {
|
|
1092
963
|
media.play();
|
|
1093
964
|
}
|
|
1094
965
|
}, []);
|
|
1095
966
|
var pause = react.useCallback(function () {
|
|
1096
967
|
var media = ref.current;
|
|
1097
|
-
|
|
1098
968
|
if (media !== null) {
|
|
1099
969
|
media.pause();
|
|
1100
970
|
}
|
|
1101
971
|
}, []);
|
|
1102
972
|
var stop = react.useCallback(function () {
|
|
1103
973
|
var media = ref.current;
|
|
1104
|
-
|
|
1105
974
|
if (media !== null) {
|
|
1106
975
|
media.pause();
|
|
1107
976
|
media.currentTime = 0;
|
|
@@ -1109,22 +978,25 @@ var useMediaApi = function useMediaApi() {
|
|
|
1109
978
|
}, []);
|
|
1110
979
|
var seek = react.useCallback(function (time) {
|
|
1111
980
|
var media = ref.current;
|
|
1112
|
-
|
|
1113
981
|
if (media !== null) {
|
|
1114
982
|
media.currentTime = time;
|
|
1115
983
|
}
|
|
1116
|
-
}, []);
|
|
984
|
+
}, []);
|
|
985
|
+
|
|
986
|
+
// const mute = useCallback(() => {
|
|
1117
987
|
// const { current: media } = ref;
|
|
1118
988
|
// if (media !== null) {
|
|
1119
989
|
// media.muted = true;
|
|
1120
990
|
// }
|
|
1121
991
|
// }, []);
|
|
992
|
+
|
|
1122
993
|
// const unMute = useCallback(() => {
|
|
1123
994
|
// const { current: media } = ref;
|
|
1124
995
|
// if (media !== null) {
|
|
1125
996
|
// media.muted = false;
|
|
1126
997
|
// }
|
|
1127
998
|
// }, []);
|
|
999
|
+
|
|
1128
1000
|
// Media events callbacks
|
|
1129
1001
|
|
|
1130
1002
|
var onCustomPlay = react.useCallback(function () {
|
|
@@ -1133,18 +1005,15 @@ var useMediaApi = function useMediaApi() {
|
|
|
1133
1005
|
initial: initialPlay
|
|
1134
1006
|
});
|
|
1135
1007
|
}
|
|
1136
|
-
|
|
1137
1008
|
if (initialPlay) {
|
|
1138
1009
|
setInitialPlay(false);
|
|
1139
1010
|
}
|
|
1140
|
-
|
|
1141
1011
|
setPlaying(true);
|
|
1142
1012
|
setSuspended(false);
|
|
1143
1013
|
}, [initialPlay, setPlaying, onPlay]);
|
|
1144
1014
|
var onCustomPause = react.useCallback(function (e) {
|
|
1145
1015
|
var eventMedia = e.currentTarget;
|
|
1146
1016
|
setPlaying(false);
|
|
1147
|
-
|
|
1148
1017
|
if (onPause !== null) {
|
|
1149
1018
|
onPause({
|
|
1150
1019
|
midway: eventMedia.currentTime > 0 && eventMedia.currentTime < eventMedia.duration
|
|
@@ -1154,21 +1023,17 @@ var useMediaApi = function useMediaApi() {
|
|
|
1154
1023
|
var onCustomEnded = react.useCallback(function (e) {
|
|
1155
1024
|
var eventMedia = e.currentTarget;
|
|
1156
1025
|
eventMedia.currentTime = 0;
|
|
1157
|
-
|
|
1158
1026
|
if (onEnded !== null) {
|
|
1159
1027
|
onEnded();
|
|
1160
1028
|
}
|
|
1161
|
-
|
|
1162
1029
|
setInitialPlay(true);
|
|
1163
1030
|
}, [setInitialPlay, onEnded]);
|
|
1164
1031
|
var onCustomTimeUpdate = react.useCallback(function (e) {
|
|
1165
1032
|
var eventMedia = e.currentTarget;
|
|
1166
1033
|
setCurrentTime(eventMedia.currentTime);
|
|
1167
|
-
|
|
1168
1034
|
if (onTimeUpdate !== null) {
|
|
1169
1035
|
onTimeUpdate(eventMedia.currentTime);
|
|
1170
1036
|
}
|
|
1171
|
-
|
|
1172
1037
|
var progress = eventMedia.currentTime / eventMedia.duration;
|
|
1173
1038
|
var currentSteps = progressStepsReached.current;
|
|
1174
1039
|
var stepsToTrack = progressSteps.filter(function (step) {
|
|
@@ -1178,28 +1043,26 @@ var useMediaApi = function useMediaApi() {
|
|
|
1178
1043
|
if (onProgressStep !== null) {
|
|
1179
1044
|
onProgressStep(step);
|
|
1180
1045
|
}
|
|
1181
|
-
|
|
1182
1046
|
currentSteps[step] = true;
|
|
1183
1047
|
});
|
|
1184
1048
|
}, [setCurrentTime, onTimeUpdate, onProgressStep]);
|
|
1185
1049
|
var onCustomDurationChange = react.useCallback(function (e) {
|
|
1186
1050
|
var eventMedia = e.currentTarget;
|
|
1187
1051
|
setDuration(eventMedia.duration);
|
|
1188
|
-
|
|
1189
1052
|
if (onDurationChange !== null) {
|
|
1190
1053
|
onDurationChange(eventMedia.duration);
|
|
1191
1054
|
}
|
|
1192
1055
|
}, [setDuration, onDurationChange]);
|
|
1193
1056
|
var onCustomSeeked = react.useCallback(function (e) {
|
|
1194
1057
|
var eventMedia = e.currentTarget;
|
|
1195
|
-
|
|
1196
1058
|
if (onSeeked !== null) {
|
|
1197
1059
|
onSeeked(eventMedia.currentTime);
|
|
1198
1060
|
}
|
|
1199
1061
|
}, [onSeeked]);
|
|
1200
1062
|
var onCustomVolumeChange = react.useCallback(function (e) {
|
|
1201
|
-
var eventMedia = e.currentTarget;
|
|
1063
|
+
var eventMedia = e.currentTarget;
|
|
1202
1064
|
|
|
1065
|
+
// setMuted(eventMedia.muted);
|
|
1203
1066
|
if (onVolumeChange !== null) {
|
|
1204
1067
|
onVolumeChange(eventMedia.volume);
|
|
1205
1068
|
}
|
|
@@ -1211,49 +1074,47 @@ var useMediaApi = function useMediaApi() {
|
|
|
1211
1074
|
}, [setReady, onLoadStart]);
|
|
1212
1075
|
var onCustomCanPlayThrough = react.useCallback(function () {
|
|
1213
1076
|
setReady(true);
|
|
1214
|
-
|
|
1215
1077
|
if (onCanPlayThough !== null) {
|
|
1216
1078
|
onCanPlayThough();
|
|
1217
1079
|
}
|
|
1218
1080
|
}, [setReady, onCanPlayThough]);
|
|
1219
1081
|
var onCustomCanPlay = react.useCallback(function () {
|
|
1220
1082
|
setReady(true);
|
|
1221
|
-
|
|
1222
1083
|
if (onCanPlay !== null) {
|
|
1223
1084
|
onCanPlay();
|
|
1224
1085
|
}
|
|
1225
1086
|
}, [setReady, onCanPlay]);
|
|
1226
1087
|
var onCustomLoadedMetadata = react.useCallback(function () {
|
|
1227
1088
|
setReady(true);
|
|
1228
|
-
|
|
1229
1089
|
if (onLoadedMetadata !== null) {
|
|
1230
1090
|
onLoadedMetadata();
|
|
1231
1091
|
}
|
|
1232
1092
|
}, [setReady, onLoadedMetadata]);
|
|
1233
1093
|
var onCustomLoadedData = react.useCallback(function () {
|
|
1234
1094
|
setDataReady(true);
|
|
1235
|
-
|
|
1236
1095
|
if (onLoadedData !== null) {
|
|
1237
1096
|
onLoadedData();
|
|
1238
1097
|
}
|
|
1239
1098
|
}, [setDataReady, onLoadedData]);
|
|
1240
1099
|
var onCustomSuspended = react.useCallback(function () {
|
|
1241
1100
|
setSuspended(true);
|
|
1242
|
-
|
|
1243
1101
|
if (onSuspend !== null) {
|
|
1244
1102
|
onSuspend();
|
|
1245
1103
|
}
|
|
1246
1104
|
}, [setSuspended, onSuspended]);
|
|
1247
1105
|
react.useEffect(function () {
|
|
1248
1106
|
var _ref$current = ref.current,
|
|
1249
|
-
|
|
1107
|
+
media = _ref$current === void 0 ? null : _ref$current;
|
|
1108
|
+
|
|
1109
|
+
// console.log('actions', url);
|
|
1250
1110
|
|
|
1251
1111
|
if (media !== null) {
|
|
1252
1112
|
media.addEventListener('volumechange', onCustomVolumeChange);
|
|
1253
1113
|
media.addEventListener('play', onCustomPlay);
|
|
1254
1114
|
media.addEventListener('pause', onCustomPause);
|
|
1255
1115
|
media.addEventListener('ended', onCustomEnded);
|
|
1256
|
-
media.addEventListener('seeked', onCustomSeeked);
|
|
1116
|
+
media.addEventListener('seeked', onCustomSeeked);
|
|
1117
|
+
// media.addEventListener('loadstart', onCustomLoadStart);
|
|
1257
1118
|
// media.addEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
1258
1119
|
// media.addEventListener('canplay', onCustomCanPlay);
|
|
1259
1120
|
// media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
|
|
@@ -1266,21 +1127,23 @@ var useMediaApi = function useMediaApi() {
|
|
|
1266
1127
|
media.removeEventListener('play', onCustomPlay);
|
|
1267
1128
|
media.removeEventListener('pause', onCustomPause);
|
|
1268
1129
|
media.removeEventListener('ended', onCustomEnded);
|
|
1269
|
-
media.removeEventListener('seeked', onCustomSeeked);
|
|
1130
|
+
media.removeEventListener('seeked', onCustomSeeked);
|
|
1131
|
+
// media.removeEventListener('loadstart', onCustomLoadStart);
|
|
1270
1132
|
// media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
1271
1133
|
// media.removeEventListener('canplay', onCustomCanPlay);
|
|
1272
1134
|
// media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
|
|
1273
1135
|
}
|
|
1274
1136
|
};
|
|
1275
|
-
}, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended
|
|
1137
|
+
}, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended
|
|
1138
|
+
// onCustomLoadStart,
|
|
1276
1139
|
// onCustomCanPlayThrough,
|
|
1277
1140
|
// onCustomCanPlay,
|
|
1278
1141
|
// onCustomLoadedMetadata,
|
|
1279
1142
|
]);
|
|
1143
|
+
|
|
1280
1144
|
react.useEffect(function () {
|
|
1281
1145
|
var _ref$current2 = ref.current,
|
|
1282
|
-
|
|
1283
|
-
|
|
1146
|
+
media = _ref$current2 === void 0 ? null : _ref$current2;
|
|
1284
1147
|
if (media !== null) {
|
|
1285
1148
|
media.addEventListener('loadstart', onCustomLoadStart);
|
|
1286
1149
|
media.addEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
@@ -1289,7 +1152,6 @@ var useMediaApi = function useMediaApi() {
|
|
|
1289
1152
|
media.addEventListener('loadeddata', onCustomLoadedData);
|
|
1290
1153
|
media.addEventListener('suspend', onCustomSuspended);
|
|
1291
1154
|
}
|
|
1292
|
-
|
|
1293
1155
|
return function () {
|
|
1294
1156
|
if (media !== null) {
|
|
1295
1157
|
media.removeEventListener('loadstart', onCustomLoadStart);
|
|
@@ -1299,31 +1161,30 @@ var useMediaApi = function useMediaApi() {
|
|
|
1299
1161
|
media.removeEventListener('suspend', onCustomSuspended);
|
|
1300
1162
|
}
|
|
1301
1163
|
};
|
|
1302
|
-
}, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]);
|
|
1164
|
+
}, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]);
|
|
1303
1165
|
|
|
1166
|
+
// Duration
|
|
1304
1167
|
react.useEffect(function () {
|
|
1305
1168
|
var _ref$current3 = ref.current,
|
|
1306
|
-
|
|
1307
|
-
|
|
1169
|
+
media = _ref$current3 === void 0 ? null : _ref$current3;
|
|
1308
1170
|
if (media !== null) {
|
|
1309
1171
|
media.addEventListener('durationchange', onCustomDurationChange);
|
|
1310
1172
|
}
|
|
1311
|
-
|
|
1312
1173
|
return function () {
|
|
1313
1174
|
if (media !== null) {
|
|
1314
1175
|
media.removeEventListener('durationchange', onCustomDurationChange);
|
|
1315
1176
|
}
|
|
1316
1177
|
};
|
|
1317
|
-
}, [url, onCustomDurationChange]);
|
|
1178
|
+
}, [url, onCustomDurationChange]);
|
|
1318
1179
|
|
|
1180
|
+
// Timeupdate
|
|
1319
1181
|
react.useEffect(function () {
|
|
1320
1182
|
var _ref$current4 = ref.current,
|
|
1321
|
-
|
|
1322
|
-
|
|
1183
|
+
media = _ref$current4 === void 0 ? null : _ref$current4;
|
|
1184
|
+
// console.log('timeupdate', url);
|
|
1323
1185
|
if (media !== null) {
|
|
1324
1186
|
media.addEventListener('timeupdate', onCustomTimeUpdate);
|
|
1325
1187
|
}
|
|
1326
|
-
|
|
1327
1188
|
return function () {
|
|
1328
1189
|
if (media !== null) {
|
|
1329
1190
|
media.removeEventListener('timeupdate', onCustomTimeUpdate);
|
|
@@ -1332,14 +1193,12 @@ var useMediaApi = function useMediaApi() {
|
|
|
1332
1193
|
}, [url, onCustomTimeUpdate, onCustomDurationChange]);
|
|
1333
1194
|
react.useEffect(function () {
|
|
1334
1195
|
var _ref$current5 = ref.current,
|
|
1335
|
-
|
|
1336
|
-
|
|
1196
|
+
media = _ref$current5 === void 0 ? null : _ref$current5;
|
|
1337
1197
|
if (media !== null && media.readyState > 1) {
|
|
1338
1198
|
setDataReady(true);
|
|
1339
1199
|
} else {
|
|
1340
1200
|
setDataReady(false);
|
|
1341
1201
|
}
|
|
1342
|
-
|
|
1343
1202
|
if (media !== null && media.readyState > 3) {
|
|
1344
1203
|
setReady(true);
|
|
1345
1204
|
} else {
|
|
@@ -1364,75 +1223,63 @@ var useMediaApi = function useMediaApi() {
|
|
|
1364
1223
|
|
|
1365
1224
|
function useMediaCurrentTime(element) {
|
|
1366
1225
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1226
|
+
_ref$id = _ref.id,
|
|
1227
|
+
id = _ref$id === void 0 ? null : _ref$id,
|
|
1228
|
+
_ref$disabled = _ref.disabled,
|
|
1229
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1230
|
+
_ref$updateInterval = _ref.updateInterval,
|
|
1231
|
+
updateInterval = _ref$updateInterval === void 0 ? 1000 : _ref$updateInterval,
|
|
1232
|
+
_ref$onUpdate = _ref.onUpdate,
|
|
1233
|
+
customOnUpdate = _ref$onUpdate === void 0 ? null : _ref$onUpdate;
|
|
1376
1234
|
var _useState = react.useState(0),
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1235
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1236
|
+
currentTime = _useState2[0],
|
|
1237
|
+
setCurrentTime = _useState2[1];
|
|
1381
1238
|
var realCurrentTime = react.useRef(currentTime);
|
|
1382
1239
|
var finalId = id || element;
|
|
1383
1240
|
var lastIdRef = react.useRef(finalId);
|
|
1384
1241
|
var idChanged = lastIdRef.current !== finalId;
|
|
1385
1242
|
var disabledRef = react.useRef(disabled);
|
|
1386
1243
|
var disabledChanged = disabledRef.current !== disabled;
|
|
1387
|
-
|
|
1388
1244
|
if (idChanged || disabledChanged) {
|
|
1389
1245
|
realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
|
|
1390
1246
|
lastIdRef.current = finalId;
|
|
1391
1247
|
disabledRef.current = disabled;
|
|
1392
|
-
}
|
|
1393
|
-
|
|
1248
|
+
}
|
|
1394
1249
|
|
|
1250
|
+
// Check time update
|
|
1395
1251
|
react.useEffect(function () {
|
|
1396
1252
|
if (element === null) {
|
|
1397
1253
|
return function () {};
|
|
1398
1254
|
}
|
|
1399
|
-
|
|
1400
1255
|
function updateTime() {
|
|
1401
1256
|
var time = element.currentTime || 0;
|
|
1402
|
-
|
|
1403
1257
|
if (time !== realCurrentTime.current) {
|
|
1404
1258
|
realCurrentTime.current = time;
|
|
1405
1259
|
setCurrentTime(time);
|
|
1406
|
-
|
|
1407
1260
|
if (customOnUpdate !== null) {
|
|
1408
1261
|
customOnUpdate(time);
|
|
1409
1262
|
}
|
|
1410
1263
|
}
|
|
1411
|
-
|
|
1412
1264
|
return time;
|
|
1413
1265
|
}
|
|
1414
|
-
|
|
1415
1266
|
if (disabled) {
|
|
1416
1267
|
updateTime();
|
|
1417
1268
|
return function () {};
|
|
1418
1269
|
}
|
|
1419
|
-
|
|
1420
1270
|
var timeout = null;
|
|
1421
|
-
|
|
1422
1271
|
function loop() {
|
|
1423
1272
|
var _element$duration = element.duration,
|
|
1424
|
-
|
|
1273
|
+
duration = _element$duration === void 0 ? 0 : _element$duration;
|
|
1425
1274
|
var time = updateTime();
|
|
1426
1275
|
var remainingTime = Math.floor(((duration || 0) - time) * 1000);
|
|
1427
1276
|
timeout = setTimeout(loop, Math.max(Math.min(updateInterval, remainingTime), updateInterval));
|
|
1428
1277
|
}
|
|
1429
|
-
|
|
1430
1278
|
loop();
|
|
1431
1279
|
return function () {
|
|
1432
1280
|
if (element !== null) {
|
|
1433
1281
|
realCurrentTime.current = element.currentTime;
|
|
1434
1282
|
}
|
|
1435
|
-
|
|
1436
1283
|
if (timeout !== null) {
|
|
1437
1284
|
clearInterval(timeout);
|
|
1438
1285
|
}
|
|
@@ -1443,38 +1290,31 @@ function useMediaCurrentTime(element) {
|
|
|
1443
1290
|
|
|
1444
1291
|
function useMediaDuration(element) {
|
|
1445
1292
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1293
|
+
_ref$id = _ref.id,
|
|
1294
|
+
id = _ref$id === void 0 ? null : _ref$id;
|
|
1449
1295
|
var _useState = react.useState(element !== null ? element.duration || 0 : 0),
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1296
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1297
|
+
duration = _useState2[0],
|
|
1298
|
+
setDuration = _useState2[1];
|
|
1454
1299
|
var realDuration = react.useRef(duration);
|
|
1455
1300
|
var finalId = id || element;
|
|
1456
1301
|
var lastIdRef = react.useRef(finalId);
|
|
1457
1302
|
var idChanged = lastIdRef.current !== finalId;
|
|
1458
|
-
|
|
1459
1303
|
if (idChanged) {
|
|
1460
1304
|
realDuration.current = element !== null ? element.duration || 0 : 0;
|
|
1461
1305
|
lastIdRef.current = finalId;
|
|
1462
1306
|
}
|
|
1463
|
-
|
|
1464
1307
|
react.useEffect(function () {
|
|
1465
1308
|
if (element === null) {
|
|
1466
1309
|
return function () {};
|
|
1467
1310
|
}
|
|
1468
|
-
|
|
1469
1311
|
function updateDuration() {
|
|
1470
1312
|
var newDuration = element.duration || 0;
|
|
1471
|
-
|
|
1472
1313
|
if (newDuration !== realDuration.current) {
|
|
1473
1314
|
realDuration.current = newDuration;
|
|
1474
1315
|
setDuration(newDuration);
|
|
1475
1316
|
}
|
|
1476
1317
|
}
|
|
1477
|
-
|
|
1478
1318
|
updateDuration();
|
|
1479
1319
|
element.addEventListener('canplay', updateDuration);
|
|
1480
1320
|
element.addEventListener('loadedmetadata', updateDuration);
|
|
@@ -1490,11 +1330,10 @@ function useMediaDuration(element) {
|
|
|
1490
1330
|
|
|
1491
1331
|
function useMediaLoad(element) {
|
|
1492
1332
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1333
|
+
_ref$preload = _ref.preload,
|
|
1334
|
+
preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
|
|
1335
|
+
_ref$shouldLoad = _ref.shouldLoad,
|
|
1336
|
+
shouldLoad = _ref$shouldLoad === void 0 ? false : _ref$shouldLoad;
|
|
1498
1337
|
var firstPreloadRef = react.useRef(preload);
|
|
1499
1338
|
var firstShouldLoadRef = react.useRef(shouldLoad);
|
|
1500
1339
|
var hasLoadedRef = react.useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
|
|
@@ -1502,7 +1341,6 @@ function useMediaLoad(element) {
|
|
|
1502
1341
|
var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad;
|
|
1503
1342
|
var preloadHasChanged = firstPreloadRef.current !== preload;
|
|
1504
1343
|
var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
|
|
1505
|
-
|
|
1506
1344
|
if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
|
|
1507
1345
|
hasLoadedRef.current = true;
|
|
1508
1346
|
element.load();
|
|
@@ -1511,31 +1349,26 @@ function useMediaLoad(element) {
|
|
|
1511
1349
|
}
|
|
1512
1350
|
|
|
1513
1351
|
var _excluded$1 = ["disabled"];
|
|
1514
|
-
|
|
1515
1352
|
function useMediaProgress(media) {
|
|
1516
1353
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1354
|
+
_ref$disabled = _ref.disabled,
|
|
1355
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1356
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
|
|
1521
1357
|
var _useState = react.useState(!disabled),
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1358
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1359
|
+
playing = _useState2[0],
|
|
1360
|
+
setPlaying = _useState2[1];
|
|
1361
|
+
// const currentTime = useMediaCurrentTime(media, {
|
|
1525
1362
|
// disabled: disabled || !playing,
|
|
1526
1363
|
// ...props,
|
|
1527
1364
|
// });
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
1365
|
var duration = useMediaDuration(media, _objectSpread__default["default"]({
|
|
1531
1366
|
disabled: disabled || !playing
|
|
1532
1367
|
}, props));
|
|
1533
|
-
|
|
1534
1368
|
var _useState3 = react.useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1369
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
1370
|
+
progress = _useState4[0],
|
|
1371
|
+
setProgress = _useState4[1];
|
|
1539
1372
|
var realProgressRef = react.useRef(progress);
|
|
1540
1373
|
var updateTimeRef = react.useRef(new Date().getTime());
|
|
1541
1374
|
var updateProgress = react.useCallback(function (newProgress) {
|
|
@@ -1547,63 +1380,56 @@ function useMediaProgress(media) {
|
|
|
1547
1380
|
if (media === null) {
|
|
1548
1381
|
return function () {};
|
|
1549
1382
|
}
|
|
1550
|
-
|
|
1551
1383
|
function onResume() {
|
|
1552
1384
|
if (!playing) {
|
|
1553
1385
|
setPlaying(true);
|
|
1554
1386
|
}
|
|
1555
|
-
|
|
1556
1387
|
updateProgress(media.currentTime / media.duration);
|
|
1557
1388
|
}
|
|
1558
|
-
|
|
1559
1389
|
function onPause() {
|
|
1560
1390
|
if (playing) {
|
|
1561
1391
|
setPlaying(false);
|
|
1562
1392
|
}
|
|
1563
|
-
|
|
1564
1393
|
updateProgress(media.currentTime / media.duration);
|
|
1565
1394
|
}
|
|
1566
|
-
|
|
1567
1395
|
media.addEventListener('play', onResume);
|
|
1568
1396
|
media.addEventListener('seeked', onResume);
|
|
1569
|
-
media.addEventListener('playing', onResume);
|
|
1570
|
-
|
|
1397
|
+
media.addEventListener('playing', onResume);
|
|
1398
|
+
// media.addEventListener('timeupdate', onResume);
|
|
1571
1399
|
media.addEventListener('pause', onPause);
|
|
1572
1400
|
media.addEventListener('ended', onPause);
|
|
1573
1401
|
media.addEventListener('waiting', onPause);
|
|
1574
1402
|
media.addEventListener('stalled', onPause);
|
|
1575
|
-
media.addEventListener('seeking', onPause);
|
|
1403
|
+
media.addEventListener('seeking', onPause);
|
|
1404
|
+
// media.addEventListener('suspend', onPause);
|
|
1576
1405
|
// if (media.paused) {
|
|
1577
1406
|
// onPause();
|
|
1578
1407
|
// } else {
|
|
1579
1408
|
// onResume();
|
|
1580
1409
|
// }
|
|
1581
|
-
|
|
1582
1410
|
return function () {
|
|
1583
1411
|
media.removeEventListener('play', onResume);
|
|
1584
1412
|
media.removeEventListener('seeked', onResume);
|
|
1585
|
-
media.removeEventListener('playing', onResume);
|
|
1586
|
-
|
|
1413
|
+
media.removeEventListener('playing', onResume);
|
|
1414
|
+
// media.removeEventListener('timeupdate', onResume);
|
|
1587
1415
|
media.removeEventListener('pause', onPause);
|
|
1588
1416
|
media.removeEventListener('ended', onPause);
|
|
1589
1417
|
media.removeEventListener('waiting', onPause);
|
|
1590
1418
|
media.removeEventListener('stalled', onPause);
|
|
1591
|
-
media.removeEventListener('seeking', onPause);
|
|
1419
|
+
media.removeEventListener('seeking', onPause);
|
|
1420
|
+
// media.removeEventListener('suspend', onPause);
|
|
1592
1421
|
};
|
|
1593
1422
|
}, [media, updateProgress, setPlaying, playing]);
|
|
1594
1423
|
react.useEffect(function () {
|
|
1595
1424
|
if (media === null || !playing || disabled) {
|
|
1596
1425
|
return function () {};
|
|
1597
1426
|
}
|
|
1598
|
-
|
|
1599
1427
|
var handle;
|
|
1600
1428
|
var canceled = false;
|
|
1601
|
-
|
|
1602
1429
|
function tick() {
|
|
1603
1430
|
if (canceled) {
|
|
1604
1431
|
return;
|
|
1605
1432
|
}
|
|
1606
|
-
|
|
1607
1433
|
var newTime = new Date().getTime();
|
|
1608
1434
|
var elapsed = newTime - updateTimeRef.current;
|
|
1609
1435
|
updateTimeRef.current = newTime;
|
|
@@ -1612,7 +1438,6 @@ function useMediaProgress(media) {
|
|
|
1612
1438
|
updateProgress(newProgress);
|
|
1613
1439
|
handle = raf__default["default"](tick);
|
|
1614
1440
|
}
|
|
1615
|
-
|
|
1616
1441
|
tick();
|
|
1617
1442
|
return function () {
|
|
1618
1443
|
canceled = true;
|
|
@@ -1624,31 +1449,25 @@ function useMediaProgress(media) {
|
|
|
1624
1449
|
|
|
1625
1450
|
function useMediaReady(element) {
|
|
1626
1451
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1452
|
+
_ref$id = _ref.id,
|
|
1453
|
+
id = _ref$id === void 0 ? null : _ref$id;
|
|
1630
1454
|
var _useState = react.useState(element !== null && element.readyState > 0),
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1455
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1456
|
+
ready = _useState2[0],
|
|
1457
|
+
setReady = _useState2[1];
|
|
1635
1458
|
var realReady = react.useRef(ready);
|
|
1636
1459
|
var lastIdRef = react.useRef(id);
|
|
1637
1460
|
var idChanged = lastIdRef.current !== id;
|
|
1638
|
-
|
|
1639
1461
|
if (idChanged) {
|
|
1640
1462
|
realReady.current = false;
|
|
1641
1463
|
lastIdRef.current = id;
|
|
1642
1464
|
}
|
|
1643
|
-
|
|
1644
1465
|
react.useEffect(function () {
|
|
1645
1466
|
if (element === null) {
|
|
1646
1467
|
return function () {};
|
|
1647
1468
|
}
|
|
1648
|
-
|
|
1649
1469
|
function updateReady() {
|
|
1650
1470
|
var currentReady = ready;
|
|
1651
|
-
|
|
1652
1471
|
if (element.readyState > 0 && !ready) {
|
|
1653
1472
|
setReady(true);
|
|
1654
1473
|
currentReady = true;
|
|
@@ -1656,19 +1475,15 @@ function useMediaReady(element) {
|
|
|
1656
1475
|
setReady(false);
|
|
1657
1476
|
currentReady = false;
|
|
1658
1477
|
}
|
|
1659
|
-
|
|
1660
1478
|
realReady.current = currentReady;
|
|
1661
1479
|
return currentReady;
|
|
1662
1480
|
}
|
|
1663
|
-
|
|
1664
1481
|
var currentReady = updateReady();
|
|
1665
|
-
|
|
1666
1482
|
if (!currentReady) {
|
|
1667
1483
|
element.addEventListener('loadedmetadata', updateReady);
|
|
1668
1484
|
element.addEventListener('canplay', updateReady);
|
|
1669
1485
|
element.addEventListener('canplaythrough', updateReady);
|
|
1670
1486
|
}
|
|
1671
|
-
|
|
1672
1487
|
return function () {
|
|
1673
1488
|
if (!currentReady) {
|
|
1674
1489
|
element.removeEventListener('loadedmetadata', updateReady);
|
|
@@ -1682,8 +1497,9 @@ function useMediaReady(element) {
|
|
|
1682
1497
|
|
|
1683
1498
|
var useMediasParser = function useMediasParser() {
|
|
1684
1499
|
var screensManager = contexts.useScreensManager();
|
|
1685
|
-
var fieldsManager = contexts.useFieldsManager();
|
|
1500
|
+
var fieldsManager = contexts.useFieldsManager();
|
|
1686
1501
|
|
|
1502
|
+
// Convert medias object to path
|
|
1687
1503
|
var parser = react.useMemo(function () {
|
|
1688
1504
|
return new core.MediasParser({
|
|
1689
1505
|
screensManager: screensManager,
|
|
@@ -1709,28 +1525,23 @@ function useMediaThumbnail(media) {
|
|
|
1709
1525
|
if (isObject__default["default"](file)) {
|
|
1710
1526
|
return file;
|
|
1711
1527
|
}
|
|
1712
|
-
|
|
1713
1528
|
var _ref = media || {},
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1529
|
+
_ref$thumbnail_url = _ref.thumbnail_url,
|
|
1530
|
+
defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
|
|
1531
|
+
_ref$files = _ref.files,
|
|
1532
|
+
files = _ref$files === void 0 ? null : _ref$files,
|
|
1533
|
+
_ref$metadata = _ref.metadata,
|
|
1534
|
+
metadata = _ref$metadata === void 0 ? null : _ref$metadata;
|
|
1721
1535
|
var _ref2 = metadata || {},
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1536
|
+
mediaWidth = _ref2.width,
|
|
1537
|
+
mediaHeight = _ref2.height;
|
|
1725
1538
|
var filesArray = utils.getMediaFilesAsArray(files) || [];
|
|
1726
|
-
|
|
1727
1539
|
var _ref3 = (file !== null ? filesArray.find(function (_ref4) {
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1540
|
+
var handle = _ref4.handle;
|
|
1541
|
+
return handle === file;
|
|
1542
|
+
}) || null : null) || {},
|
|
1543
|
+
_ref3$url = _ref3.url,
|
|
1544
|
+
url = _ref3$url === void 0 ? null : _ref3$url;
|
|
1734
1545
|
return url !== null || defaultThumbnailUrl !== null ? {
|
|
1735
1546
|
url: url || defaultThumbnailUrl,
|
|
1736
1547
|
metadata: {
|
|
@@ -1744,30 +1555,25 @@ function useMediaThumbnail(media) {
|
|
|
1744
1555
|
|
|
1745
1556
|
function useMediaWaveform(media) {
|
|
1746
1557
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1558
|
+
_ref$fake = _ref.fake,
|
|
1559
|
+
fake = _ref$fake === void 0 ? false : _ref$fake,
|
|
1560
|
+
_ref$reduceBufferFact = _ref.reduceBufferFactor,
|
|
1561
|
+
reduceBufferFactor = _ref$reduceBufferFact === void 0 ? 100 : _ref$reduceBufferFact;
|
|
1752
1562
|
var _ref2 = media || {},
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1563
|
+
_ref2$url = _ref2.url,
|
|
1564
|
+
url = _ref2$url === void 0 ? null : _ref2$url,
|
|
1565
|
+
_ref2$metadata = _ref2.metadata,
|
|
1566
|
+
metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
|
|
1758
1567
|
var _ref3 = metadata || {},
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1568
|
+
_ref3$waveform = _ref3.waveform,
|
|
1569
|
+
waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
|
|
1762
1570
|
var _useState = react.useState(null),
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1571
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1572
|
+
audioLevels = _useState2[0],
|
|
1573
|
+
setAudioLevels = _useState2[1];
|
|
1767
1574
|
react.useEffect(function () {
|
|
1768
1575
|
var canceled = false;
|
|
1769
1576
|
var AudioContext = typeof window !== 'undefined' ? window.AudioContext || window.webkitAudioContext : null;
|
|
1770
|
-
|
|
1771
1577
|
if (waveform !== null) {
|
|
1772
1578
|
setAudioLevels(waveform.map(function (it) {
|
|
1773
1579
|
return (it + 256 / 2) / 256;
|
|
@@ -1784,18 +1590,15 @@ function useMediaWaveform(media) {
|
|
|
1784
1590
|
if (canceled) {
|
|
1785
1591
|
throw new Error('Audio loading canceled');
|
|
1786
1592
|
}
|
|
1787
|
-
|
|
1788
1593
|
return response.arrayBuffer();
|
|
1789
1594
|
}).then(function (arrayBuffer) {
|
|
1790
1595
|
if (canceled) {
|
|
1791
1596
|
throw new Error('Audio loading canceled');
|
|
1792
1597
|
}
|
|
1793
|
-
|
|
1794
1598
|
var audioCtx = new AudioContext();
|
|
1795
1599
|
return audioCtx.decodeAudioData(arrayBuffer);
|
|
1796
1600
|
}).then(function (buffer) {
|
|
1797
1601
|
var channelsCount = buffer.numberOfChannels;
|
|
1798
|
-
|
|
1799
1602
|
if (channelsCount > 0) {
|
|
1800
1603
|
var leftChannelData = buffer.getChannelData(0);
|
|
1801
1604
|
setAudioLevels(leftChannelData.reduce(function (newArray, level) {
|
|
@@ -1808,7 +1611,6 @@ function useMediaWaveform(media) {
|
|
|
1808
1611
|
throw e;
|
|
1809
1612
|
});
|
|
1810
1613
|
}
|
|
1811
|
-
|
|
1812
1614
|
return function () {
|
|
1813
1615
|
if (url === null) {
|
|
1814
1616
|
canceled = true;
|
|
@@ -1818,17 +1620,18 @@ function useMediaWaveform(media) {
|
|
|
1818
1620
|
return audioLevels;
|
|
1819
1621
|
}
|
|
1820
1622
|
|
|
1623
|
+
// const debug = createDebug('core:useParsedStory');
|
|
1624
|
+
|
|
1821
1625
|
var useParsedStory = function useParsedStory(story) {
|
|
1822
1626
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1627
|
+
_ref$disabled = _ref.disabled,
|
|
1628
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1629
|
+
_ref$withTheme = _ref.withTheme,
|
|
1630
|
+
withTheme = _ref$withTheme === void 0 ? true : _ref$withTheme,
|
|
1631
|
+
_ref$withMedias = _ref.withMedias,
|
|
1632
|
+
withMedias = _ref$withMedias === void 0 ? true : _ref$withMedias,
|
|
1633
|
+
_ref$withFonts = _ref.withFonts,
|
|
1634
|
+
withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts;
|
|
1832
1635
|
var screensManager = contexts.useScreensManager();
|
|
1833
1636
|
var fieldsManager = contexts.useFieldsManager();
|
|
1834
1637
|
var parser = react.useMemo(function () {
|
|
@@ -1841,7 +1644,6 @@ var useParsedStory = function useParsedStory(story) {
|
|
|
1841
1644
|
if (disabled) {
|
|
1842
1645
|
return story;
|
|
1843
1646
|
}
|
|
1844
|
-
|
|
1845
1647
|
return parser.parse(story, {
|
|
1846
1648
|
withMedias: withMedias,
|
|
1847
1649
|
withTheme: withTheme,
|
|
@@ -1853,21 +1655,19 @@ var useParsedStory = function useParsedStory(story) {
|
|
|
1853
1655
|
|
|
1854
1656
|
function useProgressSteps() {
|
|
1855
1657
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1658
|
+
_ref$disabled = _ref.disabled,
|
|
1659
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1660
|
+
currentTime = _ref.currentTime,
|
|
1661
|
+
duration = _ref.duration,
|
|
1662
|
+
_ref$onStep = _ref.onStep,
|
|
1663
|
+
onStep = _ref$onStep === void 0 ? null : _ref$onStep,
|
|
1664
|
+
_ref$steps = _ref.steps,
|
|
1665
|
+
steps = _ref$steps === void 0 ? [0.1, 0.25, 0.5, 0.75, 0.9] : _ref$steps;
|
|
1865
1666
|
var progressStepsReached = react.useRef({});
|
|
1866
1667
|
react.useEffect(function () {
|
|
1867
1668
|
if (duration === 0 || disabled) {
|
|
1868
1669
|
return;
|
|
1869
1670
|
}
|
|
1870
|
-
|
|
1871
1671
|
var progress = currentTime / duration;
|
|
1872
1672
|
var currentSteps = progressStepsReached.current;
|
|
1873
1673
|
var stepsToTrack = steps.filter(function (step) {
|
|
@@ -1877,7 +1677,6 @@ function useProgressSteps() {
|
|
|
1877
1677
|
if (onStep !== null) {
|
|
1878
1678
|
onStep(step);
|
|
1879
1679
|
}
|
|
1880
|
-
|
|
1881
1680
|
currentSteps[step] = true;
|
|
1882
1681
|
});
|
|
1883
1682
|
}, [duration, currentTime, disabled]);
|
|
@@ -1885,37 +1684,34 @@ function useProgressSteps() {
|
|
|
1885
1684
|
|
|
1886
1685
|
var _excluded = ["width", "height"];
|
|
1887
1686
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
1888
|
-
|
|
1889
1687
|
var useScreenSize = function useScreenSize(_ref) {
|
|
1890
1688
|
var _ref$width = _ref.width,
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1689
|
+
width = _ref$width === void 0 ? null : _ref$width,
|
|
1690
|
+
_ref$height = _ref.height,
|
|
1691
|
+
height = _ref$height === void 0 ? null : _ref$height,
|
|
1692
|
+
_ref$landscape = _ref.landscape,
|
|
1693
|
+
landscape = _ref$landscape === void 0 ? false : _ref$landscape,
|
|
1694
|
+
_ref$menuOverScreen = _ref.menuOverScreen,
|
|
1695
|
+
menuOverScreen = _ref$menuOverScreen === void 0 ? false : _ref$menuOverScreen,
|
|
1696
|
+
_ref$screens = _ref.screens,
|
|
1697
|
+
screens = _ref$screens === void 0 ? [] : _ref$screens,
|
|
1698
|
+
_ref$mediaType = _ref.mediaType,
|
|
1699
|
+
mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
|
|
1700
|
+
_ref$media = _ref.media,
|
|
1701
|
+
providedMedia = _ref$media === void 0 ? null : _ref$media,
|
|
1702
|
+
_ref$scale = _ref.scale,
|
|
1703
|
+
scale = _ref$scale === void 0 ? null : _ref$scale;
|
|
1906
1704
|
var screenSize = react.useMemo(function () {
|
|
1907
1705
|
var media = providedMedia !== null ? providedMedia : {
|
|
1908
1706
|
type: mediaType,
|
|
1909
1707
|
width: "".concat(width, "px"),
|
|
1910
1708
|
height: "".concat(height, "px")
|
|
1911
1709
|
};
|
|
1912
|
-
|
|
1913
1710
|
var matchingScreens = _toConsumableArray__default["default"](screens).reverse().filter(function (_ref2) {
|
|
1914
1711
|
var _ref2$mediaQuery = _ref2.mediaQuery,
|
|
1915
|
-
|
|
1712
|
+
mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
|
|
1916
1713
|
return mediaQuery === null || cssMediaquery.match(mediaQuery, media);
|
|
1917
1714
|
});
|
|
1918
|
-
|
|
1919
1715
|
return {
|
|
1920
1716
|
screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
|
|
1921
1717
|
screens: _toConsumableArray__default["default"](matchingScreens).reverse().map(function (_ref3) {
|
|
@@ -1931,41 +1727,36 @@ var useScreenSize = function useScreenSize(_ref) {
|
|
|
1931
1727
|
}, [screens, providedMedia, mediaType, width, height, landscape, menuOverScreen]);
|
|
1932
1728
|
return screenSize;
|
|
1933
1729
|
};
|
|
1934
|
-
|
|
1935
1730
|
var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
1936
1731
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1732
|
+
_ref4$width = _ref4.width,
|
|
1733
|
+
width = _ref4$width === void 0 ? null : _ref4$width,
|
|
1734
|
+
_ref4$height = _ref4.height,
|
|
1735
|
+
height = _ref4$height === void 0 ? null : _ref4$height,
|
|
1736
|
+
opts = _objectWithoutProperties__default["default"](_ref4, _excluded);
|
|
1943
1737
|
var _useDimensionObserver = useDimensionObserver(),
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1738
|
+
ref = _useDimensionObserver.ref,
|
|
1739
|
+
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
1740
|
+
calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
|
|
1741
|
+
_useDimensionObserver3 = _useDimensionObserver.height,
|
|
1742
|
+
calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
|
|
1950
1743
|
var fullWidth = width !== null ? width : calculatedWidth;
|
|
1951
1744
|
var fullHeight = height !== null ? height : calculatedHeight;
|
|
1952
|
-
|
|
1953
1745
|
var _ref5 = opts || {},
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1746
|
+
_ref5$screenWidth = _ref5.screenWidth,
|
|
1747
|
+
screenWidth = _ref5$screenWidth === void 0 ? 320 : _ref5$screenWidth,
|
|
1748
|
+
_ref5$screenHeight = _ref5.screenHeight,
|
|
1749
|
+
screenHeight = _ref5$screenHeight === void 0 ? 480 : _ref5$screenHeight,
|
|
1750
|
+
_ref5$withoutMaxSize = _ref5.withoutMaxSize,
|
|
1751
|
+
withoutMaxSize = _ref5$withoutMaxSize === void 0 ? false : _ref5$withoutMaxSize,
|
|
1752
|
+
_ref5$landscapeMinHei = _ref5.landscapeMinHeight,
|
|
1753
|
+
landscapeMinHeight = _ref5$landscapeMinHei === void 0 ? 600 : _ref5$landscapeMinHei,
|
|
1754
|
+
_ref5$menuAlwaysOverS = _ref5.menuAlwaysOverScreen,
|
|
1755
|
+
menuAlwaysOverScreen = _ref5$menuAlwaysOverS === void 0 ? true : _ref5$menuAlwaysOverS,
|
|
1756
|
+
_ref5$landscapeMinRat = _ref5.landscapeMinRatio,
|
|
1757
|
+
landscapeMinRatio = _ref5$landscapeMinRat === void 0 ? 2 / 3 : _ref5$landscapeMinRat,
|
|
1758
|
+
_ref5$withoutScale = _ref5.withoutScale,
|
|
1759
|
+
withoutScale = _ref5$withoutScale === void 0 ? false : _ref5$withoutScale;
|
|
1969
1760
|
var screenRatio = screenWidth / screenHeight;
|
|
1970
1761
|
var elementRatio = fullWidth / fullHeight;
|
|
1971
1762
|
var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
|
|
@@ -1973,25 +1764,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
1973
1764
|
var finalWidth = fullWidth;
|
|
1974
1765
|
var finalHeight = fullHeight;
|
|
1975
1766
|
var menuOverScreen = !landscape;
|
|
1976
|
-
|
|
1977
1767
|
if (landscapeWithMaxSize) {
|
|
1978
1768
|
if (fullHeight < landscapeMinHeight || menuAlwaysOverScreen) {
|
|
1979
1769
|
menuOverScreen = true;
|
|
1980
1770
|
} else {
|
|
1981
1771
|
finalHeight = fullHeight - 100;
|
|
1982
1772
|
}
|
|
1983
|
-
|
|
1984
1773
|
finalWidth = Math.round(finalHeight * screenRatio);
|
|
1985
1774
|
}
|
|
1986
|
-
|
|
1987
1775
|
if (finalWidth % 2 === 1) {
|
|
1988
1776
|
finalWidth -= 1;
|
|
1989
1777
|
}
|
|
1990
|
-
|
|
1991
1778
|
if (finalHeight % 2 === 1) {
|
|
1992
1779
|
finalHeight -= 1;
|
|
1993
1780
|
}
|
|
1994
|
-
|
|
1995
1781
|
var scale = finalWidth > 0 ? finalWidth / screenWidth : null;
|
|
1996
1782
|
var screenSize = useScreenSize(_objectSpread__default["default"]({
|
|
1997
1783
|
width: withoutScale || scale === null ? finalWidth : screenWidth,
|
|
@@ -2009,29 +1795,24 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
2009
1795
|
resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
|
|
2010
1796
|
};
|
|
2011
1797
|
};
|
|
2012
|
-
|
|
2013
1798
|
var getWindowSize = function getWindowSize() {
|
|
2014
1799
|
return {
|
|
2015
1800
|
width: typeof window !== 'undefined' ? window.innerWidth : null,
|
|
2016
1801
|
height: typeof window !== 'undefined' ? window.innerHæeight : null
|
|
2017
1802
|
};
|
|
2018
1803
|
};
|
|
2019
|
-
|
|
2020
1804
|
var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
2021
1805
|
var _useState = react.useState(getWindowSize()),
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
1806
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1807
|
+
windowSize = _useState2[0],
|
|
1808
|
+
setWindowSize = _useState2[1];
|
|
2026
1809
|
react.useEffect(function () {
|
|
2027
1810
|
var onResize = function onResize() {
|
|
2028
1811
|
return setWindowSize(getWindowSize());
|
|
2029
1812
|
};
|
|
2030
|
-
|
|
2031
1813
|
if (typeof window !== 'undefined') {
|
|
2032
1814
|
window.addEventListener('resize', onResize);
|
|
2033
1815
|
}
|
|
2034
|
-
|
|
2035
1816
|
return function () {
|
|
2036
1817
|
if (typeof window !== 'undefined') {
|
|
2037
1818
|
window.removeEventListener('resize', onResize);
|
|
@@ -2043,21 +1824,17 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
|
2043
1824
|
|
|
2044
1825
|
var getValueFromSpring = function getValueFromSpring(s) {
|
|
2045
1826
|
var _ref = s || {},
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
1827
|
+
_ref$value = _ref.value,
|
|
1828
|
+
v = _ref$value === void 0 ? null : _ref$value;
|
|
2049
1829
|
var _ref2 = v || {},
|
|
2050
|
-
|
|
2051
|
-
|
|
1830
|
+
p = _ref2.progress;
|
|
2052
1831
|
return p;
|
|
2053
1832
|
};
|
|
2054
|
-
|
|
2055
1833
|
function useSpringValue(wantedProgress, immediate, params) {
|
|
2056
1834
|
var _useState = react.useState(wantedProgress),
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
1835
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
1836
|
+
progress = _useState2[0],
|
|
1837
|
+
setProgress = _useState2[1];
|
|
2061
1838
|
var onChange = react.useCallback(function (spring) {
|
|
2062
1839
|
return setProgress(getValueFromSpring(spring));
|
|
2063
1840
|
}, [setProgress]);
|
|
@@ -2071,29 +1848,28 @@ function useSpringValue(wantedProgress, immediate, params) {
|
|
|
2071
1848
|
|
|
2072
1849
|
var useSwipe = function useSwipe() {
|
|
2073
1850
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
1851
|
+
_ref$width = _ref.width,
|
|
1852
|
+
width = _ref$width === void 0 ? null : _ref$width,
|
|
1853
|
+
_ref$items = _ref.items,
|
|
1854
|
+
items = _ref$items === void 0 ? [] : _ref$items,
|
|
1855
|
+
_ref$withSpring = _ref.withSpring,
|
|
1856
|
+
withSpring = _ref$withSpring === void 0 ? true : _ref$withSpring,
|
|
1857
|
+
_ref$swipeWidthThresh = _ref.swipeWidthThreshold,
|
|
1858
|
+
swipeWidthThreshold = _ref$swipeWidthThresh === void 0 ? 3 : _ref$swipeWidthThresh,
|
|
1859
|
+
_ref$animateScale = _ref.animateScale,
|
|
1860
|
+
animateScale = _ref$animateScale === void 0 ? false : _ref$animateScale,
|
|
1861
|
+
_ref$disabled = _ref.disabled,
|
|
1862
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1863
|
+
_ref$lockAxis = _ref.lockAxis,
|
|
1864
|
+
lockAxis = _ref$lockAxis === void 0 ? false : _ref$lockAxis,
|
|
1865
|
+
_ref$onSwipeStart = _ref.onSwipeStart,
|
|
1866
|
+
onSwipeStart = _ref$onSwipeStart === void 0 ? null : _ref$onSwipeStart,
|
|
1867
|
+
_ref$onSwipeEnd = _ref.onSwipeEnd,
|
|
1868
|
+
onSwipeEnd = _ref$onSwipeEnd === void 0 ? null : _ref$onSwipeEnd,
|
|
1869
|
+
_ref$onSwipeCancel = _ref.onSwipeCancel,
|
|
1870
|
+
onSwipeCancel = _ref$onSwipeCancel === void 0 ? null : _ref$onSwipeCancel,
|
|
1871
|
+
_ref$onTap = _ref.onTap,
|
|
1872
|
+
onTap = _ref$onTap === void 0 ? null : _ref$onTap;
|
|
2097
1873
|
var swipingIndex = react.useRef(null);
|
|
2098
1874
|
var index = react.useRef(0);
|
|
2099
1875
|
var lockedAxis = react.useRef(null);
|
|
@@ -2113,55 +1889,52 @@ var useSwipe = function useSwipe() {
|
|
|
2113
1889
|
});
|
|
2114
1890
|
var getItems = react.useCallback(function () {
|
|
2115
1891
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
1892
|
+
_ref2$down = _ref2.down,
|
|
1893
|
+
down = _ref2$down === void 0 ? false : _ref2$down,
|
|
1894
|
+
_ref2$mx = _ref2.mx,
|
|
1895
|
+
mx = _ref2$mx === void 0 ? 0 : _ref2$mx;
|
|
2121
1896
|
return items.map(function (item, i) {
|
|
2122
1897
|
var x = disabled ? 0 : (i - index.current) * currentWidth + (down ? mx : 0);
|
|
2123
1898
|
var scale = !animateScale || disabled || !down ? 1 : 1 - Math.abs(mx) / currentWidth / 2;
|
|
2124
1899
|
return getItem(x, i, scale);
|
|
2125
1900
|
});
|
|
2126
|
-
}, [disabled, items, index, currentWidth, animateScale]);
|
|
1901
|
+
}, [disabled, items, index, currentWidth, animateScale]);
|
|
2127
1902
|
|
|
1903
|
+
// Initial items state
|
|
2128
1904
|
var _useSprings = core$1.useSprings(items.length, function (i) {
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
1905
|
+
return {
|
|
1906
|
+
x: disabled ? 0 : i * currentWidth,
|
|
1907
|
+
y: 0,
|
|
1908
|
+
zIndex: i,
|
|
1909
|
+
config: _objectSpread__default["default"]({}, !withSpring ? {
|
|
1910
|
+
duration: 1
|
|
1911
|
+
} : null)
|
|
1912
|
+
};
|
|
1913
|
+
}),
|
|
1914
|
+
_useSprings2 = _slicedToArray__default["default"](_useSprings, 2),
|
|
1915
|
+
itemsWithProps = _useSprings2[0],
|
|
1916
|
+
set = _useSprings2[1];
|
|
2142
1917
|
var bind = react$1.useDrag(function (_ref3) {
|
|
2143
1918
|
var down = _ref3.down,
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
1919
|
+
_ref3$movement = _slicedToArray__default["default"](_ref3.movement, 2),
|
|
1920
|
+
mx = _ref3$movement[0],
|
|
1921
|
+
my = _ref3$movement[1],
|
|
1922
|
+
_ref3$direction = _slicedToArray__default["default"](_ref3.direction, 1),
|
|
1923
|
+
xDir = _ref3$direction[0],
|
|
1924
|
+
cancel = _ref3.cancel,
|
|
1925
|
+
tap = _ref3.tap;
|
|
2152
1926
|
if (disabled) {
|
|
2153
1927
|
cancel();
|
|
2154
1928
|
return;
|
|
2155
1929
|
}
|
|
2156
|
-
|
|
2157
1930
|
if (!down && swipingIndex.current === index.current) {
|
|
2158
1931
|
lockedAxis.current = null;
|
|
2159
|
-
|
|
2160
1932
|
if (onSwipeCancel !== null) {
|
|
2161
1933
|
onSwipeCancel(index.current);
|
|
2162
1934
|
}
|
|
2163
|
-
}
|
|
1935
|
+
}
|
|
2164
1936
|
|
|
1937
|
+
// Block first and last moves
|
|
2165
1938
|
/*
|
|
2166
1939
|
if (down && index.current === items.length - 1 && xDir < 0) {
|
|
2167
1940
|
cancel();
|
|
@@ -2173,55 +1946,48 @@ var useSwipe = function useSwipe() {
|
|
|
2173
1946
|
}
|
|
2174
1947
|
*/
|
|
2175
1948
|
|
|
2176
|
-
|
|
2177
1949
|
var movementX = !lockAxis || lockedAxis.current === 'x' ? mx : 0;
|
|
2178
1950
|
var movementY = !lockAxis || lockedAxis.current === 'y' ? my : 0;
|
|
2179
|
-
|
|
2180
1951
|
if (down) {
|
|
2181
1952
|
// Snap to next slide
|
|
2182
1953
|
if (Math.abs(movementX) > currentWidth / swipeWidthThreshold) {
|
|
2183
1954
|
index.current = clamp__default["default"](index.current + (xDir > 0 ? -1 : 1), 0, count - 1);
|
|
2184
1955
|
lockedAxis.current = null;
|
|
2185
1956
|
cancel();
|
|
2186
|
-
|
|
2187
1957
|
if (onSwipeEnd !== null) {
|
|
2188
1958
|
onSwipeEnd(index.current);
|
|
2189
1959
|
}
|
|
2190
|
-
|
|
2191
1960
|
return;
|
|
2192
1961
|
}
|
|
2193
1962
|
}
|
|
2194
|
-
|
|
2195
1963
|
set(getItems({
|
|
2196
1964
|
down: down,
|
|
2197
1965
|
mx: movementX,
|
|
2198
1966
|
my: movementY
|
|
2199
|
-
}));
|
|
1967
|
+
}));
|
|
2200
1968
|
|
|
1969
|
+
// saving current swiping index in a ref in order to have a section called only once when swipe just started or a tap was detected
|
|
2201
1970
|
if (swipingIndex.current !== index.current) {
|
|
2202
1971
|
if (down && !tap) {
|
|
2203
1972
|
if (onSwipeStart !== null) {
|
|
2204
1973
|
onSwipeStart(index.current);
|
|
2205
1974
|
}
|
|
2206
1975
|
}
|
|
2207
|
-
|
|
2208
1976
|
if (!down && tap) {
|
|
2209
1977
|
if (onTap !== null) {
|
|
2210
1978
|
onTap();
|
|
2211
1979
|
}
|
|
2212
1980
|
}
|
|
2213
|
-
}
|
|
2214
|
-
|
|
1981
|
+
}
|
|
2215
1982
|
|
|
1983
|
+
// lock swiping on axis from initial 3 pixels distance (Y axis requires to swipe down)
|
|
2216
1984
|
if (lockAxis && down && lockedAxis.current === null) {
|
|
2217
1985
|
var distanceX = Math.abs(mx);
|
|
2218
1986
|
var distanceY = Math.abs(my);
|
|
2219
|
-
|
|
2220
1987
|
if (distanceX !== distanceY && (distanceY > 2 || distanceX > 2)) {
|
|
2221
1988
|
lockedAxis.current = distanceY > distanceX ? 'y' : 'x';
|
|
2222
1989
|
}
|
|
2223
1990
|
}
|
|
2224
|
-
|
|
2225
1991
|
swipingIndex.current = down && !tap ? index.current : null;
|
|
2226
1992
|
}, {
|
|
2227
1993
|
filterTaps: true
|
|
@@ -2232,8 +1998,9 @@ var useSwipe = function useSwipe() {
|
|
|
2232
1998
|
var setIndex = react.useCallback(function (idx) {
|
|
2233
1999
|
index.current = idx;
|
|
2234
2000
|
reset();
|
|
2235
|
-
}, [reset]);
|
|
2001
|
+
}, [reset]);
|
|
2236
2002
|
|
|
2003
|
+
// Reset on resize or others
|
|
2237
2004
|
react.useEffect(function () {
|
|
2238
2005
|
set(getItems());
|
|
2239
2006
|
}, [items, width, set, disabled]);
|
|
@@ -2260,20 +2027,17 @@ var useThemeParser = function useThemeParser() {
|
|
|
2260
2027
|
|
|
2261
2028
|
var getScreenOptions = function getScreenOptions(screenContext, opts) {
|
|
2262
2029
|
var _ref = screenContext || {},
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2030
|
+
_ref$data = _ref.data,
|
|
2031
|
+
ctxData = _ref$data === void 0 ? null : _ref$data;
|
|
2266
2032
|
var _ref2 = ctxData || {},
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2033
|
+
_ref2$id = _ref2.id,
|
|
2034
|
+
ctxScreenId = _ref2$id === void 0 ? null : _ref2$id,
|
|
2035
|
+
ctxScreenType = _ref2.type;
|
|
2271
2036
|
var _ref3 = opts || {},
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2037
|
+
_ref3$screenId = _ref3.screenId,
|
|
2038
|
+
optsScreenId = _ref3$screenId === void 0 ? null : _ref3$screenId,
|
|
2039
|
+
_ref3$screenType = _ref3.screenType,
|
|
2040
|
+
optsScreenType = _ref3$screenType === void 0 ? null : _ref3$screenType;
|
|
2277
2041
|
var screenId = ctxScreenId !== null ? ctxScreenId : optsScreenId;
|
|
2278
2042
|
var screenType = ctxScreenType !== null ? ctxScreenType : optsScreenType;
|
|
2279
2043
|
return {
|
|
@@ -2281,22 +2045,17 @@ var getScreenOptions = function getScreenOptions(screenContext, opts) {
|
|
|
2281
2045
|
screenType: screenType
|
|
2282
2046
|
};
|
|
2283
2047
|
};
|
|
2284
|
-
|
|
2285
2048
|
var hasTracking = function hasTracking(tracking) {
|
|
2286
2049
|
return typeof tracking !== 'undefined';
|
|
2287
2050
|
};
|
|
2288
|
-
|
|
2289
2051
|
var useTrackScreenView = function useTrackScreenView() {
|
|
2290
2052
|
var tracking = contexts.useTracking();
|
|
2291
|
-
|
|
2292
2053
|
if (!hasTracking(tracking)) {
|
|
2293
2054
|
return function () {};
|
|
2294
2055
|
}
|
|
2295
|
-
|
|
2296
2056
|
return react.useCallback(function () {
|
|
2297
2057
|
var screen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2298
2058
|
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2299
|
-
|
|
2300
2059
|
if (screen !== null && index !== null) {
|
|
2301
2060
|
tracking.trackScreenView(screen, index);
|
|
2302
2061
|
}
|
|
@@ -2305,22 +2064,17 @@ var useTrackScreenView = function useTrackScreenView() {
|
|
|
2305
2064
|
var useTrackScreenEvent = function useTrackScreenEvent() {
|
|
2306
2065
|
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2307
2066
|
var tracking = contexts.useTracking();
|
|
2308
|
-
|
|
2309
2067
|
if (!hasTracking(tracking)) {
|
|
2310
2068
|
return function () {};
|
|
2311
2069
|
}
|
|
2312
|
-
|
|
2313
2070
|
var screenContext = contexts.useScreen();
|
|
2314
|
-
|
|
2315
2071
|
if (screenContext.renderContext !== 'view') {
|
|
2316
2072
|
return function () {};
|
|
2317
2073
|
}
|
|
2318
|
-
|
|
2319
2074
|
return react.useCallback(function () {
|
|
2320
2075
|
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2321
2076
|
var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2322
2077
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2323
|
-
|
|
2324
2078
|
if (type !== null && action !== null) {
|
|
2325
2079
|
tracking.trackEvent("screen_".concat(type), action, label, _objectSpread__default["default"](_objectSpread__default["default"]({}, opts), getScreenOptions(screenContext, opts)));
|
|
2326
2080
|
}
|
|
@@ -2329,22 +2083,17 @@ var useTrackScreenEvent = function useTrackScreenEvent() {
|
|
|
2329
2083
|
var useTrackScreenMedia = function useTrackScreenMedia() {
|
|
2330
2084
|
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2331
2085
|
var tracking = contexts.useTracking();
|
|
2332
|
-
|
|
2333
2086
|
if (!hasTracking(tracking)) {
|
|
2334
2087
|
return function () {};
|
|
2335
2088
|
}
|
|
2336
|
-
|
|
2337
2089
|
var screenContext = contexts.useScreen();
|
|
2338
|
-
|
|
2339
2090
|
if (screenContext.renderContext !== 'view') {
|
|
2340
2091
|
return function () {};
|
|
2341
2092
|
}
|
|
2342
|
-
|
|
2343
2093
|
return react.useCallback(function () {
|
|
2344
2094
|
var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2345
2095
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2346
2096
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2347
|
-
|
|
2348
2097
|
if (type !== null && media !== null && action !== null) {
|
|
2349
2098
|
tracking.trackMedia("screen_".concat(type), media, action, _objectSpread__default["default"](_objectSpread__default["default"]({}, opts), getScreenOptions(screenContext, opts)));
|
|
2350
2099
|
}
|
|
@@ -2352,17 +2101,14 @@ var useTrackScreenMedia = function useTrackScreenMedia() {
|
|
|
2352
2101
|
};
|
|
2353
2102
|
var useTrackEvent = function useTrackEvent() {
|
|
2354
2103
|
var tracking = contexts.useTracking();
|
|
2355
|
-
|
|
2356
2104
|
if (!hasTracking(tracking)) {
|
|
2357
2105
|
return function () {};
|
|
2358
2106
|
}
|
|
2359
|
-
|
|
2360
2107
|
return react.useCallback(function () {
|
|
2361
2108
|
var category = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2362
2109
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2363
2110
|
var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
2364
2111
|
var opts = arguments.length > 3 ? arguments[3] : undefined;
|
|
2365
|
-
|
|
2366
2112
|
if (category !== null && action !== null) {
|
|
2367
2113
|
tracking.trackEvent(category, action, label, opts);
|
|
2368
2114
|
}
|
|
@@ -2371,16 +2117,13 @@ var useTrackEvent = function useTrackEvent() {
|
|
|
2371
2117
|
var useTrackMedia = function useTrackMedia() {
|
|
2372
2118
|
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2373
2119
|
var tracking = contexts.useTracking();
|
|
2374
|
-
|
|
2375
2120
|
if (!hasTracking(tracking)) {
|
|
2376
2121
|
return function () {};
|
|
2377
2122
|
}
|
|
2378
|
-
|
|
2379
2123
|
return react.useCallback(function () {
|
|
2380
2124
|
var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
2381
2125
|
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
2382
2126
|
var opts = arguments.length > 2 ? arguments[2] : undefined;
|
|
2383
|
-
|
|
2384
2127
|
if (type !== null && media !== null && action !== null) {
|
|
2385
2128
|
tracking.trackMedia(type, media, action, opts);
|
|
2386
2129
|
}
|