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

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { IconButton, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
@@ -7,59 +7,55 @@ import styled from 'styled-components';
 import EbDraggable from '../../eb-sortable/EbDraggable.js';
 import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 
-var StyledDraggbleOption = styled(EbDraggable).withConfig({
+const 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:", ";"], 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({
+})(["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({
   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';
-}, base.color.white);
-var StyledOptionContent = styled.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', 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';
-}, base.color.navy8);
-var StyledOptionRemoveIcon = styled(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', base.color.navy8);
+const StyledOptionRemoveIcon = styled(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 = 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
+  } = 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 jsx(StyledOptionRemoveIcon, {
+    return React.createElement(StyledOptionRemoveIcon, {
       icon: eilMathsignMultiplyBasic,
       role: "gray1",
       size: "micro",
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         onClose();
       }
@@ -68,31 +64,27 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
   //
   //
   //
-  return 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(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 ? 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()]
-  });
+    isOptionContent: isOptionContent
+  }, React.createElement(Text, {
+    size: vertical ? 'small' : 'default',
+    textAlign: "center",
+    wordBreak: "break-all",
+    bold: true
+  }, 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';
 
-var QuizGroupContext = React.createContext(null);
+const QuizGroupContext = React.createContext(null);
 
 export { QuizGroupContext as default };

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

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