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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
 import { Input, Tooltip, IconButton, Vspace, Button, Icon } from '@elice/blocks';
 import { eilMathsignMultiplyBasic, eilMathsignAddCircle } from '@elice/icons';
@@ -7,35 +7,32 @@ import styled from 'styled-components';
 import { createRandomId } from './utils/randomId.js';
 import { useMaterialSurveyEditContext } from './context.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-1eiyk6z-0"
 })([""]);
-const StyledInputGroup = styled.div.withConfig({
+var StyledInputGroup = styled.div.withConfig({
   componentId: "sc-1eiyk6z-1"
 })(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
-const OptionSelectOne = () => {
-  const intl = useRawEliceIntl();
-  const {
-    disabled
-  } = useMaterialSurveyEditContext();
-  const {
-    control
-  } = useFormContext();
-  const {
-    fields: optionInfoFields,
-    append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem
-  } = useFieldArray({
-    name: 'questionInfoList.0.optionInfo',
-    keyName: 'id',
-    shouldUnregister: true
-  });
+var OptionSelectOne = function OptionSelectOne() {
+  var intl = useRawEliceIntl();
+  var _useMaterialSurveyEdi = useMaterialSurveyEditContext(),
+    disabled = _useMaterialSurveyEdi.disabled;
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control;
+  var _useFieldArray = 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: createRandomId(),
       value: ''
@@ -44,76 +41,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(Controller, {
-    key: id,
-    control: control,
-    name: `questionInfoList.0.optionInfo.${index}.value`,
-    rules: {
-      required: {
-        value: true,
-        message: intl.formatMessage({
-          id: 'option.common.select.errorMessage.required'
-        })
-      }
-    },
-    render: ({
-      field,
-      fieldState
-    }) => {
-      var _a;
-      return React.createElement(Input, Object.assign({
-        size: "small",
-        width: "full",
-        placeholder: intl.formatMessage({
-          id: 'option.common.select.placeholder'
-        }),
-        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,
-          role: "grey9",
-          size: "tiny",
-          border: false,
+  return jsxs(StyledWrap, {
+    children: [jsx(StyledInputGroup, {
+      children: optionInfoFields.map(function (_ref, index) {
+        var id = _ref.id;
+        return jsx(Controller, {
+          control: control,
+          name: "questionInfoList.0.optionInfo.".concat(index, ".value"),
+          rules: {
+            required: {
+              value: true,
+              message: intl.formatMessage({
+                id: 'option.common.select.errorMessage.required'
+              })
+            }
+          },
+          render: function render(_ref2) {
+            var field = _ref2.field,
+              fieldState = _ref2.fieldState;
+            var _a;
+            return jsx(Input, Object.assign({
+              size: "small",
+              width: "full",
+              placeholder: intl.formatMessage({
+                id: 'option.common.select.placeholder'
+              }),
+              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,
+                    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);
+      })
+    }), 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)
-        }))),
-        readOnly: disabled,
-        invalid: fieldState.invalid,
-        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
-      }, 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-survey-edit/context.js

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

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

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

package/es/components/material-survey-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';

package/es/components/material-survey-edit/utils/editValue.js

@@ -5,14 +5,18 @@ import { createRandomId } from './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: 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: createRandomId(),
+            value: option
+          };
+        }) : []
+      });
+    })
   });
 }
 /**
@@ -20,10 +24,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/es/components/shared/StyledMarkdown.js

@@ -1,7 +1,7 @@
 import { Markdown } from '@elice/markdown';
 import styled from 'styled-components';
 
-const StyledMarkdown = styled(Markdown).withConfig({
+var StyledMarkdown = styled(Markdown).withConfig({
   componentId: "sc-h8kc9g-0"
 })(["p{margin:0 !important;}"]);
 

package/es/components/shared/SurveyContentBox.js

@@ -1,96 +1,103 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text, Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
 import styled from 'styled-components';
 import { useMaterialSurveyState } from '../material-survey/context/MaterialSurveyContext.js';
 
-const StyledQuestionBox = styled.div.withConfig({
+var StyledQuestionBox = styled.div.withConfig({
   componentId: "sc-h8ztvr-0"
-})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
-  vertical
-}) => vertical ? '0' : '8px', ({
-  hasFooter
-}) => hasFooter ? '100%' : '', ({
-  hasFooter
-}) => hasFooter ? '' : '100%');
-const StyledQuestionBoxHeader = styled.div.withConfig({
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], function (_ref) {
+  var vertical = _ref.vertical;
+  return vertical ? '0' : '8px';
+}, function (_ref2) {
+  var hasFooter = _ref2.hasFooter;
+  return hasFooter ? '100%' : '';
+}, function (_ref3) {
+  var hasFooter = _ref3.hasFooter;
+  return hasFooter ? '' : '100%';
+});
+var StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-h8ztvr-1"
 })(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], base.color.navy6);
-const StyledQuestionBoxBody = styled.div.withConfig({
+var StyledQuestionBoxBody = styled.div.withConfig({
   componentId: "sc-h8ztvr-2"
-})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], base.color.navy7, ({
-  hasFooter
-}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
-const StyledQuestionBoxFooter = styled.div.withConfig({
+})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], base.color.navy7, function (_ref4) {
+  var hasFooter = _ref4.hasFooter;
+  return hasFooter ? 'height: 100%; overflow-y: auto;' : '';
+});
+var StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-h8ztvr-3"
-})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy8, ({
-  vertical
-}) => {
-  return vertical ? `
-          flex-direction: column;
-          align-items: flex-start;
-        ` : '';
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy8, function (_ref5) {
+  var vertical = _ref5.vertical;
+  return vertical ? "\n          flex-direction: column;\n          align-items: flex-start;\n        " : '';
 });
-const StyledQuestionBoxFooterActions = styled.div.withConfig({
+var StyledQuestionBoxFooterActions = styled.div.withConfig({
   componentId: "sc-h8ztvr-4"
 })(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
-const StyledQuestionBoxFooterStatus = styled.div.withConfig({
+var StyledQuestionBoxFooterStatus = styled.div.withConfig({
   componentId: "sc-h8ztvr-5"
-})(["margin-left:0.75rem;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          margin-left: 0;
-          margin-top: 0.75rem;
-        ` : '';
+})(["margin-left:0.75rem;", ""], function (_ref6) {
+  var vertical = _ref6.vertical;
+  return vertical ? "\n          margin-left: 0;\n          margin-top: 0.75rem;\n        " : '';
 });
-const SurveyContentBox = _a => {
-  var {
-      children,
-      footerActions = [],
-      title,
-      submitResult,
-      submitStatus,
-      onNext
-    } = _a,
+var SurveyContentBox = function SurveyContentBox(_a) {
+  var children = _a.children,
+    _a$footerActions = _a.footerActions,
+    footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
+    title = _a.title,
+    submitResult = _a.submitResult,
+    submitStatus = _a.submitStatus,
+    onNext = _a.onNext,
     props = __rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
-  const intl = useRawEliceIntl();
-  const {
-    vertical
-  } = useMaterialSurveyState();
-  const hasFooter = footerActions.length > 0;
-  const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(Text, {
-    bold: true,
-    customStyles: {
-      color: base.color.navy0
-    }
-  }, title), submitResult ? submitResult : null);
-  const body = React.createElement(StyledQuestionBoxBody, {
-    hasFooter: hasFooter
-  }, children);
-  const footer = React.createElement(StyledQuestionBoxFooter, {
-    vertical: vertical
-  }, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React.createElement(Button, Object.assign({
-    key: index,
-    size: "small"
-  }, action), action.children)), typeof onNext === 'function' ? React.createElement(Button, {
-    size: "small",
-    border: true,
-    tabIndex: 0,
-    transparent: false,
-    role: "lightpurple",
-    onClick: onNext
-  }, intl.formatMessage({
-    id: 'materialSurvey.next'
-  })) : null), React.createElement(StyledQuestionBoxFooterStatus, {
-    vertical: vertical
-  }, submitStatus));
-  return React.createElement(StyledQuestionBox, Object.assign({}, props, {
+  var intl = useRawEliceIntl();
+  var _useMaterialSurveySta = useMaterialSurveyState(),
+    vertical = _useMaterialSurveySta.vertical;
+  var hasFooter = footerActions.length > 0;
+  var header = jsxs(StyledQuestionBoxHeader, {
+    children: [jsx(Text, {
+      bold: true,
+      customStyles: {
+        color: base.color.navy0
+      },
+      children: title
+    }), submitResult ? submitResult : null]
+  });
+  var body = jsx(StyledQuestionBoxBody, {
+    hasFooter: hasFooter,
+    children: children
+  });
+  var footer = jsxs(StyledQuestionBoxFooter, {
+    vertical: vertical,
+    children: [jsxs(StyledQuestionBoxFooterActions, {
+      children: [footerActions.map(function (action, index) {
+        return jsx(Button, Object.assign({
+          size: "small"
+        }, action, {
+          children: action.children
+        }), index);
+      }), typeof onNext === 'function' ? jsx(Button, {
+        size: "small",
+        border: true,
+        tabIndex: 0,
+        transparent: false,
+        role: "lightpurple",
+        onClick: onNext,
+        children: intl.formatMessage({
+          id: 'materialSurvey.next'
+        })
+      }) : null]
+    }), jsx(StyledQuestionBoxFooterStatus, {
+      vertical: vertical,
+      children: submitStatus
+    })]
+  });
+  return jsxs(StyledQuestionBox, Object.assign({}, props, {
     vertical: vertical,
-    hasFooter: hasFooter
-  }), header, body, footerActions.length > 0 ? footer : null);
+    hasFooter: hasFooter,
+    children: [header, body, footerActions.length > 0 ? footer : null]
+  }));
 };
 
 export { StyledQuestionBox, SurveyContentBox as default };

package/es/components/shared/index.js

@@ -0,0 +1,4 @@
+export { default as QuestionRadio } from './question-radio/QuestionRadio.js';
+export { default as QuestionRadioOption } from './question-radio/QuestionRadioOption.js';
+export { default as QuestionCheckbox } from './question-checkbox/QuestionCheckbox.js';
+export { default as QuestionCheckboxOption } from './question-checkbox/QuestionCheckboxOption.js';

package/es/components/shared/question-checkbox/QuestionCheckbox.js

@@ -1,17 +1,19 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { QuestionCheckboxContextProvider } from './QuestionCheckboxContext.js';
 
-const StyledQuestionCheckbox = styled.div.withConfig({
+var StyledQuestionCheckbox = styled.div.withConfig({
   componentId: "sc-1ovh9lp-0"
 })(["display:flex;flex-direction:column;"]);
-const QuestionCheckbox = _a => {
-  var {
-      children
-    } = _a,
+var QuestionCheckbox = function QuestionCheckbox(_a) {
+  var children = _a.children,
     props = __rest(_a, ["children"]);
-  return React.createElement(QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
+  return jsx(QuestionCheckboxContextProvider, Object.assign({}, props, {
+    children: jsx(StyledQuestionCheckbox, {
+      children: children
+    })
+  }));
 };
 
 export { QuestionCheckbox as default };

package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts

@@ -4,6 +4,6 @@ type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSel
 interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
     children: React.ReactNode;
 }
-declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): React.JSX.Element;
+declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
 declare function useQuestionCheckboxContext(): Value;
 export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

package/es/components/shared/question-checkbox/QuestionCheckboxContext.js

@@ -1,26 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 
-const QuestionCheckboxContext = React.createContext(undefined);
+var QuestionCheckboxContext = React.createContext(undefined);
 QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
-function QuestionCheckboxContextProvider({
-  selectedOptions,
-  onSelect,
-  disabled,
-  children
-}) {
+function QuestionCheckboxContextProvider(_ref) {
+  var selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    disabled = _ref.disabled,
+    children = _ref.children;
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onSelectValue = React.useCallback(onSelect, []);
-  const value = React.useMemo(() => ({
-    selectedOptions,
-    disabled,
-    onSelect: onSelectValue
-  }), [selectedOptions, disabled, onSelectValue]);
-  return React.createElement(QuestionCheckboxContext.Provider, {
-    value: value
-  }, children);
+  var onSelectValue = React.useCallback(onSelect, []);
+  var value = React.useMemo(function () {
+    return {
+      selectedOptions: selectedOptions,
+      disabled: disabled,
+      onSelect: onSelectValue
+    };
+  }, [selectedOptions, disabled, onSelectValue]);
+  return jsx(QuestionCheckboxContext.Provider, {
+    value: value,
+    children: children
+  });
 }
 function useQuestionCheckboxContext() {
-  const context = React.useContext(QuestionCheckboxContext);
+  var context = React.useContext(QuestionCheckboxContext);
   if (context === undefined) {
     throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
   }