@elice/material-runbox-legacy 1.240718.0-trasncript.1 → 1.240718.0-trasncript.2

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacyContent.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');
@@ -10,7 +12,10 @@ var intl = require('@elice/intl');
 var websocket = require('./websocket.js');
 var MaterialRunboxLegacyContent_styled = require('./MaterialRunboxLegacyContent.styled.js');
 
-/* eslint-disable @typescript-eslint/naming-convention */
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 exports.MaterialRunboxLegacyStatus = void 0;
 (function (MaterialRunboxLegacyStatus) {
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Idle"] = 0] = "Idle";
@@ -21,47 +26,74 @@ exports.MaterialRunboxLegacyStatus = void 0;
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Terminated"] = 5] = "Terminated";
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Error"] = 6] = "Error";
 })(exports.MaterialRunboxLegacyStatus || (exports.MaterialRunboxLegacyStatus = {}));
-const MaterialRunboxLegacyContent = ({
-  runboxUrl,
-  isRunboxTerminated,
-  isRunboxJoinError,
-  reconnect
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
-  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 => {
+var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
+  var runboxUrl = _ref.runboxUrl,
+    isRunboxTerminated = _ref.isRunboxTerminated,
+    isRunboxJoinError = _ref.isRunboxJoinError,
+    reconnect = _ref.reconnect;
+  var intl$1 = intl.useRawEliceIntl();
+  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) {
     if (message.type === 'stats') {
       setRunboxStats(message.data);
     }
-  }, {
-    camelize: true
   });
-  const handleReconnect = () => {
+  var handleReconnect = function handleReconnect() {
     setRunboxStats(null);
     setRunboxUrlLoaded(false);
     reconnect();
   };
-  const handleShare = async () => {
-    if (!runboxUrl) {
-      return;
-    }
-    try {
-      await navigator.clipboard.writeText(runboxUrl);
-      blocks.Notification.success(intl$1.formatMessage({
-        id: 'runboxLegacy.share.success'
-      }));
-    } catch (e) {
-      alert(runboxUrl);
-    }
-  };
+  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$1.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);
+    };
+  }();
   //
   // Change `isRunboxUrlLoaded` flag to false, when runbox url removed.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!runboxUrl) {
       setRunboxUrlLoaded(false);
     }
@@ -69,8 +101,8 @@ const MaterialRunboxLegacyContent = ({
   //
   // Determine runbox status.
   //
-  React.useEffect(() => {
-    setRunboxStatus((() => {
+  React__default.default.useEffect(function () {
+    setRunboxStatus(function () {
       switch (true) {
         case isRunboxJoinError:
           return exports.MaterialRunboxLegacyStatus.Error;
@@ -87,12 +119,12 @@ const MaterialRunboxLegacyContent = ({
         default:
           return exports.MaterialRunboxLegacyStatus.Idle;
       }
-    })());
+    }());
   }, [isRunboxJoinError, isRunboxTerminated, isRunboxUrlLoaded, isRunboxUrlLoadedPrev, runboxUrl]);
   /**
    * Runbox status message shown at header.
    */
-  const renderRunboxStatusMessage = () => {
+  var renderRunboxStatusMessage = function renderRunboxStatusMessage() {
     switch (runboxStatus) {
       case exports.MaterialRunboxLegacyStatus.Idle:
         return intl$1.formatMessage({
@@ -123,154 +155,201 @@ const MaterialRunboxLegacyContent = ({
   /**
    * Header of runbox.
    */
-  const renderRunboxHeader = () => {
-    const runboxStatsInfo = runboxStats ? React.createElement(blocks.LaptopOrLarger, null, React.createElement(blocks.Flex, null, React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "CPU:\u00A0"), React.createElement(blocks.Flex, {
-      align: "center",
-      width: "30px"
-    }, React.createElement(blocks.AntProgress, {
-      type: "line",
-      percent: runboxStats.cpu.percent,
-      status: 'active',
-      showInfo: false
-    })), React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, "\u00A0", `${runboxStats.cpu.percent.toFixed(0)}%`)), React.createElement(blocks.Hspace, {
-      width: 1
-    }), React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "MEM:\u00A0"), React.createElement(blocks.Flex, {
-      align: "center",
-      width: "30px"
-    }, React.createElement(blocks.AntProgress, {
-      percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
-      status: 'active',
-      showInfo: false
-    })), React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, "\u00A0", `${(runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0)}M / ${(runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0)}M`)), React.createElement(blocks.Hspace, {
-      width: 1
-    }), React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "DISK:\u00A0"), React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, `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.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "NET:\u00A0"), React.createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, `↓${(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.createElement(MaterialRunboxLegacyContent_styled.RunboxHeader, null, runboxStatsInfo, React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(MaterialRunboxLegacyContent_styled.RunboxStatusLight, {
-      status: runboxStatus
-    }), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(blocks.Text, {
-      size: "small"
-    }, renderRunboxStatusMessage())), React.createElement(blocks.Hspace, {
-      width: 1
-    }), React.createElement(blocks.IconButton, {
-      icon: icons.eilShare,
-      role: "greyfb",
-      size: "small",
-      border: true,
-      disabled: isRunboxPreparing,
-      onClick: handleShare
-    }), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(blocks.Tooltip, {
-      title: isRunboxPreparing ? intl$1.formatMessage({
-        id: 'runboxLegacy.reloadButton.tooltip'
-      }) : undefined
-    }, React.createElement("span", null, React.createElement(blocks.IconButton, {
-      icon: icons.eilReset,
-      iconSpin: isRunboxPreparing,
-      role: "greyfb",
-      size: "small",
-      border: true,
-      disabled: isRunboxPreparing,
-      onClick: handleReconnect
-    }))));
+  var renderRunboxHeader = function renderRunboxHeader() {
+    var runboxStatsInfo = runboxStats ? jsxRuntime.jsx(blocks.LaptopOrLarger, {
+      children: jsxRuntime.jsxs(blocks.Flex, {
+        children: [jsxRuntime.jsxs(blocks.Flex, {
+          align: "center",
+          children: [jsxRuntime.jsx(blocks.Text, {
+            size: "tiny",
+            lineHeight: 1.5,
+            role: "gray7",
+            bold: true,
+            children: "CPU:\xA0"
+          }), jsxRuntime.jsx(blocks.Flex, {
+            align: "center",
+            width: "30px",
+            children: jsxRuntime.jsx(blocks.AntProgress, {
+              type: "line",
+              percent: runboxStats.cpu.percent,
+              status: 'active',
+              showInfo: false
+            })
+          }), jsxRuntime.jsxs(blocks.Text, {
+            size: "tiny",
+            lineHeight: 1.5,
+            role: "gray5",
+            children: ["\xA0", "".concat(runboxStats.cpu.percent.toFixed(0), "%")]
+          })]
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 1
+        }), jsxRuntime.jsxs(blocks.Flex, {
+          align: "center",
+          children: [jsxRuntime.jsx(blocks.Text, {
+            size: "tiny",
+            lineHeight: 1.5,
+            role: "gray7",
+            bold: true,
+            children: "MEM:\xA0"
+          }), jsxRuntime.jsx(blocks.Flex, {
+            align: "center",
+            width: "30px",
+            children: jsxRuntime.jsx(blocks.AntProgress, {
+              percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
+              status: 'active',
+              showInfo: false
+            })
+          }), jsxRuntime.jsxs(blocks.Text, {
+            size: "tiny",
+            lineHeight: 1.5,
+            role: "gray5",
+            children: ["\xA0", "".concat((runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0), "M / ").concat((runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0), "M")]
+          })]
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 1
+        }), jsxRuntime.jsx(blocks.Text, {
+          size: "tiny",
+          lineHeight: 1.5,
+          role: "gray7",
+          bold: true,
+          children: "DISK:\xA0"
+        }), jsxRuntime.jsx(blocks.Text, {
+          size: "tiny",
+          lineHeight: 1.5,
+          role: "gray5",
+          children: "Read ".concat((runboxStats.block.rxBytes / 1024 / 1024).toFixed(0), "M Write ").concat((runboxStats.block.txBytes / 1024 / 1024).toFixed(0), "M")
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 1
+        }), jsxRuntime.jsx(blocks.Text, {
+          size: "tiny",
+          lineHeight: 1.5,
+          role: "gray7",
+          bold: true,
+          children: "NET:\xA0"
+        }), jsxRuntime.jsx(blocks.Text, {
+          size: "tiny",
+          lineHeight: 1.5,
+          role: "gray5",
+          children: "\u2193".concat((runboxStats.network.rxBytes / 1024 / 1024).toFixed(0), "M \u2191").concat((runboxStats.network.txBytes / 1024 / 1024).toFixed(0), "M")
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 1
+        })]
+      })
+    }) : null;
+    return jsxRuntime.jsxs(MaterialRunboxLegacyContent_styled.RunboxHeader, {
+      children: [runboxStatsInfo, jsxRuntime.jsxs(blocks.Flex, {
+        align: "center",
+        children: [jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxStatusLight, {
+          status: runboxStatus
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.5
+        }), jsxRuntime.jsx(blocks.Text, {
+          size: "small",
+          children: renderRunboxStatusMessage()
+        })]
+      }), jsxRuntime.jsx(blocks.Hspace, {
+        width: 1
+      }), jsxRuntime.jsx(blocks.IconButton, {
+        icon: icons.eilShare,
+        role: "greyfb",
+        size: "small",
+        border: true,
+        disabled: isRunboxPreparing,
+        onClick: handleShare
+      }), jsxRuntime.jsx(blocks.Hspace, {
+        width: 0.5
+      }), jsxRuntime.jsx(blocks.Tooltip, {
+        title: isRunboxPreparing ? intl$1.formatMessage({
+          id: 'runboxLegacy.reloadButton.tooltip'
+        }) : undefined,
+        children: jsxRuntime.jsx("span", {
+          children: jsxRuntime.jsx(blocks.IconButton, {
+            icon: icons.eilReset,
+            iconSpin: isRunboxPreparing,
+            role: "greyfb",
+            size: "small",
+            border: true,
+            disabled: isRunboxPreparing,
+            onClick: handleReconnect
+          })
+        })
+      })]
+    });
   };
   /**
    * Body of runbox.
    */
-  const renderRunboxBody = () => {
+  var renderRunboxBody = function renderRunboxBody() {
     if (runboxStatus === exports.MaterialRunboxLegacyStatus.Terminated) {
-      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"
-      }, intl$1.formatMessage({
-        id: 'runboxLegacy.overlay.message.terminated'
-      })))));
+      return jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBody, {
+        children: jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
+          children: jsxRuntime.jsx(blocks.Box, {
+            children: jsxRuntime.jsx(blocks.Text, {
+              size: "small",
+              preWrap: true,
+              lineHeight: 1.5,
+              textAlign: "center",
+              children: intl$1.formatMessage({
+                id: 'runboxLegacy.overlay.message.terminated'
+              })
+            })
+          })
+        })
+      });
     }
     if (runboxStatus === exports.MaterialRunboxLegacyStatus.Error) {
-      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"
-      }, intl$1.formatMessage({
-        id: 'runboxLegacy.overlay.message.error'
-      })))));
+      return jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBody, {
+        children: jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
+          children: jsxRuntime.jsx(blocks.Box, {
+            children: jsxRuntime.jsx(blocks.Text, {
+              size: "small",
+              preWrap: true,
+              lineHeight: 1.5,
+              textAlign: "center",
+              children: intl$1.formatMessage({
+                id: 'runboxLegacy.overlay.message.error'
+              })
+            })
+          })
+        })
+      });
     }
-    return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
-      "aria-hidden": !isRunboxPreparing
-    }, React.createElement(blocks.Box, null, React.createElement(blocks.Spinner, null), React.createElement(blocks.Vspace, {
-      height: 1
-    }), React.createElement(blocks.Text, {
-      size: "small",
-      preWrap: true,
-      lineHeight: 1.5,
-      textAlign: "center"
-    }, runboxStatus === exports.MaterialRunboxLegacyStatus.Disconnected ? intl$1.formatMessage({
-      id: 'runboxLegacy.overlay.message.disconnected'
-    }) : intl$1.formatMessage({
-      id: 'runboxLegacy.overlay.message.connecting'
-    })))), runboxUrl ? React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyIframe, {
-      src: runboxUrl + '/?folder=/mnt/elice/workspace',
-      title: "material-runbox-legacy",
-      onLoad: () => setRunboxUrlLoaded(true),
-      allow: "clipboard-read; clipboard-write; camera *; microphone *"
-    }) : null);
+    return jsxRuntime.jsxs(MaterialRunboxLegacyContent_styled.RunboxBody, {
+      children: [jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
+        "aria-hidden": !isRunboxPreparing,
+        children: jsxRuntime.jsxs(blocks.Box, {
+          children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Vspace, {
+            height: 1
+          }), jsxRuntime.jsx(blocks.Text, {
+            size: "small",
+            preWrap: true,
+            lineHeight: 1.5,
+            textAlign: "center",
+            children: runboxStatus === exports.MaterialRunboxLegacyStatus.Disconnected ? intl$1.formatMessage({
+              id: 'runboxLegacy.overlay.message.disconnected'
+            }) : intl$1.formatMessage({
+              id: 'runboxLegacy.overlay.message.connecting'
+            })
+          })]
+        })
+      }), runboxUrl ? jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyIframe, {
+        src: runboxUrl + '/?folder=/mnt/elice/workspace',
+        title: "material-runbox-legacy",
+        onLoad: function onLoad() {
+          return setRunboxUrlLoaded(true);
+        },
+        allow: "clipboard-read; clipboard-write; camera *; microphone *"
+      }) : null]
+    });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderRunboxHeader(), React.createElement(blocks.Vspace, {
-    height: 0.5
-  }), renderRunboxBody());
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderRunboxHeader(), jsxRuntime.jsx(blocks.Vspace, {
+      height: 0.5
+    }), renderRunboxBody()]
+  });
 };
 
 exports.default = MaterialRunboxLegacyContent;

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

@@ -4,21 +4,25 @@ var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var MaterialRunboxLegacyContent = require('./MaterialRunboxLegacyContent.js');
 
-const RunboxHeader = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var RunboxHeader = styled__default.default.div.withConfig({
   componentId: "sc-18a3wux-0"
 })(["flex:0 0 2.5rem;display:flex;justify-content:flex-end;align-items:center;padding:0 0.5rem;"]);
-const RunboxBody = styled.div.withConfig({
+var RunboxBody = styled__default.default.div.withConfig({
   componentId: "sc-18a3wux-1"
 })(["position:relative;flex:1;"]);
-const RunboxBodyOverlay = styled.div.withConfig({
+var RunboxBodyOverlay = styled__default.default.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;}"]);
-const RunboxBodyIframe = styled.iframe.withConfig({
+var RunboxBodyIframe = styled__default.default.iframe.withConfig({
   componentId: "sc-18a3wux-3"
 })(["width:100%;height:100%;border:none;"]);
-const RunboxStatusLight = styled.span.withConfig({
+var RunboxStatusLight = styled__default.default.span.withConfig({
   componentId: "sc-18a3wux-4"
-})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], props => {
+})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], function (props) {
   switch (props.status) {
     case MaterialRunboxLegacyContent.MaterialRunboxLegacyStatus.Loading:
     case MaterialRunboxLegacyContent.MaterialRunboxLegacyStatus.Connecting: