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

package/cjs/components/markdown-editor/index.js

@@ -1,25 +1,34 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var wysiwyg = require('@elice/wysiwyg');
 
-const STATE_SYNC_DEBOUNCE_TIME = 50;
-const MarkdownEditor = _a => {
-  var {
-      value,
-      onChange
-    } = _a,
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var STATE_SYNC_DEBOUNCE_TIME = 50;
+var MarkdownEditor = function MarkdownEditor(_a) {
+  var value = _a.value,
+    onChange = _a.onChange,
     props = tslib.__rest(_a, ["value", "onChange"]);
-  const [__value, __setValue] = React.useState(value);
-  reactUse.useDebounce(() => __setValue(value), STATE_SYNC_DEBOUNCE_TIME, [value]);
-  reactUse.useDebounce(() => {
+  var _React$useState = React__default.default.useState(value),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    __value = _React$useState2[0],
+    __setValue = _React$useState2[1];
+  reactUse.useDebounce(function () {
+    return __setValue(value);
+  }, STATE_SYNC_DEBOUNCE_TIME, [value]);
+  reactUse.useDebounce(function () {
     if (__value !== value && typeof onChange === 'function') {
       onChange(__value !== null && __value !== void 0 ? __value : '');
     }
   }, STATE_SYNC_DEBOUNCE_TIME, [__value]);
-  return React.createElement(wysiwyg.EliceWysiwygEditor, Object.assign({
+  return jsxRuntime.jsx(wysiwyg.EliceWysiwygEditor, Object.assign({
     value: value,
     onChange: __setValue
   }, props));

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

@@ -2,6 +2,8 @@
 
 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 designTokens = require('@elice/design-tokens');
@@ -17,123 +19,152 @@ var ko = require('./locales/ko.json.js');
 var MaterialQuizShimmer = require('./MaterialQuizShimmer.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 
-const eliceTheme = muiSystem.createEliceTheme({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var eliceTheme = muiSystem.createEliceTheme({
   paletteMode: 'dark',
   paletteName: 'purple'
 });
-const AsyncMaterialQuizSelectMultiple = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectMultiple.js'); }));
-const AsyncMaterialQuizSelectMultipleOrder = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectMultipleOrder.js'); }));
-const AsyncMaterialQuizText = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizText.js'); }));
-const AsyncMaterialQuizSelectOne = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectOne.js'); }));
-const AsyncMaterialQuizGroup = React.lazy(() => Promise.resolve().then(function () { return require('./material-quiz-group/index.js'); }));
+var AsyncMaterialQuizSelectMultiple = React__default.default.lazy(function () {
+  return Promise.resolve().then(function () { return require('./MaterialQuizSelectMultiple.js'); });
+});
+var AsyncMaterialQuizSelectMultipleOrder = React__default.default.lazy(function () {
+  return Promise.resolve().then(function () { return require('./MaterialQuizSelectMultipleOrder.js'); });
+});
+var AsyncMaterialQuizText = React__default.default.lazy(function () {
+  return Promise.resolve().then(function () { return require('./MaterialQuizText.js'); });
+});
+var AsyncMaterialQuizSelectOne = React__default.default.lazy(function () {
+  return Promise.resolve().then(function () { return require('./MaterialQuizSelectOne.js'); });
+});
+var AsyncMaterialQuizGroup = React__default.default.lazy(function () {
+  return Promise.resolve().then(function () { return require('./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__default.default.div.withConfig({
   componentId: "sc-1eyn8fb-0"
 })([""]);
-const StyledMaterialQuizContent = styled.div.withConfig({
+var StyledMaterialQuizContent = styled__default.default.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__default.default.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:", ";"], designTokens.base.color.navy8);
-const StyledMaterialQuizWrapper = styled.div.withConfig({
+var StyledMaterialQuizWrapper = styled__default.default.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
-  } = MaterialQuizContext.useMaterialQuizState();
-  const {
-    setVertical
-  } = MaterialQuizContext.useMaterialQuizDispatch();
-  const [ref, {
-    width
-  }] = reactUse.useMeasure();
-  const isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.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 = MaterialQuizContext.useMaterialQuizState(),
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    vertical = _useMaterialQuizState.vertical,
+    course = _useMaterialQuizState.course,
+    isLongPassage = _useMaterialQuizState.isLongPassage,
+    isInitialLoading = _useMaterialQuizState.isInitialLoading;
+  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
+    setVertical = _useMaterialQuizDispa.setVertical;
+  var _useMeasure = reactUse.useMeasure(),
+    _useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
+    ref = _useMeasure2[0],
+    width = _useMeasure2[1].width;
+  var isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
+  var isFetchingData = !materialQuiz || !course;
+  var isLoadingLayout = isFetchingData || isInitialLoading;
+  var isVisibleSideBySide = !vertical && isLongPassage;
+  var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
+  React__default.default.useEffect(function () {
     if (width > 0) {
       setVertical(width <= designTokens.base.screen.medium);
     }
   }, [width, setVertical]);
-  const renderQuestionOption = () => {
+  var renderQuestionOption = function renderQuestionOption() {
     if (isFetchingData) {
       return null;
     }
     switch (materialQuiz.optionType) {
       case types.enums.QuizOptionType.SelectOne:
-        return React.createElement(AsyncMaterialQuizSelectOne, {
+        return jsxRuntime.jsx(AsyncMaterialQuizSelectOne, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.SelectMultiple:
-        return React.createElement(AsyncMaterialQuizSelectMultiple, {
+        return jsxRuntime.jsx(AsyncMaterialQuizSelectMultiple, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.Text:
-        return React.createElement(AsyncMaterialQuizText, {
+        return jsxRuntime.jsx(AsyncMaterialQuizText, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.SelectMultipleOrder:
-        return React.createElement(AsyncMaterialQuizSelectMultipleOrder, {
+        return jsxRuntime.jsx(AsyncMaterialQuizSelectMultipleOrder, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.Group:
-        return React.createElement(AsyncMaterialQuizGroup, null);
+        return jsxRuntime.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.default, null)), isVisibleSideBySide && React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo.default, null)), React.createElement(StyledMaterialQuizContent, {
-    id: element.MATERIAL_QUIZ_CONTAINER_ID,
-    vertical: vertical
-  }, renderQuestionOption())));
+  return jsxRuntime.jsx(React__default.default.Suspense, {
+    fallback: null,
+    children: jsxRuntime.jsxs(StyledMaterialQuizWrapper, {
+      ref: ref,
+      vertical: vertical,
+      isQuizGroupType: isQuizGroupType,
+      isLongPassage: isLongPassage,
+      children: [isLoadingLayout && jsxRuntime.jsx(LoadingContainer, {
+        children: jsxRuntime.jsx(MaterialQuizShimmer.default, {})
+      }), isVisibleSideBySide && jsxRuntime.jsx(StyledMaterialQuizInfo, {
+        children: jsxRuntime.jsx(MaterialQuizInfo.default, {})
+      }), jsxRuntime.jsx(StyledMaterialQuizContent, {
+        id: element.MATERIAL_QUIZ_CONTAINER_ID,
+        vertical: vertical,
+        children: renderQuestionOption()
+      })]
+    })
+  });
 };
-const MaterialQuizContainer = ({
-  materialQuizId,
-  userId,
-  onDirty,
-  onSubmit,
-  onNext,
-  __intl
-}) => {
-  return React.createElement(intl.RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(material.ThemeProvider, {
-    theme: eliceTheme
-  }, React.createElement(MaterialQuizContext.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 jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+    value: __intl,
+    children: jsxRuntime.jsx(material.ThemeProvider, {
+      theme: eliceTheme,
+      children: jsxRuntime.jsx(MaterialQuizContext.MaterialQuizProvider, {
+        materialQuizId: materialQuizId,
+        userId: userId,
+        onDirty: onDirty,
+        onSubmit: onSubmit,
+        onNext: onNext,
+        children: jsxRuntime.jsx(MaterialQuiz, {})
+      })
+    })
+  });
 };
 var MaterialQuiz$1 = new intl.IntlComponentBuilder(MaterialQuizContainer).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
@@ -12,42 +12,49 @@ var wysiwyg = require('@elice/wysiwyg');
 var styled = require('styled-components');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 
-const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledMarkdownSSR = styled__default.default(markdown.MarkdownSSR).withConfig({
   componentId: "sc-18kg5i5-0"
 })(["p{margin:0 !important;}", ""], wysiwyg.EliceWysiwygEditorTheme.resetMarkdownSSR);
-const StyledAccordion = styled(blocks.Accordion).withConfig({
+var StyledAccordion = styled__default.default(blocks.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;}"], designTokens.base.color.navy5, designTokens.base.color.navy7, designTokens.base.color.navy7);
-const MaterialQuizAnswerExplanation = () => {
-  const {
-    lecture,
-    materialQuiz
-  } = MaterialQuizContext.useMaterialQuizState();
-  const intl$1 = intl.useRawEliceIntl();
+var MaterialQuizAnswerExplanation = function MaterialQuizAnswerExplanation() {
+  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
+    lecture = _useMaterialQuizState.lecture,
+    materialQuiz = _useMaterialQuizState.materialQuiz;
+  var intl$1 = intl.useRawEliceIntl();
   if (!materialQuiz || !materialQuiz.explanationInfo.isEnabled || !materialQuiz.isResponded || (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test && (lecture === null || lecture === void 0 ? void 0 : lecture.testUserStatus) !== types.enums.LectureTestUserStatus.Completed) {
     return null;
   }
-  return React.createElement(blocks.Flex, {
+  return jsxRuntime.jsx(blocks.Flex, {
     column: true,
-    margintop: "1rem"
-  }, React.createElement(StyledAccordion, {
-    dark: true,
-    header: React.createElement(blocks.Text, {
-      bold: true,
-      role: "navy0"
-    }, intl$1.formatMessage({
-      id: 'materialQuiz.explanation.show'
-    }))
-  }, materialQuiz.explanationInfo.isEnabled ? React.createElement(StyledMarkdownSSR, {
-    dark: true,
-    children: materialQuiz.explanationInfo.value
-  }) : React.createElement(blocks.Text, {
-    role: "info",
-    lineHeight: 1.4,
-    userSelect: "none"
-  }, intl$1.formatMessage({
-    id: 'materialQuiz.explanation.empty'
-  }))));
+    margintop: "1rem",
+    children: jsxRuntime.jsx(StyledAccordion, {
+      dark: true,
+      header: jsxRuntime.jsx(blocks.Text, {
+        bold: true,
+        role: "navy0",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.explanation.show'
+        })
+      }),
+      children: materialQuiz.explanationInfo.isEnabled ? jsxRuntime.jsx(StyledMarkdownSSR, {
+        dark: true,
+        children: materialQuiz.explanationInfo.value
+      }) : jsxRuntime.jsx(blocks.Text, {
+        role: "info",
+        lineHeight: 1.4,
+        userSelect: "none",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.explanation.empty'
+        })
+      })
+    })
+  });
 };
 
 exports.default = MaterialQuizAnswerExplanation;