@elice/material-exercise 1.220803.0

package/cjs/components/shared/file-tree/FileTreeListItems.js

@@ -0,0 +1,210 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var FileTreeListItemContent = require('./FileTreeListItemContent.js');
+var fileTreeFiles = require('./utils/fileTreeFiles.js');
+var fileTreeInput = require('./utils/fileTreeInput.js');
+var fileTreePath = require('./utils/fileTreePath.js');
+var FileTreeListItems_styled = require('./FileTreeListItems.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const FileTreeListItems = ({
+  node,
+  indent = 1
+}) => {
+  const uniqCompId = 'treeitem';
+  const {
+    activePath,
+    newInput,
+    dropzonePath,
+    renameInputPath,
+    fileTree,
+    maxFileUploadSize,
+    isHiddenFilelistVisible
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch,
+    onFileMove,
+    onDirectoryMove,
+    onFilesUpload
+  } = FileTreeContext.useFileTreeDispatch();
+  /**
+   *
+   */
+
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
+    if (fileTreeFiles.validateFilesSize(files, maxFileUploadSize)) {
+      if (typeof onFilesUpload === 'function') {
+        onFilesUpload({
+          files,
+          path
+        });
+      }
+    }
+  };
+  /**
+   *
+   */
+
+
+  const getDragStartHandler = childNode => e => {
+    var _a, _b;
+
+    e.stopPropagation(); // 🚨 data should be set in order to trigger onDrop event in "React".
+
+    e.dataTransfer.setData('text/plain', (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'id');
+    dispatch({
+      type: 'UPDATE_DRAGGED_PATH',
+      path: childNode.path
+    });
+  };
+  /**
+   *
+   */
+
+
+  const getDragEndHandler = childNode => e => {
+    e.preventDefault();
+    e.stopPropagation(); // clear drag data
+
+    e.dataTransfer.clearData(); // reset dragged path
+
+    dispatch({
+      type: 'UPDATE_DRAGGED_PATH',
+      path: null
+    }); // reset dropzone path
+
+    dispatch({
+      type: 'UPDATE_DROPZONE_PATH',
+      path: null
+    });
+  };
+  /**
+   *
+   */
+
+
+  const getDragEnterHandler = childNode => e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (childNode.isDirectory) {
+      dispatch({
+        type: 'ADD_OPENED_DIRECTORY_LIST',
+        path: childNode.path
+      });
+    }
+
+    dispatch({
+      type: 'UPDATE_DROPZONE_PATH',
+      path: fileTreeInput.getTargetDirectoryPath(childNode)
+    });
+  };
+  /**
+   * Prevent default behavior (Prevent file from being opened)
+   * - ref: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#prevent_the_browser's_default_drag_behavior
+   */
+
+
+  const getDragOverHandler = _ => e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  /**
+   *
+   */
+
+
+  const getDropHandler = _ => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const draggedPath = e.dataTransfer.getData('text').replace(`${uniqCompId}-`, ''); // file drop
+
+    if (e.dataTransfer.files.length > 0 && dropzonePath !== null) {
+      handleFilesUpload({
+        files: e.dataTransfer.files,
+        path: dropzonePath
+      });
+      dispatch({
+        type: 'UPDATE_DRAGGED_PATH',
+        path: null
+      });
+      dispatch({
+        type: 'UPDATE_DROPZONE_PATH',
+        path: null
+      });
+    } else {
+      // file move
+      const dragFileTreeNode = fileTree.findTreeNode(draggedPath); // file does not move. from a to a (the same path).
+
+      if (fileTreePath.isMovingTheSamePath({
+        draggedPath,
+        dropzonePath,
+        dragFileTreeNode
+      })) {
+        return;
+      }
+
+      if (dragFileTreeNode && dropzonePath !== null) {
+        if (dragFileTreeNode.isDirectory) {
+          onDirectoryMove && onDirectoryMove({
+            currentFilename: dragFileTreeNode.path,
+            newPath: dropzonePath,
+            newName: dragFileTreeNode.title
+          });
+        } else {
+          onFileMove && onFileMove({
+            currentFilename: dragFileTreeNode.path,
+            newPath: dropzonePath,
+            newName: dragFileTreeNode.title
+          });
+        }
+      }
+    }
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(FileTreeListItems_styled.StyledTreeItems, {
+    style: {
+      backgroundColor: dropzonePath === '' ? designTokens.base.color.primary7 : 'transparent'
+    }
+  }, node.children.filter(childNode => isHiddenFilelistVisible ? true : !childNode.isHidden).map((childNode, index) => React__default["default"].createElement(FileTreeListItems_styled.StyledTreeItem, {
+    key: childNode.path,
+    id: `${uniqCompId}-${childNode.path}`,
+    role: "treeitem",
+    "aria-selected": childNode.path === activePath,
+    "aria-label": childNode.title,
+    "aria-level": indent,
+    "aria-setsize": node.children.length,
+    "aria-posinset": index + 1,
+    "aria-expanded": childNode.isDirectory && childNode.expanded,
+    draggable: !newInput && !renameInputPath && childNode.isRemovable,
+    onDragStart: getDragStartHandler(childNode),
+    onDragEnd: getDragEndHandler(),
+    onDragEnter: getDragEnterHandler(childNode),
+    onDragOver: getDragOverHandler(),
+    onDrop: getDropHandler(),
+    style: {
+      backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? designTokens.base.color.primary7 : ''
+    }
+  }, React__default["default"].createElement(FileTreeListItemContent, {
+    node: childNode,
+    parentNode: node,
+    indent: indent
+  }), childNode.children.length > 0 && childNode.expanded ? React__default["default"].createElement(FileTreeListItems, {
+    node: childNode,
+    indent: indent
+  }) : null)));
+};
+
+module.exports = FileTreeListItems;

package/cjs/components/shared/file-tree/FileTreeListItems.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledTreeItems: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledTreeItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/cjs/components/shared/file-tree/FileTreeListItems.styled.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledTreeItems = styled__default["default"].ul.withConfig({
+  componentId: "sc-1bh7pa8-0"
+})(["padding:0;margin:0;overflow:hidden;"]);
+const StyledTreeItem = styled__default["default"].li.withConfig({
+  componentId: "sc-1bh7pa8-1"
+})(["list-style:none;cursor:pointer;"]);
+
+exports.StyledTreeItem = StyledTreeItem;
+exports.StyledTreeItems = StyledTreeItems;

package/cjs/components/shared/file-tree/FileTreeToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FileTreeToolbarProps {
+    className?: string;
+}
+declare const FileTreeToolbar: React.VFC<FileTreeToolbarProps>;
+export default FileTreeToolbar;

package/cjs/components/shared/file-tree/FileTreeToolbar.js

@@ -0,0 +1,128 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var icons = require('@elice/icons');
+var ExerciseMenuButton = require('../exercise-menu-button/ExerciseMenuButton.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var fileTreeFiles = require('./utils/fileTreeFiles.js');
+var fileTreeInput = require('./utils/fileTreeInput.js');
+var FileTreeToolbar_styled = require('./FileTreeToolbar.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const FileTreeToolbar = ({
+  className
+}) => {
+  const intl = reactIntl.useIntl();
+  const {
+    activePath,
+    fileTree,
+    maxFileUploadSize
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch,
+    onFilesUpload
+  } = FileTreeContext.useFileTreeDispatch();
+  const inputRef = React__default["default"].useRef(null);
+  /**
+   * File add button.
+   */
+
+  const renderFileAddButton = () => {
+    return React__default["default"].createElement(ExerciseMenuButton, {
+      icon: icons.eilFileAdd,
+      title: intl.formatMessage({
+        id: 'fileTree.toolbar.newFile'
+      }),
+      placement: "bottom-start",
+      onClick: () => {
+        const activeFileNode = fileTree.findTreeNode(activePath);
+        dispatch({
+          type: 'NEW_INPUT_OPEN',
+          newInput: {
+            type: 'file',
+            path: fileTreeInput.getTargetDirectoryPath(activeFileNode)
+          }
+        });
+      }
+    });
+  };
+  /**
+   * Folder add button.
+   */
+
+
+  const renderFolderAddButton = () => {
+    return React__default["default"].createElement(ExerciseMenuButton, {
+      icon: icons.eilFolderAdd,
+      title: intl.formatMessage({
+        id: 'fileTree.toolbar.newDirectory'
+      }),
+      placement: "bottom-start",
+      onClick: () => {
+        const activeFileNode = fileTree.findTreeNode(activePath);
+        dispatch({
+          type: 'NEW_INPUT_OPEN',
+          newInput: {
+            type: 'directory',
+            path: fileTreeInput.getTargetDirectoryPath(activeFileNode)
+          }
+        });
+      }
+    });
+  };
+  /**
+   * File upload button.
+   */
+
+
+  const renderFileUploadButton = () => {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ExerciseMenuButton, {
+      icon: icons.eilUpload,
+      title: intl.formatMessage({
+        id: 'fileTree.toolbar.upload'
+      }),
+      placement: "bottom-start",
+      onClick: () => {
+        var _a;
+
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+      }
+    }), React__default["default"].createElement("input", {
+      ref: inputRef,
+      type: "file",
+      multiple: true,
+      style: {
+        display: 'none'
+      },
+      onChange: e => {
+        var _a;
+
+        const files = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files;
+
+        if (files && typeof onFilesUpload === 'function') {
+          if (fileTreeFiles.validateFilesSize(files, maxFileUploadSize)) {
+            onFilesUpload({
+              files,
+              path: ''
+            });
+          }
+        }
+      }
+    }));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(FileTreeToolbar_styled.StyledFileTreeToolbar, {
+    className: className
+  }, renderFileAddButton(), renderFolderAddButton(), renderFileUploadButton());
+};
+
+var FileTreeToolbar$1 = FileTreeToolbar;
+
+module.exports = FileTreeToolbar$1;

package/cjs/components/shared/file-tree/FileTreeToolbar.styled.d.ts

@@ -0,0 +1 @@
+export declare const StyledFileTreeToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;

package/cjs/components/shared/file-tree/FileTreeToolbar.styled.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledFileTreeToolbar = styled__default["default"].div.withConfig({
+  componentId: "sc-1lmdwux-0"
+})(["flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", ";"], designTokens.base.color.navy8);
+
+exports.StyledFileTreeToolbar = StyledFileTreeToolbar;

package/cjs/components/shared/file-tree/context/FileTreeContext.d.ts

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { OnDirectoryAdd, OnDirectoryDelete, OnDirectoryMove, OnFileAdd, OnFileDelete, OnFileMove, OnFilesUpload, OnHiddenSet, OnInitialOpenFileSet, OnReadOnlySet } from '../interface';
+import type { FileTreeNode } from '../utils';
+export declare type FileTreeTheme = 'dark' | 'white';
+export interface FileTreeThemeOptions {
+    backgroundColor: string;
+}
+export interface NewInput {
+    type: 'file' | 'directory';
+    path: string;
+}
+export declare type Mode = 'default' | 'checkbox';
+export interface State {
+    mode: Mode;
+    maxFileUploadSize: number;
+    fileTree: FileTreeNode;
+    theme: FileTreeTheme;
+    openedDirectoryList: string[];
+    draggedPath: string | null;
+    dropzonePath: string | null;
+    newInput?: NewInput;
+    renameInputPath?: string;
+    initialOpenFileListTemp: string[];
+}
+declare type Action = {
+    type: 'UPDATE_THEME';
+    theme: State['theme'];
+} | {
+    type: 'TOGGLE_OPENED_DIRECTORY_LIST';
+    path: string;
+} | {
+    type: 'ADD_OPENED_DIRECTORY_LIST';
+    path: string;
+} | {
+    type: 'NEW_INPUT_OPEN';
+    newInput: NewInput;
+} | {
+    type: 'NEW_INPUT_CLOSE';
+    newInput: Pick<NewInput, 'path'>;
+} | {
+    type: 'UPDATE_FILE_TREE';
+    fileTree: FileTreeNode;
+} | {
+    type: 'UPDATE_RENAME_INPUT_PATH';
+    path: string;
+} | {
+    type: 'UPDATE_DRAGGED_PATH';
+    path: string | null;
+} | {
+    type: 'UPDATE_DROPZONE_PATH';
+    path: string | null;
+} | {
+    type: 'UPDATE_MODE';
+    mode: Mode;
+} | {
+    type: 'INITIAL_OPEN_FILELIST_UPDATE';
+    initialOpenFilelist: string[];
+} | {
+    type: 'INITIAL_OPEN_FILELIST_ADD';
+    path: string;
+} | {
+    type: 'INITIAL_OPEN_FILELIST_REMOVE';
+    path: string;
+};
+declare type Dispatch = (action: Action) => void;
+declare type FileTreeProviderProps = {
+    children: React.ReactNode;
+    theme?: FileTreeTheme;
+    collapsed?: boolean;
+    activePath: string;
+    allowToggleReadonly?: boolean;
+    allowToggleHidden?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    onActivePathChange: (path: string, isDirectory: boolean) => void;
+    /** max file upload size in MB */
+    maxFileUploadSize?: number;
+    /** calls when user upload files by input or dnd */
+    onFilesUpload?: OnFilesUpload;
+    /** calls when user clicks add file button */
+    onFileAdd?: OnFileAdd;
+    /** calls when user clicks add directory button */
+    onDirectoryAdd?: OnDirectoryAdd;
+    onHiddenSet?: OnHiddenSet;
+    onReadOnlySet?: OnReadOnlySet;
+    /** exerciseroom file list (User) */
+    exerciseRoomFilelist: string[];
+    /** readyExerciseRoom filelist (Admin) */
+    imageFilelist: string[];
+    /** readyExerciseRoom readOnly filelist (Admin) */
+    readOnlyFilelist?: string[];
+    /** readyExerciseRoom hidden filelist (Admin) */
+    hiddenFilelist?: string[];
+    /** whether the hiddenFilelist is visible or not */
+    isHiddenFilelistVisible?: boolean;
+    onFileDelete?: OnFileDelete;
+    onDirectoryDelete?: OnDirectoryDelete;
+    onFileMove?: OnFileMove;
+    onDirectoryMove?: OnDirectoryMove;
+};
+interface StateContextType extends State {
+    collapsed?: boolean;
+    activePath: string;
+    allowToggleReadonly: boolean;
+    allowToggleHidden: boolean;
+    draggedPath: string | null;
+    dropzonePath: string | null;
+    isHiddenFilelistVisible: boolean;
+}
+interface DispatchContextType {
+    dispatch: Dispatch;
+    onCollapse?: (collapsed: boolean) => void;
+    onActivePathChange: (path: string, isDirectory: boolean) => void;
+    onFileAdd?: OnFileAdd;
+    onDirectoryAdd?: OnDirectoryAdd;
+    onHiddenSet?: OnHiddenSet;
+    onReadOnlySet?: OnReadOnlySet;
+    onFileDelete?: OnFileDelete;
+    onDirectoryDelete?: OnDirectoryDelete;
+    onFileMove?: OnFileMove;
+    onDirectoryMove?: OnDirectoryMove;
+    onSetInitialOpenFile?: OnInitialOpenFileSet;
+    onFilesUpload?: OnFilesUpload;
+}
+declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): JSX.Element;
+declare function useFileTreeState(): StateContextType;
+declare function useFileTreeDispatch(): DispatchContextType;
+export { FileTreeProvider, useFileTreeState, useFileTreeDispatch };