@elice/material-exercise 1.240718.2 → 1.240719.0

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.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 intl = require('@elice/intl');
 var recoil = require('recoil');
@@ -19,57 +21,75 @@ require('../context/ExerciseProvider.js');
 var fileTreeButton_en = require('./locales/fileTreeButton.en.json.js');
 var fileTreeButton_ko = require('./locales/fileTreeButton.ko.json.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);
+
 //
 //
 //
-const AsyncFileTabs = React.lazy(() => Promise.resolve().then(function () { return require('../../shared/file-tabs/FileTabs.js'); }));
-const StyledFileTabsWrapper = styled.div.withConfig({
+var AsyncFileTabs = React__default.default.lazy(function () {
+  return Promise.resolve().then(function () { return require('../../shared/file-tabs/FileTabs.js'); });
+});
+var StyledFileTabsWrapper = styled__default.default.div.withConfig({
   componentId: "sc-11fdoyl-0"
 })(["flex:0 0 3rem;"]);
 //
 //
 //
-const ExerciseFileTabs = () => {
-  const {
-    exerciseRoomId,
-    materialExerciseId
-  } = React.useContext(context.ExerciseContext);
-  const [activeFilename, setActiveFilename] = recoil.useRecoilState(recoil$1.exerciseActiveFilenameState);
-  const [openedTabs, setOpenedTabs] = recoil.useRecoilState(recoil$1.exerciseFileTabsOpenedState({
-    materialExerciseId,
-    exerciseRoomId
-  }));
-  const handleCloseTab = path => {
-    const updatedTabs = openedTabs.filter(tab => tab !== path);
+var ExerciseFileTabs = function ExerciseFileTabs() {
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseActiveFilenameState),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    activeFilename = _useRecoilState2[0],
+    setActiveFilename = _useRecoilState2[1];
+  var _useRecoilState3 = recoil.useRecoilState(recoil$1.exerciseFileTabsOpenedState({
+      materialExerciseId: materialExerciseId,
+      exerciseRoomId: exerciseRoomId
+    })),
+    _useRecoilState4 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState3, 2),
+    openedTabs = _useRecoilState4[0],
+    setOpenedTabs = _useRecoilState4[1];
+  var handleCloseTab = function handleCloseTab(path) {
+    var updatedTabs = openedTabs.filter(function (tab) {
+      return tab !== path;
+    });
     setOpenedTabs(updatedTabs);
     if (activeFilename === path) {
       setActiveFilename(updatedTabs.length > 0 ? updatedTabs[0] : '');
     }
   };
-  const handleTabOrderChange = (currentIndex, movedIndex) => {
-    const newOpenedTabs = [...openedTabs];
-    const movingTab = newOpenedTabs.splice(currentIndex, 1);
-    newOpenedTabs.splice(movedIndex, 0, ...movingTab);
+  var handleTabOrderChange = function handleTabOrderChange(currentIndex, movedIndex) {
+    var newOpenedTabs = _rollupPluginBabelHelpers.toConsumableArray(openedTabs);
+    var movingTab = newOpenedTabs.splice(currentIndex, 1);
+    newOpenedTabs.splice.apply(newOpenedTabs, [movedIndex, 0].concat(_rollupPluginBabelHelpers.toConsumableArray(movingTab)));
     setOpenedTabs(newOpenedTabs);
   };
-  const handleActivePathChange = (path, isDirectory = false) => {
+  var handleActivePathChange = function handleActivePathChange(path) {
+    var isDirectory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (isDirectory) {
       return;
     }
     if (!openedTabs.includes(path)) {
-      setOpenedTabs([...openedTabs, path]);
+      setOpenedTabs([].concat(_rollupPluginBabelHelpers.toConsumableArray(openedTabs), [path]));
     }
     setActiveFilename(path);
   };
-  return React.createElement(StyledFileTabsWrapper, null, React.createElement(React.Suspense, {
-    fallback: React.createElement(ExerciseFileTabsShimmer.default, null)
-  }, React.createElement(AsyncFileTabs, {
-    openedTabs: openedTabs,
-    activeTab: activeFilename || undefined,
-    onCloseTab: handleCloseTab,
-    onSelectTab: handleActivePathChange,
-    onTabOrderChange: handleTabOrderChange
-  })));
+  return jsxRuntime.jsx(StyledFileTabsWrapper, {
+    children: jsxRuntime.jsx(React__default.default.Suspense, {
+      fallback: jsxRuntime.jsx(ExerciseFileTabsShimmer.default, {}),
+      children: jsxRuntime.jsx(AsyncFileTabs, {
+        openedTabs: openedTabs,
+        activeTab: activeFilename || undefined,
+        onCloseTab: handleCloseTab,
+        onSelectTab: handleActivePathChange,
+        onTabOrderChange: handleTabOrderChange
+      })
+    })
+  });
 };
 var ExerciseFileTabs$1 = new intl.IntlComponentBuilder(ExerciseFileTabs).add('en', fileTreeButton_en.default).add('ko', fileTreeButton_ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/fileTreeButton.th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/fileTreeButton.ja.json.js'); })).build();
 

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const ExerciseFileTabsLazy: () => React.JSX.Element;
+declare const ExerciseFileTabsLazy: () => JSX.Element;
 export default ExerciseFileTabsLazy;

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
 var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
@@ -10,10 +11,15 @@ require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
 require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
 var ExerciseFileTabs = require('./ExerciseFileTabs.js');
 
-const ExerciseFileTabsLazy = () => {
-  return React.createElement(React.Suspense, {
-    fallback: React.createElement(ExerciseFileTabsShimmer.default, null)
-  }, React.createElement(ExerciseFileTabs.default, null));
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ExerciseFileTabsLazy = function ExerciseFileTabsLazy() {
+  return jsxRuntime.jsx(React__default.default.Suspense, {
+    fallback: jsxRuntime.jsx(ExerciseFileTabsShimmer.default, {}),
+    children: jsxRuntime.jsx(ExerciseFileTabs.default, {})
+  });
 };
 
 exports.default = ExerciseFileTabsLazy;

package/cjs/components/material-exercise/exercise-file-tabs/exercise-file-tabs-file-tree-button/ExerciseFileTabsFileTreeButton.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 reactUse = require('react-use');
 var blocks = require('@elice/blocks');
@@ -20,30 +22,40 @@ require('../../context/ExerciseProvider.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 
-const ICON_BUTTON_SIZE = '2.25rem';
-const StyledFileTreeButton = styled(blocks.IconButton).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 ICON_BUTTON_SIZE = '2.25rem';
+var StyledFileTreeButton = styled__default.default(blocks.IconButton).withConfig({
   componentId: "sc-1ulolpl-0"
-})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, designTokens.base.color.navy7, props => props.active ? designTokens.base.color.navy8 : designTokens.base.color.navy8, designTokens.base.color.navy9);
-const ExerciseFileTabsFileTreeButton = React.forwardRef(({
-  __intl
-}, ref) => {
-  const {
-    materialExerciseId
-  } = React.useContext(context.ExerciseContext);
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const [exerciseFileTreeOpened, setExerciseFileTreeOpened] = recoil.useRecoilState(recoil$1.exerciseFileTreeOpenedState);
+})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, designTokens.base.color.navy7, function (props) {
+  return props.active ? designTokens.base.color.navy8 : designTokens.base.color.navy8;
+}, designTokens.base.color.navy9);
+var ExerciseFileTabsFileTreeButton = React.forwardRef(function (_ref, ref) {
+  var __intl = _ref.__intl;
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseFileTreeOpenedState),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    exerciseFileTreeOpened = _useRecoilState2[0],
+    setExerciseFileTreeOpened = _useRecoilState2[1];
   /**
    * Handle click.
    */
-  const handleClick = () => {
-    setExerciseFileTreeOpened(prev => !prev);
+  var handleClick = function handleClick() {
+    setExerciseFileTreeOpened(function (prev) {
+      return !prev;
+    });
   };
   //
   // apply default file tree opened state.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     var _a;
-    const exerciseUiConfig = utils.eliceApiUiConfigNormalizeHelper('materialExercise', (_a = exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig) !== null && _a !== void 0 ? _a : {});
+    var exerciseUiConfig = utils.eliceApiUiConfigNormalizeHelper('materialExercise', (_a = exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig) !== null && _a !== void 0 ? _a : {});
     setExerciseFileTreeOpened(exerciseUiConfig.editorFileTreeDefaultStatus === types.enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Open);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -51,27 +63,32 @@ const ExerciseFileTabsFileTreeButton = React.forwardRef(({
   //
   //
   //
-  const [el] = reactUse.useHover(isHovering => {
-    return React.createElement("div", null, React.createElement(blocks.Tooltip, {
-      title: exerciseFileTreeOpened ? __intl.formatMessage({
-        id: 'exerciseFileTab.fileTreeButton.tooltip.close'
-      }) : __intl.formatMessage({
-        id: 'exerciseFileTab.fileTreeButton.tooltip.open'
-      }),
-      placement: "bottom-start"
-    }, React.createElement(StyledFileTreeButton, {
-      icon: isHovering ? icons.eilArrowRightwardsDouble : icons.eilFolder,
-      iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
-      role: "gray3",
-      size: "tiny",
-      transparent: true,
-      border: false,
-      hasBorderRadius: false,
-      active: exerciseFileTreeOpened,
-      onClick: handleClick,
-      ref: ref
-    })));
-  });
+  var _useHover = reactUse.useHover(function (isHovering) {
+      return jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx(blocks.Tooltip, {
+          title: exerciseFileTreeOpened ? __intl.formatMessage({
+            id: 'exerciseFileTab.fileTreeButton.tooltip.close'
+          }) : __intl.formatMessage({
+            id: 'exerciseFileTab.fileTreeButton.tooltip.open'
+          }),
+          placement: "bottom-start",
+          children: jsxRuntime.jsx(StyledFileTreeButton, {
+            icon: isHovering ? icons.eilArrowRightwardsDouble : icons.eilFolder,
+            iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
+            role: "gray3",
+            size: "tiny",
+            transparent: true,
+            border: false,
+            hasBorderRadius: false,
+            active: exerciseFileTreeOpened,
+            onClick: handleClick,
+            ref: ref
+          })
+        })
+      });
+    }),
+    _useHover2 = _rollupPluginBabelHelpers.slicedToArray(_useHover, 1),
+    el = _useHover2[0];
   return (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.editorFileTreeDefaultStatus) === types.enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Hide ? null : el;
 });
 //

package/cjs/components/material-exercise/exercise-file-tabs/exercise-file-tabs-file-tree-button/index.js

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

package/cjs/components/material-exercise/exercise-file-tabs/exercise-file-tabs-file-tree-button/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-exercise/exercise-file-tabs/index.js

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

package/cjs/components/material-exercise/exercise-file-tabs/locales/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var fileTreeButton_en = require('./fileTreeButton.en.json.js');
+var fileTreeButton_ko = require('./fileTreeButton.ko.json.js');
+var fileTreeButton_th = require('./fileTreeButton.th.json.js');
+var fileTreeButton_ja = require('./fileTreeButton.ja.json.js');
+
+
+
+exports.messageEn = fileTreeButton_en.default;
+exports.messageKo = fileTreeButton_ko.default;
+exports.messageTh = fileTreeButton_th.default;
+exports.messageJa = fileTreeButton_ja.default;