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

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.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 icons = require('@elice/icons');
@@ -11,55 +11,63 @@ var styled = require('styled-components');
 var EbDraggable = require('../../eb-sortable/EbDraggable.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 
-const StyledDraggbleOption = styled(EbDraggable.default).withConfig({
+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({
   componentId: "sc-1b3vxse-0"
-})(["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({
+})(["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({
   componentId: "sc-1b3vxse-1"
-})(["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({
+})(["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({
   componentId: "sc-1b3vxse-2"
-})(["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({
+})(["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({
   componentId: "sc-1b3vxse-3"
 })(["position:absolute;top:0.5rem;right:0.5rem;border-radius:1rem;"]);
-const MaterialQuizGroupOptionItem = ({
-  option,
-  onClose
-}) => {
+var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
+  var option = _ref7.option,
+    onClose = _ref7.onClose;
   var _a;
-  const {
-    vertical,
-    userId
-  } = MaterialQuizContext.useMaterialQuizState();
-  const isOptionTitle = Boolean(option.options.title);
-  const isOptionContent = Boolean(option.options.content);
-  const renderRemoveItem = () => {
+  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() {
     if (typeof onClose !== 'function') {
       return null;
     }
     if (!!userId) {
       return null;
     }
-    return React.createElement(StyledOptionRemoveIcon, {
+    return jsxRuntime.jsx(StyledOptionRemoveIcon, {
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray1",
       size: "micro",
-      onClick: e => {
+      onClick: function onClick(e) {
         e.stopPropagation();
         onClose();
       }
@@ -68,27 +76,31 @@ const MaterialQuizGroupOptionItem = ({
   //
   //
   //
-  return React.createElement(StyledDraggbleOption, {
+  return jsxRuntime.jsxs(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,
-    isOptionContent: isOptionContent
-  }, React.createElement(blocks.Text, {
-    size: vertical ? 'small' : 'default',
-    textAlign: "center",
-    wordBreak: "break-all",
-    bold: true
-  }, option.options.title)) : null, renderRemoveItem());
+    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()]
+  });
 };
 
 exports.default = MaterialQuizGroupOptionItem;

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

@@ -4,6 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const QuizGroupContext = React.createContext(null);
+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);
 
 exports.default = QuizGroupContext;

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

@@ -2,6 +2,7 @@
 
 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');
@@ -12,29 +13,32 @@ var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var MaterialQuizEditContent = require('./MaterialQuizEditContent.js');
 
-const MaterialQuizEdit = React.forwardRef(({
-  value,
-  disabled = false,
-  onChange,
-  onFormStateChange,
-  onFileUploadRequest,
-  __intl
-}, ref) => {
-  const formElRef = React.useRef(null);
-  const useFormMethods = reactHookForm.useForm({
+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({
     defaultValues: editValue.manipulateValue(value),
     mode: 'onBlur'
   });
-  const watchedMaterialQuizEditValue = useFormMethods.watch();
-  const {
-    isDirty,
-    isValid
-  } = useFormMethods.formState;
+  var watchedMaterialQuizEditValue = useFormMethods.watch();
+  var _useFormMethods$formS = useFormMethods.formState,
+    isDirty = _useFormMethods$formS.isDirty,
+    isValid = _useFormMethods$formS.isValid;
   //
   // Reset from value, when `value` changes.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  materialSharedUtils.useDeepClonedCompareEffect(() => {
+  materialSharedUtils.useDeepClonedCompareEffect(function () {
     useFormMethods.reset(editValue.manipulateValue(value), {
       keepDirty: true,
       keepErrors: true,
@@ -48,17 +52,17 @@ const MaterialQuizEdit = React.forwardRef(({
   // Emit `onChange` handler when form value changed.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  materialSharedUtils.useDeepClonedCompareEffect(() => {
+  materialSharedUtils.useDeepClonedCompareEffect(function () {
     onChange(editValue.restoreValue(watchedMaterialQuizEditValue));
   }, [watchedMaterialQuizEditValue]);
   //
   // Emit `onFormStateChange` handler when form state change.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (typeof onFormStateChange === 'function') {
       onFormStateChange({
-        isDirty,
-        isValid
+        isDirty: isDirty,
+        isValid: isValid
       });
     }
   },
@@ -67,25 +71,32 @@ const MaterialQuizEdit = React.forwardRef(({
   //
   // Set ref.
   //
-  React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, formElRef.current), {
-    reset: () => {
-      useFormMethods.reset(editValue.manipulateValue(value));
-      void useFormMethods.trigger();
-    }
-  }), [useFormMethods, value]);
+  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]);
   //
   //
   //
-  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)))));
+  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, {})
+        }))
+      })
+    })
+  });
 });
 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();