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

package/cjs/components/shared/question-radio/QuestionRadioOption.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
@@ -9,12 +10,16 @@ var color = require('../../material-quiz/constants/color.js');
 var getQuestionStatusStyle = require('../utils/getQuestionStatusStyle.js');
 var QuestionRadioContext = require('./QuestionRadioContext.js');
 
-const StyledQuestionRadioOption = styled.div.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 StyledQuestionRadioOption = styled__default.default.div.withConfig({
   componentId: "sc-cy66me-0"
-})(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";overflow-x:auto;&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
-  checked,
-  status
-}) => {
+})(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";overflow-x:auto;&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
+  var checked = _ref.checked,
+    status = _ref.status;
   switch (status) {
     case 'correct':
       return color.CORRECT_BACKGROUND_COLOR;
@@ -25,17 +30,18 @@ const StyledQuestionRadioOption = styled.div.withConfig({
     default:
       return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy6;
   }
-}, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  isAnswer
-}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
-const StyledQuestionRadioInput = styled.input.withConfig({
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref3) {
+  var isAnswer = _ref3.isAnswer;
+  return isAnswer ? "border: 3px solid ".concat(designTokens.base.color.green5) : '';
+});
+var StyledQuestionRadioInput = styled__default.default.input.withConfig({
   componentId: "sc-cy66me-1"
-})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1rem;height:1rem;margin-right:0.875rem;border:2px solid ", ";", ""], ({
-  checked,
-  status
-}) => {
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1rem;height:1rem;margin-right:0.875rem;border:2px solid ", ";", ""], function (_ref4) {
+  var checked = _ref4.checked,
+    status = _ref4.status;
   switch (status) {
     case 'correct':
       return designTokens.base.color.green9;
@@ -44,11 +50,10 @@ const StyledQuestionRadioInput = styled.input.withConfig({
     default:
       return checked ? designTokens.base.color.primary6 : designTokens.base.color.gray3;
   }
-}, ({
-  status,
-  checked
-}) => {
-  let bgColor;
+}, function (_ref5) {
+  var status = _ref5.status,
+    checked = _ref5.checked;
+  var bgColor;
   switch (status) {
     case 'correct':
       bgColor = designTokens.base.color.green9;
@@ -60,57 +65,45 @@ const StyledQuestionRadioInput = styled.input.withConfig({
       bgColor = checked ? designTokens.base.color.primary6 : status ? designTokens.base.color.gray3 : 'transparent';
       break;
   }
-  return `
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 70%;
-            height: 70%;
-            border-radius: 50%;
-            background-color: ${bgColor};
-          }
-        `;
+  return "\n          &:after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 70%;\n            height: 70%;\n            border-radius: 50%;\n            background-color: ".concat(bgColor, ";\n          }\n        ");
 });
-const StyledLabel = styled.label.withConfig({
+var StyledLabel = styled__default.default.label.withConfig({
   componentId: "sc-cy66me-2"
 })(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], designTokens.base.size.body3, getQuestionStatusStyle.getQuestionStatusStyle());
-const QuestionRadioOption = React.memo(({
-  value,
-  status,
-  isAnswer,
-  children
-}) => {
-  const {
-    selectedValue,
-    disabled,
-    onSelect
-  } = QuestionRadioContext.useQuestionRadioContext();
-  return React.createElement(StyledQuestionRadioOption, {
+var QuestionRadioOption = React__default.default.memo(function (_ref6) {
+  var value = _ref6.value,
+    status = _ref6.status,
+    isAnswer = _ref6.isAnswer,
+    children = _ref6.children;
+  var _useQuestionRadioCont = QuestionRadioContext.useQuestionRadioContext(),
+    selectedValue = _useQuestionRadioCont.selectedValue,
+    disabled = _useQuestionRadioCont.disabled,
+    onSelect = _useQuestionRadioCont.onSelect;
+  return jsxRuntime.jsxs(StyledQuestionRadioOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: selectedValue === value,
-    onClick: e => {
+    onClick: function onClick(e) {
       e.preventDefault();
       if (disabled) {
         return;
       }
       onSelect(value);
     },
-    status: status
-  }, React.createElement(StyledQuestionRadioInput, {
-    id: value,
-    type: "radio",
-    readOnly: true,
-    checked: selectedValue === value,
-    status: status
-  }), React.createElement(StyledLabel, {
-    htmlFor: value,
-    checked: selectedValue === value,
-    status: status
-  }, children));
+    status: status,
+    children: [jsxRuntime.jsx(StyledQuestionRadioInput, {
+      id: value,
+      type: "radio",
+      readOnly: true,
+      checked: selectedValue === value,
+      status: status
+    }), jsxRuntime.jsx(StyledLabel, {
+      htmlFor: value,
+      checked: selectedValue === value,
+      status: status,
+      children: children
+    })]
+  });
 });
 
 exports.default = QuestionRadioOption;

package/cjs/components/shared/utils/getQuestionStatusStyle.js

@@ -8,10 +8,9 @@ var color = require('../../material-quiz/constants/color.js');
  * Get shared question custom style depend on checked, status values.
  */
 function getQuestionStatusStyle() {
-  return styled.css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";table tbody > tr:nth-child(odd) > td{background-color:", ";}}"], ({
-    checked,
-    status
-  }) => {
+  return styled.css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";table tbody > tr:nth-child(odd) > td{background-color:", ";}}"], function (_ref) {
+    var checked = _ref.checked,
+      status = _ref.status;
     switch (status) {
       case 'correct':
         return color.CORRECT_TEXT_COLOR;
@@ -20,11 +19,10 @@ function getQuestionStatusStyle() {
       default:
         return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
     }
-  }, ({
-    checked,
-    status
-  }) => {
-    return checked || status !== 'answer' ? `rgba(0, 0, 0, 0.08);` : null;
+  }, function (_ref2) {
+    var checked = _ref2.checked,
+      status = _ref2.status;
+    return checked || status !== 'answer' ? "rgba(0, 0, 0, 0.08);" : null;
   });
 }
 

package/cjs/components/shared/utils/mergeRefs.js

@@ -1,11 +1,20 @@
 'use strict';
 
-const mergeRefs = (...refs) => element => refs.forEach(ref => {
-  if (typeof ref === 'function') {
-    ref(element);
-  } else if (ref && typeof ref === 'object') {
-    ref.current = element;
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
   }
-});
+  return function (element) {
+    return refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(element);
+      } else if (ref && _rollupPluginBabelHelpers.typeof(ref) === 'object') {
+        ref.current = element;
+      }
+    });
+  };
+};
 
 exports.mergeRefs = mergeRefs;

package/cjs/constant/element.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const MATERIAL_QUIZ_CONTAINER_ID = 'MATERIAL_QUIZ_CONTAINER_ID';
-const MATERIAL_QUIZ_PASSIVE_ID = 'MATERIAL_QUIZ_PASSIVE_ID';
-const MATERIAL_QUIZ_ANSWER_ID = 'MATERIAL_QUIZ_ANSWER_ID';
+var MATERIAL_QUIZ_CONTAINER_ID = 'MATERIAL_QUIZ_CONTAINER_ID';
+var MATERIAL_QUIZ_PASSIVE_ID = 'MATERIAL_QUIZ_PASSIVE_ID';
+var MATERIAL_QUIZ_ANSWER_ID = 'MATERIAL_QUIZ_ANSWER_ID';
 
 exports.MATERIAL_QUIZ_ANSWER_ID = MATERIAL_QUIZ_ANSWER_ID;
 exports.MATERIAL_QUIZ_CONTAINER_ID = MATERIAL_QUIZ_CONTAINER_ID;

package/cjs/constant/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var element = require('./element.js');
+
+
+
+exports.MATERIAL_QUIZ_ANSWER_ID = element.MATERIAL_QUIZ_ANSWER_ID;
+exports.MATERIAL_QUIZ_CONTAINER_ID = element.MATERIAL_QUIZ_CONTAINER_ID;
+exports.MATERIAL_QUIZ_PASSIVE_ID = element.MATERIAL_QUIZ_PASSIVE_ID;

package/cjs/helpers/index.js

@@ -22,12 +22,11 @@ function getQuizResultStatus(materialQuizResponse) {
   }
   return exports.QuizResultStatus.NotSubmitted;
 }
-const getOptionStatus = ({
-  isSelected,
-  isActive,
-  materialQuizResponse
-}) => {
-  const status = getQuizResultStatus(materialQuizResponse);
+var getOptionStatus = function getOptionStatus(_ref) {
+  var isSelected = _ref.isSelected,
+    isActive = _ref.isActive,
+    materialQuizResponse = _ref.materialQuizResponse;
+  var status = getQuizResultStatus(materialQuizResponse);
   if (isActive) {
     return;
   }
@@ -44,9 +43,8 @@ const getOptionStatus = ({
 function checkUserLectureTestEnded(lecture) {
   return (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed;
 }
-function shouldResetOptions({
-  materialQuizResponse
-}) {
+function shouldResetOptions(_ref2) {
+  var materialQuizResponse = _ref2.materialQuizResponse;
   // when score is given(correct, wrong), reset selected option in order to select options from scratch
   // score condition
   // normal quiz - score is always given(not a null) as long as a user submits the answer
@@ -54,7 +52,7 @@ function shouldResetOptions({
   return [(materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.score) !== null].every(Boolean);
 }
 function getQuizResult(materialQuizResponse) {
-  const status = getQuizResultStatus(materialQuizResponse);
+  var status = getQuizResultStatus(materialQuizResponse);
   switch (status) {
     case exports.QuizResultStatus.Correct:
       return true;

package/cjs/hooks/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var useCaculatePassage = require('./useCaculatePassage.js');
+
+
+
+exports.useCaculatePassage = useCaculatePassage.useCaculatePassage;

package/cjs/hooks/useCaculatePassage.js

@@ -1,33 +1,34 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactUse = require('react-use');
 var MaterialQuizContext = require('../components/material-quiz/context/MaterialQuizContext.js');
 var element = require('../constant/element.js');
 
-const useCaculatePassage = () => {
-  const {
-    materialQuiz,
-    vertical
-  } = MaterialQuizContext.useMaterialQuizState();
-  const {
-    setIsLongPassage,
-    setIsInitialLoading
-  } = MaterialQuizContext.useMaterialQuizDispatch();
-  const [questionRef, {
-    height: questionDetailHeight
-  }] = reactUse.useMeasure();
-  const [containerRef, {
-    height: containerHeight
-  }] = reactUse.useMeasure();
-  React.useEffect(() => {
+var useCaculatePassage = function useCaculatePassage() {
+  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    vertical = _useMaterialQuizState.vertical;
+  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
+    setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage,
+    setIsInitialLoading = _useMaterialQuizDispa.setIsInitialLoading;
+  var _useMeasure = reactUse.useMeasure(),
+    _useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
+    questionRef = _useMeasure2[0],
+    questionDetailHeight = _useMeasure2[1].height;
+  var _useMeasure3 = reactUse.useMeasure(),
+    _useMeasure4 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure3, 2),
+    containerRef = _useMeasure4[0],
+    containerHeight = _useMeasure4[1].height;
+  React.useEffect(function () {
     var _a, _b;
-    const currentContainerHeight = vertical ? (_b = (_a = document.getElementById(element.MATERIAL_QUIZ_CONTAINER_ID)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0 : containerHeight;
+    var currentContainerHeight = vertical ? (_b = (_a = document.getElementById(element.MATERIAL_QUIZ_CONTAINER_ID)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0 : containerHeight;
     if (currentContainerHeight && questionDetailHeight && materialQuiz) {
       setIsLongPassage(questionDetailHeight > currentContainerHeight);
       // add timeout for forcing caculate layout and render in the parent
       // finish before turning off loading
-      setTimeout(() => {
+      setTimeout(function () {
         setIsInitialLoading(false);
       }, 300);
     } else if (materialQuiz && !materialQuiz.questionDescription) {
@@ -35,8 +36,8 @@ const useCaculatePassage = () => {
     }
   }, [containerHeight, questionDetailHeight, materialQuiz, setIsLongPassage, vertical, setIsInitialLoading]);
   return {
-    questionRef,
-    containerRef
+    questionRef: questionRef,
+    containerRef: containerRef
   };
 };