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

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

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { base } from '@elice/design-tokens';
@@ -13,123 +15,147 @@ import messageKo from './locales/ko.json.js';
 import MaterialQuizShimmer from './MaterialQuizShimmer.js';
 import MaterialQuizInfo from './MaterialQuizInfo.js';
 
-const eliceTheme = createEliceTheme({
+var eliceTheme = createEliceTheme({
   paletteMode: 'dark',
   paletteName: 'purple'
 });
-const AsyncMaterialQuizSelectMultiple = React.lazy(() => import('./MaterialQuizSelectMultiple.js'));
-const AsyncMaterialQuizSelectMultipleOrder = React.lazy(() => import('./MaterialQuizSelectMultipleOrder.js'));
-const AsyncMaterialQuizText = React.lazy(() => import('./MaterialQuizText.js'));
-const AsyncMaterialQuizSelectOne = React.lazy(() => import('./MaterialQuizSelectOne.js'));
-const AsyncMaterialQuizGroup = React.lazy(() => import('./material-quiz-group/index.js'));
+var AsyncMaterialQuizSelectMultiple = React.lazy(function () {
+  return import('./MaterialQuizSelectMultiple.js');
+});
+var AsyncMaterialQuizSelectMultipleOrder = React.lazy(function () {
+  return import('./MaterialQuizSelectMultipleOrder.js');
+});
+var AsyncMaterialQuizText = React.lazy(function () {
+  return import('./MaterialQuizText.js');
+});
+var AsyncMaterialQuizSelectOne = React.lazy(function () {
+  return import('./MaterialQuizSelectOne.js');
+});
+var AsyncMaterialQuizGroup = React.lazy(function () {
+  return import('./material-quiz-group/index.js');
+});
 // 746px
-const MAX_CONTENT_WIDTH = '46.625rem';
-const StyledMaterialQuizInfo = styled.div.withConfig({
+var MAX_CONTENT_WIDTH = '46.625rem';
+var StyledMaterialQuizInfo = styled.div.withConfig({
   componentId: "sc-1eyn8fb-0"
 })([""]);
-const StyledMaterialQuizContent = styled.div.withConfig({
+var StyledMaterialQuizContent = styled.div.withConfig({
   componentId: "sc-1eyn8fb-1"
-})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], ({
-  vertical
-}) => vertical ? 'unset' : 'auto');
-const LoadingContainer = styled.div.withConfig({
+})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], function (_ref) {
+  var vertical = _ref.vertical;
+  return vertical ? 'unset' : 'auto';
+});
+var LoadingContainer = styled.div.withConfig({
   componentId: "sc-1eyn8fb-2"
 })(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;max-width:none !important;background-color:", ";"], base.color.navy8);
-const StyledMaterialQuizWrapper = styled.div.withConfig({
+var StyledMaterialQuizWrapper = styled.div.withConfig({
   componentId: "sc-1eyn8fb-3"
-})(["-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;width:100%;height:100%;flex-direction:", ";position:relative;& > *{flex:", ";max-width:", ";}gap:1rem;", "{height:", ";overflow-y:", ";& > div{max-height:unset;}}"], ({
-  vertical
-}) => vertical ? 'column' : 'row', ({
-  vertical
-}) => vertical ? 'auto' : '1', ({
-  vertical,
-  isQuizGroupType,
-  isLongPassage
-}) => !isLongPassage && !vertical && !isQuizGroupType ? `${MAX_CONTENT_WIDTH}` : 'unset', StyledMaterialQuizInfo, ({
-  vertical
-}) => vertical ? 'auto' : '100%', ({
-  vertical
-}) => vertical ? 'intial' : 'auto');
-const MaterialQuiz = () => {
-  const {
-    materialQuiz,
-    vertical,
-    course,
-    isLongPassage,
-    isInitialLoading
-  } = useMaterialQuizState();
-  const {
-    setVertical
-  } = useMaterialQuizDispatch();
-  const [ref, {
-    width
-  }] = useMeasure();
-  const isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === enums.QuizOptionType.Group);
-  const isFetchingData = !materialQuiz || !course;
-  const isLoadingLayout = isFetchingData || isInitialLoading;
-  const isVisibleSideBySide = !vertical && isLongPassage;
-  const isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
-  React.useEffect(() => {
+})(["-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;width:100%;height:100%;flex-direction:", ";position:relative;& > *{flex:", ";max-width:", ";}gap:1rem;", "{height:", ";overflow-y:", ";& > div{max-height:unset;}}"], function (_ref2) {
+  var vertical = _ref2.vertical;
+  return vertical ? 'column' : 'row';
+}, function (_ref3) {
+  var vertical = _ref3.vertical;
+  return vertical ? 'auto' : '1';
+}, function (_ref4) {
+  var vertical = _ref4.vertical,
+    isQuizGroupType = _ref4.isQuizGroupType,
+    isLongPassage = _ref4.isLongPassage;
+  return !isLongPassage && !vertical && !isQuizGroupType ? "".concat(MAX_CONTENT_WIDTH) : 'unset';
+}, StyledMaterialQuizInfo, function (_ref5) {
+  var vertical = _ref5.vertical;
+  return vertical ? 'auto' : '100%';
+}, function (_ref6) {
+  var vertical = _ref6.vertical;
+  return vertical ? 'intial' : 'auto';
+});
+var MaterialQuiz = function MaterialQuiz() {
+  var _useMaterialQuizState = useMaterialQuizState(),
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    vertical = _useMaterialQuizState.vertical,
+    course = _useMaterialQuizState.course,
+    isLongPassage = _useMaterialQuizState.isLongPassage,
+    isInitialLoading = _useMaterialQuizState.isInitialLoading;
+  var _useMaterialQuizDispa = useMaterialQuizDispatch(),
+    setVertical = _useMaterialQuizDispa.setVertical;
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 2),
+    ref = _useMeasure2[0],
+    width = _useMeasure2[1].width;
+  var isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === enums.QuizOptionType.Group);
+  var isFetchingData = !materialQuiz || !course;
+  var isLoadingLayout = isFetchingData || isInitialLoading;
+  var isVisibleSideBySide = !vertical && isLongPassage;
+  var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
+  React.useEffect(function () {
     if (width > 0) {
       setVertical(width <= base.screen.medium);
     }
   }, [width, setVertical]);
-  const renderQuestionOption = () => {
+  var renderQuestionOption = function renderQuestionOption() {
     if (isFetchingData) {
       return null;
     }
     switch (materialQuiz.optionType) {
       case enums.QuizOptionType.SelectOne:
-        return React.createElement(AsyncMaterialQuizSelectOne, {
+        return jsx(AsyncMaterialQuizSelectOne, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.SelectMultiple:
-        return React.createElement(AsyncMaterialQuizSelectMultiple, {
+        return jsx(AsyncMaterialQuizSelectMultiple, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.Text:
-        return React.createElement(AsyncMaterialQuizText, {
+        return jsx(AsyncMaterialQuizText, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.SelectMultipleOrder:
-        return React.createElement(AsyncMaterialQuizSelectMultipleOrder, {
+        return jsx(AsyncMaterialQuizSelectMultipleOrder, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.Group:
-        return React.createElement(AsyncMaterialQuizGroup, null);
+        return jsx(AsyncMaterialQuizGroup, {});
     }
   };
-  return React.createElement(React.Suspense, {
-    fallback: null
-  }, React.createElement(StyledMaterialQuizWrapper, {
-    ref: ref,
-    vertical: vertical,
-    isQuizGroupType: isQuizGroupType,
-    isLongPassage: isLongPassage
-  }, isLoadingLayout && React.createElement(LoadingContainer, null, React.createElement(MaterialQuizShimmer, null)), isVisibleSideBySide && React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo, null)), React.createElement(StyledMaterialQuizContent, {
-    id: MATERIAL_QUIZ_CONTAINER_ID,
-    vertical: vertical
-  }, renderQuestionOption())));
+  return jsx(React.Suspense, {
+    fallback: null,
+    children: jsxs(StyledMaterialQuizWrapper, {
+      ref: ref,
+      vertical: vertical,
+      isQuizGroupType: isQuizGroupType,
+      isLongPassage: isLongPassage,
+      children: [isLoadingLayout && jsx(LoadingContainer, {
+        children: jsx(MaterialQuizShimmer, {})
+      }), isVisibleSideBySide && jsx(StyledMaterialQuizInfo, {
+        children: jsx(MaterialQuizInfo, {})
+      }), jsx(StyledMaterialQuizContent, {
+        id: MATERIAL_QUIZ_CONTAINER_ID,
+        vertical: vertical,
+        children: renderQuestionOption()
+      })]
+    })
+  });
 };
-const MaterialQuizContainer = ({
-  materialQuizId,
-  userId,
-  onDirty,
-  onSubmit,
-  onNext,
-  __intl
-}) => {
-  return React.createElement(RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(ThemeProvider, {
-    theme: eliceTheme
-  }, React.createElement(MaterialQuizProvider, {
-    materialQuizId: materialQuizId,
-    userId: userId,
-    onDirty: onDirty,
-    onSubmit: onSubmit,
-    onNext: onNext
-  }, React.createElement(MaterialQuiz, null))));
+var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
+  var materialQuizId = _ref7.materialQuizId,
+    userId = _ref7.userId,
+    onDirty = _ref7.onDirty,
+    onSubmit = _ref7.onSubmit,
+    onNext = _ref7.onNext,
+    __intl = _ref7.__intl;
+  return jsx(RawEliceIntlProvider, {
+    value: __intl,
+    children: jsx(ThemeProvider, {
+      theme: eliceTheme,
+      children: jsx(MaterialQuizProvider, {
+        materialQuizId: materialQuizId,
+        userId: userId,
+        onDirty: onDirty,
+        onSubmit: onSubmit,
+        onNext: onNext,
+        children: jsx(MaterialQuiz, {})
+      })
+    })
+  });
 };
 var MaterialQuiz$1 = new IntlComponentBuilder(MaterialQuizContainer).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { Accordion, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
@@ -8,42 +8,45 @@ import { EliceWysiwygEditorTheme } from '@elice/wysiwyg';
 import styled from 'styled-components';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 
-const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
+var StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
   componentId: "sc-18kg5i5-0"
 })(["p{margin:0 !important;}", ""], EliceWysiwygEditorTheme.resetMarkdownSSR);
-const StyledAccordion = styled(Accordion).withConfig({
+var StyledAccordion = styled(Accordion).withConfig({
   componentId: "sc-18kg5i5-1"
 })(["border-radius:8px;overflow:hidden;background-color:", " !important;border-radius:8px;overflow:hidden;& > *:first-child{background-color:", " !important;}& > *:last-child{background-color:", " !important;}"], base.color.navy5, base.color.navy7, base.color.navy7);
-const MaterialQuizAnswerExplanation = () => {
-  const {
-    lecture,
-    materialQuiz
-  } = useMaterialQuizState();
-  const intl = useRawEliceIntl();
+var MaterialQuizAnswerExplanation = function MaterialQuizAnswerExplanation() {
+  var _useMaterialQuizState = useMaterialQuizState(),
+    lecture = _useMaterialQuizState.lecture,
+    materialQuiz = _useMaterialQuizState.materialQuiz;
+  var intl = useRawEliceIntl();
   if (!materialQuiz || !materialQuiz.explanationInfo.isEnabled || !materialQuiz.isResponded || (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test && (lecture === null || lecture === void 0 ? void 0 : lecture.testUserStatus) !== enums.LectureTestUserStatus.Completed) {
     return null;
   }
-  return React.createElement(Flex, {
+  return jsx(Flex, {
     column: true,
-    margintop: "1rem"
-  }, React.createElement(StyledAccordion, {
-    dark: true,
-    header: React.createElement(Text, {
-      bold: true,
-      role: "navy0"
-    }, intl.formatMessage({
-      id: 'materialQuiz.explanation.show'
-    }))
-  }, materialQuiz.explanationInfo.isEnabled ? React.createElement(StyledMarkdownSSR, {
-    dark: true,
-    children: materialQuiz.explanationInfo.value
-  }) : React.createElement(Text, {
-    role: "info",
-    lineHeight: 1.4,
-    userSelect: "none"
-  }, intl.formatMessage({
-    id: 'materialQuiz.explanation.empty'
-  }))));
+    margintop: "1rem",
+    children: jsx(StyledAccordion, {
+      dark: true,
+      header: jsx(Text, {
+        bold: true,
+        role: "navy0",
+        children: intl.formatMessage({
+          id: 'materialQuiz.explanation.show'
+        })
+      }),
+      children: materialQuiz.explanationInfo.isEnabled ? jsx(StyledMarkdownSSR, {
+        dark: true,
+        children: materialQuiz.explanationInfo.value
+      }) : jsx(Text, {
+        role: "info",
+        lineHeight: 1.4,
+        userSelect: "none",
+        children: intl.formatMessage({
+          id: 'materialQuiz.explanation.empty'
+        })
+      })
+    })
+  });
 };
 
 export { MaterialQuizAnswerExplanation as default };