Skip to content

Commit 4cbe847

Browse files
Saifullah-devSaifullah-dev
authored
Merge pull request #72 from Saifullah-dev/refactor/code-splitting
fix(styles): resolve height expand of Toolbar & Breadcrumb at specifi…
2 parents cafb274 + 1574956 commit 4cbe847

File tree

8 files changed

+30
-46
lines changed

8 files changed

+30
-46
lines changed

‎README.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
![NPM Downloads](https://img.shields.io/npm/d18m/%40cubone%2Freact-file-manager?style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40cubone%2Freact-file-manager?style=for-the-badge) ![NPM Version](https://img.shields.io/npm/v/%40cubone%2Freact-file-manager?style=for-the-badge&color=%23c87d32)
66

77
</div>
8-
<br>
98

109
<p>
1110
An open-source React.js package for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration.
@@ -82,17 +81,16 @@ type File = {
8281
};
8382
```
8483

85-
Here is the updated table with the props sorted in ascending order by name:
86-
8784
## ⚙️ Props
8885

8986
| Name | Type | Description |
9087
| ------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
91-
| `acceptedFileTypes` | String | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). |
88+
| `acceptedFileTypes` | string | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). |
9289
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager. |
93-
| `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`. |
90+
| `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`. |
9491
| `fileUploadConfig` | { url: string; headers?: { [key: string]: string } } | Configuration object for file uploads. It includes the upload URL (`url`) and an optional `headers` object for setting custom HTTP headers in the upload request. The `headers` object can accept any standard or custom headers required by the server. Example: `{ url: "https://example.com/fileupload", headers: { Authorization: "Bearer" + TOKEN, "X-Custom-Header": "value" } }` |
9592
| `files` | Array<[File](#-file-structure)> | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
93+
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
9694
| `isLoading` | boolean | A boolean state indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if set `true`. |
9795
| `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". |
9896
| `maxFileSize` | number | For limiting the maximum upload file size in bytes. |
@@ -107,6 +105,7 @@ Here is the updated table with the props sorted in ascending order by name:
107105
| `onPaste` | (file: [File](#-file-structure), destinationFolder: [File](#-file-structure), operationType: "copy" \| "move") => void | A callback function triggered when a file or folder is pasted into a new location. Depending on `operationType`, use this to either copy or move the `sourceItem` to the `destinationFolder`, updating the files state accordingly. |
108106
| `onRefresh` | () => void | A callback function triggered when the file manager is refreshed. Use this to refresh the `files` state to reflect any changes or updates. |
109107
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
108+
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
110109

111110
## 🤝 Contributing
112111

‎frontend/README.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
![NPM Downloads](https://img.shields.io/npm/d18m/%40cubone%2Freact-file-manager?style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40cubone%2Freact-file-manager?style=for-the-badge) ![NPM Version](https://img.shields.io/npm/v/%40cubone%2Freact-file-manager?style=for-the-badge&color=%23c87d32)
66

77
</div>
8-
<br>
98

109
<p>
1110
An open-source React.js package for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration.
@@ -82,17 +81,16 @@ type File = {
8281
};
8382
```
8483

85-
Here is the updated table with the props sorted in ascending order by name:
86-
8784
## ⚙️ Props
8885

8986
| Name | Type | Description |
9087
| ------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
91-
| `acceptedFileTypes` | String | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). |
88+
| `acceptedFileTypes` | string | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). |
9289
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager. |
93-
| `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`. |
90+
| `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`. |
9491
| `fileUploadConfig` | { url: string; headers?: { [key: string]: string } } | Configuration object for file uploads. It includes the upload URL (`url`) and an optional `headers` object for setting custom HTTP headers in the upload request. The `headers` object can accept any standard or custom headers required by the server. Example: `{ url: "https://example.com/fileupload", headers: { Authorization: "Bearer" + TOKEN, "X-Custom-Header": "value" } }` |
9592
| `files` | Array<[File](#-file-structure)> | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
93+
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
9694
| `isLoading` | boolean | A boolean state indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if set `true`. |
9795
| `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". |
9896
| `maxFileSize` | number | For limiting the maximum upload file size in bytes. |
@@ -107,6 +105,7 @@ Here is the updated table with the props sorted in ascending order by name:
107105
| `onPaste` | (file: [File](#-file-structure), destinationFolder: [File](#-file-structure), operationType: "copy" \| "move") => void | A callback function triggered when a file or folder is pasted into a new location. Depending on `operationType`, use this to either copy or move the `sourceItem` to the `destinationFolder`, updating the files state accordingly. |
108106
| `onRefresh` | () => void | A callback function triggered when the file manager is refreshed. Use this to refresh the `files` state to reflect any changes or updates. |
109107
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
108+
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
110109

111110
## 🤝 Contributing
112111

‎frontend/src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,8 @@ function App() {
138138
maxFileSize={10485760}
139139
filePreviewPath={import.meta.env.VITE_API_FILES_BASE_URL}
140140
acceptedFileTypes=".txt, .png, .jpg, .jpeg, .pdf, .doc, .docx, .exe"
141+
height="100%"
142+
width="100%"
141143
/>
142144
</div>
143145
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
position: relative;
55

66
.breadcrumb {
7-
height: calc(5.8% - 21px);
7+
height: 22px;
8+
min-height: 22px;
9+
max-height: 22px;
810
display: flex;
911
gap: 0.5rem;
1012
border-bottom: 1px solid $border-color;

‎frontend/src/FileManager/FileList/FileList.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
flex-wrap: wrap;
88
column-gap: 0.5em;
99
row-gap: 5px;
10-
height: calc(94.2% - 16px);
10+
height: calc(100% - (35px + 16px));
1111
@include overflow-y-scroll;
1212
padding: 8px;
1313
padding-right: 4px;

0 commit comments

Comments
 (0)