@elice/material-exercise 1.240718.0-trasncript.1 → 1.240718.0-trasncript.2

package/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -1,5 +1,7 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, useEffect } from 'react';
-import { getOrgMaterialExerciseExerciseRunningList, getOrgMaterialExerciseExerciseRunningGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
+import { getOrgMaterialExerciseExerciseRunningList, getOrgMaterialExerciseExerciseRoomUserFileGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRunningGet, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
 import { Flex, Text, ResizableNext, Spinner } from '@elice/blocks';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { enums } from '@elice/types';
@@ -25,337 +27,484 @@ import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { StyledExerciseVersionRunType, StyledExerciseVersionDatetime, StyledExerciseVersionScore } from '../../shared/exercise-version-list/ExerciseVersionListItem.styled.js';
 import { StyledFileTreeWrapper, StyledExerciseSubmitHistoryNotChanged, StyledExerciseSubmitHistoryEditorWrapper, StyledExerciseSubmitHistoryEditorLoadingScreen } from './ExerciseSubmitHistory.styled.js';
-import emptyImg from '../../../assets/empty.png.js';
+import img from '../../../assets/empty.png.js';
 
-const AsyncFileTree = React.lazy(() => import('../../shared/file-tree/FileTree.js'));
-const AsyncFileTreeList = React.lazy(() => import('../../shared/file-tree/FileTreeList.js'));
-const AsyncFileViewer = React.lazy(() => import('../../shared/file-viewer/FileViewer.js'));
-const ExerciseSubmitHistory = ({
-  onHide,
-  __intl
-}) => {
-  const COUNT = 100;
-  const {
-    materialExerciseId,
-    exerciseRoomId,
-    exerciseRoomUserId
-  } = React.useContext(ExerciseContext);
-  const exercise = useRecoilValue(exerciseState(materialExerciseId));
-  const preference = useRecoilValue(exerciseEditorPreferenceState);
-  const [runningList, setRunningList] = useState([]);
-  const [selectedRunning, setSelectedRunning] = useState(null);
-  const [hasMoreRunning, setMoreRunning] = useState(false);
-  const [offset, setOffset] = useState(0);
-  const [fileList, setFileList] = useState([]);
-  const [selectedFile, setSelectedFile] = useState(null);
-  const [usercodeContent, setUsercodeContent] = useState(null);
-  const [isUserChanged, setIsUserChanged] = useState(false);
-  const [isFile, setIsFile] = useState(false);
-  const [isFileReady, setIsFileReady] = useState(false);
-  const selectedFileUrl = useMaterialExerciseFileUrl({
+var AsyncFileTree = React.lazy(function () {
+  return import('../../shared/file-tree/FileTree.js');
+});
+var AsyncFileTreeList = React.lazy(function () {
+  return import('../../shared/file-tree/FileTreeList.js');
+});
+var AsyncFileViewer = React.lazy(function () {
+  return import('../../shared/file-viewer/FileViewer.js');
+});
+var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
+  var onHide = _ref.onHide,
+    __intl = _ref.__intl;
+  var COUNT = 100;
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    exerciseRoomUserId = _React$useContext.exerciseRoomUserId;
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var preference = useRecoilValue(exerciseEditorPreferenceState);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    runningList = _useState2[0],
+    setRunningList = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedRunning = _useState4[0],
+    setSelectedRunning = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasMoreRunning = _useState6[0],
+    setMoreRunning = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    offset = _useState8[0],
+    setOffset = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    fileList = _useState10[0],
+    setFileList = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedFile = _useState12[0],
+    setSelectedFile = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    usercodeContent = _useState14[0],
+    setUsercodeContent = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isUserChanged = _useState16[0],
+    setIsUserChanged = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    isFile = _useState18[0],
+    setIsFile = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isFileReady = _useState20[0],
+    setIsFileReady = _useState20[1];
+  var selectedFileUrl = useMaterialExerciseFileUrl({
     filename: selectedFile,
-    exercise,
-    exerciseRoomId
+    exercise: exercise,
+    exerciseRoomId: exerciseRoomId
   });
-  const isEmpty = runningList.length === 0 && !selectedFile && !selectedRunning;
+  var isEmpty = runningList.length === 0 && !selectedFile && !selectedRunning;
   //
   //
   //
-  useEffect(() => {
-    void (async () => {
-      try {
-        const {
-          exerciseRunnings
-        } = await getOrgMaterialExerciseExerciseRunningList({
-          materialExerciseId,
-          userId: exerciseRoomUserId,
-          offset,
-          count: COUNT
-        });
-        setRunningList(runningList => {
-          if (runningList.length === 0 && exerciseRunnings[0]) {
-            setSelectedRunning(exerciseRunnings[0]);
-          }
-          return [...runningList, ...exerciseRunnings];
-        });
-        setMoreRunning(exerciseRunnings.length === COUNT);
-      } catch (err) {}
-    })();
+  useEffect(function () {
+    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _yield$getOrgMaterial, exerciseRunnings;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return getOrgMaterialExerciseExerciseRunningList({
+              materialExerciseId: materialExerciseId,
+              userId: exerciseRoomUserId,
+              offset: offset,
+              count: COUNT
+            });
+          case 3:
+            _yield$getOrgMaterial = _context.sent;
+            exerciseRunnings = _yield$getOrgMaterial.exerciseRunnings;
+            setRunningList(function (runningList) {
+              if (runningList.length === 0 && exerciseRunnings[0]) {
+                setSelectedRunning(exerciseRunnings[0]);
+              }
+              return [].concat(_toConsumableArray(runningList), _toConsumableArray(exerciseRunnings));
+            });
+            setMoreRunning(exerciseRunnings.length === COUNT);
+            _context.next = 11;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9]]);
+    }))();
   }, [materialExerciseId, exerciseRoomUserId, offset]);
   //
   // When id of selected running is updated,
   // Get exercise running data and filelist.
   //
-  useEffect(() => {
-    void (async () => {
-      var _a, _b, _c, _d;
-      if (!selectedRunning) {
-        return;
-      }
-      try {
-        const {
-          exerciseRunning
-        } = await getOrgMaterialExerciseExerciseRunningGet({
-          exerciseRunningId: selectedRunning.id,
-          returnFilelist: true,
-          returnUsercodeFilelist: true
-        });
-        setSelectedRunning(exerciseRunning);
-        const exerciseFileList = [...((_a = exerciseRunning.exerciseImage.filelist) !== null && _a !== void 0 ? _a : []), ...((_b = exerciseRunning.exerciseRoom.filelist) !== null && _b !== void 0 ? _b : [])].filter(item => !exerciseRunning.exerciseImage.hiddenFilelist.includes(item));
-        const exerciseImageTaskFilelist = (_c = exerciseRunning.exerciseImage.taskFilelist) === null || _c === void 0 ? void 0 : _c.filter(item => !exerciseRunning.exerciseImage.hiddenFilelist.includes(item));
-        if ((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage) {
-          let languages, environment;
-          try {
-            const languagesResponse = await getOrgMaterialExerciseExerciseImageExerciseFileGet({
+  useEffect(function () {
+    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _a, _b, _c, _d, _yield$getOrgMaterial2, exerciseRunning, exerciseFileList, exerciseImageTaskFilelist, languages, environment, languagesResponse, response, rootDir, initialOpenFilelist;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (selectedRunning) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            _context2.prev = 2;
+            _context2.next = 5;
+            return getOrgMaterialExerciseExerciseRunningGet({
+              exerciseRunningId: selectedRunning.id,
+              returnFilelist: true,
+              returnUsercodeFilelist: true
+            });
+          case 5:
+            _yield$getOrgMaterial2 = _context2.sent;
+            exerciseRunning = _yield$getOrgMaterial2.exerciseRunning;
+            setSelectedRunning(exerciseRunning);
+            exerciseFileList = [].concat(_toConsumableArray((_a = exerciseRunning.exerciseImage.filelist) !== null && _a !== void 0 ? _a : []), _toConsumableArray((_b = exerciseRunning.exerciseRoom.filelist) !== null && _b !== void 0 ? _b : [])).filter(function (item) {
+              return !exerciseRunning.exerciseImage.hiddenFilelist.includes(item);
+            });
+            exerciseImageTaskFilelist = (_c = exerciseRunning.exerciseImage.taskFilelist) === null || _c === void 0 ? void 0 : _c.filter(function (item) {
+              return !exerciseRunning.exerciseImage.hiddenFilelist.includes(item);
+            });
+            if (!((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage)) {
+              _context2.next = 37;
+              break;
+            }
+            _context2.prev = 11;
+            _context2.next = 14;
+            return getOrgMaterialExerciseExerciseImageExerciseFileGet({
               exerciseImageId: exerciseRunning.exerciseImage.id,
               filename: '.languages.json'
             });
+          case 14:
+            languagesResponse = _context2.sent;
             languages = camelizeKeys(JSON.parse(languagesResponse.exerciseFile.content));
-          } catch (e) {
-            console.error(e);
-          }
-          try {
-            const response = await getOrgMaterialExerciseExerciseRoomUserFileGet({
+            _context2.next = 21;
+            break;
+          case 18:
+            _context2.prev = 18;
+            _context2.t0 = _context2["catch"](11);
+            console.error(_context2.t0);
+          case 21:
+            _context2.prev = 21;
+            _context2.next = 24;
+            return getOrgMaterialExerciseExerciseRoomUserFileGet({
               filename: '.environment.json',
-              exerciseRoomId,
+              exerciseRoomId: exerciseRoomId,
               targetDatetime: exerciseRunning.createdDatetime
             });
+          case 24:
+            response = _context2.sent;
             environment = camelizeKeys(JSON.parse(response.userFile.content));
-          } catch (e) {
+            _context2.next = 31;
+            break;
+          case 28:
+            _context2.prev = 28;
+            _context2.t1 = _context2["catch"](21);
             // API returns error when the user hasn't changed the language
             if (languages && Object.keys(languages).length > 0) {
               environment = {
                 language: Object.keys(languages)[0]
               };
             }
-          }
-          const rootDir = languages[environment.language].rootDir;
-          const initialOpenFilelist = (_d = languages === null || languages === void 0 ? void 0 : languages[environment === null || environment === void 0 ? void 0 : environment.language]) === null || _d === void 0 ? void 0 : _d.initialOpenFilelist;
-          setFileList(exerciseFileList.filter(filepath => filepath.startsWith(rootDir)));
-          if ((initialOpenFilelist === null || initialOpenFilelist === void 0 ? void 0 : initialOpenFilelist.length) > 0) {
-            setSelectedFile(initialOpenFilelist[0]);
-          }
-        } else {
-          setFileList(exerciseFileList);
-          if (exerciseImageTaskFilelist && exerciseImageTaskFilelist.length > 0) {
-            setSelectedFile(exerciseImageTaskFilelist[0]);
-          }
+          case 31:
+            rootDir = languages[environment.language].rootDir;
+            initialOpenFilelist = (_d = languages === null || languages === void 0 ? void 0 : languages[environment === null || environment === void 0 ? void 0 : environment.language]) === null || _d === void 0 ? void 0 : _d.initialOpenFilelist;
+            setFileList(exerciseFileList.filter(function (filepath) {
+              return filepath.startsWith(rootDir);
+            }));
+            if ((initialOpenFilelist === null || initialOpenFilelist === void 0 ? void 0 : initialOpenFilelist.length) > 0) {
+              setSelectedFile(initialOpenFilelist[0]);
+            }
+            _context2.next = 39;
+            break;
+          case 37:
+            setFileList(exerciseFileList);
+            if (exerciseImageTaskFilelist && exerciseImageTaskFilelist.length > 0) {
+              setSelectedFile(exerciseImageTaskFilelist[0]);
+            }
+          case 39:
+            _context2.next = 44;
+            break;
+          case 41:
+            _context2.prev = 41;
+            _context2.t2 = _context2["catch"](2);
+            console.error(_context2.t2);
+          case 44:
+          case "end":
+            return _context2.stop();
         }
-      } catch (err) {
-        console.error(err);
-      }
-    })();
+      }, _callee2, null, [[2, 41], [11, 18], [21, 28]]);
+    }))();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id]);
   //
   // When selectedFile or selectedRunning is updated,
   // Get usercode of selected file.
   //
-  useEffect(() => {
-    void (async () => {
-      setIsFileReady(false);
-      if (!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId) {
-        return;
-      }
-      const {
-        usercode
-      } = await getOrgMaterialExerciseUsercodeGet({
-        filename: selectedFile,
-        exerciseRoomId: selectedRunning.exerciseRoom.id,
-        targetDatetime: selectedRunning.createdDatetime
-      });
-      if ((usercode === null || usercode === void 0 ? void 0 : usercode.content) !== null && (usercode === null || usercode === void 0 ? void 0 : usercode.content) !== undefined) {
-        setIsUserChanged(true);
-        setIsFile(false);
-        setUsercodeContent(usercode.content);
-        setIsFileReady(true);
-      } else {
-        try {
-          const {
-            exerciseFile
-          } = await getOrgMaterialExerciseExerciseImageExerciseFileGet({
-            exerciseImageId: selectedRunning.exerciseImage.id,
-            filename: selectedFile
-          });
-          if ((exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== null && (exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== undefined) {
-            setIsUserChanged(false);
+  useEffect(function () {
+    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var _yield$getOrgMaterial3, usercode, _yield$getOrgMaterial4, exerciseFile;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setIsFileReady(false);
+            if (!(!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId)) {
+              _context3.next = 3;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 3:
+            _context3.next = 5;
+            return getOrgMaterialExerciseUsercodeGet({
+              filename: selectedFile,
+              exerciseRoomId: selectedRunning.exerciseRoom.id,
+              targetDatetime: selectedRunning.createdDatetime
+            });
+          case 5:
+            _yield$getOrgMaterial3 = _context3.sent;
+            usercode = _yield$getOrgMaterial3.usercode;
+            if (!((usercode === null || usercode === void 0 ? void 0 : usercode.content) !== null && (usercode === null || usercode === void 0 ? void 0 : usercode.content) !== undefined)) {
+              _context3.next = 14;
+              break;
+            }
+            setIsUserChanged(true);
             setIsFile(false);
-            setUsercodeContent(exerciseFile.content);
+            setUsercodeContent(usercode.content);
             setIsFileReady(true);
-          } else {
+            _context3.next = 27;
+            break;
+          case 14:
+            _context3.prev = 14;
+            _context3.next = 17;
+            return getOrgMaterialExerciseExerciseImageExerciseFileGet({
+              exerciseImageId: selectedRunning.exerciseImage.id,
+              filename: selectedFile
+            });
+          case 17:
+            _yield$getOrgMaterial4 = _context3.sent;
+            exerciseFile = _yield$getOrgMaterial4.exerciseFile;
+            if ((exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== null && (exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== undefined) {
+              setIsUserChanged(false);
+              setIsFile(false);
+              setUsercodeContent(exerciseFile.content);
+              setIsFileReady(true);
+            } else {
+              setIsUserChanged(false);
+              setIsFile(true);
+              setIsFileReady(true);
+            }
+            _context3.next = 27;
+            break;
+          case 22:
+            _context3.prev = 22;
+            _context3.t0 = _context3["catch"](14);
             setIsUserChanged(false);
             setIsFile(true);
             setIsFileReady(true);
-          }
-        } catch (_a) {
-          setIsUserChanged(false);
-          setIsFile(true);
-          setIsFileReady(true);
+          case 27:
+          case "end":
+            return _context3.stop();
         }
-      }
-    })();
+      }, _callee3, null, [[14, 22]]);
+    }))();
   }, [selectedFile, exerciseRoomId, selectedRunning]);
   /**
    *
    */
-  const renderRunningVersionList = () => {
-    return React.createElement(ExerciseVersionList, null, runningList.map(exerciseRunning => {
-      return React.createElement(ExerciseVersionListItem, {
-        key: exerciseRunning.id,
-        selected: Boolean(selectedRunning && selectedRunning.id === exerciseRunning.id),
-        onClick: () => {
-          setSelectedRunning(exerciseRunning);
-        }
-      }, React.createElement(StyledExerciseVersionRunType, {
-        role: "gray3",
-        size: "small"
-      }, exerciseRunning.runType === enums.ExerciseRunType.Grade ? __intl.formatMessage({
-        id: 'exerciseSubmitHistory.runType.grade'
-      }) : __intl.formatMessage({
-        id: 'exerciseSubmitHistory.runType.run'
-      })), React.createElement(StyledExerciseVersionDatetime, {
-        role: "gray3",
-        size: "small"
-      }, dayjs(exerciseRunning.createdDatetime).format('YYYY.M.DD hh:mm a')), React.createElement(StyledExerciseVersionScore, {
-        role: "gray3",
-        size: "small"
-      }, exerciseRunning.score));
-    }), hasMoreRunning ? React.createElement(ExerciseVersionListItem, {
-      onClick: () => setOffset(prevOffset => prevOffset + COUNT)
-    }, React.createElement(Flex, {
-      align: "center",
-      justify: "center",
-      width: "100%"
-    }, React.createElement(Text, {
-      role: "important"
-    }, __intl.formatMessage({
-      id: 'exerciseSubmitHistory.button.load.more'
-    })))) : null);
+  var renderRunningVersionList = function renderRunningVersionList() {
+    return jsxs(ExerciseVersionList, {
+      children: [runningList.map(function (exerciseRunning) {
+        return jsxs(ExerciseVersionListItem, {
+          selected: Boolean(selectedRunning && selectedRunning.id === exerciseRunning.id),
+          onClick: function onClick() {
+            setSelectedRunning(exerciseRunning);
+          },
+          children: [jsx(StyledExerciseVersionRunType, {
+            role: "gray3",
+            size: "small",
+            children: exerciseRunning.runType === enums.ExerciseRunType.Grade ? __intl.formatMessage({
+              id: 'exerciseSubmitHistory.runType.grade'
+            }) : __intl.formatMessage({
+              id: 'exerciseSubmitHistory.runType.run'
+            })
+          }), jsx(StyledExerciseVersionDatetime, {
+            role: "gray3",
+            size: "small",
+            children: dayjs(exerciseRunning.createdDatetime).format('YYYY.M.DD hh:mm a')
+          }), jsx(StyledExerciseVersionScore, {
+            role: "gray3",
+            size: "small",
+            children: exerciseRunning.score
+          })]
+        }, exerciseRunning.id);
+      }), hasMoreRunning ? jsx(ExerciseVersionListItem, {
+        onClick: function onClick() {
+          return setOffset(function (prevOffset) {
+            return prevOffset + COUNT;
+          });
+        },
+        children: jsx(Flex, {
+          align: "center",
+          justify: "center",
+          width: "100%",
+          children: jsx(Text, {
+            role: "important",
+            children: __intl.formatMessage({
+              id: 'exerciseSubmitHistory.button.load.more'
+            })
+          })
+        })
+      }) : null]
+    });
   };
   /**
    *
    */
-  const renderRunningOutput = () => {
+  var renderRunningOutput = function renderRunningOutput() {
     if (!selectedRunning) {
       return null;
     }
-    return React.createElement(ExerciseSubmitHistoryOutput, {
+    return jsx(ExerciseSubmitHistoryOutput, {
       exerciseRunningId: selectedRunning.id
     });
   };
   /**
    *
    */
-  const renderRunningContent = () => {
+  var renderRunningContent = function renderRunningContent() {
     var _a;
     if (!selectedFile) {
       return null;
     }
-    const runningId = Number((_a = selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id) !== null && _a !== void 0 ? _a : 0);
-    const uniqueFilePath = `submit-history/${exerciseRoomId}/r${runningId}`;
-    const editorFilename = `${uniqueFilePath}/${selectedFile}`;
-    return React.createElement(Flex, {
+    var runningId = Number((_a = selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id) !== null && _a !== void 0 ? _a : 0);
+    var uniqueFilePath = "submit-history/".concat(exerciseRoomId, "/r").concat(runningId);
+    var editorFilename = "".concat(uniqueFilePath, "/").concat(selectedFile);
+    return jsxs(Flex, {
       width: "100%",
       auto: true,
-      overflow: "hidden"
-    }, React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
-      initialWidth: 240,
-      resizeHandles: ['e'],
-      collapseWidth: 100
-    }), React.createElement(StyledFileTreeWrapper, null, React.createElement(React.Suspense, {
-      fallback: null
-    }, React.createElement(AsyncFileTree, {
-      activePath: selectedFile,
-      exerciseRoomFilelist: fileList,
-      imageFilelist: [],
-      onActivePathChange: (path, isDirectory = false) => {
-        if (isDirectory) {
-          return;
-        }
-        setSelectedFile(path);
-      }
-    }, React.createElement(AsyncFileTreeList, null))))), React.createElement(Flex, {
-      column: true,
-      auto: true,
-      height: "100%",
-      overflow: "hidden"
-    }, !isUserChanged && React.createElement(StyledExerciseSubmitHistoryNotChanged, null, React.createElement(Text, {
-      role: "white",
-      size: "tiny"
-    }, __intl.formatMessage({
-      id: 'exerciseSubmitHistory.notChanged'
-    }))), React.createElement(StyledExerciseSubmitHistoryEditorWrapper, null, isFile ? React.createElement(React.Suspense, {
-      fallback: null
-    }, React.createElement(AsyncFileViewer, {
-      key: editorFilename,
-      filename: editorFilename,
-      fileurl: selectedFileUrl || ''
-    })) : React.createElement(MonacoEditorLazy, {
-      key: editorFilename,
-      defaultValue: usercodeContent !== null && usercodeContent !== void 0 ? usercodeContent : '',
-      filename: editorFilename,
-      preference: Object.assign(Object.assign({}, preference), {
-        scrollBeyondLastLine: false,
-        readOnly: true
-      })
-    }), !isFileReady && React.createElement(StyledExerciseSubmitHistoryEditorLoadingScreen, null, React.createElement(Spinner, null)))));
+      overflow: "hidden",
+      children: [jsx(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+        initialWidth: 240,
+        resizeHandles: ['e'],
+        collapseWidth: 100,
+        children: jsx(StyledFileTreeWrapper, {
+          children: jsx(React.Suspense, {
+            fallback: null,
+            children: jsx(AsyncFileTree, {
+              activePath: selectedFile,
+              exerciseRoomFilelist: fileList,
+              imageFilelist: [],
+              onActivePathChange: function onActivePathChange(path) {
+                var isDirectory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+                if (isDirectory) {
+                  return;
+                }
+                setSelectedFile(path);
+              },
+              children: jsx(AsyncFileTreeList, {})
+            })
+          })
+        })
+      })), jsxs(Flex, {
+        column: true,
+        auto: true,
+        height: "100%",
+        overflow: "hidden",
+        children: [!isUserChanged && jsx(StyledExerciseSubmitHistoryNotChanged, {
+          children: jsx(Text, {
+            role: "white",
+            size: "tiny",
+            children: __intl.formatMessage({
+              id: 'exerciseSubmitHistory.notChanged'
+            })
+          })
+        }), jsxs(StyledExerciseSubmitHistoryEditorWrapper, {
+          children: [isFile ? jsx(React.Suspense, {
+            fallback: null,
+            children: jsx(AsyncFileViewer, {
+              filename: editorFilename,
+              fileurl: selectedFileUrl || ''
+            }, editorFilename)
+          }) : jsx(MonacoEditorLazy, {
+            defaultValue: usercodeContent !== null && usercodeContent !== void 0 ? usercodeContent : '',
+            filename: editorFilename,
+            preference: Object.assign(Object.assign({}, preference), {
+              scrollBeyondLastLine: false,
+              readOnly: true
+            })
+          }, editorFilename), !isFileReady && jsx(StyledExerciseSubmitHistoryEditorLoadingScreen, {
+            children: jsx(Spinner, {})
+          })]
+        })]
+      })]
+    });
   };
   /**
    *
    */
-  const renderEmptySubmitHistoryView = () => {
-    return React.createElement(Stack, {
+  var renderEmptySubmitHistoryView = function renderEmptySubmitHistoryView() {
+    return jsxs(Stack, {
       width: "100%",
       height: "100%",
       overflow: "hidden",
       justifyContent: "center",
       alignItems: "center",
       direction: "column",
-      gap: "1rem"
-    }, React.createElement(Box, {
-      component: "img",
-      width: "9.375rem",
-      height: "9.375rem",
-      src: emptyImg,
-      alt: "emptyImage"
-    }), React.createElement(Typography, {
-      variant: "body1",
-      color: theme => theme.palette.primary.contrastText
-    }, __intl.formatMessage({
-      id: 'exerciseSubmitHistory.empty'
-    })));
+      gap: "1rem",
+      children: [jsx(Box, {
+        component: "img",
+        width: "9.375rem",
+        height: "9.375rem",
+        src: img,
+        alt: "emptyImage"
+      }), jsx(Typography, {
+        variant: "body1",
+        color: function color(theme) {
+          return theme.palette.primary.contrastText;
+        },
+        children: __intl.formatMessage({
+          id: 'exerciseSubmitHistory.empty'
+        })
+      })]
+    });
   };
   /**
    *
    */
-  const renderSubmitHistory = () => {
-    return React.createElement(Stack, {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      direction: "row"
-    }, React.createElement(Box, {
-      maxWidth: "15rem",
+  var renderSubmitHistory = function renderSubmitHistory() {
+    return jsxs(Stack, {
       width: "100%",
-      height: "100%",
-      overflow: "hidden"
-    }, renderRunningVersionList()), React.createElement(Stack, {
       height: "100%",
       overflow: "hidden",
-      width: "100%"
-    }, renderRunningContent(), renderRunningOutput()));
+      direction: "row",
+      children: [jsx(Box, {
+        maxWidth: "15rem",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        children: renderRunningVersionList()
+      }), jsxs(Stack, {
+        height: "100%",
+        overflow: "hidden",
+        width: "100%",
+        children: [renderRunningContent(), renderRunningOutput()]
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(MaterialModal, {
-    title: __intl.formatMessage({
-      id: 'exerciseSubmitHistory.title'
-    }),
-    onHide: onHide
-  }, isEmpty ? renderEmptySubmitHistoryView() : renderSubmitHistory()));
+  return jsx(RawEliceIntlProvider, {
+    value: __intl,
+    children: jsx(MaterialModal, {
+      title: __intl.formatMessage({
+        id: 'exerciseSubmitHistory.title'
+      }),
+      onHide: onHide,
+      children: isEmpty ? renderEmptySubmitHistoryView() : renderSubmitHistory()
+    })
+  });
 };
 var ExerciseSubmitHistory$1 = new IntlComponentBuilder(ExerciseSubmitHistory).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();