@elice/material-exercise 1.230328.0 → 1.230418.0

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -1,3 +1,4 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Popover, Flex, Text, Hspace, NotificationCount, IconButton, Icon, Vspace } from '@elice/blocks';
@@ -12,47 +13,45 @@ import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 import { StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledMenuButtonFileCount, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemContentImage } from './ExerciseMenuStdioFileBrowser.styled.js';
 
-const IMAGE_NEW_WIN_IFRAME_STYLE = 'border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;';
-
-const ExerciseMenuStdioFileBrowser = () => {
-  const intl = useIntl();
-  const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef(null);
-  const stdioFiles = useRecoilValue(exerciseRunnerStdioFilesState);
+var IMAGE_NEW_WIN_IFRAME_STYLE = 'border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;';
+var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
+  var intl = useIntl();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var anchorRef = React.useRef(null);
+  var stdioFiles = useRecoilValue(exerciseRunnerStdioFilesState);
   /**
    * Open image as new window.
    */
-
-  const handleImageFileClick = e => {
+  var handleImageFileClick = function handleImageFileClick(e) {
     e.preventDefault();
-    const win = window.open('about:blank', e.currentTarget.target);
-
+    var win = window.open('about:blank', e.currentTarget.target);
     if (win) {
       // since `Not allowed to navigate top frame to data URL:` error thrown by browser,
       // use iframe to display image at new window.
-      win.document.write(`<iframe src="${e.currentTarget.href}" frameborder="0" style="${IMAGE_NEW_WIN_IFRAME_STYLE}" allowfullscreen></iframe>`);
+      win.document.write("<iframe src=\"".concat(e.currentTarget.href, "\" frameborder=\"0\" style=\"").concat(IMAGE_NEW_WIN_IFRAME_STYLE, "\" allowfullscreen></iframe>"));
       win.focus();
     }
-  }; //
+  };
+  //
   // Open stdio file browser, on file changes.
   //
-
-
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (stdioFiles && stdioFiles.length > 0) {
       setOpen(true);
     }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [stdioFiles]);
   /**
    * Image type stdio file.
    */
-
-  const renderStdioFileListItemImage = (key, f) => {
+  var renderStdioFileListItemImage = function renderStdioFileListItemImage(key, f) {
     var _a;
-
-    const ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
-    const filename = ext ? `image_output.${ext}` : 'image_output';
+    var ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
+    var filename = ext ? "image_output.".concat(ext) : 'image_output';
     return React.createElement(StyledFilePopoverBodyListItem, {
       key: key
     }, React.createElement(StyledFilePopoverBodyListItemContentImageWrap, {
@@ -73,10 +72,8 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * File type stdio file.
    */
-
-
-  const renderStdioFileListFile = (key, f) => {
-    const size = (f.data.length / 1024).toFixed(2);
+  var renderStdioFileListFile = function renderStdioFileListFile(key, f) {
+    var size = (f.data.length / 1024).toFixed(2);
     return React.createElement(StyledFilePopoverBodyListItem, {
       key: key
     }, React.createElement(StyledFilePopoverBodyListItemContentFile, null, React.createElement(Text, {
@@ -84,7 +81,7 @@ const ExerciseMenuStdioFileBrowser = () => {
       role: "white",
       size: "small"
     }), React.createElement(Text, {
-      children: `${size} KB`,
+      children: "".concat(size, " KB"),
       role: "gray4",
       size: "tiny"
     })), React.createElement(StyledFilePopoverBodyListItemDownloadButton, {
@@ -97,9 +94,7 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Empty list of stdio files.
    */
-
-
-  const renderStdioFileListEmpty = () => {
+  var renderStdioFileListEmpty = function renderStdioFileListEmpty() {
     return React.createElement(Flex, {
       column: true,
       align: "center",
@@ -123,21 +118,16 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * List of stdio files.
    */
-
-
-  const renderStdioFileList = () => {
+  var renderStdioFileList = function renderStdioFileList() {
     if (!stdioFiles || !stdioFiles.length) {
       return renderStdioFileListEmpty();
     }
-
-    return React.createElement(StyledFilePopoverBodyList, null, stdioFiles.map((f, index) => {
+    return React.createElement(StyledFilePopoverBodyList, null, stdioFiles.map(function (f, index) {
       switch (f.type) {
         case 'image':
           return renderStdioFileListItemImage(index, f);
-
         case 'file':
           return renderStdioFileListFile(index, f);
-
         default:
           return null;
       }
@@ -146,9 +136,7 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Popover header.
    */
-
-
-  const renderStdioFilePopoverHeader = () => {
+  var renderStdioFilePopoverHeader = function renderStdioFilePopoverHeader() {
     return React.createElement(StyledFilePopoverHeader, null, React.createElement(Flex, {
       align: "center"
     }, React.createElement(Text, {
@@ -168,15 +156,15 @@ const ExerciseMenuStdioFileBrowser = () => {
       size: "micro",
       border: false,
       transparent: true,
-      onClick: () => setOpen(false)
+      onClick: function onClick() {
+        return setOpen(false);
+      }
     }));
   };
   /**
    * Popover body.
    */
-
-
-  const renderStdioFilePopoverBody = () => {
+  var renderStdioFilePopoverBody = function renderStdioFilePopoverBody() {
     return React.createElement(StyledFilePopoverBody, {
       children: renderStdioFileList()
     });
@@ -184,9 +172,7 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Popover.
    */
-
-
-  const renderStdioFilePopover = () => {
+  var renderStdioFilePopover = function renderStdioFilePopover() {
     return React.createElement(Popover, {
       open: open,
       anchorEl: anchorRef.current,
@@ -199,26 +185,27 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Popover toggle button.
    */
-
-
-  const renderStdioFilePopoverToggleButton = () => {
+  var renderStdioFilePopoverToggleButton = function renderStdioFilePopoverToggleButton() {
     return React.createElement(ExerciseMenuButton, {
       icon: eilAttachment,
       active: open,
       title: intl.formatMessage({
         id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
       }),
-      onClick: () => setOpen(prev => !prev),
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      },
       ref: anchorRef
     }, React.createElement(StyledMenuButtonFileCount, {
       role: "white",
       value: stdioFiles.length
     }));
-  }; //
+  };
+  //
   //
   //
-
-
   return React.createElement(React.Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
 };
 

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -2,40 +2,40 @@ import { NotificationCount, Select } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-const StyledMenuButtonFileCount = styled(NotificationCount).withConfig({
+var StyledMenuButtonFileCount = styled(NotificationCount).withConfig({
   componentId: "sc-9mtuee-0"
 })(["position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem;"]);
-const StyledFilePopoverContent = styled.div.withConfig({
+var StyledFilePopoverContent = styled.div.withConfig({
   componentId: "sc-9mtuee-1"
 })(["display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", ";overflow:hidden;"], base.color.navy6);
-const StyledFilePopoverHeader = styled.div.withConfig({
+var StyledFilePopoverHeader = styled.div.withConfig({
   componentId: "sc-9mtuee-2"
 })(["flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", ";"], base.color.navy7);
-const StyledFilePopoverBody = styled.div.withConfig({
+var StyledFilePopoverBody = styled.div.withConfig({
   componentId: "sc-9mtuee-3"
 })(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
-const StyledFilePopoverBodyList = styled.ul.withConfig({
+var StyledFilePopoverBodyList = styled.ul.withConfig({
   componentId: "sc-9mtuee-4"
 })(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
-const StyledFilePopoverBodyListItem = styled.li.withConfig({
+var StyledFilePopoverBodyListItem = styled.li.withConfig({
   componentId: "sc-9mtuee-5"
 })(["display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", ";overflow:hidden;&:last-of-type{margin-bottom:0;}"], base.color.navy5);
-const StyledFilePopoverBodyListItemDownloadButton = styled.a.withConfig({
+var StyledFilePopoverBodyListItemDownloadButton = styled.a.withConfig({
   componentId: "sc-9mtuee-6"
 })(["display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", ";font-size:1rem;background-color:", ";"], base.color.white, base.color.primary5);
-const StyledFilePopoverBodyListItemContentFile = styled.div.withConfig({
+var StyledFilePopoverBodyListItemContentFile = styled.div.withConfig({
   componentId: "sc-9mtuee-7"
 })(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
-const StyledFilePopoverBodyListItemContentImageWrap = styled.a.withConfig({
+var StyledFilePopoverBodyListItemContentImageWrap = styled.a.withConfig({
   componentId: "sc-9mtuee-8"
 })(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], base.color.white);
-const StyledFilePopoverBodyListItemContentImage = styled.img.withConfig({
+var StyledFilePopoverBodyListItemContentImage = styled.img.withConfig({
   componentId: "sc-9mtuee-9"
 })(["width:100%;max-height:128px;object-fit:contain;"]);
-const StyledPreferenceBodyItem = styled.div.withConfig({
+var StyledPreferenceBodyItem = styled.div.withConfig({
   componentId: "sc-9mtuee-10"
 })(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
-const StyledSelect = styled(Select).withConfig({
+var StyledSelect = styled(Select).withConfig({
   componentId: "sc-9mtuee-11"
 })(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], base.color.navy8, base.color.navy7, base.color.navy8);
 

package/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -1,3 +1,4 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { Dropdown } from '@elice/blocks';
 import { useRecoilValue, useRecoilState } from 'recoil';
@@ -7,36 +8,41 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-const ExerciseMultilangDropdown = () => {
-  const {
-    materialExerciseId,
-    exerciseRoomId
-  } = React.useContext(ExerciseContext);
-  const multilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(materialExerciseId));
-  const [multilangEnvironment, setMultilangEnvironment] = useRecoilState(exerciseMultilangEnvironmentState({
-    materialExerciseId,
-    exerciseRoomId
-  })); //
+var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    exerciseRoomId = _React$useContext.exerciseRoomId;
+  var multilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(materialExerciseId));
+  var _useRecoilState = useRecoilState(exerciseMultilangEnvironmentState({
+      materialExerciseId: materialExerciseId,
+      exerciseRoomId: exerciseRoomId
+    })),
+    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+    multilangEnvironment = _useRecoilState2[0],
+    setMultilangEnvironment = _useRecoilState2[1];
+  //
   //
   //
-
   if (!multilangLanguages || !Object.keys(multilangLanguages !== null && multilangLanguages !== void 0 ? multilangLanguages : {}).length || !multilangEnvironment) {
     return null;
   }
-
   return React.createElement(Dropdown, {
     type: "dark",
     size: "tiny",
     border: true,
     placement: "bottom-end",
     value: multilangEnvironment.language,
-    onChange: language => setMultilangEnvironment({
-      language
-    })
-  }, Object.keys(multilangLanguages).map(lang => React.createElement("option", {
-    key: lang,
-    value: lang
-  }, multilangLanguages[lang].label)));
+    onChange: function onChange(language) {
+      return setMultilangEnvironment({
+        language: language
+      });
+    }
+  }, Object.keys(multilangLanguages).map(function (lang) {
+    return React.createElement("option", {
+      key: lang,
+      value: lang
+    }, multilangLanguages[lang].label);
+  }));
 };
 
 export { ExerciseMultilangDropdown as default };

package/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ExerciseMultilangDropdown from './ExerciseMultilangDropdown.js';
 
-const ExerciseMultilangDropdownLazy = () => {
+var ExerciseMultilangDropdownLazy = function ExerciseMultilangDropdownLazy() {
   return React.createElement(React.Suspense, {
     fallback: null
   }, React.createElement(ExerciseMultilangDropdown, null));

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';
 
-const StyledExercisePreview = styled.div.withConfig({
+var StyledExercisePreview = styled.div.withConfig({
   componentId: "sc-i6d1i5-0"
 })(["width:100%;height:100%;background-color:", ";"], base.color.navy7);
 /**
@@ -22,54 +22,47 @@ const StyledExercisePreview = styled.div.withConfig({
  * - NoVnc
  * - Web browser
  */
-
-const ExercisePreview = () => {
-  const {
-    materialExerciseId
-  } = React.useContext(ExerciseContext);
-  const exercise = useRecoilValue(exerciseState(materialExerciseId));
-  const exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId)); // runner states
-
-  const isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
-  const isRunning = useRecoilValue(exerciseRunnerRunningState);
-  const exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState); // preview refs
-
-  const noVnc = React.useRef(null);
-  const webBrowser = React.useRef(null); //
+var ExercisePreview = function ExercisePreview() {
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId));
+  // runner states
+  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  var isRunning = useRecoilValue(exerciseRunnerRunningState);
+  var exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState);
+  // preview refs
+  var noVnc = React.useRef(null);
+  var webBrowser = React.useRef(null);
+  //
   // Action when exercise submitted.
   //
-
-  React.useEffect(() => {
+  React.useEffect(function () {
     var _a, _b;
-
     if (!isSubmitting) {
       return;
     }
-
     switch (exercisePreviewType) {
       case ExercisePreviewType.NoVnc:
         (_a = noVnc.current) === null || _a === void 0 ? void 0 : _a.reset();
         break;
-
       case ExercisePreviewType.WebBrowser:
         (_b = webBrowser.current) === null || _b === void 0 ? void 0 : _b.reload();
         break;
     }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [isSubmitting]);
   /**
    * NoVnc
    */
-
-  const renderNoVnc = () => {
+  var renderNoVnc = function renderNoVnc() {
     if (exercisePreviewType !== ExercisePreviewType.NoVnc) {
       return null;
     }
-
     if (!(exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) || !exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-
     return React.createElement(NoVncLazy, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
       isRunning: isRunning,
       readyExerciseImage: exercise.readyExerciseImage,
@@ -80,29 +73,23 @@ const ExercisePreview = () => {
   /**
    * Web browser
    */
-
-
-  const renderWebBrowser = () => {
+  var renderWebBrowser = function renderWebBrowser() {
     if (exercisePreviewType !== ExercisePreviewType.WebBrowser) {
       return null;
     }
-
     if (!exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-
     return React.createElement(WebBrowser, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
       menuButtons: React.createElement(ExercisePreviewDisplayModeButton, null),
       ref: webBrowser
     }));
-  }; //
+  };
+  //
   //
   //
-
-
   return React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser());
 };
-
 var ExercisePreview$1 = withExerciseIntlProvider(ExercisePreview, {
   en: phrasesEn,
   ko: phrasesKo

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

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

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

@@ -1,3 +1,4 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { IconButton, Flex, Text, Hr } from '@elice/blocks';
@@ -17,49 +18,46 @@ import phrasesKo from './locales/ko.json.js';
 import ExerciseRightpaneEditorPerference from './ExerciseRightpaneEditorPerference.js';
 import ExerciseRightpaneEnvironment from './ExerciseRightpaneEnvironment.js';
 
-const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
-const StyledRightpaneWrap = styled.div.withConfig({
+var HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+var 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);
-const StyledPreferenceHeader = styled.div.withConfig({
+var StyledPreferenceHeader = styled.div.withConfig({
   componentId: "sc-1tj3x49-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-const StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
+var StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1tj3x49-2"
 })(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
-const StyledRightpaneBodyWrap = styled.div.withConfig({
+var StyledRightpaneBodyWrap = styled.div.withConfig({
   componentId: "sc-1tj3x49-3"
 })(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
 }));
-
-const ExerciseRightpane = () => {
-  const [activeState, setActiveState] = useRecoilState(exerciseRightpaneActiveState);
+var ExerciseRightpane = function ExerciseRightpane() {
+  var _useRecoilState = useRecoilState(exerciseRightpaneActiveState),
+    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+    activeState = _useRecoilState2[0],
+    setActiveState = _useRecoilState2[1];
   /**
    *
    */
-
-  const handleClose = () => {
+  var handleClose = function handleClose() {
     setActiveState(null);
   };
   /**
    * Title of pane header.
    */
-
-
-  const renderRightpaneHeaderTitle = () => {
+  var renderRightpaneHeaderTitle = function renderRightpaneHeaderTitle() {
     switch (activeState) {
       case 'environment':
         return React.createElement(FormattedMessage, {
           id: "exerciseRightpane.environment.title"
         });
-
       case 'preference':
         return React.createElement(FormattedMessage, {
           id: "exerciseRightpane.preference.title"
         });
-
       default:
         return '';
     }
@@ -67,9 +65,7 @@ const ExerciseRightpane = () => {
   /**
    * Pane header.
    */
-
-
-  const renderRightpaneHeader = () => {
+  var renderRightpaneHeader = function renderRightpaneHeader() {
     return React.createElement(StyledPreferenceHeader, null, React.createElement(Flex, {
       align: "center"
     }, React.createElement(Text, {
@@ -86,35 +82,28 @@ const ExerciseRightpane = () => {
   /**
    * Pane content.
    */
-
-
-  const renderRightpaneBodyContent = () => {
+  var renderRightpaneBodyContent = function renderRightpaneBodyContent() {
     switch (activeState) {
       case 'environment':
         return React.createElement(ExerciseRightpaneEnvironment, null);
-
       case 'preference':
         return React.createElement(ExerciseRightpaneEditorPerference, null);
-
       default:
         return null;
     }
-  }; //
+  };
+  //
   //
   //
-
-
   if (!activeState) {
     return null;
   }
-
   return React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(Hr, {
     marginStart: 0,
     marginEnd: 0,
     color: base.color.navy6
   }), React.createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent()));
 };
-
 var ExerciseRightpane$1 = withExerciseIntlProvider(ExerciseRightpane, {
   en: phrasesEn,
   ko: phrasesKo

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

@@ -1,3 +1,4 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import '../../shared/monaco-editor/MonacoEditorLazy.js';
@@ -10,16 +11,18 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-const ExerciseRightpaneEditorPerference = () => {
-  const {
-    locale
-  } = React.useContext(ExerciseContext);
-  const [preference, setPreference] = useRecoilState(exerciseEditorPreferenceState);
+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];
   return React.createElement(MonacoEditorPerference, {
     value: preference,
     locale: locale,
     onChange: setPreference
   });
-}; //
+};
 
 export { ExerciseRightpaneEditorPerference as default };