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

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
@@ -11,63 +11,55 @@ var styled = require('styled-components');
 var EbDraggable = require('../../eb-sortable/EbDraggable.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledDraggbleOption = styled__default.default(EbDraggable.default).withConfig({
+const StyledDraggbleOption = styled(EbDraggable.default).withConfig({
   componentId: "sc-1b3vxse-0"
-})(["display:flex;flex-direction:column;flex-shrink:", ";overflow:hidden;max-width:", ";height:fit-content;border-radius:0.5rem;background:", ";"], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? 0 : 1;
-}, function (_ref2) {
-  var vertical = _ref2.vertical;
-  return vertical ? '10.25rem' : '11.5rem';
-}, designTokens.base.color.navy8);
-var StyledOptionTitle = styled__default.default.div.withConfig({
+})(["display:flex;flex-direction:column;flex-shrink:", ";overflow:hidden;max-width:", ";height:fit-content;border-radius:0.5rem;background:", ";"], ({
+  vertical
+}) => vertical ? 0 : 1, ({
+  vertical
+}) => vertical ? '10.25rem' : '11.5rem', designTokens.base.color.navy8);
+const StyledOptionTitle = styled.div.withConfig({
   componentId: "sc-1b3vxse-1"
-})(["display:flex;justify-content:center;align-items:center;width:", ";height:", ";padding:0.5rem;background:", ";"], function (_ref3) {
-  var vertical = _ref3.vertical,
-    isOptionContent = _ref3.isOptionContent;
-  return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
-}, function (_ref4) {
-  var vertical = _ref4.vertical,
-    isOptionContent = _ref4.isOptionContent;
-  return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
-}, designTokens.base.color.white);
-var StyledOptionContent = styled__default.default.div.withConfig({
+})(["display:flex;justify-content:center;align-items:center;width:", ";height:", ";padding:0.5rem;background:", ";"], ({
+  vertical,
+  isOptionContent
+}) => isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem', ({
+  vertical,
+  isOptionContent
+}) => isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem', designTokens.base.color.white);
+const StyledOptionContent = styled.div.withConfig({
   componentId: "sc-1b3vxse-2"
-})(["display:flex;align-items:center;width:", ";height:", ";background:", ";& p{line-height:1;}"], function (_ref5) {
-  var vertical = _ref5.vertical;
-  return vertical ? '10.25rem' : '11.5rem';
-}, function (_ref6) {
-  var vertical = _ref6.vertical;
-  return vertical ? '10.25rem' : '11.5rem';
-}, designTokens.base.color.navy8);
-var StyledOptionRemoveIcon = styled__default.default(blocks.IconButton).withConfig({
+})(["display:flex;align-items:center;width:", ";height:", ";background:", ";& p{line-height:1;}"], ({
+  vertical
+}) => vertical ? '10.25rem' : '11.5rem', ({
+  vertical
+}) => vertical ? '10.25rem' : '11.5rem', designTokens.base.color.navy8);
+const StyledOptionRemoveIcon = styled(blocks.IconButton).withConfig({
   componentId: "sc-1b3vxse-3"
 })(["position:absolute;top:0.5rem;right:0.5rem;border-radius:1rem;"]);
-var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
-  var option = _ref7.option,
-    onClose = _ref7.onClose;
+const MaterialQuizGroupOptionItem = ({
+  option,
+  onClose
+}) => {
   var _a;
-  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
-    vertical = _useMaterialQuizState.vertical,
-    userId = _useMaterialQuizState.userId;
-  var isOptionTitle = Boolean(option.options.title);
-  var isOptionContent = Boolean(option.options.content);
-  var renderRemoveItem = function renderRemoveItem() {
+  const {
+    vertical,
+    userId
+  } = MaterialQuizContext.useMaterialQuizState();
+  const isOptionTitle = Boolean(option.options.title);
+  const isOptionContent = Boolean(option.options.content);
+  const renderRemoveItem = () => {
     if (typeof onClose !== 'function') {
       return null;
     }
     if (!!userId) {
       return null;
     }
-    return jsxRuntime.jsx(StyledOptionRemoveIcon, {
+    return React.createElement(StyledOptionRemoveIcon, {
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray1",
       size: "micro",
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         onClose();
       }
@@ -76,31 +68,27 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
   //
   //
   //
-  return jsxRuntime.jsxs(StyledDraggbleOption, {
+  return React.createElement(StyledDraggbleOption, {
     disabled: !!userId || vertical,
     id: option.order.toString(),
     className: "quiz-answer",
+    vertical: vertical
+  }, isOptionContent ? React.createElement(StyledOptionContent, {
+    vertical: vertical
+  }, React.createElement(markdown.MarkdownSSR, {
+    children: (_a = option.options.content) !== null && _a !== void 0 ? _a : '',
+    paddingx: 0,
+    paddingy: 0,
+    dark: true
+  })) : null, isOptionTitle ? React.createElement(StyledOptionTitle, {
     vertical: vertical,
-    children: [isOptionContent ? jsxRuntime.jsx(StyledOptionContent, {
-      vertical: vertical,
-      children: jsxRuntime.jsx(markdown.MarkdownSSR, {
-        children: (_a = option.options.content) !== null && _a !== void 0 ? _a : '',
-        paddingx: 0,
-        paddingy: 0,
-        dark: true
-      })
-    }) : null, isOptionTitle ? jsxRuntime.jsx(StyledOptionTitle, {
-      vertical: vertical,
-      isOptionContent: isOptionContent,
-      children: jsxRuntime.jsx(blocks.Text, {
-        size: vertical ? 'small' : 'default',
-        textAlign: "center",
-        wordBreak: "break-all",
-        bold: true,
-        children: option.options.title
-      })
-    }) : null, renderRemoveItem()]
-  });
+    isOptionContent: isOptionContent
+  }, React.createElement(blocks.Text, {
+    size: vertical ? 'small' : 'default',
+    textAlign: "center",
+    wordBreak: "break-all",
+    bold: true
+  }, option.options.title)) : null, renderRemoveItem());
 };
 
 exports.default = MaterialQuizGroupOptionItem;

package/cjs/components/material-quiz/material-quiz-group/context/context.js

@@ -4,10 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var QuizGroupContext = React__default.default.createContext(null);
+const QuizGroupContext = React.createContext(null);
 
 exports.default = QuizGroupContext;

package/cjs/components/material-quiz-edit/MaterialQuizEdit.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var intl = require('@elice/intl');
@@ -13,32 +12,29 @@ var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var MaterialQuizEditContent = require('./MaterialQuizEditContent.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onChange = _ref.onChange,
-    onFormStateChange = _ref.onFormStateChange,
-    onFileUploadRequest = _ref.onFileUploadRequest,
-    __intl = _ref.__intl;
-  var formElRef = React__default.default.useRef(null);
-  var useFormMethods = reactHookForm.useForm({
+const MaterialQuizEdit = React.forwardRef(({
+  value,
+  disabled = false,
+  onChange,
+  onFormStateChange,
+  onFileUploadRequest,
+  __intl
+}, ref) => {
+  const formElRef = React.useRef(null);
+  const useFormMethods = reactHookForm.useForm({
     defaultValues: editValue.manipulateValue(value),
     mode: 'onBlur'
   });
-  var watchedMaterialQuizEditValue = useFormMethods.watch();
-  var _useFormMethods$formS = useFormMethods.formState,
-    isDirty = _useFormMethods$formS.isDirty,
-    isValid = _useFormMethods$formS.isValid;
+  const watchedMaterialQuizEditValue = useFormMethods.watch();
+  const {
+    isDirty,
+    isValid
+  } = useFormMethods.formState;
   //
   // Reset from value, when `value` changes.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  materialSharedUtils.useDeepClonedCompareEffect(function () {
+  materialSharedUtils.useDeepClonedCompareEffect(() => {
     useFormMethods.reset(editValue.manipulateValue(value), {
       keepDirty: true,
       keepErrors: true,
@@ -52,17 +48,17 @@ var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
   // Emit `onChange` handler when form value changed.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  materialSharedUtils.useDeepClonedCompareEffect(function () {
+  materialSharedUtils.useDeepClonedCompareEffect(() => {
     onChange(editValue.restoreValue(watchedMaterialQuizEditValue));
   }, [watchedMaterialQuizEditValue]);
   //
   // Emit `onFormStateChange` handler when form state change.
   //
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (typeof onFormStateChange === 'function') {
       onFormStateChange({
-        isDirty: isDirty,
-        isValid: isValid
+        isDirty,
+        isValid
       });
     }
   },
@@ -71,32 +67,25 @@ var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
   //
   // Set ref.
   //
-  React__default.default.useImperativeHandle(ref, function () {
-    return Object.assign(Object.assign({}, formElRef.current), {
-      reset: function reset() {
-        useFormMethods.reset(editValue.manipulateValue(value));
-        void useFormMethods.trigger();
-      }
-    });
-  }, [useFormMethods, value]);
+  React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, formElRef.current), {
+    reset: () => {
+      useFormMethods.reset(editValue.manipulateValue(value));
+      void useFormMethods.trigger();
+    }
+  }), [useFormMethods, value]);
   //
   //
   //
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsx("form", {
-      ref: formElRef,
-      children: jsxRuntime.jsx(context.default.Provider, {
-        value: {
-          disabled: disabled,
-          onFileUploadRequest: onFileUploadRequest
-        },
-        children: jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, useFormMethods, {
-          children: jsxRuntime.jsx(MaterialQuizEditContent.default, {})
-        }))
-      })
-    })
-  });
+  return React.createElement(intl.RawEliceIntlProvider, {
+    value: __intl
+  }, React.createElement("form", {
+    ref: formElRef
+  }, React.createElement(context.default.Provider, {
+    value: {
+      disabled,
+      onFileUploadRequest
+    }
+  }, React.createElement(reactHookForm.FormProvider, Object.assign({}, useFormMethods), React.createElement(MaterialQuizEditContent.default, null)))));
 });
 var MaterialQuizEdit$1 = new intl.IntlComponentBuilder(MaterialQuizEdit).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();