@elice/material-exercise 1.231212.0 → 1.231228.0

package/cjs/components/shared/file-tree/utils/fileTreeGenerator.js

@@ -1,24 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var fileTreeItem = require('./fileTreeItem.js');
 
-var FileTreeRoot = /*#__PURE__*/function () {
-  function FileTreeRoot(_ref) {
-    var _ref$imageFilelist = _ref.imageFilelist,
-      imageFilelist = _ref$imageFilelist === void 0 ? [] : _ref$imageFilelist,
-      _ref$readOnlyFilelist = _ref.readOnlyFilelist,
-      readOnlyFilelist = _ref$readOnlyFilelist === void 0 ? [] : _ref$readOnlyFilelist,
-      _ref$hiddenFilelist = _ref.hiddenFilelist,
-      hiddenFilelist = _ref$hiddenFilelist === void 0 ? [] : _ref$hiddenFilelist,
-      _ref$openedDirectoryL = _ref.openedDirectoryList,
-      openedDirectoryList = _ref$openedDirectoryL === void 0 ? [] : _ref$openedDirectoryL,
-      renameInputPath = _ref.renameInputPath,
-      _ref$initialOpenFilel = _ref.initialOpenFilelist,
-      initialOpenFilelist = _ref$initialOpenFilel === void 0 ? [] : _ref$initialOpenFilel;
-    _rollupPluginBabelHelpers.classCallCheck(this, FileTreeRoot);
+class FileTreeRoot {
+  constructor({
+    imageFilelist = [],
+    readOnlyFilelist = [],
+    hiddenFilelist = [],
+    openedDirectoryList = [],
+    renameInputPath,
+    initialOpenFilelist = []
+  }) {
     this.root = new FileTreeNode({
       path: '',
       expanded: true,
@@ -32,147 +24,116 @@ var FileTreeRoot = /*#__PURE__*/function () {
     this.renameInputPath = renameInputPath;
     this.initialOpenFilelist = initialOpenFilelist;
   }
-  _rollupPluginBabelHelpers.createClass(FileTreeRoot, [{
-    key: "createDirectoryNode",
-    value: function createDirectoryNode(path, parentPath) {
-      return new FileTreeNode({
-        path: path,
-        expanded: this.openedDirectoryList.includes(path),
-        isDirectory: true,
-        isRenaming: path === this.renameInputPath,
-        parentPath: parentPath
-      });
-    }
-  }, {
-    key: "createFileNode",
-    value: function createFileNode(path, parentPath) {
-      return new FileTreeNode({
-        path: path,
-        isRenaming: path === this.renameInputPath,
-        parentPath: parentPath,
-        isInitialOpen: this.initialOpenFilelist.includes(path)
-      });
-    }
-  }, {
-    key: "getParentNode",
-    value: function getParentNode(path) {
-      var parentPath = getParentPath(path);
-      // root scope
-      if (!parentPath) {
-        return this.root;
-      } else if (this.directoryNodes[parentPath]) {
-        return this.directoryNodes[parentPath];
-      } else {
-        var grandParentNode = this.getParentNode(parentPath);
-        var parentNode = this.createDirectoryNode(parentPath, grandParentNode.path);
-        grandParentNode.children.push(parentNode);
-        grandParentNode.children = arrangeFileAndDirectoryNameByPath(grandParentNode.children);
-        this.directoryNodes[parentPath] = parentNode;
-        return parentNode;
-      }
+  createDirectoryNode(path, parentPath) {
+    return new FileTreeNode({
+      path,
+      expanded: this.openedDirectoryList.includes(path),
+      isDirectory: true,
+      isRenaming: path === this.renameInputPath,
+      parentPath
+    });
+  }
+  createFileNode(path, parentPath) {
+    return new FileTreeNode({
+      path,
+      isRenaming: path === this.renameInputPath,
+      parentPath,
+      isInitialOpen: this.initialOpenFilelist.includes(path)
+    });
+  }
+  getParentNode(path) {
+    const parentPath = getParentPath(path);
+    // root scope
+    if (!parentPath) {
+      return this.root;
+    } else if (this.directoryNodes[parentPath]) {
+      return this.directoryNodes[parentPath];
+    } else {
+      const grandParentNode = this.getParentNode(parentPath);
+      const parentNode = this.createDirectoryNode(parentPath, grandParentNode.path);
+      grandParentNode.children.push(parentNode);
+      grandParentNode.children = arrangeFileAndDirectoryNameByPath(grandParentNode.children);
+      this.directoryNodes[parentPath] = parentNode;
+      return parentNode;
     }
-  }, {
-    key: "insert",
-    value: function insert(path) {
-      var parentNode = null;
-      var node = null;
-      // folder
-      if (path.endsWith('/')) {
-        var cleanPath = path.slice(0, path.length - 1);
-        parentNode = this.getParentNode(cleanPath);
-        node = this.createDirectoryNode(cleanPath, parentNode.path);
-        // if directory does not exist, add a new node
-        if (!this.directoryNodes[cleanPath]) {
-          this.directoryNodes[cleanPath] = node;
-          parentNode.children.push(node);
-          parentNode.children = arrangeFileAndDirectoryNameByPath(parentNode.children);
-        }
-      } else {
-        // file
-        parentNode = this.getParentNode(path);
-        node = this.createFileNode(path, parentNode.path);
-        if (this.imageFilelist.includes(path)) {
-          node.isRemovable = false;
-          node.isReadonly = this.readOnlyFilelist.includes(path);
-          node.isHidden = this.hiddenFilelist.includes(path);
-        }
+  }
+  insert(path) {
+    let parentNode = null;
+    let node = null;
+    // folder
+    if (path.endsWith('/')) {
+      const cleanPath = path.slice(0, path.length - 1);
+      parentNode = this.getParentNode(cleanPath);
+      node = this.createDirectoryNode(cleanPath, parentNode.path);
+      // if directory does not exist, add a new node
+      if (!this.directoryNodes[cleanPath]) {
+        this.directoryNodes[cleanPath] = node;
         parentNode.children.push(node);
         parentNode.children = arrangeFileAndDirectoryNameByPath(parentNode.children);
       }
-    }
-  }, {
-    key: "insertInputNode",
-    value: function insertInputNode(path, inputType) {
-      var isRoot = path === '';
-      var tree = new FileTreeNode({
-        path: isRoot ? '' : path + '/',
-        expanded: this.openedDirectoryList.includes(path),
-        isDirectory: inputType === 'directory',
-        isEdit: true,
-        title: '*',
-        parentPath: path
-      });
-      if (isRoot) {
-        this.root.children = [tree].concat(_rollupPluginBabelHelpers.toConsumableArray(this.root.children));
-        this.root.children = arrangeFileAndDirectoryNameByPath(this.root.children);
-      } else {
-        this.directoryNodes[path].expanded = true;
-        this.directoryNodes[path].children = [tree].concat(_rollupPluginBabelHelpers.toConsumableArray(this.directoryNodes[path].children));
-        this.directoryNodes[path].children = arrangeFileAndDirectoryNameByPath(this.directoryNodes[path].children);
+    } else {
+      // file
+      parentNode = this.getParentNode(path);
+      node = this.createFileNode(path, parentNode.path);
+      if (this.imageFilelist.includes(path)) {
+        node.isRemovable = false;
+        node.isReadonly = this.readOnlyFilelist.includes(path);
+        node.isHidden = this.hiddenFilelist.includes(path);
       }
+      parentNode.children.push(node);
+      parentNode.children = arrangeFileAndDirectoryNameByPath(parentNode.children);
     }
-  }, {
-    key: "_setDirectoriesRemovable",
-    value: function _setDirectoriesRemovable(node) {
-      var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(node.children),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var child = _step.value;
-          if (child.isDirectory) {
-            if (!this._setDirectoriesRemovable(child)) {
-              node.isRemovable = false;
-            }
-          } else if (!child.isRemovable) {
-            node.isRemovable = false;
-          }
+  }
+  insertInputNode(path, inputType) {
+    const isRoot = path === '';
+    const tree = new FileTreeNode({
+      path: isRoot ? '' : path + '/',
+      expanded: this.openedDirectoryList.includes(path),
+      isDirectory: inputType === 'directory',
+      isEdit: true,
+      title: '*',
+      parentPath: path
+    });
+    if (isRoot) {
+      this.root.children = [tree, ...this.root.children];
+      this.root.children = arrangeFileAndDirectoryNameByPath(this.root.children);
+    } else {
+      this.directoryNodes[path].expanded = true;
+      this.directoryNodes[path].children = [tree, ...this.directoryNodes[path].children];
+      this.directoryNodes[path].children = arrangeFileAndDirectoryNameByPath(this.directoryNodes[path].children);
+    }
+  }
+  _setDirectoriesRemovable(node) {
+    for (const child of node.children) {
+      if (child.isDirectory) {
+        if (!this._setDirectoriesRemovable(child)) {
+          node.isRemovable = false;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      if (this.imageFilelist.includes(node.path + '/')) {
+      } else if (!child.isRemovable) {
         node.isRemovable = false;
       }
-      return node.isRemovable;
     }
-  }]);
-  return FileTreeRoot;
-}();
-var FileTreeNode = /*#__PURE__*/function () {
-  function FileTreeNode(_ref2) {
-    var path = _ref2.path,
-      parentPath = _ref2.parentPath,
-      title = _ref2.title,
-      _ref2$isDirectory = _ref2.isDirectory,
-      isDirectory = _ref2$isDirectory === void 0 ? false : _ref2$isDirectory,
-      _ref2$isReadonly = _ref2.isReadonly,
-      isReadonly = _ref2$isReadonly === void 0 ? false : _ref2$isReadonly,
-      _ref2$isRemovable = _ref2.isRemovable,
-      isRemovable = _ref2$isRemovable === void 0 ? true : _ref2$isRemovable,
-      _ref2$isHidden = _ref2.isHidden,
-      isHidden = _ref2$isHidden === void 0 ? false : _ref2$isHidden,
-      _ref2$expanded = _ref2.expanded,
-      expanded = _ref2$expanded === void 0 ? false : _ref2$expanded,
-      _ref2$isEdit = _ref2.isEdit,
-      isEdit = _ref2$isEdit === void 0 ? false : _ref2$isEdit,
-      _ref2$isRenaming = _ref2.isRenaming,
-      isRenaming = _ref2$isRenaming === void 0 ? false : _ref2$isRenaming,
-      _ref2$isInitialOpen = _ref2.isInitialOpen,
-      isInitialOpen = _ref2$isInitialOpen === void 0 ? false : _ref2$isInitialOpen;
-    _rollupPluginBabelHelpers.classCallCheck(this, FileTreeNode);
-    var _title = title === undefined ? fileTreeItem.getTitle(path) : title;
+    if (this.imageFilelist.includes(node.path + '/')) {
+      node.isRemovable = false;
+    }
+    return node.isRemovable;
+  }
+}
+class FileTreeNode {
+  constructor({
+    path,
+    parentPath,
+    title,
+    isDirectory = false,
+    isReadonly = false,
+    isRemovable = true,
+    isHidden = false,
+    expanded = false,
+    isEdit = false,
+    isRenaming = false,
+    isInitialOpen = false
+  }) {
+    const _title = title === undefined ? fileTreeItem.getTitle(path) : title;
     this.path = path;
     this.parentPath = parentPath;
     this.title = _title;
@@ -186,46 +147,38 @@ var FileTreeNode = /*#__PURE__*/function () {
     this.isInitialOpen = isInitialOpen;
     this.children = [];
   }
-  _rollupPluginBabelHelpers.createClass(FileTreeNode, [{
-    key: "findTreeNode",
-    value: function findTreeNode(path) {
-      var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      if (this.path === path) {
-        return this;
-      }
-      for (var i = 0; i < this.children.length; i++) {
-        if (path.split('/')[depth] === this.children[i].path.split('/')[depth]) {
-          return this.findTreeNode.call(this.children[i], path, depth + 1);
-        }
+  findTreeNode(path, depth = 0) {
+    if (this.path === path) {
+      return this;
+    }
+    for (let i = 0; i < this.children.length; i++) {
+      if (path.split('/')[depth] === this.children[i].path.split('/')[depth]) {
+        return this.findTreeNode.call(this.children[i], path, depth + 1);
       }
-      return;
     }
-  }]);
-  return FileTreeNode;
-}();
-function create(_ref3) {
-  var imageFilelist = _ref3.imageFilelist,
-    exerciseRoomFilelist = _ref3.exerciseRoomFilelist,
-    openedDirectoryList = _ref3.openedDirectoryList,
-    _ref3$hiddenFilelist = _ref3.hiddenFilelist,
-    hiddenFilelist = _ref3$hiddenFilelist === void 0 ? [] : _ref3$hiddenFilelist,
-    _ref3$readOnlyFilelis = _ref3.readOnlyFilelist,
-    readOnlyFilelist = _ref3$readOnlyFilelis === void 0 ? [] : _ref3$readOnlyFilelis,
-    newInput = _ref3.newInput,
-    renameInputPath = _ref3.renameInputPath,
-    initialOpenFilelist = _ref3.initialOpenFilelist;
-  var tree = new FileTreeRoot({
-    imageFilelist: imageFilelist,
-    hiddenFilelist: hiddenFilelist,
-    openedDirectoryList: openedDirectoryList,
-    readOnlyFilelist: readOnlyFilelist,
-    renameInputPath: renameInputPath,
-    initialOpenFilelist: initialOpenFilelist
-  });
-  var allPathes = removeDuplicatedString([].concat(_rollupPluginBabelHelpers.toConsumableArray(exerciseRoomFilelist), _rollupPluginBabelHelpers.toConsumableArray(imageFilelist)));
-  allPathes.forEach(function (path) {
-    return tree.insert(path);
+    return;
+  }
+}
+function create({
+  imageFilelist,
+  exerciseRoomFilelist,
+  openedDirectoryList,
+  hiddenFilelist = [],
+  readOnlyFilelist = [],
+  newInput,
+  renameInputPath,
+  initialOpenFilelist
+}) {
+  const tree = new FileTreeRoot({
+    imageFilelist,
+    hiddenFilelist,
+    openedDirectoryList,
+    readOnlyFilelist,
+    renameInputPath,
+    initialOpenFilelist
   });
+  const allPathes = removeDuplicatedString([...exerciseRoomFilelist, ...imageFilelist]);
+  allPathes.forEach(path => tree.insert(path));
   if (newInput) {
     tree.insertInputNode(newInput.path, newInput.type);
   }
@@ -233,16 +186,15 @@ function create(_ref3) {
   return tree.root;
 }
 function removeDuplicatedString(array) {
-  return _rollupPluginBabelHelpers.toConsumableArray(new Set(array));
+  return [...new Set(array)];
 }
 function getParentPath(path) {
   return path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
 }
 function arrangeFileAndDirectoryNameByPath(fileTreeNodeList) {
-  return [].concat(_rollupPluginBabelHelpers.toConsumableArray(fileTreeNodeList.filter(function (_ref4) {
-    var isDirectory = _ref4.isDirectory;
-    return isDirectory;
-  }).sort(function (a, b) {
+  return [...fileTreeNodeList.filter(({
+    isDirectory
+  }) => isDirectory).sort((a, b) => {
     if (a.path < b.path) {
       return -1;
     }
@@ -250,10 +202,9 @@ function arrangeFileAndDirectoryNameByPath(fileTreeNodeList) {
       return 1;
     }
     return 0;
-  })), _rollupPluginBabelHelpers.toConsumableArray(fileTreeNodeList.filter(function (_ref5) {
-    var isDirectory = _ref5.isDirectory;
-    return !isDirectory;
-  }).sort(function (a, b) {
+  }), ...fileTreeNodeList.filter(({
+    isDirectory
+  }) => !isDirectory).sort((a, b) => {
     if (a.path < b.path) {
       return -1;
     }
@@ -261,7 +212,7 @@ function arrangeFileAndDirectoryNameByPath(fileTreeNodeList) {
       return 1;
     }
     return 0;
-  })));
+  })];
 }
 
 exports.FileTreeNode = FileTreeNode;

package/cjs/components/shared/file-tree/utils/fileTreeInput.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function getTargetDirectoryPath(fileTreeNode) {
   if (!fileTreeNode) {
     return '';

package/cjs/components/shared/file-tree/utils/fileTreeItem.js

@@ -1,13 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Get title of tree item from path.
  * @param path  Path of tree item.
  */
 function getTitle(path) {
-  var splitTitleArr = path.split('/');
+  const splitTitleArr = path.split('/');
   return splitTitleArr[splitTitleArr.length - 1];
 }
 

package/cjs/components/shared/file-tree/utils/fileTreePath.js

@@ -1,16 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  *
  */
-function isMovingTheSamePath(_ref) {
-  var draggedPath = _ref.draggedPath,
-    dropzonePath = _ref.dropzonePath,
-    dragFileTreeNode = _ref.dragFileTreeNode;
+function isMovingTheSamePath({
+  draggedPath,
+  dropzonePath,
+  dragFileTreeNode
+}) {
   var _a;
-  return draggedPath === "".concat(dropzonePath || '').concat(dropzonePath ? '/' : '').concat((_a = dragFileTreeNode === null || dragFileTreeNode === void 0 ? void 0 : dragFileTreeNode.title) !== null && _a !== void 0 ? _a : '');
+  return draggedPath === `${dropzonePath || ''}${dropzonePath ? '/' : ''}${(_a = dragFileTreeNode === null || dragFileTreeNode === void 0 ? void 0 : dragFileTreeNode.title) !== null && _a !== void 0 ? _a : ''}`;
 }
 
 exports.isMovingTheSamePath = isMovingTheSamePath;

package/cjs/components/shared/file-viewer/FileViewer.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 blocks = require('@elice/blocks');
@@ -21,49 +20,30 @@ var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var FileViewerNonViewable = require('./FileViewerNonViewable.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var FileSaver__default = /*#__PURE__*/_interopDefaultLegacy(FileSaver);
-var mime__default = /*#__PURE__*/_interopDefaultLegacy(mime);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var AsyncFileViewerCsv = React__default["default"].lazy(function () {
-  return Promise.resolve().then(function () { return require('./FileViewerCsv.js'); });
-});
-var AsyncFileViewerImage = React__default["default"].lazy(function () {
-  return Promise.resolve().then(function () { return require('./FileViewerImage.js'); });
-});
-var AsyncFileViewerIpynb = React__default["default"].lazy(function () {
-  return Promise.resolve().then(function () { return require('./FileViewerIpynb.js'); });
-});
-var AsyncFileViewerText = React__default["default"].lazy(function () {
-  return Promise.resolve().then(function () { return require('./FileViewerText.js'); });
-});
-var StyledFileWrapper = styled__default["default"].div.withConfig({
+const AsyncFileViewerCsv = React.lazy(() => Promise.resolve().then(function () { return require('./FileViewerCsv.js'); }));
+const AsyncFileViewerImage = React.lazy(() => Promise.resolve().then(function () { return require('./FileViewerImage.js'); }));
+const AsyncFileViewerIpynb = React.lazy(() => Promise.resolve().then(function () { return require('./FileViewerIpynb.js'); }));
+const AsyncFileViewerText = React.lazy(() => Promise.resolve().then(function () { return require('./FileViewerText.js'); }));
+const StyledFileWrapper = styled.div.withConfig({
   componentId: "sc-197v06u-0"
 })(["display:flex;justify-content:center;align-items:center;background-color:", ";width:100%;height:100%;"], designTokens.base.color.navy9);
-var StyledReadonlyBanner = styled__default["default"].div.withConfig({
+const StyledReadonlyBanner = styled.div.withConfig({
   componentId: "sc-197v06u-1"
 })(["width:100%;padding:0.7rem;color:white;font-size:0.7rem;a{color:", ";font-weight:bold;text-decoration:underline;.eb-icon{margin-right:0.25rem;}}"], designTokens.base.color.primary5);
-var FileViewer = function FileViewer(_ref) {
-  var filename = _ref.filename,
-    fileurl = _ref.fileurl,
-    locale = _ref.locale;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    showInTextViewer = _useState2[0],
-    setShowInTextViewer = _useState2[1];
+const FileViewer = ({
+  filename,
+  fileurl,
+  locale
+}) => {
+  const [showInTextViewer, setShowInTextViewer] = React.useState(false);
   /**
    * Mime type of file.
    */
-  var mimeType = React__default["default"].useMemo(function () {
-    return mime__default["default"].getType(filename || '') || filename.split('.').pop() || '';
-  }, [filename]);
+  const mimeType = React.useMemo(() => mime.getType(filename || '') || filename.split('.').pop() || '', [filename]);
   /**
    * Preview component.
    */
-  var PreviewComponent = React__default["default"].useMemo(function () {
+  const PreviewComponent = React.useMemo(() => {
     // Binary file which shows as text
     if (showInTextViewer) {
       return AsyncFileViewerText;
@@ -92,17 +72,13 @@ var FileViewer = function FileViewer(_ref) {
   /**
    * Handle download button click.
    */
-  var handleDownloadClick = function handleDownloadClick(e) {
+  const handleDownloadClick = e => {
     e.preventDefault();
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(function (res) {
-      return res.blob();
-    }).then(function (blob) {
-      return FileSaver__default["default"].saveAs(blob, filename);
-    }).catch(function () {
-      var win = window.open(fileurl, '_blank');
+    fetch(fileurl).then(res => res.blob()).then(blob => FileSaver.saveAs(blob, filename)).catch(() => {
+      const win = window.open(fileurl, '_blank');
       if (win) {
         win.focus();
       }
@@ -111,47 +87,47 @@ var FileViewer = function FileViewer(_ref) {
   /**
    * Readonly banner.
    */
-  var renderReadonlyBanner = function renderReadonlyBanner() {
+  const renderReadonlyBanner = () => {
     if (!fileurl) {
       return null;
     }
-    return React__default["default"].createElement(StyledReadonlyBanner, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    return React.createElement(StyledReadonlyBanner, null, React.createElement(reactIntl.FormattedMessage, {
       id: "fileViewer.readOnlyBanner.content"
-    }), React__default["default"].createElement(blocks.Hspace, {
+    }), React.createElement(blocks.Hspace, {
       width: 0.25
-    }), React__default["default"].createElement("a", {
+    }), React.createElement("a", {
       href: fileurl,
       onClick: handleDownloadClick
-    }, React__default["default"].createElement(blocks.Icon, {
+    }, React.createElement(blocks.Icon, {
       icon: icons.eilDownload,
       size: "tiny"
-    }), React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }), React.createElement(reactIntl.FormattedMessage, {
       id: "fileViewer.readOnlyBanner.downloadButton"
     })));
   };
   /**
    * File viewer.
    */
-  var renderFileViewer = function renderFileViewer() {
+  const renderFileViewer = () => {
     // preview-able file
     if (PreviewComponent) {
-      return React__default["default"].createElement(React__default["default"].Suspense, {
-        fallback: React__default["default"].createElement(ExerciseFileShimmer["default"], null)
-      }, React__default["default"].createElement(blocks.Flex, {
+      return React.createElement(React.Suspense, {
+        fallback: React.createElement(ExerciseFileShimmer.default, null)
+      }, React.createElement(blocks.Flex, {
         column: true,
         width: "100%",
         height: "100%"
-      }, renderReadonlyBanner(), React__default["default"].createElement(PreviewComponent, {
+      }, renderReadonlyBanner(), React.createElement(PreviewComponent, {
         filename: filename,
         fileurl: fileurl
       })));
     }
     // binary file
-    return React__default["default"].createElement(FileViewerNonViewable["default"], {
+    return React.createElement(FileViewerNonViewable.default, {
       fileurl: fileurl,
       filename: filename,
       locale: locale,
-      onTextViewerClick: function onTextViewerClick() {
+      onTextViewerClick: () => {
         setShowInTextViewer(true);
       }
     });
@@ -159,21 +135,21 @@ var FileViewer = function FileViewer(_ref) {
   //
   //
   //
-  return React__default["default"].createElement(StyledFileWrapper, {
+  return React.createElement(StyledFileWrapper, {
     children: renderFileViewer()
   });
 };
 //
 //
 //
-var FileViewer$1 = (function (props) {
-  return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+var FileViewer$1 = (props => {
+  return React.createElement(materialSharedUtils.MaterialIntlProvider, {
     locale: props.locale,
     phrases: {
-      en: en["default"],
-      ko: ko["default"]
+      en: en.default,
+      ko: ko.default
     }
-  }, React__default["default"].createElement(FileViewer, Object.assign({}, props)));
+  }, React.createElement(FileViewer, Object.assign({}, props)));
 });
 
-exports["default"] = FileViewer$1;
+exports.default = FileViewer$1;