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

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

@@ -2,7 +2,6 @@
 
 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');
@@ -16,52 +15,50 @@ var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
 var OptionEditor = require('./OptionEditor.js');
 
-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({
+const MIN_OPTION_INFO_COUNT = 2;
+const MAX_OPTION_INFO_COUNT = 20;
+const StyledWrap = styled.div.withConfig({
   componentId: "sc-vizer2-0"
 })(["& > ul{display:flex;flex-direction:column;gap:0.75rem;}"]);
-var StyledInputGroup = styled__default.default(blocks.SortableListGroup).withConfig({
+const StyledInputGroup = styled(blocks.SortableListGroup).withConfig({
   componentId: "sc-vizer2-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-var StyledInputPrefixRadioOption = styled__default.default(blocks.RadioOption).withConfig({
+const StyledInputPrefixRadioOption = styled(blocks.RadioOption).withConfig({
   componentId: "sc-vizer2-2"
 })([".eb-radio-option__label{display:none;}"]);
-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,
+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,
     name: 'answerInfoDefault'
   });
-  var watchedOptions = reactHookForm.useWatch({
-    control: control,
+  const watchedOptions = reactHookForm.useWatch({
+    control,
     name: 'optionsDefault'
   });
   /**
    * Update answer info.
    */
-  var updateAnswerInfo = function updateAnswerInfo(index) {
-    var prevAnswerInfo = getValues('answerInfoDefault');
+  const updateAnswerInfo = index => {
+    const prevAnswerInfo = getValues('answerInfoDefault');
     if (!Array.isArray(prevAnswerInfo)) {
       return;
     }
@@ -73,7 +70,7 @@ var OptionSelectOne = function OptionSelectOne() {
   /**
    * Append option info.
    */
-  var appendOptionInfo = function appendOptionInfo() {
+  const appendOptionInfo = () => {
     appendOptionInfoFieldItem({
       id: randomId.createRandomId(),
       title: '',
@@ -83,10 +80,10 @@ var OptionSelectOne = function OptionSelectOne() {
   /**
    * Remove item from option info at index.
    */
-  var removeOptionInfo = function removeOptionInfo(index) {
+  const removeOptionInfo = index => {
     // set answer info to 0 index,
     // if this option is selected as answer.
-    var curAnswerInfo = getValues('answerInfoDefault');
+    const curAnswerInfo = getValues('answerInfoDefault');
     if (Array.isArray(curAnswerInfo) && curAnswerInfo.includes(index)) {
       updateAnswerInfo(0);
     }
@@ -95,19 +92,16 @@ var OptionSelectOne = function OptionSelectOne() {
   /**
    * Sort options based on the old and new index.
    */
-  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;
-    });
+  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);
     setValue('answerInfoDefault', [updatedAnswer]);
     moveOptionInfoFieldItem(oldIndex, newIndex);
   };
@@ -117,123 +111,109 @@ var OptionSelectOne = function OptionSelectOne() {
   if (!Array.isArray(watchedAnswerInfo)) {
     return null;
   }
-  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 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'
+          });
         }
-      },
-      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
-            })]
-          })
-        });
+        return true;
       }
-    }), 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,
-          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'
-          })
+    },
+    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,
+          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'
+  })))));
 };
 
 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 jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactHookForm = require('react-hook-form');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -11,112 +11,104 @@ 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);
-
 //
 //
 //
-var MIN_TEXT_LENGTH = 1;
-var MAX_TEXT_LENGTH = 128;
+const MIN_TEXT_LENGTH = 1;
+const MAX_TEXT_LENGTH = 128;
 //
 //
 //
-var StyledInput = /*#__PURE__*/_styled__default.default(blocks.Input, {
+const StyledInput = /*#__PURE__*/_styled(blocks.Input, {
   target: "edimfaf0"
-})("&>:first-child{", function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled && /*#__PURE__*/react.css("background-color:", designTokens.base.color.gray2, ";");
-}, ";}");
+})("&>:first-child{", ({
+  disabled
+}) => disabled && /*#__PURE__*/react.css("background-color:", designTokens.base.color.gray2, ";"), ";}");
 //
 //
 //
-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,
+const OptionText = () => {
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    disabled
+  } = context.useMaterialQuizEditContext();
+  const {
+    control
+  } = reactHookForm.useFormContext();
+  const watchedIsAutoGrade = reactHookForm.useWatch({
+    control,
     name: 'isAutoGrade'
   });
   //
   //
   //
-  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
-          })
-        }
+  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'
+        })
       },
-      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
-        }));
-      }
-    }), 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'
-          })
-        }));
+      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: ({
+      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'
+    }))
+  }));
 };
 
 exports.default = OptionText;

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

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