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

package/es/components/material-quiz-edit/MaterialQuizEditContent.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { Transition } from 'react-transition-group';
@@ -16,26 +18,33 @@ import { checkTwoDimensionArray } from './utils/checkTwoDimensionArray.js';
 import { createRandomId } from './utils/randomId.js';
 import { useMaterialQuizEditContext } from './context.js';
 
-const MIN_TEXT_LENGTH = 1;
-const MAX_TEXT_LENGTH = 128;
-const MaterialQuizEditContent = () => {
-  const intl = useRawEliceIntl();
-  const {
-    disabled,
-    onFileUploadRequest
-  } = useMaterialQuizEditContext();
-  const {
-    control,
-    watch,
-    setValue
-  } = useFormContext();
-  const [watchedOptionType, watchedOptionInfo, watchedAnswerInfo, watchedAnswerHint, watchedExplanationInfo, watchedIsAutoGrade, watchedGroups, optionsSetEnabled] = watch(['optionType', 'optionsDefault', 'answerInfoDefault', 'answerHint', 'explanationInfo', 'isAutoGrade', 'groups', 'optionsSetEnabled']);
+var MIN_TEXT_LENGTH = 1;
+var MAX_TEXT_LENGTH = 128;
+var MaterialQuizEditContent = function MaterialQuizEditContent() {
+  var intl = useRawEliceIntl();
+  var _useMaterialQuizEditC = useMaterialQuizEditContext(),
+    disabled = _useMaterialQuizEditC.disabled,
+    onFileUploadRequest = _useMaterialQuizEditC.onFileUploadRequest;
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control,
+    watch = _useFormContext.watch,
+    setValue = _useFormContext.setValue;
+  var _watch = watch(['optionType', 'optionsDefault', 'answerInfoDefault', 'answerHint', 'explanationInfo', 'isAutoGrade', 'groups', 'optionsSetEnabled']),
+    _watch2 = _slicedToArray(_watch, 8),
+    watchedOptionType = _watch2[0],
+    watchedOptionInfo = _watch2[1],
+    watchedAnswerInfo = _watch2[2],
+    watchedAnswerHint = _watch2[3],
+    watchedExplanationInfo = _watch2[4],
+    watchedIsAutoGrade = _watch2[5],
+    watchedGroups = _watch2[6],
+    optionsSetEnabled = _watch2[7];
   //
   // Change `options` according to `optionType`.
   //
-  React.useEffect(() => {
-    const get = () => {
-      const filteredNotMarkdownOptions = watchedOptionInfo === null || watchedOptionInfo === void 0 ? void 0 : watchedOptionInfo.filter(option => {
+  React.useEffect(function () {
+    var get = function get() {
+      var filteredNotMarkdownOptions = watchedOptionInfo === null || watchedOptionInfo === void 0 ? void 0 : watchedOptionInfo.filter(function (option) {
         var _a;
         return !((_a = option.content) === null || _a === void 0 ? void 0 : _a.includes('![]'));
       });
@@ -64,7 +73,7 @@ const MaterialQuizEditContent = () => {
             }];
           }
           if (filteredNotMarkdownOptions.length) {
-            return watchedOptionInfo.map(e => {
+            return watchedOptionInfo.map(function (e) {
               var _a;
               if ((_a = e.title) === null || _a === void 0 ? void 0 : _a.length) {
                 return Object.assign(Object.assign({}, e), {
@@ -98,7 +107,7 @@ const MaterialQuizEditContent = () => {
             }];
           }
           if (filteredNotMarkdownOptions.length) {
-            return watchedOptionInfo.map(e => {
+            return watchedOptionInfo.map(function (e) {
               var _a, _b;
               if (!((_a = e.content) === null || _a === void 0 ? void 0 : _a.includes('![]')) && !((_b = e.title) === null || _b === void 0 ? void 0 : _b.length)) {
                 return Object.assign(Object.assign({}, e), {
@@ -123,15 +132,15 @@ const MaterialQuizEditContent = () => {
   //
   // Change `answerInfo` according to `optionType`.
   //
-  React.useEffect(() => {
-    const get = () => {
+  React.useEffect(function () {
+    var get = function get() {
       switch (watchedOptionType) {
         case enums.QuizOptionType.SelectOne:
           if (!Array.isArray(watchedAnswerInfo)) {
             return [0];
           }
           if (checkTwoDimensionArray(watchedAnswerInfo)) {
-            const convertedAnswerInfo = watchedAnswerInfo;
+            var convertedAnswerInfo = watchedAnswerInfo;
             return flattenDeep(convertedAnswerInfo).slice(0, 1);
           }
           return watchedAnswerInfo.slice(0, 1);
@@ -159,8 +168,8 @@ const MaterialQuizEditContent = () => {
   //
   // Change `answerHint` according to `optionType`.
   //
-  React.useEffect(() => {
-    const get = () => {
+  React.useEffect(function () {
+    var get = function get() {
       switch (watchedOptionType) {
         case enums.QuizOptionType.SelectOne:
         case enums.QuizOptionType.SelectMultiple:
@@ -180,8 +189,8 @@ const MaterialQuizEditContent = () => {
   //
   // Change `isAutoGrade` according to `optionType`.
   //
-  React.useEffect(() => {
-    const get = () => {
+  React.useEffect(function () {
+    var get = function get() {
       switch (watchedOptionType) {
         case enums.QuizOptionType.SelectOne:
         case enums.QuizOptionType.SelectMultiple:
@@ -201,8 +210,8 @@ const MaterialQuizEditContent = () => {
   //
   // Change `groups` according to `optionType`.
   //
-  React.useEffect(() => {
-    const get = () => {
+  React.useEffect(function () {
+    var get = function get() {
       switch (watchedOptionType) {
         case enums.QuizOptionType.SelectOne:
         case enums.QuizOptionType.SelectMultiple:
@@ -237,7 +246,7 @@ const MaterialQuizEditContent = () => {
    * Input of option info and answer info,
    * according to option type.
    */
-  const Option = React.useMemo(() => {
+  var Option = React.useMemo(function () {
     switch (watchedOptionType) {
       case enums.QuizOptionType.SelectOne:
         return OptionSelectOne;
@@ -256,15 +265,16 @@ const MaterialQuizEditContent = () => {
   /**
    * Render input for quiz title.
    */
-  const renderQuestionTitleInput = () => {
-    return React.createElement(FormInputVerticalLayout, {
-      label: React.createElement(Label, {
+  var renderQuestionTitleInput = function renderQuestionTitleInput() {
+    return jsx(FormInputVerticalLayout, {
+      label: jsx(Label, {
         size: "small",
-        required: true
-      }, intl.formatMessage({
-        id: 'content.title'
-      })),
-      input: React.createElement(Controller, {
+        required: true,
+        children: intl.formatMessage({
+          id: 'content.title'
+        })
+      }),
+      input: jsx(Controller, {
         control: control,
         name: "questionTitle",
         rules: {
@@ -293,12 +303,11 @@ const MaterialQuizEditContent = () => {
             })
           }
         },
-        render: ({
-          field,
-          fieldState
-        }) => {
+        render: function render(_ref) {
+          var field = _ref.field,
+            fieldState = _ref.fieldState;
           var _a;
-          return React.createElement(Input, Object.assign({
+          return jsx(Input, Object.assign({
             size: "small",
             width: "full",
             minLength: MIN_TEXT_LENGTH,
@@ -316,149 +325,169 @@ const MaterialQuizEditContent = () => {
   /**
    * Render input for quiz description.
    */
-  const renderQuestionDescriptionInput = () => {
-    return React.createElement(FormInputVerticalLayout, {
-      label: React.createElement(Label, {
-        size: "small"
-      }, intl.formatMessage({
-        id: 'content.description.title'
-      })),
-      input: React.createElement(Controller, {
+  var renderQuestionDescriptionInput = function renderQuestionDescriptionInput() {
+    return jsx(FormInputVerticalLayout, {
+      label: jsx(Label, {
+        size: "small",
+        children: intl.formatMessage({
+          id: 'content.description.title'
+        })
+      }),
+      input: jsx(Controller, {
         control: control,
         name: "questionDescription",
-        render: ({
-          field
-        }) => React.createElement(MarkdownEditor, Object.assign({
-          placeholder: intl.formatMessage({
-            id: 'content.description.placeholder'
-          }),
-          onFileUploadRequest: onFileUploadRequest
-        }, field))
+        render: function render(_ref2) {
+          var field = _ref2.field;
+          return jsx(MarkdownEditor, Object.assign({
+            placeholder: intl.formatMessage({
+              id: 'content.description.placeholder'
+            }),
+            onFileUploadRequest: onFileUploadRequest
+          }, field));
+        }
       })
     });
   };
   /**
    * Render input of option type, option info and answer info.
    */
-  const renderOptionInput = () => {
-    return React.createElement(FormInputVerticalLayout, {
-      label: React.createElement(Label, {
+  var renderOptionInput = function renderOptionInput() {
+    return jsx(FormInputVerticalLayout, {
+      label: jsx(Label, {
         size: "small",
-        required: true
-      }, intl.formatMessage({
-        id: 'content.option.title'
-      })),
-      input: React.createElement(React.Fragment, null, React.createElement(Controller, {
-        control: control,
-        name: "optionType",
-        render: ({
-          field
-        }) => React.createElement(Tooltip, {
-          title: disabled && intl.formatMessage({
-            id: 'content.option.tooltip.disabled'
-          }),
-          placement: "top-end"
-        }, React.createElement(Stack, {
-          direction: "row",
-          justifyContent: "space-between",
-          marginBottom: "0.5rem"
-        }, React.createElement(TextField, Object.assign({
-          select: true,
-          disabled: disabled
-        }, field, {
-          onChange: event => {
-            const isTextQuizOption = Number(event.target.value) === enums.QuizOptionType.Text;
-            if (isTextQuizOption) {
-              setValue('optionsSetEnabled', false);
-            }
-            field.onChange(event);
+        required: true,
+        children: intl.formatMessage({
+          id: 'content.option.title'
+        })
+      }),
+      input: jsxs(Fragment, {
+        children: [jsx(Controller, {
+          control: control,
+          name: "optionType",
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return jsx(Tooltip, {
+              title: disabled && intl.formatMessage({
+                id: 'content.option.tooltip.disabled'
+              }),
+              placement: "top-end",
+              children: jsxs(Stack, {
+                direction: "row",
+                justifyContent: "space-between",
+                marginBottom: "0.5rem",
+                children: [jsxs(TextField, Object.assign({
+                  select: true,
+                  disabled: disabled
+                }, field, {
+                  onChange: function onChange(event) {
+                    var isTextQuizOption = Number(event.target.value) === enums.QuizOptionType.Text;
+                    if (isTextQuizOption) {
+                      setValue('optionsSetEnabled', false);
+                    }
+                    field.onChange(event);
+                  },
+                  children: [jsx(MenuItem, {
+                    value: enums.QuizOptionType.SelectOne,
+                    children: intl.formatMessage({
+                      id: 'content.option.select.items.selectOne'
+                    })
+                  }), jsx(MenuItem, {
+                    value: enums.QuizOptionType.SelectMultiple,
+                    children: intl.formatMessage({
+                      id: 'content.option.select.items.selectMultiple'
+                    })
+                  }), jsx(MenuItem, {
+                    value: enums.QuizOptionType.SelectMultipleOrder,
+                    children: intl.formatMessage({
+                      id: 'content.option.select.items.selectMultipleOrder'
+                    })
+                  }), jsx(MenuItem, {
+                    value: enums.QuizOptionType.Group,
+                    children: intl.formatMessage({
+                      id: 'content.option.select.items.group'
+                    })
+                  }), jsx(MenuItem, {
+                    value: enums.QuizOptionType.Text,
+                    children: intl.formatMessage({
+                      id: 'content.option.select.items.text'
+                    })
+                  })]
+                })), watchedOptionType !== enums.QuizOptionType.Text ? jsx(Controller, {
+                  name: "optionsSetEnabled",
+                  control: control,
+                  render: function render(_ref4) {
+                    var field = _ref4.field;
+                    return jsx(Tooltip, {
+                      title: disabled ? '' : intl.formatMessage({
+                        id: 'content.option.optionsSetEnabled.tooltip'
+                      }),
+                      placement: "top",
+                      children: jsx(FormControlLabel, {
+                        disabled: disabled,
+                        label: intl.formatMessage({
+                          id: 'content.option.optionsSetEnabled.label'
+                        }),
+                        control: jsx(Switch, Object.assign({}, field, {
+                          checked: field.value
+                        }))
+                      })
+                    });
+                  }
+                }) : null]
+              })
+            });
           }
-        }), React.createElement(MenuItem, {
-          value: enums.QuizOptionType.SelectOne,
-          children: intl.formatMessage({
-            id: 'content.option.select.items.selectOne'
-          })
-        }), React.createElement(MenuItem, {
-          value: enums.QuizOptionType.SelectMultiple,
-          children: intl.formatMessage({
-            id: 'content.option.select.items.selectMultiple'
-          })
-        }), React.createElement(MenuItem, {
-          value: enums.QuizOptionType.SelectMultipleOrder,
-          children: intl.formatMessage({
-            id: 'content.option.select.items.selectMultipleOrder'
-          })
-        }), React.createElement(MenuItem, {
-          value: enums.QuizOptionType.Group,
-          children: intl.formatMessage({
-            id: 'content.option.select.items.group'
-          })
-        }), React.createElement(MenuItem, {
-          value: enums.QuizOptionType.Text,
-          children: intl.formatMessage({
-            id: 'content.option.select.items.text'
+        }), watchedOptionType !== enums.QuizOptionType.Text && optionsSetEnabled ? jsxs(Alert, {
+          severity: "info",
+          sx: {
+            marginBottom: '1rem'
+          },
+          children: [jsx(AlertTitle, {
+            children: intl.formatMessage({
+              id: 'content.option.alert.randomized.title'
+            })
+          }), intl.formatMessage({
+            id: 'content.option.alert.randomized.description'
+          })]
+        }) : null, jsx(Transition, {
+          in: watchedOptionType === enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === enums.QuizOptionType.Group,
+          timeout: 0,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: jsx(Box, {
+            marginBottom: "0.5rem",
+            children: jsx(StatusText, {
+              role: "description",
+              preWrap: true,
+              children: intl.formatMessage({
+                id: watchedOptionType === enums.QuizOptionType.SelectMultipleOrder ? 'content.option.statusText.dragNDrop' : 'content.option.statusText.dragNDropGroup'
+              })
+            })
           })
-        })), watchedOptionType !== enums.QuizOptionType.Text ? React.createElement(Controller, {
-          name: "optionsSetEnabled",
-          control: control,
-          render: ({
-            field
-          }) => React.createElement(Tooltip, {
-            title: disabled ? '' : intl.formatMessage({
-              id: 'content.option.optionsSetEnabled.tooltip'
-            }),
-            placement: "top"
-          }, React.createElement(FormControlLabel, {
-            disabled: disabled,
-            label: intl.formatMessage({
-              id: 'content.option.optionsSetEnabled.label'
-            }),
-            control: React.createElement(Switch, Object.assign({}, field, {
-              checked: field.value
-            }))
-          }))
-        }) : null))
-      }), watchedOptionType !== enums.QuizOptionType.Text && optionsSetEnabled ? React.createElement(Alert, {
-        severity: "info",
-        sx: {
-          marginBottom: '1rem'
-        }
-      }, React.createElement(AlertTitle, null, intl.formatMessage({
-        id: 'content.option.alert.randomized.title'
-      })), intl.formatMessage({
-        id: 'content.option.alert.randomized.description'
-      })) : null, React.createElement(Transition, {
-        in: watchedOptionType === enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === enums.QuizOptionType.Group,
-        timeout: 0,
-        mountOnEnter: true,
-        unmountOnExit: true
-      }, React.createElement(Box, {
-        marginBottom: "0.5rem"
-      }, React.createElement(StatusText, {
-        role: "description",
-        preWrap: true
-      }, intl.formatMessage({
-        id: watchedOptionType === enums.QuizOptionType.SelectMultipleOrder ? 'content.option.statusText.dragNDrop' : 'content.option.statusText.dragNDropGroup'
-      })))), React.createElement(Option, null))
+        }), jsx(Option, {})]
+      })
     });
   };
   /**
    * Input of answer hint.
    */
-  const renderAnswerHintInput = () => {
+  var renderAnswerHintInput = function renderAnswerHintInput() {
     if (watchedOptionType !== enums.QuizOptionType.Text) {
       return null;
     }
-    return React.createElement(FormInputVerticalLayout, {
-      label: React.createElement(Label, {
-        size: "small"
-      }, intl.formatMessage({
-        id: 'content.answerHint.title'
-      })),
-      description: React.createElement(Text, null, intl.formatMessage({
-        id: 'content.answerHint.description'
-      })),
-      input: React.createElement(Controller, {
+    return jsx(FormInputVerticalLayout, {
+      label: jsx(Label, {
+        size: "small",
+        children: intl.formatMessage({
+          id: 'content.answerHint.title'
+        })
+      }),
+      description: jsx(Text, {
+        children: intl.formatMessage({
+          id: 'content.answerHint.description'
+        })
+      }),
+      input: jsx(Controller, {
         control: control,
         name: "answerHint",
         rules: {
@@ -481,12 +510,11 @@ const MaterialQuizEditContent = () => {
             })
           }
         },
-        render: ({
-          field,
-          fieldState
-        }) => {
+        render: function render(_ref5) {
+          var field = _ref5.field,
+            fieldState = _ref5.fieldState;
           var _a, _b;
-          return React.createElement(Input, Object.assign({
+          return jsx(Input, Object.assign({
             size: "small",
             width: "full",
             minLength: MIN_TEXT_LENGTH,
@@ -506,70 +534,85 @@ const MaterialQuizEditContent = () => {
   /**
    * Input of explanation info.
    */
-  const renderExplanationInfoInput = () => {
-    return React.createElement(FormInputVerticalLayout, {
-      label: React.createElement(Label, {
-        size: "small"
-      }, intl.formatMessage({
-        id: 'content.explanationInfo.title'
-      })),
-      description: React.createElement(Text, null, intl.formatMessage({
-        id: 'content.explanationInfo.description'
-      })),
-      input: React.createElement(React.Fragment, null, React.createElement(Controller, {
-        control: control,
-        name: "explanationInfo.isEnabled",
-        render: ({
-          field
-        }) => React.createElement(Checkbox, Object.assign({
-          size: "small"
-        }, field), intl.formatMessage({
-          id: 'content.explanationInfo.checkbox.label'
-        }))
-      }), React.createElement(Transition, {
-        in: watchedExplanationInfo.isEnabled,
-        timeout: 0,
-        mountOnEnter: true,
-        unmountOnExit: true
-      }, React.createElement(React.Fragment, null, React.createElement(Vspace, {
-        height: 1
-      }), React.createElement(Controller, {
-        control: control,
-        name: "explanationInfo.value",
-        rules: {
-          required: {
-            value: true,
-            message: intl.formatMessage({
-              id: 'content.explanationInfo.textarea.placeholder'
-            })
+  var renderExplanationInfoInput = function renderExplanationInfoInput() {
+    return jsx(FormInputVerticalLayout, {
+      label: jsx(Label, {
+        size: "small",
+        children: intl.formatMessage({
+          id: 'content.explanationInfo.title'
+        })
+      }),
+      description: jsx(Text, {
+        children: intl.formatMessage({
+          id: 'content.explanationInfo.description'
+        })
+      }),
+      input: jsxs(Fragment, {
+        children: [jsx(Controller, {
+          control: control,
+          name: "explanationInfo.isEnabled",
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return jsx(Checkbox, Object.assign({
+              size: "small"
+            }, field, {
+              children: intl.formatMessage({
+                id: 'content.explanationInfo.checkbox.label'
+              })
+            }));
           }
-        },
-        render: ({
-          field,
-          fieldState
-        }) => {
-          var _a;
-          return React.createElement(Flex, {
-            column: true
-          }, fieldState.invalid ? 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
-          })) : null, React.createElement(MarkdownEditor, Object.assign({
-            placeholder: intl.formatMessage({
-              id: 'content.explanationInfo.textarea.errorMessage.required'
-            }),
-            onFileUploadRequest: onFileUploadRequest
-          }, field)));
-        }
-      }))))
+        }), jsx(Transition, {
+          in: watchedExplanationInfo.isEnabled,
+          timeout: 0,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: jsxs(Fragment, {
+            children: [jsx(Vspace, {
+              height: 1
+            }), jsx(Controller, {
+              control: control,
+              name: "explanationInfo.value",
+              rules: {
+                required: {
+                  value: true,
+                  message: intl.formatMessage({
+                    id: 'content.explanationInfo.textarea.placeholder'
+                  })
+                }
+              },
+              render: function render(_ref7) {
+                var field = _ref7.field,
+                  fieldState = _ref7.fieldState;
+                var _a;
+                return jsxs(Flex, {
+                  column: true,
+                  children: [fieldState.invalid ? jsxs(Fragment, {
+                    children: [jsx(StatusText, {
+                      children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+                      role: "danger"
+                    }), jsx(Vspace, {
+                      height: 0.5
+                    })]
+                  }) : null, jsx(MarkdownEditor, Object.assign({
+                    placeholder: intl.formatMessage({
+                      id: 'content.explanationInfo.textarea.errorMessage.required'
+                    }),
+                    onFileUploadRequest: onFileUploadRequest
+                  }, field))]
+                });
+              }
+            })]
+          })
+        })]
+      })
     });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput(), renderAnswerHintInput(), renderExplanationInfoInput());
+  return jsxs(Fragment, {
+    children: [renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput(), renderAnswerHintInput(), renderExplanationInfoInput()]
+  });
 };
 
 export { MaterialQuizEditContent as default };

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

@@ -1,6 +1,8 @@
 import React from 'react';
 
-const MaterialQuizEditContext = React.createContext(null);
-const useMaterialQuizEditContext = () => React.useContext(MaterialQuizEditContext);
+var MaterialQuizEditContext = React.createContext(null);
+var useMaterialQuizEditContext = function useMaterialQuizEditContext() {
+  return React.useContext(MaterialQuizEditContext);
+};
 
 export { MaterialQuizEditContext as default, useMaterialQuizEditContext };

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

@@ -0,0 +1 @@
+export { default as MaterialQuizEdit } from './MaterialQuizEdit.js';

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

@@ -0,0 +1,4 @@
+export { default as messageEn } from './en.json.js';
+export { default as messageKo } from './ko.json.js';
+export { default as messageTh } from './th.json.js';
+export { default as messageJa } from './ja.json.js';