@kids-reporter/draft-renderer 1.0.10 → 1.0.12
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.
|
@@ -7,10 +7,15 @@ exports.ImageBlock = ImageBlock;
|
|
|
7
7
|
exports.ImageInArticleBody = ImageInArticleBody;
|
|
8
8
|
exports.ImageInInfoBox = ImageInInfoBox;
|
|
9
9
|
exports.InfoBoxContainer = void 0;
|
|
10
|
-
var _react =
|
|
11
|
-
var _styledComponents =
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
12
|
+
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
12
13
|
var _mediaQuery = require("../utils/media-query");
|
|
14
|
+
var _constants = require("../utils/constants");
|
|
13
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
14
19
|
const Figure = _styledComponents.default.figure`
|
|
15
20
|
width: 100%;
|
|
16
21
|
`;
|
|
@@ -31,16 +36,29 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
31
36
|
const Img = _styledComponents.default.img`
|
|
32
37
|
width: 100%;
|
|
33
38
|
object-fit: contain;
|
|
39
|
+
${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
|
|
34
40
|
`;
|
|
35
41
|
function ImageBlock({
|
|
36
42
|
className = '',
|
|
37
43
|
data
|
|
38
44
|
}) {
|
|
45
|
+
const theme = (0, _styledComponents.useTheme)();
|
|
39
46
|
const {
|
|
40
47
|
desc,
|
|
41
48
|
imageFile,
|
|
42
49
|
resized
|
|
43
50
|
} = data || {};
|
|
51
|
+
const [isDesktopAndAbove, setIsDesktopAndAbove] = (0, _react.useState)(false);
|
|
52
|
+
const handleWindowResize = (0, _debounce.default)(() => {
|
|
53
|
+
setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
|
|
54
|
+
}, _constants.DEBOUNCE_THRESHOLD);
|
|
55
|
+
(0, _react.useEffect)(() => {
|
|
56
|
+
setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
|
|
57
|
+
window.addEventListener('resize', handleWindowResize);
|
|
58
|
+
return () => {
|
|
59
|
+
window.removeEventListener('resize', handleWindowResize);
|
|
60
|
+
};
|
|
61
|
+
}, []);
|
|
44
62
|
const aspectRatio = imageFile !== null && imageFile !== void 0 && imageFile.width && imageFile !== null && imageFile !== void 0 && imageFile.height ? `${imageFile.width}/${imageFile.height}` : '16/9';
|
|
45
63
|
const imgSrcSetArr = [];
|
|
46
64
|
if (resized !== null && resized !== void 0 && resized.medium) {
|
|
@@ -49,17 +67,25 @@ function ImageBlock({
|
|
|
49
67
|
if (resized !== null && resized !== void 0 && resized.large) {
|
|
50
68
|
imgSrcSetArr.push(`${resized.large} 1000w`);
|
|
51
69
|
}
|
|
70
|
+
const commonImgProps = {
|
|
71
|
+
src: (resized === null || resized === void 0 ? void 0 : resized.original) ?? (resized === null || resized === void 0 ? void 0 : resized.medium),
|
|
72
|
+
sizes: '(min-width: 1200px) 1000px, 100vw',
|
|
73
|
+
srcSet: imgSrcSetArr.join(',')
|
|
74
|
+
};
|
|
52
75
|
const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
|
|
53
76
|
className: className
|
|
54
|
-
}, /*#__PURE__*/_react.default.createElement(Img, {
|
|
55
|
-
alt: desc
|
|
56
|
-
|
|
57
|
-
srcSet: imgSrcSetArr.join(','),
|
|
58
|
-
sizes: "(min-width: 1200px) 1000px, 100vw",
|
|
77
|
+
}, /*#__PURE__*/_react.default.createElement(Img, _extends({
|
|
78
|
+
alt: desc
|
|
79
|
+
}, commonImgProps, {
|
|
59
80
|
style: {
|
|
60
81
|
aspectRatio: aspectRatio
|
|
82
|
+
},
|
|
83
|
+
$isDesktopAndAbove: isDesktopAndAbove,
|
|
84
|
+
onClick: () => {
|
|
85
|
+
var _theme$handleImgModal;
|
|
86
|
+
return isDesktopAndAbove && (theme === null || theme === void 0 || (_theme$handleImgModal = theme.handleImgModalOpen) === null || _theme$handleImgModal === void 0 ? void 0 : _theme$handleImgModal.call(theme, commonImgProps));
|
|
61
87
|
}
|
|
62
|
-
}), desc && /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
|
|
88
|
+
})), desc && /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
|
|
63
89
|
return imgBlock;
|
|
64
90
|
}
|
|
65
91
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
@@ -4,14 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ImageLinkInInfoBox = exports.ImageLinkInArticleBody = exports.ImageLinkBlock = void 0;
|
|
7
|
-
var _react =
|
|
8
|
-
var _styledComponents =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _draftJs = require("draft-js");
|
|
10
|
+
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
10
11
|
var _imageBlock = require("./image-block");
|
|
11
12
|
var _index = _interopRequireDefault(require("../block-render-maps/index"));
|
|
12
13
|
var _index2 = require("../entity-decorators/index");
|
|
13
14
|
var _mediaQuery = require("../utils/media-query");
|
|
15
|
+
var _constants = require("../utils/constants");
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
15
20
|
const fallbackImg = '/assets/images/image_placeholder.png';
|
|
16
21
|
const Figure = _styledComponents.default.figure`
|
|
17
22
|
width: 100%;
|
|
@@ -19,23 +24,43 @@ const Figure = _styledComponents.default.figure`
|
|
|
19
24
|
const Img = _styledComponents.default.img`
|
|
20
25
|
width: 100%;
|
|
21
26
|
object-fit: contain;
|
|
27
|
+
${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
|
|
22
28
|
`;
|
|
23
29
|
const ImageLinkBlock = ({
|
|
24
30
|
className = '',
|
|
25
31
|
data
|
|
26
32
|
}) => {
|
|
33
|
+
const theme = (0, _styledComponents.useTheme)();
|
|
27
34
|
const {
|
|
28
35
|
url,
|
|
29
36
|
rawContentState
|
|
30
37
|
} = data;
|
|
38
|
+
const [isDesktopAndAbove, setIsDesktopAndAbove] = (0, _react.useState)(false);
|
|
39
|
+
const handleWindowResize = (0, _debounce.default)(() => {
|
|
40
|
+
setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
|
|
41
|
+
}, _constants.DEBOUNCE_THRESHOLD);
|
|
42
|
+
(0, _react.useEffect)(() => {
|
|
43
|
+
setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
|
|
44
|
+
window.addEventListener('resize', handleWindowResize);
|
|
45
|
+
return () => {
|
|
46
|
+
window.removeEventListener('resize', handleWindowResize);
|
|
47
|
+
};
|
|
48
|
+
}, []);
|
|
31
49
|
const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
|
|
32
50
|
const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
|
|
33
51
|
const blockRenderMap = _index.default.imageLink;
|
|
52
|
+
const commonImgProps = {
|
|
53
|
+
src: url ?? fallbackImg
|
|
54
|
+
};
|
|
34
55
|
const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
|
|
35
56
|
className: className
|
|
36
|
-
}, /*#__PURE__*/_react.default.createElement(Img, {
|
|
37
|
-
|
|
38
|
-
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement(Img, _extends({}, commonImgProps, {
|
|
58
|
+
$isDesktopAndAbove: isDesktopAndAbove,
|
|
59
|
+
onClick: () => {
|
|
60
|
+
var _theme$handleImgModal;
|
|
61
|
+
return isDesktopAndAbove && (theme === null || theme === void 0 || (_theme$handleImgModal = theme.handleImgModalOpen) === null || _theme$handleImgModal === void 0 ? void 0 : _theme$handleImgModal.call(theme, commonImgProps));
|
|
62
|
+
}
|
|
63
|
+
})), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
|
|
39
64
|
blockRenderMap: blockRenderMap,
|
|
40
65
|
editorState: editorState,
|
|
41
66
|
readOnly: true
|
|
@@ -99,28 +99,12 @@ const SlidesSection = _styledComponents.default.div`
|
|
|
99
99
|
flex-basis: 100%;
|
|
100
100
|
overflow: hidden;
|
|
101
101
|
position: relative;
|
|
102
|
+
width: 100%;
|
|
103
|
+
aspect-ratio: 3 / 2;
|
|
102
104
|
|
|
103
105
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
104
106
|
order: 2;
|
|
105
107
|
}
|
|
106
|
-
|
|
107
|
-
${_mediaQuery.mediaQuery.smallOnly} {
|
|
108
|
-
padding-bottom: calc(
|
|
109
|
-
${mockup.mobile.slide.height} / ${mockup.mobile.container.width}*100%
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
${_mediaQuery.mediaQuery.mediumOnly} {
|
|
114
|
-
padding-bottom: calc(
|
|
115
|
-
${mockup.desktop.slide.height} / ${mockup.desktop.container.width}*100%
|
|
116
|
-
);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
${_mediaQuery.mediaQuery.largeOnly} {
|
|
120
|
-
padding-bottom: calc(
|
|
121
|
-
${mockup.hd.slide.height} / ${mockup.hd.container.width}*100%
|
|
122
|
-
);
|
|
123
|
-
}
|
|
124
108
|
`;
|
|
125
109
|
const PrevNextSection = _styledComponents.default.div`
|
|
126
110
|
margin-top: 20px;
|
|
@@ -328,42 +312,6 @@ const SlideFlexItem = _styledComponents.default.div`
|
|
|
328
312
|
padding-right: ${mockup.hd.slide.paddingRight}px;
|
|
329
313
|
}
|
|
330
314
|
`;
|
|
331
|
-
const SlideMask = _styledComponents.default.div`
|
|
332
|
-
position: absolute;
|
|
333
|
-
top: 0;
|
|
334
|
-
height: 100%;
|
|
335
|
-
opacity: 0.55;
|
|
336
|
-
`;
|
|
337
|
-
const LeftSlideMask = (0, _styledComponents.default)(SlideMask)`
|
|
338
|
-
left: 0;
|
|
339
|
-
|
|
340
|
-
${_mediaQuery.mediaQuery.smallOnly} {
|
|
341
|
-
width: ${getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
${_mediaQuery.mediaQuery.mediumOnly} {
|
|
345
|
-
width: ${getLeftMaskWidth(mockup.desktop)}px;
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
${_mediaQuery.mediaQuery.largeOnly} {
|
|
349
|
-
width: ${getLeftMaskWidth(mockup.hd)}px;
|
|
350
|
-
}
|
|
351
|
-
`;
|
|
352
|
-
const RightSlideMask = (0, _styledComponents.default)(SlideMask)`
|
|
353
|
-
right: 0;
|
|
354
|
-
|
|
355
|
-
${_mediaQuery.mediaQuery.smallOnly} {
|
|
356
|
-
width: ${getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
${_mediaQuery.mediaQuery.mediumOnly} {
|
|
360
|
-
width: ${getRightMaskWidth(mockup.desktop)}px;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
${_mediaQuery.mediaQuery.largeOnly} {
|
|
364
|
-
width: ${getRightMaskWidth(mockup.hd)}px;
|
|
365
|
-
}
|
|
366
|
-
`;
|
|
367
315
|
const SlideshowFlexBox = _styledComponents.default.div`
|
|
368
316
|
${PrevButton} {
|
|
369
317
|
border-color: #d8d8d8;
|
|
@@ -379,11 +327,6 @@ const SlideshowFlexBox = _styledComponents.default.div`
|
|
|
379
327
|
${ImageNumber} {
|
|
380
328
|
color: #fff;
|
|
381
329
|
}
|
|
382
|
-
${SlideMask} {
|
|
383
|
-
background-color: ${({
|
|
384
|
-
theme
|
|
385
|
-
}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
|
|
386
|
-
}
|
|
387
330
|
|
|
388
331
|
width: 100%;
|
|
389
332
|
margin: 0 auto;
|
|
@@ -429,22 +372,6 @@ function getContainerWidth(deviceMockup) {
|
|
|
429
372
|
function getSlideWidth(deviceMockup) {
|
|
430
373
|
return deviceMockup.slide.width + deviceMockup.slide.paddingRight;
|
|
431
374
|
}
|
|
432
|
-
|
|
433
|
-
/**
|
|
434
|
-
* @param {DeviceMockup} deviceMockup
|
|
435
|
-
* @return {number}
|
|
436
|
-
*/
|
|
437
|
-
function getLeftMaskWidth(deviceMockup) {
|
|
438
|
-
return deviceMockup.offset.left - deviceMockup.slide.paddingRight; // px
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
/**
|
|
442
|
-
* @param {DeviceMockup} deviceMockup
|
|
443
|
-
* @return {number}
|
|
444
|
-
*/
|
|
445
|
-
function getRightMaskWidth(deviceMockup) {
|
|
446
|
-
return deviceMockup.container.width - deviceMockup.offset.left - getSlideWidth(deviceMockup); // px
|
|
447
|
-
}
|
|
448
375
|
function SlideshowBlock({
|
|
449
376
|
className = '',
|
|
450
377
|
data
|
|
@@ -494,15 +421,18 @@ function SlideshowBlock({
|
|
|
494
421
|
// hence, we append `index` on the key
|
|
495
422
|
_react.default.createElement(SlideFlexItem, {
|
|
496
423
|
key: `slide_${img.id}_${index}`
|
|
424
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
425
|
+
className: "w-full h-full relative overflow-hidden"
|
|
497
426
|
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
498
427
|
srcSet: imgSrcSetArr.join(','),
|
|
499
428
|
src: imgSrc,
|
|
500
429
|
style: {
|
|
430
|
+
display: 'block',
|
|
501
431
|
objectFit,
|
|
502
|
-
|
|
432
|
+
height: '100%'
|
|
503
433
|
},
|
|
504
434
|
sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
|
|
505
|
-
}))
|
|
435
|
+
})))
|
|
506
436
|
);
|
|
507
437
|
});
|
|
508
438
|
}, [images]);
|
|
@@ -543,7 +473,7 @@ function SlideshowBlock({
|
|
|
543
473
|
translateXUint: translateXUnit,
|
|
544
474
|
duration: duration,
|
|
545
475
|
isSliding: isSliding
|
|
546
|
-
}, slides)
|
|
476
|
+
}, slides)), /*#__PURE__*/_react.default.createElement(PrevNextSection, null, /*#__PURE__*/_react.default.createElement(PrevButton, {
|
|
547
477
|
onClick: isSliding ? undefined : slideToPrev
|
|
548
478
|
}, /*#__PURE__*/_react.default.createElement(PreArrowSvg, null)), /*#__PURE__*/_react.default.createElement(NextButton, {
|
|
549
479
|
onClick: isSliding ? undefined : slideToNext
|
package/lib/draft-renderer.js
CHANGED
|
@@ -28,6 +28,7 @@ const DraftRenderer = ({
|
|
|
28
28
|
rawContentState,
|
|
29
29
|
themeColor = _index2.ThemeColorEnum.RED,
|
|
30
30
|
fontSizeLevel = FontSizeLevel.NORMAL,
|
|
31
|
+
handleImgModalOpen = undefined,
|
|
31
32
|
initiallyScrollTo = '',
|
|
32
33
|
offsetTop = 0
|
|
33
34
|
}) => {
|
|
@@ -47,7 +48,8 @@ const DraftRenderer = ({
|
|
|
47
48
|
theme: {
|
|
48
49
|
themeColor,
|
|
49
50
|
fontSizeLevel,
|
|
50
|
-
offsetTop
|
|
51
|
+
offsetTop,
|
|
52
|
+
handleImgModalOpen
|
|
51
53
|
}
|
|
52
54
|
}, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
|
|
53
55
|
editorState: editorState,
|
package/lib/utils/constants.js
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.colorHex = void 0;
|
|
6
|
+
exports.colorHex = exports.DEBOUNCE_THRESHOLD = void 0;
|
|
7
7
|
const colorHex = exports.colorHex = {
|
|
8
8
|
blue: '#27B5F7',
|
|
9
9
|
red: '#F76977',
|
|
10
10
|
yellow: '#F8C341'
|
|
11
|
-
};
|
|
11
|
+
};
|
|
12
|
+
const DEBOUNCE_THRESHOLD = exports.DEBOUNCE_THRESHOLD = 100;
|
package/lib/utils/media-query.js
CHANGED
|
@@ -7,6 +7,8 @@ exports.mediaQuery = exports.breakpoints = void 0;
|
|
|
7
7
|
const breakpoints = exports.breakpoints = {
|
|
8
8
|
small: 320,
|
|
9
9
|
medium: 760,
|
|
10
|
+
desktop: 1024,
|
|
11
|
+
// TODO: unify breakpoints in twreporter/kids reporter
|
|
10
12
|
large: 1440
|
|
11
13
|
};
|
|
12
14
|
const mediaQuery = exports.mediaQuery = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kids-reporter/draft-renderer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"babel-loader": "^8.2.5",
|
|
26
26
|
"body-scroll-lock": "3.1.5",
|
|
27
27
|
"html-webpack-plugin": "^5.5.0",
|
|
28
|
+
"lodash": "^4.17.21",
|
|
28
29
|
"webpack": "^5.72.1",
|
|
29
30
|
"webpack-cli": "^4.9.2"
|
|
30
31
|
},
|