@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,243 @@
+import { getTitle } from './fileTreeItem.js';
+
+class FileTreeRoot {
+  constructor({
+    imageFilelist = [],
+    readOnlyFilelist = [],
+    hiddenFilelist = [],
+    openedDirectoryList = [],
+    renameInputPath,
+    initialOpenFilelist = []
+  }) {
+    this.root = new FileTreeNode({
+      path: '',
+      expanded: true,
+      parentPath: ''
+    });
+    this.directoryNodes = {};
+    this.imageFilelist = imageFilelist;
+    this.readOnlyFilelist = readOnlyFilelist;
+    this.hiddenFilelist = hiddenFilelist;
+    this.openedDirectoryList = openedDirectoryList;
+    this.renameInputPath = renameInputPath;
+    this.initialOpenFilelist = initialOpenFilelist;
+  }
+
+  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;
+    }
+  }
+
+  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);
+      }
+    } 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);
+    }
+  }
+
+  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;
+        }
+      } else if (!child.isRemovable) {
+        node.isRemovable = false;
+      }
+    }
+
+    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 ? getTitle(path) : title;
+
+    this.path = path;
+    this.parentPath = parentPath;
+    this.title = _title;
+    this.isDirectory = isDirectory;
+    this.isReadonly = isReadonly;
+    this.isRemovable = isRemovable;
+    this.isHidden = isHidden;
+    this.expanded = expanded;
+    this.isEdit = isEdit;
+    this.isRenaming = isRenaming;
+    this.isInitialOpen = isInitialOpen;
+    this.children = [];
+  }
+
+  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;
+  }
+
+}
+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);
+  }
+
+  tree._setDirectoriesRemovable(tree.root);
+
+  return tree.root;
+}
+
+function removeDuplicatedString(array) {
+  return [...new Set(array)];
+}
+
+function getParentPath(path) {
+  return path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
+}
+
+function arrangeFileAndDirectoryNameByPath(fileTreeNodeList) {
+  return [...fileTreeNodeList.filter(({
+    isDirectory
+  }) => isDirectory).sort((a, b) => {
+    if (a.path < b.path) {
+      return -1;
+    }
+
+    if (a.path > b.path) {
+      return 1;
+    }
+
+    return 0;
+  }), ...fileTreeNodeList.filter(({
+    isDirectory
+  }) => !isDirectory).sort((a, b) => {
+    if (a.path < b.path) {
+      return -1;
+    }
+
+    if (a.path > b.path) {
+      return 1;
+    }
+
+    return 0;
+  })];
+}
+
+export { FileTreeNode, FileTreeRoot, create, getParentPath };

package/es/components/shared/file-tree/utils/fileTreeInput.d.ts

@@ -0,0 +1,4 @@
+import type { NewInput } from '../context';
+import type { FileTreeNode } from './fileTreeGenerator';
+export declare function getTargetDirectoryPath(fileTreeNode?: FileTreeNode): string;
+export declare function getInputNodeIndex(fileTree: FileTreeNode, newInput?: NewInput): number | undefined;

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

@@ -0,0 +1,9 @@
+function getTargetDirectoryPath(fileTreeNode) {
+  if (!fileTreeNode) {
+    return '';
+  }
+
+  return fileTreeNode.isDirectory ? fileTreeNode.path : fileTreeNode.parentPath;
+}
+
+export { getTargetDirectoryPath };

package/es/components/shared/file-tree/utils/fileTreeItem.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Get title of tree item from path.
+ * @param path  Path of tree item.
+ */
+export declare function getTitle(path: string): string;

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

@@ -0,0 +1,10 @@
+/**
+ * Get title of tree item from path.
+ * @param path  Path of tree item.
+ */
+function getTitle(path) {
+  const splitTitleArr = path.split('/');
+  return splitTitleArr[splitTitleArr.length - 1];
+}
+
+export { getTitle };

package/es/components/shared/file-tree/utils/fileTreePath.d.ts

@@ -0,0 +1,11 @@
+import type { FileTreeNode } from '.';
+interface IsMovingTheSamePathParams {
+    draggedPath: string;
+    dropzonePath: string | null;
+    dragFileTreeNode?: FileTreeNode;
+}
+/**
+ *
+ */
+export declare function isMovingTheSamePath({ draggedPath, dropzonePath, dragFileTreeNode, }: IsMovingTheSamePathParams): boolean;
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ *
+ */
+function isMovingTheSamePath({
+  draggedPath,
+  dropzonePath,
+  dragFileTreeNode
+}) {
+  var _a;
+
+  return draggedPath === `${dropzonePath || ''}${dropzonePath ? '/' : ''}${(_a = dragFileTreeNode === null || dragFileTreeNode === void 0 ? void 0 : dragFileTreeNode.title) !== null && _a !== void 0 ? _a : ''}`;
+}
+
+export { isMovingTheSamePath };

package/es/components/shared/file-tree/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './fileTreeFiles';
+export * from './fileTreeGenerator';
+export * from './fileTreeInput';
+export * from './fileTreeItem';
+export * from './fileTreePath';

package/es/components/shared/file-viewer/FileViewer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface FileViewerBaseProps {
+    filename: string;
+    fileurl?: null | string;
+    locale?: string;
+}
+declare const _default: (props: FileViewerBaseProps) => JSX.Element;
+export default _default;

package/es/components/shared/file-viewer/FileViewer.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Flex, Hspace, Icon } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilDownload } from '@elice/icons';
+import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import FileSaver from 'file-saver';
+import mime from 'mime';
+import styled from 'styled-components';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import FileViewerNonViewable from './FileViewerNonViewable.js';
+
+const AsyncFileViewerCsv = React.lazy(() => import('./FileViewerCsv.js'));
+const AsyncFileViewerImage = React.lazy(() => import('./FileViewerImage.js'));
+const AsyncFileViewerIpynb = React.lazy(() => import('./FileViewerIpynb.js'));
+const AsyncFileViewerText = React.lazy(() => import('./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%;"], base.color.navy9);
+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;}}"], base.color.primary5);
+
+const FileViewer = ({
+  filename,
+  fileurl,
+  locale
+}) => {
+  const [showInTextViewer, setShowInTextViewer] = useState(false);
+  /**
+   * Mime type of file.
+   */
+
+  const mimeType = React.useMemo(() => mime.getType(filename || '') || filename.split('.').pop() || '', [filename]);
+  /**
+   * Preview component.
+   */
+
+  const PreviewComponent = React.useMemo(() => {
+    // Text file (or binary file which shows as text)
+    if (showInTextViewer || mimeType.startsWith('text/')) {
+      return AsyncFileViewerText;
+    } // Image file
+    else if (mimeType.startsWith('image/')) {
+      return AsyncFileViewerImage;
+    } // CSV file
+    else if (mimeType === 'text/csv') {
+      return AsyncFileViewerCsv;
+    } // ipynb (Jupyter Notebook)
+    else if (mimeType === 'ipynb') {
+      return AsyncFileViewerIpynb;
+    } // other...
+    else {
+      return null;
+    }
+  }, [mimeType, showInTextViewer]);
+  /**
+   * Handle download button click.
+   */
+
+  const handleDownloadClick = e => {
+    e.preventDefault();
+
+    if (!fileurl) {
+      return;
+    }
+
+    fetch(fileurl).then(res => res.blob()).then(blob => FileSaver.saveAs(blob, filename)).catch(() => {
+      const win = window.open(fileurl, '_blank');
+
+      if (win) {
+        win.focus();
+      }
+    });
+  };
+  /**
+   * Readonly banner.
+   */
+
+
+  const renderReadonlyBanner = () => {
+    if (!fileurl) {
+      return null;
+    }
+
+    return React.createElement(StyledReadonlyBanner, null, React.createElement(FormattedMessage, {
+      id: "fileViewer.readOnlyBanner.content"
+    }), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement("a", {
+      href: fileurl,
+      onClick: handleDownloadClick
+    }, React.createElement(Icon, {
+      icon: eilDownload,
+      size: "tiny"
+    }), React.createElement(FormattedMessage, {
+      id: "fileViewer.readOnlyBanner.downloadButton"
+    })));
+  };
+  /**
+   * File viewer.
+   */
+
+
+  const renderFileViewer = () => {
+    // preview-able file
+    if (PreviewComponent) {
+      return React.createElement(React.Suspense, {
+        fallback: React.createElement(ExerciseFileShimmer, null)
+      }, React.createElement(Flex, {
+        column: true,
+        width: "100%",
+        height: "100%"
+      }, renderReadonlyBanner(), React.createElement(PreviewComponent, {
+        filename: filename,
+        fileurl: fileurl
+      })));
+    } // binary file
+
+
+    return React.createElement(FileViewerNonViewable, {
+      fileurl: fileurl,
+      filename: filename,
+      locale: locale,
+      onTextViewerClick: () => {
+        setShowInTextViewer(true);
+      }
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledFileWrapper, {
+    children: renderFileViewer()
+  });
+}; //
+//
+//
+
+
+var FileViewer$1 = (props => {
+  return React.createElement(MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: phrasesEn,
+      ko: phrasesKo
+    }
+  }, React.createElement(FileViewer, Object.assign({}, props)));
+});
+
+export { FileViewer$1 as default };

package/es/components/shared/file-viewer/FileViewerCsv.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FileViewerBaseProps } from './FileViewer';
+declare const FileViewerCsv: React.VFC<FileViewerBaseProps>;
+export default FileViewerCsv;

package/es/components/shared/file-viewer/FileViewerCsv.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CsvToHtmlTable } from 'react-csv-to-table';
+import styled from 'styled-components';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+
+const StyledCSVTable = styled.div.withConfig({
+  componentId: "sc-pyv7uu-0"
+})(["flex:1 1 0%;width:100%;overflow:auto;color:white;padding:0.5rem;background-color:#222;.csv-table{font-family:'Elice Digital Coding',fixed-width;border:1px solid #999;border-collapse:collapse;th,td{border:1px solid #999;padding:0.25rem;}tr:nth-child(odd){background:#444;}}"]);
+
+const FileViewerCsv = ({
+  fileurl
+}) => {
+  const [content, setContent] = React.useState(null);
+  React.useEffect(() => {
+    if (!fileurl) {
+      return;
+    }
+
+    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
+  }, [fileurl]); //
+  //
+  //
+
+  if (!content) {
+    return React.createElement(ExerciseFileShimmer, null);
+  }
+
+  return React.createElement(StyledCSVTable, null, React.createElement(CsvToHtmlTable, {
+    data: content,
+    csvDelimiter: ",",
+    tableClassName: "csv-table"
+  }));
+};
+
+export { FileViewerCsv as default };

package/es/components/shared/file-viewer/FileViewerImage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FileViewerBaseProps } from './FileViewer';
+declare const FileViewerImage: React.VFC<FileViewerBaseProps>;
+export default FileViewerImage;

package/es/components/shared/file-viewer/FileViewerImage.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Flex } from '@elice/blocks';
+import styled from 'styled-components';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+
+const StyledImage = styled.img.withConfig({
+  componentId: "sc-1bnx7lz-0"
+})(["max-width:100%;max-height:100%;height:auto;width:auto;"]);
+
+const FileViewerImage = ({
+  fileurl
+}) => {
+  if (!fileurl) {
+    return React.createElement(ExerciseFileShimmer, null);
+  }
+
+  return React.createElement(Flex, {
+    align: "center",
+    justify: "center",
+    auto: true,
+    overflow: "hidden"
+  }, React.createElement(StyledImage, {
+    src: fileurl,
+    alt: fileurl
+  }));
+};
+
+export { FileViewerImage as default };

package/es/components/shared/file-viewer/FileViewerIpynb.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FileViewerBaseProps } from './FileViewer';
+declare const FileViewerIpynb: React.VFC<FileViewerBaseProps>;
+export default FileViewerIpynb;

package/es/components/shared/file-viewer/FileViewerIpynb.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import NotebookPreview from '@nteract/notebook-preview';
+import styled from 'styled-components';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+
+const StyledNotebookWrapper = styled.div.withConfig({
+  componentId: "sc-1fmae1h-0"
+})(["width:100%;height:100%;overflow:auto;background-color:white;padding:1rem;.notebook-preview{width:100%;height:100%;}"]);
+
+const FileViewerIpynb = ({
+  fileurl
+}) => {
+  const [content, setContent] = React.useState(null);
+  React.useEffect(() => {
+    if (!fileurl) {
+      return;
+    }
+
+    fetch(fileurl).then(res => res.text()).then(JSON.parse).then(setContent).catch(err => console.error(err));
+  }, [fileurl]); //
+  //
+  //
+
+  if (!content) {
+    return React.createElement(ExerciseFileShimmer, null);
+  }
+
+  return React.createElement(StyledNotebookWrapper, null, React.createElement(NotebookPreview, {
+    notebook: content
+  }));
+};
+
+export { FileViewerIpynb as default };

package/es/components/shared/file-viewer/FileViewerNonViewable.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { FileViewerBaseProps } from './FileViewer';
+interface FileViewerNonViewableProps extends FileViewerBaseProps {
+    onTextViewerClick?: () => void;
+}
+declare const _default: (props: FileViewerNonViewableProps) => JSX.Element;
+export default _default;