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

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { useFormContext, useFieldArray, useWatch } from 'react-hook-form';
 import { arrayMove } from 'react-sortable-hoc';
 import { Flex, Text, SortableListGroup, Tooltip, Button, Icon } from '@elice/blocks';
@@ -10,50 +10,53 @@ import { useMaterialQuizEditContext } from '../../context.js';
 import { createRandomId } from '../../utils/randomId.js';
 import OptionGroupGroupListItem from './OptionGroupGroupListItem.js';
 
-var MAX_GROUP_INFO_COUNT = 6;
-var StyledSortableList = styled.div.withConfig({
+const MAX_GROUP_INFO_COUNT = 6;
+const StyledSortableList = styled.div.withConfig({
   componentId: "sc-9aq3yn-0"
 })(["margin:1rem 0;padding:0;"]);
 //
 //
 //
-var OptionGroupGroupInfo = function OptionGroupGroupInfo() {
-  var intl = useRawEliceIntl();
-  var _useFormContext = useFormContext(),
-    control = _useFormContext.control,
-    setValue = _useFormContext.setValue;
-  var _useMaterialQuizEditC = useMaterialQuizEditContext(),
-    disabled = _useMaterialQuizEditC.disabled;
-  var _useFieldArray = useFieldArray({
-      name: 'groups',
-      keyName: 'id',
-      shouldUnregister: true
-    }),
-    groupInfoFields = _useFieldArray.fields,
-    appendGroupInfoFieldItem = _useFieldArray.append,
-    removeGroupInfoFieldItem = _useFieldArray.remove;
-  var watchedGroups = useWatch({
-    control: control,
+const OptionGroupGroupInfo = () => {
+  const intl = useRawEliceIntl();
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    fields: groupInfoFields,
+    append: appendGroupInfoFieldItem,
+    remove: removeGroupInfoFieldItem
+  } = useFieldArray({
+    name: 'groups',
+    keyName: 'id',
+    shouldUnregister: true
+  });
+  const watchedGroups = useWatch({
+    control,
     name: 'groups'
   });
-  var watchedAnswerInfo = useWatch({
-    control: control,
+  const watchedAnswerInfo = useWatch({
+    control,
     name: 'answerInfoDefault'
   });
-  var isMaximumGroups = groupInfoFields.length >= MAX_GROUP_INFO_COUNT;
+  const isMaximumGroups = groupInfoFields.length >= MAX_GROUP_INFO_COUNT;
   /**
    *
    */
-  var addGroupAnswerInfo = function addGroupAnswerInfo() {
-    var cloneAnswerList = cloneDeep(watchedAnswerInfo);
+  const addGroupAnswerInfo = () => {
+    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
     cloneAnswerList[groupInfoFields.length] = [];
     setValue('answerInfoDefault', cloneAnswerList);
   };
   /**
    *
    */
-  var removeGroupAnswerInfo = function removeGroupAnswerInfo(index) {
-    var cloneAnswerList = cloneDeep(watchedAnswerInfo);
+  const removeGroupAnswerInfo = index => {
+    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
     cloneAnswerList.splice(index, 1);
     setValue('answerInfoDefault', cloneAnswerList.filter(Boolean));
     removeGroupInfoFieldItem(Number(index));
@@ -61,11 +64,12 @@ var OptionGroupGroupInfo = function OptionGroupGroupInfo() {
   /**
    *
    */
-  var onSortEnd = function onSortEnd(_ref) {
-    var oldIndex = _ref.oldIndex,
-      newIndex = _ref.newIndex;
-    var cloneAnswerList = cloneDeep(watchedAnswerInfo);
-    var temp = cloneAnswerList[oldIndex];
+  const onSortEnd = ({
+    oldIndex,
+    newIndex
+  }) => {
+    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
+    const temp = cloneAnswerList[oldIndex];
     cloneAnswerList[oldIndex] = cloneAnswerList[newIndex];
     cloneAnswerList[newIndex] = temp;
     setValue('groups', arrayMove(watchedGroups, oldIndex, newIndex), {
@@ -76,69 +80,57 @@ var OptionGroupGroupInfo = function OptionGroupGroupInfo() {
   /**
    *
    */
-  var renderGroupOptionList = function renderGroupOptionList() {
-    return jsx(SortableListGroup, {
+  const renderGroupOptionList = () => {
+    return React.createElement(SortableListGroup, {
       onSortEnd: onSortEnd,
-      useDragHandle: true,
-      children: jsx(StyledSortableList, {
-        children: groupInfoFields.map(function (group, index) {
-          return jsx(OptionGroupGroupListItem, {
-            disabled: disabled,
-            groupId: index,
-            groupsCount: groupInfoFields.length,
-            onRemoveOption: function onRemoveOption() {
-              return removeGroupAnswerInfo(index);
-            }
-          }, group.id);
-        })
-      })
-    });
+      useDragHandle: true
+    }, React.createElement(StyledSortableList, null, groupInfoFields.map((group, index) => React.createElement(OptionGroupGroupListItem, {
+      key: group.id,
+      disabled: disabled,
+      groupId: index,
+      groupsCount: groupInfoFields.length,
+      onRemoveOption: () => removeGroupAnswerInfo(index)
+    }))));
   };
   /**
    *
    */
-  var renderGroupOptionAddButton = function renderGroupOptionAddButton() {
-    return jsx(Tooltip, {
+  const renderGroupOptionAddButton = () => {
+    return React.createElement(Tooltip, {
       title: isMaximumGroups ? intl.formatMessage({
         id: 'group.option.tooltip.maxDisabled'
       }) : undefined,
-      placement: "top",
-      children: jsx("span", {
-        children: jsx(Button, {
-          borderDashed: true,
-          block: true,
-          transparent: true,
-          icon: jsx(Icon, {
-            icon: eilMathsignAddBasic
-          }),
-          disabled: isMaximumGroups || disabled,
-          onClick: function onClick() {
-            appendGroupInfoFieldItem({
-              id: createRandomId(),
-              group: ''
-            });
-            addGroupAnswerInfo();
-          },
-          children: intl.formatMessage({
-            id: 'group.option.addButton'
-          })
-        })
-      })
-    });
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(Button, {
+      borderDashed: true,
+      block: true,
+      transparent: true,
+      icon: React.createElement(Icon, {
+        icon: eilMathsignAddBasic
+      }),
+      disabled: isMaximumGroups || disabled,
+      onClick: () => {
+        appendGroupInfoFieldItem({
+          id: createRandomId(),
+          group: ''
+        });
+        addGroupAnswerInfo();
+      }
+    }, intl.formatMessage({
+      id: 'group.option.addButton'
+    }))));
   };
   //
   //
   //
-  return jsxs(Flex, {
-    column: true,
-    children: [jsx(Text, {
-      size: "small",
-      bold: true,
-      children: intl.formatMessage({
-        id: 'group.option.title'
-      })
-    }), renderGroupOptionList(), renderGroupOptionAddButton()]
-  });
+  return React.createElement(Flex, {
+    column: true
+  }, React.createElement(Text, {
+    size: "small",
+    bold: true
+  }, intl.formatMessage({
+    id: 'group.option.title'
+  })), renderGroupOptionList(), renderGroupOptionAddButton());
 };
 
 export { OptionGroupGroupInfo as default };

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
 import { SortableListItem, Input, Flex, Hspace, Tooltip, IconButton, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -7,137 +7,126 @@ import { useRawEliceIntl } from '@elice/intl';
 import trim from 'lodash-es/trim';
 import styled from 'styled-components';
 
-var SHEET_Z_INDEX = 982;
-var MIN_GROUP_INFO_COUNT = 2;
-var StyledSortableListItem = styled(SortableListItem).withConfig({
+const SHEET_Z_INDEX = 982;
+const MIN_GROUP_INFO_COUNT = 2;
+const StyledSortableListItem = styled(SortableListItem).withConfig({
   componentId: "sc-hj5nic-0"
 })(["display:flex;z-index:", ";width:100%;padding:0;background:transparent;box-shadow:none;&:not(:last-child){margin-bottom:0.5rem;}"], SHEET_Z_INDEX + 1);
-var StyledSortableListItemOptionWrapper = styled.div.withConfig({
+const StyledSortableListItemOptionWrapper = styled.div.withConfig({
   componentId: "sc-hj5nic-1"
-})(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border-radius:4px;border:1px solid ", ";background:", ";"], function (_ref) {
-  var isGroupChildAnswer = _ref.isGroupChildAnswer;
-  return isGroupChildAnswer ? base.color.red8 : base.color.gray3;
-}, base.color.white);
-var StyledInputGroup = styled(Input).withConfig({
+})(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border-radius:4px;border:1px solid ", ";background:", ";"], ({
+  isGroupChildAnswer
+}) => isGroupChildAnswer ? base.color.red8 : base.color.gray3, base.color.white);
+const StyledInputGroup = styled(Input).withConfig({
   componentId: "sc-hj5nic-2"
 })(["& > div{border:0;}"]);
-var OptionGroupGroupListItem = function OptionGroupGroupListItem(_ref2) {
-  var disabled = _ref2.disabled,
-    groupId = _ref2.groupId,
-    groupsCount = _ref2.groupsCount,
-    onRemoveOption = _ref2.onRemoveOption;
+const OptionGroupGroupListItem = ({
+  disabled,
+  groupId,
+  groupsCount,
+  onRemoveOption
+}) => {
   var _a, _b, _c, _d, _e;
-  var intl = useRawEliceIntl();
-  var _useFormContext = useFormContext(),
-    control = _useFormContext.control,
-    formState = _useFormContext.formState;
-  var watchedAnswerInfo = useWatch({
-    control: control,
+  const intl = useRawEliceIntl();
+  const {
+    control,
+    formState
+  } = useFormContext();
+  const watchedAnswerInfo = useWatch({
+    control,
     name: 'answerInfoDefault'
   });
-  var isGroupChildAnswer = Boolean((_a = watchedAnswerInfo[groupId]) === null || _a === void 0 ? void 0 : _a.length);
-  var isMinimumGroups = groupsCount <= MIN_GROUP_INFO_COUNT;
-  var errorMessage = (_e = (_d = (_c = (_b = formState.errors) === null || _b === void 0 ? void 0 : _b.groups) === null || _c === void 0 ? void 0 : _c[groupId]) === null || _d === void 0 ? void 0 : _d.group) === null || _e === void 0 ? void 0 : _e.message;
+  const isGroupChildAnswer = Boolean((_a = watchedAnswerInfo[groupId]) === null || _a === void 0 ? void 0 : _a.length);
+  const isMinimumGroups = groupsCount <= MIN_GROUP_INFO_COUNT;
+  const errorMessage = (_e = (_d = (_c = (_b = formState.errors) === null || _b === void 0 ? void 0 : _b.groups) === null || _c === void 0 ? void 0 : _c[groupId]) === null || _d === void 0 ? void 0 : _d.group) === null || _e === void 0 ? void 0 : _e.message;
   /**
    *
    */
-  var renderOptionGroupInput = function renderOptionGroupInput() {
-    return jsx(StyledSortableListItemOptionWrapper, {
-      isGroupChildAnswer: !isGroupChildAnswer,
-      children: jsx(Controller, {
-        control: control,
-        name: "groups.".concat(groupId, ".group"),
-        rules: {
-          required: {
-            value: true,
-            message: intl.formatMessage({
+  const renderOptionGroupInput = () => {
+    return React.createElement(StyledSortableListItemOptionWrapper, {
+      isGroupChildAnswer: !isGroupChildAnswer
+    }, React.createElement(Controller, {
+      control: control,
+      name: `groups.${groupId}.group`,
+      rules: {
+        required: {
+          value: true,
+          message: intl.formatMessage({
+            id: 'group.option.errorMessage.required'
+          })
+        },
+        validate: e => {
+          if (!trim(e).length) {
+            return intl.formatMessage({
               id: 'group.option.errorMessage.required'
-            })
-          },
-          validate: function validate(e) {
-            if (!trim(e).length) {
-              return intl.formatMessage({
-                id: 'group.option.errorMessage.required'
-              });
-            }
-            if (!isGroupChildAnswer) {
-              return intl.formatMessage({
-                id: 'group.option.errorMessage.notChild'
-              });
-            }
+            });
+          }
+          if (!isGroupChildAnswer) {
+            return intl.formatMessage({
+              id: 'group.option.errorMessage.notChild'
+            });
           }
-        },
-        render: function render(_ref3) {
-          var field = _ref3.field,
-            fieldState = _ref3.fieldState;
-          return jsx(StyledInputGroup, Object.assign({
-            invalid: fieldState.invalid || !isGroupChildAnswer,
-            width: "full",
-            disabled: disabled
-          }, field, {
-            ref: null
-          }));
         }
-      })
-    });
+      },
+      render: ({
+        field,
+        fieldState
+      }) => React.createElement(StyledInputGroup, Object.assign({
+        invalid: fieldState.invalid || !isGroupChildAnswer,
+        width: "full",
+        disabled: disabled
+      }, field, {
+        ref: null
+      }))
+    }));
   };
   /**
    *
    */
-  var renderOptionRemoveButton = function renderOptionRemoveButton() {
-    return jsxs(Fragment, {
-      children: [jsx(Hspace, {
-        width: 0.5
-      }), jsx(Tooltip, {
-        title: isMinimumGroups ? intl.formatMessage({
-          id: 'group.option.tooltip.minDisabled'
-        }) : undefined,
-        placement: "top",
-        children: jsx("span", {
-          children: jsx(IconButton, {
-            transparent: true,
-            icon: eilMathsignMultiplyBasic,
-            role: "gray6",
-            size: "micro",
-            border: false,
-            disabled: isMinimumGroups || disabled,
-            onClick: onRemoveOption
-          })
-        })
-      })]
-    });
+  const renderOptionRemoveButton = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Tooltip, {
+      title: isMinimumGroups ? intl.formatMessage({
+        id: 'group.option.tooltip.minDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(IconButton, {
+      transparent: true,
+      icon: eilMathsignMultiplyBasic,
+      role: "gray6",
+      size: "micro",
+      border: false,
+      disabled: isMinimumGroups || disabled,
+      onClick: onRemoveOption
+    }))));
   };
   /**
    *
    */
-  var renderErrorMessage = function renderErrorMessage() {
+  const renderErrorMessage = () => {
     if (!errorMessage) {
       return null;
     }
-    return jsx(Flex, {
-      paddingleft: "0.25rem",
-      children: jsx(Text, {
-        size: "small",
-        role: "danger",
-        children: errorMessage
-      })
-    });
+    return React.createElement(Flex, {
+      paddingleft: "0.25rem"
+    }, React.createElement(Text, {
+      size: "small",
+      role: "danger"
+    }, errorMessage));
   };
   //
   //
   //
-  return jsx(StyledSortableListItem, {
-    index: groupId,
-    children: jsxs(Flex, {
-      justify: "center",
-      width: "100%",
-      column: true,
-      children: [jsxs(Flex, {
-        align: "center",
-        children: [renderOptionGroupInput(), renderOptionRemoveButton()]
-      }), renderErrorMessage()]
-    })
-  });
+  return React.createElement(StyledSortableListItem, {
+    index: groupId
+  }, React.createElement(Flex, {
+    justify: "center",
+    width: "100%",
+    column: true
+  }, React.createElement(Flex, {
+    align: "center"
+  }, renderOptionGroupInput(), renderOptionRemoveButton()), renderErrorMessage()));
 };
 
 export { OptionGroupGroupListItem as default };

package/es/components/material-quiz-edit/utils/checkTwoDimensionArray.js

@@ -1,10 +1,6 @@
 function checkTwoDimensionArray(answerInfo) {
   try {
-    return answerInfo.every(function (i) {
-      return i.every(function (j) {
-        return typeof j === 'number';
-      });
-    });
+    return answerInfo.every(i => i.every(j => typeof j === 'number'));
   } catch (_a) {
     return false;
   }

package/es/components/material-quiz-edit/utils/editValue.js

@@ -8,7 +8,7 @@ function manipulateValue(v) {
   return Object.assign(Object.assign({}, v), {
     // convert string array to object array
     // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
-    optionsDefault: Array.isArray(v.optionsDefault) ? v.optionsDefault.map(function (option) {
+    optionsDefault: Array.isArray(v.optionsDefault) ? v.optionsDefault.map(option => {
       var _a, _b;
       return {
         id: createRandomId(),
@@ -16,12 +16,10 @@ function manipulateValue(v) {
         content: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : ''
       };
     }) : [],
-    groups: Array.isArray(v.groups) ? v.groups.map(function (group) {
-      return {
-        id: createRandomId(),
-        group: group
-      };
-    }) : []
+    groups: Array.isArray(v.groups) ? v.groups.map(group => ({
+      id: createRandomId(),
+      group
+    })) : []
   });
 }
 /**
@@ -29,17 +27,14 @@ function manipulateValue(v) {
  */
 function restoreValue(v) {
   return Object.assign(Object.assign({}, v), {
-    optionsDefault: v.optionsDefault.length ? v.optionsDefault.map(function (option) {
-      return {
-        title: trim(option.title),
-        content: option.content
-      };
-    }) : null,
+    optionsDefault: v.optionsDefault.length ? v.optionsDefault.map(option => ({
+      title: trim(option.title),
+      content: option.content
+    })) : null,
     answerInfoDefault: Array.isArray(v.answerInfoDefault) || typeof v.answerInfoDefault === 'string' ? v.answerInfoDefault : undefined,
-    groups: v.groups.length ? v.groups.map(function (_ref) {
-      var group = _ref.group;
-      return trim(group);
-    }) : null
+    groups: v.groups.length ? v.groups.map(({
+      group
+    }) => trim(group)) : null
   });
 }