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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 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,63 +11,75 @@ import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 import { createRandomId } from '../../utils/randomId.js';
 import OptionGroupAnswerListItem from './OptionGroupAnswerListItem.js';
 
-const MAX_OPTION_INFO_COUNT = 20;
-const StyledSortableList = styled.div.withConfig({
+var MAX_OPTION_INFO_COUNT = 20;
+var StyledSortableList = styled.div.withConfig({
   componentId: "sc-14yoda7-0"
 })(["margin:1rem 0;padding:0;"]);
-const StyledOptionTitle = styled.div.withConfig({
+var StyledOptionTitle = styled.div.withConfig({
   componentId: "sc-14yoda7-1"
 })(["display:flex;width:calc(100% - 2rem - 1.5rem);"]);
 //
 //
 //
-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 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 handleRemoveItem = index => {
+  var handleRemoveItem = function handleRemoveItem(index) {
     var _a;
-    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
-    const answerIndex = cloneAnswerList.findIndex(answers => answers.includes(index));
+    var cloneAnswerList = cloneDeep(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 = 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(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;
+        });
+      });
+    });
     setValue('answerInfoDefault', updatedAnswerInfo);
     setValue('optionsDefault', updatedOptions, {
       shouldDirty: true
@@ -76,86 +88,112 @@ const OptionGroupAnswerInfo = () => {
   /**
    *
    */
-  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 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 renderAnswerOptionList = () => {
-    return React.createElement(SortableListGroup, {
+  var renderAnswerOptionList = function renderAnswerOptionList() {
+    return jsx(SortableListGroup, {
       onSortEnd: onSortEnd,
-      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)
-    }))));
+      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);
+        })
+      })
+    });
   };
   /**
    *
    */
-  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'
-    }))));
+  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'
+          })
+        })]
+      })]
+    });
   };
   //
   //
@@ -163,9 +201,10 @@ const OptionGroupAnswerInfo = () => {
   if (!checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return React.createElement(Flex, {
-    column: true
-  }, renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton());
+  return jsxs(Flex, {
+    column: true,
+    children: [renderAnswerTitle(), renderAnswerOptionList(), renderAnswerOptionAddButton()]
+  });
 };
 
 export { OptionGroupAnswerInfo as default };