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

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
 import { arrayMove } from 'react-sortable-hoc';
 import { Flex, Text, SortableListGroup, Tooltip, Button, Icon, Vspace, StatusText } from '@elice/blocks';
@@ -11,75 +11,63 @@ import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 import { createRandomId } from '../../utils/randomId.js';
 import OptionGroupAnswerListItem from './OptionGroupAnswerListItem.js';
 
-var MAX_OPTION_INFO_COUNT = 20;
-var StyledSortableList = styled.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.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 = useRawEliceIntl();
-  var _useFormContext = useFormContext(),
-    setValue = _useFormContext.setValue,
-    watch = _useFormContext.watch;
-  var _useMaterialQuizEditC = useMaterialQuizEditContext(),
-    disabled = _useMaterialQuizEditC.disabled;
-  var _useFieldArray = 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 = useRawEliceIntl();
+  const {
+    setValue,
+    watch
+  } = useFormContext();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    append: appendOptionInfoFieldItem,
+    remove: removeOptionInfoFieldItem
+  } = 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(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(watchedOptions).map(function (option, index) {
-      return Object.assign(Object.assign({}, option), {
-        originIndex: index
-      });
-    });
-    var updatedOptions = 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 = 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
@@ -88,112 +76,86 @@ var OptionGroupAnswerInfo = function OptionGroupAnswerInfo() {
   /**
    *
    */
-  var renderAnswerTitle = function renderAnswerTitle() {
-    return jsxs(StyledOptionTitle, {
-      children: [jsx(Flex, {
-        width: "33.3%",
-        auto: true,
-        children: jsx(Text, {
-          size: "small",
-          bold: true,
-          children: intl.formatMessage({
-            id: 'answer.option.title.text'
-          })
-        })
-      }), jsx(Flex, {
-        width: "33.3%",
-        children: jsx(Text, {
-          size: "small",
-          bold: true,
-          children: intl.formatMessage({
-            id: 'answer.option.title.file'
-          })
-        })
-      }), jsx(Flex, {
-        width: "calc(33.3% - 1.5rem)",
-        children: jsx(Text, {
-          size: "small",
-          bold: true,
-          children: intl.formatMessage({
-            id: 'answer.option.title.group'
-          })
-        })
-      })]
-    });
+  const renderAnswerTitle = () => {
+    return React.createElement(StyledOptionTitle, null, React.createElement(Flex, {
+      width: "33.3%",
+      auto: true
+    }, React.createElement(Text, {
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'answer.option.title.text'
+    }))), React.createElement(Flex, {
+      width: "33.3%"
+    }, React.createElement(Text, {
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'answer.option.title.file'
+    }))), React.createElement(Flex, {
+      width: "calc(33.3% - 1.5rem)"
+    }, React.createElement(Text, {
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'answer.option.title.group'
+    }))));
   };
   /**
    *
    */
-  var renderAnswerOptionList = function renderAnswerOptionList() {
-    return jsx(SortableListGroup, {
+  const renderAnswerOptionList = () => {
+    return React.createElement(SortableListGroup, {
       onSortEnd: onSortEnd,
-      useDragHandle: true,
-      children: jsx(StyledSortableList, {
-        children: watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.map(function (option, index) {
-          return jsx(OptionGroupAnswerListItem, {
-            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, {
+      key: option.id,
+      optionId: index,
+      disabled: disabled,
+      onRemoveItem: () => handleRemoveItem(index)
+    }))));
   };
   /**
    *
    */
-  var renderAnswerOptionAddButton = function renderAnswerOptionAddButton() {
-    return jsxs(Fragment, {
-      children: [jsx(Tooltip, {
-        title: isMaximumOptions ? intl.formatMessage({
-          id: 'answer.option.tooltip.maxDisabled'
-        }) : undefined,
-        placement: "top",
-        children: jsx("span", {
-          children: jsx(Button, {
-            borderDashed: true,
-            block: true,
-            transparent: true,
-            disabled: isMaximumOptions || disabled,
-            icon: jsx(Icon, {
-              icon: eilMathsignAddBasic
-            }),
-            onClick: function onClick() {
-              return appendOptionInfoFieldItem({
-                id: createRandomId(),
-                title: '',
-                content: ''
-              });
-            },
-            children: intl.formatMessage({
-              id: 'answer.option.addButton'
-            })
-          })
-        })
-      }), jsx(Vspace, {
-        height: 0.5
-      }), jsxs(Flex, {
-        column: true,
-        children: [jsx(StatusText, {
-          role: "description",
-          children: intl.formatMessage({
-            id: 'answer.option.file.description.imageSize'
-          })
-        }), jsx(StatusText, {
-          role: "description",
-          children: intl.formatMessage({
-            id: 'answer.option.file.description.fileSize'
-          })
-        }), jsx(StatusText, {
-          role: "description",
-          children: intl.formatMessage({
-            id: 'answer.option.file.description.extension'
-          })
-        })]
-      })]
-    });
+  const renderAnswerOptionAddButton = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+      title: isMaximumOptions ? intl.formatMessage({
+        id: 'answer.option.tooltip.maxDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(Button, {
+      borderDashed: true,
+      block: true,
+      transparent: true,
+      disabled: isMaximumOptions || disabled,
+      icon: React.createElement(Icon, {
+        icon: eilMathsignAddBasic
+      }),
+      onClick: () => appendOptionInfoFieldItem({
+        id: createRandomId(),
+        title: '',
+        content: ''
+      })
+    }, intl.formatMessage({
+      id: 'answer.option.addButton'
+    })))), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Flex, {
+      column: true
+    }, React.createElement(StatusText, {
+      role: "description"
+    }, intl.formatMessage({
+      id: 'answer.option.file.description.imageSize'
+    })), React.createElement(StatusText, {
+      role: "description"
+    }, intl.formatMessage({
+      id: 'answer.option.file.description.fileSize'
+    })), React.createElement(StatusText, {
+      role: "description"
+    }, intl.formatMessage({
+      id: 'answer.option.file.description.extension'
+    }))));
   };
   //
   //
@@ -201,10 +163,9 @@ var OptionGroupAnswerInfo = function OptionGroupAnswerInfo() {
   if (!checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return jsxs(Flex, {
-    column: true,
-    children: [renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton()]
-  });
+  return React.createElement(Flex, {
+    column: true
+  }, renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton());
 };
 
 export { OptionGroupAnswerInfo as default };