@elice/material-runbox 1.240718.3 → 1.240719.0

package/es/components/material-runbox/MaterialRunboxContent.js

@@ -1,5 +1,6 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import _styled from '@emotion/styled/base';
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Spinner } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { EliceRunboxProvider } from '@elice/runbox-client';
@@ -17,11 +18,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 //
 //
 //
-const DEFAULT_DATA = [null, null, null];
+var DEFAULT_DATA = [null, null, null];
 //
 //
 //
-const StyledRunboxContainer = /*#__PURE__*/_styled("div", {
+var StyledRunboxContainer = /*#__PURE__*/_styled("div", {
   target: "eeh98mq0"
 })("production" === "production" ? {
   name: "t5t5sq",
@@ -34,122 +35,146 @@ const StyledRunboxContainer = /*#__PURE__*/_styled("div", {
 //
 //
 //
-const MaterialRunboxContent = ({
-  runboxId,
-  courseId
-}) => {
-  const intl = useRawEliceIntl();
-  const {
-    showMessenger
-  } = useMaterialRunboxContext();
-  const materialRunboxApi = useMaterialRunboxApiContext();
+var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
+  var runboxId = _ref.runboxId,
+    courseId = _ref.courseId;
+  var intl = useRawEliceIntl();
+  var _useMaterialRunboxCon = useMaterialRunboxContext(),
+    showMessenger = _useMaterialRunboxCon.showMessenger;
+  var materialRunboxApi = useMaterialRunboxApiContext();
   //
   //
   //
-  const {
-    data: [runbox, runtime, runtimeTemplate] = DEFAULT_DATA,
-    isInitialLoading,
-    isError,
-    refetch
-  } = useQuery({
-    enabled: Boolean(runboxId),
-    queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdGet', 'eliceMaterialRunboxRuntimeTemplateApi.runtimeTemplateRuntimeTemplateIdGet', runboxId, courseId],
-    queryFn: ({
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdGet({
-      runboxId: runboxId,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }).then(runbox => Promise.all([
-    // runbox
-    runbox,
-    // runtime
-    materialRunboxApi.runtime.runtimeGet({
-      filterImageId: runbox.imageId,
-      filterRuntimeTemplateId: runbox.runtimeTemplateId,
-      skip: 0,
-      count: 1,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }).then(runtimes => {
-      var _a;
-      return (_a = runtimes[0]) !== null && _a !== void 0 ? _a : null;
+  var _useQuery = useQuery({
+      enabled: Boolean(runboxId),
+      queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdGet', 'eliceMaterialRunboxRuntimeTemplateApi.runtimeTemplateRuntimeTemplateIdGet', runboxId, courseId],
+      queryFn: function queryFn(_ref2) {
+        var signal = _ref2.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdGet({
+          runboxId: runboxId,
+          eliceCourseId: courseId
+        }, {
+          signal: signal
+        }).then(function (runbox) {
+          return Promise.all([
+          // runbox
+          runbox,
+          // runtime
+          materialRunboxApi.runtime.runtimeGet({
+            filterImageId: runbox.imageId,
+            filterRuntimeTemplateId: runbox.runtimeTemplateId,
+            skip: 0,
+            count: 1,
+            eliceCourseId: courseId
+          }, {
+            signal: signal
+          }).then(function (runtimes) {
+            var _a;
+            return (_a = runtimes[0]) !== null && _a !== void 0 ? _a : null;
+          }),
+          // runtimeTemplate
+          materialRunboxApi.runtimeTemplate.runtimeTemplateRuntimeTemplateIdGet({
+            runtimeTemplateId: runbox.runtimeTemplateId,
+            eliceCourseId: courseId
+          }, {
+            signal: signal
+          })]);
+        });
+      },
+      cacheTime: 0,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
     }),
-    // runtimeTemplate
-    materialRunboxApi.runtimeTemplate.runtimeTemplateRuntimeTemplateIdGet({
-      runtimeTemplateId: runbox.runtimeTemplateId,
-      eliceCourseId: courseId
-    }, {
-      signal
-    })])),
-    cacheTime: 0,
-    keepPreviousData: true,
-    refetchOnWindowFocus: false
-  });
+    _useQuery$data = _useQuery.data,
+    _useQuery$data2 = _useQuery$data === void 0 ? DEFAULT_DATA : _useQuery$data,
+    _useQuery$data3 = _slicedToArray(_useQuery$data2, 3),
+    runbox = _useQuery$data3[0],
+    runtime = _useQuery$data3[1],
+    runtimeTemplate = _useQuery$data3[2],
+    isInitialLoading = _useQuery.isInitialLoading,
+    isError = _useQuery.isError,
+    refetch = _useQuery.refetch;
   //
   //
   //
   if (isInitialLoading) {
-    return React.createElement(StyledRunboxContainer, null, React.createElement(Spinner, null));
+    return jsx(StyledRunboxContainer, {
+      children: jsx(Spinner, {})
+    });
   }
   if (isError) {
-    return React.createElement(StyledRunboxContainer, null, React.createElement(Stack, {
-      gap: "1.5rem"
-    }, React.createElement(Typography, {
-      variant: "h6"
-    }, intl.formatMessage({
-      id: 'runbox.runtime.message.startError'
-    })), React.createElement(Stack, {
-      gap: "0.5rem"
-    }, React.createElement(Button, {
-      startIcon: React.createElement(Refresh, null),
-      onClick: () => refetch()
-    }, intl.formatMessage({
-      id: 'runbox.common.retry'
-    })), typeof showMessenger === 'function' ? React.createElement(Button, {
-      variant: "outlined",
-      onClick: () => showMessenger()
-    }, intl.formatMessage({
-      id: 'runbox.common.support'
-    })) : null)));
+    return jsx(StyledRunboxContainer, {
+      children: jsxs(Stack, {
+        gap: "1.5rem",
+        children: [jsx(Typography, {
+          variant: "h6",
+          children: intl.formatMessage({
+            id: 'runbox.runtime.message.startError'
+          })
+        }), jsxs(Stack, {
+          gap: "0.5rem",
+          children: [jsx(Button, {
+            startIcon: jsx(Refresh, {}),
+            onClick: function onClick() {
+              return refetch();
+            },
+            children: intl.formatMessage({
+              id: 'runbox.common.retry'
+            })
+          }), typeof showMessenger === 'function' ? jsx(Button, {
+            variant: "outlined",
+            onClick: function onClick() {
+              return showMessenger();
+            },
+            children: intl.formatMessage({
+              id: 'runbox.common.support'
+            })
+          }) : null]
+        })]
+      })
+    });
   }
   if (!runbox || !runtimeTemplate) {
     return null;
   }
-  const props = {
-    runbox,
-    runtime,
-    runtimeTemplate,
-    courseId,
-    refetch
+  var props = {
+    runbox: runbox,
+    runtime: runtime,
+    runtimeTemplate: runtimeTemplate,
+    courseId: courseId,
+    refetch: refetch
   };
-  return React.createElement(MaterialRunboxCommandContextProvider, {
+  return jsx(MaterialRunboxCommandContextProvider, {
     runtime: runtime,
-    courseId: courseId
-  }, React.createElement(EliceRunboxProvider, {
-    runboxId: runbox.id,
-    runboxApiHeartbeat: ({
-      id,
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdHeartbeatPost({
-      runboxId: id,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }),
-    runboxApiQuota: ({
-      id,
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdQuotaGet({
-      runboxId: id,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }),
-    onRunboxRefetchRequest: refetch
-  }, React.createElement(StyledRunboxContainer, null, React.createElement(MaterialRunboxHeader, Object.assign({}, props)), React.createElement(MaterialRunboxBody, Object.assign({}, props)), React.createElement(MaterialRunboxFooter, Object.assign({}, props)))));
+    courseId: courseId,
+    children: jsx(EliceRunboxProvider, {
+      runboxId: runbox.id,
+      runboxApiHeartbeat: function runboxApiHeartbeat(_ref3) {
+        var id = _ref3.id,
+          signal = _ref3.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdHeartbeatPost({
+          runboxId: id,
+          eliceCourseId: courseId
+        }, {
+          signal: signal
+        });
+      },
+      runboxApiQuota: function runboxApiQuota(_ref4) {
+        var id = _ref4.id,
+          signal = _ref4.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdQuotaGet({
+          runboxId: id,
+          eliceCourseId: courseId
+        }, {
+          signal: signal
+        });
+      },
+      onRunboxRefetchRequest: refetch,
+      children: jsxs(StyledRunboxContainer, {
+        children: [jsx(MaterialRunboxHeader, Object.assign({}, props)), jsx(MaterialRunboxBody, Object.assign({}, props)), jsx(MaterialRunboxFooter, Object.assign({}, props))]
+      })
+    })
+  });
 };
 
 export { MaterialRunboxContent as default };

package/es/components/material-runbox/MaterialRunboxFooter.js

@@ -1,48 +1,53 @@
 import _styled from '@emotion/styled/base';
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { EliceRunboxResourceStat, EliceRunboxRemainingTimer, EliceRunboxNetworkStat, EliceRunboxRunningStatus } from '@elice/runbox-client';
 import { Box, Stack, Divider } from '@mui/material';
 
 //
 //
 //
-const StyledFooter = /*#__PURE__*/_styled("div", {
+var StyledFooter = /*#__PURE__*/_styled("div", {
   target: "e9lbhtr0"
-})("position:relative;flex:0 0 2rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-top:1px solid ", ({
-  theme
-}) => theme.palette.divider, ";");
+})("position:relative;flex:0 0 2rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-top:1px solid ", function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.divider;
+}, ";");
 //
 //
 //
-const MaterialRunboxFooter = ({
-  runtimeTemplate
-}) => {
+var MaterialRunboxFooter = function MaterialRunboxFooter(_ref2) {
+  var runtimeTemplate = _ref2.runtimeTemplate;
   /**
    * Resource stats
    */
-  const renderFooterResourceStats = () => {
+  var renderFooterResourceStats = function renderFooterResourceStats() {
     var _a, _b;
-    return React.createElement(Box, null, React.createElement(EliceRunboxResourceStat, {
-      gpu: ((_b = (_a = runtimeTemplate.gpus) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0
-    }));
+    return jsx(Box, {
+      children: jsx(EliceRunboxResourceStat, {
+        gpu: ((_b = (_a = runtimeTemplate.gpus) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0
+      })
+    });
   };
   /**
    * Status
    */
-  const renderFooterStatus = () => {
-    return React.createElement(Stack, {
+  var renderFooterStatus = function renderFooterStatus() {
+    return jsxs(Stack, {
       direction: "row",
       gap: "0.5rem",
-      divider: React.createElement(Divider, {
+      divider: jsx(Divider, {
         orientation: "vertical",
         flexItem: true
-      })
-    }, React.createElement(EliceRunboxRemainingTimer, null), React.createElement(EliceRunboxNetworkStat, null), React.createElement(EliceRunboxRunningStatus, null));
+      }),
+      children: [jsx(EliceRunboxRemainingTimer, {}), jsx(EliceRunboxNetworkStat, {}), jsx(EliceRunboxRunningStatus, {})]
+    });
   };
   //
   //
   //
-  return React.createElement(StyledFooter, null, renderFooterResourceStats(), renderFooterStatus());
+  return jsxs(StyledFooter, {
+    children: [renderFooterResourceStats(), renderFooterStatus()]
+  });
 };
 
 export { MaterialRunboxFooter as default };

package/es/components/material-runbox/MaterialRunboxHeader.js

@@ -1,4 +1,6 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import _styled from '@emotion/styled/base';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { useRawEliceIntl } from '@elice/intl';
 import { Tag, EliceIcon } from '@elice/mui-elements';
@@ -13,77 +15,80 @@ import MaterialRunboxActionMenu from './actions/MaterialRunboxActionMenu.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import './contexts/MaterialRunboxCommandContext.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
-import runboxLogoImage from '../../assets/runbox_logo.png.js';
+import img from '../../assets/runbox_logo.png.js';
 
-const StyledHeader = /*#__PURE__*/_styled("div", {
+var StyledHeader = /*#__PURE__*/_styled("div", {
   target: "e110d0bp0"
-})("position:relative;flex:0 0 3rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-bottom:1px solid ", ({
-  theme
-}) => theme.palette.divider, ";overflow:hidden;");
+})("position:relative;flex:0 0 3rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-bottom:1px solid ", function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.divider;
+}, ";overflow:hidden;");
 //
 //
 //
-const MaterialRunboxHeader = ({
-  runbox,
-  runtime,
-  runtimeTemplate,
-  courseId,
-  refetch
-}) => {
-  const intl = useRawEliceIntl();
-  const {
-    enableAutoShutdownToggle
-  } = useMaterialRunboxContext();
-  const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
-  const {
-    status
-  } = useEliceRunboxRunning();
-  const isRunboxRunning = status === 'running';
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
+  var runbox = _ref2.runbox,
+    runtime = _ref2.runtime,
+    runtimeTemplate = _ref2.runtimeTemplate,
+    courseId = _ref2.courseId,
+    refetch = _ref2.refetch;
+  var intl = useRawEliceIntl();
+  var _useMaterialRunboxCon = useMaterialRunboxContext(),
+    enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    menuAnchorEl = _React$useState2[0],
+    setMenuAnchorEl = _React$useState2[1];
+  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var isRunboxRunning = status === 'running';
   /**
    *
    */
-  const handleMenuClose = () => {
+  var handleMenuClose = function handleMenuClose() {
     setMenuAnchorEl(null);
   };
-  const materialRunboxApi = useMaterialRunboxApiContext();
-  const {
-    data: leaderboardSubmitInfo,
-    isLoading: isLeaderboardSubmitInfoLoading
-  } = useQuery({
-    queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
-      courseId,
-      runtime
-    }],
-    queryFn: ({
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
-      eliceCourseId: courseId,
-      runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
-    }, {
-      signal
+  var materialRunboxApi = useMaterialRunboxApiContext();
+  var _useQuery = useQuery({
+      queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
+        courseId: courseId,
+        runtime: runtime
+      }],
+      queryFn: function queryFn(_ref3) {
+        var signal = _ref3.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
+          eliceCourseId: courseId,
+          runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
+        }, {
+          signal: signal
+        });
+      },
+      refetchInterval: function refetchInterval(data) {
+        return !(data === null || data === void 0 ? void 0 : data.remainSubmitCount) ? false : 5 * 1000;
+      },
+      enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
+      retry: false
     }),
-    refetchInterval: data => !(data === null || data === void 0 ? void 0 : data.remainSubmitCount) ? false : 5 * 1000,
-    enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
-    retry: false
-  });
+    leaderboardSubmitInfo = _useQuery.data,
+    isLeaderboardSubmitInfoLoading = _useQuery.isLoading;
   /**
    *
    */
-  const renderHeaderSubmitInfo = () => {
-    const remainSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.remainSubmitCount;
-    const totalSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.submitCountLimit;
-    const isDailyLimitEnabled = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.dailyLimitEnabled;
-    const isIndividualTypeLeaderboard = (leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.entryType) === enums.LeaderboardEntryType.Individual;
+  var renderHeaderSubmitInfo = function renderHeaderSubmitInfo() {
+    var remainSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.remainSubmitCount;
+    var totalSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.submitCountLimit;
+    var isDailyLimitEnabled = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.dailyLimitEnabled;
+    var isIndividualTypeLeaderboard = (leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.entryType) === enums.LeaderboardEntryType.Individual;
     if (isLeaderboardSubmitInfoLoading || remainSubmitCount === null) {
       return null;
     }
-    return React.createElement(Tag, {
+    return jsx(Tag, {
       label: intl.formatMessage({
         id: 'runbox.header.submitInfo'
       }, {
         remainCount: remainSubmitCount,
         totalCount: totalSubmitCount,
-        isDailyLimitEnabled,
+        isDailyLimitEnabled: isDailyLimitEnabled,
         isIndividual: isIndividualTypeLeaderboard
       }),
       variant: "muted",
@@ -93,11 +98,11 @@ const MaterialRunboxHeader = ({
   /**
    *
    */
-  const renderHeaderActionAutoShutdown = () => {
+  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
     if (!enableAutoShutdownToggle) {
       return null;
     }
-    return React.createElement(MaterialRunboxActionAutoShutdown, {
+    return jsx(MaterialRunboxActionAutoShutdown, {
       runtime: runtime,
       runtimeTemplate: runtimeTemplate,
       courseId: courseId,
@@ -107,11 +112,11 @@ const MaterialRunboxHeader = ({
   /**
    *
    */
-  const renderHeaderActionGrade = () => {
+  var renderHeaderActionGrade = function renderHeaderActionGrade() {
     if (!runbox.submission.enabled) {
       return null;
     }
-    return React.createElement(MaterialRunboxActionGrade, {
+    return jsx(MaterialRunboxActionGrade, {
       runtime: runtime,
       courseId: courseId
     });
@@ -119,45 +124,51 @@ const MaterialRunboxHeader = ({
   /**
    *
    */
-  const renderOptionMenu = () => {
-    return React.createElement(React.Fragment, null, React.createElement(IconButton, {
-      disabled: !isRunboxRunning,
-      onClick: e => {
-        if (Boolean(menuAnchorEl)) {
-          setMenuAnchorEl(null);
-        } else {
-          setMenuAnchorEl(e.currentTarget);
-        }
-      }
-    }, React.createElement(EliceIcon, {
-      icon: faEllipsisVertical
-    })), React.createElement(MaterialRunboxActionMenu, {
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
-      menuAnchorEl: menuAnchorEl,
-      refetch: refetch,
-      handleMenuClose: handleMenuClose
-    }));
+  var renderOptionMenu = function renderOptionMenu() {
+    return jsxs(Fragment, {
+      children: [jsx(IconButton, {
+        disabled: !isRunboxRunning,
+        onClick: function onClick(e) {
+          if (Boolean(menuAnchorEl)) {
+            setMenuAnchorEl(null);
+          } else {
+            setMenuAnchorEl(e.currentTarget);
+          }
+        },
+        children: jsx(EliceIcon, {
+          icon: faEllipsisVertical
+        })
+      }), jsx(MaterialRunboxActionMenu, {
+        runbox: runbox,
+        runtime: runtime,
+        courseId: courseId,
+        menuAnchorEl: menuAnchorEl,
+        refetch: refetch,
+        handleMenuClose: handleMenuClose
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(StyledHeader, null, React.createElement(Box, {
-    component: "img",
-    src: runboxLogoImage,
-    alt: "elice runbox",
-    sx: {
-      width: 'auto',
-      height: '100%',
-      imageRendering: 'auto',
-      padding: '0.465rem 0'
-    }
-  }), React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: "0.5rem"
-  }, renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionGrade()));
+  return jsxs(StyledHeader, {
+    children: [jsx(Box, {
+      component: "img",
+      src: img,
+      alt: "elice runbox",
+      sx: {
+        width: 'auto',
+        height: '100%',
+        imageRendering: 'auto',
+        padding: '0.465rem 0'
+      }
+    }), jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: "0.5rem",
+      children: [renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionGrade()]
+    })]
+  });
 };
 
 export { MaterialRunboxHeader as default };