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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 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,53 +10,50 @@ import { useMaterialQuizEditContext } from '../../context.js';
 import { createRandomId } from '../../utils/randomId.js';
 import OptionGroupGroupListItem from './OptionGroupGroupListItem.js';
 
-const MAX_GROUP_INFO_COUNT = 6;
-const StyledSortableList = styled.div.withConfig({
+var MAX_GROUP_INFO_COUNT = 6;
+var StyledSortableList = styled.div.withConfig({
   componentId: "sc-9aq3yn-0"
 })(["margin:1rem 0;padding:0;"]);
 //
 //
 //
-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,
+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,
     name: 'groups'
   });
-  const watchedAnswerInfo = useWatch({
-    control,
+  var watchedAnswerInfo = useWatch({
+    control: control,
     name: 'answerInfoDefault'
   });
-  const isMaximumGroups = groupInfoFields.length >= MAX_GROUP_INFO_COUNT;
+  var isMaximumGroups = groupInfoFields.length >= MAX_GROUP_INFO_COUNT;
   /**
    *
    */
-  const addGroupAnswerInfo = () => {
-    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
+  var addGroupAnswerInfo = function addGroupAnswerInfo() {
+    var cloneAnswerList = cloneDeep(watchedAnswerInfo);
     cloneAnswerList[groupInfoFields.length] = [];
     setValue('answerInfoDefault', cloneAnswerList);
   };
   /**
    *
    */
-  const removeGroupAnswerInfo = index => {
-    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
+  var removeGroupAnswerInfo = function removeGroupAnswerInfo(index) {
+    var cloneAnswerList = cloneDeep(watchedAnswerInfo);
     cloneAnswerList.splice(index, 1);
     setValue('answerInfoDefault', cloneAnswerList.filter(Boolean));
     removeGroupInfoFieldItem(Number(index));
@@ -64,12 +61,11 @@ const OptionGroupGroupInfo = () => {
   /**
    *
    */
-  const onSortEnd = ({
-    oldIndex,
-    newIndex
-  }) => {
-    const cloneAnswerList = cloneDeep(watchedAnswerInfo);
-    const temp = cloneAnswerList[oldIndex];
+  var onSortEnd = function onSortEnd(_ref) {
+    var oldIndex = _ref.oldIndex,
+      newIndex = _ref.newIndex;
+    var cloneAnswerList = cloneDeep(watchedAnswerInfo);
+    var temp = cloneAnswerList[oldIndex];
     cloneAnswerList[oldIndex] = cloneAnswerList[newIndex];
     cloneAnswerList[newIndex] = temp;
     setValue('groups', arrayMove(watchedGroups, oldIndex, newIndex), {
@@ -80,57 +76,69 @@ const OptionGroupGroupInfo = () => {
   /**
    *
    */
-  const renderGroupOptionList = () => {
-    return React.createElement(SortableListGroup, {
+  var renderGroupOptionList = function renderGroupOptionList() {
+    return jsx(SortableListGroup, {
       onSortEnd: onSortEnd,
-      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)
-    }))));
+      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);
+        })
+      })
+    });
   };
   /**
    *
    */
-  const renderGroupOptionAddButton = () => {
-    return React.createElement(Tooltip, {
+  var renderGroupOptionAddButton = function renderGroupOptionAddButton() {
+    return jsx(Tooltip, {
       title: isMaximumGroups ? intl.formatMessage({
         id: 'group.option.tooltip.maxDisabled'
       }) : undefined,
-      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'
-    }))));
+      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'
+          })
+        })
+      })
+    });
   };
   //
   //
   //
-  return React.createElement(Flex, {
-    column: true
-  }, React.createElement(Text, {
-    size: "small",
-    bold: true
-  }, intl.formatMessage({
-    id: 'group.option.title'
-  })), renderGroupOptionList(), renderGroupOptionAddButton());
+  return jsxs(Flex, {
+    column: true,
+    children: [jsx(Text, {
+      size: "small",
+      bold: true,
+      children: 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 React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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,126 +7,137 @@ import { useRawEliceIntl } from '@elice/intl';
 import trim from 'lodash-es/trim';
 import styled from 'styled-components';
 
-const SHEET_Z_INDEX = 982;
-const MIN_GROUP_INFO_COUNT = 2;
-const StyledSortableListItem = styled(SortableListItem).withConfig({
+var SHEET_Z_INDEX = 982;
+var MIN_GROUP_INFO_COUNT = 2;
+var 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);
-const StyledSortableListItemOptionWrapper = styled.div.withConfig({
+var 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:", ";"], ({
-  isGroupChildAnswer
-}) => isGroupChildAnswer ? base.color.red8 : base.color.gray3, base.color.white);
-const StyledInputGroup = styled(Input).withConfig({
+})(["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({
   componentId: "sc-hj5nic-2"
 })(["& > div{border:0;}"]);
-const OptionGroupGroupListItem = ({
-  disabled,
-  groupId,
-  groupsCount,
-  onRemoveOption
-}) => {
+var OptionGroupGroupListItem = function OptionGroupGroupListItem(_ref2) {
+  var disabled = _ref2.disabled,
+    groupId = _ref2.groupId,
+    groupsCount = _ref2.groupsCount,
+    onRemoveOption = _ref2.onRemoveOption;
   var _a, _b, _c, _d, _e;
-  const intl = useRawEliceIntl();
-  const {
-    control,
-    formState
-  } = useFormContext();
-  const watchedAnswerInfo = useWatch({
-    control,
+  var intl = useRawEliceIntl();
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control,
+    formState = _useFormContext.formState;
+  var watchedAnswerInfo = useWatch({
+    control: control,
     name: 'answerInfoDefault'
   });
-  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 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 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({
+  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({
               id: 'group.option.errorMessage.required'
-            });
-          }
-          if (!isGroupChildAnswer) {
-            return intl.formatMessage({
-              id: 'group.option.errorMessage.notChild'
-            });
+            })
+          },
+          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'
+              });
+            }
           }
+        },
+        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
-      }))
-    }));
+      })
+    });
   };
   /**
    *
    */
-  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 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 renderErrorMessage = () => {
+  var renderErrorMessage = function renderErrorMessage() {
     if (!errorMessage) {
       return null;
     }
-    return React.createElement(Flex, {
-      paddingleft: "0.25rem"
-    }, React.createElement(Text, {
-      size: "small",
-      role: "danger"
-    }, errorMessage));
+    return jsx(Flex, {
+      paddingleft: "0.25rem",
+      children: jsx(Text, {
+        size: "small",
+        role: "danger",
+        children: errorMessage
+      })
+    });
   };
   //
   //
   //
-  return React.createElement(StyledSortableListItem, {
-    index: groupId
-  }, React.createElement(Flex, {
-    justify: "center",
-    width: "100%",
-    column: true
-  }, React.createElement(Flex, {
-    align: "center"
-  }, renderOptionGroupInput(), renderOptionRemoveButton()), renderErrorMessage()));
+  return jsx(StyledSortableListItem, {
+    index: groupId,
+    children: jsxs(Flex, {
+      justify: "center",
+      width: "100%",
+      column: true,
+      children: [jsxs(Flex, {
+        align: "center",
+        children: [renderOptionGroupInput(), renderOptionRemoveButton()]
+      }), renderErrorMessage()]
+    })
+  });
 };
 
 export { OptionGroupGroupListItem as default };

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

@@ -1,6 +1,10 @@
 function checkTwoDimensionArray(answerInfo) {
   try {
-    return answerInfo.every(i => i.every(j => typeof j === 'number'));
+    return answerInfo.every(function (i) {
+      return i.every(function (j) {
+        return 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(option => {
+    optionsDefault: Array.isArray(v.optionsDefault) ? v.optionsDefault.map(function (option) {
       var _a, _b;
       return {
         id: createRandomId(),
@@ -16,10 +16,12 @@ 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(group => ({
-      id: createRandomId(),
-      group
-    })) : []
+    groups: Array.isArray(v.groups) ? v.groups.map(function (group) {
+      return {
+        id: createRandomId(),
+        group: group
+      };
+    }) : []
   });
 }
 /**
@@ -27,14 +29,17 @@ function manipulateValue(v) {
  */
 function restoreValue(v) {
   return Object.assign(Object.assign({}, v), {
-    optionsDefault: v.optionsDefault.length ? v.optionsDefault.map(option => ({
-      title: trim(option.title),
-      content: option.content
-    })) : null,
+    optionsDefault: v.optionsDefault.length ? v.optionsDefault.map(function (option) {
+      return {
+        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(({
-      group
-    }) => trim(group)) : null
+    groups: v.groups.length ? v.groups.map(function (_ref) {
+      var group = _ref.group;
+      return trim(group);
+    }) : null
   });
 }