Hide folders on overflow

Saifullah-dev · Sep 13, 2024 · 969af30 · 969af30
1 parent d9185cb
commit 969af30
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 11 deletions.
diff --git a/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx b/frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx
@@ -1,30 +1,117 @@
-import { useEffect, useState } from "react";
-import { MdHome, MdOutlineNavigateNext } from "react-icons/md";
-import "./BreadCrumb.scss";
+import { useEffect, useRef, useState } from "react";
+import { MdHome, MdMoreHoriz, MdOutlineNavigateNext } from "react-icons/md";
 import { useFileNavigation } from "../../contexts/FileNavigationContext";
+import "./BreadCrumb.scss";
 
 const BreadCrumb = () => {
   const [folders, setFolders] = useState([]);
+  const [hiddenFoldersIndexes, setHiddenFoldersIndexes] = useState([]);
   const { currentPath, setCurrentPath } = useFileNavigation();
+  const breadCrumbRef = useRef(null);
+  const foldersRef = useRef([]);
+
+  const [hiddenFolders, setHiddenFolders] = useState([]);
+  const [hiddenFoldersWidth, setHiddenFoldersWidth] = useState([]);
+
+  const getBreadCrumbWidth = () => {
+    const containerWidth = breadCrumbRef.current.clientWidth;
+    const containerStyles = getComputedStyle(breadCrumbRef.current);
+    const paddingLeft = parseFloat(containerStyles.paddingLeft);
+    const flexGap = parseFloat(containerStyles.gap) * (folders.length - 1);
+    return containerWidth - (paddingLeft + flexGap);
+  };
+
+  const isBreadCrumbOverflowing = () => {
+    return breadCrumbRef.current.scrollWidth > breadCrumbRef.current.clientWidth;
+  };
+
+  // Change Hidden Folders on resize
+  // useEffect(() => {
+  //   if (folders.length > 0) {
+  //     const homeFolderWidth = foldersRef.current[0].clientWidth;
+  //     const availableSpace = getBreadCrumbWidth() - homeFolderWidth;
+
+  //     setHiddenFoldersIndexes(() => {
+  //       return folders.map((_, index) => {
+  //         if (index === 0) return false;
+
+  //         const remainingFolders = foldersRef.current.slice(index);
+  //         const remainingFoldersWidth = remainingFolders.reduce((prev, curr) => {
+  //           if (!curr) return prev;
+  //           return prev + curr.clientWidth;
+  //         }, 0);
+
+  //         if (remainingFoldersWidth > availableSpace) return true;
+  //         else return false;
+  //       });
+  //     });
+  //   }
+  // }, [folders]);
+  //
 
   useEffect(() => {
     setFolders(currentPath?.split("/"));
+    setHiddenFolders([]);
+    setHiddenFoldersWidth([]);
   }, [currentPath]);
 
   const switchPath = (index) => {
     if (index < folders.length - 1) {
       setCurrentPath(() => {
-        const toSlice = folders.length - (index + 1);
-        const switchFolders = folders.slice(0, -toSlice);
+        const toSlice = folders.length + hiddenFolders.length - (index + 1 + hiddenFolders.length);
+        const copyFolders = folders.slice(1);
+        const switchFolders = ["", ...hiddenFolders, ...copyFolders].slice(0, -toSlice);
+        foldersRef.current = foldersRef.current.slice(0, -toSlice);
         return switchFolders.join("/");
       });
     }
   };
 
+  const checkAvailableSpace = () => {
+    const availableSpace = getBreadCrumbWidth();
+    const remainingFoldersWidth = foldersRef.current.reduce((prev, curr) => {
+      if (!curr) return prev;
+      return prev + curr.clientWidth;
+    }, 0);
+
+    return availableSpace - remainingFoldersWidth;
+  };
+
+  useEffect(() => {
+    if (isBreadCrumbOverflowing()) {
+      const hiddenFolder = folders[1];
+      setHiddenFoldersWidth((prev) => [...prev, foldersRef.current[1].clientWidth]);
+      setHiddenFolders((prev) => [...prev, hiddenFolder]);
+      setFolders((prev) => prev.filter((_, index) => index !== 1));
+      foldersRef.current = foldersRef.current.filter((_, index) => index !== 1);
+    }
+  }, [isBreadCrumbOverflowing]);
+
+  // useEffect(() => {
+  //   if (checkAvailableSpace() >= hiddenFoldersWidth.at(-1) && hiddenFolders.length > 0) {
+  //     setFolders((prev) => {
+  //       const prevFolders = prev.slice(hiddenFolders.length);
+  //       const newFolders = ["", hiddenFolders.at(-1), ...prevFolders];
+  //       return newFolders;
+  //     });
+  //     setHiddenFolders((prev) => prev.slice(0, -1));
+  //     setHiddenFoldersWidth((prev) => prev.slice(0, -1));
+  //   }
+  // }, [breadCrumbRef.current?.clientWidth, currentPath]);
+
+  console.table(folders, "Folders");
+  console.table(hiddenFolders, "Hidden Folders");
+  console.table(hiddenFoldersWidth, "Hidden Folders Width");
+
   return (
-    <div className="breadcrumb">
+    <div className="breadcrumb" ref={breadCrumbRef}>
       {folders.map((folder, index) => (
-        <span key={index} className="folder-name" onClick={() => switchPath(index)}>
+        <span
+          key={index}
+          className="folder-name"
+          onClick={() => switchPath(index)}
+          ref={(el) => (foldersRef.current[index] = el)}
+        >
           {index === 0 ? (
             <>
               <MdHome /> Home

diff --git a/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss b/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss
@@ -5,8 +5,8 @@
   display: flex;
   gap: 0.5rem;
   border-bottom: 1px solid #dddddd;
-  padding: 10px 15px;
-  overflow-x: scroll;
+  padding: 10px 0 10PX 15px;
+  overflow-x: hidden;
 
   &::-webkit-scrollbar {
     height: 3px;
@@ -15,4 +15,4 @@
   &::-webkit-scrollbar-thumb {
     background: $primary-color !important;
   }
-}
+}
diff --git a/frontend/src/FileManager/FileList/FileItem.jsx b/frontend/src/FileManager/FileList/FileItem.jsx
@@ -83,7 +83,7 @@ const FileItem = ({
   const handleFileAccess = () => {
     setVisible(false);
     if (file.isDirectory) {
-      setCurrentPath((prev) => prev + "/" + file.name);
+      setCurrentPath(file.path);
       setSelectedFileIndex(null);
       setSelectedFile(null);
     } else {

diff --git a/frontend/src/FileManager/FileManager.jsx b/frontend/src/FileManager/FileManager.jsx
@@ -93,6 +93,8 @@ const FileManager = ({
   );
 };
 
+FileManager.displayName = "FileManager";
+
 FileManager.propTypes = {
   files: PropTypes.arrayOf(
     PropTypes.shape({