@elice/material-quiz 1.240718.0-trasncript.2 → 1.240718.2

package/cjs/components/material-quiz/MaterialQuizInfo.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
@@ -16,183 +14,183 @@ var QuestionBox = require('../shared/QuestionBox.js');
 var mergeRefs = require('../shared/utils/mergeRefs.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var _templateObject;
 //
 //
 //
-var StyledMarkdownSSR = styled__default.default(markdown.MarkdownSSR).withConfig({
+const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
   componentId: "sc-1s7jbf9-0"
 })([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}", ""], wysiwyg.EliceWysiwygEditorTheme.resetMarkdownSSR);
 //
 //
 //
-var IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
-var ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
-var MarkdownContainer = material.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n\n    span.", " {\n      cursor: pointer;\n\n      position: absolute;\n      top: 0;\n      right: ", ";\n\n      width: 2rem;\n      aspect-ratio: 1;\n      background-color: ", ";\n      margin: 0.5rem;\n      border-radius: 50%;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), IMAGE_CONTAINER_CLASSNAME, ZOOM_ICON_CLASSNAME, function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? '0!important' : '0';
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.common.white;
-});
-var MaterialQuizInfo = function MaterialQuizInfo(_ref3) {
-  var _ref3$renderWithBox = _ref3.renderWithBox,
-    renderWithBox = _ref3$renderWithBox === void 0 ? true : _ref3$renderWithBox;
-  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
-    materialQuiz = _useMaterialQuizState.materialQuiz,
-    vertical = _useMaterialQuizState.vertical;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isRenderFinish = _useState2[0],
-    setIsRenderFinish = _useState2[1];
-  var containerRef = React.useRef(null);
-  var _useMeasure = reactUse.useMeasure(),
-    _useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
-    markdownMeasueRef = _useMeasure2[0],
-    width = _useMeasure2[1].width;
-  var ref = mergeRefs.mergeRefs(containerRef, markdownMeasueRef);
-  var _useState3 = React.useState(''),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    zoomImageUrl = _useState4[0],
-    setZoomImageUrl = _useState4[1];
-  React.useEffect(function () {
+const IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
+const ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
+const MarkdownContainer = material.styled('div')`
+  .${IMAGE_CONTAINER_CLASSNAME} {
+    position: relative;
+
+    span.${ZOOM_ICON_CLASSNAME} {
+      cursor: pointer;
+
+      position: absolute;
+      top: 0;
+      right: ${({
+  vertical
+}) => vertical ? '0!important' : '0'};
+
+      width: 2rem;
+      aspect-ratio: 1;
+      background-color: ${({
+  theme
+}) => theme.palette.inverse.main};
+      margin: 0.5rem;
+      border-radius: 50%;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+`;
+const MaterialQuizInfo = ({
+  renderWithBox = true
+}) => {
+  const {
+    materialQuiz,
+    vertical
+  } = MaterialQuizContext.useMaterialQuizState();
+  const [isRenderFinish, setIsRenderFinish] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const [markdownMeasueRef, {
+    width
+  }] = reactUse.useMeasure();
+  const ref = mergeRefs.mergeRefs(containerRef, markdownMeasueRef);
+  const [zoomImageUrl, setZoomImageUrl] = React.useState('');
+  React.useEffect(() => {
     if (!(materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription) || !isRenderFinish || !containerRef.current) return;
     // append zoom icon for image html render by MarkdownSSR
-    containerRef.current.querySelectorAll('img').forEach(function (img) {
-      var parent = img.parentElement;
-      var zoomIconStr = "\n        <svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"white\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5.75 4.875H9.125C9.72266 4.875 10.25 5.40234 10.25 6C10.25 6.63281 9.72266 7.125 9.125 7.125H6.875V9.375C6.875 10.0078 6.34766 10.5 5.75 10.5C5.11719 10.5 4.625 10.0078 4.625 9.375V6C4.625 5.40234 5.11719 4.875 5.75 4.875ZM6.875 16.125V18.375H9.125C9.72266 18.375 10.25 18.9023 10.25 19.5C10.25 20.1328 9.72266 20.625 9.125 20.625H5.75C5.11719 20.625 4.625 20.1328 4.625 19.5V16.125C4.625 15.5273 5.11719 15 5.75 15C6.34766 15 6.875 15.5273 6.875 16.125ZM15.875 4.875H19.25C19.8477 4.875 20.375 5.40234 20.375 6V9.375C20.375 10.0078 19.8477 10.5 19.25 10.5C18.6172 10.5 18.125 10.0078 18.125 9.375V7.125H15.875C15.2422 7.125 14.75 6.63281 14.75 6C14.75 5.40234 15.2422 4.875 15.875 4.875ZM20.375 16.125V19.5C20.375 20.1328 19.8477 20.625 19.25 20.625H15.875C15.2422 20.625 14.75 20.1328 14.75 19.5C14.75 18.9023 15.2422 18.375 15.875 18.375H18.125V16.125C18.125 15.5273 18.6172 15 19.25 15C19.8477 15 20.375 15.5273 20.375 16.125Z\" fill=\"#D6DAE1\"/>\n        </svg>\n        ";
+    containerRef.current.querySelectorAll('img').forEach(img => {
+      const parent = img.parentElement;
+      const zoomIconStr = `
+        <svg width="25" height="25" viewBox="0 0 25 25" fill="white" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.75 4.875H9.125C9.72266 4.875 10.25 5.40234 10.25 6C10.25 6.63281 9.72266 7.125 9.125 7.125H6.875V9.375C6.875 10.0078 6.34766 10.5 5.75 10.5C5.11719 10.5 4.625 10.0078 4.625 9.375V6C4.625 5.40234 5.11719 4.875 5.75 4.875ZM6.875 16.125V18.375H9.125C9.72266 18.375 10.25 18.9023 10.25 19.5C10.25 20.1328 9.72266 20.625 9.125 20.625H5.75C5.11719 20.625 4.625 20.1328 4.625 19.5V16.125C4.625 15.5273 5.11719 15 5.75 15C6.34766 15 6.875 15.5273 6.875 16.125ZM15.875 4.875H19.25C19.8477 4.875 20.375 5.40234 20.375 6V9.375C20.375 10.0078 19.8477 10.5 19.25 10.5C18.6172 10.5 18.125 10.0078 18.125 9.375V7.125H15.875C15.2422 7.125 14.75 6.63281 14.75 6C14.75 5.40234 15.2422 4.875 15.875 4.875ZM20.375 16.125V19.5C20.375 20.1328 19.8477 20.625 19.25 20.625H15.875C15.2422 20.625 14.75 20.1328 14.75 19.5C14.75 18.9023 15.2422 18.375 15.875 18.375H18.125V16.125C18.125 15.5273 18.6172 15 19.25 15C19.8477 15 20.375 15.5273 20.375 16.125Z" fill="#D6DAE1"/>
+        </svg>
+        `;
       if (parent) {
-        var imageRect = img.getBoundingClientRect();
-        var parentRect = parent.getBoundingClientRect();
-        var zoomIcons = parent.querySelectorAll(".".concat(ZOOM_ICON_CLASSNAME));
-        var totalImages = Array.from(parent.querySelectorAll("img"));
-        var idx = totalImages.findIndex(function (item) {
-          return item === img;
-        });
+        const imageRect = img.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+        const zoomIcons = parent.querySelectorAll(`.${ZOOM_ICON_CLASSNAME}`);
+        const totalImages = Array.from(parent.querySelectorAll(`img`));
+        const idx = totalImages.findIndex(item => item === img);
         // restyle the zoom position when chaging the width instead of recreate it
         if (zoomIcons.length === totalImages.length && idx !== -1) {
-          zoomIcons[idx].style.top = "".concat(imageRect.top - parentRect.top, "px");
-          zoomIcons[idx].style.right = "".concat(parentRect.right - imageRect.right, "px");
+          zoomIcons[idx].style.top = `${imageRect.top - parentRect.top}px`;
+          zoomIcons[idx].style.right = `${parentRect.right - imageRect.right}px`;
           return;
         }
         parent.classList.add(IMAGE_CONTAINER_CLASSNAME);
         parent.style.position = 'relative';
-        var span = document.createElement('span');
+        const span = document.createElement('span');
         span.innerHTML = zoomIconStr;
         span.classList.add(ZOOM_ICON_CLASSNAME);
-        span.style.top = "".concat(imageRect.top - parentRect.top, "px");
-        span.style.right = "".concat(parentRect.right - imageRect.right, "px");
-        span.onclick = function () {
+        span.style.top = `${imageRect.top - parentRect.top}px`;
+        span.style.right = `${parentRect.right - imageRect.right}px`;
+        span.onclick = () => {
           setZoomImageUrl(img.src);
         };
         parent.appendChild(span);
       }
     });
   }, [materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription, isRenderFinish, width]);
-  var onCloseImageModal = function onCloseImageModal() {
+  const onCloseImageModal = () => {
     setZoomImageUrl('');
   };
-  var _renderQuiz = function _renderQuiz() {
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [materialQuiz ? jsxRuntime.jsx(MarkdownContainer, {
-        ref: ref,
-        vertical: vertical,
-        children: jsxRuntime.jsx(StyledMarkdownSSR, {
-          onRender: function onRender() {
-            // set timeout for waiting time to the image can render
-            setTimeout(function () {
-              setIsRenderFinish(true);
-            }, 300);
-          },
-          children: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription,
-          dark: true,
-          paddingx: 0,
-          paddingy: 0
-        })
-      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(blocks.Vspace, {
-          height: 1
-        }), jsxRuntime.jsx(blocks.Shimmer, {
-          dark: true,
-          borderRadius: '4px',
-          width: "80%",
-          height: '40px'
-        }), jsxRuntime.jsx(blocks.Vspace, {
-          height: 1
-        }), jsxRuntime.jsx(blocks.Shimmer, {
-          dark: true,
-          borderRadius: '4px',
-          width: "100%",
-          height: '40px'
-        }), jsxRuntime.jsx(blocks.Vspace, {
-          height: 1
-        }), jsxRuntime.jsx(blocks.Shimmer, {
-          dark: true,
-          borderRadius: '4px',
-          width: "100%",
-          height: '40px'
-        }), jsxRuntime.jsx(blocks.Vspace, {
-          height: 1
-        }), jsxRuntime.jsx(blocks.Shimmer, {
-          dark: true,
-          borderRadius: '4px',
-          width: "100%",
-          height: '40px'
-        })]
-      }), jsxRuntime.jsx(material.Modal, {
-        open: !!zoomImageUrl,
-        sx: {
-          border: 'none',
-          outline: '0',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
-        },
-        children: jsxRuntime.jsxs(material.Box, {
-          width: "70%",
-          height: "70%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "relative",
-          sx: {
-            outline: 'none'
-          },
-          children: [jsxRuntime.jsx("img", {
-            src: zoomImageUrl,
-            "aria-hidden": true,
-            alt: "zoom image",
-            style: {
-              maxWidth: '100%',
-              maxHeight: '100%'
-            }
-          }), jsxRuntime.jsx(blocks.IconButton, {
-            icon: icons.eilMathsignMultiplyBasic,
-            role: "white",
-            size: "micro",
-            border: false,
-            transparent: true,
-            style: {
-              position: 'absolute',
-              right: '-10%',
-              top: '-10%'
-            },
-            onClick: onCloseImageModal
-          })]
-        })
-      })]
-    });
+  const _renderQuiz = () => {
+    return React.createElement(React.Fragment, null, materialQuiz ? React.createElement(MarkdownContainer, {
+      ref: ref,
+      vertical: vertical
+    }, React.createElement(StyledMarkdownSSR, {
+      onRender: () => {
+        // set timeout for waiting time to the image can render
+        setTimeout(() => {
+          setIsRenderFinish(true);
+        }, 300);
+      },
+      children: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription,
+      dark: true,
+      paddingx: 0,
+      paddingy: 0
+    })) : React.createElement(React.Fragment, null, React.createElement(blocks.Vspace, {
+      height: 1
+    }), React.createElement(blocks.Shimmer, {
+      dark: true,
+      borderRadius: '4px',
+      width: "80%",
+      height: '40px'
+    }), React.createElement(blocks.Vspace, {
+      height: 1
+    }), React.createElement(blocks.Shimmer, {
+      dark: true,
+      borderRadius: '4px',
+      width: "100%",
+      height: '40px'
+    }), React.createElement(blocks.Vspace, {
+      height: 1
+    }), React.createElement(blocks.Shimmer, {
+      dark: true,
+      borderRadius: '4px',
+      width: "100%",
+      height: '40px'
+    }), React.createElement(blocks.Vspace, {
+      height: 1
+    }), React.createElement(blocks.Shimmer, {
+      dark: true,
+      borderRadius: '4px',
+      width: "100%",
+      height: '40px'
+    })), React.createElement(material.Modal, {
+      open: !!zoomImageUrl,
+      sx: {
+        border: 'none',
+        outline: '0',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, React.createElement(material.Box, {
+      width: "70%",
+      height: "70%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      sx: {
+        outline: 'none'
+      }
+    }, React.createElement("img", {
+      src: zoomImageUrl,
+      "aria-hidden": true,
+      alt: "zoom image",
+      style: {
+        maxWidth: '100%',
+        maxHeight: '100%'
+      }
+    }), React.createElement(blocks.IconButton, {
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "white",
+      size: "micro",
+      border: false,
+      transparent: true,
+      style: {
+        position: 'absolute',
+        right: '-10%',
+        top: '-10%'
+      },
+      onClick: onCloseImageModal
+    }))));
   };
-  if (renderWithBox) return jsxRuntime.jsx(QuestionBox.default, {
-    children: _renderQuiz()
-  });
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: _renderQuiz()
-  });
+  if (renderWithBox) return React.createElement(QuestionBox.default, null, _renderQuiz());
+  return React.createElement(React.Fragment, null, _renderQuiz());
 };
 
 exports.default = MaterialQuizInfo;