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

package/cjs/components/material-quiz-edit/options/options-group/OptionGroupAnswerInfo.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var reactSortableHoc = require('react-sortable-hoc');
 var blocks = require('@elice/blocks');
@@ -15,63 +15,80 @@ var checkTwoDimensionArray = require('../../utils/checkTwoDimensionArray.js');
 var randomId = require('../../utils/randomId.js');
 var OptionGroupAnswerListItem = require('./OptionGroupAnswerListItem.js');
 
-const MAX_OPTION_INFO_COUNT = 20;
-const StyledSortableList = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var cloneDeep__default = /*#__PURE__*/_interopDefaultCompat(cloneDeep);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var MAX_OPTION_INFO_COUNT = 20;
+var StyledSortableList = styled__default.default.div.withConfig({
   componentId: "sc-14yoda7-0"
 })(["margin:1rem 0;padding:0;"]);
-const StyledOptionTitle = styled.div.withConfig({
+var StyledOptionTitle = styled__default.default.div.withConfig({
   componentId: "sc-14yoda7-1"
 })(["display:flex;width:calc(100% - 2rem - 1.5rem);"]);
 //
 //
 //
-const OptionGroupAnswerInfo = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    setValue,
-    watch
-  } = reactHookForm.useFormContext();
-  const {
-    disabled
-  } = context.useMaterialQuizEditContext();
-  const {
-    append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem
-  } = reactHookForm.useFieldArray({
-    name: 'optionsDefault',
-    keyName: 'id',
-    shouldUnregister: true
-  });
-  const watchedAnswerInfo = watch('answerInfoDefault');
-  const watchedOptions = watch('optionsDefault');
-  const isMaximumOptions = (watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.length) >= MAX_OPTION_INFO_COUNT;
+var OptionGroupAnswerInfo = function OptionGroupAnswerInfo() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useFormContext = reactHookForm.useFormContext(),
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch;
+  var _useMaterialQuizEditC = context.useMaterialQuizEditContext(),
+    disabled = _useMaterialQuizEditC.disabled;
+  var _useFieldArray = reactHookForm.useFieldArray({
+      name: 'optionsDefault',
+      keyName: 'id',
+      shouldUnregister: true
+    }),
+    appendOptionInfoFieldItem = _useFieldArray.append,
+    removeOptionInfoFieldItem = _useFieldArray.remove;
+  var watchedAnswerInfo = watch('answerInfoDefault');
+  var watchedOptions = watch('optionsDefault');
+  var isMaximumOptions = (watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.length) >= MAX_OPTION_INFO_COUNT;
   /**
    *
    */
-  const handleRemoveItem = index => {
+  var handleRemoveItem = function handleRemoveItem(index) {
     var _a;
-    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
-    const answerIndex = cloneAnswerList.findIndex(answers => answers.includes(index));
+    var cloneAnswerList = cloneDeep__default.default(watchedAnswerInfo);
+    var answerIndex = cloneAnswerList.findIndex(function (answers) {
+      return answers.includes(index);
+    });
     if (!cloneAnswerList[answerIndex]) {
       return removeOptionInfoFieldItem(index);
     }
-    cloneAnswerList[answerIndex] = (_a = cloneAnswerList[answerIndex]) === null || _a === void 0 ? void 0 : _a.filter(answer => answer !== index);
-    const recalculationAnswerList = cloneAnswerList.map(answers => answers.map(answer => answer > index ? answer - 1 : answer));
+    cloneAnswerList[answerIndex] = (_a = cloneAnswerList[answerIndex]) === null || _a === void 0 ? void 0 : _a.filter(function (answer) {
+      return answer !== index;
+    });
+    var recalculationAnswerList = cloneAnswerList.map(function (answers) {
+      return answers.map(function (answer) {
+        return answer > index ? answer - 1 : answer;
+      });
+    });
     removeOptionInfoFieldItem(index);
     setValue('answerInfoDefault', recalculationAnswerList);
   };
   /**
    *
    */
-  const onSortEnd = ({
-    oldIndex,
-    newIndex
-  }) => {
-    const prevOptions = cloneDeep(watchedOptions).map((option, index) => Object.assign(Object.assign({}, option), {
-      originIndex: index
-    }));
-    const updatedOptions = reactSortableHoc.arrayMove(prevOptions, oldIndex, newIndex);
-    const updatedAnswerInfo = watchedAnswerInfo.map(answerList => answerList.map(answer => updatedOptions.findIndex(option => option.originIndex === answer)));
+  var onSortEnd = function onSortEnd(_ref) {
+    var oldIndex = _ref.oldIndex,
+      newIndex = _ref.newIndex;
+    var prevOptions = cloneDeep__default.default(watchedOptions).map(function (option, index) {
+      return Object.assign(Object.assign({}, option), {
+        originIndex: index
+      });
+    });
+    var updatedOptions = reactSortableHoc.arrayMove(prevOptions, oldIndex, newIndex);
+    var updatedAnswerInfo = watchedAnswerInfo.map(function (answerList) {
+      return answerList.map(function (answer) {
+        return updatedOptions.findIndex(function (option) {
+          return option.originIndex === answer;
+        });
+      });
+    });
     setValue('answerInfoDefault', updatedAnswerInfo);
     setValue('optionsDefault', updatedOptions, {
       shouldDirty: true
@@ -80,86 +97,112 @@ const OptionGroupAnswerInfo = () => {
   /**
    *
    */
-  const renderAnswerTitle = () => {
-    return React.createElement(StyledOptionTitle, null, React.createElement(blocks.Flex, {
-      width: "33.3%",
-      auto: true
-    }, React.createElement(blocks.Text, {
-      size: "small",
-      bold: true
-    }, intl$1.formatMessage({
-      id: 'answer.option.title.text'
-    }))), React.createElement(blocks.Flex, {
-      width: "33.3%"
-    }, React.createElement(blocks.Text, {
-      size: "small",
-      bold: true
-    }, intl$1.formatMessage({
-      id: 'answer.option.title.file'
-    }))), React.createElement(blocks.Flex, {
-      width: "calc(33.3% - 1.5rem)"
-    }, React.createElement(blocks.Text, {
-      size: "small",
-      bold: true
-    }, intl$1.formatMessage({
-      id: 'answer.option.title.group'
-    }))));
+  var renderAnswerTitle = function renderAnswerTitle() {
+    return jsxRuntime.jsxs(StyledOptionTitle, {
+      children: [jsxRuntime.jsx(blocks.Flex, {
+        width: "33.3%",
+        auto: true,
+        children: jsxRuntime.jsx(blocks.Text, {
+          size: "small",
+          bold: true,
+          children: intl$1.formatMessage({
+            id: 'answer.option.title.text'
+          })
+        })
+      }), jsxRuntime.jsx(blocks.Flex, {
+        width: "33.3%",
+        children: jsxRuntime.jsx(blocks.Text, {
+          size: "small",
+          bold: true,
+          children: intl$1.formatMessage({
+            id: 'answer.option.title.file'
+          })
+        })
+      }), jsxRuntime.jsx(blocks.Flex, {
+        width: "calc(33.3% - 1.5rem)",
+        children: jsxRuntime.jsx(blocks.Text, {
+          size: "small",
+          bold: true,
+          children: intl$1.formatMessage({
+            id: 'answer.option.title.group'
+          })
+        })
+      })]
+    });
   };
   /**
    *
    */
-  const renderAnswerOptionList = () => {
-    return React.createElement(blocks.SortableListGroup, {
+  var renderAnswerOptionList = function renderAnswerOptionList() {
+    return jsxRuntime.jsx(blocks.SortableListGroup, {
       onSortEnd: onSortEnd,
-      useDragHandle: true
-    }, React.createElement(StyledSortableList, null, watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map((option, index) => React.createElement(OptionGroupAnswerListItem.default, {
-      key: option.id,
-      optionId: index,
-      disabled: disabled,
-      onRemoveItem: () => handleRemoveItem(index)
-    }))));
+      useDragHandle: true,
+      children: jsxRuntime.jsx(StyledSortableList, {
+        children: watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map(function (option, index) {
+          return jsxRuntime.jsx(OptionGroupAnswerListItem.default, {
+            optionId: index,
+            disabled: disabled,
+            onRemoveItem: function onRemoveItem() {
+              return handleRemoveItem(index);
+            }
+          }, option.id);
+        })
+      })
+    });
   };
   /**
    *
    */
-  const renderAnswerOptionAddButton = () => {
-    return React.createElement(React.Fragment, null, React.createElement(blocks.Tooltip, {
-      title: isMaximumOptions ? intl$1.formatMessage({
-        id: 'answer.option.tooltip.maxDisabled'
-      }) : undefined,
-      placement: "top"
-    }, React.createElement("span", null, React.createElement(blocks.Button, {
-      borderDashed: true,
-      block: true,
-      transparent: true,
-      disabled: isMaximumOptions || disabled,
-      icon: React.createElement(blocks.Icon, {
-        icon: icons.eilMathsignAddBasic
-      }),
-      onClick: () => appendOptionInfoFieldItem({
-        id: randomId.createRandomId(),
-        title: '',
-        content: ''
-      })
-    }, intl$1.formatMessage({
-      id: 'answer.option.addButton'
-    })))), React.createElement(blocks.Vspace, {
-      height: 0.5
-    }), React.createElement(blocks.Flex, {
-      column: true
-    }, React.createElement(blocks.StatusText, {
-      role: "description"
-    }, intl$1.formatMessage({
-      id: 'answer.option.file.description.imageSize'
-    })), React.createElement(blocks.StatusText, {
-      role: "description"
-    }, intl$1.formatMessage({
-      id: 'answer.option.file.description.fileSize'
-    })), React.createElement(blocks.StatusText, {
-      role: "description"
-    }, intl$1.formatMessage({
-      id: 'answer.option.file.description.extension'
-    }))));
+  var renderAnswerOptionAddButton = function renderAnswerOptionAddButton() {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(blocks.Tooltip, {
+        title: isMaximumOptions ? intl$1.formatMessage({
+          id: 'answer.option.tooltip.maxDisabled'
+        }) : undefined,
+        placement: "top",
+        children: jsxRuntime.jsx("span", {
+          children: jsxRuntime.jsx(blocks.Button, {
+            borderDashed: true,
+            block: true,
+            transparent: true,
+            disabled: isMaximumOptions || disabled,
+            icon: jsxRuntime.jsx(blocks.Icon, {
+              icon: icons.eilMathsignAddBasic
+            }),
+            onClick: function onClick() {
+              return appendOptionInfoFieldItem({
+                id: randomId.createRandomId(),
+                title: '',
+                content: ''
+              });
+            },
+            children: intl$1.formatMessage({
+              id: 'answer.option.addButton'
+            })
+          })
+        })
+      }), jsxRuntime.jsx(blocks.Vspace, {
+        height: 0.5
+      }), jsxRuntime.jsxs(blocks.Flex, {
+        column: true,
+        children: [jsxRuntime.jsx(blocks.StatusText, {
+          role: "description",
+          children: intl$1.formatMessage({
+            id: 'answer.option.file.description.imageSize'
+          })
+        }), jsxRuntime.jsx(blocks.StatusText, {
+          role: "description",
+          children: intl$1.formatMessage({
+            id: 'answer.option.file.description.fileSize'
+          })
+        }), jsxRuntime.jsx(blocks.StatusText, {
+          role: "description",
+          children: intl$1.formatMessage({
+            id: 'answer.option.file.description.extension'
+          })
+        })]
+      })]
+    });
   };
   //
   //
@@ -167,9 +210,10 @@ const OptionGroupAnswerInfo = () => {
   if (!checkTwoDimensionArray.checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return React.createElement(blocks.Flex, {
-    column: true
-  }, renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton());
+  return jsxRuntime.jsxs(blocks.Flex, {
+    column: true,
+    children: [renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton()]
+  });
 };
 
 exports.default = OptionGroupAnswerInfo;