@kids-reporter/draft-renderer 1.0.11 → 1.0.12

package/lib/block-renderers/image-block.js

@@ -7,10 +7,15 @@ exports.ImageBlock = ImageBlock;
 exports.ImageInArticleBody = ImageInArticleBody;
 exports.ImageInInfoBox = ImageInInfoBox;
 exports.InfoBoxContainer = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _mediaQuery = require("../utils/media-query");
+var _constants = require("../utils/constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+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); }
 const Figure = _styledComponents.default.figure`
   width: 100%;
 `;
@@ -31,16 +36,29 @@ const FigureCaption = _styledComponents.default.figcaption`
 const Img = _styledComponents.default.img`
   width: 100%;
   object-fit: contain;
+  ${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
 `;
 function ImageBlock({
   className = '',
   data
 }) {
+  const theme = (0, _styledComponents.useTheme)();
   const {
     desc,
     imageFile,
     resized
   } = data || {};
+  const [isDesktopAndAbove, setIsDesktopAndAbove] = (0, _react.useState)(false);
+  const handleWindowResize = (0, _debounce.default)(() => {
+    setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
+  }, _constants.DEBOUNCE_THRESHOLD);
+  (0, _react.useEffect)(() => {
+    setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
   const aspectRatio = imageFile !== null && imageFile !== void 0 && imageFile.width && imageFile !== null && imageFile !== void 0 && imageFile.height ? `${imageFile.width}/${imageFile.height}` : '16/9';
   const imgSrcSetArr = [];
   if (resized !== null && resized !== void 0 && resized.medium) {
@@ -49,17 +67,25 @@ function ImageBlock({
   if (resized !== null && resized !== void 0 && resized.large) {
     imgSrcSetArr.push(`${resized.large} 1000w`);
   }
+  const commonImgProps = {
+    src: (resized === null || resized === void 0 ? void 0 : resized.original) ?? (resized === null || resized === void 0 ? void 0 : resized.medium),
+    sizes: '(min-width: 1200px) 1000px, 100vw',
+    srcSet: imgSrcSetArr.join(',')
+  };
   const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
     className: className
-  }, /*#__PURE__*/_react.default.createElement(Img, {
-    alt: desc,
-    src: (resized === null || resized === void 0 ? void 0 : resized.original) ?? (resized === null || resized === void 0 ? void 0 : resized.medium),
-    srcSet: imgSrcSetArr.join(','),
-    sizes: "(min-width: 1200px) 1000px, 100vw",
+  }, /*#__PURE__*/_react.default.createElement(Img, _extends({
+    alt: desc
+  }, commonImgProps, {
     style: {
       aspectRatio: aspectRatio
+    },
+    $isDesktopAndAbove: isDesktopAndAbove,
+    onClick: () => {
+      var _theme$handleImgModal;
+      return isDesktopAndAbove && (theme === null || theme === void 0 || (_theme$handleImgModal = theme.handleImgModalOpen) === null || _theme$handleImgModal === void 0 ? void 0 : _theme$handleImgModal.call(theme, commonImgProps));
     }
-  }), desc && /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
+  })), desc && /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
   return imgBlock;
 }
 const ArticleBodyContainer = _styledComponents.default.div`

package/lib/block-renderers/image-link.js

@@ -4,14 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageLinkInInfoBox = exports.ImageLinkInArticleBody = exports.ImageLinkBlock = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _draftJs = require("draft-js");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _imageBlock = require("./image-block");
 var _index = _interopRequireDefault(require("../block-render-maps/index"));
 var _index2 = require("../entity-decorators/index");
 var _mediaQuery = require("../utils/media-query");
+var _constants = require("../utils/constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+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); }
 const fallbackImg = '/assets/images/image_placeholder.png';
 const Figure = _styledComponents.default.figure`
   width: 100%;
@@ -19,23 +24,43 @@ const Figure = _styledComponents.default.figure`
 const Img = _styledComponents.default.img`
   width: 100%;
   object-fit: contain;
+  ${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
 `;
 const ImageLinkBlock = ({
   className = '',
   data
 }) => {
+  const theme = (0, _styledComponents.useTheme)();
   const {
     url,
     rawContentState
   } = data;
+  const [isDesktopAndAbove, setIsDesktopAndAbove] = (0, _react.useState)(false);
+  const handleWindowResize = (0, _debounce.default)(() => {
+    setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
+  }, _constants.DEBOUNCE_THRESHOLD);
+  (0, _react.useEffect)(() => {
+    setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
   const blockRenderMap = _index.default.imageLink;
+  const commonImgProps = {
+    src: url ?? fallbackImg
+  };
   const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
     className: className
-  }, /*#__PURE__*/_react.default.createElement(Img, {
-    src: url ?? fallbackImg
-  }), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  }, /*#__PURE__*/_react.default.createElement(Img, _extends({}, commonImgProps, {
+    $isDesktopAndAbove: isDesktopAndAbove,
+    onClick: () => {
+      var _theme$handleImgModal;
+      return isDesktopAndAbove && (theme === null || theme === void 0 || (_theme$handleImgModal = theme.handleImgModalOpen) === null || _theme$handleImgModal === void 0 ? void 0 : _theme$handleImgModal.call(theme, commonImgProps));
+    }
+  })), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     blockRenderMap: blockRenderMap,
     editorState: editorState,
     readOnly: true

package/lib/draft-renderer.js

@@ -28,6 +28,7 @@ const DraftRenderer = ({
   rawContentState,
   themeColor = _index2.ThemeColorEnum.RED,
   fontSizeLevel = FontSizeLevel.NORMAL,
+  handleImgModalOpen = undefined,
   initiallyScrollTo = '',
   offsetTop = 0
 }) => {
@@ -47,7 +48,8 @@ const DraftRenderer = ({
     theme: {
       themeColor,
       fontSizeLevel,
-      offsetTop
+      offsetTop,
+      handleImgModalOpen
     }
   }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,

package/lib/utils/constants.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorHex = void 0;
+exports.colorHex = exports.DEBOUNCE_THRESHOLD = void 0;
 const colorHex = exports.colorHex = {
   blue: '#27B5F7',
   red: '#F76977',
   yellow: '#F8C341'
-};
+};
+const DEBOUNCE_THRESHOLD = exports.DEBOUNCE_THRESHOLD = 100;

package/lib/utils/media-query.js

@@ -7,6 +7,8 @@ exports.mediaQuery = exports.breakpoints = void 0;
 const breakpoints = exports.breakpoints = {
   small: 320,
   medium: 760,
+  desktop: 1024,
+  // TODO: unify breakpoints in twreporter/kids reporter
   large: 1440
 };
 const mediaQuery = exports.mediaQuery = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "babel-loader": "^8.2.5",
     "body-scroll-lock": "3.1.5",
     "html-webpack-plugin": "^5.5.0",
+    "lodash": "^4.17.21",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2"
   },