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

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

@@ -1,4 +1,6 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { taggedTemplateLiteral as _taggedTemplateLiteral, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { Vspace, Shimmer, IconButton } from '@elice/blocks';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
@@ -10,183 +12,179 @@ import QuestionBox from '../shared/QuestionBox.js';
 import { mergeRefs } from '../shared/utils/mergeRefs.js';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 
+var _templateObject;
 //
 //
 //
-const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
+var StyledMarkdownSSR = styled(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);}}", ""], EliceWysiwygEditorTheme.resetMarkdownSSR);
 //
 //
 //
-const IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
-const ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
-const MarkdownContainer = styled$1('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
-  } = useMaterialQuizState();
-  const [isRenderFinish, setIsRenderFinish] = useState(false);
-  const containerRef = useRef(null);
-  const [markdownMeasueRef, {
-    width
-  }] = useMeasure();
-  const ref = mergeRefs(containerRef, markdownMeasueRef);
-  const [zoomImageUrl, setZoomImageUrl] = useState('');
-  useEffect(() => {
+var IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
+var ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
+var MarkdownContainer = styled$1('div')(_templateObject || (_templateObject = _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 = useMaterialQuizState(),
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    vertical = _useMaterialQuizState.vertical;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isRenderFinish = _useState2[0],
+    setIsRenderFinish = _useState2[1];
+  var containerRef = useRef(null);
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 2),
+    markdownMeasueRef = _useMeasure2[0],
+    width = _useMeasure2[1].width;
+  var ref = mergeRefs(containerRef, markdownMeasueRef);
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    zoomImageUrl = _useState4[0],
+    setZoomImageUrl = _useState4[1];
+  useEffect(function () {
     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(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>
-        `;
+    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        ";
       if (parent) {
-        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);
+        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;
+        });
         // restyle the zoom position when chaging the width instead of recreate it
         if (zoomIcons.length === totalImages.length && idx !== -1) {
-          zoomIcons[idx].style.top = `${imageRect.top - parentRect.top}px`;
-          zoomIcons[idx].style.right = `${parentRect.right - imageRect.right}px`;
+          zoomIcons[idx].style.top = "".concat(imageRect.top - parentRect.top, "px");
+          zoomIcons[idx].style.right = "".concat(parentRect.right - imageRect.right, "px");
           return;
         }
         parent.classList.add(IMAGE_CONTAINER_CLASSNAME);
         parent.style.position = 'relative';
-        const span = document.createElement('span');
+        var span = document.createElement('span');
         span.innerHTML = zoomIconStr;
         span.classList.add(ZOOM_ICON_CLASSNAME);
-        span.style.top = `${imageRect.top - parentRect.top}px`;
-        span.style.right = `${parentRect.right - imageRect.right}px`;
-        span.onclick = () => {
+        span.style.top = "".concat(imageRect.top - parentRect.top, "px");
+        span.style.right = "".concat(parentRect.right - imageRect.right, "px");
+        span.onclick = function () {
           setZoomImageUrl(img.src);
         };
         parent.appendChild(span);
       }
     });
   }, [materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription, isRenderFinish, width]);
-  const onCloseImageModal = () => {
+  var onCloseImageModal = function onCloseImageModal() {
     setZoomImageUrl('');
   };
-  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(Vspace, {
-      height: 1
-    }), React.createElement(Shimmer, {
-      dark: true,
-      borderRadius: '4px',
-      width: "80%",
-      height: '40px'
-    }), React.createElement(Vspace, {
-      height: 1
-    }), React.createElement(Shimmer, {
-      dark: true,
-      borderRadius: '4px',
-      width: "100%",
-      height: '40px'
-    }), React.createElement(Vspace, {
-      height: 1
-    }), React.createElement(Shimmer, {
-      dark: true,
-      borderRadius: '4px',
-      width: "100%",
-      height: '40px'
-    }), React.createElement(Vspace, {
-      height: 1
-    }), React.createElement(Shimmer, {
-      dark: true,
-      borderRadius: '4px',
-      width: "100%",
-      height: '40px'
-    })), React.createElement(Modal, {
-      open: !!zoomImageUrl,
-      sx: {
-        border: 'none',
-        outline: '0',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }
-    }, React.createElement(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(IconButton, {
-      icon: eilMathsignMultiplyBasic,
-      role: "white",
-      size: "micro",
-      border: false,
-      transparent: true,
-      style: {
-        position: 'absolute',
-        right: '-10%',
-        top: '-10%'
-      },
-      onClick: onCloseImageModal
-    }))));
+  var _renderQuiz = function _renderQuiz() {
+    return jsxs(Fragment, {
+      children: [materialQuiz ? jsx(MarkdownContainer, {
+        ref: ref,
+        vertical: vertical,
+        children: 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
+        })
+      }) : jsxs(Fragment, {
+        children: [jsx(Vspace, {
+          height: 1
+        }), jsx(Shimmer, {
+          dark: true,
+          borderRadius: '4px',
+          width: "80%",
+          height: '40px'
+        }), jsx(Vspace, {
+          height: 1
+        }), jsx(Shimmer, {
+          dark: true,
+          borderRadius: '4px',
+          width: "100%",
+          height: '40px'
+        }), jsx(Vspace, {
+          height: 1
+        }), jsx(Shimmer, {
+          dark: true,
+          borderRadius: '4px',
+          width: "100%",
+          height: '40px'
+        }), jsx(Vspace, {
+          height: 1
+        }), jsx(Shimmer, {
+          dark: true,
+          borderRadius: '4px',
+          width: "100%",
+          height: '40px'
+        })]
+      }), jsx(Modal, {
+        open: !!zoomImageUrl,
+        sx: {
+          border: 'none',
+          outline: '0',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        },
+        children: jsxs(Box, {
+          width: "70%",
+          height: "70%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          sx: {
+            outline: 'none'
+          },
+          children: [jsx("img", {
+            src: zoomImageUrl,
+            "aria-hidden": true,
+            alt: "zoom image",
+            style: {
+              maxWidth: '100%',
+              maxHeight: '100%'
+            }
+          }), jsx(IconButton, {
+            icon: eilMathsignMultiplyBasic,
+            role: "white",
+            size: "micro",
+            border: false,
+            transparent: true,
+            style: {
+              position: 'absolute',
+              right: '-10%',
+              top: '-10%'
+            },
+            onClick: onCloseImageModal
+          })]
+        })
+      })]
+    });
   };
-  if (renderWithBox) return React.createElement(QuestionBox, null, _renderQuiz());
-  return React.createElement(React.Fragment, null, _renderQuiz());
+  if (renderWithBox) return jsx(QuestionBox, {
+    children: _renderQuiz()
+  });
+  return jsx(Fragment, {
+    children: _renderQuiz()
+  });
 };
 
 export { MaterialQuizInfo as default };