DnD on storage

packages/common-components/src/Breadcrumb/Breadcrumb.tsx

@@ -88,6 +88,9 @@ const useStyles = makeStyles(
  menuTitle: {
  padding: `0px ${constants.generalUnit * 1.5}px 0px ${constants.generalUnit * 0.5}px`
  },
+ menuOptions: {
+ zIndex: zIndex?.layer1
+ },
  menuIcon: {
  width: 12,
  height: 12,
@@ -158,6 +161,7 @@ const Breadcrumb = ({
  animation="rotate"
  classNames={{
  item: classes.menuItem,
+ options: classes.menuOptions,
  title: classes.menuTitle,
  icon: classes.menuIcon,
  titleText: classes.menuTitleText

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -382,6 +382,7 @@ const FileSystemItem = ({
  canDrop: (item) => isFolder && !item.ids.includes(file.cid),
  drop: (item: { ids: string[]}) => {
  moveItems && moveItems(item.ids, getPathWithFile(currentPath, name))
+ resetSelectedFiles()
  },
  collect: (monitor) => ({
  isOverMove: monitor.isOver() && !monitor.getItem<{ids: string[]}>().ids.includes(file.cid)

packages/storage-ui/src/App.tsx

@@ -18,6 +18,13 @@ import { NotificationsProvider } from "./Contexts/NotificationsContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
 import { HelmetProvider } from "react-helmet-async"
 import ErrorModal from "./Components/Modules/ErrorModal"
+import { StylesProvider, createGenerateClassName } from "@material-ui/styles"
+
+// making material and jss use one className generator
+const generateClassName = createGenerateClassName({
+ productionPrefix: "c",
+ disableGlobal: true
+})
 
 if (
  process.env.NODE_ENV === "production" &&
@@ -67,49 +74,51 @@ const App = () => {
 
  return (
  <HelmetProvider>
- <ThemeSwitcher
- storageKey="css.themeKey"
- themes={{ light: lightTheme, dark: darkTheme }}
- >
- <ErrorBoundary
- fallback={ErrorModal}
- onReset={() => window.location.reload()}
+ <StylesProvider generateClassName={generateClassName}>
+ <ThemeSwitcher
+ storageKey="css.themeKey"
+ themes={{ light: lightTheme, dark: darkTheme }}
  >
- <CssBaseline />
- <LanguageProvider availableLanguages={availableLanguages}>
- <ToastProvider
-  autoDismiss
-  defaultPosition="bottomRight">
-  <Web3Provider
-  onboardConfig={onboardConfig}
- checkNetwork={false}
- cacheWalletSelection={canUseLocalStorage}
- >
- <StorageApiProvider
- apiUrl={apiUrl}
- withLocalStorage={true}
+ <ErrorBoundary
+  fallback={ErrorModal}
+ onReset={() => window.location.reload()}
+ >
+ <CssBaseline />
+ <LanguageProvider availableLanguages={availableLanguages}>
+ <ToastProvider
+ autoDismiss
+ defaultPosition="bottomRight">
+  <Web3Provider
+  onboardConfig={onboardConfig}
+ checkNetwork={false}
+ cacheWalletSelection={canUseLocalStorage}
  >
- <UserProvider>
- <StorageProvider>
- <Router>
- <NotificationsProvider>
- <BillingProvider>
- <PosthogProvider>
- <AppWrapper>
- <StorageRoutes />
- </AppWrapper>
- </PosthogProvider>
- </BillingProvider>
- </NotificationsProvider>
- </Router>
- </StorageProvider>
- </UserProvider>
- </StorageApiProvider>
- </Web3Provider>
- </ToastProvider>
- </LanguageProvider>
- </ErrorBoundary>
- </ThemeSwitcher>
+ <StorageApiProvider
+ apiUrl={apiUrl}
+ withLocalStorage={true}
+ >
+ <UserProvider>
+ <StorageProvider>
+ <Router>
+ <NotificationsProvider>
+ <BillingProvider>
+ <PosthogProvider>
+ <AppWrapper>
+ <StorageRoutes />
+ </AppWrapper>
+ </PosthogProvider>
+ </BillingProvider>
+ </NotificationsProvider>
+ </Router>
+ </StorageProvider>
+ </UserProvider>
+ </StorageApiProvider>
+ </Web3Provider>
+ </ToastProvider>
+ </LanguageProvider>
+ </ErrorBoundary>
+ </ThemeSwitcher>
+ </StylesProvider>
  </HelmetProvider>
  )
 }

packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemItem.tsx

@@ -3,10 +3,6 @@ import {
  FormikTextInput,
  Typography,
  Button,
- FileImageSvg,
- FilePdfSvg,
- FileTextSvg,
- FolderFilledSvg,
  DownloadSvg,
  DeleteSvg,
  EditSvg,
@@ -32,6 +28,7 @@ import { BrowserView, FileOperation } from "../../../Contexts/types"
 import { DragTypes } from "../FilesList/DragConstants"
 import { nameValidator } from "../../../Utils/validationSchema"
 import { getPathWithFile } from "../../../Utils/pathUtils"
+import { getIconForItem } from "../../../Utils/getItemIcon"
 
 const useStyles = makeStyles(({ breakpoints, constants }: CSSTheme) => {
  return createStyles({
@@ -142,17 +139,7 @@ const FileSystemItem = ({
  resetSelectedFiles
 }: IFileSystemItemProps) => {
  const { downloadFile, currentPath, handleUploadOnDrop, moveItems } = useFileBrowser()
- const { cid, name, isFolder, content_type } = file
- let Icon
- if (isFolder) {
- Icon = FolderFilledSvg
- } else if (content_type.includes("image")) {
- Icon = FileImageSvg
- } else if (content_type.includes("pdf")) {
- Icon = FilePdfSvg
- } else {
- Icon = FileTextSvg
- }
+ const { cid, name, isFolder } = file
 
  const { desktop } = useThemeSwitcher()
  const classes = useStyles()
@@ -163,11 +150,16 @@ const FileSystemItem = ({
  onSubmit: (values: {name: string}) => {
  const newName = values.name.trim()
 
- editing && newName && handleRename && handleRename(editing, newName)
+ editing && newName && newName !== name && handleRename && handleRename(editing, newName)
  },
  enableReinitialize: true
  })
 
+ const stopEditing = useCallback(() => {
+ setEditing(undefined)
+ formik.resetForm()
+ }, [formik, setEditing])
+
  const allMenuItems: Record<FileOperation, IMenuItem> = {
  rename: {
  contents: (
@@ -283,19 +275,20 @@ const FileSystemItem = ({
  (itemOperation) => allMenuItems[itemOperation]
  )
 
- const [, dragMoveRef, preview] = useDrag(() =>
- ({ type: DragTypes.MOVABLE_FILE,
-  item: () => {
-  if (selected.findIndex(item => item.cid === file.cid && item.name === file.name) >= 0) {
-  return { selected: selected }
- } else {
-  return { selected: [...selected, {
-  cid: file.cid,
-  name: file.name
- }] }
- }
+ const [, dragMoveRef, preview] = useDrag({
+ type: DragTypes.MOVABLE_FILE,
+ canDrag: !editing,
+ item: () => {
+ if (selected.findIndex(item => item.cid === file.cid && item.name === file.name) >= 0) {
+ return { selected: selected }
+ } else {
+ return { selected: [...selected, {
+ cid: file.cid,
+ name: file.name
+ }] }
  }
- }), [selected])
+ }
+ })
 
  useEffect(() => {
  // This gets called after every render, by default
@@ -311,17 +304,21 @@ const FileSystemItem = ({
 
  const [{ isOverMove }, dropMoveRef] = useDrop({
  accept: DragTypes.MOVABLE_FILE,
- canDrop: () => isFolder,
+ canDrop: (item) => isFolder &&
+ item.selected.findIndex((s) => s.cid === file.cid && s.name === file.name) < 0,
  drop: (item: {selected: ISelectedFile[]}) => {
  moveItems && moveItems(item.selected, getPathWithFile(currentPath, name))
+ resetSelectedFiles()
  },
  collect: (monitor) => ({
- isOverMove: monitor.isOver()
+ isOverMove: monitor.isOver() &&
+ monitor.getItem<{selected: ISelectedFile[]}>().selected.findIndex((s) => s.cid === file.cid && s.name === file.name) < 0
  })
  })
 
  const [{ isOverUpload }, dropUploadRef] = useDrop({
  accept: [NativeTypes.FILE],
+ canDrop: () => isFolder,
  drop: (item: any) => {
  handleUploadOnDrop &&
  handleUploadOnDrop(item.files, item.items, getPathWithFile(currentPath, name))
@@ -333,12 +330,20 @@ const FileSystemItem = ({
 
  const fileOrFolderRef = useRef<any>()
 
- if (!editing && isFolder) {
- dropMoveRef(fileOrFolderRef)
- dropUploadRef(fileOrFolderRef)
+ if (fileOrFolderRef?.current) {
+ if (editing) {
+ fileOrFolderRef.current.draggable = false
+ } else {
+ fileOrFolderRef.current.draggable = true
+ }
  }
- if (!editing && !isFolder) {
+
+ if (!editing && desktop) {
  dragMoveRef(fileOrFolderRef)
+ if (isFolder) {
+ dropMoveRef(fileOrFolderRef)
+ dropUploadRef(fileOrFolderRef)
+ }
  }
 
  const onFilePreview = useCallback(() => {
@@ -402,6 +407,8 @@ const FileSystemItem = ({
  click(e)
  }
 
+ const Icon = getIconForItem(file)
+
  const itemProps = {
  ref: fileOrFolderRef,
  currentPath,
@@ -437,7 +444,8 @@ const FileSystemItem = ({
  inner: classes.modalInner
  }}
  closePosition="none"
- onClose={() => setEditing(undefined)}
+ active={editing === cid}
+ onClose={stopEditing}
  >
  <FormikProvider value={formik}>
  <Form className={classes.renameModal}>