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

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

@@ -2,7 +2,6 @@
 
 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');
@@ -10,16 +9,12 @@ var color = require('../../material-quiz/constants/color.js');
 var getQuestionStatusStyle = require('../utils/getQuestionStatusStyle.js');
 var QuestionRadioContext = require('./QuestionRadioContext.js');
 
-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({
+const StyledQuestionRadioOption = styled.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:", ";}", ""], function (_ref) {
-  var checked = _ref.checked,
-    status = _ref.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:", ";}", ""], ({
+  checked,
+  status
+}) => {
   switch (status) {
     case 'correct':
       return color.CORRECT_BACKGROUND_COLOR;
@@ -30,18 +25,17 @@ var StyledQuestionRadioOption = styled__default.default.div.withConfig({
     default:
       return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy6;
   }
-}, 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({
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
+const StyledQuestionRadioInput = styled.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 ", ";", ""], function (_ref4) {
-  var checked = _ref4.checked,
-    status = _ref4.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 ", ";", ""], ({
+  checked,
+  status
+}) => {
   switch (status) {
     case 'correct':
       return designTokens.base.color.green9;
@@ -50,10 +44,11 @@ var StyledQuestionRadioInput = styled__default.default.input.withConfig({
     default:
       return checked ? designTokens.base.color.primary6 : designTokens.base.color.gray3;
   }
-}, function (_ref5) {
-  var status = _ref5.status,
-    checked = _ref5.checked;
-  var bgColor;
+}, ({
+  status,
+  checked
+}) => {
+  let bgColor;
   switch (status) {
     case 'correct':
       bgColor = designTokens.base.color.green9;
@@ -65,45 +60,57 @@ var StyledQuestionRadioInput = styled__default.default.input.withConfig({
       bgColor = checked ? designTokens.base.color.primary6 : status ? designTokens.base.color.gray3 : 'transparent';
       break;
   }
-  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        ");
+  return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            background-color: ${bgColor};
+          }
+        `;
 });
-var StyledLabel = styled__default.default.label.withConfig({
+const StyledLabel = styled.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());
-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, {
+const QuestionRadioOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedValue,
+    disabled,
+    onSelect
+  } = QuestionRadioContext.useQuestionRadioContext();
+  return React.createElement(StyledQuestionRadioOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: selectedValue === value,
-    onClick: function onClick(e) {
+    onClick: e => {
       e.preventDefault();
       if (disabled) {
         return;
       }
       onSelect(value);
     },
-    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
-    })]
-  });
+    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));
 });
 
 exports.default = QuestionRadioOption;

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

@@ -8,9 +8,10 @@ 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:", ";}}"], function (_ref) {
-    var checked = _ref.checked,
-      status = _ref.status;
+  return styled.css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";table tbody > tr:nth-child(odd) > td{background-color:", ";}}"], ({
+    checked,
+    status
+  }) => {
     switch (status) {
       case 'correct':
         return color.CORRECT_TEXT_COLOR;
@@ -19,10 +20,11 @@ function getQuestionStatusStyle() {
       default:
         return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
     }
-  }, function (_ref2) {
-    var checked = _ref2.checked,
-      status = _ref2.status;
-    return checked || status !== 'answer' ? "rgba(0, 0, 0, 0.08);" : null;
+  }, ({
+    checked,
+    status
+  }) => {
+    return checked || status !== 'answer' ? `rgba(0, 0, 0, 0.08);` : null;
   });
 }
 

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

@@ -1,20 +1,11 @@
 'use strict';
 
-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];
+const mergeRefs = (...refs) => element => refs.forEach(ref => {
+  if (typeof ref === 'function') {
+    ref(element);
+  } else if (ref && typeof ref === 'object') {
+    ref.current = element;
   }
-  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';
 
-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';
+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';
 
 exports.MATERIAL_QUIZ_ANSWER_ID = MATERIAL_QUIZ_ANSWER_ID;
 exports.MATERIAL_QUIZ_CONTAINER_ID = MATERIAL_QUIZ_CONTAINER_ID;

package/cjs/helpers/index.js

@@ -22,11 +22,12 @@ function getQuizResultStatus(materialQuizResponse) {
   }
   return exports.QuizResultStatus.NotSubmitted;
 }
-var getOptionStatus = function getOptionStatus(_ref) {
-  var isSelected = _ref.isSelected,
-    isActive = _ref.isActive,
-    materialQuizResponse = _ref.materialQuizResponse;
-  var status = getQuizResultStatus(materialQuizResponse);
+const getOptionStatus = ({
+  isSelected,
+  isActive,
+  materialQuizResponse
+}) => {
+  const status = getQuizResultStatus(materialQuizResponse);
   if (isActive) {
     return;
   }
@@ -43,8 +44,9 @@ var getOptionStatus = function getOptionStatus(_ref) {
 function checkUserLectureTestEnded(lecture) {
   return (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed;
 }
-function shouldResetOptions(_ref2) {
-  var materialQuizResponse = _ref2.materialQuizResponse;
+function shouldResetOptions({
+  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
@@ -52,7 +54,7 @@ function shouldResetOptions(_ref2) {
   return [(materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.score) !== null].every(Boolean);
 }
 function getQuizResult(materialQuizResponse) {
-  var status = getQuizResultStatus(materialQuizResponse);
+  const status = getQuizResultStatus(materialQuizResponse);
   switch (status) {
     case exports.QuizResultStatus.Correct:
       return true;

package/cjs/hooks/useCaculatePassage.js

@@ -1,34 +1,33 @@
 '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');
 
-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 () {
+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 _a, _b;
-    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;
+    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;
     if (currentContainerHeight && questionDetailHeight && materialQuiz) {
       setIsLongPassage(questionDetailHeight > currentContainerHeight);
       // add timeout for forcing caculate layout and render in the parent
       // finish before turning off loading
-      setTimeout(function () {
+      setTimeout(() => {
         setIsInitialLoading(false);
       }, 300);
     } else if (materialQuiz && !materialQuiz.questionDescription) {
@@ -36,8 +35,8 @@ var useCaculatePassage = function useCaculatePassage() {
     }
   }, [containerHeight, questionDetailHeight, materialQuiz, setIsLongPassage, vertical, setIsInitialLoading]);
   return {
-    questionRef: questionRef,
-    containerRef: containerRef
+    questionRef,
+    containerRef
   };
 };
 

package/es/components/eb-sortable/EbDraggable.js

@@ -1,106 +1,102 @@
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import $ from 'jquery';
 import 'jquery-ui/ui/widgets/draggable';
 
-var EbDraggable = function EbDraggable(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$revert = _ref.revert,
-    revert = _ref$revert === void 0 ? true : _ref$revert,
-    _ref$clone = _ref.clone,
-    clone = _ref$clone === void 0 ? false : _ref$clone,
-    className = _ref.className,
-    onStart = _ref.onStart,
-    onStop = _ref.onStop,
-    onDrag = _ref.onDrag,
-    onCreate = _ref.onCreate;
-  var rootEl = React.useRef(null);
-  var onStartCallback = React.useCallback(function (event, ui) {
+const EbDraggable = ({
+  children,
+  id,
+  disabled = false,
+  revert = true,
+  clone = false,
+  className,
+  onStart,
+  onStop,
+  onDrag,
+  onCreate
+}) => {
+  const rootEl = React.useRef(null);
+  const onStartCallback = React.useCallback((event, ui) => {
     if (onStart) {
       return onStart(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onStart]);
-  var onStopCallback = React.useCallback(function (event, ui) {
+  const onStopCallback = React.useCallback((event, ui) => {
     if (onStop) {
       return onStop(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onStop]);
-  var onDragCallback = React.useCallback(function (event, ui) {
+  const onDragCallback = React.useCallback((event, ui) => {
     if (onDrag) {
       return onDrag(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onDrag]);
-  var onCreateCallback = React.useCallback(function (event, ui) {
+  const onCreateCallback = React.useCallback((event, ui) => {
     if (onCreate) {
       return onCreate(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onCreate]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!rootEl.current) {
       return;
     }
-    var draggableEl = $(rootEl.current);
+    const draggableEl = $(rootEl.current);
     draggableEl.draggable(Object.assign(Object.assign(Object.assign(Object.assign({}, disabled ? {
-      disabled: disabled
+      disabled
     } : null), revert ? {
-      revert: revert
+      revert
     } : null), clone ? {
       helper: 'clone'
     } : null), {
       zIndex: 200,
       revertDuration: 0,
-      start: function start(event, ui) {
+      start: (event, ui) => {
         if (!onStartCallback) {
           return;
         }
         onStartCallback(event, ui);
       },
-      stop: function stop(event, ui) {
+      stop: (event, ui) => {
         if (!onStopCallback) {
           return;
         }
         // draggableEl.draggable('cancel');
         onStopCallback(event, ui);
       },
-      drag: function drag(event, ui) {
+      drag: (event, ui) => {
         onDragCallback(event, ui);
       },
-      create: function create(event, ui) {
+      create: (event, ui) => {
         onCreateCallback(event, ui);
       }
     }));
-    return function () {
+    return () => {
       draggableEl.draggable('destroy');
     };
   }, [clone, disabled, onCreateCallback, onDragCallback, onStartCallback, onStopCallback, revert]);
-  return jsx("div", {
+  return React.createElement("div", {
     ref: rootEl,
     id: id,
     className: className,
     style: {
       cursor: disabled ? 'auto' : 'move'
-    },
-    children: children
-  });
+    }
+  }, children);
 };
 
 export { EbDraggable as default };

package/es/components/eb-sortable/EbDroppable.js

@@ -1,53 +1,51 @@
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import $ from 'jquery';
 import 'jquery-ui/ui/widgets/droppable';
 
-var EbDroppable = function EbDroppable(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    accept = _ref.accept,
-    className = _ref.className,
-    onDrop = _ref.onDrop;
-  var rootEl = React.useRef(null);
-  var onDropCallback = React.useCallback(function (event, ui) {
+const EbDroppable = ({
+  children,
+  id,
+  disabled = false,
+  accept,
+  className,
+  onDrop
+}) => {
+  const rootEl = React.useRef(null);
+  const onDropCallback = React.useCallback((event, ui) => {
     if (onDrop) {
       return onDrop(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onDrop]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!rootEl.current) {
       return;
     }
-    var draggableEl = $(rootEl.current);
+    const draggableEl = $(rootEl.current);
     draggableEl.droppable(Object.assign(Object.assign(Object.assign({}, disabled ? {
-      disabled: disabled
+      disabled
     } : null), accept ? {
-      accept: accept
+      accept
     } : null), {
-      drop: function drop(event, ui) {
+      drop: (event, ui) => {
         if (!onDropCallback) {
           return;
         }
         onDropCallback(event, ui);
       }
     }));
-    return function () {
+    return () => {
       draggableEl.droppable('destroy');
     };
   }, [accept, disabled, onDropCallback]);
-  return jsx("div", {
+  return React.createElement("div", {
     ref: rootEl,
     id: id,
-    className: className,
-    children: children
-  });
+    className: className
+  }, children);
 };
 
 export { EbDroppable as default };

package/es/components/markdown-editor/index.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import type { EliceWysiwygEditorProps } from '@elice/wysiwyg';
-export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => JSX.Element;
+export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => React.JSX.Element;

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

@@ -1,28 +1,23 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useDebounce } from 'react-use';
 import { EliceWysiwygEditor } from '@elice/wysiwyg';
 
-var STATE_SYNC_DEBOUNCE_TIME = 50;
-var MarkdownEditor = function MarkdownEditor(_a) {
-  var value = _a.value,
-    onChange = _a.onChange,
+const STATE_SYNC_DEBOUNCE_TIME = 50;
+const MarkdownEditor = _a => {
+  var {
+      value,
+      onChange
+    } = _a,
     props = __rest(_a, ["value", "onChange"]);
-  var _React$useState = React.useState(value),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    __value = _React$useState2[0],
-    __setValue = _React$useState2[1];
-  useDebounce(function () {
-    return __setValue(value);
-  }, STATE_SYNC_DEBOUNCE_TIME, [value]);
-  useDebounce(function () {
+  const [__value, __setValue] = React.useState(value);
+  useDebounce(() => __setValue(value), STATE_SYNC_DEBOUNCE_TIME, [value]);
+  useDebounce(() => {
     if (__value !== value && typeof onChange === 'function') {
       onChange(__value !== null && __value !== void 0 ? __value : '');
     }
   }, STATE_SYNC_DEBOUNCE_TIME, [__value]);
-  return jsx(EliceWysiwygEditor, Object.assign({
+  return React.createElement(EliceWysiwygEditor, Object.assign({
     value: value,
     onChange: __setValue
   }, props));