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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactSortableHoc = require('react-sortable-hoc');
 var blocks = require('@elice/blocks');
@@ -15,80 +15,63 @@ var checkTwoDimensionArray = require('../../utils/checkTwoDimensionArray.js');
 var randomId = require('../../utils/randomId.js');
 var OptionGroupAnswerListItem = require('./OptionGroupAnswerListItem.js');
 
-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({
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledSortableList = styled.div.withConfig({
   componentId: "sc-14yoda7-0"
 })(["margin:1rem 0;padding:0;"]);
-var StyledOptionTitle = styled__default.default.div.withConfig({
+const StyledOptionTitle = styled.div.withConfig({
   componentId: "sc-14yoda7-1"
 })(["display:flex;width:calc(100% - 2rem - 1.5rem);"]);
 //
 //
 //
-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 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 handleRemoveItem = function handleRemoveItem(index) {
+  const handleRemoveItem = index => {
     var _a;
-    var cloneAnswerList = cloneDeep__default.default(watchedAnswerInfo);
-    var answerIndex = cloneAnswerList.findIndex(function (answers) {
-      return answers.includes(index);
-    });
+    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
+    const answerIndex = cloneAnswerList.findIndex(answers => answers.includes(index));
     if (!cloneAnswerList[answerIndex]) {
       return removeOptionInfoFieldItem(index);
     }
-    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;
-      });
-    });
+    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));
     removeOptionInfoFieldItem(index);
     setValue('answerInfoDefault', recalculationAnswerList);
   };
   /**
    *
    */
-  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;
-        });
-      });
-    });
+  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)));
     setValue('answerInfoDefault', updatedAnswerInfo);
     setValue('optionsDefault', updatedOptions, {
       shouldDirty: true
@@ -97,112 +80,86 @@ var OptionGroupAnswerInfo = function OptionGroupAnswerInfo() {
   /**
    *
    */
-  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 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 renderAnswerOptionList = function renderAnswerOptionList() {
-    return jsxRuntime.jsx(blocks.SortableListGroup, {
+  const renderAnswerOptionList = () => {
+    return React.createElement(blocks.SortableListGroup, {
       onSortEnd: onSortEnd,
-      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);
-        })
-      })
-    });
+      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)
+    }))));
   };
   /**
    *
    */
-  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'
-          })
-        })]
-      })]
-    });
+  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'
+    }))));
   };
   //
   //
@@ -210,10 +167,9 @@ var OptionGroupAnswerInfo = function OptionGroupAnswerInfo() {
   if (!checkTwoDimensionArray.checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return jsxRuntime.jsxs(blocks.Flex, {
-    column: true,
-    children: [renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton()]
-  });
+  return React.createElement(blocks.Flex, {
+    column: true
+  }, renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton());
 };
 
 exports.default = OptionGroupAnswerInfo;