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

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

@@ -1,3 +1,4 @@
+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';
@@ -9,141 +10,169 @@ import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 import QuizGroupContext from './context/context.js';
 import MaterialQuizGroupOptionItem from './MaterialQuizGroupOptionItem.js';
 
-const QUIZ_OPTIONS_CONTENT_WIDTH = 534;
-const StyledQuizAnswerWrapper = styled.div.withConfig({
+var QUIZ_OPTIONS_CONTENT_WIDTH = 534;
+var StyledQuizAnswerWrapper = styled.div.withConfig({
   componentId: "sc-18trt81-0"
 })(["display:flex;flex-direction:column;flex:0 0 calc((100% - ", "px) / 2);"], QUIZ_OPTIONS_CONTENT_WIDTH);
-const StyledQuizAnswerDropzoneWrapper = styled.div.withConfig({
+var StyledQuizAnswerDropzoneWrapper = styled.div.withConfig({
   componentId: "sc-18trt81-1"
 })(["padding:1rem;border-radius:0.5rem;background:", ";&:not(:last-child){margin-bottom:1rem;}"], base.color.white);
-const StyledQuizAnswerDropzone = styled(EbDroppable).withConfig({
+var 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 ", ";}"], ({
-  isGroupAnswer
-}) => isGroupAnswer ? 'flex-start' : 'center', ({
-  isGroupAnswer
-}) => isGroupAnswer ? 'flex-start' : 'center', base.color.gray1, base.color.gray3, base.color.navy4);
-const 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 ", ";}"], 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({
   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);
-const StyledQuizOptionsDropzone = styled(EbDroppable).withConfig({
+var 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);
-const MaterialQuizGroupDesktop = () => {
-  const intl = useRawEliceIntl();
-  const {
-    userId
-  } = useMaterialQuizState();
-  const {
-    groupList,
-    currentAnswerList,
-    currentOptionList,
-    updateCurrentAnswer,
-    updateCurrentOption,
-    handleAnswerReset
-  } = React.useContext(QuizGroupContext);
+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 renderQuizContentSortation = () => {
-    return React.createElement(Flex, {
+  var renderQuizContentSortation = function renderQuizContentSortation() {
+    return jsx(Flex, {
       align: "center",
-      margin: "0 1.25rem"
-    }, React.createElement(Icon, {
-      size: "large",
-      icon: eilSortItem,
-      rotate: 90,
-      color: "white"
-    }));
+      margin: "0 1.25rem",
+      children: jsx(Icon, {
+        size: "large",
+        icon: eilSortItem,
+        rotate: 90,
+        color: "white"
+      })
+    });
   };
   /**
    *
    */
-  const renderQuizGroupAnswer = (title, dropzoneIndex) => {
+  var renderQuizGroupAnswer = function renderQuizGroupAnswer(title, dropzoneIndex) {
     var _a, _b;
-    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 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 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 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 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 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 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());
+  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()]
+    });
   };
   //
   //
   //
-  return React.createElement(Flex, {
+  return jsxs(Flex, {
     width: "100%",
-    height: "100%"
-  }, renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight());
+    height: "100%",
+    children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
+  });
 };
 
 export { MaterialQuizGroupDesktop as default };

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

@@ -1,3 +1,5 @@
+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';
@@ -7,136 +9,158 @@ import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 import QuizGroupContext from './context/context.js';
 import MaterialQuizGroupOptionItem from './MaterialQuizGroupOptionItem.js';
 
-const StyledQuizGroupWrapper = styled.div.withConfig({
+var 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);
-const StyledQuizOptionList = styled.div.withConfig({
+var 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:", ";"], ({
-  isCurrentOptionList
-}) => isCurrentOptionList ? 'flex-start' : 'center', base.color.gray1, base.color.gray3);
-const 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:", ";"], function (_ref) {
+  var isCurrentOptionList = _ref.isCurrentOptionList;
+  return isCurrentOptionList ? 'flex-start' : 'center';
+}, base.color.gray1, base.color.gray3);
+var StyledQuizOptionItem = styled.div.withConfig({
   componentId: "sc-bftjpj-2"
 })(["&:hover{cursor:pointer;}"]);
-const StyledBottomSheetWrapper = styled(StyledQuizOptionList).withConfig({
+var StyledBottomSheetWrapper = styled(StyledQuizOptionList).withConfig({
   componentId: "sc-bftjpj-3"
-})(["align-items:", ";padding:0.5rem;"], ({
-  vertical,
-  isCurrentOptionList
-}) => vertical && isCurrentOptionList ? 'flex-start' : 'center');
-const MaterialQuizGroupMobile = () => {
-  const intl = useRawEliceIntl();
+})(["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();
   // context
-  const {
-    materialQuiz,
-    userId,
-    vertical
-  } = useMaterialQuizState();
-  const {
-    currentOptionList,
-    currentAnswerList,
-    updateCurrentAnswer,
-    updateCurrentOption,
-    handleAnswerReset
-  } = React.useContext(QuizGroupContext);
-  const [dropzoneIndex, setDropzoneIndex] = React.useState(null);
+  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 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 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 renderGroupList = () => {
+  var renderGroupList = function renderGroupList() {
     var _a;
-    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'
-      }))));
-    }));
+    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);
+      })
+    });
   };
   /**
    *
    */
-  const renderOptionListBottomSheet = () => {
-    const isCurrentOptionList = Boolean(currentOptionList.length);
-    return React.createElement(BottomSheet, {
+  var renderOptionListBottomSheet = function renderOptionListBottomSheet() {
+    var isCurrentOptionList = Boolean(currentOptionList.length);
+    return jsx(BottomSheet, {
       show: dropzoneIndex !== null,
       title: intl.formatMessage({
         id: 'materialQuiz.bottomSheet.title'
       }),
       contentsText: "",
       disableSwipeGesture: true,
-      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'
-    }))));
+      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'
+          })
+        })
+      })
+    });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderResetButton(), renderGroupList(), renderOptionListBottomSheet());
+  return jsxs(Fragment, {
+    children: [renderResetButton(), renderGroupList(), renderOptionListBottomSheet()]
+  });
 };
 
 export { MaterialQuizGroupMobile as default };