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

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

@@ -1,7 +1,8 @@
-import React from 'react';
+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 { useFormContext, useWatch, Controller } from 'react-hook-form';
 import { config, postGlobalRemoteFileAttachmentUpload } from '@elice/api-client';
-import { SortableListItem, Input, Dropdown, Flex, Text, Hspace, IconButton, Notification, Tooltip } from '@elice/blocks';
+import { SortableListItem, Input, Dropdown, Flex, Text, Hspace, IconButton, Tooltip, Notification } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
@@ -11,84 +12,107 @@ import trim from 'lodash-es/trim';
 import styled, { css } from 'styled-components';
 import { checkTwoDimensionArray } from '../../utils/checkTwoDimensionArray.js';
 
-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({
+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({
   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);
-const StyledSortableListItemOptionWrapper = styled.div.withConfig({
+var 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);
-const StyledSortableListItemOption = styled.div.withConfig({
+var StyledSortableListItemOption = styled.div.withConfig({
   componentId: "sc-18q96lt-2"
-})(["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({
+})(["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({
   componentId: "sc-18q96lt-3"
 })(["display:flex;align-items:center;width:100%;height:100%;padding:0 1rem;"]);
-const StyledQuizOptionContentLabel = styled.label.withConfig({
+var StyledQuizOptionContentLabel = styled.label.withConfig({
   componentId: "sc-18q96lt-4"
 })(["display:flex;align-items:center;width:100%;height:100%;padding:0 1rem;cursor:pointer;"]);
-const StyledQuizOptionTextInput = styled(Input).withConfig({
+var StyledQuizOptionTextInput = styled(Input).withConfig({
   componentId: "sc-18q96lt-5"
 })(["& > div{border:0;}"]);
-const StyledQuizOptionContentInput = styled.input.withConfig({
+var StyledQuizOptionContentInput = styled.input.withConfig({
   componentId: "sc-18q96lt-6"
 })(["display:none;"]);
-const StyledDropdown = styled(Dropdown).withConfig({
+var StyledDropdown = styled(Dropdown).withConfig({
   componentId: "sc-18q96lt-7"
 })(["border:0;&.eb-dropdown__inner{width:100%;height:3.5rem;}"]);
 //
 //
 //
-const OptionGroupAnswerListItem = ({
-  optionId,
-  disabled,
-  onRemoveItem
-}) => {
+var OptionGroupAnswerListItem = function OptionGroupAnswerListItem(_ref) {
+  var optionId = _ref.optionId,
+    disabled = _ref.disabled,
+    onRemoveItem = _ref.onRemoveItem;
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const intl = useRawEliceIntl();
-  const {
-    control,
-    formState,
-    setValue
-  } = useFormContext();
-  const watchedAnswerInfo = useWatch({
-    control,
+  var intl = useRawEliceIntl();
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control,
+    formState = _useFormContext.formState,
+    setValue = _useFormContext.setValue;
+  var watchedAnswerInfo = useWatch({
+    control: control,
     name: 'answerInfoDefault'
   });
-  const [watchedOptions, watchedGroupList] = useWatch({
-    control,
-    name: ['optionsDefault', 'groups']
+  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 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;
+  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;
   /**
    * File upload function.
    */
-  const uploadContentFile = async attachmentFile => {
-    if (!isReady) {
-      return;
-    }
-    return postGlobalRemoteFileAttachmentUpload({
-      attachmentFile
-    }).then(res => res.url).catch(err => {
-      console.error(err);
-      throw err;
-    });
-  };
+  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 getContentUrl = contentUrl => {
+  var getContentUrl = function getContentUrl(contentUrl) {
     if (contentUrl.includes('![]')) {
-      const optionContentUrl = contentUrl === null || contentUrl === void 0 ? void 0 : contentUrl.substring(contentUrl.indexOf('(') + 1, contentUrl.indexOf(')'));
+      var optionContentUrl = contentUrl === null || contentUrl === void 0 ? void 0 : contentUrl.substring(contentUrl.indexOf('(') + 1, contentUrl.indexOf(')'));
       return optionContentUrl;
     }
     return contentUrl;
@@ -96,174 +120,231 @@ const OptionGroupAnswerListItem = ({
   /**
    *
    */
-  const renderOptionTitleInput = () => {
-    return React.createElement(StyledSortableListItemOption, {
+  var renderOptionTitleInput = function renderOptionTitleInput() {
+    return jsx(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
-      }
-    }, 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({
+      },
+      children: jsx(Controller, {
+        control: control,
+        name: "optionsDefault.".concat(optionId, ".title"),
+        rules: {
+          required: {
+            value: !isOptionTitle && !isOptionContent,
+            message: 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
-      }))
-    }));
+      })
+    });
   };
   /**
    *
    */
-  const renderOptionContentInput = () => {
-    return React.createElement(StyledSortableListItemOption, {
+  var renderOptionContentInput = function renderOptionContentInput() {
+    return jsx(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
       },
-      "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)})`);
+      "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;
+                }()
+              }))]
+            })
+          });
         }
-      }))))
-    }));
+      })
+    });
   };
   /**
    *
    */
-  const renderOptionGroupDropdown = () => {
-    return React.createElement(StyledSortableListItemOption, {
+  var renderOptionGroupDropdown = function renderOptionGroupDropdown() {
+    return jsx(StyledSortableListItemOption, {
       style: {
         width: '33.3%'
       },
-      "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))));
+      "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);
+        })]
+      })
+    });
   };
   /**
    *
    */
-  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 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 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
+      })
+    });
   };
   //
   //
@@ -271,16 +352,21 @@ const OptionGroupAnswerListItem = ({
   if (!checkTwoDimensionArray(watchedAnswerInfo)) {
     return null;
   }
-  return React.createElement(StyledSortableListItem, {
+  return jsx(StyledSortableListItem, {
     index: optionId,
-    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()));
+    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()]
+    })
+  });
 };
 
 export { OptionGroupAnswerListItem as default };