{crumbs && moduleRootPath && (
({
+ ...crumb,
+ component: (i < crumbs.length - 1)
+ ? {
+ console.log(item, crumb.path)
+ moveItems && crumb.path && moveItems(item.selected, crumb.path)
+ resetSelectedCids()
+ }}
+ handleUpload={(item) => handleUploadOnDrop &&
+ crumb.path &&
+ handleUploadOnDrop(item.files, item.items, crumb.path)
+ }
+ />
+ : null
+ }))}
homeOnClick={() => redirect(moduleRootPath)}
+ homeRef={homeBreadcrumbRef}
+ homeActive={isOverUploadHomeBreadcrumb || isOverMoveHomeBreadcrumb}
showDropDown={!desktop}
/>
)}
diff --git a/packages/storage-ui/src/Components/Modules/FilesList/FolderBreadcrumb.tsx b/packages/storage-ui/src/Components/Modules/FilesList/FolderBreadcrumb.tsx
new file mode 100644
index 0000000000..c096005f05
--- /dev/null
+++ b/packages/storage-ui/src/Components/Modules/FilesList/FolderBreadcrumb.tsx
@@ -0,0 +1,85 @@
+import { Typography } from "@chainsafe/common-components"
+import { createStyles, makeStyles } from "@material-ui/core"
+import clsx from "clsx"
+import React, { useRef } from "react"
+import { useDrop } from "react-dnd"
+import { NativeTypes } from "react-dnd-html5-backend"
+import { CSSTheme } from "../../../Themes/types"
+import { DragTypes } from "./DragConstants"
+
+const useStyles = makeStyles(
+ ({ palette }: CSSTheme) => {
+ return createStyles({
+ crumb: {
+ fontSize: 14,
+ display: "inline-block",
+ cursor: "pointer",
+ maxWidth: 120,
+ whiteSpace: "nowrap",
+ overflow: "hidden",
+ textOverflow: "ellipsis"
+ },
+ wrapper: {
+ border: "1px solid transparent",
+ padding: "0 4px",
+ "&.active": {
+ borderColor: palette.primary.main
+ }
+ },
+ fullWidth: {
+ width: "100%"
+ }
+ })
+ }
+)
+
+interface IFolderBreadcrumb {
+ onClick?: () => void
+ folderName: string
+ handleMove: (item: any) => void
+ handleUpload: (item: any) => void
+}
+
+const FolderBreadcrumb = ({ onClick, folderName, handleMove, handleUpload }: IFolderBreadcrumb) => {
+ const classes = useStyles()
+
+ const [{ isOverUploadFolderBreadcrumb }, dropUploadFolderBreadcrumbRef] = useDrop({
+ accept: [NativeTypes.FILE],
+ drop: handleUpload,
+ collect: (monitor) => ({
+ isOverUploadFolderBreadcrumb: monitor.isOver()
+ })
+ })
+
+ const [{ isOverMoveFolderBreadcrumb }, dropMoveFolderBreadcrumbRef] = useDrop({
+ accept: DragTypes.MOVABLE_FILE,
+ drop: handleMove,
+ collect: (monitor) => ({
+ isOverMoveFolderBreadcrumb: monitor.isOver()
+ })
+ })
+
+ const folderBreadcrumbRef = useRef(null)
+ dropMoveFolderBreadcrumbRef(folderBreadcrumbRef)
+ dropUploadFolderBreadcrumbRef(folderBreadcrumbRef)
+
+ return (
+
+
+ {folderName}
+
+
+ )
+}
+
+export default FolderBreadcrumb
\ No newline at end of file
diff --git a/packages/storage-ui/src/Components/Pages/BucketPage.tsx b/packages/storage-ui/src/Components/Pages/BucketPage.tsx
index 9ef4483be4..e7d137cb9b 100644
--- a/packages/storage-ui/src/Components/Pages/BucketPage.tsx
+++ b/packages/storage-ui/src/Components/Pages/BucketPage.tsx
@@ -6,7 +6,8 @@ import {
getURISafePathFromArray,
getPathWithFile,
extractFileBrowserPathFromURL,
- getUrlSafePathWithFile
+ getUrlSafePathWithFile,
+ joinArrayOfPaths
} from "../../Utils/pathUtils"
import { IBulkOperations, IFileBrowserModuleProps, IFilesTableBrowserProps } from "../../Contexts/types"
import FilesList from "../Modules/FilesList/FilesList"
@@ -153,14 +154,17 @@ const BucketPage: React.FC = () => {
// Breadcrumbs/paths
const arrayOfPaths = useMemo(() => getArrayOfPaths(currentPath), [currentPath])
- const crumbs: Crumb[] = useMemo(() => arrayOfPaths.map((path, index) => ({
- text: decodeURIComponent(path),
- onClick: () => {
- redirect(
- ROUTE_LINKS.Bucket(bucketId, getURISafePathFromArray(arrayOfPaths.slice(0, index + 1)))
- )
- }
- })), [arrayOfPaths, bucketId, redirect])
+
+ const crumbs: Crumb[] = useMemo(() => arrayOfPaths.map((path, index) => {
+ return {
+ text: decodeURIComponent(path),
+ onClick: () => {
+ redirect(
+ ROUTE_LINKS.Bucket(bucketId, getURISafePathFromArray(arrayOfPaths.slice(0, index + 1)))
+ )
+ },
+ path: joinArrayOfPaths(arrayOfPaths.slice(0, index + 1))
+ }}), [arrayOfPaths, redirect, bucketId])
const currentFolder = useMemo(() => {
return !!arrayOfPaths.length && arrayOfPaths[arrayOfPaths.length - 1]
diff --git a/packages/storage-ui/src/Utils/getItemIcon.ts b/packages/storage-ui/src/Utils/getItemIcon.ts
new file mode 100644
index 0000000000..bab7a74d4e
--- /dev/null
+++ b/packages/storage-ui/src/Utils/getItemIcon.ts
@@ -0,0 +1,15 @@
+import { FileAudioIcon, FileIcon, FileImageIcon, FilePdfIcon, FileTextIcon, FileVideoIcon, FolderIcon } from "@chainsafe/common-components"
+import { FileSystemItem } from "../Contexts/StorageContext"
+import { matcher } from "./MimeMatcher"
+
+export const getIconForItem = (item: FileSystemItem) => {
+ if (item.isFolder) return FolderIcon
+
+ if (matcher(["image/*"])(item.content_type)) return FileImageIcon
+ if (matcher(["text/*"])(item.content_type)) return FileTextIcon
+ if (matcher(["application/pdf"])(item.content_type)) return FilePdfIcon
+ if (matcher(["audio/*"])(item.content_type)) return FileAudioIcon
+ if (matcher(["video/*"])(item.content_type)) return FileVideoIcon
+
+ return FileIcon
+}
diff --git a/packages/storage-ui/src/Utils/pathUtils.ts b/packages/storage-ui/src/Utils/pathUtils.ts
index a9a24d88b3..be16f0fbf3 100644
--- a/packages/storage-ui/src/Utils/pathUtils.ts
+++ b/packages/storage-ui/src/Utils/pathUtils.ts
@@ -20,6 +20,15 @@ export function getArrayOfPaths(path: string): string[] {
}
}
+// [] -> "/"
+// ["path", "to", "this"] => "/path/to/this"
+export function joinArrayOfPaths(arrayOfPaths: string[]): string {
+ if (!arrayOfPaths.length) return "/"
+ else {
+ return `/${arrayOfPaths.join("/")}`
+ }
+}
+
// [] -> "/"
// ["path", "to", "this"] -> "/path/to/this"
export function getURISafePathFromArray(arrayOfPaths: string[]): string {