@elice/material-runbox-legacy 1.231212.0 → 1.231228.0

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacy.js

@@ -11,34 +11,30 @@ var locales = require('./locales.js');
 var MaterialRunboxLegacyRunnerRoomWrapper = require('./MaterialRunboxLegacyRunnerRoomWrapper.js');
 var MaterialRunboxLegacy_styled = require('./MaterialRunboxLegacy.styled.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var MaterialRunboxLegacy = function MaterialRunboxLegacy(_ref) {
-  var materialRunboxId = _ref.materialRunboxId,
-    _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? 'en' : _ref$locale;
-  var isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+const MaterialRunboxLegacy = ({
+  materialRunboxId,
+  locale = 'en'
+}) => {
+  const isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
   if (!isReady) {
-    return React__default["default"].createElement(blocks.Flex, {
+    return React.createElement(blocks.Flex, {
       justify: "center",
       align: "center",
       width: "100%",
       height: "100%"
-    }, React__default["default"].createElement(blocks.Spinner, {
+    }, React.createElement(blocks.Spinner, {
       size: "small"
     }));
   }
-  return React__default["default"].createElement(MaterialRunboxLegacy_styled.StyledMaterialRunboxLegacy, {
+  return React.createElement(MaterialRunboxLegacy_styled.StyledMaterialRunboxLegacy, {
     key: materialRunboxId
-  }, React__default["default"].createElement(reactIntl.IntlProvider, {
+  }, React.createElement(reactIntl.IntlProvider, {
     locale: locale,
     defaultLocale: "en",
     messages: locale in locales ? locales[locale] : locales.en
-  }, React__default["default"].createElement(MaterialRunboxLegacyRunnerRoomWrapper["default"], {
+  }, React.createElement(MaterialRunboxLegacyRunnerRoomWrapper.default, {
     materialRunboxId: materialRunboxId
   })));
 };
 
-exports["default"] = MaterialRunboxLegacy;
+exports.default = MaterialRunboxLegacy;

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacy.styled.js

@@ -1,14 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('styled-components');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var StyledMaterialRunboxLegacy = styled__default["default"].div.withConfig({
+const StyledMaterialRunboxLegacy = styled.div.withConfig({
   componentId: "sc-w139i8-0"
 })(["display:flex;flex-direction:column;padding-top:0.5rem;width:100%;height:100%;background-color:#fff;"]);
 

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacyContent.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactIntl = require('react-intl');
 var reactUse = require('react-use');
@@ -11,10 +10,7 @@ var icons = require('@elice/icons');
 var websocket = require('./websocket.js');
 var MaterialRunboxLegacyContent_styled = require('./MaterialRunboxLegacyContent.styled.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
+/* eslint-disable @typescript-eslint/naming-convention */
 exports.MaterialRunboxLegacyStatus = void 0;
 (function (MaterialRunboxLegacyStatus) {
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Idle"] = 0] = "Idle";
@@ -25,76 +21,47 @@ exports.MaterialRunboxLegacyStatus = void 0;
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Terminated"] = 5] = "Terminated";
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Error"] = 6] = "Error";
 })(exports.MaterialRunboxLegacyStatus || (exports.MaterialRunboxLegacyStatus = {}));
-var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
-  var runboxUrl = _ref.runboxUrl,
-    isRunboxTerminated = _ref.isRunboxTerminated,
-    isRunboxJoinError = _ref.isRunboxJoinError,
-    reconnect = _ref.reconnect;
-  var intl = reactIntl.useIntl();
-  var _React$useState = React__default["default"].useState(null),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    runboxStats = _React$useState2[0],
-    setRunboxStats = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isRunboxUrlLoaded = _React$useState4[0],
-    setRunboxUrlLoaded = _React$useState4[1];
-  var isRunboxUrlLoadedPrev = reactUse.usePrevious(isRunboxUrlLoaded);
-  var _React$useState5 = React__default["default"].useState(exports.MaterialRunboxLegacyStatus.Idle),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    runboxStatus = _React$useState6[0],
-    setRunboxStatus = _React$useState6[1];
-  var isRunboxPreparing = runboxStatus !== exports.MaterialRunboxLegacyStatus.Done && runboxStatus !== exports.MaterialRunboxLegacyStatus.Terminated;
-  websocket.WSMaterialRunboxLegacyStdio.useMessage(function (message) {
+const MaterialRunboxLegacyContent = ({
+  runboxUrl,
+  isRunboxTerminated,
+  isRunboxJoinError,
+  reconnect
+}) => {
+  const intl = reactIntl.useIntl();
+  const [runboxStats, setRunboxStats] = React.useState(null);
+  const [isRunboxUrlLoaded, setRunboxUrlLoaded] = React.useState(false);
+  const isRunboxUrlLoadedPrev = reactUse.usePrevious(isRunboxUrlLoaded);
+  const [runboxStatus, setRunboxStatus] = React.useState(exports.MaterialRunboxLegacyStatus.Idle);
+  const isRunboxPreparing = runboxStatus !== exports.MaterialRunboxLegacyStatus.Done && runboxStatus !== exports.MaterialRunboxLegacyStatus.Terminated;
+  websocket.WSMaterialRunboxLegacyStdio.useMessage(message => {
     if (message.type === 'stats') {
       setRunboxStats(message.data);
     }
   }, {
     camelize: true
   });
-  var handleReconnect = function handleReconnect() {
+  const handleReconnect = () => {
     setRunboxStats(null);
     setRunboxUrlLoaded(false);
     reconnect();
   };
-  var handleShare = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (runboxUrl) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            _context.prev = 2;
-            _context.next = 5;
-            return navigator.clipboard.writeText(runboxUrl);
-          case 5:
-            blocks.Notification.success(intl.formatMessage({
-              id: 'runboxLegacy.share.success'
-            }));
-            _context.next = 11;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](2);
-            alert(runboxUrl);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 8]]);
-    }));
-    return function handleShare() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  const handleShare = async () => {
+    if (!runboxUrl) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(runboxUrl);
+      blocks.Notification.success(intl.formatMessage({
+        id: 'runboxLegacy.share.success'
+      }));
+    } catch (e) {
+      alert(runboxUrl);
+    }
+  };
   //
   // Change `isRunboxUrlLoaded` flag to false, when runbox url removed.
   //
-  React__default["default"].useEffect(function () {
+  React.useEffect(() => {
     if (!runboxUrl) {
       setRunboxUrlLoaded(false);
     }
@@ -102,8 +69,8 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   //
   // Determine runbox status.
   //
-  React__default["default"].useEffect(function () {
-    setRunboxStatus(function () {
+  React.useEffect(() => {
+    setRunboxStatus((() => {
       switch (true) {
         case isRunboxJoinError:
           return exports.MaterialRunboxLegacyStatus.Error;
@@ -120,35 +87,35 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
         default:
           return exports.MaterialRunboxLegacyStatus.Idle;
       }
-    }());
+    })());
   }, [isRunboxJoinError, isRunboxTerminated, isRunboxUrlLoaded, isRunboxUrlLoadedPrev, runboxUrl]);
   /**
    * Runbox status message shown at header.
    */
-  var renderRunboxStatusMessage = function renderRunboxStatusMessage() {
+  const renderRunboxStatusMessage = () => {
     switch (runboxStatus) {
       case exports.MaterialRunboxLegacyStatus.Idle:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+        return React.createElement(reactIntl.FormattedMessage, {
           id: "runboxLegacy.status.idle"
         });
       case exports.MaterialRunboxLegacyStatus.Connecting:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+        return React.createElement(reactIntl.FormattedMessage, {
           id: "runboxLegacy.status.connecting"
         });
       case exports.MaterialRunboxLegacyStatus.Loading:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+        return React.createElement(reactIntl.FormattedMessage, {
           id: "runboxLegacy.status.loading"
         });
       case exports.MaterialRunboxLegacyStatus.Done:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+        return React.createElement(reactIntl.FormattedMessage, {
           id: "runboxLegacy.status.done"
         });
       case exports.MaterialRunboxLegacyStatus.Disconnected:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+        return React.createElement(reactIntl.FormattedMessage, {
           id: "runboxLegacy.status.disconnected"
         });
       case exports.MaterialRunboxLegacyStatus.Terminated:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+        return React.createElement(reactIntl.FormattedMessage, {
           id: "runboxLegacy.status.terminated"
         });
     }
@@ -156,95 +123,95 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   /**
    * Header of runbox.
    */
-  var renderRunboxHeader = function renderRunboxHeader() {
-    var runboxStatsInfo = runboxStats ? React__default["default"].createElement(blocks.LaptopOrLarger, null, React__default["default"].createElement(blocks.Flex, null, React__default["default"].createElement(blocks.Flex, {
+  const renderRunboxHeader = () => {
+    const runboxStatsInfo = runboxStats ? React.createElement(blocks.LaptopOrLarger, null, React.createElement(blocks.Flex, null, React.createElement(blocks.Flex, {
       align: "center"
-    }, React__default["default"].createElement(blocks.Text, {
+    }, React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray7",
       bold: true
-    }, "CPU:\xA0"), React__default["default"].createElement(blocks.Flex, {
+    }, "CPU:\u00A0"), React.createElement(blocks.Flex, {
       align: "center",
       width: "30px"
-    }, React__default["default"].createElement(blocks.AntProgress, {
+    }, React.createElement(blocks.AntProgress, {
       type: "line",
       percent: runboxStats.cpu.percent,
       status: 'active',
       showInfo: false
-    })), React__default["default"].createElement(blocks.Text, {
+    })), React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray5"
-    }, "\xA0", "".concat(runboxStats.cpu.percent.toFixed(0), "%"))), React__default["default"].createElement(blocks.Hspace, {
+    }, "\u00A0", `${runboxStats.cpu.percent.toFixed(0)}%`)), React.createElement(blocks.Hspace, {
       width: 1
-    }), React__default["default"].createElement(blocks.Flex, {
+    }), React.createElement(blocks.Flex, {
       align: "center"
-    }, React__default["default"].createElement(blocks.Text, {
+    }, React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray7",
       bold: true
-    }, "MEM:\xA0"), React__default["default"].createElement(blocks.Flex, {
+    }, "MEM:\u00A0"), React.createElement(blocks.Flex, {
       align: "center",
       width: "30px"
-    }, React__default["default"].createElement(blocks.AntProgress, {
+    }, React.createElement(blocks.AntProgress, {
       percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
       status: 'active',
       showInfo: false
-    })), React__default["default"].createElement(blocks.Text, {
+    })), React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray5"
-    }, "\xA0", "".concat((runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0), "M / ").concat((runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0), "M"))), React__default["default"].createElement(blocks.Hspace, {
+    }, "\u00A0", `${(runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0)}M / ${(runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0)}M`)), React.createElement(blocks.Hspace, {
       width: 1
-    }), React__default["default"].createElement(blocks.Text, {
+    }), React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray7",
       bold: true
-    }, "DISK:\xA0"), React__default["default"].createElement(blocks.Text, {
+    }, "DISK:\u00A0"), React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray5"
-    }, "Read ".concat((runboxStats.block.rxBytes / 1024 / 1024).toFixed(0), "M Write ").concat((runboxStats.block.txBytes / 1024 / 1024).toFixed(0), "M")), React__default["default"].createElement(blocks.Hspace, {
+    }, `Read ${(runboxStats.block.rxBytes / 1024 / 1024).toFixed(0)}M Write ${(runboxStats.block.txBytes / 1024 / 1024).toFixed(0)}M`), React.createElement(blocks.Hspace, {
       width: 1
-    }), React__default["default"].createElement(blocks.Text, {
+    }), React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray7",
       bold: true
-    }, "NET:\xA0"), React__default["default"].createElement(blocks.Text, {
+    }, "NET:\u00A0"), React.createElement(blocks.Text, {
       size: "tiny",
       lineHeight: 1.5,
       role: "gray5"
-    }, "\u2193".concat((runboxStats.network.rxBytes / 1024 / 1024).toFixed(0), "M \u2191").concat((runboxStats.network.txBytes / 1024 / 1024).toFixed(0), "M")), React__default["default"].createElement(blocks.Hspace, {
+    }, `↓${(runboxStats.network.rxBytes / 1024 / 1024).toFixed(0)}M ↑${(runboxStats.network.txBytes / 1024 / 1024).toFixed(0)}M`), React.createElement(blocks.Hspace, {
       width: 1
     }))) : null;
-    return React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxHeader, null, runboxStatsInfo, React__default["default"].createElement(blocks.Flex, {
+    return React.createElement(MaterialRunboxLegacyContent_styled.RunboxHeader, null, runboxStatsInfo, React.createElement(blocks.Flex, {
       align: "center"
-    }, React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxStatusLight, {
+    }, React.createElement(MaterialRunboxLegacyContent_styled.RunboxStatusLight, {
       status: runboxStatus
-    }), React__default["default"].createElement(blocks.Hspace, {
+    }), React.createElement(blocks.Hspace, {
       width: 0.5
-    }), React__default["default"].createElement(blocks.Text, {
+    }), React.createElement(blocks.Text, {
       size: "small"
-    }, renderRunboxStatusMessage())), React__default["default"].createElement(blocks.Hspace, {
+    }, renderRunboxStatusMessage())), React.createElement(blocks.Hspace, {
       width: 1
-    }), React__default["default"].createElement(blocks.IconButton, {
+    }), React.createElement(blocks.IconButton, {
       icon: icons.eilShare,
       role: "greyfb",
       size: "small",
       border: true,
       disabled: isRunboxPreparing,
       onClick: handleShare
-    }), React__default["default"].createElement(blocks.Hspace, {
+    }), React.createElement(blocks.Hspace, {
       width: 0.5
-    }), React__default["default"].createElement(blocks.Tooltip, {
+    }), React.createElement(blocks.Tooltip, {
       title: isRunboxPreparing ? intl.formatMessage({
         id: 'runboxLegacy.reloadButton.tooltip'
       }) : undefined
-    }, React__default["default"].createElement("span", null, React__default["default"].createElement(blocks.IconButton, {
+    }, React.createElement("span", null, React.createElement(blocks.IconButton, {
       icon: icons.eilReset,
       iconSpin: isRunboxPreparing,
       role: "greyfb",
@@ -257,55 +224,53 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   /**
    * Body of runbox.
    */
-  var renderRunboxBody = function renderRunboxBody() {
+  const renderRunboxBody = () => {
     if (runboxStatus === exports.MaterialRunboxLegacyStatus.Terminated) {
-      return React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, null, React__default["default"].createElement(blocks.Box, null, React__default["default"].createElement(blocks.Text, {
+      return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, null, React.createElement(blocks.Box, null, React.createElement(blocks.Text, {
         size: "small",
         preWrap: true,
         lineHeight: 1.5,
         textAlign: "center"
-      }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      }, React.createElement(reactIntl.FormattedMessage, {
         id: "runboxLegacy.overlay.message.terminated"
       })))));
     }
     if (runboxStatus === exports.MaterialRunboxLegacyStatus.Error) {
-      return React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, null, React__default["default"].createElement(blocks.Box, null, React__default["default"].createElement(blocks.Text, {
+      return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, null, React.createElement(blocks.Box, null, React.createElement(blocks.Text, {
         size: "small",
         preWrap: true,
         lineHeight: 1.5,
         textAlign: "center"
-      }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      }, React.createElement(reactIntl.FormattedMessage, {
         id: "runboxLegacy.overlay.message.error"
       })))));
     }
-    return React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
+    return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
       "aria-hidden": !isRunboxPreparing
-    }, React__default["default"].createElement(blocks.Box, null, React__default["default"].createElement(blocks.Spinner, null), React__default["default"].createElement(blocks.Vspace, {
+    }, React.createElement(blocks.Box, null, React.createElement(blocks.Spinner, null), React.createElement(blocks.Vspace, {
       height: 1
-    }), React__default["default"].createElement(blocks.Text, {
+    }), React.createElement(blocks.Text, {
       size: "small",
       preWrap: true,
       lineHeight: 1.5,
       textAlign: "center"
-    }, runboxStatus === exports.MaterialRunboxLegacyStatus.Disconnected ? React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, runboxStatus === exports.MaterialRunboxLegacyStatus.Disconnected ? React.createElement(reactIntl.FormattedMessage, {
       id: "runboxLegacy.overlay.message.disconnected"
-    }) : React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }) : React.createElement(reactIntl.FormattedMessage, {
       id: "runboxLegacy.overlay.message.connecting"
-    })))), runboxUrl ? React__default["default"].createElement(MaterialRunboxLegacyContent_styled.RunboxBodyIframe, {
+    })))), runboxUrl ? React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyIframe, {
       src: runboxUrl + '/?folder=/mnt/elice/workspace',
       title: "material-runbox-legacy",
-      onLoad: function onLoad() {
-        return setRunboxUrlLoaded(true);
-      },
+      onLoad: () => setRunboxUrlLoaded(true),
       allow: "clipboard-read; clipboard-write; camera *; microphone *"
     }) : null);
   };
   //
   //
   //
-  return React__default["default"].createElement(React__default["default"].Fragment, null, renderRunboxHeader(), React__default["default"].createElement(blocks.Vspace, {
+  return React.createElement(React.Fragment, null, renderRunboxHeader(), React.createElement(blocks.Vspace, {
     height: 0.5
   }), renderRunboxBody());
 };
 
-exports["default"] = MaterialRunboxLegacyContent;
+exports.default = MaterialRunboxLegacyContent;

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacyContent.styled.js

@@ -1,30 +1,24 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var MaterialRunboxLegacyContent = require('./MaterialRunboxLegacyContent.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var RunboxHeader = styled__default["default"].div.withConfig({
+const RunboxHeader = styled.div.withConfig({
   componentId: "sc-18a3wux-0"
 })(["flex:0 0 2.5rem;display:flex;justify-content:flex-end;align-items:center;padding:0 0.5rem;"]);
-var RunboxBody = styled__default["default"].div.withConfig({
+const RunboxBody = styled.div.withConfig({
   componentId: "sc-18a3wux-1"
 })(["position:relative;flex:1;"]);
-var RunboxBodyOverlay = styled__default["default"].div.withConfig({
+const RunboxBodyOverlay = styled.div.withConfig({
   componentId: "sc-18a3wux-2"
 })(["position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;flex:1;width:100%;height:100%;background:rgba(255,255,255,0.8);&[aria-hidden='true']{display:none;}"]);
-var RunboxBodyIframe = styled__default["default"].iframe.withConfig({
+const RunboxBodyIframe = styled.iframe.withConfig({
   componentId: "sc-18a3wux-3"
 })(["width:100%;height:100%;border:none;"]);
-var RunboxStatusLight = styled__default["default"].span.withConfig({
+const RunboxStatusLight = styled.span.withConfig({
   componentId: "sc-18a3wux-4"
-})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], function (props) {
+})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], props => {
   switch (props.status) {
     case MaterialRunboxLegacyContent.MaterialRunboxLegacyStatus.Loading:
     case MaterialRunboxLegacyContent.MaterialRunboxLegacyStatus.Connecting:

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacyRunnerRoomWrapper.js

@@ -2,101 +2,66 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var MaterialRunboxLegacyStdioWrapper = require('./MaterialRunboxLegacyStdioWrapper.js');
 var websocket = require('./websocket.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var MaterialRunboxLegacyRunnerRoomWrapper = function MaterialRunboxLegacyRunnerRoomWrapper(_ref) {
-  var materialRunboxId = _ref.materialRunboxId;
-  var _useMaterialConfig = materialSharedUtils.useMaterialConfig(),
-    apiWsOriginUrl = _useMaterialConfig.apiWsOriginUrl;
-  var abortCtrlRef = React__default["default"].useRef(new AbortController());
-  var _React$useState = React__default["default"].useState(),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    runboxRunningId = _React$useState2[0],
-    setRunboxRunningId = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isRunboxJoinError = _React$useState4[0],
-    setRunboxJoinError = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState(false),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    isRunboxRunningCanceling = _React$useState6[0],
-    setRunboxRunningCanceling = _React$useState6[1];
+const MaterialRunboxLegacyRunnerRoomWrapper = ({
+  materialRunboxId
+}) => {
+  const {
+    apiWsOriginUrl
+  } = materialSharedUtils.useMaterialConfig();
+  const abortCtrlRef = React.useRef(new AbortController());
+  const [runboxRunningId, setRunboxRunningId] = React.useState();
+  const [isRunboxJoinError, setRunboxJoinError] = React.useState(false);
+  const [isRunboxRunningCanceling, setRunboxRunningCanceling] = React.useState(false);
   /**
    * Resolve runner room token.
    */
-  var resolveRunnerRoomToken = React__default["default"].useCallback( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          setRunboxJoinError(false);
-          abortCtrlRef.current.abort();
-          abortCtrlRef.current = new AbortController();
-          return _context.abrupt("return", apiClient.postOrgRunnerRoomMaterialRunboxJoin({
-            materialRunboxId: materialRunboxId
-          }, {
-            signal: abortCtrlRef.current.signal
-          }).then(function (res) {
-            setRunboxJoinError(false);
-            setRunboxRunningId(res.runboxRunningId);
-            return res.roomToken;
-          }).catch(function (err) {
-            setRunboxJoinError(true);
-            throw err;
-          }));
-        case 4:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [materialRunboxId]);
+  const resolveRunnerRoomToken = React.useCallback(async () => {
+    setRunboxJoinError(false);
+    abortCtrlRef.current.abort();
+    abortCtrlRef.current = new AbortController();
+    return apiClient.postOrgRunnerRoomMaterialRunboxJoin({
+      materialRunboxId
+    }, {
+      signal: abortCtrlRef.current.signal
+    }).then(res => {
+      setRunboxJoinError(false);
+      setRunboxRunningId(res.runboxRunningId);
+      return res.roomToken;
+    }).catch(err => {
+      setRunboxJoinError(true);
+      throw err;
+    });
+  }, [materialRunboxId]);
   /**
    * Reconnect runbox.
    */
-  var reconnectRunnerRoomWebSocket = React__default["default"].useCallback( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          if (runboxRunningId) {
-            _context2.next = 2;
-            break;
-          }
-          return _context2.abrupt("return");
-        case 2:
-          setRunboxRunningCanceling(true);
-          return _context2.abrupt("return", apiClient.postOrgMaterialRunboxRunboxRunningCancel({
-            runboxRunningId: runboxRunningId
-          }).then(function () {
-            return setRunboxRunningCanceling(false);
-          }).catch(function () {
-            return setRunboxRunningCanceling(false);
-          }));
-        case 4:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })), [runboxRunningId]);
+  const reconnectRunnerRoomWebSocket = React.useCallback(async () => {
+    if (!runboxRunningId) {
+      return;
+    }
+    setRunboxRunningCanceling(true);
+    return apiClient.postOrgMaterialRunboxRunboxRunningCancel({
+      runboxRunningId
+    }).then(() => setRunboxRunningCanceling(false)).catch(() => setRunboxRunningCanceling(false));
+  }, [runboxRunningId]);
   //
   //
   //
-  return React__default["default"].createElement(websocket.WSMaterialRunboxLegacyRunnerRoom.Provider, {
+  return React.createElement(websocket.WSMaterialRunboxLegacyRunnerRoom.Provider, {
     enable: !isRunboxRunningCanceling,
-    endpoint: "".concat(apiWsOriginUrl, "/runner_room"),
+    endpoint: `${apiWsOriginUrl}/runner_room`,
     tokenProvider: resolveRunnerRoomToken,
     connectionTimeout: 8000
-  }, React__default["default"].createElement(MaterialRunboxLegacyStdioWrapper["default"], {
+  }, React.createElement(MaterialRunboxLegacyStdioWrapper.default, {
     isRunboxJoinError: isRunboxJoinError,
     reconnectRunnerRoomWebSocket: reconnectRunnerRoomWebSocket
   }));
 };
 
-exports["default"] = MaterialRunboxLegacyRunnerRoomWrapper;
+exports.default = MaterialRunboxLegacyRunnerRoomWrapper;