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

package/cjs/components/material-quiz-edit/context.js

@@ -4,8 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const MaterialQuizEditContext = React.createContext(null);
-const useMaterialQuizEditContext = () => React.useContext(MaterialQuizEditContext);
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var MaterialQuizEditContext = React__default.default.createContext(null);
+var useMaterialQuizEditContext = function useMaterialQuizEditContext() {
+  return React__default.default.useContext(MaterialQuizEditContext);
+};
 
 exports.default = MaterialQuizEditContext;
 exports.useMaterialQuizEditContext = useMaterialQuizEditContext;

package/cjs/components/material-quiz-edit/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var MaterialQuizEdit = require('./MaterialQuizEdit.js');
+
+
+
+exports.MaterialQuizEdit = MaterialQuizEdit.default;

package/cjs/components/material-quiz-edit/locales/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var en = require('./en.json.js');
+var ko = require('./ko.json.js');
+var th = require('./th.json.js');
+var ja = require('./ja.json.js');
+
+
+
+exports.messageEn = en.default;
+exports.messageKo = ko.default;
+exports.messageTh = th.default;
+exports.messageJa = ja.default;

package/cjs/components/material-quiz-edit/options/OptionEditor.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -10,78 +11,101 @@ var material = require('@mui/material');
 var classNames = require('classnames');
 var styled = require('styled-components');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 //
 //
 //
-const SHEET_Z_INDEX = 982; // prevent override blocks components.
-const PREFIX = 'em-option-editor';
+var SHEET_Z_INDEX = 982; // prevent override blocks components.
+var PREFIX = 'em-option-editor';
 //
 //
 //
-const StyledSortedListItem = styled(blocks.SortableListItem).withConfig({
+var StyledSortedListItem = styled__default.default(blocks.SortableListItem).withConfig({
   componentId: "sc-50ghuz-0"
 })(["display:flex;padding:0;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;margin:0;"], SHEET_Z_INDEX + 1);
-const StyledTextarea = styled(blocks.Textarea).withConfig({
+var StyledTextarea = styled__default.default(blocks.Textarea).withConfig({
   componentId: "sc-50ghuz-1"
-})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], designTokens.base.color.primary6, props => props.invalid ? styled.css(["border:1px solid ", " !important;"], designTokens.base.color.red8) : null, props => props.disabled ? styled.css(["background-color:", ";cursor:not-allowed;"], designTokens.base.color.gray2) : null, props => props.readOnly ? styled.css(["background-color:", ";"], designTokens.base.color.gray1) : null);
-const StyledTextareaWrap = styled.div.withConfig({
+})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], designTokens.base.color.primary6, function (props) {
+  return props.invalid ? styled.css(["border:1px solid ", " !important;"], designTokens.base.color.red8) : null;
+}, function (props) {
+  return props.disabled ? styled.css(["background-color:", ";cursor:not-allowed;"], designTokens.base.color.gray2) : null;
+}, function (props) {
+  return props.readOnly ? styled.css(["background-color:", ";"], designTokens.base.color.gray1) : null;
+});
+var StyledTextareaWrap = styled__default.default.div.withConfig({
   componentId: "sc-50ghuz-2"
 })(["display:flex;position:relative;.em-option-editor-adornment{position:absolute;top:50%;transform:translateY(-50%);z-index:1;&.prefix{left:1rem;}&.suffix{right:1rem;}}"]);
 //
 //
 //
-const OptionEditor = React.forwardRef((_a, ref) => {
-  var {
-      suffix,
-      prefix,
-      invalid,
-      invalidText,
-      readOnly,
-      index
-    } = _a,
+var OptionEditor = React__default.default.forwardRef(function (_a, ref) {
+  var suffix = _a.suffix,
+    prefix = _a.prefix,
+    invalid = _a.invalid,
+    invalidText = _a.invalidText,
+    readOnly = _a.readOnly,
+    index = _a.index,
     props = tslib.__rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly", "index"]);
   /**
    * Extract textarea element from legacy TextArea ref prop.
    */
-  const handleTextAreaApi = React.useCallback(textAreaApi => {
+  var handleTextAreaApi = React__default.default.useCallback(function (textAreaApi) {
     var _a;
     if (!ref) {
       return;
     }
-    const textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
+    var textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
     typeof ref === 'function' ? ref(textAreaInput) : ref.current = textAreaInput;
   }, [ref]);
-  return React.createElement(StyledSortedListItem, {
+  return jsxRuntime.jsx(StyledSortedListItem, {
     index: index,
-    disabled: readOnly
-  }, React.createElement(material.Box, {
-    className: classNames(PREFIX, props.className),
-    flex: 1
-  }, React.createElement(StyledTextareaWrap, {
-    className: `${PREFIX}-textarea-wrapper`
-  }, prefix ? React.createElement("div", {
-    className: `${PREFIX}-adornment prefix`
-  }, prefix) : null, React.createElement(StyledTextarea, Object.assign({}, props, {
-    ref: handleTextAreaApi,
-    invalid: invalid,
-    readOnly: readOnly,
-    resetFocus: props.onBlur,
     disabled: readOnly,
-    "aria-disabled": props.disabled
-  })), suffix ? React.createElement("div", {
-    className: `${PREFIX}-adornment suffix`,
-    onDragStart: e => e.stopPropagation(),
-    onDragCapture: e => e.stopPropagation(),
-    onTouchStart: e => e.stopPropagation()
-  }, suffix) : null), invalid ? React.createElement(material.Box, {
-    padding: "0 0.75rem",
-    marginTop: "0.25rem",
-    className: `${PREFIX}-helperText-wrap`
-  }, React.createElement(blocks.Text, {
-    role: "red",
-    size: "tiny",
-    className: `${PREFIX}-helperText`
-  }, invalidText !== null && invalidText !== void 0 ? invalidText : '')) : null));
+    children: jsxRuntime.jsxs(material.Box, {
+      className: classNames__default.default(PREFIX, props.className),
+      flex: 1,
+      children: [jsxRuntime.jsxs(StyledTextareaWrap, {
+        className: "".concat(PREFIX, "-textarea-wrapper"),
+        children: [prefix ? jsxRuntime.jsx("div", {
+          className: "".concat(PREFIX, "-adornment prefix"),
+          children: prefix
+        }) : null, jsxRuntime.jsx(StyledTextarea, Object.assign({}, props, {
+          ref: handleTextAreaApi,
+          invalid: invalid,
+          readOnly: readOnly,
+          resetFocus: props.onBlur,
+          disabled: readOnly,
+          "aria-disabled": props.disabled
+        })), suffix ? jsxRuntime.jsx("div", {
+          className: "".concat(PREFIX, "-adornment suffix"),
+          onDragStart: function onDragStart(e) {
+            return e.stopPropagation();
+          },
+          onDragCapture: function onDragCapture(e) {
+            return e.stopPropagation();
+          },
+          onTouchStart: function onTouchStart(e) {
+            return e.stopPropagation();
+          },
+          children: suffix
+        }) : null]
+      }), invalid ? jsxRuntime.jsx(material.Box, {
+        padding: "0 0.75rem",
+        marginTop: "0.25rem",
+        className: "".concat(PREFIX, "-helperText-wrap"),
+        children: jsxRuntime.jsx(blocks.Text, {
+          role: "red",
+          size: "tiny",
+          className: "".concat(PREFIX, "-helperText"),
+          children: invalidText !== null && invalidText !== void 0 ? invalidText : ''
+        })
+      }) : null]
+    })
+  });
 });
 
 exports.default = OptionEditor;

package/cjs/components/material-quiz-edit/options/OptionSelectMultiple.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var reactSortableHoc = require('react-sortable-hoc');
 var reactTransitionGroup = require('react-transition-group');
@@ -15,56 +16,61 @@ var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
 var OptionEditor = require('./OptionEditor.js');
 
-const MIN_OPTION_INFO_COUNT = 2;
-const MAX_OPTION_INFO_COUNT = 20;
-const StyledWrap = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var MIN_OPTION_INFO_COUNT = 2;
+var MAX_OPTION_INFO_COUNT = 20;
+var StyledWrap = styled__default.default.div.withConfig({
   componentId: "sc-1nbx9b8-0"
 })(["& > ul{display:flex;flex-direction:column;gap:0.75rem;}"]);
-const StyledInputGroup = styled(blocks.SortableListGroup).withConfig({
+var StyledInputGroup = styled__default.default(blocks.SortableListGroup).withConfig({
   componentId: "sc-1nbx9b8-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-const OptionSelectMultiple = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    disabled
-  } = context.useMaterialQuizEditContext();
-  const {
-    control,
-    getValues,
-    setValue
-  } = reactHookForm.useFormContext();
-  const {
-    fields: optionInfoFields,
-    append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem,
-    move: moveOptionInfoFieldItem
-  } = reactHookForm.useFieldArray({
-    control,
-    name: 'optionsDefault',
-    keyName: 'id',
-    shouldUnregister: true
-  });
-  const watchedAnswerInfo = reactHookForm.useWatch({
-    control,
+var OptionSelectMultiple = function OptionSelectMultiple() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialQuizEditC = context.useMaterialQuizEditContext(),
+    disabled = _useMaterialQuizEditC.disabled;
+  var _useFormContext = reactHookForm.useFormContext(),
+    control = _useFormContext.control,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue;
+  var _useFieldArray = reactHookForm.useFieldArray({
+      control: control,
+      name: 'optionsDefault',
+      keyName: 'id',
+      shouldUnregister: true
+    }),
+    optionInfoFields = _useFieldArray.fields,
+    appendOptionInfoFieldItem = _useFieldArray.append,
+    removeOptionInfoFieldItem = _useFieldArray.remove,
+    moveOptionInfoFieldItem = _useFieldArray.move;
+  var watchedAnswerInfo = reactHookForm.useWatch({
+    control: control,
     name: 'answerInfoDefault'
   });
-  const watchedOptions = reactHookForm.useWatch({
-    control,
+  var watchedOptions = reactHookForm.useWatch({
+    control: control,
     name: 'optionsDefault'
   });
   /**
    * Update answer info.
    */
-  const updateAnswerInfo = option => {
-    const prevAnswerInfo = getValues('answerInfoDefault');
+  var updateAnswerInfo = function updateAnswerInfo(option) {
+    var prevAnswerInfo = getValues('answerInfoDefault');
     if (!Array.isArray(prevAnswerInfo)) {
       return;
     }
-    setValue('answerInfoDefault', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ?
-    // if answer removed, re-calculate answer index
-    answerIndex < option.index ? answerIndex : answerIndex - 1 :
-    // or maintain current answer index
-    answerIndex) : [...prevAnswerInfo, option.index], {
+    setValue('answerInfoDefault', !option.checked ? prevAnswerInfo.filter(function (answerIndex) {
+      return answerIndex !== option.index;
+    }).map(function (answerIndex) {
+      return option.removed ?
+      // if answer removed, re-calculate answer index
+      answerIndex < option.index ? answerIndex : answerIndex - 1 :
+      // or maintain current answer index
+      answerIndex;
+    }) : [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevAnswerInfo), [option.index]), {
       shouldDirty: true,
       shouldValidate: true
     });
@@ -72,7 +78,7 @@ const OptionSelectMultiple = () => {
   /**
    * Append option info.
    */
-  const appendOptionInfo = () => {
+  var appendOptionInfo = function appendOptionInfo() {
     appendOptionInfoFieldItem({
       id: randomId.createRandomId(),
       title: '',
@@ -82,9 +88,9 @@ const OptionSelectMultiple = () => {
   /**
    * Remove item from option info at index.
    */
-  const removeOptionInfo = index => {
+  var removeOptionInfo = function removeOptionInfo(index) {
     updateAnswerInfo({
-      index,
+      index: index,
       checked: false,
       removed: true
     });
@@ -93,16 +99,21 @@ const OptionSelectMultiple = () => {
   /**
    * Sort options based on the old and new index.
    */
-  const handleSortEnd = ({
-    oldIndex,
-    newIndex
-  }) => {
-    const prevAnswerInfo = lodashEs.cloneDeep(watchedAnswerInfo);
-    const prevOptions = lodashEs.cloneDeep(watchedOptions).map((option, index) => Object.assign(Object.assign({}, option), {
-      isAnswer: prevAnswerInfo.includes(index)
-    }));
-    const updatedOptions = reactSortableHoc.arrayMove(prevOptions, oldIndex, newIndex);
-    const updatedAnswerInfo = updatedOptions.map((option, index) => option.isAnswer ? index : null).filter(option => option !== null);
+  var handleSortEnd = function handleSortEnd(_ref) {
+    var oldIndex = _ref.oldIndex,
+      newIndex = _ref.newIndex;
+    var prevAnswerInfo = lodashEs.cloneDeep(watchedAnswerInfo);
+    var prevOptions = lodashEs.cloneDeep(watchedOptions).map(function (option, index) {
+      return Object.assign(Object.assign({}, option), {
+        isAnswer: prevAnswerInfo.includes(index)
+      });
+    });
+    var updatedOptions = reactSortableHoc.arrayMove(prevOptions, oldIndex, newIndex);
+    var updatedAnswerInfo = updatedOptions.map(function (option, index) {
+      return option.isAnswer ? index : null;
+    }).filter(function (option) {
+      return option !== null;
+    });
     setValue('answerInfoDefault', updatedAnswerInfo);
     moveOptionInfoFieldItem(oldIndex, newIndex);
   };
@@ -112,107 +123,122 @@ const OptionSelectMultiple = () => {
   if (!Array.isArray(watchedAnswerInfo)) {
     return null;
   }
-  return React.createElement(StyledWrap, null, React.createElement(reactHookForm.Controller, {
-    name: "answerInfoDefault",
-    control: control,
-    rules: {
-      validate: v => {
-        if (Array.isArray(v) && v.length < 1) {
-          return intl$1.formatMessage({
-            id: 'content.option.errorMessage.required'
-          });
+  return jsxRuntime.jsxs(StyledWrap, {
+    children: [jsxRuntime.jsx(reactHookForm.Controller, {
+      name: "answerInfoDefault",
+      control: control,
+      rules: {
+        validate: function validate(v) {
+          if (Array.isArray(v) && v.length < 1) {
+            return intl$1.formatMessage({
+              id: 'content.option.errorMessage.required'
+            });
+          }
+          return true;
         }
-        return true;
-      }
-    },
-    render: ({
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(reactTransitionGroup.Transition, {
-        in: fieldState.invalid,
-        timeout: 0,
-        mountOnEnter: true,
-        unmountOnExit: true
-      }, React.createElement(React.Fragment, null, React.createElement(blocks.StatusText, {
-        children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-        role: "danger"
-      }), React.createElement(blocks.Vspace, {
-        height: 0.5
-      })));
-    }
-  }), React.createElement(StyledInputGroup, {
-    pressDelay: 100,
-    useDragHandle: true,
-    onSortEnd: handleSortEnd
-  }, optionInfoFields.map(({
-    id
-  }, index) => React.createElement(reactHookForm.Controller, {
-    key: id,
-    control: control,
-    name: `optionsDefault.${index}.content`,
-    rules: {
-      required: {
-        value: true,
-        message: intl$1.formatMessage({
-          id: 'option.common.select.errorMessage.required'
-        })
-      }
-    },
-    render: ({
-      field,
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(OptionEditor.default, Object.assign({
-        index: index,
-        invalid: fieldState.invalid,
-        invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-        readOnly: disabled,
-        prefix: React.createElement(blocks.Checkbox, {
-          checked: watchedAnswerInfo.includes(index),
-          disabled: disabled,
-          onChange: checked => updateAnswerInfo({
-            index,
-            checked
+      },
+      render: function render(_ref2) {
+        var fieldState = _ref2.fieldState;
+        var _a;
+        return jsxRuntime.jsx(reactTransitionGroup.Transition, {
+          in: fieldState.invalid,
+          timeout: 0,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(blocks.StatusText, {
+              children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+              role: "danger"
+            }), jsxRuntime.jsx(blocks.Vspace, {
+              height: 0.5
+            })]
           })
-        }),
-        suffix: React.createElement(blocks.Tooltip, {
-          title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl$1.formatMessage({
-            id: 'option.common.select.tooltip.minOptionInfoItem'
-          }) : undefined,
-          placement: "top-start"
-        }, React.createElement("span", null, React.createElement(blocks.IconButton, {
-          icon: icons.eilMathsignMultiplyBasic,
-          size: "tiny",
-          role: "grey9",
-          border: false,
+        });
+      }
+    }), jsxRuntime.jsx(StyledInputGroup, {
+      pressDelay: 100,
+      useDragHandle: true,
+      onSortEnd: handleSortEnd,
+      children: optionInfoFields.map(function (_ref3, index) {
+        var id = _ref3.id;
+        return jsxRuntime.jsx(reactHookForm.Controller, {
+          control: control,
+          name: "optionsDefault.".concat(index, ".content"),
+          rules: {
+            required: {
+              value: true,
+              message: intl$1.formatMessage({
+                id: 'option.common.select.errorMessage.required'
+              })
+            }
+          },
+          render: function render(_ref4) {
+            var field = _ref4.field,
+              fieldState = _ref4.fieldState;
+            var _a;
+            return jsxRuntime.jsx(OptionEditor.default, Object.assign({
+              index: index,
+              invalid: fieldState.invalid,
+              invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+              readOnly: disabled,
+              prefix: jsxRuntime.jsx(blocks.Checkbox, {
+                checked: watchedAnswerInfo.includes(index),
+                disabled: disabled,
+                onChange: function onChange(checked) {
+                  return updateAnswerInfo({
+                    index: index,
+                    checked: checked
+                  });
+                }
+              }),
+              suffix: jsxRuntime.jsx(blocks.Tooltip, {
+                title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl$1.formatMessage({
+                  id: 'option.common.select.tooltip.minOptionInfoItem'
+                }) : undefined,
+                placement: "top-start",
+                children: jsxRuntime.jsx("span", {
+                  children: jsxRuntime.jsx(blocks.IconButton, {
+                    icon: icons.eilMathsignMultiplyBasic,
+                    size: "tiny",
+                    role: "grey9",
+                    border: false,
+                    transparent: true,
+                    disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
+                    onClick: function onClick() {
+                      return removeOptionInfo(index);
+                    }
+                  })
+                })
+              })
+            }, field));
+          }
+        }, id);
+      })
+    }), jsxRuntime.jsx(blocks.Vspace, {
+      height: 0.5
+    }), jsxRuntime.jsx(blocks.Tooltip, {
+      title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl$1.formatMessage({
+        id: 'option.common.select.tooltip.maxOptionInfoItem'
+      }) : undefined,
+      placement: "bottom",
+      children: jsxRuntime.jsx("span", {
+        children: jsxRuntime.jsx(blocks.Button, {
+          block: true,
+          size: "micro",
+          borderDashed: true,
           transparent: true,
-          disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
-          onClick: () => removeOptionInfo(index)
-        })))
-      }, field));
-    }
-  }))), React.createElement(blocks.Vspace, {
-    height: 0.5
-  }), React.createElement(blocks.Tooltip, {
-    title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl$1.formatMessage({
-      id: 'option.common.select.tooltip.maxOptionInfoItem'
-    }) : undefined,
-    placement: "bottom"
-  }, React.createElement("span", null, React.createElement(blocks.Button, {
-    block: true,
-    size: "micro",
-    borderDashed: true,
-    transparent: true,
-    icon: React.createElement(blocks.Icon, {
-      icon: icons.eilMathsignAddCircle
-    }),
-    disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
-    onClick: appendOptionInfo
-  }, intl$1.formatMessage({
-    id: 'option.common.select.addButton'
-  })))));
+          icon: jsxRuntime.jsx(blocks.Icon, {
+            icon: icons.eilMathsignAddCircle
+          }),
+          disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
+          onClick: appendOptionInfo,
+          children: intl$1.formatMessage({
+            id: 'option.common.select.addButton'
+          })
+        })
+      })
+    })]
+  });
 };
 
 exports.default = OptionSelectMultiple;