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

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

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactHookForm = require('react-hook-form');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
@@ -16,113 +15,84 @@ var trim = require('lodash-es/trim');
 var styled = require('styled-components');
 var checkTwoDimensionArray = require('../../utils/checkTwoDimensionArray.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var cloneDeep__default = /*#__PURE__*/_interopDefaultCompat(cloneDeep);
-var trim__default = /*#__PURE__*/_interopDefaultCompat(trim);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var SHEET_Z_INDEX = 982;
-var DEFAULT_OPTION_VALUE = -1;
-var MIN_OPTION_INFO_COUNT = 2;
-var FILE_LABEL = 'file-label';
-var FILE_ACCEPT = '.mp3, .mp4, .mov, .png, .jpg, .svg, .gif';
-var MAX_FILE_SIZE = 3 * 1024 * 1024;
-var StyledSortableListItem = styled__default.default(blocks.SortableListItem).withConfig({
+const SHEET_Z_INDEX = 982;
+const DEFAULT_OPTION_VALUE = -1;
+const MIN_OPTION_INFO_COUNT = 2;
+const FILE_LABEL = 'file-label';
+const FILE_ACCEPT = '.mp3, .mp4, .mov, .png, .jpg, .svg, .gif';
+const MAX_FILE_SIZE = 3 * 1024 * 1024;
+const StyledSortableListItem = styled(blocks.SortableListItem).withConfig({
   componentId: "sc-18q96lt-0"
 })(["display:flex;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;&:not(:last-child){margin-bottom:0.5rem;}"], SHEET_Z_INDEX + 1);
-var StyledSortableListItemOptionWrapper = styled__default.default.div.withConfig({
+const StyledSortableListItemOptionWrapper = styled.div.withConfig({
   componentId: "sc-18q96lt-1"
 })(["display:flex;align-items:center;overflow:hidden;width:100%;height:100%;border:1px solid ", ";border-radius:4px;background:", ";"], designTokens.base.color.gray3, designTokens.base.color.white);
-var StyledSortableListItemOption = styled__default.default.div.withConfig({
+const StyledSortableListItemOption = styled.div.withConfig({
   componentId: "sc-18q96lt-2"
-})(["height:3.5rem;&:not(:last-child){border-right:1px solid ", ";}", ";"], designTokens.base.color.gray3, function (props) {
-  return props['aria-disabled'] && styled.css(["background-color:", ";border-radius:0;"], designTokens.base.color.gray2);
-});
-var StyledQuizOptionContent = styled__default.default.div.withConfig({
+})(["height:3.5rem;&:not(:last-child){border-right:1px solid ", ";}", ";"], designTokens.base.color.gray3, props => props['aria-disabled'] && styled.css(["background-color:", ";border-radius:0;"], designTokens.base.color.gray2));
+const StyledQuizOptionContent = styled.div.withConfig({
   componentId: "sc-18q96lt-3"
 })(["display:flex;align-items:center;width:100%;height:100%;padding:0 1rem;"]);
-var StyledQuizOptionContentLabel = styled__default.default.label.withConfig({
+const StyledQuizOptionContentLabel = styled.label.withConfig({
   componentId: "sc-18q96lt-4"
 })(["display:flex;align-items:center;width:100%;height:100%;padding:0 1rem;cursor:pointer;"]);
-var StyledQuizOptionTextInput = styled__default.default(blocks.Input).withConfig({
+const StyledQuizOptionTextInput = styled(blocks.Input).withConfig({
   componentId: "sc-18q96lt-5"
 })(["& > div{border:0;}"]);
-var StyledQuizOptionContentInput = styled__default.default.input.withConfig({
+const StyledQuizOptionContentInput = styled.input.withConfig({
   componentId: "sc-18q96lt-6"
 })(["display:none;"]);
-var StyledDropdown = styled__default.default(blocks.Dropdown).withConfig({
+const StyledDropdown = styled(blocks.Dropdown).withConfig({
   componentId: "sc-18q96lt-7"
 })(["border:0;&.eb-dropdown__inner{width:100%;height:3.5rem;}"]);
 //
 //
 //
-var OptionGroupAnswerListItem = function OptionGroupAnswerListItem(_ref) {
-  var optionId = _ref.optionId,
-    disabled = _ref.disabled,
-    onRemoveItem = _ref.onRemoveItem;
+const OptionGroupAnswerListItem = ({
+  optionId,
+  disabled,
+  onRemoveItem
+}) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  var intl$1 = intl.useRawEliceIntl();
-  var _useFormContext = reactHookForm.useFormContext(),
-    control = _useFormContext.control,
-    formState = _useFormContext.formState,
-    setValue = _useFormContext.setValue;
-  var watchedAnswerInfo = reactHookForm.useWatch({
-    control: control,
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    control,
+    formState,
+    setValue
+  } = reactHookForm.useFormContext();
+  const watchedAnswerInfo = reactHookForm.useWatch({
+    control,
     name: 'answerInfoDefault'
   });
-  var _useWatch = reactHookForm.useWatch({
-      control: control,
-      name: ['optionsDefault', 'groups']
-    }),
-    _useWatch2 = _rollupPluginBabelHelpers.slicedToArray(_useWatch, 2),
-    watchedOptions = _useWatch2[0],
-    watchedGroupList = _useWatch2[1];
-  var errorMessage = (_d = (_c = (_b = (_a = formState.errors) === null || _a === void 0 ? void 0 : _a.optionsDefault) === null || _b === void 0 ? void 0 : _b[optionId]) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.message;
-  var groupIndex = watchedAnswerInfo.findIndex(function (answer) {
-    return answer === null || answer === void 0 ? void 0 : answer.includes(optionId);
+  const [watchedOptions, watchedGroupList] = reactHookForm.useWatch({
+    control,
+    name: ['optionsDefault', 'groups']
   });
-  var isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
-  var isOptionTitle = (_f = (_e = watchedOptions[optionId]) === null || _e === void 0 ? void 0 : _e.title) === null || _f === void 0 ? void 0 : _f.length;
-  var isOptionContent = (_h = (_g = watchedOptions[optionId]) === null || _g === void 0 ? void 0 : _g.content) === null || _h === void 0 ? void 0 : _h.length;
+  const errorMessage = (_d = (_c = (_b = (_a = formState.errors) === null || _a === void 0 ? void 0 : _a.optionsDefault) === null || _b === void 0 ? void 0 : _b[optionId]) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.message;
+  const groupIndex = watchedAnswerInfo.findIndex(answer => answer === null || answer === void 0 ? void 0 : answer.includes(optionId));
+  const isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+  const isOptionTitle = (_f = (_e = watchedOptions[optionId]) === null || _e === void 0 ? void 0 : _e.title) === null || _f === void 0 ? void 0 : _f.length;
+  const isOptionContent = (_h = (_g = watchedOptions[optionId]) === null || _g === void 0 ? void 0 : _g.content) === null || _h === void 0 ? void 0 : _h.length;
   /**
    * File upload function.
    */
-  var uploadContentFile = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(attachmentFile) {
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (isReady) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            return _context.abrupt("return", apiClient.postGlobalRemoteFileAttachmentUpload({
-              attachmentFile: attachmentFile
-            }).then(function (res) {
-              return res.url;
-            }).catch(function (err) {
-              console.error(err);
-              throw err;
-            }));
-          case 3:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function uploadContentFile(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  const uploadContentFile = async attachmentFile => {
+    if (!isReady) {
+      return;
+    }
+    return apiClient.postGlobalRemoteFileAttachmentUpload({
+      attachmentFile
+    }).then(res => res.url).catch(err => {
+      console.error(err);
+      throw err;
+    });
+  };
   /**
    *
    */
-  var getContentUrl = function getContentUrl(contentUrl) {
+  const getContentUrl = contentUrl => {
     if (contentUrl.includes('![]')) {
-      var optionContentUrl = contentUrl === null || contentUrl === void 0 ? void 0 : contentUrl.substring(contentUrl.indexOf('(') + 1, contentUrl.indexOf(')'));
+      const optionContentUrl = contentUrl === null || contentUrl === void 0 ? void 0 : contentUrl.substring(contentUrl.indexOf('(') + 1, contentUrl.indexOf(')'));
       return optionContentUrl;
     }
     return contentUrl;
@@ -130,231 +100,174 @@ var OptionGroupAnswerListItem = function OptionGroupAnswerListItem(_ref) {
   /**
    *
    */
-  var renderOptionTitleInput = function renderOptionTitleInput() {
-    return jsxRuntime.jsx(StyledSortableListItemOption, {
+  const renderOptionTitleInput = () => {
+    return React.createElement(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
-      },
-      children: jsxRuntime.jsx(reactHookForm.Controller, {
-        control: control,
-        name: "optionsDefault.".concat(optionId, ".title"),
-        rules: {
-          required: {
-            value: !isOptionTitle && !isOptionContent,
-            message: intl$1.formatMessage({
+      }
+    }, React.createElement(reactHookForm.Controller, {
+      control: control,
+      name: `optionsDefault.${optionId}.title`,
+      rules: {
+        required: {
+          value: !isOptionTitle && !isOptionContent,
+          message: intl$1.formatMessage({
+            id: 'answer.option.errorMessage'
+          })
+        },
+        validate: e => {
+          if (!trim(e).length) {
+            return intl$1.formatMessage({
               id: 'answer.option.errorMessage'
-            })
-          },
-          validate: function validate(e) {
-            if (!trim__default.default(e).length) {
-              return intl$1.formatMessage({
-                id: 'answer.option.errorMessage'
-              });
-            }
+            });
           }
-        },
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return jsxRuntime.jsx(StyledQuizOptionTextInput, Object.assign({}, field, {
-            width: "full",
-            disabled: disabled
-          }));
         }
-      })
-    });
+      },
+      render: ({
+        field
+      }) => React.createElement(StyledQuizOptionTextInput, Object.assign({}, field, {
+        width: "full",
+        disabled: disabled
+      }))
+    }));
   };
   /**
    *
    */
-  var renderOptionContentInput = function renderOptionContentInput() {
-    return jsxRuntime.jsx(StyledSortableListItemOption, {
+  const renderOptionContentInput = () => {
+    return React.createElement(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
       },
-      "aria-disabled": disabled,
-      children: jsxRuntime.jsx(reactHookForm.Controller, {
-        control: control,
-        name: "optionsDefault.".concat(optionId, ".content"),
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return jsxRuntime.jsx(jsxRuntime.Fragment, {
-            children: field.value ? jsxRuntime.jsx(StyledQuizOptionContent, {
-              children: jsxRuntime.jsxs(blocks.Flex, {
-                justify: "space-between",
-                align: "center",
-                width: "100%",
-                height: "100%",
-                children: [jsxRuntime.jsx(blocks.Text, {
-                  ellipsis: true,
-                  children: jsxRuntime.jsx("a", {
-                    href: getContentUrl(field.value),
-                    target: "_blank",
-                    rel: "noreferrer",
-                    children: getContentUrl(field.value)
-                  })
-                }), jsxRuntime.jsxs(blocks.Flex, {
-                  align: "center",
-                  children: [jsxRuntime.jsx(blocks.Hspace, {
-                    width: 0.5
-                  }), jsxRuntime.jsx(blocks.IconButton, {
-                    disabled: disabled,
-                    icon: icons.eilMathsignMultiplyBasic,
-                    role: "gray6",
-                    size: "micro",
-                    border: false,
-                    transparent: true,
-                    onClick: function onClick() {
-                      return field.onChange('');
-                    }
-                  })]
-                })]
-              })
-            }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [jsxRuntime.jsx(StyledQuizOptionContentLabel, {
-                htmlFor: "".concat(FILE_LABEL, "_").concat(optionId),
-                children: jsxRuntime.jsx(blocks.Text, {
-                  role: "primary",
-                  underline: true,
-                  children: intl$1.formatMessage({
-                    id: 'answer.option.file.label'
-                  })
-                })
-              }), jsxRuntime.jsx(StyledQuizOptionContentInput, Object.assign({}, field, {
-                id: "".concat(FILE_LABEL, "_").concat(optionId),
-                type: "file",
-                accept: FILE_ACCEPT,
-                disabled: disabled,
-                onChange: function () {
-                  var _onChange = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(e) {
-                    var _a, _b, file, contentFileUrl;
-                    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
-                      while (1) switch (_context2.prev = _context2.next) {
-                        case 0:
-                          file = (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
-                          if (file) {
-                            _context2.next = 3;
-                            break;
-                          }
-                          return _context2.abrupt("return");
-                        case 3:
-                          if (!(file.size > MAX_FILE_SIZE)) {
-                            _context2.next = 5;
-                            break;
-                          }
-                          return _context2.abrupt("return", blocks.Notification.error(intl$1.formatMessage({
-                            id: 'answer.option.file.errorMessage.maxSize'
-                          }, {
-                            size: 3
-                          })));
-                        case 5:
-                          _context2.next = 7;
-                          return uploadContentFile(file);
-                        case 7:
-                          contentFileUrl = _context2.sent;
-                          field.onChange("![](".concat(String(contentFileUrl), ")"));
-                        case 9:
-                        case "end":
-                          return _context2.stop();
-                      }
-                    }, _callee2);
-                  }));
-                  function onChange(_x2) {
-                    return _onChange.apply(this, arguments);
-                  }
-                  return onChange;
-                }()
-              }))]
-            })
-          });
+      "aria-disabled": disabled
+    }, React.createElement(reactHookForm.Controller, {
+      control: control,
+      name: `optionsDefault.${optionId}.content`,
+      render: ({
+        field
+      }) => React.createElement(React.Fragment, null, field.value ? React.createElement(StyledQuizOptionContent, null, React.createElement(blocks.Flex, {
+        justify: "space-between",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React.createElement(blocks.Text, {
+        ellipsis: true
+      }, React.createElement("a", {
+        href: getContentUrl(field.value),
+        target: "_blank",
+        rel: "noreferrer"
+      }, getContentUrl(field.value))), React.createElement(blocks.Flex, {
+        align: "center"
+      }, React.createElement(blocks.Hspace, {
+        width: 0.5
+      }), React.createElement(blocks.IconButton, {
+        disabled: disabled,
+        icon: icons.eilMathsignMultiplyBasic,
+        role: "gray6",
+        size: "micro",
+        border: false,
+        transparent: true,
+        onClick: () => field.onChange('')
+      })))) : React.createElement(React.Fragment, null, React.createElement(StyledQuizOptionContentLabel, {
+        htmlFor: `${FILE_LABEL}_${optionId}`
+      }, React.createElement(blocks.Text, {
+        role: "primary",
+        underline: true
+      }, intl$1.formatMessage({
+        id: 'answer.option.file.label'
+      }))), React.createElement(StyledQuizOptionContentInput, Object.assign({}, field, {
+        id: `${FILE_LABEL}_${optionId}`,
+        type: "file",
+        accept: FILE_ACCEPT,
+        disabled: disabled,
+        onChange: async e => {
+          var _a, _b;
+          const file = (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+          if (!file) {
+            return;
+          }
+          if (file.size > MAX_FILE_SIZE) {
+            return blocks.Notification.error(intl$1.formatMessage({
+              id: 'answer.option.file.errorMessage.maxSize'
+            }, {
+              size: 3
+            }));
+          }
+          const contentFileUrl = await uploadContentFile(file);
+          field.onChange(`![](${String(contentFileUrl)})`);
         }
-      })
-    });
+      }))))
+    }));
   };
   /**
    *
    */
-  var renderOptionGroupDropdown = function renderOptionGroupDropdown() {
-    return jsxRuntime.jsx(StyledSortableListItemOption, {
+  const renderOptionGroupDropdown = () => {
+    return React.createElement(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
       },
-      "aria-disabled": disabled,
-      children: jsxRuntime.jsxs(StyledDropdown, {
-        disabled: disabled,
-        value: groupIndex,
-        onChange: function onChange(e) {
-          var cloneAnswerList = cloneDeep__default.default(watchedAnswerInfo);
-          var answerList = cloneAnswerList.map(function (answers) {
-            return answers.filter(function (answer) {
-              return answer !== optionId;
-            });
-          });
-          if (e === DEFAULT_OPTION_VALUE) {
-            return setValue('answerInfoDefault', answerList);
-          }
-          if (answerList[e]) {
-            answerList[e] = [].concat(_rollupPluginBabelHelpers.toConsumableArray(answerList[e]), [optionId]);
-          } else {
-            answerList[e] = [optionId];
-          }
-          setValue('answerInfoDefault', answerList);
-        },
-        children: [jsxRuntime.jsx("option", {
-          value: DEFAULT_OPTION_VALUE,
-          children: intl$1.formatMessage({
-            id: 'answer.option.default.group'
-          })
-        }), watchedGroupList.map(function (group, index) {
-          return jsxRuntime.jsx("option", {
-            value: index,
-            children: group.group
-          }, index);
-        })]
-      })
-    });
+      "aria-disabled": disabled
+    }, React.createElement(StyledDropdown, {
+      disabled: disabled,
+      value: groupIndex,
+      onChange: e => {
+        const cloneAnswerList = cloneDeep(watchedAnswerInfo);
+        const answerList = cloneAnswerList.map(answers => answers.filter(answer => answer !== optionId));
+        if (e === DEFAULT_OPTION_VALUE) {
+          return setValue('answerInfoDefault', answerList);
+        }
+        if (answerList[e]) {
+          answerList[e] = [...answerList[e], optionId];
+        } else {
+          answerList[e] = [optionId];
+        }
+        setValue('answerInfoDefault', answerList);
+      }
+    }, React.createElement("option", {
+      value: DEFAULT_OPTION_VALUE
+    }, intl$1.formatMessage({
+      id: 'answer.option.default.group'
+    })), watchedGroupList.map((group, index) => React.createElement("option", {
+      key: index,
+      value: index
+    }, group.group))));
   };
   /**
    *
    */
-  var renderOptionRemoveButton = function renderOptionRemoveButton() {
-    var isMinimumOptions = (watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.length) <= MIN_OPTION_INFO_COUNT;
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(blocks.Hspace, {
-        width: 0.5
-      }), jsxRuntime.jsx(blocks.Tooltip, {
-        title: isMinimumOptions ? intl$1.formatMessage({
-          id: 'answer.option.tooltip.minDisabled'
-        }) : undefined,
-        placement: "top",
-        children: jsxRuntime.jsx("span", {
-          children: jsxRuntime.jsx(blocks.IconButton, {
-            transparent: true,
-            icon: icons.eilMathsignMultiplyBasic,
-            role: "gray6",
-            size: "micro",
-            border: false,
-            disabled: disabled || isMinimumOptions,
-            onClick: onRemoveItem
-          })
-        })
-      })]
-    });
+  const renderOptionRemoveButton = () => {
+    const isMinimumOptions = (watchedOptions === null || watchedOptions === void 0 ? void 0 : watchedOptions.length) <= MIN_OPTION_INFO_COUNT;
+    return React.createElement(React.Fragment, null, React.createElement(blocks.Hspace, {
+      width: 0.5
+    }), React.createElement(blocks.Tooltip, {
+      title: isMinimumOptions ? intl$1.formatMessage({
+        id: 'answer.option.tooltip.minDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(blocks.IconButton, {
+      transparent: true,
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "gray6",
+      size: "micro",
+      border: false,
+      disabled: disabled || isMinimumOptions,
+      onClick: onRemoveItem
+    }))));
   };
   /**
    *
    */
-  var renderErrorMessage = function renderErrorMessage() {
+  const renderErrorMessage = () => {
     if (!errorMessage) {
       return null;
     }
-    return jsxRuntime.jsx(blocks.Flex, {
-      paddingleft: "0.25rem",
-      children: jsxRuntime.jsx(blocks.Text, {
-        size: "small",
-        role: "danger",
-        children: errorMessage
-      })
-    });
+    return React.createElement(blocks.Flex, {
+      paddingleft: "0.25rem"
+    }, React.createElement(blocks.Text, {
+      size: "small",
+      role: "danger"
+    }, errorMessage));
   };
   //
   //
@@ -362,21 +275,16 @@ var OptionGroupAnswerListItem = function OptionGroupAnswerListItem(_ref) {
   if (!checkTwoDimensionArray.checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return jsxRuntime.jsx(StyledSortableListItem, {
+  return React.createElement(StyledSortableListItem, {
     index: optionId,
-    disabled: disabled,
-    children: jsxRuntime.jsxs(blocks.Flex, {
-      justify: "center",
-      width: "calc(100% - 1.5rem)",
-      column: true,
-      children: [jsxRuntime.jsxs(blocks.Flex, {
-        align: "center",
-        children: [jsxRuntime.jsxs(StyledSortableListItemOptionWrapper, {
-          children: [renderOptionTitleInput(), renderOptionContentInput(), renderOptionGroupDropdown()]
-        }), renderOptionRemoveButton()]
-      }), renderErrorMessage()]
-    })
-  });
+    disabled: disabled
+  }, React.createElement(blocks.Flex, {
+    justify: "center",
+    width: "calc(100% - 1.5rem)",
+    column: true
+  }, React.createElement(blocks.Flex, {
+    align: "center"
+  }, React.createElement(StyledSortableListItemOptionWrapper, null, renderOptionTitleInput(), renderOptionContentInput(), renderOptionGroupDropdown()), renderOptionRemoveButton()), renderErrorMessage()));
 };
 
 exports.default = OptionGroupAnswerListItem;