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

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactSortableHoc = require('react-sortable-hoc');
@@ -15,50 +16,52 @@ 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 React__default = /*#__PURE__*/_interopDefaultCompat(React);
+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-vizer2-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-vizer2-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-const StyledInputPrefixRadioOption = styled(blocks.RadioOption).withConfig({
+var StyledInputPrefixRadioOption = styled__default.default(blocks.RadioOption).withConfig({
   componentId: "sc-vizer2-2"
 })([".eb-radio-option__label{display:none;}"]);
-const OptionSelectOne = () => {
-  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({
-    name: 'optionsDefault',
-    keyName: 'id',
-    shouldUnregister: true
-  });
-  const watchedAnswerInfo = reactHookForm.useWatch({
-    control,
+var OptionSelectOne = function OptionSelectOne() {
+  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({
+      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 = index => {
-    const prevAnswerInfo = getValues('answerInfoDefault');
+  var updateAnswerInfo = function updateAnswerInfo(index) {
+    var prevAnswerInfo = getValues('answerInfoDefault');
     if (!Array.isArray(prevAnswerInfo)) {
       return;
     }
@@ -70,7 +73,7 @@ const OptionSelectOne = () => {
   /**
    * Append option info.
    */
-  const appendOptionInfo = () => {
+  var appendOptionInfo = function appendOptionInfo() {
     appendOptionInfoFieldItem({
       id: randomId.createRandomId(),
       title: '',
@@ -80,10 +83,10 @@ const OptionSelectOne = () => {
   /**
    * Remove item from option info at index.
    */
-  const removeOptionInfo = index => {
+  var removeOptionInfo = function removeOptionInfo(index) {
     // set answer info to 0 index,
     // if this option is selected as answer.
-    const curAnswerInfo = getValues('answerInfoDefault');
+    var curAnswerInfo = getValues('answerInfoDefault');
     if (Array.isArray(curAnswerInfo) && curAnswerInfo.includes(index)) {
       updateAnswerInfo(0);
     }
@@ -92,16 +95,19 @@ const OptionSelectOne = () => {
   /**
    * 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 updatedAnswer = updatedOptions.findIndex(option => option.isAnswer);
+  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 updatedAnswer = updatedOptions.findIndex(function (option) {
+      return option.isAnswer;
+    });
     setValue('answerInfoDefault', [updatedAnswer]);
     moveOptionInfoFieldItem(oldIndex, newIndex);
   };
@@ -111,109 +117,123 @@ const OptionSelectOne = () => {
   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: 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
+            })]
+          })
+        });
       }
-    },
-    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, {
-    useDragHandle: true,
-    pressDelay: 100,
-    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,
-        placeholder: intl$1.formatMessage({
-          id: 'option.common.select.placeholder'
-        }),
-        readOnly: disabled,
-        prefix: React.createElement(blocks.Radio, {
-          value: watchedAnswerInfo[0],
-          disabled: disabled,
-          onChange: updateAnswerInfo
-        }, React.createElement(StyledInputPrefixRadioOption, {
-          value: index
-        }), React.createElement(React.Fragment, null)),
-        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, {
+      useDragHandle: true,
+      pressDelay: 100,
+      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,
+              placeholder: intl$1.formatMessage({
+                id: 'option.common.select.placeholder'
+              }),
+              readOnly: disabled,
+              prefix: jsxRuntime.jsxs(blocks.Radio, {
+                value: watchedAnswerInfo[0],
+                disabled: disabled,
+                onChange: updateAnswerInfo,
+                children: [jsxRuntime.jsx(StyledInputPrefixRadioOption, {
+                  value: index
+                }), jsxRuntime.jsx(React__default.default.Fragment, {})]
+              }),
+              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 = OptionSelectOne;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -11,104 +11,112 @@ var intl = require('@elice/intl');
 var react = require('@emotion/react');
 var context = require('../context.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
 //
 //
 //
-const MIN_TEXT_LENGTH = 1;
-const MAX_TEXT_LENGTH = 128;
+var MIN_TEXT_LENGTH = 1;
+var MAX_TEXT_LENGTH = 128;
 //
 //
 //
-const StyledInput = /*#__PURE__*/_styled(blocks.Input, {
+var StyledInput = /*#__PURE__*/_styled__default.default(blocks.Input, {
   target: "edimfaf0"
-})("&>:first-child{", ({
-  disabled
-}) => disabled && /*#__PURE__*/react.css("background-color:", designTokens.base.color.gray2, ";"), ";}");
+})("&>:first-child{", function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && /*#__PURE__*/react.css("background-color:", designTokens.base.color.gray2, ";");
+}, ";}");
 //
 //
 //
-const OptionText = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    disabled
-  } = context.useMaterialQuizEditContext();
-  const {
-    control
-  } = reactHookForm.useFormContext();
-  const watchedIsAutoGrade = reactHookForm.useWatch({
-    control,
+var OptionText = function OptionText() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialQuizEditC = context.useMaterialQuizEditContext(),
+    disabled = _useMaterialQuizEditC.disabled;
+  var _useFormContext = reactHookForm.useFormContext(),
+    control = _useFormContext.control;
+  var watchedIsAutoGrade = reactHookForm.useWatch({
+    control: control,
     name: 'isAutoGrade'
   });
   //
   //
   //
-  return React.createElement(React.Fragment, null, React.createElement(reactHookForm.Controller, {
-    control: control,
-    name: "answerInfoDefault",
-    rules: {
-      required: {
-        value: watchedIsAutoGrade,
-        message: intl$1.formatMessage({
-          id: 'option.text.answerInfo.errorMessage.required'
-        })
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(reactHookForm.Controller, {
+      control: control,
+      name: "answerInfoDefault",
+      rules: {
+        required: {
+          value: watchedIsAutoGrade,
+          message: intl$1.formatMessage({
+            id: 'option.text.answerInfo.errorMessage.required'
+          })
+        },
+        minLength: {
+          value: MIN_TEXT_LENGTH,
+          message: intl$1.formatMessage({
+            id: 'common.errorMessage.range'
+          }, {
+            min: MIN_TEXT_LENGTH,
+            max: MAX_TEXT_LENGTH
+          })
+        },
+        maxLength: {
+          value: MAX_TEXT_LENGTH,
+          message: intl$1.formatMessage({
+            id: 'common.errorMessage.range'
+          }, {
+            min: MIN_TEXT_LENGTH,
+            max: MAX_TEXT_LENGTH
+          })
+        }
       },
-      minLength: {
-        value: MIN_TEXT_LENGTH,
-        message: intl$1.formatMessage({
-          id: 'common.errorMessage.range'
-        }, {
-          min: MIN_TEXT_LENGTH,
-          max: MAX_TEXT_LENGTH
-        })
-      },
-      maxLength: {
-        value: MAX_TEXT_LENGTH,
-        message: intl$1.formatMessage({
-          id: 'common.errorMessage.range'
-        }, {
-          min: MIN_TEXT_LENGTH,
-          max: MAX_TEXT_LENGTH
-        })
+      render: function render(_ref2) {
+        var field = _ref2.field,
+          fieldState = _ref2.fieldState;
+        var _a;
+        return jsxRuntime.jsx(StyledInput, Object.assign({
+          size: "small",
+          width: "full",
+          minLength: MIN_TEXT_LENGTH,
+          maxLength: MAX_TEXT_LENGTH,
+          readOnly: disabled,
+          disabled: !watchedIsAutoGrade,
+          invalid: fieldState.invalid,
+          invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+          helpText: intl$1.formatMessage({
+            id: 'option.text.answerInfo.hintText'
+          })
+        }, field, {
+          value: field.value
+        }));
       }
-    },
-    render: ({
-      field,
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(StyledInput, Object.assign({
-        size: "small",
-        width: "full",
-        minLength: MIN_TEXT_LENGTH,
-        maxLength: MAX_TEXT_LENGTH,
-        readOnly: disabled,
-        disabled: !watchedIsAutoGrade,
-        invalid: fieldState.invalid,
-        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-        helpText: intl$1.formatMessage({
-          id: 'option.text.answerInfo.hintText'
-        })
-      }, field, {
-        value: field.value
-      }));
-    }
-  }), React.createElement(blocks.Vspace, {
-    height: 0.5
-  }), React.createElement(reactHookForm.Controller, {
-    control: control,
-    name: "isAutoGrade",
-    render: ({
-      field
-    }) => React.createElement(blocks.Checkbox, Object.assign({
-      size: "small"
-    }, field, {
-      value: !field.value,
-      checked: !field.value,
-      onChange: v => field.onChange(!v)
-    }), intl$1.formatMessage({
-      id: 'option.text.isAutoGrade.checkbox.label'
-    }))
-  }));
+    }), jsxRuntime.jsx(blocks.Vspace, {
+      height: 0.5
+    }), jsxRuntime.jsx(reactHookForm.Controller, {
+      control: control,
+      name: "isAutoGrade",
+      render: function render(_ref3) {
+        var field = _ref3.field;
+        return jsxRuntime.jsx(blocks.Checkbox, Object.assign({
+          size: "small"
+        }, field, {
+          value: !field.value,
+          checked: !field.value,
+          onChange: function onChange(v) {
+            return field.onChange(!v);
+          },
+          children: intl$1.formatMessage({
+            id: 'option.text.isAutoGrade.checkbox.label'
+          })
+        }));
+      }
+    })]
+  });
 };
 
 exports.default = OptionText;

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

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var OptionGroupAnswerInfo = require('./OptionGroupAnswerInfo.js');
 var OptionGroupGroupInfo = require('./OptionGroupGroupInfo.js');
 
-const OptionGroup = () => {
+var OptionGroup = function OptionGroup() {
   //
   //
   //
-  return React.createElement(blocks.Flex, {
+  return jsxRuntime.jsxs(blocks.Flex, {
     column: true,
-    margintop: "1.5rem"
-  }, React.createElement(OptionGroupGroupInfo.default, null), React.createElement(blocks.Hr, {
-    marginStart: "1.5rem",
-    marginEnd: "1.5rem"
-  }), React.createElement(OptionGroupAnswerInfo.default, null));
+    margintop: "1.5rem",
+    children: [jsxRuntime.jsx(OptionGroupGroupInfo.default, {}), jsxRuntime.jsx(blocks.Hr, {
+      marginStart: "1.5rem",
+      marginEnd: "1.5rem"
+    }), jsxRuntime.jsx(OptionGroupAnswerInfo.default, {})]
+  });
 };
 
 exports.default = OptionGroup;