@elice/material-exercise 1.220803.0

package/cjs/components/shared/file-tabs/FileTab.styled.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+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 TAB_MIN_WIDTH = '7rem';
+const TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+const TAB_BACKGROUND_COLOR = designTokens.base.color.navy8;
+const TAB_ACTIVE_BACKGROUND_COLOR = designTokens.base.color.navy9;
+const TAB_HOVERED_BACKGROUND_COLOR = designTokens.base.color.navy7; // ========== Tab label ==========
+
+const StyledTabLabel = styled__default["default"].div.withConfig({
+  componentId: "sc-1pe3776-0"
+})(["flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;& > *{margin-right:0.5rem;}"]);
+const StyledTabLabelFilename = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-1pe3776-1"
+})(["color:", ";font-weight:500;"], designTokens.base.color.gray4);
+const StyledTabLabelDirname = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-1pe3776-2"
+})(["font-weight:500;"]);
+const StyledTabCloseButton = styled__default["default"](blocks.IconButton).withConfig({
+  componentId: "sc-1pe3776-3"
+})(["flex:0 0 auto;margin-right:0.25rem !important;opacity:0;transition:opacity 150ms ease-in-out;"]); // ========== Tab content ==========
+
+const StyledTabContent = styled__default["default"].div.withConfig({
+  componentId: "sc-1pe3776-4"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", ");&:hover{", "{color:", ";}", "{opacity:1;}}"], TAB_VERTICAL_BORDER_WIDTH, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton); // ========== Tab active border ==========
+
+const StyledTabActiveBorder = styled__default["default"].div.withConfig({
+  componentId: "sc-1pe3776-5"
+})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, designTokens.base.color.primary5); // ========== Tab ==========
+
+const cssTabActive = styled.css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
+const cssTabHovered = styled.css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3);
+const StyledTab = styled__default["default"].div.withConfig({
+  componentId: "sc-1pe3776-6"
+})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, designTokens.base.color.navy7, props => props.active && cssTabActive, props => props.hovered && cssTabHovered);
+
+exports.StyledTab = StyledTab;
+exports.StyledTabActiveBorder = StyledTabActiveBorder;
+exports.StyledTabCloseButton = StyledTabCloseButton;
+exports.StyledTabContent = StyledTabContent;
+exports.StyledTabLabel = StyledTabLabel;
+exports.StyledTabLabelDirname = StyledTabLabelDirname;
+exports.StyledTabLabelFilename = StyledTabLabelFilename;

package/cjs/components/shared/file-tabs/FileTabs.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface FileTabsProps {
+    /** Filename(path) of opened files (e.g. foo/bar/baz.js) */
+    openedTabs: string[];
+    /** Filename(path) of active file. */
+    activeTab?: string;
+    /** On tab close. */
+    onCloseTab: (filename: string) => void;
+    /** On tab selected. */
+    onSelectTab: (filename: string) => void;
+    /** On tab order changed. */
+    onTabOrderChange: (currentIndex: number, movedIndex: number) => void;
+}
+declare const FileTabs: React.VFC<FileTabsProps>;
+export default FileTabs;

package/cjs/components/shared/file-tabs/FileTabs.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var React = require('react');
+var throttle = require('lodash/throttle');
+var FileTab = require('./FileTab.js');
+var util = require('./util.js');
+var FileTabs_styled = require('./FileTabs.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
+
+const FileTabs = ({
+  openedTabs,
+  activeTab,
+  onSelectTab,
+  onCloseTab,
+  onTabOrderChange
+}) => {
+  const [curDraggingTabIndex, setCurDraggingTabIndex] = React__default["default"].useState(null);
+  const [curHoveredTabIndex, setCurHoveredTabIndex] = React__default["default"].useState(null);
+  /**
+   * Tab props.
+   */
+
+  const tabs = React__default["default"].useMemo(() => util.getTabProps(openedTabs), [openedTabs]);
+  /**
+   * Reset state.
+   */
+
+  const reset = () => {
+    setCurDraggingTabIndex(null);
+    setCurHoveredTabIndex(null);
+  };
+  /**
+   * Throttled `setCurHoveredTabIndex`.
+   */
+
+
+  const setThrottledCurHoveredTabIndex = React__default["default"].useCallback(throttle__default["default"](setCurHoveredTabIndex, 100, {
+    leading: true,
+    trailing: false
+  }), []);
+  /**
+   * Handle tab drag start.
+   */
+
+  const getTabDragStartHandler = React__default["default"].useCallback(index => _ => {
+    setCurDraggingTabIndex(index);
+  }, []);
+  /**
+   * Handle tab drag over.
+   */
+
+  const getTabDragOverHandler = React__default["default"].useCallback(index => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setThrottledCurHoveredTabIndex(index);
+  }, [setThrottledCurHoveredTabIndex]);
+  /**
+   * Handle tab drop.
+   */
+
+  const handleTabDrop = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (curDraggingTabIndex !== null && curHoveredTabIndex !== null && typeof onTabOrderChange === 'function') {
+      onTabOrderChange(curDraggingTabIndex, curHoveredTabIndex);
+    }
+
+    reset();
+  };
+  /**
+   * Tabs.
+   */
+
+
+  const renderTabs = () => {
+    return tabs.map((tab, index) => React__default["default"].createElement(FileTab, Object.assign({}, tab, {
+      key: tab.fullname,
+      active: activeTab === tab.fullname,
+      hovered: curHoveredTabIndex === index,
+      onClick: () => onSelectTab(tab.fullname),
+      onClose: () => onCloseTab(tab.fullname),
+      onDragStart: getTabDragStartHandler(index),
+      onDragOver: getTabDragOverHandler(index),
+      onDragEnd: reset,
+      onDrop: handleTabDrop
+    })));
+  };
+  /**
+   * Tab drop zone.
+   */
+
+
+  const renderTabsDropZone = () => {
+    return React__default["default"].createElement(FileTabs_styled.StyledTabsDropZone, {
+      onDragOver: getTabDragOverHandler(tabs.length - 1),
+      onDrop: handleTabDrop
+    });
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(FileTabs_styled.StyledTabs, {
+    role: "tablist"
+  }, renderTabs(), renderTabsDropZone());
+};
+
+module.exports = FileTabs;

package/cjs/components/shared/file-tabs/FileTabs.styled.d.ts

@@ -0,0 +1,6 @@
+interface StyledTabsDropZoneProps {
+    hovered?: boolean;
+}
+export declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTabsDropZone: import("styled-components").StyledComponent<"div", any, StyledTabsDropZoneProps, never>;
+export {};

package/cjs/components/shared/file-tabs/FileTabs.styled.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var stylesheets = require('../../../constants/stylesheets.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledTabs = styled__default["default"].div.withConfig({
+  componentId: "sc-ifwvzh-0"
+})(["display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", ""], designTokens.base.color.navy8, stylesheets.getMaterialScrollBarCss({
+  height: '2px',
+  borderRadius: '2px',
+  hideable: true
+}));
+const StyledTabsDropZone = styled__default["default"].div.withConfig({
+  componentId: "sc-ifwvzh-1"
+})(["flex:1;height:100%;background-color:transparent;"]);
+
+exports.StyledTabs = StyledTabs;
+exports.StyledTabsDropZone = StyledTabsDropZone;

package/cjs/components/shared/file-tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileTabs } from './FileTabs';
+export type { FileTabsProps } from './FileTabs';

package/cjs/components/shared/file-tabs/util.d.ts

@@ -0,0 +1,10 @@
+export interface TabProps {
+    fullname: string;
+    chunks: string[];
+    filename: string;
+    isFilenameDuplicated: boolean;
+}
+/**
+ * Get file tab props.
+ */
+export declare function getTabProps(paths: string[]): TabProps[];

package/cjs/components/shared/file-tabs/util.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Get file tab props.
+ */
+function getTabProps(paths) {
+  const tabs = []; // parse file paths
+
+  for (const path of paths) {
+    const chunks = path.split('/');
+    const filename = chunks.pop();
+
+    if (filename) {
+      tabs.push({
+        fullname: path,
+        chunks,
+        filename,
+        isFilenameDuplicated: false
+      });
+    }
+  } // check filename duplication
+
+
+  tabs.forEach(thisTab => {
+    thisTab.isFilenameDuplicated = tabs.filter(thatTab => thisTab.filename === thatTab.filename).length > 1;
+  });
+  return tabs;
+}
+
+exports.getTabProps = getTabProps;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { FileTreeTheme } from './context';
+import type { OnDirectoryAdd, OnDirectoryDelete, OnDirectoryMove, OnFileAdd, OnFileDelete, OnFileMove, OnFilesUpload, OnHiddenSet, OnInitialOpenFileSet, OnReadOnlySet } from './interface';
+/**
+ * [exercise image]
+ * filelist : exercise image 에 업로드한 project_file zipfile 의 파일 목록 (.elice 폴더 제외)
+ * task_filelist : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+ * hidden_filelist : exercise_image.edit API 에 hidden_filelist 로 설정한 파일 목록. exercise_image.exercise_file.get API 에서 student 이하의 권한을 가진 유저에게 "access_denied" 에러를 보냄.
+ * read_only_filelist : exercise_image.edit API 에 read_only_filelist 로 설정한 파일 목록
+ * initial_open_filelist : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록.
+ * main_task_filelist : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록. backward compatibility 를 위해 남아 있음
+ *
+ * [exercise room]
+ * filelist : exercise room 에 user_file.add 를 통해 업로드된 파일 목록
+ * task_filelist : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+ *
+ * editable 의 기준 : 파일 크기가 1MB 이하이고, https://github.com/codemirror/CodeMirror/blob/master/mode/meta.js 에 정의된 확장자(2020년 6월 기준 => 5.56.0 tag 정도)를 가지는 파일
+ *
+ * ref: https://elice.slack.com/archives/C04BACPKW/p1650949625169019?thread_ts=1650948898.201199&cid=C04BACPKW
+ */
+export interface FileTreeProps {
+    children: React.ReactNode;
+    theme?: FileTreeTheme;
+    collapsed?: boolean;
+    activePath: string;
+    allowToggleReadonly?: boolean;
+    allowToggleHidden?: boolean;
+    loading?: boolean;
+    /** 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;
+    /** 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;
+    /** initial-open file list (Admin) */
+    initialOpenFilelist?: string[];
+    /** options */
+    options?: {
+        indent?: number;
+    };
+    onSetInitialOpenFile?: OnInitialOpenFileSet;
+    onFileDelete?: OnFileDelete;
+    onDirectoryDelete?: OnDirectoryDelete;
+    onFileMove?: OnFileMove;
+    onDirectoryMove?: OnDirectoryMove;
+    onReadOnlySet?: OnReadOnlySet;
+    onHiddenSet?: OnHiddenSet;
+    onActivePathChange: (path: string, isDirectory: boolean) => void;
+    style?: React.CSSProperties;
+    locale?: string;
+}
+declare const _default: React.VFC<FileTreeProps> & {
+    Toolbar: React.VFC<import("./FileTreeToolbar").FileTreeToolbarProps>;
+    List: React.ForwardRefExoticComponent<import("./FileTreeList").FileTreeListProps & React.RefAttributes<HTMLDivElement>>;
+    Config: React.ForwardRefExoticComponent<import("./FileTreeConfig").FileTreeConfigProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var styled = require('styled-components');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var FileTreeConfig = require('./FileTreeConfig.js');
+var FileTreeList = require('./FileTreeList.js');
+var FileTreeToolbar = require('./FileTreeToolbar.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledFileTreeWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-6ext2i-0"
+})(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
+const StyledLoading = styled__default["default"].div.withConfig({
+  componentId: "sc-6ext2i-1"
+})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:", ";opacity:0.5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;"], designTokens.base.color.navy7);
+
+const FileTree = props => {
+  return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: en,
+      ko: ko
+    }
+  }, React__default["default"].createElement(FileTreeContext.FileTreeProvider, Object.assign({}, props), React__default["default"].createElement(StyledFileTreeWrapper, {
+    style: props.style
+  }, props.loading ? React__default["default"].createElement(StyledLoading, null, React__default["default"].createElement(blocks.Spinner, null)) : null, props.children)));
+};
+
+var FileTree$1 = Object.assign(FileTree, {
+  Toolbar: FileTreeToolbar,
+  List: FileTreeList,
+  Config: FileTreeConfig
+});
+
+module.exports = FileTree$1;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface FileTreeConfigProps {
+    /** class */
+    className?: string;
+    /** custom style */
+    style?: React.CSSProperties;
+    /** initial open filelist */
+    initialOpenFilelist: string[];
+    /** called when initial filelist changes */
+    onInitialOpenFileListChange: (initialOpenFileList: string[]) => void;
+}
+declare const FileTreeConfig: React.ForwardRefExoticComponent<FileTreeConfigProps & React.RefAttributes<HTMLDivElement>>;
+export default FileTreeConfig;

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var classnames = require('classnames');
+var styled = require('styled-components');
+var FileTreeContext = require('./context/FileTreeContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledFileTreeConfig = styled__default["default"].div.withConfig({
+  componentId: "sc-1dxe3z0-0"
+})(["background-color:", ";padding:1rem;"], designTokens.base.color.navy8);
+const FileTreeConfig = React.forwardRef(({
+  className,
+  style,
+  onInitialOpenFileListChange,
+  initialOpenFilelist
+}, ref) => {
+  const {
+    mode,
+    initialOpenFileListTemp
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch
+  } = FileTreeContext.useFileTreeDispatch();
+  React__default["default"].useEffect(() => {
+    dispatch({
+      type: 'INITIAL_OPEN_FILELIST_UPDATE',
+      initialOpenFilelist
+    });
+  }, [dispatch, initialOpenFilelist]);
+  return React__default["default"].createElement(StyledFileTreeConfig, {
+    className: classnames__default["default"]('em-file-tree__config', className),
+    ref: ref,
+    style: Object.assign({}, style)
+  }, React__default["default"].createElement(blocks.Button, {
+    block: true,
+    size: "small",
+    role: "white",
+    transparent: true,
+    onClick: () => {
+      if ([// when mode changes from 'checkbox' to 'default'
+      mode === 'checkbox', // when some value of initial open filelist changes'
+      JSON.stringify(initialOpenFilelist.sort()) !== JSON.stringify(initialOpenFileListTemp.sort()), // when onInitialOpenFileListChange is function'
+      typeof onInitialOpenFileListChange === 'function'].every(Boolean)) {
+        onInitialOpenFileListChange(initialOpenFileListTemp);
+      }
+
+      dispatch({
+        type: 'UPDATE_MODE',
+        mode: mode === 'checkbox' ? 'default' : 'checkbox'
+      });
+    }
+  }, mode === 'default' ? `Initial Open Files(${initialOpenFileListTemp.length})` : `Settings (${initialOpenFileListTemp.length})`));
+});
+var FileTreeConfig$1 = FileTreeConfig;
+
+module.exports = FileTreeConfig$1;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface FileTreeListProps {
+    /** class */
+    className?: string;
+    /** custom style */
+    style?: React.CSSProperties;
+    /** options */
+    options?: {
+        indent?: number;
+    };
+}
+declare const FileTreeList: React.ForwardRefExoticComponent<FileTreeListProps & React.RefAttributes<HTMLDivElement>>;
+export default FileTreeList;

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

@@ -0,0 +1,135 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var classnames = require('classnames');
+var styled = require('styled-components');
+var stylesheets = require('../../../constants/stylesheets.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var FileTreeListItems = require('./FileTreeListItems.js');
+var fileTreeFiles = require('./utils/fileTreeFiles.js');
+var fileTreePath = require('./utils/fileTreePath.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledFileTreeList = styled__default["default"].div.withConfig({
+  componentId: "sc-5ddw80-0"
+})(["flex:auto;background-color:", ";overflow-x:hidden;overflow-y:overlay;", ""], designTokens.base.color.navy9, stylesheets.getMaterialScrollBarCss({
+  width: '0.375rem',
+  borderRadius: '2px',
+  hideable: true
+}));
+const FileTreeList = React.forwardRef(({
+  className,
+  style,
+  options
+}, ref) => {
+  const {
+    fileTree,
+    dropzonePath,
+    draggedPath,
+    maxFileUploadSize
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch,
+    onDirectoryMove,
+    onFileMove,
+    onFilesUpload
+  } = FileTreeContext.useFileTreeDispatch();
+
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
+    if (fileTreeFiles.validateFilesSize(files, maxFileUploadSize)) {
+      if (typeof onFilesUpload === 'function') {
+        onFilesUpload({
+          files,
+          path
+        });
+      }
+    }
+  };
+
+  return React__default["default"].createElement(StyledFileTreeList, {
+    className: classnames__default["default"]('em-file-tree__list', className),
+    ref: ref,
+    role: "tree",
+    style: Object.assign({
+      backgroundColor: dropzonePath === '' ? designTokens.base.color.primary7 : ''
+    }, style),
+    onDragEnter: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const isFiles = e.dataTransfer.types[0] === 'Files';
+
+      if (draggedPath !== null || isFiles) {
+        dispatch({
+          type: 'UPDATE_DROPZONE_PATH',
+          path: ''
+        });
+      }
+    },
+    onDragOver: e => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDrop: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      const draggedPath = e.dataTransfer.getData('text'); // file drop
+
+      if (e.dataTransfer.files.length > 0) {
+        handleFilesUpload({
+          files: e.dataTransfer.files,
+          path: ''
+        });
+        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) {
+          if (dragFileTreeNode.isDirectory) {
+            onDirectoryMove && onDirectoryMove({
+              currentFilename: dragFileTreeNode.path,
+              newPath: '',
+              newName: dragFileTreeNode.title
+            });
+          } else {
+            onFileMove && onFileMove({
+              currentFilename: dragFileTreeNode.path,
+              newPath: '',
+              newName: dragFileTreeNode.title
+            });
+          }
+        }
+      }
+    }
+  }, React__default["default"].createElement(FileTreeListItems, {
+    node: fileTree,
+    indent: options === null || options === void 0 ? void 0 : options.indent
+  }));
+});
+var FileTreeList$1 = FileTreeList;
+
+module.exports = FileTreeList$1;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FileTreeNode } from './utils';
+interface FileTreeListItemContentProps {
+    node: FileTreeNode;
+    parentNode: FileTreeNode;
+    indent?: number;
+}
+declare const FileTreeListItemContent: React.VFC<FileTreeListItemContentProps>;
+export default FileTreeListItemContent;