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

package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var blocks = require('@elice/blocks');
@@ -13,28 +15,34 @@ var randomId = require('./utils/randomId.js');
 var context = require('./context.js');
 var MaterialSurveyEditOptionSelect = require('./MaterialSurveyEditOptionSelect.js');
 
-const MIN_TEXT_LENGTH = 1;
-const MAX_TEXT_LENGTH = 128;
-const StyledSurveyOptionTypeSelectWrap = 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_TEXT_LENGTH = 1;
+var MAX_TEXT_LENGTH = 128;
+var StyledSurveyOptionTypeSelectWrap = styled__default.default.div.withConfig({
   componentId: "sc-r4ms68-0"
 })(["display:flex;max-width:12rem;"]);
-const MaterialSurveyEditContent = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    disabled,
-    onFileUploadRequest
-  } = context.useMaterialSurveyEditContext();
-  const {
-    control,
-    watch,
-    setValue
-  } = reactHookForm.useFormContext();
-  const [watchedOptionType, watchedOptionInfo] = watch(['questionInfoList.0.optionType', 'questionInfoList.0.optionInfo']);
+var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialSurveyEdi = context.useMaterialSurveyEditContext(),
+    disabled = _useMaterialSurveyEdi.disabled,
+    onFileUploadRequest = _useMaterialSurveyEdi.onFileUploadRequest;
+  var _useFormContext = reactHookForm.useFormContext(),
+    control = _useFormContext.control,
+    watch = _useFormContext.watch,
+    setValue = _useFormContext.setValue;
+  var _watch = watch(['questionInfoList.0.optionType', 'questionInfoList.0.optionInfo']),
+    _watch2 = _rollupPluginBabelHelpers.slicedToArray(_watch, 2),
+    watchedOptionType = _watch2[0],
+    watchedOptionInfo = _watch2[1];
   //
   // Change `optionInfo` according to `optionType`.
   //
-  React.useEffect(() => {
-    const get = () => {
+  React__default.default.useEffect(function () {
+    var get = function get() {
       switch (watchedOptionType) {
         case types.enums.SurveyOptionType.SelectOne:
         case types.enums.SurveyOptionType.SelectMultiple:
@@ -69,28 +77,29 @@ const MaterialSurveyEditContent = () => {
    * Input of option info and answer info,
    * according to option type.
    */
-  const Option = React.useMemo(() => {
+  var Option = React__default.default.useMemo(function () {
     switch (watchedOptionType) {
       case types.enums.SurveyOptionType.SelectOne:
       case types.enums.SurveyOptionType.SelectMultiple:
         return MaterialSurveyEditOptionSelect.default;
       case types.enums.SurveyOptionType.Text:
       default:
-        return React.Fragment;
+        return React__default.default.Fragment;
     }
   }, [watchedOptionType]);
   /**
    * Render input for survey title.
    */
-  const renderQuestionTitleInput = () => {
-    return React.createElement(blocks.FormInputVerticalLayout, {
-      label: React.createElement(blocks.Label, {
+  var renderQuestionTitleInput = function renderQuestionTitleInput() {
+    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
+      label: jsxRuntime.jsx(blocks.Label, {
         size: "small",
-        required: true
-      }, intl$1.formatMessage({
-        id: 'content.title'
-      })),
-      input: React.createElement(reactHookForm.Controller, {
+        required: true,
+        children: intl$1.formatMessage({
+          id: 'content.title'
+        })
+      }),
+      input: jsxRuntime.jsx(reactHookForm.Controller, {
         control: control,
         name: "questionInfoList.0.questionTitle",
         rules: {
@@ -119,12 +128,11 @@ const MaterialSurveyEditContent = () => {
             })
           }
         },
-        render: ({
-          field,
-          fieldState
-        }) => {
+        render: function render(_ref) {
+          var field = _ref.field,
+            fieldState = _ref.fieldState;
           var _a;
-          return React.createElement(blocks.Input, Object.assign({
+          return jsxRuntime.jsx(blocks.Input, Object.assign({
             size: "small",
             width: "full",
             minLength: MIN_TEXT_LENGTH,
@@ -142,79 +150,93 @@ const MaterialSurveyEditContent = () => {
   /**
    * Render input for survey description.
    */
-  const renderQuestionDescriptionInput = () => {
-    return React.createElement(blocks.FormInputVerticalLayout, {
-      label: React.createElement(blocks.Label, {
-        size: "small"
-      }, intl$1.formatMessage({
-        id: 'content.description.title'
-      })),
-      input: React.createElement(reactHookForm.Controller, {
+  var renderQuestionDescriptionInput = function renderQuestionDescriptionInput() {
+    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
+      label: jsxRuntime.jsx(blocks.Label, {
+        size: "small",
+        children: intl$1.formatMessage({
+          id: 'content.description.title'
+        })
+      }),
+      input: jsxRuntime.jsx(reactHookForm.Controller, {
         control: control,
         name: "questionInfoList.0.questionDescription",
-        render: ({
-          field
-        }) => React.createElement(index.MarkdownEditor, Object.assign({
-          placeholder: intl$1.formatMessage({
-            id: 'content.description.placeholder'
-          }),
-          onFileUploadRequest: onFileUploadRequest
-        }, field))
+        render: function render(_ref2) {
+          var field = _ref2.field;
+          return jsxRuntime.jsx(index.MarkdownEditor, Object.assign({
+            placeholder: intl$1.formatMessage({
+              id: 'content.description.placeholder'
+            }),
+            onFileUploadRequest: onFileUploadRequest
+          }, field));
+        }
       })
     });
   };
   /**
    * Render input of option type, option info and answer info.
    */
-  const renderOptionInput = () => {
-    return React.createElement(blocks.FormInputVerticalLayout, {
-      label: React.createElement(blocks.Label, {
+  var renderOptionInput = function renderOptionInput() {
+    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
+      label: jsxRuntime.jsx(blocks.Label, {
         size: "small",
-        required: true
-      }, intl$1.formatMessage({
-        id: 'content.option.title'
-      })),
-      input: React.createElement(React.Fragment, null, React.createElement(reactHookForm.Controller, {
-        control: control,
-        name: "questionInfoList.0.optionType",
-        render: ({
-          field
-        }) => React.createElement(blocks.Tooltip, {
-          title: disabled ? intl$1.formatMessage({
-            id: 'content.option.tooltip.disabled'
-          }) : undefined,
-          placement: "top-end"
-        }, React.createElement(StyledSurveyOptionTypeSelectWrap, null, React.createElement(blocks.Select, Object.assign({
-          size: "small",
-          width: "small",
-          readOnly: disabled
-        }, field, {
-          onChange: v => field.onChange(Number(v))
-        }), React.createElement("option", {
-          value: types.enums.SurveyOptionType.SelectOne,
-          children: intl$1.formatMessage({
-            id: 'content.option.select.items.selectOne'
-          })
-        }), React.createElement("option", {
-          value: types.enums.SurveyOptionType.SelectMultiple,
-          children: intl$1.formatMessage({
-            id: 'content.option.select.items.selectMultiple'
-          })
-        }), React.createElement("option", {
-          value: types.enums.SurveyOptionType.Text,
-          children: intl$1.formatMessage({
-            id: 'content.option.select.items.text'
-          })
-        }))))
-      }), React.createElement(blocks.Vspace, {
-        height: 0.5
-      }), React.createElement(Option, null))
+        required: true,
+        children: intl$1.formatMessage({
+          id: 'content.option.title'
+        })
+      }),
+      input: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(reactHookForm.Controller, {
+          control: control,
+          name: "questionInfoList.0.optionType",
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return jsxRuntime.jsx(blocks.Tooltip, {
+              title: disabled ? intl$1.formatMessage({
+                id: 'content.option.tooltip.disabled'
+              }) : undefined,
+              placement: "top-end",
+              children: jsxRuntime.jsx(StyledSurveyOptionTypeSelectWrap, {
+                children: jsxRuntime.jsxs(blocks.Select, Object.assign({
+                  size: "small",
+                  width: "small",
+                  readOnly: disabled
+                }, field, {
+                  onChange: function onChange(v) {
+                    return field.onChange(Number(v));
+                  },
+                  children: [jsxRuntime.jsx("option", {
+                    value: types.enums.SurveyOptionType.SelectOne,
+                    children: intl$1.formatMessage({
+                      id: 'content.option.select.items.selectOne'
+                    })
+                  }), jsxRuntime.jsx("option", {
+                    value: types.enums.SurveyOptionType.SelectMultiple,
+                    children: intl$1.formatMessage({
+                      id: 'content.option.select.items.selectMultiple'
+                    })
+                  }), jsxRuntime.jsx("option", {
+                    value: types.enums.SurveyOptionType.Text,
+                    children: intl$1.formatMessage({
+                      id: 'content.option.select.items.text'
+                    })
+                  })]
+                }))
+              })
+            });
+          }
+        }), jsxRuntime.jsx(blocks.Vspace, {
+          height: 0.5
+        }), jsxRuntime.jsx(Option, {})]
+      })
     });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput());
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput()]
+  });
 };
 
 exports.default = MaterialSurveyEditContent;

package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
@@ -11,35 +11,36 @@ var styled = require('styled-components');
 var randomId = require('./utils/randomId.js');
 var context = require('./context.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-1eiyk6z-0"
 })([""]);
-const StyledInputGroup = styled.div.withConfig({
+var StyledInputGroup = styled__default.default.div.withConfig({
   componentId: "sc-1eiyk6z-1"
 })(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-const OptionSelectOne = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    disabled
-  } = context.useMaterialSurveyEditContext();
-  const {
-    control
-  } = reactHookForm.useFormContext();
-  const {
-    fields: optionInfoFields,
-    append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem
-  } = reactHookForm.useFieldArray({
-    name: 'questionInfoList.0.optionInfo',
-    keyName: 'id',
-    shouldUnregister: true
-  });
+var OptionSelectOne = function OptionSelectOne() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialSurveyEdi = context.useMaterialSurveyEditContext(),
+    disabled = _useMaterialSurveyEdi.disabled;
+  var _useFormContext = reactHookForm.useFormContext(),
+    control = _useFormContext.control;
+  var _useFieldArray = reactHookForm.useFieldArray({
+      name: 'questionInfoList.0.optionInfo',
+      keyName: 'id',
+      shouldUnregister: true
+    }),
+    optionInfoFields = _useFieldArray.fields,
+    appendOptionInfoFieldItem = _useFieldArray.append,
+    removeOptionInfoFieldItem = _useFieldArray.remove;
   /**
    * Append option info.
    */
-  const appendOptionInfo = () => {
+  var appendOptionInfo = function appendOptionInfo() {
     appendOptionInfoFieldItem({
       id: randomId.createRandomId(),
       value: ''
@@ -48,76 +49,88 @@ const OptionSelectOne = () => {
   /**
    * Remove item from option info at index.
    */
-  const removeOptionInfo = index => {
+  var removeOptionInfo = function removeOptionInfo(index) {
     removeOptionInfoFieldItem(index);
   };
   //
   //
   //
-  return React.createElement(StyledWrap, null, React.createElement(StyledInputGroup, null, optionInfoFields.map(({
-    id
-  }, index) => React.createElement(reactHookForm.Controller, {
-    key: id,
-    control: control,
-    name: `questionInfoList.0.optionInfo.${index}.value`,
-    rules: {
-      required: {
-        value: true,
-        message: intl$1.formatMessage({
-          id: 'option.common.select.errorMessage.required'
-        })
-      }
-    },
-    render: ({
-      field,
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(blocks.Input, Object.assign({
-        size: "small",
-        width: "full",
-        placeholder: intl$1.formatMessage({
-          id: 'option.common.select.placeholder'
-        }),
-        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,
-          role: "grey9",
-          size: "tiny",
-          border: false,
+  return jsxRuntime.jsxs(StyledWrap, {
+    children: [jsxRuntime.jsx(StyledInputGroup, {
+      children: optionInfoFields.map(function (_ref, index) {
+        var id = _ref.id;
+        return jsxRuntime.jsx(reactHookForm.Controller, {
+          control: control,
+          name: "questionInfoList.0.optionInfo.".concat(index, ".value"),
+          rules: {
+            required: {
+              value: true,
+              message: intl$1.formatMessage({
+                id: 'option.common.select.errorMessage.required'
+              })
+            }
+          },
+          render: function render(_ref2) {
+            var field = _ref2.field,
+              fieldState = _ref2.fieldState;
+            var _a;
+            return jsxRuntime.jsx(blocks.Input, Object.assign({
+              size: "small",
+              width: "full",
+              placeholder: intl$1.formatMessage({
+                id: 'option.common.select.placeholder'
+              }),
+              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,
+                    role: "grey9",
+                    size: "tiny",
+                    border: false,
+                    transparent: true,
+                    disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
+                    onClick: function onClick() {
+                      return removeOptionInfo(index);
+                    }
+                  })
+                })
+              }),
+              readOnly: disabled,
+              invalid: fieldState.invalid,
+              invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
+            }, 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)
-        }))),
-        readOnly: disabled,
-        invalid: fieldState.invalid,
-        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
-      }, 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-survey-edit/context.js

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

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

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

package/cjs/components/material-survey-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-survey-edit/utils/editValue.js

@@ -7,14 +7,18 @@ var randomId = require('./randomId.js');
  */
 function manipulateValue(v) {
   return Object.assign(Object.assign({}, v), {
-    questionInfoList: v.questionInfoList.map(questionInfo => Object.assign(Object.assign({}, questionInfo), {
-      // convert string array to object array
-      // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
-      optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(option => ({
-        id: randomId.createRandomId(),
-        value: option
-      })) : []
-    }))
+    questionInfoList: v.questionInfoList.map(function (questionInfo) {
+      return Object.assign(Object.assign({}, questionInfo), {
+        // convert string array to object array
+        // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
+        optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(function (option) {
+          return {
+            id: randomId.createRandomId(),
+            value: option
+          };
+        }) : []
+      });
+    })
   });
 }
 /**
@@ -22,10 +26,12 @@ function manipulateValue(v) {
  */
 function restoreValue(v) {
   return Object.assign(Object.assign({}, v), {
-    questionInfoList: v.questionInfoList.map(questionInfo => {
+    questionInfoList: v.questionInfoList.map(function (questionInfo) {
       var _a;
-      const newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
-        optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(option => option.value) : null
+      var newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
+        optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(function (option) {
+          return option.value;
+        }) : null
       });
       if (!newQuestionInfo.optionInfo) {
         delete newQuestionInfo.optionInfo;

package/cjs/components/shared/StyledMarkdown.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var markdown = require('@elice/markdown');
 var styled = require('styled-components');
 
-const StyledMarkdown = styled(markdown.Markdown).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledMarkdown = styled__default.default(markdown.Markdown).withConfig({
   componentId: "sc-h8kc9g-0"
 })(["p{margin:0 !important;}"]);