@elice/material-exercise 1.220803.0

package/es/components/shared/file-tree/FileTreeListItemContentMenu.js

@@ -0,0 +1,303 @@
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Menu, List, Dialog } from '@elice/blocks';
+import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
+
+const FileTreeListItemContentMenu = ({
+  node,
+  anchorEl,
+  onClose
+}) => {
+  const intl = useIntl();
+  const {
+    allowToggleHidden,
+    allowToggleReadonly
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onHiddenSet,
+    onReadOnlySet,
+    onFileDelete,
+    onDirectoryDelete
+  } = useFileTreeDispatch();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  /**
+   * Set file readonly.
+   */
+
+  const handleReadOnlySet = () => {
+    if (typeof onReadOnlySet === 'function') {
+      onReadOnlySet({
+        path: node.path,
+        isReadOnly: true
+      });
+    }
+  };
+  /**
+   * Unset file readonly.
+   */
+
+
+  const handleReadOnlyUnset = () => {
+    if (typeof onReadOnlySet === 'function') {
+      onReadOnlySet({
+        path: node.path,
+        isReadOnly: false
+      });
+    }
+  };
+  /**
+   * Set file hidden.
+   */
+
+
+  const handleHiddenSet = () => {
+    if (typeof onHiddenSet === 'function') {
+      onHiddenSet({
+        path: node.path,
+        isHidden: true
+      });
+    }
+  };
+  /**
+   * Unset file hidden.
+   */
+
+
+  const handleHiddenUnset = () => {
+    if (typeof onHiddenSet === 'function') {
+      onHiddenSet({
+        path: node.path,
+        isHidden: false
+      });
+    }
+  };
+  /**
+   * Create a new file.
+   */
+
+
+  const handleNewFile = () => {
+    dispatch({
+      type: 'NEW_INPUT_OPEN',
+      newInput: {
+        type: 'file',
+        path: node.path
+      }
+    });
+  };
+  /**
+   * Create a new directory.
+   */
+
+
+  const handleNewDirectory = () => {
+    dispatch({
+      type: 'NEW_INPUT_OPEN',
+      newInput: {
+        type: 'directory',
+        path: node.path
+      }
+    });
+  };
+  /**
+   * Rename file.
+   */
+
+
+  const handleRename = () => {
+    dispatch({
+      type: 'UPDATE_RENAME_INPUT_PATH',
+      path: node.path
+    });
+  };
+  /**
+   * Delete file.
+   */
+
+
+  const handleDelete = () => {
+    if (node.isDirectory && typeof onDirectoryDelete === 'function') {
+      void onDirectoryDelete(node.path);
+    }
+
+    if (!node.isDirectory && typeof onFileDelete === 'function') {
+      void onFileDelete(node.path);
+    }
+  };
+  /**
+   * Set file readonly.
+   */
+
+
+  const renderMenuItemReadOnlySet = () => {
+    if (!allowToggleReadonly || node.isDirectory || node.isReadonly || node.isHidden) {
+      return null;
+    }
+
+    return React.createElement(List.Item, {
+      onClick: handleReadOnlySet
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.readOnlySet"
+    })));
+  };
+  /**
+   * Unset file readonly.
+   */
+
+
+  const renderMenuItemReadOnlyUnset = () => {
+    if (!allowToggleReadonly || node.isDirectory || !node.isReadonly) {
+      return null;
+    }
+
+    return React.createElement(List.Item, {
+      onClick: handleReadOnlyUnset
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.readOnlyUnset"
+    })));
+  };
+  /**
+   * Set file hidden.
+   */
+
+
+  const renderMenuItemHiddenSet = () => {
+    if (!allowToggleHidden || node.isDirectory || node.isReadonly || node.isHidden) {
+      return null;
+    }
+
+    return React.createElement(List.Item, {
+      onClick: handleHiddenSet
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.hiddenSet"
+    })));
+  };
+  /**
+   * Unset file hidden.
+   */
+
+
+  const renderMenuItemHiddenUnset = () => {
+    if (!allowToggleHidden || node.isDirectory || !node.isHidden) {
+      return null;
+    }
+
+    return React.createElement(List.Item, {
+      onClick: handleHiddenUnset
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.hiddenUnset"
+    })));
+  };
+  /**
+   * New file.
+   */
+
+
+  const renderMenuItemNewFile = () => {
+    if (!node.isDirectory) {
+      return null;
+    }
+
+    return React.createElement(List.Item, {
+      onClick: handleNewFile
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.newFile"
+    })));
+  };
+  /**
+   * New directory.
+   */
+
+
+  const renderMenuItemNewDirectory = () => {
+    if (!node.isDirectory) {
+      return null;
+    }
+
+    return React.createElement(List.Item, {
+      onClick: handleNewDirectory
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.newDirectory"
+    })));
+  };
+  /**
+   * Rename file.
+   */
+
+
+  const renderMenuItemRename = () => {
+    return React.createElement(List.Item, {
+      disabled: !node.isRemovable,
+      onClick: handleRename
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.rename"
+    })));
+  };
+  /**
+   * Delete file.
+   */
+
+
+  const renderMenuItemDelete = () => {
+    return React.createElement(List.Item, {
+      disabled: !node.isRemovable,
+      onClick: () => setDeleteDialogOpen(true)
+    }, React.createElement(List.ItemText, null, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.item.delete"
+    })));
+  };
+  /**
+   * Menu.
+   */
+
+
+  const renderMenu = () => {
+    return React.createElement(Menu, {
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      size: "xsmall",
+      placement: "right-start",
+      dark: true,
+      onClose: onClose
+    }, renderMenuItemReadOnlySet(), renderMenuItemReadOnlyUnset(), renderMenuItemHiddenSet(), renderMenuItemHiddenUnset(), renderMenuItemNewFile(), renderMenuItemNewDirectory(), renderMenuItemRename(), renderMenuItemDelete());
+  };
+  /**
+   * Dialog for confirm delete.
+   */
+
+
+  const renderDeleteConfirmDialog = () => {
+    if (!isDeleteDialogOpen) {
+      return null;
+    }
+
+    return React.createElement(Dialog, {
+      type: "warning",
+      title: intl.formatMessage({
+        id: 'fileTree.list.item.content.menu.deleteConfirmDialog.title'
+      }),
+      body: intl.formatMessage({
+        id: 'fileTree.list.item.content.menu.deleteConfirmDialog.body'
+      }, {
+        title: node.title
+      }),
+      onHide: () => setDeleteDialogOpen(false)
+    }, React.createElement(Dialog.CloseButton, {
+      onClick: () => setDeleteDialogOpen(false)
+    }, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.deleteConfirmDialog.cancel"
+    })), React.createElement(Dialog.ActionButton, {
+      onClick: handleDelete
+    }, React.createElement(FormattedMessage, {
+      id: "fileTree.list.item.content.menu.deleteConfirmDialog.confirm"
+    })));
+  }; //
+  //
+  //
+
+
+  return React.createElement(React.Fragment, null, renderMenu(), renderDeleteConfirmDialog());
+};
+
+export { FileTreeListItemContentMenu as default };

package/es/components/shared/file-tree/FileTreeListItems.d.ts

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

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

@@ -0,0 +1,204 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
+import FileTreeListItemContent from './FileTreeListItemContent.js';
+import { validateFilesSize } from './utils/fileTreeFiles.js';
+import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
+import { isMovingTheSamePath } from './utils/fileTreePath.js';
+import { StyledTreeItems, StyledTreeItem } from './FileTreeListItems.styled.js';
+
+const FileTreeListItems = ({
+  node,
+  indent = 1
+}) => {
+  const uniqCompId = 'treeitem';
+  const {
+    activePath,
+    newInput,
+    dropzonePath,
+    renameInputPath,
+    fileTree,
+    maxFileUploadSize,
+    isHiddenFilelistVisible
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onFileMove,
+    onDirectoryMove,
+    onFilesUpload
+  } = useFileTreeDispatch();
+  /**
+   *
+   */
+
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
+    if (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: 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 (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.createElement(StyledTreeItems, {
+    style: {
+      backgroundColor: dropzonePath === '' ? base.color.primary7 : 'transparent'
+    }
+  }, node.children.filter(childNode => isHiddenFilelistVisible ? true : !childNode.isHidden).map((childNode, index) => React.createElement(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 ? base.color.primary7 : ''
+    }
+  }, React.createElement(FileTreeListItemContent, {
+    node: childNode,
+    parentNode: node,
+    indent: indent
+  }), childNode.children.length > 0 && childNode.expanded ? React.createElement(FileTreeListItems, {
+    node: childNode,
+    indent: indent
+  }) : null)));
+};
+
+export { FileTreeListItems as default };

package/es/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/es/components/shared/file-tree/FileTreeListItems.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const StyledTreeItems = styled.ul.withConfig({
+  componentId: "sc-1bh7pa8-0"
+})(["padding:0;margin:0;overflow:hidden;"]);
+const StyledTreeItem = styled.li.withConfig({
+  componentId: "sc-1bh7pa8-1"
+})(["list-style:none;cursor:pointer;"]);
+
+export { StyledTreeItem, StyledTreeItems };

package/es/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/es/components/shared/file-tree/FileTreeToolbar.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { eilFileAdd, eilFolderAdd, eilUpload } from '@elice/icons';
+import ExerciseMenuButton from '../exercise-menu-button/ExerciseMenuButton.js';
+import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
+import { validateFilesSize } from './utils/fileTreeFiles.js';
+import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
+import { StyledFileTreeToolbar } from './FileTreeToolbar.styled.js';
+
+const FileTreeToolbar = ({
+  className
+}) => {
+  const intl = useIntl();
+  const {
+    activePath,
+    fileTree,
+    maxFileUploadSize
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onFilesUpload
+  } = useFileTreeDispatch();
+  const inputRef = React.useRef(null);
+  /**
+   * File add button.
+   */
+
+  const renderFileAddButton = () => {
+    return React.createElement(ExerciseMenuButton, {
+      icon: 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: getTargetDirectoryPath(activeFileNode)
+          }
+        });
+      }
+    });
+  };
+  /**
+   * Folder add button.
+   */
+
+
+  const renderFolderAddButton = () => {
+    return React.createElement(ExerciseMenuButton, {
+      icon: 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: getTargetDirectoryPath(activeFileNode)
+          }
+        });
+      }
+    });
+  };
+  /**
+   * File upload button.
+   */
+
+
+  const renderFileUploadButton = () => {
+    return React.createElement(React.Fragment, null, React.createElement(ExerciseMenuButton, {
+      icon: 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.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 (validateFilesSize(files, maxFileUploadSize)) {
+            onFilesUpload({
+              files,
+              path: ''
+            });
+          }
+        }
+      }
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledFileTreeToolbar, {
+    className: className
+  }, renderFileAddButton(), renderFolderAddButton(), renderFileUploadButton());
+};
+
+var FileTreeToolbar$1 = FileTreeToolbar;
+
+export { FileTreeToolbar$1 as default };

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

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

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

@@ -0,0 +1,8 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledFileTreeToolbar = styled.div.withConfig({
+  componentId: "sc-1lmdwux-0"
+})(["flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", ";"], base.color.navy8);
+
+export { StyledFileTreeToolbar };