@elice/material-exercise 1.231227.0 → 1.240112.0-cloud.0

package/es/components/material-exercise/exercise-preview/ExercisePreview.js

@@ -14,7 +14,7 @@ import phrasesEn from './locales/en.json.js';
 import phrasesKo from './locales/ko.json.js';
 import ExercisePreviewDisplayModeButton from './ExercisePreviewDisplayModeButton.js';
 
-var StyledExercisePreview = styled.div.withConfig({
+const StyledExercisePreview = styled.div.withConfig({
   componentId: "sc-i6d1i5-0"
 })(["width:100%;height:100%;background-color:", ";"], base.color.navy7);
 /**
@@ -22,22 +22,23 @@ var StyledExercisePreview = styled.div.withConfig({
  * - NoVnc
  * - Web browser
  */
-var ExercisePreview = function ExercisePreview() {
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId));
+const ExercisePreview = () => {
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId));
   // runner states
-  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
-  var isRunning = useRecoilValue(exerciseRunnerRunningState);
-  var exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState);
+  const isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState);
   // preview refs
-  var noVnc = React.useRef(null);
-  var webBrowser = React.useRef(null);
+  const noVnc = React.useRef(null);
+  const webBrowser = React.useRef(null);
   //
   // Action when exercise submitted.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a, _b;
     if (!isSubmitting) {
       return;
@@ -56,7 +57,7 @@ var ExercisePreview = function ExercisePreview() {
   /**
    * NoVnc
    */
-  var renderNoVnc = function renderNoVnc() {
+  const renderNoVnc = () => {
     if (exercisePreviewType !== ExercisePreviewType.NoVnc) {
       return null;
     }
@@ -73,7 +74,7 @@ var ExercisePreview = function ExercisePreview() {
   /**
    * Web browser
    */
-  var renderWebBrowser = function renderWebBrowser() {
+  const renderWebBrowser = () => {
     if (exercisePreviewType !== ExercisePreviewType.WebBrowser) {
       return null;
     }

package/es/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import { eilScreenHalf, eilPanelRight } from '@elice/icons';
@@ -10,20 +9,15 @@ import { ExercisePreviewDisplayMode } from '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var ExercisePreviewDisplayModeButton = forwardRef(function (props, ref) {
+const ExercisePreviewDisplayModeButton = forwardRef((props, ref) => {
   var _a;
-  var intl = useIntl();
-  var _useRecoilState = useRecoilState(exercisePreviewDisplayModeState),
-    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-    exercisePreviewDisplayMode = _useRecoilState2[0],
-    setExercisePreviewDisplayMode = _useRecoilState2[1];
+  const intl = useIntl();
+  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = useRecoilState(exercisePreviewDisplayModeState);
   /**
    * Handle click.
    */
-  var handleClick = function handleClick() {
-    setExercisePreviewDisplayMode(function (prevDisplayMode) {
-      return prevDisplayMode === ExercisePreviewDisplayMode.Mini ? ExercisePreviewDisplayMode.SideBySide : ExercisePreviewDisplayMode.Mini;
-    });
+  const handleClick = () => {
+    setExercisePreviewDisplayMode(prevDisplayMode => prevDisplayMode === ExercisePreviewDisplayMode.Mini ? ExercisePreviewDisplayMode.SideBySide : ExercisePreviewDisplayMode.Mini);
   };
   //
   //

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpane.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { IconButton, Hr, Flex, Text } from '@elice/blocks';
@@ -18,37 +17,34 @@ import phrasesKo from './locales/ko.json.js';
 import ExerciseRightpaneEditorPerference from './ExerciseRightpaneEditorPerference.js';
 import ExerciseRightpaneEnvironment from './ExerciseRightpaneEnvironment.js';
 
-var HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
-var StyledRightpaneWrap = styled.div.withConfig({
+const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+const StyledRightpaneWrap = styled.div.withConfig({
   componentId: "sc-1tj3x49-0"
 })(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], MATERIAL_DIVIDER_BORDER_VALUE, base.color.navy9);
-var StyledPreferenceHeader = styled.div.withConfig({
+const StyledPreferenceHeader = styled.div.withConfig({
   componentId: "sc-1tj3x49-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-var StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
+const StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1tj3x49-2"
 })(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
-var StyledRightpaneBodyWrap = styled.div.withConfig({
+const StyledRightpaneBodyWrap = styled.div.withConfig({
   componentId: "sc-1tj3x49-3"
 })(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
 }));
-var ExerciseRightpane = function ExerciseRightpane() {
-  var _useRecoilState = useRecoilState(exerciseRightpaneActiveState),
-    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-    activeState = _useRecoilState2[0],
-    setActiveState = _useRecoilState2[1];
+const ExerciseRightpane = () => {
+  const [activeState, setActiveState] = useRecoilState(exerciseRightpaneActiveState);
   /**
    *
    */
-  var handleClose = function handleClose() {
+  const handleClose = () => {
     setActiveState(null);
   };
   /**
    * Title of pane header.
    */
-  var renderRightpaneHeaderTitle = function renderRightpaneHeaderTitle() {
+  const renderRightpaneHeaderTitle = () => {
     switch (activeState) {
       case 'environment':
         return React.createElement(FormattedMessage, {
@@ -65,7 +61,7 @@ var ExerciseRightpane = function ExerciseRightpane() {
   /**
    * Pane header.
    */
-  var renderRightpaneHeader = function renderRightpaneHeader() {
+  const renderRightpaneHeader = () => {
     return React.createElement(StyledPreferenceHeader, null, React.createElement(Flex, {
       align: "center"
     }, React.createElement(Text, {
@@ -82,7 +78,7 @@ var ExerciseRightpane = function ExerciseRightpane() {
   /**
    * Pane content.
    */
-  var renderRightpaneBodyContent = function renderRightpaneBodyContent() {
+  const renderRightpaneBodyContent = () => {
     switch (activeState) {
       case 'environment':
         return React.createElement(ExerciseRightpaneEnvironment, null);

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.js

@@ -1,23 +1,19 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import '../../shared/monaco-editor/MonacoEditorLazy.js';
 import MonacoEditorPerference from '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
-import '../../shared/monaco-editor/constants/monaco/preferences.js';
 import { exerciseEditorPreferenceState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var ExerciseRightpaneEditorPerference = function ExerciseRightpaneEditorPerference() {
-  var _React$useContext = React.useContext(ExerciseContext),
-    locale = _React$useContext.locale;
-  var _useRecoilState = useRecoilState(exerciseEditorPreferenceState),
-    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-    preference = _useRecoilState2[0],
-    setPreference = _useRecoilState2[1];
+const ExerciseRightpaneEditorPerference = () => {
+  const {
+    locale
+  } = React.useContext(ExerciseContext);
+  const [preference, setPreference] = useRecoilState(exerciseEditorPreferenceState);
   return React.createElement(MonacoEditorPerference, {
     value: preference,
     locale: locale,

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.js

@@ -9,97 +9,95 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var StyledEnvironmentList = styled.ul.withConfig({
+const StyledEnvironmentList = styled.ul.withConfig({
   componentId: "sc-208wkr-0"
 })(["margin:0;padding:0;list-style:none;> li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}"]);
-var ExerciseRightpaneEnvironment = function ExerciseRightpaneEnvironment() {
-  var intl = useIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var materialExercise = useRecoilValue(exerciseState(materialExerciseId));
-  var readyExerciseImage = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.readyExerciseImage;
+const ExerciseRightpaneEnvironment = () => {
+  const intl = useIntl();
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const materialExercise = useRecoilValue(exerciseState(materialExerciseId));
+  const readyExerciseImage = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.readyExerciseImage;
   /**
    *
    */
-  var exerciseEnvironment = React.useMemo(function () {
-    return readyExerciseImage ? [{
-      name: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.cpuLimit.name'
-      }),
-      value: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.cpuLimit.value'
-      })
-    }, {
-      name: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.timeLimit.name'
-      }),
-      value: intl.formatNumber(readyExerciseImage.timeLimit / 1000, {
-        style: 'unit',
-        unit: 'second',
-        unitDisplay: 'short'
-      })
-    }, {
-      name: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.memoryLimit.name'
-      }),
-      value: intl.formatNumber(readyExerciseImage.memoryLimit / 1024 / 1024, {
-        style: 'unit',
-        unit: 'megabyte',
-        unitDisplay: 'short'
-      })
-    }, {
-      name: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.isVnc.name'
-      }),
-      value: readyExerciseImage.isVnc ? intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.common.value.true'
-      }) : intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.common.value.false'
-      })
-    }, {
-      name: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.httpPort.name'
-      }),
-      value: readyExerciseImage.httpPort ? intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.httpPort.value.true'
-      }) : intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.httpPort.value.false'
-      })
-    }, {
-      name: intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.isGpu.name'
-      }),
-      value: readyExerciseImage.isGpu ? intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.common.value.true'
-      }) : intl.formatMessage({
-        id: 'exerciseRightpane.environment.item.common.value.false'
-      })
-    }] : null;
-  }, [readyExerciseImage, intl]);
+  const exerciseEnvironment = React.useMemo(() => readyExerciseImage ? [{
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.cpuLimit.name'
+    }),
+    value: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.cpuLimit.value'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.timeLimit.name'
+    }),
+    value: intl.formatNumber(readyExerciseImage.timeLimit / 1000, {
+      style: 'unit',
+      unit: 'second',
+      unitDisplay: 'short'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.memoryLimit.name'
+    }),
+    value: intl.formatNumber(readyExerciseImage.memoryLimit / 1024 / 1024, {
+      style: 'unit',
+      unit: 'megabyte',
+      unitDisplay: 'short'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.isVnc.name'
+    }),
+    value: readyExerciseImage.isVnc ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.false'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.name'
+    }),
+    value: readyExerciseImage.httpPort ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.value.false'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.isGpu.name'
+    }),
+    value: readyExerciseImage.isGpu ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.false'
+    })
+  }] : null, [readyExerciseImage, intl]);
   //
   //
   //
   if (!exerciseEnvironment) {
     return null;
   }
-  return React.createElement(StyledEnvironmentList, null, exerciseEnvironment.map(function (_ref) {
-    var name = _ref.name,
-      value = _ref.value;
-    return React.createElement("li", {
-      key: name
-    }, React.createElement(Text, {
-      role: "navy",
-      block: true,
-      size: "small"
-    }, name), React.createElement(Vspace, {
-      height: 0.5
-    }), React.createElement(Text, {
-      role: "white",
-      bold: true,
-      block: true,
-      size: "small"
-    }, value));
-  }));
+  return React.createElement(StyledEnvironmentList, null, exerciseEnvironment.map(({
+    name,
+    value
+  }) => React.createElement("li", {
+    key: name
+  }, React.createElement(Text, {
+    role: "navy",
+    block: true,
+    size: "small"
+  }, name), React.createElement(Vspace, {
+    height: 0.5
+  }), React.createElement(Text, {
+    role: "white",
+    bold: true,
+    block: true,
+    size: "small"
+  }, value))));
 };
 
 export { ExerciseRightpaneEnvironment as default };

package/es/components/material-exercise/exercise-room/ExerciseRoom.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
 import phrasesEn from './locales/en.json.js';
@@ -6,22 +5,16 @@ import phrasesKo from './locales/ko.json.js';
 import MaterialExerciseExerciseRoomDetail from './ExerciseRoomDetail.js';
 import MaterialExerciseExerciseRoomList from './ExerciseRoomList.js';
 
-var ExerciseRoom = function ExerciseRoom(_ref) {
-  var onHide = _ref.onHide;
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedExerciseRoomId = _React$useState2[0],
-    setSelectedExerciseRoomId = _React$useState2[1];
+const ExerciseRoom = ({
+  onHide
+}) => {
+  const [selectedExerciseRoomId, setSelectedExerciseRoomId] = React.useState();
   return selectedExerciseRoomId ? React.createElement(MaterialExerciseExerciseRoomDetail, {
     selectedExerciseRoomId: selectedExerciseRoomId,
-    goToList: function goToList() {
-      return setSelectedExerciseRoomId(undefined);
-    },
+    goToList: () => setSelectedExerciseRoomId(undefined),
     onHide: onHide
   }) : React.createElement(MaterialExerciseExerciseRoomList, {
-    onExerciseRoomClick: function onExerciseRoomClick(id) {
-      return setSelectedExerciseRoomId(id);
-    },
+    onExerciseRoomClick: id => setSelectedExerciseRoomId(id),
     onHide: onHide
   });
 };

package/es/components/material-exercise/exercise-room/ExerciseRoom.styled.js

@@ -1,31 +1,29 @@
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledExerciseRoomTableWrapper = styled.div.withConfig({
+const StyledExerciseRoomTableWrapper = styled.div.withConfig({
   componentId: "sc-r4oydl-0"
 })(["overflow-y:auto;max-height:25rem;border-radius:4px;background-color:", ";height:18.75rem;"], base.color.navy7);
-var StyledExerciseRoomTable = styled.table.withConfig({
+const StyledExerciseRoomTable = styled.table.withConfig({
   componentId: "sc-r4oydl-1"
 })(["width:100%;color:", ";border-collapse:collapse;"], base.color.navy2);
-var StyledExerciseRoomThead = styled.thead.withConfig({
+const StyledExerciseRoomThead = styled.thead.withConfig({
   componentId: "sc-r4oydl-2"
 })(["& th{position:sticky;top:0;background-color:", ";z-index:100;border-bottom:1px solid ", ";}"], base.color.navy7, base.color.navy6);
-var StyledExerciseRoomTd = styled.td.withConfig({
+const StyledExerciseRoomTd = styled.td.withConfig({
   componentId: "sc-r4oydl-3"
 })(["padding:0.875rem 1rem;"]);
-var StyledExerciseRoomTr = styled.tr.withConfig({
+const StyledExerciseRoomTr = styled.tr.withConfig({
   componentId: "sc-r4oydl-4"
 })([""]);
-var StyledExerciseRoomTbody = styled.tbody.withConfig({
+const StyledExerciseRoomTbody = styled.tbody.withConfig({
   componentId: "sc-r4oydl-5"
-})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, base.color.navy6, StyledExerciseRoomTr, function (_ref) {
-  var hoverable = _ref.hoverable;
-  return hoverable ? base.color.navy5 : '';
-}, function (_ref2) {
-  var hoverable = _ref2.hoverable;
-  return hoverable ? 'pointer' : 'auto';
-}, StyledExerciseRoomTd);
-var StyledExerciseRoomTh = styled.th.withConfig({
+})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, base.color.navy6, StyledExerciseRoomTr, ({
+  hoverable
+}) => hoverable ? base.color.navy5 : '', ({
+  hoverable
+}) => hoverable ? 'pointer' : 'auto', StyledExerciseRoomTd);
+const StyledExerciseRoomTh = styled.th.withConfig({
   componentId: "sc-r4oydl-6"
 })(["font-weight:bold;font-size:", ";padding:0.875rem 1rem;text-align:left;"], base.size.body1);