@panneau/core 3.0.223 → 3.0.228
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/es/contexts.js +25 -17
- package/es/hooks.js +1 -1
- package/package.json +7 -8
- package/lib/contexts.js +0 -1624
- package/lib/hooks.js +0 -1339
- package/lib/index.js +0 -1019
- package/lib/utils.js +0 -806
package/lib/hooks.js
DELETED
|
@@ -1,1339 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var get = require('lodash/get');
|
|
4
|
-
var isArray = require('lodash/isArray');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
7
|
-
var isString = require('lodash/isString');
|
|
8
|
-
var core = require('@panneau/core');
|
|
9
|
-
var utils = require('@panneau/core/utils');
|
|
10
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
-
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
12
|
-
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
13
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
14
|
-
var fetch = require('@folklore/fetch');
|
|
15
|
-
var isObject = require('lodash/isObject');
|
|
16
|
-
var contexts = require('@panneau/core/contexts');
|
|
17
|
-
var reactIntl = require('react-intl');
|
|
18
|
-
var dayjs = require('dayjs');
|
|
19
|
-
var cssMediaquery = require('css-mediaquery');
|
|
20
|
-
|
|
21
|
-
var useActionProps = function useActionProps(action, value) {
|
|
22
|
-
var labelPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
23
|
-
var values = react.useMemo(function () {
|
|
24
|
-
if (value === null) {
|
|
25
|
-
return null;
|
|
26
|
-
}
|
|
27
|
-
if (isArray(value)) {
|
|
28
|
-
return value;
|
|
29
|
-
}
|
|
30
|
-
return value || null;
|
|
31
|
-
}, [value]);
|
|
32
|
-
var ids = react.useMemo(function () {
|
|
33
|
-
if (value === null) {
|
|
34
|
-
return null;
|
|
35
|
-
}
|
|
36
|
-
if (isArray(value)) {
|
|
37
|
-
return value.map(function () {
|
|
38
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
39
|
-
_ref$id = _ref.id,
|
|
40
|
-
id = _ref$id === void 0 ? null : _ref$id;
|
|
41
|
-
return id;
|
|
42
|
-
}).filter(function (id) {
|
|
43
|
-
return id !== null;
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
return value !== null && typeof value.id !== 'undefined' ? [value.id] : null;
|
|
47
|
-
}, [value]);
|
|
48
|
-
var idKeys = react.useMemo(function () {
|
|
49
|
-
return (ids || []).map(function (id) {
|
|
50
|
-
return "".concat(id);
|
|
51
|
-
}).join('-');
|
|
52
|
-
}, [ids]);
|
|
53
|
-
var idLabels = react.useMemo(function () {
|
|
54
|
-
return (values || []).map(function (it) {
|
|
55
|
-
return "#".concat(get(it, 'id', '')).concat(labelPath !== null ? " ".concat(get(it, labelPath, '')) : '');
|
|
56
|
-
}).join(', ');
|
|
57
|
-
}, [ids]);
|
|
58
|
-
var modalKey = react.useMemo(function () {
|
|
59
|
-
return "".concat(action, "-").concat(idKeys);
|
|
60
|
-
}, [idKeys]);
|
|
61
|
-
return {
|
|
62
|
-
ids: ids,
|
|
63
|
-
idKeys: idKeys,
|
|
64
|
-
idLabels: idLabels,
|
|
65
|
-
modalKey: modalKey
|
|
66
|
-
};
|
|
67
|
-
};
|
|
68
|
-
var useActionProps$1 = useActionProps;
|
|
69
|
-
|
|
70
|
-
// For backwards compatibility with the old actions element
|
|
71
|
-
|
|
72
|
-
var useActions = function useActions() {
|
|
73
|
-
var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
74
|
-
var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
75
|
-
var urlGenerator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
76
|
-
var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
|
|
77
|
-
_ref$iconsOnly = _ref.iconsOnly,
|
|
78
|
-
iconsOnly = _ref$iconsOnly === void 0 ? true : _ref$iconsOnly,
|
|
79
|
-
_ref$showLabel = _ref.showLabel,
|
|
80
|
-
showLabel = _ref$showLabel === void 0 ? null : _ref$showLabel,
|
|
81
|
-
_ref$editLabel = _ref.editLabel,
|
|
82
|
-
editLabel = _ref$editLabel === void 0 ? null : _ref$editLabel,
|
|
83
|
-
_ref$deleteLabel = _ref.deleteLabel,
|
|
84
|
-
deleteLabel = _ref$deleteLabel === void 0 ? null : _ref$deleteLabel,
|
|
85
|
-
_ref$onClickShow = _ref.onClickShow,
|
|
86
|
-
onClickShow = _ref$onClickShow === void 0 ? null : _ref$onClickShow,
|
|
87
|
-
_ref$onClickEdit = _ref.onClickEdit,
|
|
88
|
-
onClickEdit = _ref$onClickEdit === void 0 ? null : _ref$onClickEdit,
|
|
89
|
-
_ref$onClickDelete = _ref.onClickDelete,
|
|
90
|
-
onClickDelete = _ref$onClickDelete === void 0 ? null : _ref$onClickDelete,
|
|
91
|
-
_ref$getShowPropsFrom = _ref.getShowPropsFromItem,
|
|
92
|
-
getShowPropsFromItem = _ref$getShowPropsFrom === void 0 ? null : _ref$getShowPropsFrom,
|
|
93
|
-
_ref$getEditPropsFrom = _ref.getEditPropsFromItem,
|
|
94
|
-
getEditPropsFromItem = _ref$getEditPropsFrom === void 0 ? null : _ref$getEditPropsFrom,
|
|
95
|
-
_ref$getDeletePropsFr = _ref.getDeletePropsFromItem,
|
|
96
|
-
getDeletePropsFromItem = _ref$getDeletePropsFr === void 0 ? null : _ref$getDeletePropsFr,
|
|
97
|
-
_ref$showUrl = _ref.showUrl,
|
|
98
|
-
showUrl = _ref$showUrl === void 0 ? null : _ref$showUrl,
|
|
99
|
-
_ref$withoutItemShowU = _ref.withoutItemShowUrl,
|
|
100
|
-
withoutItemShowUrl = _ref$withoutItemShowU === void 0 ? null : _ref$withoutItemShowU,
|
|
101
|
-
_ref$preferEditModal = _ref.preferEditModal,
|
|
102
|
-
preferEditModal = _ref$preferEditModal === void 0 ? false : _ref$preferEditModal,
|
|
103
|
-
_ref$preferDeleteModa = _ref.preferDeleteModal,
|
|
104
|
-
preferDeleteModal = _ref$preferDeleteModa === void 0 ? false : _ref$preferDeleteModa;
|
|
105
|
-
var _ref2 = item || {},
|
|
106
|
-
id = _ref2.id,
|
|
107
|
-
_ref2$url = _ref2.url,
|
|
108
|
-
url = _ref2$url === void 0 ? null : _ref2$url;
|
|
109
|
-
var hasCustomShowUrl = showUrl !== null || url !== null;
|
|
110
|
-
return (actions || []).map(function (action) {
|
|
111
|
-
if (isString(action)) {
|
|
112
|
-
switch (action) {
|
|
113
|
-
case 'show':
|
|
114
|
-
return _objectSpread({
|
|
115
|
-
id: 'show',
|
|
116
|
-
component: 'show',
|
|
117
|
-
label: iconsOnly ? null : showLabel,
|
|
118
|
-
icon: iconsOnly ? 'eye-fill' : null,
|
|
119
|
-
href: urlGenerator !== null && (!hasCustomShowUrl || withoutItemShowUrl) ? urlGenerator('show', {
|
|
120
|
-
id: id
|
|
121
|
-
}) || null : showUrl || url,
|
|
122
|
-
external: hasCustomShowUrl,
|
|
123
|
-
theme: 'info',
|
|
124
|
-
target: '_blank',
|
|
125
|
-
onClick: onClickShow
|
|
126
|
-
}, getShowPropsFromItem !== null ? getShowPropsFromItem(item) : null);
|
|
127
|
-
case 'edit':
|
|
128
|
-
return _objectSpread({
|
|
129
|
-
id: 'edit',
|
|
130
|
-
component: 'edit',
|
|
131
|
-
label: iconsOnly ? null : editLabel,
|
|
132
|
-
icon: iconsOnly ? 'pencil-square' : null,
|
|
133
|
-
href: urlGenerator !== null && !preferEditModal ? urlGenerator('edit', {
|
|
134
|
-
id: id
|
|
135
|
-
}) || null : null,
|
|
136
|
-
theme: 'primary',
|
|
137
|
-
onClick: onClickEdit
|
|
138
|
-
}, getEditPropsFromItem !== null ? getEditPropsFromItem(item) : null);
|
|
139
|
-
// case 'duplicate':
|
|
140
|
-
// return {
|
|
141
|
-
// id: 'duplicate',
|
|
142
|
-
// component: 'duplicate',
|
|
143
|
-
// label: iconsOnly ? null : duplicateLabel,
|
|
144
|
-
// icon: iconsOnly ? 'copy' : null,
|
|
145
|
-
// href:
|
|
146
|
-
// urlGenerator !== null && !preferDuplicateModal
|
|
147
|
-
// ? urlGenerator('duplicate', {
|
|
148
|
-
// id,
|
|
149
|
-
// }) || null
|
|
150
|
-
// : null,
|
|
151
|
-
// theme: 'warning',
|
|
152
|
-
// onClick: onClickDuplicate,
|
|
153
|
-
// endpoint:
|
|
154
|
-
// urlGenerator !== null && preferDuplicateModal
|
|
155
|
-
// ? urlGenerator('duplicate', {
|
|
156
|
-
// id,
|
|
157
|
-
// }) || null
|
|
158
|
-
// : null,
|
|
159
|
-
// ...(getDuplicatePropsFromItem !== null
|
|
160
|
-
// ? getDuplicatePropsFromItem(item)
|
|
161
|
-
// : null),
|
|
162
|
-
// };
|
|
163
|
-
case 'duplicate':
|
|
164
|
-
return {
|
|
165
|
-
id: 'duplicate',
|
|
166
|
-
component: 'duplicate'
|
|
167
|
-
};
|
|
168
|
-
case 'restore':
|
|
169
|
-
return {
|
|
170
|
-
id: 'restore',
|
|
171
|
-
component: 'restore'
|
|
172
|
-
};
|
|
173
|
-
case 'delete':
|
|
174
|
-
return _objectSpread({
|
|
175
|
-
id: 'delete',
|
|
176
|
-
component: 'delete',
|
|
177
|
-
label: iconsOnly ? null : deleteLabel,
|
|
178
|
-
icon: iconsOnly ? 'trash3' : null,
|
|
179
|
-
href: urlGenerator !== null && !preferDeleteModal ? urlGenerator('delete', {
|
|
180
|
-
id: id
|
|
181
|
-
}) || null : null,
|
|
182
|
-
theme: 'danger',
|
|
183
|
-
onClick: onClickDelete,
|
|
184
|
-
endpoint: urlGenerator !== null && preferDeleteModal ? urlGenerator('delete', {
|
|
185
|
-
id: id
|
|
186
|
-
}) || null : null,
|
|
187
|
-
withConfirmation: preferDeleteModal
|
|
188
|
-
}, getDeletePropsFromItem !== null ? getDeletePropsFromItem(item) : null);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
return action;
|
|
192
|
-
}).filter(function (action) {
|
|
193
|
-
return action !== null;
|
|
194
|
-
});
|
|
195
|
-
};
|
|
196
|
-
var useActions$1 = useActions;
|
|
197
|
-
|
|
198
|
-
var useAnimationFrame = function useAnimationFrame(onFrame) {
|
|
199
|
-
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
200
|
-
_ref$disabled = _ref.disabled,
|
|
201
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
202
|
-
var requestRef = react.useRef(null);
|
|
203
|
-
var startTimeRef = react.useRef(null);
|
|
204
|
-
var callback = function callback(time) {
|
|
205
|
-
if (!startTimeRef.current) {
|
|
206
|
-
startTimeRef.current = time;
|
|
207
|
-
}
|
|
208
|
-
var progress = time - startTimeRef.current;
|
|
209
|
-
onFrame(progress);
|
|
210
|
-
requestRef.current = requestAnimationFrame(callback);
|
|
211
|
-
};
|
|
212
|
-
react.useEffect(function () {
|
|
213
|
-
if (!disabled) {
|
|
214
|
-
requestRef.current = requestAnimationFrame(callback);
|
|
215
|
-
}
|
|
216
|
-
return function () {
|
|
217
|
-
if (requestRef.current !== null) {
|
|
218
|
-
cancelAnimationFrame(requestRef.current);
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
|
-
}, [disabled]);
|
|
222
|
-
};
|
|
223
|
-
var useAnimationFrame$1 = useAnimationFrame;
|
|
224
|
-
|
|
225
|
-
var useFormattedDate = function useFormattedDate() {
|
|
226
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
227
|
-
_ref$format = _ref.format,
|
|
228
|
-
format = _ref$format === void 0 ? null : _ref$format,
|
|
229
|
-
_ref$showToday = _ref.showToday,
|
|
230
|
-
showToday = _ref$showToday === void 0 ? true : _ref$showToday;
|
|
231
|
-
var intl = reactIntl.useIntl();
|
|
232
|
-
var today = dayjs();
|
|
233
|
-
return react.useCallback(function (date) {
|
|
234
|
-
var dateToFormat = isString(date) ? dayjs(date) : date;
|
|
235
|
-
if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
|
|
236
|
-
return intl.formatMessage({
|
|
237
|
-
"id": "v4Qtl9",
|
|
238
|
-
"defaultMessage": [{
|
|
239
|
-
"type": 0,
|
|
240
|
-
"value": "Today"
|
|
241
|
-
}]
|
|
242
|
-
});
|
|
243
|
-
}
|
|
244
|
-
return intl.formatDate(dayjs(date).toDate(), _objectSpread({
|
|
245
|
-
year: 'numeric',
|
|
246
|
-
month: 'long',
|
|
247
|
-
day: '2-digit'
|
|
248
|
-
}, format));
|
|
249
|
-
}, [today, showToday, format]);
|
|
250
|
-
};
|
|
251
|
-
var useFormattedTime = function useFormattedTime() {
|
|
252
|
-
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
253
|
-
_ref2$format = _ref2.format,
|
|
254
|
-
format = _ref2$format === void 0 ? null : _ref2$format,
|
|
255
|
-
_ref2$showNow = _ref2.showNow,
|
|
256
|
-
showNow = _ref2$showNow === void 0 ? true : _ref2$showNow,
|
|
257
|
-
_ref2$timeGap = _ref2.timeGap,
|
|
258
|
-
timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
|
|
259
|
-
var intl = reactIntl.useIntl();
|
|
260
|
-
var now = dayjs();
|
|
261
|
-
return react.useCallback(function (date) {
|
|
262
|
-
var dateToFormat = isString(date) ? dayjs(date) : date;
|
|
263
|
-
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) {
|
|
264
|
-
return intl.formatMessage({
|
|
265
|
-
"id": "3na7F8",
|
|
266
|
-
"defaultMessage": [{
|
|
267
|
-
"type": 0,
|
|
268
|
-
"value": "Now"
|
|
269
|
-
}]
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
return intl.formatTime(dateToFormat.toDate(), _objectSpread({
|
|
273
|
-
hour: 'numeric',
|
|
274
|
-
minute: 'numeric'
|
|
275
|
-
}, format));
|
|
276
|
-
}, [now, showNow, timeGap, format]);
|
|
277
|
-
};
|
|
278
|
-
|
|
279
|
-
var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
|
|
280
|
-
var useDocumentEvent = utils.createUseEvent(eventsManager$1);
|
|
281
|
-
var useDocumentEvent$1 = useDocumentEvent;
|
|
282
|
-
|
|
283
|
-
var _excluded$1 = ["value", "errors", "onChange"];
|
|
284
|
-
|
|
285
|
-
// prettier-ignore
|
|
286
|
-
var getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
|
|
287
|
-
var value = _ref.value,
|
|
288
|
-
errors = _ref.errors,
|
|
289
|
-
_onChange = _ref.onChange,
|
|
290
|
-
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
291
|
-
var locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
292
|
-
return fields.reduce(function (allFields, field) {
|
|
293
|
-
var _ref2 = isObject(field) ? field : {},
|
|
294
|
-
_ref2$name = _ref2.name,
|
|
295
|
-
name = _ref2$name === void 0 ? isString(field) ? field : null : _ref2$name,
|
|
296
|
-
_ref2$component = _ref2.component,
|
|
297
|
-
component = _ref2$component === void 0 ? null : _ref2$component;
|
|
298
|
-
var fieldErrors = errors !== null ? errors[name] || [] : [];
|
|
299
|
-
var localizedErrors = component === 'localized' ? (locales || []).reduce(function (previousErrors, locale) {
|
|
300
|
-
var items = errors !== null ? get(errors, "".concat(name, ".").concat(locale), []) || [] : [];
|
|
301
|
-
var finalItems = isArray(items) ? items : [items];
|
|
302
|
-
var finalPrevious = isArray(previousErrors) ? previousErrors : [];
|
|
303
|
-
return [].concat(_toConsumableArray(finalPrevious), _toConsumableArray(finalItems));
|
|
304
|
-
}, fieldErrors) : fieldErrors;
|
|
305
|
-
return [].concat(_toConsumableArray(allFields), [_objectSpread(_objectSpread({}, isObject(field) ? field : null), {}, {
|
|
306
|
-
name: name,
|
|
307
|
-
component: component,
|
|
308
|
-
value: value !== null ? value[name] || null : null,
|
|
309
|
-
errors: localizedErrors.length > 0 ? localizedErrors : null,
|
|
310
|
-
onChange: function onChange(fieldValue) {
|
|
311
|
-
return _onChange(name, fieldValue);
|
|
312
|
-
}
|
|
313
|
-
}, props)]);
|
|
314
|
-
}, []);
|
|
315
|
-
};
|
|
316
|
-
var useForm = function useForm() {
|
|
317
|
-
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
318
|
-
var _opts$fields = opts.fields,
|
|
319
|
-
fields = _opts$fields === void 0 ? [] : _opts$fields,
|
|
320
|
-
_opts$action = opts.action,
|
|
321
|
-
action = _opts$action === void 0 ? null : _opts$action,
|
|
322
|
-
_opts$postForm = opts.postForm,
|
|
323
|
-
postForm = _opts$postForm === void 0 ? null : _opts$postForm,
|
|
324
|
-
_opts$initialErrors = opts.initialErrors,
|
|
325
|
-
initialErrors = _opts$initialErrors === void 0 ? null : _opts$initialErrors,
|
|
326
|
-
_opts$errors = opts.errors,
|
|
327
|
-
providedErrors = _opts$errors === void 0 ? null : _opts$errors,
|
|
328
|
-
_opts$setErrors = opts.setErrors,
|
|
329
|
-
setProvidedErrors = _opts$setErrors === void 0 ? null : _opts$setErrors,
|
|
330
|
-
_opts$initialGeneralE = opts.initialGeneralError,
|
|
331
|
-
initialGeneralError = _opts$initialGeneralE === void 0 ? null : _opts$initialGeneralE,
|
|
332
|
-
_opts$generalError = opts.generalError,
|
|
333
|
-
providedGeneralError = _opts$generalError === void 0 ? null : _opts$generalError,
|
|
334
|
-
_opts$setGeneralError = opts.setGeneralError,
|
|
335
|
-
setProvidedGeneralError = _opts$setGeneralError === void 0 ? null : _opts$setGeneralError,
|
|
336
|
-
_opts$initialValue = opts.initialValue,
|
|
337
|
-
initialValue = _opts$initialValue === void 0 ? null : _opts$initialValue,
|
|
338
|
-
_opts$value = opts.value,
|
|
339
|
-
providedValue = _opts$value === void 0 ? null : _opts$value,
|
|
340
|
-
_opts$setValue = opts.setValue,
|
|
341
|
-
setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
|
|
342
|
-
_opts$withoutDefault = opts.withoutDefault,
|
|
343
|
-
withoutDefault = _opts$withoutDefault === void 0 ? true : _opts$withoutDefault,
|
|
344
|
-
_opts$withoutPropagat = opts.withoutPropagation,
|
|
345
|
-
withoutPropagation = _opts$withoutPropagat === void 0 ? true : _opts$withoutPropagat,
|
|
346
|
-
_opts$onComplete = opts.onComplete,
|
|
347
|
-
onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete,
|
|
348
|
-
_opts$onError = opts.onError,
|
|
349
|
-
onError = _opts$onError === void 0 ? null : _opts$onError,
|
|
350
|
-
_opts$locales = opts.locales,
|
|
351
|
-
locales = _opts$locales === void 0 ? [] : _opts$locales;
|
|
352
|
-
var _useState = react.useState(initialValue || providedValue),
|
|
353
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
354
|
-
stateValue = _useState2[0],
|
|
355
|
-
setStateValue = _useState2[1];
|
|
356
|
-
var _useState3 = react.useState(initialErrors || providedErrors),
|
|
357
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
358
|
-
stateErrors = _useState4[0],
|
|
359
|
-
setStateErrors = _useState4[1];
|
|
360
|
-
var _useState5 = react.useState(initialGeneralError || providedGeneralError),
|
|
361
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
362
|
-
stateGeneralError = _useState6[0],
|
|
363
|
-
setStateGeneralError = _useState6[1];
|
|
364
|
-
var _useState7 = react.useState({
|
|
365
|
-
success: false,
|
|
366
|
-
loading: false,
|
|
367
|
-
error: false
|
|
368
|
-
}),
|
|
369
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
370
|
-
requestState = _useState8[0],
|
|
371
|
-
setRequestState = _useState8[1];
|
|
372
|
-
var _useState9 = react.useState(null),
|
|
373
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
374
|
-
response = _useState10[0],
|
|
375
|
-
setResponse = _useState10[1];
|
|
376
|
-
var hasProvidedValue = setProvidedValue !== null;
|
|
377
|
-
var value = hasProvidedValue ? providedValue : stateValue;
|
|
378
|
-
var setValue = hasProvidedValue ? setProvidedValue : setStateValue;
|
|
379
|
-
var hasProvidedErrors = setProvidedErrors !== null;
|
|
380
|
-
var errors = hasProvidedErrors ? providedErrors : stateErrors;
|
|
381
|
-
var setErrors = hasProvidedErrors ? setProvidedErrors : setStateErrors;
|
|
382
|
-
var hasProvidedGeneralError = setProvidedGeneralError !== null;
|
|
383
|
-
var generalError = hasProvidedGeneralError ? providedGeneralError : stateGeneralError;
|
|
384
|
-
var setGeneralError = hasProvidedGeneralError ? setProvidedGeneralError : setStateGeneralError;
|
|
385
|
-
var fieldsKey = [value, errors, requestState, locales].concat(fields);
|
|
386
|
-
var onFieldChange = react.useCallback(function (fieldName, fieldValue) {
|
|
387
|
-
var _ref3 = requestState || {},
|
|
388
|
-
_ref3$loading = _ref3.loading,
|
|
389
|
-
loading = _ref3$loading === void 0 ? false : _ref3$loading,
|
|
390
|
-
_ref3$success = _ref3.success,
|
|
391
|
-
success = _ref3$success === void 0 ? false : _ref3$success,
|
|
392
|
-
_ref3$error = _ref3.error,
|
|
393
|
-
error = _ref3$error === void 0 ? false : _ref3$error;
|
|
394
|
-
var fieldErrors = errors !== null ? errors[fieldName] || null : null;
|
|
395
|
-
if (fieldErrors !== null) {
|
|
396
|
-
setErrors(_objectSpread(_objectSpread({}, errors), {}, _defineProperty({}, fieldName, null)));
|
|
397
|
-
}
|
|
398
|
-
if (!loading && (success !== false || error !== false)) {
|
|
399
|
-
setRequestState({
|
|
400
|
-
success: false,
|
|
401
|
-
loading: false,
|
|
402
|
-
error: false
|
|
403
|
-
});
|
|
404
|
-
}
|
|
405
|
-
setValue(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, fieldName, fieldValue)));
|
|
406
|
-
}, fieldsKey);
|
|
407
|
-
var fieldsProps = react.useMemo(function () {
|
|
408
|
-
return getFieldsPropsFromFields(fields, {
|
|
409
|
-
value: value,
|
|
410
|
-
errors: errors,
|
|
411
|
-
onChange: onFieldChange
|
|
412
|
-
}, locales);
|
|
413
|
-
}, fieldsKey);
|
|
414
|
-
var csrfToken = react.useMemo(function () {
|
|
415
|
-
return fetch.getCsrfToken();
|
|
416
|
-
}, []);
|
|
417
|
-
var onSubmitError = function onSubmitError(error) {
|
|
418
|
-
setRequestState({
|
|
419
|
-
success: false,
|
|
420
|
-
loading: false,
|
|
421
|
-
error: true
|
|
422
|
-
});
|
|
423
|
-
if (error.name === 'ValidationError') {
|
|
424
|
-
var _error$getResponseDat = error.getResponseData(),
|
|
425
|
-
_error$getResponseDat2 = _error$getResponseDat.errors,
|
|
426
|
-
validationErrors = _error$getResponseDat2 === void 0 ? null : _error$getResponseDat2;
|
|
427
|
-
setErrors(validationErrors);
|
|
428
|
-
} else {
|
|
429
|
-
setGeneralError(error.message);
|
|
430
|
-
}
|
|
431
|
-
if (onError !== null) {
|
|
432
|
-
onError(error);
|
|
433
|
-
}
|
|
434
|
-
};
|
|
435
|
-
var onSubmitSuccess = function onSubmitSuccess(resp) {
|
|
436
|
-
setRequestState({
|
|
437
|
-
success: true,
|
|
438
|
-
loading: false,
|
|
439
|
-
error: false
|
|
440
|
-
});
|
|
441
|
-
setResponse(resp);
|
|
442
|
-
if (onComplete !== null) {
|
|
443
|
-
onComplete(resp);
|
|
444
|
-
}
|
|
445
|
-
};
|
|
446
|
-
var finalPostForm = react.useCallback(function (postAction, postData) {
|
|
447
|
-
return postForm !== null ? postForm(postAction, postData) : fetch.postJSON(postAction, postData, {
|
|
448
|
-
credentials: 'include',
|
|
449
|
-
headers: fetch.getCSRFHeaders()
|
|
450
|
-
});
|
|
451
|
-
}, [postForm, fetch.postJSON, fetch.getCSRFHeaders]);
|
|
452
|
-
var submit = react.useCallback(function () {
|
|
453
|
-
var submitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value;
|
|
454
|
-
setRequestState({
|
|
455
|
-
success: false,
|
|
456
|
-
loading: true,
|
|
457
|
-
error: false
|
|
458
|
-
});
|
|
459
|
-
setGeneralError(null);
|
|
460
|
-
setErrors(null);
|
|
461
|
-
finalPostForm(action, _objectSpread(_objectSpread({}, submitValue), {}, {
|
|
462
|
-
_token: csrfToken
|
|
463
|
-
})).then(onSubmitSuccess)["catch"](onSubmitError);
|
|
464
|
-
}, [finalPostForm, action, value]);
|
|
465
|
-
var onSubmit = react.useCallback(function (e) {
|
|
466
|
-
// console.log('form submit', e); //
|
|
467
|
-
if (withoutDefault) {
|
|
468
|
-
e.preventDefault();
|
|
469
|
-
}
|
|
470
|
-
if (withoutPropagation) {
|
|
471
|
-
e.stopPropagation();
|
|
472
|
-
}
|
|
473
|
-
// This one is very important with multiple forms
|
|
474
|
-
// Nested forms (even in portals) will bubble the onSubmit event to the parent
|
|
475
|
-
submit();
|
|
476
|
-
}, [submit, action, withoutDefault, withoutPropagation]);
|
|
477
|
-
var status = null;
|
|
478
|
-
if (requestState.loading) {
|
|
479
|
-
status = 'loading';
|
|
480
|
-
} else if (requestState.success) {
|
|
481
|
-
status = 'success';
|
|
482
|
-
} else if (requestState.error) {
|
|
483
|
-
status = 'error';
|
|
484
|
-
}
|
|
485
|
-
return _objectSpread(_objectSpread({
|
|
486
|
-
value: value,
|
|
487
|
-
setValue: setValue,
|
|
488
|
-
csrfToken: csrfToken,
|
|
489
|
-
submit: submit,
|
|
490
|
-
onSubmit: onSubmit
|
|
491
|
-
}, requestState), {}, {
|
|
492
|
-
status: status,
|
|
493
|
-
response: response,
|
|
494
|
-
fields: fieldsProps,
|
|
495
|
-
errors: errors,
|
|
496
|
-
generalError: generalError
|
|
497
|
-
});
|
|
498
|
-
};
|
|
499
|
-
var useForm$1 = useForm;
|
|
500
|
-
|
|
501
|
-
var buildThresholdArray = function buildThresholdArray() {
|
|
502
|
-
return [0, 1.0];
|
|
503
|
-
};
|
|
504
|
-
var observersCache = new Map();
|
|
505
|
-
var getOptionsKey = function getOptionsKey(_ref) {
|
|
506
|
-
var _ref$root = _ref.root,
|
|
507
|
-
root = _ref$root === void 0 ? null : _ref$root,
|
|
508
|
-
rootMargin = _ref.rootMargin,
|
|
509
|
-
_ref$threshold = _ref.threshold,
|
|
510
|
-
threshold = _ref$threshold === void 0 ? null : _ref$threshold;
|
|
511
|
-
return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
|
|
512
|
-
};
|
|
513
|
-
var createObserver = function createObserver(Observer) {
|
|
514
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
515
|
-
var subscribers = [];
|
|
516
|
-
var addSubscriber = function addSubscriber(element, callback) {
|
|
517
|
-
var currentSubscriber = subscribers.find(function (it) {
|
|
518
|
-
return it.element === element;
|
|
519
|
-
}) || null;
|
|
520
|
-
if (currentSubscriber !== null) {
|
|
521
|
-
return subscribers.map(function (it) {
|
|
522
|
-
return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
|
|
523
|
-
callbacks: [].concat(_toConsumableArray(it.callbacks), [callback])
|
|
524
|
-
}) : it;
|
|
525
|
-
}).filter(function (it) {
|
|
526
|
-
return it.callbacks.length > 0;
|
|
527
|
-
});
|
|
528
|
-
}
|
|
529
|
-
return [].concat(_toConsumableArray(subscribers), [{
|
|
530
|
-
element: element,
|
|
531
|
-
callbacks: [callback]
|
|
532
|
-
}]);
|
|
533
|
-
};
|
|
534
|
-
var removeSubscriber = function removeSubscriber(element, callback) {
|
|
535
|
-
return subscribers.map(function (it) {
|
|
536
|
-
return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
|
|
537
|
-
callbacks: it.callbacks.filter(function (subCallback) {
|
|
538
|
-
return subCallback !== callback;
|
|
539
|
-
})
|
|
540
|
-
}) : it;
|
|
541
|
-
}).filter(function (it) {
|
|
542
|
-
return it.callbacks.length > 0;
|
|
543
|
-
});
|
|
544
|
-
};
|
|
545
|
-
var onUpdate = function onUpdate(entries) {
|
|
546
|
-
entries.forEach(function (entry) {
|
|
547
|
-
subscribers.forEach(function (_ref2) {
|
|
548
|
-
var element = _ref2.element,
|
|
549
|
-
callbacks = _ref2.callbacks;
|
|
550
|
-
if (element === entry.target) {
|
|
551
|
-
callbacks.forEach(function (callback) {
|
|
552
|
-
callback(entry);
|
|
553
|
-
});
|
|
554
|
-
}
|
|
555
|
-
});
|
|
556
|
-
});
|
|
557
|
-
};
|
|
558
|
-
var observer = new Observer(onUpdate, options);
|
|
559
|
-
var unsubscribe = function unsubscribe(element) {
|
|
560
|
-
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
561
|
-
subscribers = removeSubscriber(element, callback);
|
|
562
|
-
if (typeof observer.unobserve === 'undefined') {
|
|
563
|
-
observer.disconnect();
|
|
564
|
-
subscribers.forEach(function (subscriber) {
|
|
565
|
-
observer.observe(subscriber.element);
|
|
566
|
-
});
|
|
567
|
-
return;
|
|
568
|
-
}
|
|
569
|
-
var currentSubscriber = subscribers.find(function (it) {
|
|
570
|
-
return it.element === element;
|
|
571
|
-
}) || null;
|
|
572
|
-
if (currentSubscriber === null) {
|
|
573
|
-
observer.unobserve(element);
|
|
574
|
-
}
|
|
575
|
-
};
|
|
576
|
-
var subscribe = function subscribe(element, callback) {
|
|
577
|
-
var currentSubscriber = subscribers.find(function (it) {
|
|
578
|
-
return it.element === element;
|
|
579
|
-
}) || null;
|
|
580
|
-
subscribers = addSubscriber(element, callback);
|
|
581
|
-
if (currentSubscriber === null) {
|
|
582
|
-
observer.observe(element);
|
|
583
|
-
}
|
|
584
|
-
};
|
|
585
|
-
return {
|
|
586
|
-
subscribe: subscribe,
|
|
587
|
-
unsubscribe: unsubscribe,
|
|
588
|
-
observer: observer
|
|
589
|
-
};
|
|
590
|
-
};
|
|
591
|
-
var getObserver = function getObserver(Observer) {
|
|
592
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
593
|
-
var observerKey = getOptionsKey(options);
|
|
594
|
-
if (!observersCache.has(Observer)) {
|
|
595
|
-
observersCache.set(Observer, {});
|
|
596
|
-
}
|
|
597
|
-
var observers = observersCache.get(Observer);
|
|
598
|
-
if (typeof observers[observerKey] === 'undefined') {
|
|
599
|
-
observers[observerKey] = createObserver(Observer, options);
|
|
600
|
-
observersCache.set(Observer, observers);
|
|
601
|
-
}
|
|
602
|
-
return observers[observerKey];
|
|
603
|
-
};
|
|
604
|
-
var useObserver = function useObserver(Observer) {
|
|
605
|
-
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
606
|
-
var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
607
|
-
var _opts$root = opts.root,
|
|
608
|
-
root = _opts$root === void 0 ? null : _opts$root,
|
|
609
|
-
_opts$rootMargin = opts.rootMargin,
|
|
610
|
-
rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
|
|
611
|
-
_opts$threshold = opts.threshold,
|
|
612
|
-
threshold = _opts$threshold === void 0 ? null : _opts$threshold,
|
|
613
|
-
_opts$disabled = opts.disabled,
|
|
614
|
-
disabled = _opts$disabled === void 0 ? false : _opts$disabled;
|
|
615
|
-
var _useState = react.useState(initialEntry),
|
|
616
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
617
|
-
entry = _useState2[0],
|
|
618
|
-
setEntry = _useState2[1];
|
|
619
|
-
var nodeRef = react.useRef(null);
|
|
620
|
-
var currentElement = react.useRef(null);
|
|
621
|
-
var elementChanged = nodeRef.current !== currentElement.current;
|
|
622
|
-
react.useEffect(function () {
|
|
623
|
-
var nodeElement = nodeRef.current;
|
|
624
|
-
var callback = function callback(newEntry) {
|
|
625
|
-
return setEntry(newEntry);
|
|
626
|
-
};
|
|
627
|
-
var unsubscribe = null;
|
|
628
|
-
if (nodeElement !== null) {
|
|
629
|
-
var newOpts = {};
|
|
630
|
-
if (root !== null) {
|
|
631
|
-
newOpts.root = root;
|
|
632
|
-
}
|
|
633
|
-
if (rootMargin !== null) {
|
|
634
|
-
newOpts.rootMargin = rootMargin;
|
|
635
|
-
}
|
|
636
|
-
if (threshold !== null) {
|
|
637
|
-
newOpts.threshold = threshold;
|
|
638
|
-
}
|
|
639
|
-
var _getObserver = getObserver(Observer, newOpts),
|
|
640
|
-
subscribe = _getObserver.subscribe,
|
|
641
|
-
localUnsubscribe = _getObserver.unsubscribe;
|
|
642
|
-
unsubscribe = localUnsubscribe;
|
|
643
|
-
subscribe(nodeElement, callback);
|
|
644
|
-
}
|
|
645
|
-
currentElement.current = nodeElement;
|
|
646
|
-
return function () {
|
|
647
|
-
if (unsubscribe !== null) {
|
|
648
|
-
unsubscribe(nodeElement, callback);
|
|
649
|
-
}
|
|
650
|
-
};
|
|
651
|
-
}, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
|
|
652
|
-
return {
|
|
653
|
-
ref: nodeRef,
|
|
654
|
-
entry: entry
|
|
655
|
-
};
|
|
656
|
-
};
|
|
657
|
-
|
|
658
|
-
/**
|
|
659
|
-
* Intersection Observer
|
|
660
|
-
*/
|
|
661
|
-
var thresholdArray = buildThresholdArray();
|
|
662
|
-
var intersectionObserverInitialEntry = {
|
|
663
|
-
target: null,
|
|
664
|
-
time: null,
|
|
665
|
-
isVisible: false,
|
|
666
|
-
isIntersecting: false,
|
|
667
|
-
intersectionRatio: 0,
|
|
668
|
-
intersectionRect: null,
|
|
669
|
-
boundingClientRect: null,
|
|
670
|
-
rootBounds: null
|
|
671
|
-
};
|
|
672
|
-
var useIntersectionObserver = function useIntersectionObserver() {
|
|
673
|
-
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
674
|
-
_ref3$root = _ref3.root,
|
|
675
|
-
root = _ref3$root === void 0 ? null : _ref3$root,
|
|
676
|
-
_ref3$rootMargin = _ref3.rootMargin,
|
|
677
|
-
rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
|
|
678
|
-
_ref3$threshold = _ref3.threshold,
|
|
679
|
-
threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
|
|
680
|
-
_ref3$disabled = _ref3.disabled,
|
|
681
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
|
|
682
|
-
return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
|
|
683
|
-
root: root,
|
|
684
|
-
rootMargin: rootMargin,
|
|
685
|
-
threshold: threshold,
|
|
686
|
-
disabled: disabled
|
|
687
|
-
}, intersectionObserverInitialEntry);
|
|
688
|
-
};
|
|
689
|
-
|
|
690
|
-
/**
|
|
691
|
-
* Resize Observer
|
|
692
|
-
*/
|
|
693
|
-
var resizeObserverInitialEntry = {
|
|
694
|
-
target: null,
|
|
695
|
-
contentRect: null,
|
|
696
|
-
contentBoxSize: null,
|
|
697
|
-
borderBoxSize: null
|
|
698
|
-
};
|
|
699
|
-
var useResizeObserver = function useResizeObserver() {
|
|
700
|
-
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
701
|
-
_ref4$disabled = _ref4.disabled,
|
|
702
|
-
disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
|
|
703
|
-
return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
|
|
704
|
-
disabled: disabled
|
|
705
|
-
}, resizeObserverInitialEntry);
|
|
706
|
-
};
|
|
707
|
-
|
|
708
|
-
var useIsVisible = function useIsVisible() {
|
|
709
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
710
|
-
rootMargin = _ref.rootMargin,
|
|
711
|
-
_ref$threshold = _ref.threshold,
|
|
712
|
-
threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
|
|
713
|
-
_ref$persist = _ref.persist,
|
|
714
|
-
persist = _ref$persist === void 0 ? false : _ref$persist;
|
|
715
|
-
var _useIntersectionObser = useIntersectionObserver({
|
|
716
|
-
rootMargin: rootMargin,
|
|
717
|
-
threshold: threshold
|
|
718
|
-
}),
|
|
719
|
-
ref = _useIntersectionObser.ref,
|
|
720
|
-
isIntersecting = _useIntersectionObser.entry.isIntersecting;
|
|
721
|
-
var wasIntersecting = react.useRef(isIntersecting);
|
|
722
|
-
if (isIntersecting && !wasIntersecting.current) {
|
|
723
|
-
wasIntersecting.current = isIntersecting;
|
|
724
|
-
}
|
|
725
|
-
var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
|
|
726
|
-
return {
|
|
727
|
-
ref: ref,
|
|
728
|
-
visible: isVisible
|
|
729
|
-
};
|
|
730
|
-
};
|
|
731
|
-
var useIsVisible$1 = useIsVisible;
|
|
732
|
-
|
|
733
|
-
var KEYCODES = {
|
|
734
|
-
ARROW_LEFT: 37,
|
|
735
|
-
ARROW_UP: 38,
|
|
736
|
-
ARROW_RIGHT: 39,
|
|
737
|
-
ARROW_DOWN: 40,
|
|
738
|
-
ESCAPE: 27,
|
|
739
|
-
SPACE: 32
|
|
740
|
-
};
|
|
741
|
-
var useKeyboardKeys = function useKeyboardKeys() {
|
|
742
|
-
var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
743
|
-
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
744
|
-
_ref$eventName = _ref.eventName,
|
|
745
|
-
eventName = _ref$eventName === void 0 ? 'keydown' : _ref$eventName;
|
|
746
|
-
var keysNames = Object.keys(keys);
|
|
747
|
-
var keysListeners = keysNames.map(function (key) {
|
|
748
|
-
return keys[key];
|
|
749
|
-
});
|
|
750
|
-
react.useEffect(function () {
|
|
751
|
-
var onKeyDown = function onKeyDown(e) {
|
|
752
|
-
var keyCode = e.keyCode;
|
|
753
|
-
if (typeof keys[keyCode] !== 'undefined') {
|
|
754
|
-
keys[keyCode](e);
|
|
755
|
-
}
|
|
756
|
-
};
|
|
757
|
-
document.addEventListener(eventName, onKeyDown);
|
|
758
|
-
return function () {
|
|
759
|
-
document.removeEventListener(eventName, onKeyDown);
|
|
760
|
-
};
|
|
761
|
-
}, [].concat(keysNames, _toConsumableArray(keysListeners), [eventName]));
|
|
762
|
-
};
|
|
763
|
-
var useKeyboardKeys$1 = useKeyboardKeys;
|
|
764
|
-
|
|
765
|
-
var fontsMap = {
|
|
766
|
-
loading: [],
|
|
767
|
-
active: []
|
|
768
|
-
};
|
|
769
|
-
var isFontLoading = function isFontLoading(name) {
|
|
770
|
-
return fontsMap.loading.indexOf(name) !== -1;
|
|
771
|
-
};
|
|
772
|
-
var isFontActive = function isFontActive(name) {
|
|
773
|
-
return fontsMap.active.indexOf(name) !== -1;
|
|
774
|
-
};
|
|
775
|
-
var addFontLoading = function addFontLoading(name) {
|
|
776
|
-
fontsMap.active = fontsMap.active.filter(function (it) {
|
|
777
|
-
return it !== name;
|
|
778
|
-
});
|
|
779
|
-
fontsMap.loading = [].concat(_toConsumableArray(fontsMap.loading), [name]);
|
|
780
|
-
};
|
|
781
|
-
var removeFontLoading = function removeFontLoading(name) {
|
|
782
|
-
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
783
|
-
return it !== name;
|
|
784
|
-
});
|
|
785
|
-
};
|
|
786
|
-
var addFontActive = function addFontActive(name) {
|
|
787
|
-
fontsMap.loading = fontsMap.loading.filter(function (it) {
|
|
788
|
-
return it !== name;
|
|
789
|
-
});
|
|
790
|
-
fontsMap.active = [].concat(_toConsumableArray(fontsMap.active), [name]);
|
|
791
|
-
};
|
|
792
|
-
var useLoadedFonts = function useLoadedFonts(fonts) {
|
|
793
|
-
var _useState = react.useState(false),
|
|
794
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
795
|
-
loaded = _useState2[0],
|
|
796
|
-
setLoaded = _useState2[1];
|
|
797
|
-
react.useEffect(function () {
|
|
798
|
-
var config = fonts.reduce(function (newConfig, font) {
|
|
799
|
-
var _ref = isObject(font) ? font : {
|
|
800
|
-
type: 'system',
|
|
801
|
-
name: font
|
|
802
|
-
},
|
|
803
|
-
type = _ref.type,
|
|
804
|
-
name = _ref.name;
|
|
805
|
-
if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
|
|
806
|
-
return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
|
|
807
|
-
families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [name])
|
|
808
|
-
}));
|
|
809
|
-
}
|
|
810
|
-
return newConfig;
|
|
811
|
-
}, null);
|
|
812
|
-
var hasConfig = config !== null;
|
|
813
|
-
if (hasConfig && typeof window !== 'undefined') {
|
|
814
|
-
utils.loadPackage('webfontloader', function () {
|
|
815
|
-
return import('webfontloader');
|
|
816
|
-
}).then(function (_ref2) {
|
|
817
|
-
var WebFont = _ref2["default"];
|
|
818
|
-
return WebFont.load(_objectSpread(_objectSpread({}, config), {}, {
|
|
819
|
-
timeout: 3000,
|
|
820
|
-
active: function active() {
|
|
821
|
-
return setLoaded(true);
|
|
822
|
-
},
|
|
823
|
-
fontloading: function fontloading(name) {
|
|
824
|
-
return addFontLoading(name);
|
|
825
|
-
},
|
|
826
|
-
fontactive: function fontactive(name) {
|
|
827
|
-
return addFontActive(name);
|
|
828
|
-
},
|
|
829
|
-
fontinactive: function fontinactive(name) {
|
|
830
|
-
return removeFontLoading(name);
|
|
831
|
-
}
|
|
832
|
-
}));
|
|
833
|
-
});
|
|
834
|
-
} else {
|
|
835
|
-
setLoaded(true);
|
|
836
|
-
}
|
|
837
|
-
}, [fonts, setLoaded]);
|
|
838
|
-
return {
|
|
839
|
-
loaded: loaded
|
|
840
|
-
};
|
|
841
|
-
};
|
|
842
|
-
var useLoadedFonts$1 = useLoadedFonts;
|
|
843
|
-
|
|
844
|
-
var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
|
|
845
|
-
var useMediaApi = function useMediaApi() {
|
|
846
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
847
|
-
_ref$url = _ref.url,
|
|
848
|
-
url = _ref$url === void 0 ? null : _ref$url,
|
|
849
|
-
_ref$initialMuted = _ref.initialMuted,
|
|
850
|
-
initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
|
|
851
|
-
_ref$onTimeUpdate = _ref.onTimeUpdate,
|
|
852
|
-
onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
|
|
853
|
-
_ref$onProgressStep = _ref.onProgressStep,
|
|
854
|
-
onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
|
|
855
|
-
_ref$onDurationChange = _ref.onDurationChanged,
|
|
856
|
-
onDurationChanged = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
|
|
857
|
-
_ref$onVolumeChanged = _ref.onVolumeChanged,
|
|
858
|
-
onVolumeChanged = _ref$onVolumeChanged === void 0 ? null : _ref$onVolumeChanged,
|
|
859
|
-
_ref$onPlay = _ref.onPlay,
|
|
860
|
-
onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
|
|
861
|
-
_ref$onPause = _ref.onPause,
|
|
862
|
-
onPause = _ref$onPause === void 0 ? null : _ref$onPause,
|
|
863
|
-
_ref$onEnded = _ref.onEnded,
|
|
864
|
-
onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
|
|
865
|
-
_ref$onSeeked = _ref.onSeeked,
|
|
866
|
-
onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
|
|
867
|
-
_ref$onLoadStart = _ref.onLoadStart,
|
|
868
|
-
onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
|
|
869
|
-
_ref$onCanPlayThough = _ref.onCanPlayThough,
|
|
870
|
-
onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough;
|
|
871
|
-
var ref = react.useRef(null);
|
|
872
|
-
var _useState = react.useState(initialMuted),
|
|
873
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
874
|
-
muted = _useState2[0],
|
|
875
|
-
setMuted = _useState2[1];
|
|
876
|
-
var _useState3 = react.useState(null),
|
|
877
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
878
|
-
currentTime = _useState4[0],
|
|
879
|
-
setCurrentTime = _useState4[1];
|
|
880
|
-
var _useState5 = react.useState(null),
|
|
881
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
882
|
-
duration = _useState6[0],
|
|
883
|
-
setDuration = _useState6[1];
|
|
884
|
-
var _useState7 = react.useState(false),
|
|
885
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
886
|
-
playing = _useState8[0],
|
|
887
|
-
setPlaying = _useState8[1];
|
|
888
|
-
var _useState9 = react.useState(false),
|
|
889
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
890
|
-
ready = _useState10[0],
|
|
891
|
-
setReady = _useState10[1];
|
|
892
|
-
var _useState11 = react.useState(true),
|
|
893
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
894
|
-
initialPlay = _useState12[0],
|
|
895
|
-
setInitialPlay = _useState12[1];
|
|
896
|
-
var progressStepsReached = react.useRef({});
|
|
897
|
-
var paused = !playing;
|
|
898
|
-
|
|
899
|
-
// Exposed methods
|
|
900
|
-
|
|
901
|
-
var play = react.useCallback(function () {
|
|
902
|
-
var media = ref.current;
|
|
903
|
-
if (media !== null) {
|
|
904
|
-
media.play();
|
|
905
|
-
}
|
|
906
|
-
}, []);
|
|
907
|
-
var pause = react.useCallback(function () {
|
|
908
|
-
var media = ref.current;
|
|
909
|
-
if (media !== null) {
|
|
910
|
-
media.pause();
|
|
911
|
-
}
|
|
912
|
-
}, []);
|
|
913
|
-
var togglePlay = react.useCallback(function () {
|
|
914
|
-
var media = ref.current;
|
|
915
|
-
if (media !== null) {
|
|
916
|
-
if (playing) {
|
|
917
|
-
media.pause();
|
|
918
|
-
} else {
|
|
919
|
-
media.play();
|
|
920
|
-
}
|
|
921
|
-
}
|
|
922
|
-
}, [playing]);
|
|
923
|
-
var stop = react.useCallback(function () {
|
|
924
|
-
var media = ref.current;
|
|
925
|
-
if (media !== null) {
|
|
926
|
-
media.pause();
|
|
927
|
-
media.currentTime = 0;
|
|
928
|
-
}
|
|
929
|
-
}, []);
|
|
930
|
-
var seek = react.useCallback(function (time) {
|
|
931
|
-
var media = ref.current;
|
|
932
|
-
if (media !== null) {
|
|
933
|
-
media.currentTime = time;
|
|
934
|
-
}
|
|
935
|
-
}, []);
|
|
936
|
-
var mute = react.useCallback(function () {
|
|
937
|
-
var media = ref.current;
|
|
938
|
-
if (media !== null) {
|
|
939
|
-
media.muted = true;
|
|
940
|
-
}
|
|
941
|
-
}, []);
|
|
942
|
-
var unMute = react.useCallback(function () {
|
|
943
|
-
var media = ref.current;
|
|
944
|
-
if (media !== null) {
|
|
945
|
-
media.muted = false;
|
|
946
|
-
}
|
|
947
|
-
}, []);
|
|
948
|
-
var toggleMute = react.useCallback(function () {
|
|
949
|
-
var media = ref.current;
|
|
950
|
-
if (media !== null) {
|
|
951
|
-
media.muted = !muted;
|
|
952
|
-
}
|
|
953
|
-
}, [muted]);
|
|
954
|
-
|
|
955
|
-
// Media events callbacks
|
|
956
|
-
|
|
957
|
-
var onCustomPlay = react.useCallback(function () {
|
|
958
|
-
if (onPlay !== null) {
|
|
959
|
-
onPlay({
|
|
960
|
-
initial: initialPlay
|
|
961
|
-
});
|
|
962
|
-
}
|
|
963
|
-
if (initialPlay) {
|
|
964
|
-
setInitialPlay(false);
|
|
965
|
-
}
|
|
966
|
-
setPlaying(true);
|
|
967
|
-
}, [initialPlay, setPlaying, onPlay]);
|
|
968
|
-
var onCustomPause = react.useCallback(function () {
|
|
969
|
-
var media = ref.current;
|
|
970
|
-
setPlaying(false);
|
|
971
|
-
if (onPause !== null) {
|
|
972
|
-
onPause({
|
|
973
|
-
midway: media.currentTime > 0 && media.currentTime < media.duration
|
|
974
|
-
});
|
|
975
|
-
}
|
|
976
|
-
}, [setPlaying, onPause]);
|
|
977
|
-
var onCustomEnded = react.useCallback(function () {
|
|
978
|
-
var media = ref.current;
|
|
979
|
-
media.currentTime = 0;
|
|
980
|
-
if (onEnded !== null) {
|
|
981
|
-
onEnded();
|
|
982
|
-
}
|
|
983
|
-
setInitialPlay(true);
|
|
984
|
-
}, [setInitialPlay, onEnded]);
|
|
985
|
-
var onCustomTimeUpdate = react.useCallback(function () {
|
|
986
|
-
var media = ref.current;
|
|
987
|
-
setCurrentTime(media.currentTime);
|
|
988
|
-
if (onTimeUpdate !== null) {
|
|
989
|
-
onTimeUpdate(media.currentTime);
|
|
990
|
-
}
|
|
991
|
-
var progress = media.currentTime / media.duration;
|
|
992
|
-
var currentSteps = progressStepsReached.current;
|
|
993
|
-
var stepsToTrack = progressSteps.filter(function (step) {
|
|
994
|
-
return progress > step && typeof currentSteps[step] === 'undefined';
|
|
995
|
-
});
|
|
996
|
-
stepsToTrack.forEach(function (step) {
|
|
997
|
-
if (onProgressStep !== null) {
|
|
998
|
-
onProgressStep(step);
|
|
999
|
-
}
|
|
1000
|
-
currentSteps[step] = true;
|
|
1001
|
-
});
|
|
1002
|
-
}, [setCurrentTime, onTimeUpdate, onProgressStep]);
|
|
1003
|
-
var onCustomDurationChange = react.useCallback(function () {
|
|
1004
|
-
var media = ref.current;
|
|
1005
|
-
setDuration(media.duration);
|
|
1006
|
-
if (onDurationChanged !== null) {
|
|
1007
|
-
onDurationChanged(media.duration);
|
|
1008
|
-
}
|
|
1009
|
-
}, [setDuration, onDurationChanged]);
|
|
1010
|
-
var onCustomSeeked = react.useCallback(function () {
|
|
1011
|
-
var media = ref.current;
|
|
1012
|
-
if (onSeeked !== null) {
|
|
1013
|
-
onSeeked(media.currentTime);
|
|
1014
|
-
}
|
|
1015
|
-
}, [onSeeked]);
|
|
1016
|
-
var onCustomVolumeChange = react.useCallback(function () {
|
|
1017
|
-
var media = ref.current;
|
|
1018
|
-
setMuted(media.muted);
|
|
1019
|
-
if (onVolumeChanged !== null) {
|
|
1020
|
-
onVolumeChanged(media.muted, media.volume);
|
|
1021
|
-
}
|
|
1022
|
-
}, [setMuted, onVolumeChanged]);
|
|
1023
|
-
var onCustomLoadStart = react.useCallback(function () {
|
|
1024
|
-
setReady(false);
|
|
1025
|
-
if (onLoadStart !== null) {
|
|
1026
|
-
onLoadStart();
|
|
1027
|
-
}
|
|
1028
|
-
}, [setReady, onLoadStart]);
|
|
1029
|
-
var onCustomCanPlayThrough = react.useCallback(function () {
|
|
1030
|
-
setReady(true);
|
|
1031
|
-
if (onCanPlayThough !== null) {
|
|
1032
|
-
onCanPlayThough();
|
|
1033
|
-
}
|
|
1034
|
-
}, [setReady, onCanPlayThough]);
|
|
1035
|
-
react.useEffect(function () {
|
|
1036
|
-
var media = ref.current;
|
|
1037
|
-
if (media !== null) {
|
|
1038
|
-
media.addEventListener('timeupdate', onCustomTimeUpdate);
|
|
1039
|
-
media.addEventListener('durationchange', onCustomDurationChange);
|
|
1040
|
-
media.addEventListener('volumechange', onCustomVolumeChange);
|
|
1041
|
-
media.addEventListener('play', onCustomPlay);
|
|
1042
|
-
media.addEventListener('pause', onCustomPause);
|
|
1043
|
-
media.addEventListener('ended', onCustomEnded);
|
|
1044
|
-
media.addEventListener('seeked', onCustomSeeked);
|
|
1045
|
-
media.addEventListener('loadstart', onCustomLoadStart);
|
|
1046
|
-
media.addEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
1047
|
-
}
|
|
1048
|
-
return function () {
|
|
1049
|
-
if (media !== null) {
|
|
1050
|
-
media.removeEventListener('timeupdate', onCustomTimeUpdate);
|
|
1051
|
-
media.removeEventListener('durationchange', onCustomDurationChange);
|
|
1052
|
-
media.removeEventListener('volumechange', onCustomVolumeChange);
|
|
1053
|
-
media.removeEventListener('play', onCustomPlay);
|
|
1054
|
-
media.removeEventListener('pause', onCustomPause);
|
|
1055
|
-
media.removeEventListener('ended', onCustomEnded);
|
|
1056
|
-
media.removeEventListener('seeked', onCustomSeeked);
|
|
1057
|
-
media.removeEventListener('loadstart', onCustomLoadStart);
|
|
1058
|
-
media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
|
|
1059
|
-
}
|
|
1060
|
-
};
|
|
1061
|
-
}, [url]);
|
|
1062
|
-
return {
|
|
1063
|
-
ref: ref,
|
|
1064
|
-
play: play,
|
|
1065
|
-
pause: pause,
|
|
1066
|
-
togglePlay: togglePlay,
|
|
1067
|
-
stop: stop,
|
|
1068
|
-
seek: seek,
|
|
1069
|
-
mute: mute,
|
|
1070
|
-
unMute: unMute,
|
|
1071
|
-
toggleMute: toggleMute,
|
|
1072
|
-
muted: muted,
|
|
1073
|
-
currentTime: currentTime,
|
|
1074
|
-
duration: duration,
|
|
1075
|
-
playing: playing,
|
|
1076
|
-
paused: paused,
|
|
1077
|
-
ready: ready
|
|
1078
|
-
};
|
|
1079
|
-
};
|
|
1080
|
-
var useMediaApi$1 = useMediaApi;
|
|
1081
|
-
|
|
1082
|
-
var useMediasParser = function useMediasParser() {
|
|
1083
|
-
// const screensManager = useScreensManager();
|
|
1084
|
-
var fieldsManager = contexts.useFieldsManager();
|
|
1085
|
-
|
|
1086
|
-
// Convert medias object to path
|
|
1087
|
-
var parser = react.useMemo(function () {
|
|
1088
|
-
return new core.MediasParser({
|
|
1089
|
-
// screensManager,
|
|
1090
|
-
fieldsManager: fieldsManager
|
|
1091
|
-
});
|
|
1092
|
-
}, [fieldsManager]);
|
|
1093
|
-
var toPath = react.useCallback(function (story) {
|
|
1094
|
-
return parser.toPath(story);
|
|
1095
|
-
}, [parser]);
|
|
1096
|
-
var fromPath = react.useCallback(function (story) {
|
|
1097
|
-
return parser.fromPath(story);
|
|
1098
|
-
}, [parser]);
|
|
1099
|
-
return {
|
|
1100
|
-
toPath: toPath,
|
|
1101
|
-
fromPath: fromPath,
|
|
1102
|
-
parser: parser
|
|
1103
|
-
};
|
|
1104
|
-
};
|
|
1105
|
-
var useMediasParser$1 = useMediasParser;
|
|
1106
|
-
|
|
1107
|
-
var useResourceTypeName = function useResourceTypeName(resource) {
|
|
1108
|
-
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
1109
|
-
var typeName = react.useMemo(function () {
|
|
1110
|
-
var _ref = resource || {},
|
|
1111
|
-
_ref$name = _ref.name,
|
|
1112
|
-
resourceName = _ref$name === void 0 ? null : _ref$name,
|
|
1113
|
-
_ref$types = _ref.types,
|
|
1114
|
-
types = _ref$types === void 0 ? [] : _ref$types,
|
|
1115
|
-
_ref$settings = _ref.settings,
|
|
1116
|
-
settings = _ref$settings === void 0 ? {} : _ref$settings;
|
|
1117
|
-
var _ref2 = settings || {},
|
|
1118
|
-
_ref2$hideTypeNames = _ref2.hideTypeNames,
|
|
1119
|
-
hideTypeNames = _ref2$hideTypeNames === void 0 ? false : _ref2$hideTypeNames;
|
|
1120
|
-
if (hideTypeNames) {
|
|
1121
|
-
return null;
|
|
1122
|
-
}
|
|
1123
|
-
var _ref3 = type !== null && types !== null && types.length > 1 ? (types || []).find(function (_ref4) {
|
|
1124
|
-
var _ref4$id = _ref4.id,
|
|
1125
|
-
id = _ref4$id === void 0 ? null : _ref4$id;
|
|
1126
|
-
return id === type;
|
|
1127
|
-
}) || {} : {},
|
|
1128
|
-
_ref3$name = _ref3.name,
|
|
1129
|
-
name = _ref3$name === void 0 ? null : _ref3$name;
|
|
1130
|
-
return name === resourceName ? null : name;
|
|
1131
|
-
}, [type, resource]);
|
|
1132
|
-
return typeName;
|
|
1133
|
-
};
|
|
1134
|
-
var useResourceTypeName$1 = useResourceTypeName;
|
|
1135
|
-
|
|
1136
|
-
var getResource = function getResource(resources, resourceId) {
|
|
1137
|
-
return resourceId !== null && !isObject(resourceId) ? resources.find(function (it) {
|
|
1138
|
-
return it.id === resourceId;
|
|
1139
|
-
}) || null : resourceId;
|
|
1140
|
-
};
|
|
1141
|
-
var useResourceUrlGenerator = function useResourceUrlGenerator() {
|
|
1142
|
-
var resourceId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1143
|
-
var resources = contexts.usePanneauResources();
|
|
1144
|
-
var contextResource = contexts.useResource();
|
|
1145
|
-
var resource = getResource(resources, resourceId) || contextResource;
|
|
1146
|
-
var route = contexts.useUrlGenerator();
|
|
1147
|
-
return function (routeResourceId) {
|
|
1148
|
-
var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
1149
|
-
var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
1150
|
-
var finalRouteName = resourceId !== null ? routeResourceId : routeName;
|
|
1151
|
-
var finalParams = resourceId !== null ? routeName : params;
|
|
1152
|
-
var finalResource = getResource(resources, routeResourceId) || resource;
|
|
1153
|
-
var _ref = finalResource || {},
|
|
1154
|
-
_ref$id = _ref.id,
|
|
1155
|
-
id = _ref$id === void 0 ? null : _ref$id;
|
|
1156
|
-
// console.log('route name', finalRouteName, id, finalParams);
|
|
1157
|
-
var finalRoute = id !== null ? route("resources.".concat(finalRouteName), _objectSpread(_objectSpread({}, finalParams), {}, {
|
|
1158
|
-
resource: id
|
|
1159
|
-
})) : null;
|
|
1160
|
-
// console.log('route', finalRoute);
|
|
1161
|
-
return finalRoute;
|
|
1162
|
-
};
|
|
1163
|
-
};
|
|
1164
|
-
var useResourceUrlGenerator$1 = useResourceUrlGenerator;
|
|
1165
|
-
|
|
1166
|
-
var useQuery = function useQuery() {
|
|
1167
|
-
var initialBaseQuery = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1168
|
-
var paginated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
1169
|
-
var initialQuery = react.useMemo(function () {
|
|
1170
|
-
return paginated ? _objectSpread({
|
|
1171
|
-
page: 1,
|
|
1172
|
-
count: 10
|
|
1173
|
-
}, initialBaseQuery) : initialBaseQuery || null;
|
|
1174
|
-
}, [paginated, initialBaseQuery]);
|
|
1175
|
-
var _useState = react.useState(initialQuery),
|
|
1176
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1177
|
-
query = _useState2[0],
|
|
1178
|
-
setQuery = _useState2[1];
|
|
1179
|
-
react.useEffect(function () {
|
|
1180
|
-
setQuery(initialQuery);
|
|
1181
|
-
}, [initialQuery, setQuery]);
|
|
1182
|
-
var onPageChange = react.useCallback(function (newPage) {
|
|
1183
|
-
setQuery(_objectSpread(_objectSpread({}, query), {}, {
|
|
1184
|
-
page: newPage || 1
|
|
1185
|
-
}));
|
|
1186
|
-
}, [query, setQuery]);
|
|
1187
|
-
var onQueryChange = react.useCallback(function (newQuery) {
|
|
1188
|
-
var finalQuery = newQuery !== null ? Object.keys(newQuery).reduce(function (currentQuery, key) {
|
|
1189
|
-
var val = newQuery[key];
|
|
1190
|
-
return val !== null ? _objectSpread(_objectSpread({}, currentQuery), {}, _defineProperty({}, key, val)) : currentQuery;
|
|
1191
|
-
}, null) : null;
|
|
1192
|
-
setQuery(_objectSpread(_objectSpread({}, initialQuery || null), finalQuery || null));
|
|
1193
|
-
}, [query, setQuery, initialQuery]);
|
|
1194
|
-
var onQueryReset = react.useCallback(function () {
|
|
1195
|
-
setQuery(initialQuery);
|
|
1196
|
-
}, [initialQuery, setQuery]);
|
|
1197
|
-
return {
|
|
1198
|
-
query: query,
|
|
1199
|
-
onPageChange: onPageChange,
|
|
1200
|
-
onQueryChange: onQueryChange,
|
|
1201
|
-
onQueryReset: onQueryReset
|
|
1202
|
-
};
|
|
1203
|
-
};
|
|
1204
|
-
var useQuery$1 = useQuery;
|
|
1205
|
-
|
|
1206
|
-
var _excluded = ["width", "height"];
|
|
1207
|
-
var useScreenSize = function useScreenSize(_ref) {
|
|
1208
|
-
var _ref$width = _ref.width,
|
|
1209
|
-
width = _ref$width === void 0 ? null : _ref$width,
|
|
1210
|
-
_ref$height = _ref.height,
|
|
1211
|
-
height = _ref$height === void 0 ? null : _ref$height,
|
|
1212
|
-
_ref$landscape = _ref.landscape,
|
|
1213
|
-
landscape = _ref$landscape === void 0 ? false : _ref$landscape,
|
|
1214
|
-
_ref$screens = _ref.screens,
|
|
1215
|
-
screens = _ref$screens === void 0 ? [] : _ref$screens,
|
|
1216
|
-
_ref$mediaType = _ref.mediaType,
|
|
1217
|
-
mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
|
|
1218
|
-
_ref$media = _ref.media,
|
|
1219
|
-
providedMedia = _ref$media === void 0 ? null : _ref$media;
|
|
1220
|
-
// Get media
|
|
1221
|
-
var media = react.useMemo(function () {
|
|
1222
|
-
return providedMedia !== null ? providedMedia : {
|
|
1223
|
-
type: mediaType,
|
|
1224
|
-
width: "".concat(width, "px"),
|
|
1225
|
-
height: "".concat(height, "px")
|
|
1226
|
-
};
|
|
1227
|
-
}, [providedMedia, mediaType, width, height]);
|
|
1228
|
-
|
|
1229
|
-
// Get matching screens
|
|
1230
|
-
var matchingScreens = react.useMemo(function () {
|
|
1231
|
-
return _toConsumableArray(screens).reverse().filter(function (_ref2) {
|
|
1232
|
-
var _ref2$mediaQuery = _ref2.mediaQuery,
|
|
1233
|
-
mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
|
|
1234
|
-
return mediaQuery === null || cssMediaquery.match(mediaQuery, media);
|
|
1235
|
-
});
|
|
1236
|
-
}, [screens, media]);
|
|
1237
|
-
return {
|
|
1238
|
-
screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
|
|
1239
|
-
screens: _toConsumableArray(matchingScreens).reverse().map(function (_ref3) {
|
|
1240
|
-
var name = _ref3.name;
|
|
1241
|
-
return name;
|
|
1242
|
-
}),
|
|
1243
|
-
width: width,
|
|
1244
|
-
height: height,
|
|
1245
|
-
landscape: landscape
|
|
1246
|
-
};
|
|
1247
|
-
};
|
|
1248
|
-
var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
1249
|
-
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1250
|
-
_ref4$width = _ref4.width,
|
|
1251
|
-
width = _ref4$width === void 0 ? null : _ref4$width,
|
|
1252
|
-
_ref4$height = _ref4.height,
|
|
1253
|
-
height = _ref4$height === void 0 ? null : _ref4$height,
|
|
1254
|
-
opts = _objectWithoutProperties(_ref4, _excluded);
|
|
1255
|
-
var _useResizeObserver = useResizeObserver(),
|
|
1256
|
-
ref = _useResizeObserver.ref,
|
|
1257
|
-
contentRect = _useResizeObserver.entry.contentRect;
|
|
1258
|
-
var _ref5 = contentRect || {},
|
|
1259
|
-
_ref5$width = _ref5.width,
|
|
1260
|
-
calculatedWidth = _ref5$width === void 0 ? 0 : _ref5$width,
|
|
1261
|
-
_ref5$height = _ref5.height,
|
|
1262
|
-
calculatedHeight = _ref5$height === void 0 ? 0 : _ref5$height;
|
|
1263
|
-
var semiFinalWidth = width !== null ? width : calculatedWidth;
|
|
1264
|
-
var semiFinalHeight = height !== null ? height : calculatedHeight;
|
|
1265
|
-
var landscape = semiFinalHeight > 0 && semiFinalWidth > semiFinalHeight;
|
|
1266
|
-
var _opts$withoutMaxSize = opts.withoutMaxSize,
|
|
1267
|
-
withoutMaxSize = _opts$withoutMaxSize === void 0 ? false : _opts$withoutMaxSize;
|
|
1268
|
-
var finalWidth = landscape && !withoutMaxSize ? Math.round(Math.max(320, 0.45 * semiFinalHeight)) : semiFinalWidth;
|
|
1269
|
-
var finalHeight = landscape && !withoutMaxSize ? Math.round(Math.max(533, 0.75 * semiFinalHeight)) : semiFinalHeight;
|
|
1270
|
-
if (finalWidth % 2 === 1) {
|
|
1271
|
-
finalWidth -= 1;
|
|
1272
|
-
}
|
|
1273
|
-
if (finalHeight % 2 === 1) {
|
|
1274
|
-
finalHeight -= 1;
|
|
1275
|
-
}
|
|
1276
|
-
var screenSize = useScreenSize(_objectSpread({
|
|
1277
|
-
width: finalWidth,
|
|
1278
|
-
height: finalHeight,
|
|
1279
|
-
landscape: landscape
|
|
1280
|
-
}, opts));
|
|
1281
|
-
return {
|
|
1282
|
-
ref: ref,
|
|
1283
|
-
screenSize: screenSize
|
|
1284
|
-
};
|
|
1285
|
-
};
|
|
1286
|
-
var getWindowSize = function getWindowSize() {
|
|
1287
|
-
return {
|
|
1288
|
-
width: typeof window !== 'undefined' ? window.innerWidth : null,
|
|
1289
|
-
height: typeof window !== 'undefined' ? window.innerHæeight : null
|
|
1290
|
-
};
|
|
1291
|
-
};
|
|
1292
|
-
var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
|
|
1293
|
-
var _useState = react.useState(getWindowSize()),
|
|
1294
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1295
|
-
windowSize = _useState2[0],
|
|
1296
|
-
setWindowSize = _useState2[1];
|
|
1297
|
-
react.useEffect(function () {
|
|
1298
|
-
var onResize = function onResize() {
|
|
1299
|
-
return setWindowSize(getWindowSize());
|
|
1300
|
-
};
|
|
1301
|
-
if (typeof window !== 'undefined') {
|
|
1302
|
-
window.addEventListener('resize', onResize);
|
|
1303
|
-
}
|
|
1304
|
-
return function () {
|
|
1305
|
-
if (typeof window !== 'undefined') {
|
|
1306
|
-
window.removeEventListener('resize', onResize);
|
|
1307
|
-
}
|
|
1308
|
-
};
|
|
1309
|
-
}, [setWindowSize]);
|
|
1310
|
-
return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
|
|
1311
|
-
};
|
|
1312
|
-
|
|
1313
|
-
var eventsManager = typeof window !== 'undefined' ? new core.EventsManager(window) : null;
|
|
1314
|
-
var useWindowEvent = utils.createUseEvent(eventsManager);
|
|
1315
|
-
var useWindowEvent$1 = useWindowEvent;
|
|
1316
|
-
|
|
1317
|
-
exports.KEYCODES = KEYCODES;
|
|
1318
|
-
exports.getObserver = getObserver;
|
|
1319
|
-
exports.useActionProps = useActionProps$1;
|
|
1320
|
-
exports.useActions = useActions$1;
|
|
1321
|
-
exports.useAnimationFrame = useAnimationFrame$1;
|
|
1322
|
-
exports.useDocumentEvent = useDocumentEvent$1;
|
|
1323
|
-
exports.useForm = useForm$1;
|
|
1324
|
-
exports.useFormattedDate = useFormattedDate;
|
|
1325
|
-
exports.useFormattedTime = useFormattedTime;
|
|
1326
|
-
exports.useIntersectionObserver = useIntersectionObserver;
|
|
1327
|
-
exports.useIsVisible = useIsVisible$1;
|
|
1328
|
-
exports.useKeyboardKeys = useKeyboardKeys$1;
|
|
1329
|
-
exports.useLoadedFonts = useLoadedFonts$1;
|
|
1330
|
-
exports.useMediaApi = useMediaApi$1;
|
|
1331
|
-
exports.useMediasParser = useMediasParser$1;
|
|
1332
|
-
exports.useObserver = useObserver;
|
|
1333
|
-
exports.useQuery = useQuery$1;
|
|
1334
|
-
exports.useResizeObserver = useResizeObserver;
|
|
1335
|
-
exports.useResourceTypeName = useResourceTypeName$1;
|
|
1336
|
-
exports.useResourceUrlGenerator = useResourceUrlGenerator$1;
|
|
1337
|
-
exports.useScreenSizeFromElement = useScreenSizeFromElement;
|
|
1338
|
-
exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
|
|
1339
|
-
exports.useWindowEvent = useWindowEvent$1;
|