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

package/cjs/components/material-quiz/MaterialQuizText.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 apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
@@ -19,69 +21,81 @@ var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 var QuizResultBadge = require('./QuizResultBadge.js');
 var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
 
-const StyledTextarea = styled.textarea.withConfig({
+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 StyledTextarea = styled__default.default.textarea.withConfig({
   componentId: "sc-186cnpj-0"
-})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;border:1px solid ", ";background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], designTokens.base.color.navy2, designTokens.base.color.navy6, designTokens.base.color.navy7, designTokens.base.color.navy2, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'text');
-const StyledLabel = styled.label.withConfig({
+})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;border:1px solid ", ";background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], designTokens.base.color.navy2, designTokens.base.color.navy6, designTokens.base.color.navy7, designTokens.base.color.navy2, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'not-allowed' : 'text';
+});
+var StyledLabel = styled__default.default.label.withConfig({
   componentId: "sc-186cnpj-1"
 })(["font-size:0.875rem;margin-bottom:0.5rem;color:", ";"], designTokens.base.color.navy1);
-const MaterialQuizText = ({
-  hasInlinePassage
-}) => {
+var MaterialQuizText = function MaterialQuizText(_ref2) {
+  var hasInlinePassage = _ref2.hasInlinePassage;
   // context
-  const {
-    lecture,
-    materialQuiz,
-    userId
-  } = MaterialQuizContext.useMaterialQuizState();
-  const {
-    onSubmit,
-    onNext,
-    refreshOrgMaterialQuiz,
-    onDirty
-  } = MaterialQuizContext.useMaterialQuizDispatch();
-  const theme = material.useTheme();
+  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
+    lecture = _useMaterialQuizState.lecture,
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    userId = _useMaterialQuizState.userId;
+  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
+    onSubmit = _useMaterialQuizDispa.onSubmit,
+    onNext = _useMaterialQuizDispa.onNext,
+    refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
+    onDirty = _useMaterialQuizDispa.onDirty;
+  var theme = material.useTheme();
   // state
-  const intl$1 = intl.useRawEliceIntl();
-  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
-  const [submitStatus, setSubmitStatus] = React.useState('idle');
-  const {
-    containerRef,
-    questionRef
-  } = useCaculatePassage.useCaculatePassage();
-  const [answer, setAnswer] = React.useState('');
-  const [hasSubmitted, setHasSubmitted] = React.useState(false);
-  const isNextActive = hasSubmitted && typeof onNext === 'function';
-  const isDisabled = answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId;
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useState = React__default.default.useState(),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    materialQuizResponse = _React$useState2[0],
+    setMaterialQuizResponse = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState('idle'),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    submitStatus = _React$useState4[0],
+    setSubmitStatus = _React$useState4[1];
+  var _useCaculatePassage = useCaculatePassage.useCaculatePassage(),
+    containerRef = _useCaculatePassage.containerRef,
+    questionRef = _useCaculatePassage.questionRef;
+  var _React$useState5 = React__default.default.useState(''),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    answer = _React$useState6[0],
+    setAnswer = _React$useState6[1];
+  var _React$useState7 = React__default.default.useState(false),
+    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
+    hasSubmitted = _React$useState8[0],
+    setHasSubmitted = _React$useState8[1];
+  var isNextActive = hasSubmitted && typeof onNext === 'function';
+  var isDisabled = answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId;
   // quiz response fetcher
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       apiClient.getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal
-      }).then(response => {
+        signal: signal
+      }).then(function (response) {
         setMaterialQuizResponse(response.quizResponse);
         setAnswer(response.quizResponse.answer);
-      }).catch(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     }
   }, [materialQuiz, userId]);
   // quiz response fetcher
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (userId && materialQuiz) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       apiClient.getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -90,48 +104,74 @@ const MaterialQuizText = ({
         offset: 0,
         count: 1
       }, {
-        signal
-      }).then(response => {
-        const quizResponse = response.quizResponses[0];
+        signal: signal
+      }).then(function (response) {
+        var quizResponse = response.quizResponses[0];
         setMaterialQuizResponse(quizResponse);
         setAnswer(typeof (quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer) === 'string' ? quizResponse.answer : '');
-      }).catch(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     }
   }, [materialQuiz, userId]);
   // submit handler
-  const handleSubmit = async () => {
-    if (!materialQuiz) {
-      return;
-    }
-    setSubmitStatus('pending');
-    try {
-      const {
-        quizResponseId
-      } = await apiClient.postOrgMaterialQuizResponseAdd({
-        materialQuizId: materialQuiz.id,
-        answer: JSON.stringify(answer)
-      });
-      const {
-        quizResponse
-      } = await apiClient.getOrgMaterialQuizResponseGet({
-        quizResponseId
-      });
-      setHasSubmitted(true);
-      setMaterialQuizResponse(quizResponse);
-      void refreshOrgMaterialQuiz();
-      onSubmit(true, index.getQuizResult(quizResponse));
-      setSubmitStatus('resolved');
-      onDirty(false);
-    } catch (error) {
-      console.error(error);
-      onSubmit(false);
-      setSubmitStatus('rejected');
-    }
-  };
-  const commonProps = {
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+      var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (materialQuiz) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            setSubmitStatus('pending');
+            _context.prev = 3;
+            _context.next = 6;
+            return apiClient.postOrgMaterialQuizResponseAdd({
+              materialQuizId: materialQuiz.id,
+              answer: JSON.stringify(answer)
+            });
+          case 6:
+            _yield$postOrgMateria = _context.sent;
+            quizResponseId = _yield$postOrgMateria.quizResponseId;
+            _context.next = 10;
+            return apiClient.getOrgMaterialQuizResponseGet({
+              quizResponseId: quizResponseId
+            });
+          case 10:
+            _yield$getOrgMaterial = _context.sent;
+            quizResponse = _yield$getOrgMaterial.quizResponse;
+            setHasSubmitted(true);
+            setMaterialQuizResponse(quizResponse);
+            void refreshOrgMaterialQuiz();
+            onSubmit(true, index.getQuizResult(quizResponse));
+            setSubmitStatus('resolved');
+            onDirty(false);
+            _context.next = 25;
+            break;
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](3);
+            console.error(_context.t0);
+            onSubmit(false);
+            setSubmitStatus('rejected');
+          case 25:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 20]]);
+    }));
+    return function handleSubmit() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var commonProps = {
     type: 'text',
     autoFocus: answer.length === 0,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId,
@@ -139,20 +179,20 @@ const MaterialQuizText = ({
       id: 'materialQuiz.text.placeholder'
     }),
     value: answer,
-    onChange: e => {
+    onChange: function onChange(e) {
       setHasSubmitted(false);
       setAnswer(e.target.value);
       onDirty(true);
     }
   };
-  return React.createElement(QuestionBox.default, {
+  return jsxRuntime.jsx(QuestionBox.default, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
     onNext: onNext,
-    submitResult: React.createElement(QuizResultBadge.default, {
+    submitResult: jsxRuntime.jsx(QuizResultBadge.default, {
       materialQuizResponse: materialQuizResponse
     }),
-    submitStatus: React.createElement(QuizSubmitStatusText.default, {
+    submitStatus: jsxRuntime.jsx(QuizSubmitStatusText.default, {
       status: submitStatus
     }),
     isNextActive: isNextActive,
@@ -171,37 +211,45 @@ const MaterialQuizText = ({
         backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
         color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
       }
-    }]
-  }, React.createElement(material.Stack, {
-    height: "100%",
-    gap: "1rem"
-  }, hasInlinePassage && React.createElement("div", {
-    id: element.MATERIAL_QUIZ_PASSIVE_ID,
-    ref: questionRef
-  }, React.createElement(MaterialQuizInfo.default, {
-    renderWithBox: false
-  })), React.createElement("div", {
-    id: element.MATERIAL_QUIZ_ANSWER_ID
-  }, React.createElement(blocks.Flex, {
-    column: true
-  }, userId ? React.createElement(StyledLabel, {
-    htmlFor: "quiz-text-answer"
-  }, intl$1.formatMessage({
-    id: 'materialQuiz.submittedAnswer'
-  })) : null, React.createElement(StyledTextarea, Object.assign({
-    id: "quiz-text-answer"
-  }, commonProps))), userId ? React.createElement(blocks.Flex, {
-    column: true,
-    margintop: "1rem"
-  }, React.createElement(StyledLabel, {
-    htmlFor: "quiz-text-submitted-answer"
-  }, intl$1.formatMessage({
-    id: 'materialQuiz.answer'
-  })), React.createElement(StyledTextarea, {
-    id: "quiz-text-submitted-answer",
-    disabled: true,
-    value: typeof (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo) === 'string' ? materialQuiz.answerInfo : ''
-  })) : null), React.createElement(MaterialQuizAnswerExplanation.default, null)));
+    }],
+    children: jsxRuntime.jsxs(material.Stack, {
+      height: "100%",
+      gap: "1rem",
+      children: [hasInlinePassage && jsxRuntime.jsx("div", {
+        id: element.MATERIAL_QUIZ_PASSIVE_ID,
+        ref: questionRef,
+        children: jsxRuntime.jsx(MaterialQuizInfo.default, {
+          renderWithBox: false
+        })
+      }), jsxRuntime.jsxs("div", {
+        id: element.MATERIAL_QUIZ_ANSWER_ID,
+        children: [jsxRuntime.jsxs(blocks.Flex, {
+          column: true,
+          children: [userId ? jsxRuntime.jsx(StyledLabel, {
+            htmlFor: "quiz-text-answer",
+            children: intl$1.formatMessage({
+              id: 'materialQuiz.submittedAnswer'
+            })
+          }) : null, jsxRuntime.jsx(StyledTextarea, Object.assign({
+            id: "quiz-text-answer"
+          }, commonProps))]
+        }), userId ? jsxRuntime.jsxs(blocks.Flex, {
+          column: true,
+          margintop: "1rem",
+          children: [jsxRuntime.jsx(StyledLabel, {
+            htmlFor: "quiz-text-submitted-answer",
+            children: intl$1.formatMessage({
+              id: 'materialQuiz.answer'
+            })
+          }), jsxRuntime.jsx(StyledTextarea, {
+            id: "quiz-text-submitted-answer",
+            disabled: true,
+            value: typeof (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo) === 'string' ? materialQuiz.answerInfo : ''
+          })]
+        }) : null]
+      }), jsxRuntime.jsx(MaterialQuizAnswerExplanation.default, {})]
+    })
+  });
 };
 
 exports.default = MaterialQuizText;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
@@ -9,39 +10,48 @@ var styled = require('styled-components');
 var index = require('../../helpers/index.js');
 var color = require('./constants/color.js');
 
-const StyledGreenBadgeNext = styled(blocks.BadgeNext).withConfig({
+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 StyledGreenBadgeNext = styled__default.default(blocks.BadgeNext).withConfig({
   componentId: "sc-1iksspv-0"
 })(["background-color:", ";color:", ";"], color.CORRECT_BACKGROUND_COLOR, color.CORRECT_TEXT_COLOR);
-const StyledRedBadgeNext = styled(blocks.BadgeNext).withConfig({
+var StyledRedBadgeNext = styled__default.default(blocks.BadgeNext).withConfig({
   componentId: "sc-1iksspv-1"
 })(["background-color:", ";color:", ";"], color.WRONG_BACKGROUND_COLOR, color.WRONG_TEXT_COLOR);
-const QuizResultBadge = ({
-  materialQuizResponse
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
-  const status = React.useMemo(() => index.getQuizResultStatus(materialQuizResponse), [materialQuizResponse]);
+var QuizResultBadge = function QuizResultBadge(_ref) {
+  var materialQuizResponse = _ref.materialQuizResponse;
+  var intl$1 = intl.useRawEliceIntl();
+  var status = React__default.default.useMemo(function () {
+    return index.getQuizResultStatus(materialQuizResponse);
+  }, [materialQuizResponse]);
   switch (status) {
     case index.QuizResultStatus.Correct:
-      return React.createElement(StyledGreenBadgeNext, {
+      return jsxRuntime.jsx(StyledGreenBadgeNext, {
         type: "quiet",
-        role: "green"
-      }, intl$1.formatMessage({
-        id: 'materialQuiz.resultStatus.correct'
-      }));
+        role: "green",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.resultStatus.correct'
+        })
+      });
     case index.QuizResultStatus.Wrong:
-      return React.createElement(StyledRedBadgeNext, {
+      return jsxRuntime.jsx(StyledRedBadgeNext, {
         type: "quiet",
-        role: "red"
-      }, intl$1.formatMessage({
-        id: 'materialQuiz.resultStatus.wrong'
-      }));
+        role: "red",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.resultStatus.wrong'
+        })
+      });
     case index.QuizResultStatus.Submitted:
-      return React.createElement(blocks.BadgeNext, {
+      return jsxRuntime.jsx(blocks.BadgeNext, {
         type: "quiet",
-        role: "primary"
-      }, intl$1.formatMessage({
-        id: 'materialQuiz.resultStatus.submitted'
-      }));
+        role: "primary",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.resultStatus.submitted'
+        })
+      });
     default:
       return null;
   }

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

@@ -2,34 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var styled = require('styled-components');
 var color = require('./constants/color.js');
 
-const StyledSuccessStatusText = styled(blocks.StatusText).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledSuccessStatusText = styled__default.default(blocks.StatusText).withConfig({
   componentId: "sc-1obyi4p-0"
 })(["color:", ";"], color.SUCCESS_TEXT_COLOR);
-const QuizSubmitStatusText = ({
-  status
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
+var QuizSubmitStatusText = function QuizSubmitStatusText(_ref) {
+  var status = _ref.status;
+  var intl$1 = intl.useRawEliceIntl();
   switch (status) {
     case 'resolved':
-      return React.createElement(StyledSuccessStatusText, {
+      return jsxRuntime.jsx(StyledSuccessStatusText, {
         role: "success",
-        size: "small"
-      }, intl$1.formatMessage({
-        id: 'materialQuiz.submitStatus.success'
-      }));
+        size: "small",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.submitStatus.success'
+        })
+      });
     case 'rejected':
-      return React.createElement(blocks.StatusText, {
+      return jsxRuntime.jsx(blocks.StatusText, {
         role: "danger",
-        size: "small"
-      }, intl$1.formatMessage({
-        id: 'materialQuiz.submitStatus.failure'
-      }));
+        size: "small",
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.submitStatus.failure'
+        })
+      });
     default:
       return null;
   }

package/cjs/components/material-quiz/constants/color.js

@@ -2,11 +2,11 @@
 
 var muiSystem = require('@elice/mui-system');
 
-const CORRECT_TEXT_COLOR = muiSystem.colors.green[800];
-const CORRECT_BACKGROUND_COLOR = muiSystem.colors.green[50];
-const WRONG_TEXT_COLOR = muiSystem.colors.red[800];
-const WRONG_BACKGROUND_COLOR = muiSystem.colors.red[50];
-const SUCCESS_TEXT_COLOR = muiSystem.colors.green[400];
+var CORRECT_TEXT_COLOR = muiSystem.colors.green[800];
+var CORRECT_BACKGROUND_COLOR = muiSystem.colors.green[50];
+var WRONG_TEXT_COLOR = muiSystem.colors.red[800];
+var WRONG_BACKGROUND_COLOR = muiSystem.colors.red[50];
+var SUCCESS_TEXT_COLOR = muiSystem.colors.green[400];
 
 exports.CORRECT_BACKGROUND_COLOR = CORRECT_BACKGROUND_COLOR;
 exports.CORRECT_TEXT_COLOR = CORRECT_TEXT_COLOR;

package/cjs/components/material-quiz/context/MaterialQuizContext.d.ts

@@ -31,7 +31,7 @@ interface DispatchContextType {
     setIsLongPassage: React.Dispatch<React.SetStateAction<boolean>>;
     setIsInitialLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
-declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): React.JSX.Element;
+declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
 declare function useMaterialQuizState(): State;
 declare function useMaterialQuizDispatch(): DispatchContextType;
 export { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch };