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

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

@@ -1,3 +1,4 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { useFormContext, useFieldArray, useWatch, Controller } from 'react-hook-form';
 import { arrayMove } from 'react-sortable-hoc';
@@ -11,50 +12,47 @@ import { useMaterialQuizEditContext } from '../context.js';
 import { createRandomId } from '../utils/randomId.js';
 import OptionEditor from './OptionEditor.js';
 
-const MIN_OPTION_INFO_COUNT = 2;
-const MAX_OPTION_INFO_COUNT = 20;
-const StyledWrap = styled.div.withConfig({
+var MIN_OPTION_INFO_COUNT = 2;
+var MAX_OPTION_INFO_COUNT = 20;
+var StyledWrap = styled.div.withConfig({
   componentId: "sc-vizer2-0"
 })(["& > ul{display:flex;flex-direction:column;gap:0.75rem;}"]);
-const StyledInputGroup = styled(SortableListGroup).withConfig({
+var StyledInputGroup = styled(SortableListGroup).withConfig({
   componentId: "sc-vizer2-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-const StyledInputPrefixRadioOption = styled(RadioOption).withConfig({
+var StyledInputPrefixRadioOption = styled(RadioOption).withConfig({
   componentId: "sc-vizer2-2"
 })([".eb-radio-option__label{display:none;}"]);
-const OptionSelectOne = () => {
-  const intl = useRawEliceIntl();
-  const {
-    disabled
-  } = useMaterialQuizEditContext();
-  const {
-    control,
-    getValues,
-    setValue
-  } = useFormContext();
-  const {
-    fields: optionInfoFields,
-    append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem,
-    move: moveOptionInfoFieldItem
-  } = useFieldArray({
-    name: 'optionsDefault',
-    keyName: 'id',
-    shouldUnregister: true
-  });
-  const watchedAnswerInfo = useWatch({
-    control,
+var OptionSelectOne = function OptionSelectOne() {
+  var intl = useRawEliceIntl();
+  var _useMaterialQuizEditC = useMaterialQuizEditContext(),
+    disabled = _useMaterialQuizEditC.disabled;
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue;
+  var _useFieldArray = useFieldArray({
+      name: 'optionsDefault',
+      keyName: 'id',
+      shouldUnregister: true
+    }),
+    optionInfoFields = _useFieldArray.fields,
+    appendOptionInfoFieldItem = _useFieldArray.append,
+    removeOptionInfoFieldItem = _useFieldArray.remove,
+    moveOptionInfoFieldItem = _useFieldArray.move;
+  var watchedAnswerInfo = useWatch({
+    control: control,
     name: 'answerInfoDefault'
   });
-  const watchedOptions = useWatch({
-    control,
+  var watchedOptions = 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;
     }
@@ -66,7 +64,7 @@ const OptionSelectOne = () => {
   /**
    * Append option info.
    */
-  const appendOptionInfo = () => {
+  var appendOptionInfo = function appendOptionInfo() {
     appendOptionInfoFieldItem({
       id: createRandomId(),
       title: '',
@@ -76,10 +74,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);
     }
@@ -88,16 +86,19 @@ const OptionSelectOne = () => {
   /**
    * Sort options based on the old and new index.
    */
-  const handleSortEnd = ({
-    oldIndex,
-    newIndex
-  }) => {
-    const prevAnswerInfo = cloneDeep(watchedAnswerInfo);
-    const prevOptions = cloneDeep(watchedOptions).map((option, index) => Object.assign(Object.assign({}, option), {
-      isAnswer: prevAnswerInfo.includes(index)
-    }));
-    const updatedOptions = 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 = cloneDeep(watchedAnswerInfo);
+    var prevOptions = cloneDeep(watchedOptions).map(function (option, index) {
+      return Object.assign(Object.assign({}, option), {
+        isAnswer: prevAnswerInfo.includes(index)
+      });
+    });
+    var updatedOptions = arrayMove(prevOptions, oldIndex, newIndex);
+    var updatedAnswer = updatedOptions.findIndex(function (option) {
+      return option.isAnswer;
+    });
     setValue('answerInfoDefault', [updatedAnswer]);
     moveOptionInfoFieldItem(oldIndex, newIndex);
   };
@@ -107,109 +108,123 @@ const OptionSelectOne = () => {
   if (!Array.isArray(watchedAnswerInfo)) {
     return null;
   }
-  return React.createElement(StyledWrap, null, React.createElement(Controller, {
-    name: "answerInfoDefault",
-    control: control,
-    rules: {
-      validate: v => {
-        if (Array.isArray(v) && v.length < 1) {
-          return intl.formatMessage({
-            id: 'content.option.errorMessage.required'
-          });
+  return jsxs(StyledWrap, {
+    children: [jsx(Controller, {
+      name: "answerInfoDefault",
+      control: control,
+      rules: {
+        validate: function validate(v) {
+          if (Array.isArray(v) && v.length < 1) {
+            return intl.formatMessage({
+              id: 'content.option.errorMessage.required'
+            });
+          }
+          return true;
         }
-        return true;
+      },
+      render: function render(_ref2) {
+        var fieldState = _ref2.fieldState;
+        var _a;
+        return jsx(Transition, {
+          in: fieldState.invalid,
+          timeout: 0,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: jsxs(Fragment, {
+            children: [jsx(StatusText, {
+              children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+              role: "danger"
+            }), jsx(Vspace, {
+              height: 0.5
+            })]
+          })
+        });
       }
-    },
-    render: ({
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(Transition, {
-        in: fieldState.invalid,
-        timeout: 0,
-        mountOnEnter: true,
-        unmountOnExit: true
-      }, React.createElement(React.Fragment, null, React.createElement(StatusText, {
-        children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-        role: "danger"
-      }), React.createElement(Vspace, {
-        height: 0.5
-      })));
-    }
-  }), React.createElement(StyledInputGroup, {
-    useDragHandle: true,
-    pressDelay: 100,
-    onSortEnd: handleSortEnd
-  }, optionInfoFields.map(({
-    id
-  }, index) => React.createElement(Controller, {
-    key: id,
-    control: control,
-    name: `optionsDefault.${index}.content`,
-    rules: {
-      required: {
-        value: true,
-        message: intl.formatMessage({
-          id: 'option.common.select.errorMessage.required'
-        })
-      }
-    },
-    render: ({
-      field,
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(OptionEditor, 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.formatMessage({
-          id: 'option.common.select.placeholder'
-        }),
-        readOnly: disabled,
-        prefix: React.createElement(Radio, {
-          value: watchedAnswerInfo[0],
-          disabled: disabled,
-          onChange: updateAnswerInfo
-        }, React.createElement(StyledInputPrefixRadioOption, {
-          value: index
-        }), React.createElement(React.Fragment, null)),
-        suffix: React.createElement(Tooltip, {
-          title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
-            id: 'option.common.select.tooltip.minOptionInfoItem'
-          }) : undefined,
-          placement: "top-start"
-        }, React.createElement("span", null, React.createElement(IconButton, {
-          icon: eilMathsignMultiplyBasic,
-          size: "tiny",
-          role: "grey9",
-          border: false,
+    }), jsx(StyledInputGroup, {
+      useDragHandle: true,
+      pressDelay: 100,
+      onSortEnd: handleSortEnd,
+      children: optionInfoFields.map(function (_ref3, index) {
+        var id = _ref3.id;
+        return jsx(Controller, {
+          control: control,
+          name: "optionsDefault.".concat(index, ".content"),
+          rules: {
+            required: {
+              value: true,
+              message: intl.formatMessage({
+                id: 'option.common.select.errorMessage.required'
+              })
+            }
+          },
+          render: function render(_ref4) {
+            var field = _ref4.field,
+              fieldState = _ref4.fieldState;
+            var _a;
+            return jsx(OptionEditor, 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.formatMessage({
+                id: 'option.common.select.placeholder'
+              }),
+              readOnly: disabled,
+              prefix: jsxs(Radio, {
+                value: watchedAnswerInfo[0],
+                disabled: disabled,
+                onChange: updateAnswerInfo,
+                children: [jsx(StyledInputPrefixRadioOption, {
+                  value: index
+                }), jsx(React.Fragment, {})]
+              }),
+              suffix: jsx(Tooltip, {
+                title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
+                  id: 'option.common.select.tooltip.minOptionInfoItem'
+                }) : undefined,
+                placement: "top-start",
+                children: jsx("span", {
+                  children: jsx(IconButton, {
+                    icon: 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);
+      })
+    }), jsx(Vspace, {
+      height: 0.5
+    }), jsx(Tooltip, {
+      title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
+        id: 'option.common.select.tooltip.maxOptionInfoItem'
+      }) : undefined,
+      placement: "bottom",
+      children: jsx("span", {
+        children: jsx(Button, {
+          block: true,
+          size: "micro",
+          borderDashed: true,
           transparent: true,
-          disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
-          onClick: () => removeOptionInfo(index)
-        })))
-      }, field));
-    }
-  }))), React.createElement(Vspace, {
-    height: 0.5
-  }), React.createElement(Tooltip, {
-    title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
-      id: 'option.common.select.tooltip.maxOptionInfoItem'
-    }) : undefined,
-    placement: "bottom"
-  }, React.createElement("span", null, React.createElement(Button, {
-    block: true,
-    size: "micro",
-    borderDashed: true,
-    transparent: true,
-    icon: React.createElement(Icon, {
-      icon: eilMathsignAddCircle
-    }),
-    disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
-    onClick: appendOptionInfo
-  }, intl.formatMessage({
-    id: 'option.common.select.addButton'
-  })))));
+          icon: jsx(Icon, {
+            icon: eilMathsignAddCircle
+          }),
+          disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
+          onClick: appendOptionInfo,
+          children: intl.formatMessage({
+            id: 'option.common.select.addButton'
+          })
+        })
+      })
+    })]
+  });
 };
 
 export { OptionSelectOne as default };

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

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
 import { Vspace, Checkbox, Input } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -10,101 +10,105 @@ import { useMaterialQuizEditContext } from '../context.js';
 //
 //
 //
-const MIN_TEXT_LENGTH = 1;
-const MAX_TEXT_LENGTH = 128;
+var MIN_TEXT_LENGTH = 1;
+var MAX_TEXT_LENGTH = 128;
 //
 //
 //
-const StyledInput = /*#__PURE__*/_styled(Input, {
+var StyledInput = /*#__PURE__*/_styled(Input, {
   target: "edimfaf0"
-})("&>:first-child{", ({
-  disabled
-}) => disabled && /*#__PURE__*/css("background-color:", base.color.gray2, ";"), ";}");
+})("&>:first-child{", function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && /*#__PURE__*/css("background-color:", base.color.gray2, ";");
+}, ";}");
 //
 //
 //
-const OptionText = () => {
-  const intl = useRawEliceIntl();
-  const {
-    disabled
-  } = useMaterialQuizEditContext();
-  const {
-    control
-  } = useFormContext();
-  const watchedIsAutoGrade = useWatch({
-    control,
+var OptionText = function OptionText() {
+  var intl = useRawEliceIntl();
+  var _useMaterialQuizEditC = useMaterialQuizEditContext(),
+    disabled = _useMaterialQuizEditC.disabled;
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control;
+  var watchedIsAutoGrade = useWatch({
+    control: control,
     name: 'isAutoGrade'
   });
   //
   //
   //
-  return React.createElement(React.Fragment, null, React.createElement(Controller, {
-    control: control,
-    name: "answerInfoDefault",
-    rules: {
-      required: {
-        value: watchedIsAutoGrade,
-        message: intl.formatMessage({
-          id: 'option.text.answerInfo.errorMessage.required'
-        })
-      },
-      minLength: {
-        value: MIN_TEXT_LENGTH,
-        message: intl.formatMessage({
-          id: 'common.errorMessage.range'
-        }, {
-          min: MIN_TEXT_LENGTH,
-          max: MAX_TEXT_LENGTH
-        })
+  return jsxs(Fragment, {
+    children: [jsx(Controller, {
+      control: control,
+      name: "answerInfoDefault",
+      rules: {
+        required: {
+          value: watchedIsAutoGrade,
+          message: intl.formatMessage({
+            id: 'option.text.answerInfo.errorMessage.required'
+          })
+        },
+        minLength: {
+          value: MIN_TEXT_LENGTH,
+          message: intl.formatMessage({
+            id: 'common.errorMessage.range'
+          }, {
+            min: MIN_TEXT_LENGTH,
+            max: MAX_TEXT_LENGTH
+          })
+        },
+        maxLength: {
+          value: MAX_TEXT_LENGTH,
+          message: intl.formatMessage({
+            id: 'common.errorMessage.range'
+          }, {
+            min: MIN_TEXT_LENGTH,
+            max: MAX_TEXT_LENGTH
+          })
+        }
       },
-      maxLength: {
-        value: MAX_TEXT_LENGTH,
-        message: intl.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 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.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.formatMessage({
-          id: 'option.text.answerInfo.hintText'
-        })
-      }, field, {
-        value: field.value
-      }));
-    }
-  }), React.createElement(Vspace, {
-    height: 0.5
-  }), React.createElement(Controller, {
-    control: control,
-    name: "isAutoGrade",
-    render: ({
-      field
-    }) => React.createElement(Checkbox, Object.assign({
-      size: "small"
-    }, field, {
-      value: !field.value,
-      checked: !field.value,
-      onChange: v => field.onChange(!v)
-    }), intl.formatMessage({
-      id: 'option.text.isAutoGrade.checkbox.label'
-    }))
-  }));
+    }), jsx(Vspace, {
+      height: 0.5
+    }), jsx(Controller, {
+      control: control,
+      name: "isAutoGrade",
+      render: function render(_ref3) {
+        var field = _ref3.field;
+        return jsx(Checkbox, Object.assign({
+          size: "small"
+        }, field, {
+          value: !field.value,
+          checked: !field.value,
+          onChange: function onChange(v) {
+            return field.onChange(!v);
+          },
+          children: intl.formatMessage({
+            id: 'option.text.isAutoGrade.checkbox.label'
+          })
+        }));
+      }
+    })]
+  });
 };
 
 export { OptionText as default };

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

@@ -1,19 +1,20 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Flex, Hr } from '@elice/blocks';
 import OptionGroupAnswerInfo from './OptionGroupAnswerInfo.js';
 import OptionGroupGroupInfo from './OptionGroupGroupInfo.js';
 
-const OptionGroup = () => {
+var OptionGroup = function OptionGroup() {
   //
   //
   //
-  return React.createElement(Flex, {
+  return jsxs(Flex, {
     column: true,
-    margintop: "1.5rem"
-  }, React.createElement(OptionGroupGroupInfo, null), React.createElement(Hr, {
-    marginStart: "1.5rem",
-    marginEnd: "1.5rem"
-  }), React.createElement(OptionGroupAnswerInfo, null));
+    margintop: "1.5rem",
+    children: [jsx(OptionGroupGroupInfo, {}), jsx(Hr, {
+      marginStart: "1.5rem",
+      marginEnd: "1.5rem"
+    }), jsx(OptionGroupAnswerInfo, {})]
+  });
 };
 
 export { OptionGroup as default };