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

package/cjs/components/shared/question-radio/QuestionRadioContext.js

@@ -1,35 +1,28 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var QuestionRadioContext = React__default.default.createContext(undefined);
+const QuestionRadioContext = React.createContext(undefined);
 QuestionRadioContext.displayName = 'QuestionRadioContext';
-function QuestionRadioContextProvider(_ref) {
-  var selectedValue = _ref.selectedValue,
-    onSelect = _ref.onSelect,
-    disabled = _ref.disabled,
-    children = _ref.children;
+function QuestionRadioContextProvider({
+  selectedValue,
+  onSelect,
+  disabled,
+  children
+}) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  var onSelectValue = React__default.default.useCallback(onSelect, []);
-  var value = React__default.default.useMemo(function () {
-    return {
-      selectedValue: selectedValue,
-      disabled: disabled,
-      onSelect: onSelectValue
-    };
-  }, [selectedValue, disabled, onSelectValue]);
-  return jsxRuntime.jsx(QuestionRadioContext.Provider, {
-    value: value,
-    children: children
-  });
+  const onSelectValue = React.useCallback(onSelect, []);
+  const value = React.useMemo(() => ({
+    selectedValue,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedValue, disabled, onSelectValue]);
+  return React.createElement(QuestionRadioContext.Provider, {
+    value: value
+  }, children);
 }
 function useQuestionRadioContext() {
-  var context = React__default.default.useContext(QuestionRadioContext);
+  const context = React.useContext(QuestionRadioContext);
   if (context === undefined) {
     throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
   }

package/cjs/components/shared/question-radio/QuestionRadioOption.js

@@ -2,22 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var QuestionRadioContext = require('./QuestionRadioContext.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 StyledQuestionRadioOption = styled__default.default.div.withConfig({
+const StyledQuestionRadioOption = styled.div.withConfig({
   componentId: "sc-zgbv8k-0"
-})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
-  var checked = _ref.checked,
-    status = _ref.status;
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary1;
   }
@@ -29,18 +24,17 @@ var StyledQuestionRadioOption = styled__default.default.div.withConfig({
     default:
       return designTokens.base.color.navy5;
   }
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref3) {
-  var isAnswer = _ref3.isAnswer;
-  return isAnswer ? "border: 3px solid ".concat(designTokens.base.color.green5) : '';
-});
-var StyledQuestionRadioInput = styled__default.default.input.withConfig({
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
+const StyledQuestionRadioInput = styled.input.withConfig({
   componentId: "sc-zgbv8k-1"
-})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], function (_ref4) {
-  var checked = _ref4.checked,
-    status = _ref4.status;
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -52,14 +46,27 @@ var StyledQuestionRadioInput = styled__default.default.input.withConfig({
     default:
       return designTokens.base.color.gray3;
   }
-}, function (_ref5) {
-  var status = _ref5.status,
-    checked = _ref5.checked;
+}, ({
+  status,
+  checked
+}) => {
   if (checked) {
-    return "\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          width: 70%;\n          height: 70%;\n          border-radius: 50%;\n          background-color: ".concat(designTokens.base.color.primary6, ";\n        }\n      ");
+    return `
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 70%;
+          height: 70%;
+          border-radius: 50%;
+          background-color: ${designTokens.base.color.primary6};
+        }
+      `;
   }
   if (status) {
-    var bgColor;
+    let bgColor;
     switch (status) {
       case 'correct':
         bgColor = designTokens.base.color.green9;
@@ -71,14 +78,27 @@ var StyledQuestionRadioInput = styled__default.default.input.withConfig({
         bgColor = designTokens.base.color.gray3;
         break;
     }
-    return "\n          &:after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 70%;\n            height: 70%;\n            border-radius: 50%;\n            background-color: ".concat(bgColor, ";\n          }\n        ");
+    return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            background-color: ${bgColor};
+          }
+        `;
   }
 });
-var StyledLabel = styled__default.default.label.withConfig({
+const StyledLabel = styled.label.withConfig({
   componentId: "sc-zgbv8k-2"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref6) {
-  var checked = _ref6.checked,
-    status = _ref6.status;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -90,9 +110,10 @@ var StyledLabel = styled__default.default.label.withConfig({
     default:
       return designTokens.base.color.navy0;
   }
-}, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
+}, ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -105,40 +126,40 @@ var StyledLabel = styled__default.default.label.withConfig({
       return designTokens.base.color.navy0;
   }
 });
-var QuestionRadioOption = React__default.default.memo(function (_ref8) {
-  var value = _ref8.value,
-    status = _ref8.status,
-    isAnswer = _ref8.isAnswer,
-    children = _ref8.children;
-  var _useQuestionRadioCont = QuestionRadioContext.useQuestionRadioContext(),
-    selectedValue = _useQuestionRadioCont.selectedValue,
-    disabled = _useQuestionRadioCont.disabled,
-    onSelect = _useQuestionRadioCont.onSelect;
-  return jsxRuntime.jsxs(StyledQuestionRadioOption, {
+const QuestionRadioOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedValue,
+    disabled,
+    onSelect
+  } = QuestionRadioContext.useQuestionRadioContext();
+  return React.createElement(StyledQuestionRadioOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: selectedValue === value,
-    onClick: function onClick(e) {
+    onClick: e => {
       e.preventDefault();
       if (disabled) {
         return;
       }
       onSelect(value);
     },
-    status: status,
-    children: [jsxRuntime.jsx(StyledQuestionRadioInput, {
-      id: value,
-      type: "radio",
-      readOnly: true,
-      checked: selectedValue === value,
-      status: status
-    }), jsxRuntime.jsx(StyledLabel, {
-      htmlFor: value,
-      checked: selectedValue === value,
-      status: status,
-      children: children
-    })]
-  });
+    status: status
+  }, React.createElement(StyledQuestionRadioInput, {
+    id: value,
+    type: "radio",
+    readOnly: true,
+    checked: selectedValue === value,
+    status: status
+  }), React.createElement(StyledLabel, {
+    htmlFor: value,
+    checked: selectedValue === value,
+    status: status
+  }, children));
 });
 
 exports.default = QuestionRadioOption;

package/es/components/markdown-editor/index.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import type { EliceWysiwygEditorProps } from '@elice/wysiwyg';
-export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => JSX.Element;
+export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => React.JSX.Element;

package/es/components/markdown-editor/index.js

@@ -1,28 +1,23 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useDebounce } from 'react-use';
 import { EliceWysiwygEditor } from '@elice/wysiwyg';
 
-var STATE_SYNC_DEBOUNCE_TIME = 50;
-var MarkdownEditor = function MarkdownEditor(_a) {
-  var value = _a.value,
-    onChange = _a.onChange,
+const STATE_SYNC_DEBOUNCE_TIME = 50;
+const MarkdownEditor = _a => {
+  var {
+      value,
+      onChange
+    } = _a,
     props = __rest(_a, ["value", "onChange"]);
-  var _React$useState = React.useState(value),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    __value = _React$useState2[0],
-    __setValue = _React$useState2[1];
-  useDebounce(function () {
-    return __setValue(value);
-  }, STATE_SYNC_DEBOUNCE_TIME, [value]);
-  useDebounce(function () {
+  const [__value, __setValue] = React.useState(value);
+  useDebounce(() => __setValue(value), STATE_SYNC_DEBOUNCE_TIME, [value]);
+  useDebounce(() => {
     if (__value !== value && typeof onChange === 'function') {
       onChange(__value !== null && __value !== void 0 ? __value : '');
     }
   }, STATE_SYNC_DEBOUNCE_TIME, [__value]);
-  return jsx(EliceWysiwygEditor, Object.assign({
+  return React.createElement(EliceWysiwygEditor, Object.assign({
     value: value,
     onChange: __setValue
   }, props));

package/es/components/material-survey/MaterialSurvey.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { base } from '@elice/design-tokens';
@@ -12,101 +10,83 @@ import messageKo from './locales/ko.json.js';
 import MaterialSurveyShimmer from './MaterialSurveyShimmer.js';
 import MaterialSurveyInfo from './MaterialSurveyInfo.js';
 
-var AsyncMaterialSurveySelectMultiple = React.lazy(function () {
-  return import('./MaterialSurveySelectMultiple.js');
-});
-var AsyncMaterialSurveyText = React.lazy(function () {
-  return import('./MaterialSurveyText.js');
-});
-var AsyncMaterialSurveySelectOne = React.lazy(function () {
-  return import('./MaterialSurveySelectOne.js');
-});
-var StyledMaterialSurveyInfo = styled.div.withConfig({
+const AsyncMaterialSurveySelectMultiple = React.lazy(() => import('./MaterialSurveySelectMultiple.js'));
+const AsyncMaterialSurveyText = React.lazy(() => import('./MaterialSurveyText.js'));
+const AsyncMaterialSurveySelectOne = React.lazy(() => import('./MaterialSurveySelectOne.js'));
+const StyledMaterialSurveyInfo = styled.div.withConfig({
   componentId: "sc-1fyzkvm-0"
 })([""]);
-var StyledMaterialSurveyContent = styled.div.withConfig({
+const StyledMaterialSurveyContent = styled.div.withConfig({
   componentId: "sc-1fyzkvm-1"
 })([""]);
-var StyledMaterialSurveyWrapper = styled.div.withConfig({
+const StyledMaterialSurveyWrapper = styled.div.withConfig({
   componentId: "sc-1fyzkvm-2"
-})(["display:flex;height:100%;flex-direction:", ";& > *{flex:", ";}& > *:first-child{margin-right:", ";margin-bottom:", ";}", "{height:", ";overflow-y:", ";}"], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? 'column' : 'row';
-}, function (_ref2) {
-  var vertical = _ref2.vertical;
-  return vertical ? 'auto' : '1 0 calc(50% - 1rem);';
-}, function (_ref3) {
-  var vertical = _ref3.vertical;
-  return vertical ? '0' : '1rem';
-}, function (_ref4) {
-  var vertical = _ref4.vertical;
-  return vertical ? '1rem' : '0';
-}, StyledMaterialSurveyInfo, function (_ref5) {
-  var vertical = _ref5.vertical;
-  return vertical ? 'auto' : '100%';
-}, function (_ref6) {
-  var vertical = _ref6.vertical;
-  return vertical ? 'intial' : 'auto';
-});
-var MaterialSurvey = function MaterialSurvey() {
-  var _useMaterialSurveySta = useMaterialSurveyState(),
-    materialSurvey = _useMaterialSurveySta.materialSurvey,
-    vertical = _useMaterialSurveySta.vertical;
-  var _useMaterialSurveyDis = useMaterialSurveyDispatch(),
-    setVertical = _useMaterialSurveyDis.setVertical;
-  var _useMeasure = useMeasure(),
-    _useMeasure2 = _slicedToArray(_useMeasure, 2),
-    ref = _useMeasure2[0],
-    width = _useMeasure2[1].width;
-  React.useEffect(function () {
+})(["display:flex;height:100%;flex-direction:", ";& > *{flex:", ";}& > *:first-child{margin-right:", ";margin-bottom:", ";}", "{height:", ";overflow-y:", ";}"], ({
+  vertical
+}) => vertical ? 'column' : 'row', ({
+  vertical
+}) => vertical ? 'auto' : '1 0 calc(50% - 1rem);', ({
+  vertical
+}) => vertical ? '0' : '1rem', ({
+  vertical
+}) => vertical ? '1rem' : '0', StyledMaterialSurveyInfo, ({
+  vertical
+}) => vertical ? 'auto' : '100%', ({
+  vertical
+}) => vertical ? 'intial' : 'auto');
+const MaterialSurvey = () => {
+  const {
+    materialSurvey,
+    vertical
+  } = useMaterialSurveyState();
+  const {
+    setVertical
+  } = useMaterialSurveyDispatch();
+  const [ref, {
+    width
+  }] = useMeasure();
+  React.useEffect(() => {
     if (width > 0) {
       setVertical(width <= base.screen.medium);
     }
   }, [width, setVertical]);
-  var Component = null;
+  let Component = null;
   switch (materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.questionInfoList[0].optionType) {
     case enums.SurveyOptionType.SelectOne:
-      Component = jsx(AsyncMaterialSurveySelectOne, {});
+      Component = React.createElement(AsyncMaterialSurveySelectOne, null);
       break;
     case enums.SurveyOptionType.SelectMultiple:
-      Component = jsx(AsyncMaterialSurveySelectMultiple, {});
+      Component = React.createElement(AsyncMaterialSurveySelectMultiple, null);
       break;
     case enums.SurveyOptionType.Text:
-      Component = jsx(AsyncMaterialSurveyText, {});
+      Component = React.createElement(AsyncMaterialSurveyText, null);
       break;
     default:
-      Component = jsx(MaterialSurveyShimmer, {});
+      Component = React.createElement(MaterialSurveyShimmer, null);
       break;
   }
-  return jsx(React.Suspense, {
-    fallback: null,
-    children: jsxs(StyledMaterialSurveyWrapper, {
-      ref: ref,
-      vertical: vertical,
-      children: [jsx(StyledMaterialSurveyInfo, {
-        children: jsx(MaterialSurveyInfo, {})
-      }), jsx(StyledMaterialSurveyContent, {
-        children: Component
-      })]
-    })
-  });
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(StyledMaterialSurveyWrapper, {
+    ref: ref,
+    vertical: vertical
+  }, React.createElement(StyledMaterialSurveyInfo, null, React.createElement(MaterialSurveyInfo, null)), React.createElement(StyledMaterialSurveyContent, null, Component)));
 };
-var MaterialSurveyContainer = function MaterialSurveyContainer(_ref7) {
-  var materialSurveyId = _ref7.materialSurveyId,
-    userId = _ref7.userId,
-    onSubmit = _ref7.onSubmit,
-    onNext = _ref7.onNext,
-    __intl = _ref7.__intl;
-  return jsx(RawEliceIntlProvider, {
-    value: __intl,
-    children: jsx(MaterialSurveyProvider, {
-      materialSurveyId: materialSurveyId,
-      userId: userId,
-      onSubmit: onSubmit,
-      onNext: onNext,
-      children: jsx(MaterialSurvey, {})
-    })
-  });
+const MaterialSurveyContainer = ({
+  materialSurveyId,
+  userId,
+  onSubmit,
+  onNext,
+  __intl
+}) => {
+  return React.createElement(RawEliceIntlProvider, {
+    value: __intl
+  }, React.createElement(MaterialSurveyProvider, {
+    materialSurveyId: materialSurveyId,
+    userId: userId,
+    onSubmit: onSubmit,
+    onNext: onNext
+  }, React.createElement(MaterialSurvey, null)));
 };
 var MaterialSurvey$1 = new IntlComponentBuilder(MaterialSurveyContainer).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 

package/es/components/material-survey/MaterialSurveyInfo.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { Flex, Text, Shimmer, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { MarkdownSSR } from '@elice/markdown';
@@ -7,72 +7,66 @@ import styled from 'styled-components';
 import SurveyContentBox from '../shared/SurveyContentBox.js';
 import { useMaterialSurveyState } from './context/MaterialSurveyContext.js';
 
-var StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
+const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
   componentId: "sc-1b9l43w-0"
 })(["", ""], EliceWysiwygEditorTheme.resetMarkdownSSR);
-var MaterialSurveyInfo = function MaterialSurveyInfo() {
-  var _useMaterialSurveySta = useMaterialSurveyState(),
-    materialSurvey = _useMaterialSurveySta.materialSurvey;
-  return jsxs(SurveyContentBox, {
-    title: materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.title,
-    children: [materialSurvey ? jsxs(Flex, {
-      children: [jsx(Text, {
-        bold: true,
-        size: "large",
-        customStyles: {
-          color: base.color.primary3,
-          marginRight: '0.5rem'
-        },
-        children: 'Q.'
-      }), jsx(Text, {
-        bold: true,
-        role: "white",
-        size: "large",
-        wordBreak: "break-word",
-        children: materialSurvey.questionInfoList[0].questionTitle
-      })]
-    }) : jsx(Shimmer, {
-      dark: true,
-      borderRadius: '4px',
-      width: "80%",
-      height: '40px'
-    }), jsx(Vspace, {
-      height: 1
-    }), materialSurvey ? jsx(StyledMarkdownSSR, {
-      children: materialSurvey.questionInfoList[0].questionDescription,
-      dark: true,
-      paddingx: 0,
-      paddingy: 0
-    }) : jsxs(Fragment, {
-      children: [jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "80%",
-        height: '40px'
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "100%",
-        height: '40px'
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "100%",
-        height: '40px'
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "100%",
-        height: '40px'
-      })]
-    })]
-  });
+const MaterialSurveyInfo = () => {
+  const {
+    materialSurvey
+  } = useMaterialSurveyState();
+  return React.createElement(SurveyContentBox, {
+    title: materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.title
+  }, materialSurvey ? React.createElement(Flex, null, React.createElement(Text, {
+    bold: true,
+    size: "large",
+    customStyles: {
+      color: base.color.primary3,
+      marginRight: '0.5rem'
+    }
+  }, 'Q.'), React.createElement(Text, {
+    bold: true,
+    role: "white",
+    size: "large",
+    wordBreak: "break-word"
+  }, materialSurvey.questionInfoList[0].questionTitle)) : React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), materialSurvey ? React.createElement(StyledMarkdownSSR, {
+    children: materialSurvey.questionInfoList[0].questionDescription,
+    dark: true,
+    paddingx: 0,
+    paddingy: 0
+  }) : React.createElement(React.Fragment, null, React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  })));
 };
 
 export { MaterialSurveyInfo as default };