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

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

@@ -1,4 +1,3 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Flex, Button, Vspace, Text, Icon } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -10,169 +9,141 @@ import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 import QuizGroupContext from './context/context.js';
 import MaterialQuizGroupOptionItem from './MaterialQuizGroupOptionItem.js';
 
-var QUIZ_OPTIONS_CONTENT_WIDTH = 534;
-var StyledQuizAnswerWrapper = styled.div.withConfig({
+const QUIZ_OPTIONS_CONTENT_WIDTH = 534;
+const StyledQuizAnswerWrapper = styled.div.withConfig({
   componentId: "sc-18trt81-0"
 })(["display:flex;flex-direction:column;flex:0 0 calc((100% - ", "px) / 2);"], QUIZ_OPTIONS_CONTENT_WIDTH);
-var StyledQuizAnswerDropzoneWrapper = styled.div.withConfig({
+const StyledQuizAnswerDropzoneWrapper = styled.div.withConfig({
   componentId: "sc-18trt81-1"
 })(["padding:1rem;border-radius:0.5rem;background:", ";&:not(:last-child){margin-bottom:1rem;}"], base.color.white);
-var StyledQuizAnswerDropzone = styled(EbDroppable).withConfig({
+const StyledQuizAnswerDropzone = styled(EbDroppable).withConfig({
   componentId: "sc-18trt81-2"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:", ";align-items:", ";min-width:12.5rem;min-height:16.25rem;padding:0.5rem;border-radius:0.5rem;background:", ";text-align:center;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], function (_ref) {
-  var isGroupAnswer = _ref.isGroupAnswer;
-  return isGroupAnswer ? 'flex-start' : 'center';
-}, function (_ref2) {
-  var isGroupAnswer = _ref2.isGroupAnswer;
-  return isGroupAnswer ? 'flex-start' : 'center';
-}, base.color.gray1, base.color.gray3, base.color.navy4);
-var StyledQuizOptions = styled.div.withConfig({
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:", ";align-items:", ";min-width:12.5rem;min-height:16.25rem;padding:0.5rem;border-radius:0.5rem;background:", ";text-align:center;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], ({
+  isGroupAnswer
+}) => isGroupAnswer ? 'flex-start' : 'center', ({
+  isGroupAnswer
+}) => isGroupAnswer ? 'flex-start' : 'center', base.color.gray1, base.color.gray3, base.color.navy4);
+const StyledQuizOptions = styled.div.withConfig({
   componentId: "sc-18trt81-3"
 })(["display:flex;flex-direction:column;width:26.125rem;height:fit-content;padding:1rem;background-color:", ";border-radius:0.5rem;outline:1px dashed ", ";"], base.color.navy6, base.color.navy4);
-var StyledQuizOptionsDropzone = styled(EbDroppable).withConfig({
+const StyledQuizOptionsDropzone = styled(EbDroppable).withConfig({
   componentId: "sc-18trt81-4"
 })(["display:flex;flex-wrap:wrap;gap:1rem;min-height:10.25rem;border-radius:0.5rem;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], base.color.navy4, base.color.gray4);
-var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
-  var intl = useRawEliceIntl();
-  var _useMaterialQuizState = useMaterialQuizState(),
-    userId = _useMaterialQuizState.userId;
-  var _React$useContext = React.useContext(QuizGroupContext),
-    groupList = _React$useContext.groupList,
-    currentAnswerList = _React$useContext.currentAnswerList,
-    currentOptionList = _React$useContext.currentOptionList,
-    updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
-    updateCurrentOption = _React$useContext.updateCurrentOption,
-    handleAnswerReset = _React$useContext.handleAnswerReset;
+const MaterialQuizGroupDesktop = () => {
+  const intl = useRawEliceIntl();
+  const {
+    userId
+  } = useMaterialQuizState();
+  const {
+    groupList,
+    currentAnswerList,
+    currentOptionList,
+    updateCurrentAnswer,
+    updateCurrentOption,
+    handleAnswerReset
+  } = React.useContext(QuizGroupContext);
   /**
    *
    */
-  var renderQuizContentSortation = function renderQuizContentSortation() {
-    return jsx(Flex, {
+  const renderQuizContentSortation = () => {
+    return React.createElement(Flex, {
       align: "center",
-      margin: "0 1.25rem",
-      children: jsx(Icon, {
-        size: "large",
-        icon: eilSortItem,
-        rotate: 90,
-        color: "white"
-      })
-    });
+      margin: "0 1.25rem"
+    }, React.createElement(Icon, {
+      size: "large",
+      icon: eilSortItem,
+      rotate: 90,
+      color: "white"
+    }));
   };
   /**
    *
    */
-  var renderQuizGroupAnswer = function renderQuizGroupAnswer(title, dropzoneIndex) {
+  const renderQuizGroupAnswer = (title, dropzoneIndex) => {
     var _a, _b;
-    var isGroupAnswer = Boolean((_a = currentAnswerList[dropzoneIndex]) === null || _a === void 0 ? void 0 : _a.length);
-    return jsxs(StyledQuizAnswerDropzoneWrapper, {
-      children: [jsx(Text, {
-        size: "large",
-        bold: true,
-        children: title
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(StyledQuizAnswerDropzone, {
-        accept: ".quiz-answer",
-        disabled: !!userId,
-        isGroupAnswer: isGroupAnswer,
-        onDrop: function onDrop(event, ui) {
-          var targetId = Number(ui.draggable[0].id);
-          updateCurrentAnswer(targetId, dropzoneIndex);
-        },
-        children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
-          return jsx(MaterialQuizGroupOptionItem, {
-            option: answer
-          }, index);
-        }) : jsx(Text, {
-          role: "gray5",
-          bold: true,
-          children: intl.formatMessage({
-            id: 'materialQuiz.dropzone.desktop.answerEmpty'
-          })
-        })
-      })]
-    });
+    const isGroupAnswer = Boolean((_a = currentAnswerList[dropzoneIndex]) === null || _a === void 0 ? void 0 : _a.length);
+    return React.createElement(StyledQuizAnswerDropzoneWrapper, null, React.createElement(Text, {
+      size: "large",
+      bold: true
+    }, title), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(StyledQuizAnswerDropzone, {
+      accept: ".quiz-answer",
+      disabled: !!userId,
+      isGroupAnswer: isGroupAnswer,
+      onDrop: (event, ui) => {
+        const targetId = Number(ui.draggable[0].id);
+        updateCurrentAnswer(targetId, dropzoneIndex);
+      }
+    }, isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map((answer, index) => React.createElement(MaterialQuizGroupOptionItem, {
+      key: index,
+      option: answer
+    })) : React.createElement(Text, {
+      role: "gray5",
+      bold: true
+    }, intl.formatMessage({
+      id: 'materialQuiz.dropzone.desktop.answerEmpty'
+    }))));
   };
   /**
    *
    */
-  var renderQuizContentLeft = function renderQuizContentLeft() {
-    return jsx(StyledQuizAnswerWrapper, {
-      children: groupList.filter(function (_, index) {
-        return !(index % 2);
-      }).map(function (group, index) {
-        return jsx(React.Fragment, {
-          children: renderQuizGroupAnswer(group, index * 2)
-        }, index);
-      })
-    });
+  const renderQuizContentLeft = () => {
+    return React.createElement(StyledQuizAnswerWrapper, null, groupList.filter((_, index) => !(index % 2)).map((group, index) => React.createElement(React.Fragment, {
+      key: index
+    }, renderQuizGroupAnswer(group, index * 2))));
   };
   /**
    *
    */
-  var renderQuizContentRight = function renderQuizContentRight() {
-    return jsx(StyledQuizAnswerWrapper, {
-      children: groupList.filter(function (_, index) {
-        return index % 2;
-      }).map(function (group, index) {
-        return jsx(React.Fragment, {
-          children: renderQuizGroupAnswer(group, index * 2 + 1)
-        }, index);
-      })
-    });
+  const renderQuizContentRight = () => {
+    return React.createElement(StyledQuizAnswerWrapper, null, groupList.filter((_, index) => index % 2).map((group, index) => React.createElement(React.Fragment, {
+      key: index
+    }, renderQuizGroupAnswer(group, index * 2 + 1))));
   };
   /**
    *
    */
-  var renderQuizContentOption = function renderQuizContentOption() {
-    return jsxs(Flex, {
-      height: "fit-content",
-      children: [renderQuizContentSortation(), jsxs(StyledQuizOptions, {
-        children: [jsx(Button, {
-          role: "white",
-          size: "small",
-          disabled: !!userId,
-          onClick: handleAnswerReset,
-          children: intl.formatMessage({
-            id: 'materialQuiz.dropzone.optionReset'
-          })
-        }), jsx(Vspace, {
-          height: 1
-        }), jsx(StyledQuizOptionsDropzone, {
-          accept: ".quiz-answer",
-          onDrop: function onDrop(event, ui) {
-            var targetId = Number(ui.draggable[0].id);
-            updateCurrentOption(targetId);
-          },
-          children: currentOptionList.length ? currentOptionList.map(function (option, index) {
-            return jsx(MaterialQuizGroupOptionItem, {
-              option: option
-            }, index);
-          }) : jsx(Flex, {
-            justify: "center",
-            align: "center",
-            width: "100%",
-            children: jsx(Text, {
-              role: "navy",
-              textAlign: "center",
-              bold: true,
-              children: intl.formatMessage({
-                id: 'materialQuiz.dropzone.optionEmpty'
-              })
-            })
-          })
-        })]
-      }), renderQuizContentSortation()]
-    });
+  const renderQuizContentOption = () => {
+    return React.createElement(Flex, {
+      height: "fit-content"
+    }, renderQuizContentSortation(), React.createElement(StyledQuizOptions, null, React.createElement(Button, {
+      role: "white",
+      size: "small",
+      disabled: !!userId,
+      onClick: handleAnswerReset
+    }, intl.formatMessage({
+      id: 'materialQuiz.dropzone.optionReset'
+    })), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(StyledQuizOptionsDropzone, {
+      accept: ".quiz-answer",
+      onDrop: (event, ui) => {
+        const targetId = Number(ui.draggable[0].id);
+        updateCurrentOption(targetId);
+      }
+    }, currentOptionList.length ? currentOptionList.map((option, index) => React.createElement(MaterialQuizGroupOptionItem, {
+      key: index,
+      option: option
+    })) : React.createElement(Flex, {
+      justify: "center",
+      align: "center",
+      width: "100%"
+    }, React.createElement(Text, {
+      role: "navy",
+      textAlign: "center",
+      bold: true
+    }, intl.formatMessage({
+      id: 'materialQuiz.dropzone.optionEmpty'
+    }))))), renderQuizContentSortation());
   };
   //
   //
   //
-  return jsxs(Flex, {
+  return React.createElement(Flex, {
     width: "100%",
-    height: "100%",
-    children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
-  });
+    height: "100%"
+  }, renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight());
 };
 
 export { MaterialQuizGroupDesktop as default };

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

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Button, Vspace, Text, BottomSheet } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -9,158 +7,136 @@ import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 import QuizGroupContext from './context/context.js';
 import MaterialQuizGroupOptionItem from './MaterialQuizGroupOptionItem.js';
 
-var StyledQuizGroupWrapper = styled.div.withConfig({
+const StyledQuizGroupWrapper = styled.div.withConfig({
   componentId: "sc-bftjpj-0"
 })(["display:flex;flex-direction:column;overflow:hidden;width:100%;padding:1rem;background:", ";border-radius:0.5rem;&:hover{cursor:pointer;}&:not(:last-child){margin-bottom:1rem;}"], base.color.white);
-var StyledQuizOptionList = styled.div.withConfig({
+const StyledQuizOptionList = styled.div.withConfig({
   componentId: "sc-bftjpj-1"
-})(["display:flex;align-items:", ";gap:0.5rem;overflow-x:auto;min-height:223px;padding:1rem;border-radius:0.5rem;background:", ";outline-color:", ";"], function (_ref) {
-  var isCurrentOptionList = _ref.isCurrentOptionList;
-  return isCurrentOptionList ? 'flex-start' : 'center';
-}, base.color.gray1, base.color.gray3);
-var StyledQuizOptionItem = styled.div.withConfig({
+})(["display:flex;align-items:", ";gap:0.5rem;overflow-x:auto;min-height:223px;padding:1rem;border-radius:0.5rem;background:", ";outline-color:", ";"], ({
+  isCurrentOptionList
+}) => isCurrentOptionList ? 'flex-start' : 'center', base.color.gray1, base.color.gray3);
+const StyledQuizOptionItem = styled.div.withConfig({
   componentId: "sc-bftjpj-2"
 })(["&:hover{cursor:pointer;}"]);
-var StyledBottomSheetWrapper = styled(StyledQuizOptionList).withConfig({
+const StyledBottomSheetWrapper = styled(StyledQuizOptionList).withConfig({
   componentId: "sc-bftjpj-3"
-})(["align-items:", ";padding:0.5rem;"], function (_ref2) {
-  var vertical = _ref2.vertical,
-    isCurrentOptionList = _ref2.isCurrentOptionList;
-  return vertical && isCurrentOptionList ? 'flex-start' : 'center';
-});
-var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
-  var intl = useRawEliceIntl();
+})(["align-items:", ";padding:0.5rem;"], ({
+  vertical,
+  isCurrentOptionList
+}) => vertical && isCurrentOptionList ? 'flex-start' : 'center');
+const MaterialQuizGroupMobile = () => {
+  const intl = useRawEliceIntl();
   // context
-  var _useMaterialQuizState = useMaterialQuizState(),
-    materialQuiz = _useMaterialQuizState.materialQuiz,
-    userId = _useMaterialQuizState.userId,
-    vertical = _useMaterialQuizState.vertical;
-  var _React$useContext = React.useContext(QuizGroupContext),
-    currentOptionList = _React$useContext.currentOptionList,
-    currentAnswerList = _React$useContext.currentAnswerList,
-    updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
-    updateCurrentOption = _React$useContext.updateCurrentOption,
-    handleAnswerReset = _React$useContext.handleAnswerReset;
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dropzoneIndex = _React$useState2[0],
-    setDropzoneIndex = _React$useState2[1];
+  const {
+    materialQuiz,
+    userId,
+    vertical
+  } = useMaterialQuizState();
+  const {
+    currentOptionList,
+    currentAnswerList,
+    updateCurrentAnswer,
+    updateCurrentOption,
+    handleAnswerReset
+  } = React.useContext(QuizGroupContext);
+  const [dropzoneIndex, setDropzoneIndex] = React.useState(null);
   /**
    *
    */
-  var renderResetButton = function renderResetButton() {
-    return jsxs(Fragment, {
-      children: [jsx(Button, {
-        role: "white",
-        size: "small",
-        disabled: !!userId,
-        onClick: handleAnswerReset,
-        block: true,
-        children: intl.formatMessage({
-          id: 'materialQuiz.dropzone.optionReset'
-        })
-      }), jsx(Vspace, {
-        height: 1
-      })]
-    });
+  const renderResetButton = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Button, {
+      role: "white",
+      size: "small",
+      disabled: !!userId,
+      onClick: handleAnswerReset,
+      block: true
+    }, intl.formatMessage({
+      id: 'materialQuiz.dropzone.optionReset'
+    })), React.createElement(Vspace, {
+      height: 1
+    }));
   };
   /**
    *
    */
-  var renderGroupList = function renderGroupList() {
+  const renderGroupList = () => {
     var _a;
-    return jsx(Fragment, {
-      children: (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map(function (group, index) {
-        var _a;
-        var isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index]) === null || _a === void 0 ? void 0 : _a.length);
-        return jsxs(StyledQuizGroupWrapper, {
-          onClick: function onClick() {
-            return setDropzoneIndex(index);
-          },
-          children: [jsx(Text, {
-            size: "small",
-            bold: true,
-            children: group
-          }), jsx(Vspace, {
-            height: 0.5
-          }), jsx(StyledQuizOptionList, {
-            isCurrentOptionList: isCurrentOptionList,
-            children: isCurrentOptionList ? currentAnswerList[index].map(function (answer) {
-              return jsx(MaterialQuizGroupOptionItem, {
-                option: answer,
-                onClose: function onClose() {
-                  var targetId = answer.order;
-                  updateCurrentOption(targetId);
-                }
-              }, answer.order);
-            }) : jsx(Text, {
-              role: "gray6",
-              size: "small",
-              textAlign: "center",
-              bold: true,
-              block: true,
-              children: intl.formatMessage({
-                id: 'materialQuiz.dropzone.mobile.answerEmpty'
-              })
-            })
-          })]
-        }, index);
-      })
-    });
+    return React.createElement(React.Fragment, null, (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map((group, index) => {
+      var _a;
+      const isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index]) === null || _a === void 0 ? void 0 : _a.length);
+      return React.createElement(StyledQuizGroupWrapper, {
+        key: index,
+        onClick: () => setDropzoneIndex(index)
+      }, React.createElement(Text, {
+        size: "small",
+        bold: true
+      }, group), React.createElement(Vspace, {
+        height: 0.5
+      }), React.createElement(StyledQuizOptionList, {
+        isCurrentOptionList: isCurrentOptionList
+      }, isCurrentOptionList ? currentAnswerList[index].map(answer => React.createElement(MaterialQuizGroupOptionItem, {
+        key: answer.order,
+        option: answer,
+        onClose: () => {
+          const targetId = answer.order;
+          updateCurrentOption(targetId);
+        }
+      })) : React.createElement(Text, {
+        role: "gray6",
+        size: "small",
+        textAlign: "center",
+        bold: true,
+        block: true
+      }, intl.formatMessage({
+        id: 'materialQuiz.dropzone.mobile.answerEmpty'
+      }))));
+    }));
   };
   /**
    *
    */
-  var renderOptionListBottomSheet = function renderOptionListBottomSheet() {
-    var isCurrentOptionList = Boolean(currentOptionList.length);
-    return jsx(BottomSheet, {
+  const renderOptionListBottomSheet = () => {
+    const isCurrentOptionList = Boolean(currentOptionList.length);
+    return React.createElement(BottomSheet, {
       show: dropzoneIndex !== null,
       title: intl.formatMessage({
         id: 'materialQuiz.bottomSheet.title'
       }),
       contentsText: "",
       disableSwipeGesture: true,
-      onClose: function onClose() {
-        return setDropzoneIndex(null);
-      },
-      children: jsx(StyledBottomSheetWrapper, {
-        vertical: vertical,
-        isCurrentOptionList: isCurrentOptionList,
-        children: isCurrentOptionList ? currentOptionList === null || currentOptionList === void 0 ? void 0 : currentOptionList.map(function (option, index) {
-          return jsx(StyledQuizOptionItem, {
-            onClick: function onClick() {
-              var targetId = option.order;
-              if (dropzoneIndex === null) {
-                return;
-              }
-              if (!!userId) {
-                return;
-              }
-              updateCurrentAnswer(targetId, dropzoneIndex);
-            },
-            children: jsx(MaterialQuizGroupOptionItem, {
-              option: option
-            }, index)
-          }, index);
-        }) : jsx(Text, {
-          role: "gray6",
-          size: "small",
-          textAlign: "center",
-          bold: true,
-          block: true,
-          children: intl.formatMessage({
-            id: 'materialQuiz.bottomSheet.optionEmpty'
-          })
-        })
-      })
-    });
+      onClose: () => setDropzoneIndex(null)
+    }, React.createElement(StyledBottomSheetWrapper, {
+      vertical: vertical,
+      isCurrentOptionList: isCurrentOptionList
+    }, isCurrentOptionList ? currentOptionList === null || currentOptionList === void 0 ? void 0 : currentOptionList.map((option, index) => React.createElement(StyledQuizOptionItem, {
+      key: index,
+      onClick: () => {
+        const targetId = option.order;
+        if (dropzoneIndex === null) {
+          return;
+        }
+        if (!!userId) {
+          return;
+        }
+        updateCurrentAnswer(targetId, dropzoneIndex);
+      }
+    }, React.createElement(MaterialQuizGroupOptionItem, {
+      key: index,
+      option: option
+    }))) : React.createElement(Text, {
+      role: "gray6",
+      size: "small",
+      textAlign: "center",
+      bold: true,
+      block: true
+    }, intl.formatMessage({
+      id: 'materialQuiz.bottomSheet.optionEmpty'
+    }))));
   };
   //
   //
   //
-  return jsxs(Fragment, {
-    children: [renderResetButton(), renderGroupList(), renderOptionListBottomSheet()]
-  });
+  return React.createElement(React.Fragment, null, renderResetButton(), renderGroupList(), renderOptionListBottomSheet());
 };
 
 export { MaterialQuizGroupMobile as default };