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

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

@@ -1,8 +1,7 @@
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
 import { config, postGlobalRemoteFileAttachmentUpload } from '@elice/api-client';
-import { SortableListItem, Input, Dropdown, Flex, Text, Hspace, IconButton, Tooltip, Notification } from '@elice/blocks';
+import { SortableListItem, Input, Dropdown, Flex, Text, Hspace, IconButton, Notification, Tooltip } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
@@ -12,107 +11,84 @@ import trim from 'lodash-es/trim';
 import styled, { css } from 'styled-components';
 import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 
-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(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(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.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:", ";"], base.color.gray3, base.color.white);
-var StyledSortableListItemOption = styled.div.withConfig({
+const StyledSortableListItemOption = styled.div.withConfig({
   componentId: "sc-18q96lt-2"
-})(["height:3.5rem;&:not(:last-child){border-right:1px solid ", ";}", ";"], base.color.gray3, function (props) {
-  return props['aria-disabled'] && css(["background-color:", ";border-radius:0;"], base.color.gray2);
-});
-var StyledQuizOptionContent = styled.div.withConfig({
+})(["height:3.5rem;&:not(:last-child){border-right:1px solid ", ";}", ";"], base.color.gray3, props => props['aria-disabled'] && css(["background-color:", ";border-radius:0;"], 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.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(Input).withConfig({
+const StyledQuizOptionTextInput = styled(Input).withConfig({
   componentId: "sc-18q96lt-5"
 })(["& > div{border:0;}"]);
-var StyledQuizOptionContentInput = styled.input.withConfig({
+const StyledQuizOptionContentInput = styled.input.withConfig({
   componentId: "sc-18q96lt-6"
 })(["display:none;"]);
-var StyledDropdown = styled(Dropdown).withConfig({
+const StyledDropdown = styled(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 = useRawEliceIntl();
-  var _useFormContext = useFormContext(),
-    control = _useFormContext.control,
-    formState = _useFormContext.formState,
-    setValue = _useFormContext.setValue;
-  var watchedAnswerInfo = useWatch({
-    control: control,
+  const intl = useRawEliceIntl();
+  const {
+    control,
+    formState,
+    setValue
+  } = useFormContext();
+  const watchedAnswerInfo = useWatch({
+    control,
     name: 'answerInfoDefault'
   });
-  var _useWatch = useWatch({
-      control: control,
-      name: ['optionsDefault', 'groups']
-    }),
-    _useWatch2 = _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] = useWatch({
+    control,
+    name: ['optionsDefault', 'groups']
   });
-  var isReady = useMaterialConfigApiClientUpdate(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 = useMaterialConfigApiClientUpdate(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(attachmentFile) {
-      return _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", 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 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;
@@ -120,231 +96,174 @@ var OptionGroupAnswerListItem = function OptionGroupAnswerListItem(_ref) {
   /**
    *
    */
-  var renderOptionTitleInput = function renderOptionTitleInput() {
-    return jsx(StyledSortableListItemOption, {
+  const renderOptionTitleInput = () => {
+    return React.createElement(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
-      },
-      children: jsx(Controller, {
-        control: control,
-        name: "optionsDefault.".concat(optionId, ".title"),
-        rules: {
-          required: {
-            value: !isOptionTitle && !isOptionContent,
-            message: intl.formatMessage({
+      }
+    }, React.createElement(Controller, {
+      control: control,
+      name: `optionsDefault.${optionId}.title`,
+      rules: {
+        required: {
+          value: !isOptionTitle && !isOptionContent,
+          message: intl.formatMessage({
+            id: 'answer.option.errorMessage'
+          })
+        },
+        validate: e => {
+          if (!trim(e).length) {
+            return intl.formatMessage({
               id: 'answer.option.errorMessage'
-            })
-          },
-          validate: function validate(e) {
-            if (!trim(e).length) {
-              return intl.formatMessage({
-                id: 'answer.option.errorMessage'
-              });
-            }
+            });
           }
-        },
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return 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 jsx(StyledSortableListItemOption, {
+  const renderOptionContentInput = () => {
+    return React.createElement(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
       },
-      "aria-disabled": disabled,
-      children: jsx(Controller, {
-        control: control,
-        name: "optionsDefault.".concat(optionId, ".content"),
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return jsx(Fragment, {
-            children: field.value ? jsx(StyledQuizOptionContent, {
-              children: jsxs(Flex, {
-                justify: "space-between",
-                align: "center",
-                width: "100%",
-                height: "100%",
-                children: [jsx(Text, {
-                  ellipsis: true,
-                  children: jsx("a", {
-                    href: getContentUrl(field.value),
-                    target: "_blank",
-                    rel: "noreferrer",
-                    children: getContentUrl(field.value)
-                  })
-                }), jsxs(Flex, {
-                  align: "center",
-                  children: [jsx(Hspace, {
-                    width: 0.5
-                  }), jsx(IconButton, {
-                    disabled: disabled,
-                    icon: eilMathsignMultiplyBasic,
-                    role: "gray6",
-                    size: "micro",
-                    border: false,
-                    transparent: true,
-                    onClick: function onClick() {
-                      return field.onChange('');
-                    }
-                  })]
-                })]
-              })
-            }) : jsxs(Fragment, {
-              children: [jsx(StyledQuizOptionContentLabel, {
-                htmlFor: "".concat(FILE_LABEL, "_").concat(optionId),
-                children: jsx(Text, {
-                  role: "primary",
-                  underline: true,
-                  children: intl.formatMessage({
-                    id: 'answer.option.file.label'
-                  })
-                })
-              }), jsx(StyledQuizOptionContentInput, Object.assign({}, field, {
-                id: "".concat(FILE_LABEL, "_").concat(optionId),
-                type: "file",
-                accept: FILE_ACCEPT,
-                disabled: disabled,
-                onChange: function () {
-                  var _onChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
-                    var _a, _b, file, contentFileUrl;
-                    return _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", Notification.error(intl.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(Controller, {
+      control: control,
+      name: `optionsDefault.${optionId}.content`,
+      render: ({
+        field
+      }) => React.createElement(React.Fragment, null, field.value ? React.createElement(StyledQuizOptionContent, null, React.createElement(Flex, {
+        justify: "space-between",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React.createElement(Text, {
+        ellipsis: true
+      }, React.createElement("a", {
+        href: getContentUrl(field.value),
+        target: "_blank",
+        rel: "noreferrer"
+      }, getContentUrl(field.value))), React.createElement(Flex, {
+        align: "center"
+      }, React.createElement(Hspace, {
+        width: 0.5
+      }), React.createElement(IconButton, {
+        disabled: disabled,
+        icon: 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(Text, {
+        role: "primary",
+        underline: true
+      }, intl.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 Notification.error(intl.formatMessage({
+              id: 'answer.option.file.errorMessage.maxSize'
+            }, {
+              size: 3
+            }));
+          }
+          const contentFileUrl = await uploadContentFile(file);
+          field.onChange(`![](${String(contentFileUrl)})`);
         }
-      })
-    });
+      }))))
+    }));
   };
   /**
    *
    */
-  var renderOptionGroupDropdown = function renderOptionGroupDropdown() {
-    return jsx(StyledSortableListItemOption, {
+  const renderOptionGroupDropdown = () => {
+    return React.createElement(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
       },
-      "aria-disabled": disabled,
-      children: jsxs(StyledDropdown, {
-        disabled: disabled,
-        value: groupIndex,
-        onChange: function onChange(e) {
-          var cloneAnswerList = cloneDeep(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(_toConsumableArray(answerList[e]), [optionId]);
-          } else {
-            answerList[e] = [optionId];
-          }
-          setValue('answerInfoDefault', answerList);
-        },
-        children: [jsx("option", {
-          value: DEFAULT_OPTION_VALUE,
-          children: intl.formatMessage({
-            id: 'answer.option.default.group'
-          })
-        }), watchedGroupList.map(function (group, index) {
-          return 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.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 jsxs(Fragment, {
-      children: [jsx(Hspace, {
-        width: 0.5
-      }), jsx(Tooltip, {
-        title: isMinimumOptions ? intl.formatMessage({
-          id: 'answer.option.tooltip.minDisabled'
-        }) : undefined,
-        placement: "top",
-        children: jsx("span", {
-          children: jsx(IconButton, {
-            transparent: true,
-            icon: 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(Hspace, {
+      width: 0.5
+    }), React.createElement(Tooltip, {
+      title: isMinimumOptions ? intl.formatMessage({
+        id: 'answer.option.tooltip.minDisabled'
+      }) : undefined,
+      placement: "top"
+    }, React.createElement("span", null, React.createElement(IconButton, {
+      transparent: true,
+      icon: eilMathsignMultiplyBasic,
+      role: "gray6",
+      size: "micro",
+      border: false,
+      disabled: disabled || isMinimumOptions,
+      onClick: onRemoveItem
+    }))));
   };
   /**
    *
    */
-  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));
   };
   //
   //
@@ -352,21 +271,16 @@ var OptionGroupAnswerListItem = function OptionGroupAnswerListItem(_ref) {
   if (!checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return jsx(StyledSortableListItem, {
+  return React.createElement(StyledSortableListItem, {
     index: optionId,
-    disabled: disabled,
-    children: jsxs(Flex, {
-      justify: "center",
-      width: "calc(100% - 1.5rem)",
-      column: true,
-      children: [jsxs(Flex, {
-        align: "center",
-        children: [jsxs(StyledSortableListItemOptionWrapper, {
-          children: [renderOptionTitleInput(), renderOptionContentInput(), renderOptionGroupDropdown()]
-        }), renderOptionRemoveButton()]
-      }), renderErrorMessage()]
-    })
-  });
+    disabled: disabled
+  }, React.createElement(Flex, {
+    justify: "center",
+    width: "calc(100% - 1.5rem)",
+    column: true
+  }, React.createElement(Flex, {
+    align: "center"
+  }, React.createElement(StyledSortableListItemOptionWrapper, null, renderOptionTitleInput(), renderOptionContentInput(), renderOptionGroupDropdown()), renderOptionRemoveButton()), renderErrorMessage()));
 };
 
 export { OptionGroupAnswerListItem as default };