@crystaldesign/content-item 25.7.0-rc.13 → 25.7.0-rc.3
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/build/esm/index.js +185 -257
- package/build/types/content-item/src/Components/ContentItemNavigator/index.d.ts +11 -0
- package/build/types/content-item/src/Components/ContentItemNavigator/index.d.ts.map +1 -0
- package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts +7 -0
- package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts.map +1 -0
- package/build/types/content-item/src/Components/ContentItems/index.d.ts +3 -2
- package/build/types/content-item/src/Components/ContentItems/index.d.ts.map +1 -1
- package/build/types/content-item/src/Components/ContentItems/useContentItem.d.ts +12 -0
- package/build/types/content-item/src/Components/ContentItems/useContentItem.d.ts.map +1 -0
- package/build/types/content-item/src/Components/Video/index.d.ts +1 -1
- package/build/types/content-item/src/Components/Video/index.d.ts.map +1 -1
- package/build/types/content-item/src/index.d.ts +0 -3
- package/build/types/content-item/src/index.d.ts.map +1 -1
- package/build/types/content-item/src/types.d.ts +3 -8
- package/build/types/content-item/src/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/build/types/content-item/src/Components/ContentItemContextProvider/index.d.ts +0 -16
- package/build/types/content-item/src/Components/ContentItemContextProvider/index.d.ts.map +0 -1
- package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemConfiguration.d.ts +0 -12
- package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemConfiguration.d.ts.map +0 -1
- package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemContext.d.ts +0 -6
- package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemContext.d.ts.map +0 -1
- package/build/types/content-item/src/Components/Header/index.d.ts +0 -9
- package/build/types/content-item/src/Components/Header/index.d.ts.map +0 -1
package/build/esm/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { useState,
|
|
1
|
+
import { useState, useEffect, useCallback, useMemo, createContext, useContext, useRef, useDeferredValue, useTransition } from 'react';
|
|
2
2
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
4
|
import { useDivaCore, useTranslation, DivaError } from '@crystaldesign/diva-core';
|
|
5
5
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
6
6
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
7
|
+
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
8
|
+
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
|
|
7
9
|
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
8
10
|
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
9
11
|
import axios from 'axios';
|
|
10
|
-
import
|
|
11
|
-
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
12
|
-
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
|
|
12
|
+
import classnames from 'classnames';
|
|
13
13
|
|
|
14
14
|
(function() {
|
|
15
15
|
const env = {"STAGE":"production"};
|
|
@@ -152,8 +152,8 @@ var fullscreenWrapper$1 = "fullscreen-wrapper-GByIA";
|
|
|
152
152
|
var css_248z$8 = ".image-and-text-wrapper-c1RTN {\n display: flex;\n flex-direction: column;\n gap: 6px;\n justify-content: center;\n position: relative;\n}\n\n.text-Da-D1 {\n overflow: auto;\n text-align: center;\n font-size: 14px;\n}\n\n.fullscreen-button-wrapper-Botqq {\n position: relative;\n}\n\n.fullscreen-button-A4b3x {\n cursor: pointer;\n position: absolute;\n width: 20px;\n height: 20px;\n top: 16px;\n right: 8px;\n border-radius: 3px;\n z-index: 1000;\n background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.fullscreen-wrapper-GByIA {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fff;\n position: relative;\n height: 100%;\n width: 100%;\n z-index: 2000005;\n}\n";
|
|
153
153
|
styleInject(css_248z$8);
|
|
154
154
|
|
|
155
|
-
function ownKeys$
|
|
156
|
-
function _objectSpread$
|
|
155
|
+
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
156
|
+
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
157
157
|
var _Image = function Image(_ref) {
|
|
158
158
|
var _ref$item = _ref.item,
|
|
159
159
|
image = _ref$item.image,
|
|
@@ -202,7 +202,7 @@ var _Image = function Image(_ref) {
|
|
|
202
202
|
};
|
|
203
203
|
var imageComponent = /*#__PURE__*/jsx("img", {
|
|
204
204
|
alt: altText,
|
|
205
|
-
style: _objectSpread$
|
|
205
|
+
style: _objectSpread$2(_objectSpread$2({}, styles), style),
|
|
206
206
|
src: urlObj.toString()
|
|
207
207
|
});
|
|
208
208
|
if (showFullscreenButton) {
|
|
@@ -238,8 +238,7 @@ styleInject(css_248z$7);
|
|
|
238
238
|
var Video = function Video(_ref) {
|
|
239
239
|
var _ref$item = _ref.item,
|
|
240
240
|
video = _ref$item.video,
|
|
241
|
-
thumb = _ref$item.thumb
|
|
242
|
-
loop = _ref$item.loop;
|
|
241
|
+
thumb = _ref$item.thumb;
|
|
243
242
|
if (!video) return /*#__PURE__*/jsx(Fragment, {});
|
|
244
243
|
if (video.includes('youtube.com') || video.includes('youtu.be')) {
|
|
245
244
|
if (thumb) return /*#__PURE__*/jsx("div", {
|
|
@@ -271,7 +270,6 @@ var Video = function Video(_ref) {
|
|
|
271
270
|
controls: !thumb,
|
|
272
271
|
playsInline: true,
|
|
273
272
|
autoPlay: !thumb,
|
|
274
|
-
loop: !thumb && loop,
|
|
275
273
|
children: /*#__PURE__*/jsx("source", {
|
|
276
274
|
src: video + (thumb ? '#t=2' : ''),
|
|
277
275
|
type: video.includes('.mp4') ? 'video/mp4' : 'video/webm'
|
|
@@ -283,137 +281,12 @@ var title = "title-0S918";
|
|
|
283
281
|
var css_248z$6 = ".title-0S918 {\n font-size: 18px;\n font-weight: 500;\n}\n";
|
|
284
282
|
styleInject(css_248z$6);
|
|
285
283
|
|
|
286
|
-
var
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
var _useDivaCore = useDivaCore(),
|
|
290
|
-
_useDivaCore$state = _useDivaCore.state,
|
|
291
|
-
apiConfig = _useDivaCore$state.apiConfig,
|
|
292
|
-
jwt = _useDivaCore$state.jwt;
|
|
293
|
-
var _useTranslation = useTranslation(),
|
|
294
|
-
i18n = _useTranslation.i18n;
|
|
295
|
-
var _ref2 = currentContentItem !== null && currentContentItem !== void 0 ? currentContentItem : {},
|
|
296
|
-
contentItemId = _ref2.id,
|
|
297
|
-
contentItemCodex = _ref2.codex,
|
|
298
|
-
externalConfiguration = _ref2.configuration;
|
|
299
|
-
var _useState = useState(externalConfiguration !== null && externalConfiguration !== void 0 ? externalConfiguration : {
|
|
300
|
-
content: []
|
|
301
|
-
}),
|
|
302
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
303
|
-
configuration = _useState2[0],
|
|
304
|
-
setConfiguration = _useState2[1];
|
|
305
|
-
var deferredConfiguration = useDeferredValue(configuration);
|
|
306
|
-
var _useTransition = useTransition(),
|
|
307
|
-
_useTransition2 = _slicedToArray(_useTransition, 2),
|
|
308
|
-
isPending = _useTransition2[0],
|
|
309
|
-
startTransition = _useTransition2[1];
|
|
310
|
-
var _useState3 = useState(true),
|
|
311
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
312
|
-
loading = _useState4[0],
|
|
313
|
-
setLoading = _useState4[1];
|
|
314
|
-
var _useState5 = useState(null),
|
|
315
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
316
|
-
error = _useState6[0],
|
|
317
|
-
setError = _useState6[1];
|
|
318
|
-
useEffect(function () {
|
|
319
|
-
if (contentItemId || contentItemCodex) {
|
|
320
|
-
setLoading(true);
|
|
321
|
-
setError(null);
|
|
322
|
-
getContentItem(apiConfig.catalogService, jwt, contentItemId !== null && contentItemId !== void 0 ? contentItemId : contentItemCodex, i18n.language).then(function (newConfiguration) {
|
|
323
|
-
startTransition(function () {
|
|
324
|
-
setConfiguration(newConfiguration);
|
|
325
|
-
var infoBoxTitle = newConfiguration.content.filter(function (item) {
|
|
326
|
-
return item.type === 'Title' && item.text;
|
|
327
|
-
}).map(function (item) {
|
|
328
|
-
return item.text;
|
|
329
|
-
});
|
|
330
|
-
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
|
|
331
|
-
});
|
|
332
|
-
})["catch"](function (error) {
|
|
333
|
-
setError(error);
|
|
334
|
-
})["finally"](function () {
|
|
335
|
-
setLoading(false);
|
|
336
|
-
});
|
|
337
|
-
}
|
|
338
|
-
}, [contentItemId, contentItemCodex]);
|
|
339
|
-
useEffect(function () {
|
|
340
|
-
if (externalConfiguration) {
|
|
341
|
-
startTransition(function () {
|
|
342
|
-
setConfiguration(externalConfiguration);
|
|
343
|
-
var infoBoxTitle = externalConfiguration.content.filter(function (item) {
|
|
344
|
-
return item.type === 'Title' && item.text;
|
|
345
|
-
}).map(function (item) {
|
|
346
|
-
return item.text;
|
|
347
|
-
});
|
|
348
|
-
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
|
|
349
|
-
});
|
|
350
|
-
setError(null);
|
|
351
|
-
setLoading(false);
|
|
352
|
-
}
|
|
353
|
-
}, [externalConfiguration]);
|
|
354
|
-
return {
|
|
355
|
-
configuration: deferredConfiguration,
|
|
356
|
-
loading: loading || isPending,
|
|
357
|
-
error: error
|
|
358
|
-
};
|
|
359
|
-
};
|
|
360
|
-
function getContentItem(_x, _x2, _x3, _x4) {
|
|
361
|
-
return _getContentItem.apply(this, arguments);
|
|
362
|
-
}
|
|
363
|
-
function _getContentItem() {
|
|
364
|
-
_getContentItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(catalogService, jwt, idOrCodex, lang) {
|
|
365
|
-
var fullUrl, res, resData, _e$response;
|
|
366
|
-
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
367
|
-
while (1) switch (_context.prev = _context.next) {
|
|
368
|
-
case 0:
|
|
369
|
-
fullUrl = catalogService + '/contentItems/' + idOrCodex + '?language=' + lang;
|
|
370
|
-
_context.prev = 1;
|
|
371
|
-
_context.next = 4;
|
|
372
|
-
return axios.get(fullUrl, {
|
|
373
|
-
headers: {
|
|
374
|
-
Authorization: 'Bearer ' + jwt
|
|
375
|
-
}
|
|
376
|
-
});
|
|
377
|
-
case 4:
|
|
378
|
-
res = _context.sent;
|
|
379
|
-
resData = res.data;
|
|
380
|
-
if (!(res.status !== 200)) {
|
|
381
|
-
_context.next = 8;
|
|
382
|
-
break;
|
|
383
|
-
}
|
|
384
|
-
throw new DivaError(resData.error || 'Failed to get content item');
|
|
385
|
-
case 8:
|
|
386
|
-
return _context.abrupt("return", resData);
|
|
387
|
-
case 11:
|
|
388
|
-
_context.prev = 11;
|
|
389
|
-
_context.t0 = _context["catch"](1);
|
|
390
|
-
if (!axios.isAxiosError(_context.t0)) {
|
|
391
|
-
_context.next = 15;
|
|
392
|
-
break;
|
|
393
|
-
}
|
|
394
|
-
throw new DivaError(((_e$response = _context.t0.response) === null || _e$response === void 0 || (_e$response = _e$response.data) === null || _e$response === void 0 ? void 0 : _e$response.error) || 'Could not get content item', {
|
|
395
|
-
cause: _context.t0
|
|
396
|
-
});
|
|
397
|
-
case 15:
|
|
398
|
-
throw new DivaError('Could not get content item', {
|
|
399
|
-
cause: _context.t0
|
|
400
|
-
});
|
|
401
|
-
case 16:
|
|
402
|
-
case "end":
|
|
403
|
-
return _context.stop();
|
|
404
|
-
}
|
|
405
|
-
}, _callee, null, [[1, 11]]);
|
|
406
|
-
}));
|
|
407
|
-
return _getContentItem.apply(this, arguments);
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
411
|
-
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
412
|
-
var useContentItemContext = function useContentItemContext(_ref) {
|
|
284
|
+
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
285
|
+
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
286
|
+
var useContentItemNavigator = function useContentItemNavigator(_ref) {
|
|
413
287
|
var initialItemId = _ref.initialItemId,
|
|
414
288
|
initialItemCodex = _ref.initialItemCodex,
|
|
415
|
-
initialItemConfiguration = _ref.initialItemConfiguration
|
|
416
|
-
onContentItemLoaded = _ref.onContentItemLoaded;
|
|
289
|
+
initialItemConfiguration = _ref.initialItemConfiguration;
|
|
417
290
|
var _useState = useState({
|
|
418
291
|
current: {
|
|
419
292
|
id: initialItemId,
|
|
@@ -455,136 +328,68 @@ var useContentItemContext = function useContentItemContext(_ref) {
|
|
|
455
328
|
};
|
|
456
329
|
});
|
|
457
330
|
}, []);
|
|
458
|
-
var
|
|
459
|
-
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(title);
|
|
331
|
+
var onContentItemLoaded = useCallback(function (title) {
|
|
460
332
|
setNavigationState(function (prev) {
|
|
461
|
-
return _objectSpread$
|
|
462
|
-
current: _objectSpread$
|
|
333
|
+
return _objectSpread$1(_objectSpread$1({}, prev), {}, {
|
|
334
|
+
current: _objectSpread$1(_objectSpread$1({}, prev.current), {}, {
|
|
463
335
|
title: title
|
|
464
336
|
})
|
|
465
337
|
});
|
|
466
338
|
});
|
|
467
339
|
}, []);
|
|
468
|
-
|
|
469
|
-
currentContentItem: navigationState.current,
|
|
470
|
-
onContentItemLoaded: onContentItemLoadedInternal
|
|
471
|
-
}),
|
|
472
|
-
configuration = _useContentItemConfig.configuration,
|
|
473
|
-
error = _useContentItemConfig.error,
|
|
474
|
-
loading = _useContentItemConfig.loading;
|
|
475
|
-
var content = useMemo(function () {
|
|
476
|
-
var _configuration$conten;
|
|
477
|
-
if (((_configuration$conten = configuration.content) === null || _configuration$conten === void 0 || (_configuration$conten = _configuration$conten[0]) === null || _configuration$conten === void 0 ? void 0 : _configuration$conten.type) === 'Title') {
|
|
478
|
-
return _toConsumableArray(configuration.content).slice(1);
|
|
479
|
-
}
|
|
480
|
-
return configuration.content;
|
|
481
|
-
}, [configuration]);
|
|
482
|
-
var renderTitle = useMemo(function () {
|
|
483
|
-
var _configuration$conten2, _configuration$conten3;
|
|
484
|
-
return (configuration === null || configuration === void 0 || (_configuration$conten2 = configuration.content) === null || _configuration$conten2 === void 0 || (_configuration$conten2 = _configuration$conten2[0]) === null || _configuration$conten2 === void 0 ? void 0 : _configuration$conten2.type) === 'Title' ? configuration === null || configuration === void 0 || (_configuration$conten3 = configuration.content) === null || _configuration$conten3 === void 0 ? void 0 : _configuration$conten3[0] : undefined;
|
|
485
|
-
}, [configuration]);
|
|
486
|
-
var hasNavigations = useMemo(function () {
|
|
487
|
-
var _configuration$conten4;
|
|
488
|
-
var c = JSON.stringify((_configuration$conten4 = configuration === null || configuration === void 0 ? void 0 : configuration.content) !== null && _configuration$conten4 !== void 0 ? _configuration$conten4 : []);
|
|
489
|
-
return c.includes('@[codex:') || c.includes('@[id:');
|
|
490
|
-
}, [content]);
|
|
340
|
+
|
|
491
341
|
// Create context value
|
|
492
342
|
var contextValue = useMemo(function () {
|
|
493
343
|
return {
|
|
494
344
|
navigateTo: navigateTo,
|
|
495
|
-
|
|
345
|
+
onContentItemLoaded: onContentItemLoaded,
|
|
496
346
|
canGoBack: navigationState.history.length > 0,
|
|
497
|
-
|
|
498
|
-
content: content,
|
|
499
|
-
loading: loading,
|
|
500
|
-
error: error,
|
|
501
|
-
hasNavigations: hasNavigations
|
|
347
|
+
currentContentItem: navigationState.current
|
|
502
348
|
};
|
|
503
349
|
}, [navigationState.current, navigationState.history.length]);
|
|
504
350
|
return {
|
|
505
|
-
contextValue: contextValue
|
|
351
|
+
contextValue: contextValue,
|
|
352
|
+
navigateBack: navigateBack
|
|
506
353
|
};
|
|
507
354
|
};
|
|
508
355
|
|
|
509
|
-
var
|
|
510
|
-
var
|
|
511
|
-
var
|
|
512
|
-
var backButton = "back-button-2IUJb";
|
|
513
|
-
var closeButton = "close-button-VW8Z5";
|
|
514
|
-
var css_248z$5 = ".header-7dWXW {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 0px 12px;\n width: calc(100% - 24px);\n justify-content: space-between;\n border-bottom: 1px solid lightgray;\n}\n.padding-left-The7U {\n padding-left: 34px;\n}\n.header-left-pbZcL {\n display: flex;\n align-items: center;\n width: 90%;\n}\n\n.back-button-2IUJb {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 20px;\n color: #666;\n transition:\n color 0.2s ease,\n background-color 0.2s ease;\n border-radius: 50%;\n width: 34px;\n height: 34px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-bottom: 4px;\n}\n\n.back-button-2IUJb:after {\n content: '←';\n display: block;\n text-align: center;\n}\n\n.back-button-2IUJb:hover,\n.close-button-VW8Z5:hover {\n color: #333;\n background-color: rgba(0, 0, 0, 0.05);\n background-size: 45%;\n}\n.close-button-VW8Z5 {\n width: 36px;\n height: 36px;\n background-repeat: no-repeat;\n border-radius: 50%;\n background-position: center center;\n background-size: 40%;\n background-color: transparent;\n transition:\n background-color 0.2s ease,\n background-size 0.2s ease;\n background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n\n cursor: pointer;\n}\n";
|
|
356
|
+
var navigator = "navigator-C8xIR";
|
|
357
|
+
var backButton = "back-button-JNU6b";
|
|
358
|
+
var css_248z$5 = ".navigator-C8xIR {\n position: relative;\n width: 100%;\n}\n\n.back-button-JNU6b {\n position: absolute;\n top: 12px;\n left: 8px;\n z-index: 2;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 20px;\n color: #666;\n transition: color 0.2s ease;\n border-radius: 50%;\n width: 34px;\n height: 34px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-bottom: 4px;\n}\n.back-button-JNU6b:after {\n content: '←';\n display: block;\n text-align: center;\n}\n\n.back-button-JNU6b:hover {\n color: #333;\n background-color: rgba(0, 0, 0, 0.05);\n}\n";
|
|
515
359
|
styleInject(css_248z$5);
|
|
516
360
|
|
|
517
|
-
|
|
518
|
-
function
|
|
519
|
-
var
|
|
520
|
-
var onClose = _ref.onClose,
|
|
521
|
-
headerClassName = _ref.headerClassName,
|
|
522
|
-
headerWrapperStyle = _ref.headerWrapperStyle;
|
|
523
|
-
var _useContentItem = useContentItem(),
|
|
524
|
-
canGoBack = _useContentItem.canGoBack,
|
|
525
|
-
navigateBack = _useContentItem.navigateBack,
|
|
526
|
-
renderTitle = _useContentItem.renderTitle,
|
|
527
|
-
hasNavigations = _useContentItem.hasNavigations;
|
|
528
|
-
if (!onClose && !canGoBack && !renderTitle) {
|
|
529
|
-
return /*#__PURE__*/jsx(Fragment, {});
|
|
530
|
-
}
|
|
531
|
-
return /*#__PURE__*/jsxs("div", {
|
|
532
|
-
className: classNames(header, headerClassName),
|
|
533
|
-
style: headerWrapperStyle,
|
|
534
|
-
children: [/*#__PURE__*/jsxs("div", {
|
|
535
|
-
className: classNames(headerLeft, !canGoBack && hasNavigations && paddingLeft),
|
|
536
|
-
children: [canGoBack && /*#__PURE__*/jsx("button", {
|
|
537
|
-
className: backButton,
|
|
538
|
-
onClick: navigateBack,
|
|
539
|
-
id: "diva-content-item-back-button",
|
|
540
|
-
"aria-label": "Go back"
|
|
541
|
-
}), renderTitle && /*#__PURE__*/jsx(Title, {
|
|
542
|
-
item: _objectSpread$1(_objectSpread$1({}, renderTitle), {}, {
|
|
543
|
-
style: _objectSpread$1(_objectSpread$1({}, renderTitle.style), {}, {
|
|
544
|
-
borderBottom: 'unset'
|
|
545
|
-
})
|
|
546
|
-
})
|
|
547
|
-
})]
|
|
548
|
-
}), onClose && /*#__PURE__*/jsx("div", {
|
|
549
|
-
className: closeButton,
|
|
550
|
-
onClick: onClose,
|
|
551
|
-
id: "diva-content-item-close-button",
|
|
552
|
-
"aria-label": "Close"
|
|
553
|
-
})]
|
|
554
|
-
});
|
|
555
|
-
};
|
|
556
|
-
|
|
557
|
-
var ContentItemContext = /*#__PURE__*/createContext(undefined);
|
|
558
|
-
function useContentItem() {
|
|
559
|
-
var context = useContext(ContentItemContext);
|
|
361
|
+
var ContentItemNavigationContext = /*#__PURE__*/createContext(undefined);
|
|
362
|
+
function useContentItemNavigation() {
|
|
363
|
+
var context = useContext(ContentItemNavigationContext);
|
|
560
364
|
if (!context) {
|
|
561
|
-
throw new Error('
|
|
365
|
+
throw new Error('useContentItemNavigation must be used within a ContentItemNavigator');
|
|
562
366
|
}
|
|
563
367
|
return context;
|
|
564
368
|
}
|
|
565
|
-
function
|
|
369
|
+
function ContentItemNavigator(_ref) {
|
|
566
370
|
var initialItemId = _ref.initialItemId,
|
|
567
371
|
initialItemCodex = _ref.initialItemCodex,
|
|
568
372
|
initialItemConfiguration = _ref.initialItemConfiguration,
|
|
569
|
-
children = _ref.children
|
|
570
|
-
|
|
571
|
-
headerWrapperStyle = _ref.headerWrapperStyle,
|
|
572
|
-
onClose = _ref.onClose,
|
|
573
|
-
onContentItemLoaded = _ref.onContentItemLoaded;
|
|
574
|
-
var _useContentItemContex = useContentItemContext({
|
|
373
|
+
children = _ref.children;
|
|
374
|
+
var _useContentItemNaviga = useContentItemNavigator({
|
|
575
375
|
initialItemId: initialItemId,
|
|
576
376
|
initialItemCodex: initialItemCodex,
|
|
577
|
-
initialItemConfiguration: initialItemConfiguration
|
|
578
|
-
onContentItemLoaded: onContentItemLoaded
|
|
377
|
+
initialItemConfiguration: initialItemConfiguration
|
|
579
378
|
}),
|
|
580
|
-
contextValue =
|
|
581
|
-
|
|
379
|
+
contextValue = _useContentItemNaviga.contextValue,
|
|
380
|
+
navigateBack = _useContentItemNaviga.navigateBack;
|
|
381
|
+
return /*#__PURE__*/jsx(ContentItemNavigationContext.Provider, {
|
|
582
382
|
value: contextValue,
|
|
583
|
-
children:
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
383
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
384
|
+
className: navigator,
|
|
385
|
+
id: "diva-content-item-navigator",
|
|
386
|
+
children: [contextValue.canGoBack && /*#__PURE__*/jsx("button", {
|
|
387
|
+
className: backButton,
|
|
388
|
+
onClick: navigateBack,
|
|
389
|
+
id: "diva-content-item-back-button",
|
|
390
|
+
"aria-label": "Go back"
|
|
391
|
+
}), children]
|
|
392
|
+
})
|
|
588
393
|
});
|
|
589
394
|
}
|
|
590
395
|
|
|
@@ -592,8 +397,8 @@ var Title = function Title(_ref) {
|
|
|
592
397
|
var _ref$item = _ref.item,
|
|
593
398
|
text = _ref$item.text,
|
|
594
399
|
style = _ref$item.style;
|
|
595
|
-
var
|
|
596
|
-
navigateTo =
|
|
400
|
+
var _useContentItemNaviga = useContentItemNavigation(),
|
|
401
|
+
navigateTo = _useContentItemNaviga.navigateTo;
|
|
597
402
|
if (!text) return /*#__PURE__*/jsx(Fragment, {});
|
|
598
403
|
var processedContent = processContentItemLinks(text, navigateTo);
|
|
599
404
|
return /*#__PURE__*/jsx("h4", {
|
|
@@ -715,8 +520,8 @@ var RichText = function RichText(_ref) {
|
|
|
715
520
|
text = _ref$item.text,
|
|
716
521
|
style = _ref$item.style;
|
|
717
522
|
var containerRef = useRef(null);
|
|
718
|
-
var
|
|
719
|
-
navigateTo =
|
|
523
|
+
var _useContentItemNaviga = useContentItemNavigation(),
|
|
524
|
+
navigateTo = _useContentItemNaviga.navigateTo;
|
|
720
525
|
var processedContent = processContentItemLinks(text, navigateTo);
|
|
721
526
|
useEffect(function () {
|
|
722
527
|
if (!containerRef.current) return;
|
|
@@ -800,6 +605,134 @@ var ContentItem = function ContentItem(_ref) {
|
|
|
800
605
|
throw new Error('unkonwn type: ' + item.type);
|
|
801
606
|
};
|
|
802
607
|
|
|
608
|
+
var useContentItem = function useContentItem(_ref) {
|
|
609
|
+
var onContentItemLoaded = _ref.onContentItemLoaded;
|
|
610
|
+
var _useDivaCore = useDivaCore(),
|
|
611
|
+
_useDivaCore$state = _useDivaCore.state,
|
|
612
|
+
apiConfig = _useDivaCore$state.apiConfig,
|
|
613
|
+
jwt = _useDivaCore$state.jwt;
|
|
614
|
+
var _useTranslation = useTranslation(),
|
|
615
|
+
i18n = _useTranslation.i18n;
|
|
616
|
+
var _useContentItemNaviga = useContentItemNavigation(),
|
|
617
|
+
_useContentItemNaviga2 = _useContentItemNaviga.currentContentItem,
|
|
618
|
+
contentItemId = _useContentItemNaviga2.id,
|
|
619
|
+
contentItemCodex = _useContentItemNaviga2.codex,
|
|
620
|
+
externalConfiguration = _useContentItemNaviga2.configuration,
|
|
621
|
+
onContentItemLoadedFromNavigation = _useContentItemNaviga.onContentItemLoaded;
|
|
622
|
+
var _useState = useState(externalConfiguration !== null && externalConfiguration !== void 0 ? externalConfiguration : {
|
|
623
|
+
content: []
|
|
624
|
+
}),
|
|
625
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
626
|
+
configuration = _useState2[0],
|
|
627
|
+
setConfiguration = _useState2[1];
|
|
628
|
+
var deferredConfiguration = useDeferredValue(configuration);
|
|
629
|
+
var _useTransition = useTransition(),
|
|
630
|
+
_useTransition2 = _slicedToArray(_useTransition, 2),
|
|
631
|
+
isPending = _useTransition2[0],
|
|
632
|
+
startTransition = _useTransition2[1];
|
|
633
|
+
var _useState3 = useState(true),
|
|
634
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
635
|
+
loading = _useState4[0],
|
|
636
|
+
setLoading = _useState4[1];
|
|
637
|
+
var _useState5 = useState(null),
|
|
638
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
639
|
+
error = _useState6[0],
|
|
640
|
+
setError = _useState6[1];
|
|
641
|
+
useEffect(function () {
|
|
642
|
+
if (contentItemId || contentItemCodex) {
|
|
643
|
+
setLoading(true);
|
|
644
|
+
setError(null);
|
|
645
|
+
getContentItem(apiConfig.catalogService, jwt, contentItemId !== null && contentItemId !== void 0 ? contentItemId : contentItemCodex, i18n.language).then(function (newConfiguration) {
|
|
646
|
+
startTransition(function () {
|
|
647
|
+
setConfiguration(newConfiguration);
|
|
648
|
+
var infoBoxTitle = newConfiguration.content.filter(function (item) {
|
|
649
|
+
return item.type === 'Title' && item.text;
|
|
650
|
+
}).map(function (item) {
|
|
651
|
+
return item.text;
|
|
652
|
+
});
|
|
653
|
+
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
|
|
654
|
+
onContentItemLoadedFromNavigation(infoBoxTitle[0]);
|
|
655
|
+
});
|
|
656
|
+
})["catch"](function (error) {
|
|
657
|
+
setError(error);
|
|
658
|
+
})["finally"](function () {
|
|
659
|
+
setLoading(false);
|
|
660
|
+
});
|
|
661
|
+
}
|
|
662
|
+
}, [contentItemId, contentItemCodex]);
|
|
663
|
+
useEffect(function () {
|
|
664
|
+
if (externalConfiguration) {
|
|
665
|
+
startTransition(function () {
|
|
666
|
+
setConfiguration(externalConfiguration);
|
|
667
|
+
var infoBoxTitle = externalConfiguration.content.filter(function (item) {
|
|
668
|
+
return item.type === 'Title' && item.text;
|
|
669
|
+
}).map(function (item) {
|
|
670
|
+
return item.text;
|
|
671
|
+
});
|
|
672
|
+
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
|
|
673
|
+
onContentItemLoadedFromNavigation(infoBoxTitle[0]);
|
|
674
|
+
});
|
|
675
|
+
setError(null);
|
|
676
|
+
setLoading(false);
|
|
677
|
+
}
|
|
678
|
+
}, [externalConfiguration]);
|
|
679
|
+
return {
|
|
680
|
+
configuration: configuration,
|
|
681
|
+
deferredConfiguration: deferredConfiguration,
|
|
682
|
+
loading: loading || isPending,
|
|
683
|
+
error: error
|
|
684
|
+
};
|
|
685
|
+
};
|
|
686
|
+
function getContentItem(_x, _x2, _x3, _x4) {
|
|
687
|
+
return _getContentItem.apply(this, arguments);
|
|
688
|
+
}
|
|
689
|
+
function _getContentItem() {
|
|
690
|
+
_getContentItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(catalogService, jwt, idOrCodex, lang) {
|
|
691
|
+
var fullUrl, res, resData, _e$response;
|
|
692
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
693
|
+
while (1) switch (_context.prev = _context.next) {
|
|
694
|
+
case 0:
|
|
695
|
+
fullUrl = catalogService + '/contentItems/' + idOrCodex + '?language=' + lang;
|
|
696
|
+
_context.prev = 1;
|
|
697
|
+
_context.next = 4;
|
|
698
|
+
return axios.get(fullUrl, {
|
|
699
|
+
headers: {
|
|
700
|
+
Authorization: 'Bearer ' + jwt
|
|
701
|
+
}
|
|
702
|
+
});
|
|
703
|
+
case 4:
|
|
704
|
+
res = _context.sent;
|
|
705
|
+
resData = res.data;
|
|
706
|
+
if (!(res.status !== 200)) {
|
|
707
|
+
_context.next = 8;
|
|
708
|
+
break;
|
|
709
|
+
}
|
|
710
|
+
throw new DivaError(resData.error || 'Failed to get content item');
|
|
711
|
+
case 8:
|
|
712
|
+
return _context.abrupt("return", resData);
|
|
713
|
+
case 11:
|
|
714
|
+
_context.prev = 11;
|
|
715
|
+
_context.t0 = _context["catch"](1);
|
|
716
|
+
if (!axios.isAxiosError(_context.t0)) {
|
|
717
|
+
_context.next = 15;
|
|
718
|
+
break;
|
|
719
|
+
}
|
|
720
|
+
throw new DivaError(((_e$response = _context.t0.response) === null || _e$response === void 0 || (_e$response = _e$response.data) === null || _e$response === void 0 ? void 0 : _e$response.error) || 'Could not get content item', {
|
|
721
|
+
cause: _context.t0
|
|
722
|
+
});
|
|
723
|
+
case 15:
|
|
724
|
+
throw new DivaError('Could not get content item', {
|
|
725
|
+
cause: _context.t0
|
|
726
|
+
});
|
|
727
|
+
case 16:
|
|
728
|
+
case "end":
|
|
729
|
+
return _context.stop();
|
|
730
|
+
}
|
|
731
|
+
}, _callee, null, [[1, 11]]);
|
|
732
|
+
}));
|
|
733
|
+
return _getContentItem.apply(this, arguments);
|
|
734
|
+
}
|
|
735
|
+
|
|
803
736
|
var errorBox = "error-box-coPDD";
|
|
804
737
|
var css_248z$2 = ".error-box-coPDD {\n color: red;\n text-align: center;\n padding: 20px;\n border: 1px solid red;\n background-color: #ffeeee;\n border-radius: 4px;\n}\n";
|
|
805
738
|
styleInject(css_248z$2);
|
|
@@ -828,24 +761,23 @@ function Loader() {
|
|
|
828
761
|
var rootWrapper = "root-wrapper-WNprt";
|
|
829
762
|
var contentWrapper = "content-wrapper-K5XIs";
|
|
830
763
|
var loading = "loading-089Ib";
|
|
831
|
-
var css_248z = ".root-wrapper-WNprt {\n min-height: 60px;\n position: relative;\n
|
|
764
|
+
var css_248z = ".root-wrapper-WNprt {\n min-height: 60px;\n position: relative;\n width: calc(100% - 80px);\n padding-left: 40px;\n}\n\n.content-wrapper-K5XIs {\n transition: opacity 0.2s ease-in-out;\n}\n.content-wrapper-K5XIs.loading-089Ib {\n opacity: 0.5;\n}\n";
|
|
832
765
|
styleInject(css_248z);
|
|
833
766
|
|
|
834
|
-
var ContentItems = function ContentItems(
|
|
835
|
-
var
|
|
836
|
-
var _useContentItem = useContentItem(),
|
|
837
|
-
|
|
767
|
+
var ContentItems = function ContentItems(props) {
|
|
768
|
+
var _deferredConfiguratio;
|
|
769
|
+
var _useContentItem = useContentItem(props),
|
|
770
|
+
deferredConfiguration = _useContentItem.deferredConfiguration,
|
|
838
771
|
loading$1 = _useContentItem.loading,
|
|
839
772
|
error = _useContentItem.error;
|
|
840
773
|
return /*#__PURE__*/jsxs("div", {
|
|
841
774
|
className: rootWrapper,
|
|
842
775
|
id: 'diva-content-item',
|
|
843
776
|
children: [loading$1 && /*#__PURE__*/jsx(Loader, {}), /*#__PURE__*/jsxs("div", {
|
|
844
|
-
className:
|
|
845
|
-
style: wrapperStyle,
|
|
777
|
+
className: classnames(contentWrapper, _defineProperty({}, loading, loading$1)),
|
|
846
778
|
children: [error && /*#__PURE__*/jsx(ErrorBox, {
|
|
847
779
|
error: error
|
|
848
|
-
}), content === null ||
|
|
780
|
+
}), (_deferredConfiguratio = deferredConfiguration.content) === null || _deferredConfiguratio === void 0 ? void 0 : _deferredConfiguratio.map(function (item, i) {
|
|
849
781
|
return /*#__PURE__*/jsx(ContentItem, {
|
|
850
782
|
item: item
|
|
851
783
|
}, i);
|
|
@@ -855,16 +787,12 @@ var ContentItems = function ContentItems(_ref) {
|
|
|
855
787
|
};
|
|
856
788
|
|
|
857
789
|
var ContentItemComponent = function ContentItemComponent(props) {
|
|
858
|
-
return /*#__PURE__*/jsx(
|
|
790
|
+
return /*#__PURE__*/jsx(ContentItemNavigator, {
|
|
859
791
|
initialItemId: props.contentItemId,
|
|
860
792
|
initialItemCodex: props.contentItemCodex,
|
|
861
793
|
initialItemConfiguration: props.configuration,
|
|
862
|
-
wrapperStyle: props.wrapperStyle,
|
|
863
|
-
headerWrapperStyle: props.headerWrapperStyle,
|
|
864
|
-
headerClassName: props.headerClassName,
|
|
865
|
-
onContentItemLoaded: props.onContentItemLoaded,
|
|
866
|
-
onClose: props.onClose,
|
|
867
794
|
children: /*#__PURE__*/jsx(ContentItems, {
|
|
795
|
+
onContentItemLoaded: props.onContentItemLoaded,
|
|
868
796
|
wrapperStyle: props.wrapperStyle
|
|
869
797
|
})
|
|
870
798
|
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { Configuration, ContentItemNavigationContextType } from '../../types';
|
|
3
|
+
export interface ContentItemNavigatorProps {
|
|
4
|
+
initialItemId?: string;
|
|
5
|
+
initialItemCodex?: string;
|
|
6
|
+
initialItemConfiguration?: Configuration;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare function useContentItemNavigation(): ContentItemNavigationContextType;
|
|
10
|
+
export declare function ContentItemNavigator({ initialItemId, initialItemCodex, initialItemConfiguration, children }: ContentItemNavigatorProps): React.JSX.Element;
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemNavigator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,yBAAyB;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,wBAAgB,wBAAwB,qCAMvC;AAED,wBAAgB,oBAAoB,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,EAAE,yBAAyB,qBAWtI"}
|
package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ContentItemNavigationContextType } from '../../types';
|
|
2
|
+
import { ContentItemNavigatorProps } from './index';
|
|
3
|
+
export declare const useContentItemNavigator: ({ initialItemId, initialItemCodex, initialItemConfiguration }: ContentItemNavigatorProps) => {
|
|
4
|
+
contextValue: ContentItemNavigationContextType;
|
|
5
|
+
navigateBack: () => void;
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=useContentItemNavigator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContentItemNavigator.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemNavigator/useContentItemNavigator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAoB,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,uBAAuB,kEAAmE,yBAAyB;;;CA+D/H,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import { UseContentItemProps } from './useContentItem';
|
|
3
|
+
interface ContentItemsProps extends UseContentItemProps {
|
|
3
4
|
wrapperStyle?: React.CSSProperties;
|
|
4
5
|
}
|
|
5
|
-
declare const ContentItems: (
|
|
6
|
+
declare const ContentItems: (props: ContentItemsProps) => React.JSX.Element;
|
|
6
7
|
export default ContentItems;
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,QAAA,MAAM,YAAY,UAAW,iBAAiB,sBAY7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Configuration } from '../../types';
|
|
2
|
+
export interface UseContentItemProps {
|
|
3
|
+
onContentItemLoaded?: (title: string) => void;
|
|
4
|
+
}
|
|
5
|
+
export declare const useContentItem: ({ onContentItemLoaded, }: UseContentItemProps) => {
|
|
6
|
+
configuration: Configuration;
|
|
7
|
+
deferredConfiguration: Configuration;
|
|
8
|
+
loading: boolean;
|
|
9
|
+
error: Error | null;
|
|
10
|
+
};
|
|
11
|
+
export default useContentItem;
|
|
12
|
+
//# sourceMappingURL=useContentItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContentItem.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/useContentItem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK5C,MAAM,WAAW,mBAAmB;IAClC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,cAAc,6BAExB,mBAAmB,KAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,qBAAqB,EAAE,aAAa,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAyDrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -3,6 +3,6 @@ import { VideoType } from '../../types';
|
|
|
3
3
|
type Props = {
|
|
4
4
|
item: VideoType;
|
|
5
5
|
};
|
|
6
|
-
declare const Video: ({ item: { video, thumb
|
|
6
|
+
declare const Video: ({ item: { video, thumb } }: Props) => React.JSX.Element;
|
|
7
7
|
export default Video;
|
|
8
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,+BAAgC,KAAK,sBA4B/C,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -9,9 +9,6 @@ export interface ContentItemProps {
|
|
|
9
9
|
contentItemId?: string;
|
|
10
10
|
contentItemCodex?: string;
|
|
11
11
|
wrapperStyle?: React.CSSProperties;
|
|
12
|
-
headerClassName?: string;
|
|
13
|
-
headerWrapperStyle?: React.CSSProperties;
|
|
14
|
-
onClose?: () => void;
|
|
15
12
|
onContentItemLoaded?: (title: string) => void;
|
|
16
13
|
}
|
|
17
14
|
export declare const ContentItemComponent: React.FC<ContentItemProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAU3D,CAAC"}
|
|
@@ -5,15 +5,11 @@ export interface ContentItemState {
|
|
|
5
5
|
configuration?: Configuration;
|
|
6
6
|
title?: string;
|
|
7
7
|
}
|
|
8
|
-
export interface
|
|
8
|
+
export interface ContentItemNavigationContextType {
|
|
9
9
|
navigateTo: (props: ContentItemState) => void;
|
|
10
|
-
|
|
10
|
+
onContentItemLoaded: (title: string) => void;
|
|
11
11
|
canGoBack: boolean;
|
|
12
|
-
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
error?: Error | null;
|
|
15
|
-
renderTitle?: TitleType;
|
|
16
|
-
hasNavigations?: boolean;
|
|
12
|
+
currentContentItem: ContentItemState;
|
|
17
13
|
}
|
|
18
14
|
export interface Configuration {
|
|
19
15
|
content: ContentItemType[];
|
|
@@ -55,7 +51,6 @@ export interface VideoType {
|
|
|
55
51
|
type: 'Video';
|
|
56
52
|
video: string;
|
|
57
53
|
thumb?: boolean;
|
|
58
|
-
loop?: boolean;
|
|
59
54
|
}
|
|
60
55
|
export interface URLType {
|
|
61
56
|
type: 'URL';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gCAAgC;IAC/C,UAAU,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AAErH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crystaldesign/content-item",
|
|
3
|
-
"version": "25.7.0-rc.
|
|
3
|
+
"version": "25.7.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"storybook": "storybook dev -p 6006",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
},
|
|
35
35
|
"module": "build/esm/index.js",
|
|
36
36
|
"types": "./build/types/content-item/src/index.d.ts",
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "aef53ccd1666e0fd50961c8aca5c253054e6b64c"
|
|
38
38
|
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { Configuration, ContentItemContextType } from '../../types';
|
|
3
|
-
export interface ContentItemContextProviderProps {
|
|
4
|
-
initialItemId?: string;
|
|
5
|
-
initialItemCodex?: string;
|
|
6
|
-
initialItemConfiguration?: Configuration;
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
headerClassName?: string;
|
|
9
|
-
headerWrapperStyle?: React.CSSProperties;
|
|
10
|
-
onClose?: () => void;
|
|
11
|
-
wrapperStyle?: React.CSSProperties;
|
|
12
|
-
onContentItemLoaded?: (title: string) => void;
|
|
13
|
-
}
|
|
14
|
-
export declare function useContentItem(): ContentItemContextType;
|
|
15
|
-
export declare function ContentItemContextProvider({ initialItemId, initialItemCodex, initialItemConfiguration, children, headerClassName, headerWrapperStyle, onClose, onContentItemLoaded, }: ContentItemContextProviderProps): React.JSX.Element;
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAKpE,MAAM,WAAW,+BAA+B;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,cAAc,2BAM7B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,OAAO,EACP,mBAAmB,GACpB,EAAE,+BAA+B,qBASjC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Configuration, ContentItemState } from '../../types';
|
|
2
|
-
export interface UseContentItemProps {
|
|
3
|
-
currentContentItem?: ContentItemState;
|
|
4
|
-
onContentItemLoaded?: (title: string) => void;
|
|
5
|
-
}
|
|
6
|
-
export declare const useContentItemConfiguration: ({ onContentItemLoaded, currentContentItem, }: UseContentItemProps) => {
|
|
7
|
-
configuration: Configuration;
|
|
8
|
-
loading: boolean;
|
|
9
|
-
error: Error | null;
|
|
10
|
-
};
|
|
11
|
-
export default useContentItemConfiguration;
|
|
12
|
-
//# sourceMappingURL=useContentItemConfiguration.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useContentItemConfiguration.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/useContentItemConfiguration.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI9D,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IACtC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B,iDAGrC,mBAAmB,KAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAmDrB,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { ContentItemContextType } from '../../types';
|
|
2
|
-
import { ContentItemContextProviderProps } from './index';
|
|
3
|
-
export declare const useContentItemContext: ({ initialItemId, initialItemCodex, initialItemConfiguration, onContentItemLoaded, }: ContentItemContextProviderProps) => {
|
|
4
|
-
contextValue: ContentItemContextType;
|
|
5
|
-
};
|
|
6
|
-
//# sourceMappingURL=useContentItemContext.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useContentItemContext.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/useContentItemContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAoB,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAG1D,eAAO,MAAM,qBAAqB,wFAK/B,+BAA+B;;CAqFjC,CAAC"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface HeaderProps {
|
|
3
|
-
onClose?: () => void;
|
|
4
|
-
headerClassName?: string;
|
|
5
|
-
headerWrapperStyle?: React.CSSProperties;
|
|
6
|
-
}
|
|
7
|
-
declare const Header: ({ onClose, headerClassName, headerWrapperStyle }: HeaderProps) => React.JSX.Element;
|
|
8
|
-
export default Header;
|
|
9
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AACD,QAAA,MAAM,MAAM,qDAAsD,WAAW,sBAgB5E,CAAC;AAEF,eAAe,MAAM,CAAC"}
|