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

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

@@ -1,5 +1,3 @@
-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';
@@ -15,147 +13,123 @@ import messageKo from './locales/ko.json.js';
 import MaterialQuizShimmer from './MaterialQuizShimmer.js';
 import MaterialQuizInfo from './MaterialQuizInfo.js';
 
-var eliceTheme = createEliceTheme({
+const eliceTheme = createEliceTheme({
   paletteMode: 'dark',
   paletteName: 'purple'
 });
-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');
-});
+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'));
 // 746px
-var MAX_CONTENT_WIDTH = '46.625rem';
-var StyledMaterialQuizInfo = styled.div.withConfig({
+const MAX_CONTENT_WIDTH = '46.625rem';
+const StyledMaterialQuizInfo = styled.div.withConfig({
   componentId: "sc-1eyn8fb-0"
 })([""]);
-var StyledMaterialQuizContent = styled.div.withConfig({
+const StyledMaterialQuizContent = styled.div.withConfig({
   componentId: "sc-1eyn8fb-1"
-})(["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({
+})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], ({
+  vertical
+}) => vertical ? 'unset' : 'auto');
+const 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);
-var StyledMaterialQuizWrapper = styled.div.withConfig({
+const 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;}}"], 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 () {
+})(["-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(() => {
     if (width > 0) {
       setVertical(width <= base.screen.medium);
     }
   }, [width, setVertical]);
-  var renderQuestionOption = function renderQuestionOption() {
+  const renderQuestionOption = () => {
     if (isFetchingData) {
       return null;
     }
     switch (materialQuiz.optionType) {
       case enums.QuizOptionType.SelectOne:
-        return jsx(AsyncMaterialQuizSelectOne, {
+        return React.createElement(AsyncMaterialQuizSelectOne, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.SelectMultiple:
-        return jsx(AsyncMaterialQuizSelectMultiple, {
+        return React.createElement(AsyncMaterialQuizSelectMultiple, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.Text:
-        return jsx(AsyncMaterialQuizText, {
+        return React.createElement(AsyncMaterialQuizText, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.SelectMultipleOrder:
-        return jsx(AsyncMaterialQuizSelectMultipleOrder, {
+        return React.createElement(AsyncMaterialQuizSelectMultipleOrder, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case enums.QuizOptionType.Group:
-        return jsx(AsyncMaterialQuizGroup, {});
+        return React.createElement(AsyncMaterialQuizGroup, null);
     }
   };
-  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()
-      })]
-    })
-  });
+  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())));
 };
-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, {})
-      })
-    })
-  });
+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 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 { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Accordion, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
@@ -8,45 +8,42 @@ import { EliceWysiwygEditorTheme } from '@elice/wysiwyg';
 import styled from 'styled-components';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 
-var StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
+const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
   componentId: "sc-18kg5i5-0"
 })(["p{margin:0 !important;}", ""], EliceWysiwygEditorTheme.resetMarkdownSSR);
-var StyledAccordion = styled(Accordion).withConfig({
+const 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);
-var MaterialQuizAnswerExplanation = function MaterialQuizAnswerExplanation() {
-  var _useMaterialQuizState = useMaterialQuizState(),
-    lecture = _useMaterialQuizState.lecture,
-    materialQuiz = _useMaterialQuizState.materialQuiz;
-  var intl = useRawEliceIntl();
+const MaterialQuizAnswerExplanation = () => {
+  const {
+    lecture,
+    materialQuiz
+  } = useMaterialQuizState();
+  const 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 jsx(Flex, {
+  return React.createElement(Flex, {
     column: true,
-    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'
-        })
-      })
-    })
-  });
+    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'
+  }))));
 };
 
 export { MaterialQuizAnswerExplanation as default };