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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { IconButton, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
@@ -7,55 +7,59 @@ import styled from 'styled-components';
 import EbDraggable from '../../eb-sortable/EbDraggable.js';
 import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 
-const StyledDraggbleOption = styled(EbDraggable).withConfig({
+var StyledDraggbleOption = styled(EbDraggable).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', 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';
+}, base.color.navy8);
+var StyledOptionTitle = styled.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', 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';
+}, base.color.white);
+var StyledOptionContent = styled.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', base.color.navy8);
-const StyledOptionRemoveIcon = styled(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';
+}, base.color.navy8);
+var StyledOptionRemoveIcon = styled(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
-  } = useMaterialQuizState();
-  const isOptionTitle = Boolean(option.options.title);
-  const isOptionContent = Boolean(option.options.content);
-  const renderRemoveItem = () => {
+  var _useMaterialQuizState = 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 jsx(StyledOptionRemoveIcon, {
       icon: eilMathsignMultiplyBasic,
       role: "gray1",
       size: "micro",
-      onClick: e => {
+      onClick: function onClick(e) {
         e.stopPropagation();
         onClose();
       }
@@ -64,27 +68,31 @@ const MaterialQuizGroupOptionItem = ({
   //
   //
   //
-  return React.createElement(StyledDraggbleOption, {
+  return jsxs(StyledDraggbleOption, {
     disabled: !!userId || vertical,
     id: option.order.toString(),
     className: "quiz-answer",
-    vertical: vertical
-  }, isOptionContent ? React.createElement(StyledOptionContent, {
-    vertical: vertical
-  }, React.createElement(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(Text, {
-    size: vertical ? 'small' : 'default',
-    textAlign: "center",
-    wordBreak: "break-all",
-    bold: true
-  }, option.options.title)) : null, renderRemoveItem());
+    children: [isOptionContent ? jsx(StyledOptionContent, {
+      vertical: vertical,
+      children: jsx(MarkdownSSR, {
+        children: (_a = option.options.content) !== null && _a !== void 0 ? _a : '',
+        paddingx: 0,
+        paddingy: 0,
+        dark: true
+      })
+    }) : null, isOptionTitle ? jsx(StyledOptionTitle, {
+      vertical: vertical,
+      isOptionContent: isOptionContent,
+      children: jsx(Text, {
+        size: vertical ? 'small' : 'default',
+        textAlign: "center",
+        wordBreak: "break-all",
+        bold: true,
+        children: option.options.title
+      })
+    }) : null, renderRemoveItem()]
+  });
 };
 
 export { MaterialQuizGroupOptionItem as default };

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

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const QuizGroupContext = React.createContext(null);
+var QuizGroupContext = React.createContext(null);
 
 export { QuizGroupContext as default };

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

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { RawEliceIntlProvider, IntlComponentBuilder } from '@elice/intl';
@@ -8,29 +9,28 @@ import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import MaterialQuizEditContent from './MaterialQuizEditContent.js';
 
-const MaterialQuizEdit = forwardRef(({
-  value,
-  disabled = false,
-  onChange,
-  onFormStateChange,
-  onFileUploadRequest,
-  __intl
-}, ref) => {
-  const formElRef = React.useRef(null);
-  const useFormMethods = useForm({
+var MaterialQuizEdit = 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.useRef(null);
+  var useFormMethods = useForm({
     defaultValues: 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`.
   //
-  useDeepClonedCompareEffect(() => {
+  useDeepClonedCompareEffect(function () {
     useFormMethods.reset(manipulateValue(value), {
       keepDirty: true,
       keepErrors: true,
@@ -44,17 +44,17 @@ const MaterialQuizEdit = forwardRef(({
   // Emit `onChange` handler when form value changed.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  useDeepClonedCompareEffect(() => {
+  useDeepClonedCompareEffect(function () {
     onChange(restoreValue(watchedMaterialQuizEditValue));
   }, [watchedMaterialQuizEditValue]);
   //
   // Emit `onFormStateChange` handler when form state change.
   //
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (typeof onFormStateChange === 'function') {
       onFormStateChange({
-        isDirty,
-        isValid
+        isDirty: isDirty,
+        isValid: isValid
       });
     }
   },
@@ -63,25 +63,32 @@ const MaterialQuizEdit = forwardRef(({
   //
   // Set ref.
   //
-  React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, formElRef.current), {
-    reset: () => {
-      useFormMethods.reset(manipulateValue(value));
-      void useFormMethods.trigger();
-    }
-  }), [useFormMethods, value]);
+  React.useImperativeHandle(ref, function () {
+    return Object.assign(Object.assign({}, formElRef.current), {
+      reset: function reset() {
+        useFormMethods.reset(manipulateValue(value));
+        void useFormMethods.trigger();
+      }
+    });
+  }, [useFormMethods, value]);
   //
   //
   //
-  return React.createElement(RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement("form", {
-    ref: formElRef
-  }, React.createElement(MaterialQuizEditContext.Provider, {
-    value: {
-      disabled,
-      onFileUploadRequest
-    }
-  }, React.createElement(FormProvider, Object.assign({}, useFormMethods), React.createElement(MaterialQuizEditContent, null)))));
+  return jsx(RawEliceIntlProvider, {
+    value: __intl,
+    children: jsx("form", {
+      ref: formElRef,
+      children: jsx(MaterialQuizEditContext.Provider, {
+        value: {
+          disabled: disabled,
+          onFileUploadRequest: onFileUploadRequest
+        },
+        children: jsx(FormProvider, Object.assign({}, useFormMethods, {
+          children: jsx(MaterialQuizEditContent, {})
+        }))
+      })
+    })
+  });
 });
 var MaterialQuizEdit$1 = new IntlComponentBuilder(MaterialQuizEdit).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();