diff --git a/README.md b/README.md index ee42863..dfe1067 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,6 @@ ![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) -

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 = { }; ``` -Here is the updated table with the props sorted in ascending order by name: - ## ⚙️ Props | Name | Type | Description | | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `acceptedFileTypes` | String | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). | +| `acceptedFileTypes` | string | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). | | `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager. | -| `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`. | +| `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`. | | `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" } }` | | `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. | +| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). | | `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`. | | `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". | | `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: | `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. | | `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. | | `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. | +| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). | ## 🤝 Contributing diff --git a/frontend/README.md b/frontend/README.md index ee42863..dfe1067 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -5,7 +5,6 @@ ![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) -

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 = { }; ``` -Here is the updated table with the props sorted in ascending order by name: - ## ⚙️ Props | Name | Type | Description | | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `acceptedFileTypes` | String | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). | +| `acceptedFileTypes` | string | A comma-separated list of allowed file extensions for uploading files. (e.g.,`.txt, .png, .pdf`). | | `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager. | -| `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`. | +| `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`. | | `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" } }` | | `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. | +| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). | | `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`. | | `layout` | "list" \| "grid" | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid". | | `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: | `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. | | `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. | | `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. | +| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). | ## 🤝 Contributing diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 52a6789..3752cee 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -138,6 +138,8 @@ function App() { maxFileSize={10485760} filePreviewPath={import.meta.env.VITE_API_FILES_BASE_URL} acceptedFileTypes=".txt, .png, .jpg, .jpeg, .pdf, .doc, .docx, .exe" + height="100%" + width="100%" /> diff --git a/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss b/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss index 3e92a3f..cb05ab3 100644 --- a/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss +++ b/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss @@ -4,7 +4,9 @@ position: relative; .breadcrumb { - height: calc(5.8% - 21px); + height: 22px; + min-height: 22px; + max-height: 22px; display: flex; gap: 0.5rem; border-bottom: 1px solid $border-color; diff --git a/frontend/src/FileManager/FileList/FileList.scss b/frontend/src/FileManager/FileList/FileList.scss index ffb1fce..e4833c1 100644 --- a/frontend/src/FileManager/FileList/FileList.scss +++ b/frontend/src/FileManager/FileList/FileList.scss @@ -7,7 +7,7 @@ flex-wrap: wrap; column-gap: 0.5em; row-gap: 5px; - height: calc(94.2% - 16px); + height: calc(100% - (35px + 16px)); @include overflow-y-scroll; padding: 8px; padding-right: 4px; diff --git a/frontend/src/FileManager/FileManager.jsx b/frontend/src/FileManager/FileManager.jsx index 598ebec..dd4413c 100644 --- a/frontend/src/FileManager/FileManager.jsx +++ b/frontend/src/FileManager/FileManager.jsx @@ -35,13 +35,19 @@ const FileManager = ({ maxFileSize, filePreviewPath, acceptedFileTypes, + height = "600px", + width = "100%", }) => { const triggerAction = useTriggerAction(); const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } = useColumnResize(20, 80); return ( -

e.preventDefault()}> +
e.preventDefault()} + style={{ height, width }} + > @@ -138,6 +144,8 @@ FileManager.propTypes = { enableFilePreview: PropTypes.bool, filePreviewPath: urlValidator, acceptedFileTypes: PropTypes.string, + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; export default FileManager; diff --git a/frontend/src/FileManager/FileManager.scss b/frontend/src/FileManager/FileManager.scss index 0ccb72e..a34a44f 100644 --- a/frontend/src/FileManager/FileManager.scss +++ b/frontend/src/FileManager/FileManager.scss @@ -34,6 +34,9 @@ svg { } .file-explorer { + min-height: 400px; + height: 100%; + width: 100%; font-family: "Nunito Sans", sans-serif; button { @@ -42,8 +45,6 @@ svg { border: 1px solid #dddddd; border-radius: 8px; - height: 100%; - width: 100%; position: relative; background-color: white; cursor: default; @@ -54,7 +55,7 @@ svg { .files-container { display: flex; - height: 92.4%; + height: calc(100% - 46px); // Toolbar total height = baseHeight: 35px, padding top + bottom: 10px, border: 1px. .navigation-pane { z-index: 1; @@ -92,34 +93,6 @@ svg { } } -@media screen and (min-height: 600px) and (max-height: 900px) { - .file-explorer { - height: 63dvh; - - .files-container { - height: calc(63dvh - 51px); - - .files { - height: 46dvh; - } - } - } -} - -@media screen and (min-height: 550px) and (max-height: 600px) { - .file-explorer { - height: 58dvh; - - .files-container { - height: calc(58dvh - 51px); - - .files { - height: 46dvh; - } - } - } -} - .close-icon { padding: 5px; border-radius: 50%; diff --git a/frontend/src/FileManager/Toolbar/Toolbar.scss b/frontend/src/FileManager/Toolbar/Toolbar.scss index 6bf8c33..e7c9c42 100644 --- a/frontend/src/FileManager/Toolbar/Toolbar.scss +++ b/frontend/src/FileManager/Toolbar/Toolbar.scss @@ -1,10 +1,11 @@ @import "../../styles/variables"; .toolbar { - height: calc(7.6% - 13px); + height: 35px; min-height: 35px; + max-height: 35px; border-bottom: 1px solid $border-color; - padding: 6px 10px; + padding: 5px 10px; .file-action-container { display: flex;