Skip to content

Commit 25151b6

Browse files
Saifullah-devSaifullah-dev
committed
fix(navigation-pane): resolve breadcrumb overflow issue, add prop to enable/disable collapsible navigation pane feature
1 parent 8050388 commit 25151b6

23 files changed

+133
-55
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ type File = {
101101
| Name | Type | Description |
102102
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
103103
| `acceptedFileTypes` | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., `.txt, .png, .pdf`). If omitted, all file types are accepted. |
104+
| `collapsibleNav` | boolean | Enables a collapsible navigation pane on the left side. When `true`, a toggle will be shown to expand or collapse the navigation pane. `default: false`. |
105+
| `defaultNavExpanded` | boolean | Sets the default expanded (`true`) or collapsed (`false`) state of the navigation pane when `collapsibleNav` is enabled. This only affects the initial render. `default: true`. |
104106
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
105107
| `filePreviewPath` | string | The base URL for file previews e.g.`https://example.com`, file path will be appended automatically to it i.e. `https://example.com/yourFilePath`. |
106108
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#custom-file-preview). |

‎frontend/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ type File = {
101101
| Name | Type | Description |
102102
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
103103
| `acceptedFileTypes` | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., `.txt, .png, .pdf`). If omitted, all file types are accepted. |
104+
| `collapsibleNav` | boolean | Enables a collapsible navigation pane on the left side. When `true`, a toggle will be shown to expand or collapse the navigation pane. `default: false`. |
105+
| `defaultNavExpanded` | boolean | Sets the default expanded (`true`) or collapsed (`false`) state of the navigation pane when `collapsibleNav` is enabled. This only affects the initial render. `default: true`. |
104106
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
105107
| `filePreviewPath` | string | The base URL for file previews e.g.`https://example.com`, file path will be appended automatically to it i.e. `https://example.com/yourFilePath`. |
106108
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#custom-file-preview). |

‎frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@ import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
77
import { useTranslation } from "../../contexts/TranslationProvider";
88
import "./BreadCrumb.scss";
99

10-
const BreadCrumb = ({
11-
isNavigationPaneOpen,
12-
setNavigationPaneOpen,
13-
}) => {
10+
const BreadCrumb = ({ collapsibleNav, isNavigationPaneOpen, setNavigationPaneOpen }) => {
1411
const [folders, setFolders] = useState([]);
1512
const [hiddenFolders, setHiddenFolders] = useState([]);
1613
const [hiddenFoldersWidth, setHiddenFoldersWidth] = useState([]);
@@ -24,6 +21,7 @@ const BreadCrumb = ({
2421
setShowHiddenFolders(false);
2522
});
2623
const t = useTranslation();
24+
const navTogglerRef = useRef(null);
2725

2826
useEffect(() => {
2927
setFolders(() => {
@@ -47,9 +45,14 @@ const BreadCrumb = ({
4745
const containerWidth = breadCrumbRef.current.clientWidth;
4846
const containerStyles = getComputedStyle(breadCrumbRef.current);
4947
const paddingLeft = parseFloat(containerStyles.paddingLeft);
48+
const navTogglerGap = collapsibleNav ? 2 : 0;
49+
const navTogglerDividerWidth = 1;
50+
const navTogglerWidth = collapsibleNav
51+
? navTogglerRef.current?.clientWidth + navTogglerDividerWidth
52+
: 0;
5053
const moreBtnGap = hiddenFolders.length > 0 ? 1 : 0;
51-
const flexGap = parseFloat(containerStyles.gap) * (folders.length + moreBtnGap);
52-
return containerWidth - (paddingLeft + flexGap);
54+
const flexGap = parseFloat(containerStyles.gap) * (folders.length + moreBtnGap + navTogglerGap);
55+
return containerWidth - (paddingLeft + flexGap + navTogglerWidth);
5356
};
5457

5558
const checkAvailableSpace = () => {
@@ -84,15 +87,29 @@ const BreadCrumb = ({
8487
return (
8588
<div className="bread-crumb-container">
8689
<div className="breadcrumb" ref={breadCrumbRef}>
87-
<div style={{ display: "contents" }}>
88-
<span
89-
className="folder-name folder-name-btn"
90-
onClick={() => setNavigationPaneOpen((prev) => !prev)}
90+
{collapsibleNav && (
91+
<>
92+
<div
93+
ref={navTogglerRef}
94+
className="nav-toggler"
95+
title={`${
96+
isNavigationPaneOpen ? t("collapseNavigationPane") : t("expandNavigationPane")
97+
}`}
9198
>
92-
{isNavigationPaneOpen ? <TbLayoutSidebarLeftCollapseFilled /> : <TbLayoutSidebarLeftExpand />}
93-
</span>
94-
</div>
95-
<div style={{ width: '1px', backgroundColor: "#cfcfcf" }}></div>
99+
<span
100+
className="folder-name folder-name-btn"
101+
onClick={() => setNavigationPaneOpen((prev) => !prev)}
102+
>
103+
{isNavigationPaneOpen ? (
104+
<TbLayoutSidebarLeftCollapseFilled />
105+
) : (
106+
<TbLayoutSidebarLeftExpand />
107+
)}
108+
</span>
109+
</div>
110+
<div className="divider" />
111+
</>
112+
)}
96113
{folders.map((folder, index) => (
97114
<div key={index} style={{ display: "contents" }}>
98115
<span
@@ -141,6 +158,6 @@ BreadCrumb.displayName = "BreadCrumb";
141158
BreadCrumb.propTypes = {
142159
isNavigationPaneOpen: PropTypes.bool.isRequired,
143160
setNavigationPaneOpen: PropTypes.func.isRequired,
144-
}
161+
};
145162

146163
export default BreadCrumb;

‎frontend/src/FileManager/BreadCrumb/BreadCrumb.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@
2121
background: var(--file-manager-primary-color) !important;
2222
}
2323

24+
.nav-toggler {
25+
display: flex;
26+
align-items: center;
27+
}
28+
29+
.divider {
30+
width: 1px;
31+
background-color: $border-color;
32+
}
33+
2434
.folder-name {
2535
display: flex;
2636
align-items: center;

‎frontend/src/FileManager/FileManager.jsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@ const FileManager = ({
4949
fontFamily = "Nunito Sans, sans-serif",
5050
language = "en",
5151
permissions: userPermissions = {},
52-
showNavigationPane = true,
52+
collapsibleNav = false,
53+
defaultNavExpanded = true,
5354
}) => {
54-
const [isNavigationPaneOpen, setNavigationPaneOpen] = useState(showNavigationPane);
55+
const [isNavigationPaneOpen, setNavigationPaneOpen] = useState(defaultNavExpanded);
5556
const triggerAction = useTriggerAction();
5657
const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
5758
useColumnResize(20, 80);
@@ -89,10 +90,9 @@ const FileManager = ({
8990
className="files-container"
9091
>
9192
<div
92-
className="navigation-pane"
93+
className={`navigation-pane ${isNavigationPaneOpen ? "open" : "closed"}`}
9394
style={{
9495
width: colSizes.col1 + "%",
95-
display: isNavigationPaneOpen ? "block" : "none",
9696
}}
9797
>
9898
<NavigationPane onFileOpen={onFileOpen} />
@@ -102,8 +102,12 @@ const FileManager = ({
102102
/>
103103
</div>
104104

105-
<div className="folders-preview" style={{ width: (isNavigationPaneOpen ? colSizes.col2 : 100) + "%" }}>
105+
<div
106+
className="folders-preview"
107+
style={{ width: (isNavigationPaneOpen ? colSizes.col2 : 100) + "%" }}
108+
>
106109
<BreadCrumb
110+
collapsibleNav={collapsibleNav}
107111
isNavigationPaneOpen={isNavigationPaneOpen}
108112
setNavigationPaneOpen={setNavigationPaneOpen}
109113
/>
@@ -195,7 +199,8 @@ FileManager.propTypes = {
195199
download: PropTypes.bool,
196200
delete: PropTypes.bool,
197201
}),
198-
showNavigationPane: PropTypes.bool,
202+
collapsibleNav: PropTypes.bool,
203+
defaultNavExpanded: PropTypes.bool,
199204
};
200205

201206
export default FileManager;

‎frontend/src/FileManager/FileManager.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ svg {
7878
}
7979
}
8080

81+
.navigation-pane.open {
82+
display: block;
83+
}
84+
85+
.navigation-pane.closed {
86+
display: none;
87+
}
88+
8189
.folders-preview {
8290
z-index: 2;
8391
background-color: white;

‎frontend/src/locales/ar-SA.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@
4848
"percentDone": "{{percent}}% تم",
4949
"canceled": "تم الإلغاء",
5050
"invalidFileName": "لا يمكن أن يحتوي اسم الملف على أي من الحروف التالية: \\ / : * ? \" < > |",
51-
"folderExists": "هذا الموقع يحتوي بالفعل على مجلد باسم \"{{renameFile}}\"."
52-
}
51+
"folderExists": "هذا الموقع يحتوي بالفعل على مجلد باسم \"{{renameFile}}\".",
52+
"collapseNavigationPane": "طي لوحة التنقل",
53+
"expandNavigationPane": "توسيع لوحة التنقل"
54+
}

‎frontend/src/locales/de-DE.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@
4848
"percentDone": "{{percent}}% erledigt",
4949
"canceled": "Abgebrochen",
5050
"invalidFileName": "Ein Dateiname darf keines der folgenden Zeichen enthalten: \\ / : * ? \" < > |",
51-
"folderExists": "In diesem Zielordner gibt es bereits einen Ordner namens \"{{renameFile}}\"."
52-
}
51+
"folderExists": "In diesem Zielordner gibt es bereits einen Ordner namens \"{{renameFile}}\".",
52+
"collapseNavigationPane": "Navigationsbereich einklappen",
53+
"expandNavigationPane": "Navigationsbereich erweitern"
54+
}

‎frontend/src/locales/en-US.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@
4848
"percentDone": "{{percent}}% done",
4949
"canceled": "Canceled",
5050
"invalidFileName": "A file name can't contain any of the following characters: \\ / : * ? \" < > |",
51-
"folderExists": "This destination already contains a folder named \"{{renameFile}}\"."
52-
}
51+
"folderExists": "This destination already contains a folder named \"{{renameFile}}\".",
52+
"collapseNavigationPane": "Collapse Navigation Pane",
53+
"expandNavigationPane": "Expand Navigation Pane"
54+
}

‎frontend/src/locales/es-ES.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@
4848
"percentDone": "{{percent}}% completado",
4949
"canceled": "Cancelado",
5050
"invalidFileName": "Un nombre de archivo no puede contener ninguno de los siguientes caracteres: \\ / : * ? \" < > |",
51-
"folderExists": "Ya existe una carpeta llamada \"{{renameFile}}\" en este destino."
52-
}
51+
"folderExists": "Ya existe una carpeta llamada \"{{renameFile}}\" en este destino.",
52+
"collapseNavigationPane": "Contraer panel de navegación",
53+
"expandNavigationPane": "Expandir panel de navegación"
54+
}

‎frontend/src/locales/fr-FR.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@
4848
"percentDone": "{{percent}}% terminé",
4949
"canceled": "Annulé",
5050
"invalidFileName": "Un nom de fichier ne peut pas contenir les caractères suivants : \\ / : * ? \" < > |",
51-
"folderExists": "Cette destination contient déjà un dossier nommé \"{{renameFile}}\"."
52-
}
51+
"folderExists": "Cette destination contient déjà un dossier nommé \"{{renameFile}}\".",
52+
"collapseNavigationPane": "Réduire le panneau de navigation",
53+
"expandNavigationPane": "Développer le panneau de navigation"
54+
}

‎frontend/src/locales/he-IL.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@
4848
"percentDone": "{{percent}}% הושלמו",
4949
"canceled": "בוטל",
5050
"invalidFileName": "שם קובץ לא יכול להכיל את התווים הבאים: \\ / : * ? \" < > |",
51-
"folderExists": "כבר קיימת תיקייה בשם \"{{renameFile}}\" במיקום זה."
52-
}
51+
"folderExists": "כבר קיימת תיקייה בשם \"{{renameFile}}\" במיקום זה.",
52+
"collapseNavigationPane": "כווץ את לוח הניווט",
53+
"expandNavigationPane": "הרחב את לוח הניווט"
54+
}

0 commit comments

Comments
 (0)