Skip to content

Commit 37a33a6

Browse files
Saifullah-devSaifullah-dev
authored
Merge pull request #141 from Saifullah-dev/139-feat-customize-primary-color-and-font-family
feat(Styles): add primaryColor and fontFamily props
2 parents 98a5c2a + 3cfe270 commit 37a33a6

File tree

14 files changed

+69
-78
lines changed

14 files changed

+69
-78
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,10 @@ type File = {
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. |
104104
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
105105
| `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`. |
106-
| `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). |
106+
| `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). |
107107
| `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" } }` |
108108
| `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. |
109+
| `fontFamily` | string | The font family to be used throughout the component. Accepts any valid CSS font family (e.g., `'Arial, sans-serif'`, `'Roboto'`). You can customize the font styling to match your application's theme. `default: 'Nunito Sans, sans-serif'`. |
109110
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
110111
| `initialPath` | string | The path of the directory to be loaded initially e.g. `/Documents`. This should be the path of a folder which is included in `files` array. Default value is `""` |
111112
| `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`. |
@@ -122,6 +123,7 @@ type File = {
122123
| `onPaste` | (files: Array<[File](#-file-structure)>, destinationFolder: [File](#-file-structure), operationType: "copy" \| "move") => void | A callback function triggered when when one or more files or folders are 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. |
123124
| `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. |
124125
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
126+
| `primaryColor` | string | The primary color for the component's theme. Accepts any valid CSS color format (e.g., `'blue'`, `'#E97451'`, `'rgb(52, 152, 219)'`). This color will be applied to buttons, highlights, and other key elements. `default: #6155b4`. |
125127
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
126128

127129
## ⌨️ Keyboard Shortcuts

‎frontend/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,10 @@ type File = {
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. |
104104
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
105105
| `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`. |
106-
| `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). |
106+
| `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). |
107107
| `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" } }` |
108108
| `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. |
109+
| `fontFamily` | string | The font family to be used throughout the component. Accepts any valid CSS font family (e.g., `'Arial, sans-serif'`, `'Roboto'`). You can customize the font styling to match your application's theme. `default: 'Nunito Sans, sans-serif'`. |
109110
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
110111
| `initialPath` | string | The path of the directory to be loaded initially e.g. `/Documents`. This should be the path of a folder which is included in `files` array. Default value is `""` |
111112
| `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`. |
@@ -122,6 +123,7 @@ type File = {
122123
| `onPaste` | (files: Array<[File](#-file-structure)>, destinationFolder: [File](#-file-structure), operationType: "copy" \| "move") => void | A callback function triggered when when one or more files or folders are 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. |
123124
| `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. |
124125
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
126+
| `primaryColor` | string | The primary color for the component's theme. Accepts any valid CSS color format (e.g., `'blue'`, `'#E97451'`, `'rgb(52, 152, 219)'`). This color will be applied to buttons, highlights, and other key elements. `default: #6155b4`. |
125127
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
126128

127129
## ⌨️ Keyboard Shortcuts

‎frontend/src/FileManager/Actions/UploadFile/UploadFile.action.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@
2727
}
2828

2929
&:hover {
30-
border-color: $primary-color;
30+
border-color: var(--file-manager-primary-color);
3131
}
3232
}
3333

3434
.draggable-file-input.dragging {
35-
border-color: $primary-color;
35+
border-color: var(--file-manager-primary-color);
3636
}
3737

3838
.btn-choose-file {
@@ -120,7 +120,7 @@
120120
&:hover {
121121
cursor: pointer;
122122
background-color: rgba(0, 0, 0, 0.07);
123-
color: $primary-color;
123+
color: var(--file-manager-primary-color);
124124
}
125125
}
126126

@@ -130,6 +130,10 @@
130130
color: red;
131131
}
132132
}
133+
134+
.upload-success {
135+
color: var(--file-manager-primary-color);
136+
}
133137
}
134138
}
135139
}

‎frontend/src/FileManager/Actions/UploadFile/UploadItem.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ const UploadItem = ({
172172
<span className="file-size">{getDataSize(fileData.file?.size)}</span>
173173
</div>
174174
{isUploaded ? (
175-
<FaRegCheckCircle color="#5c5bb1" title="Uploaded" />
175+
<FaRegCheckCircle title="Uploaded" className="upload-success" />
176176
) : isCanceled || uploadFailed ? (
177177
<IoMdRefresh className="retry-upload" title="Retry" onClick={handleRetry} />
178178
) : (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
}
1919

2020
&::-webkit-scrollbar-thumb {
21-
background: $primary-color !important;
21+
background: var(--file-manager-primary-color) !important;
2222
}
2323

2424
.folder-name {
@@ -30,7 +30,7 @@
3030

3131
&:hover {
3232
cursor: pointer;
33-
color: $secondary-color;
33+
color: var(--file-manager-primary-color);
3434
}
3535
}
3636

@@ -46,7 +46,7 @@
4646
&:hover,
4747
&:focus {
4848
cursor: pointer;
49-
color: $primary-color;
49+
color: var(--file-manager-primary-color);
5050
background-color: #dddcdc;
5151
border-radius: 5px;
5252
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
padding: 1px 5px 2px 24px;
2222
border-radius: 3px;
2323
font-weight: bold;
24-
color: $primary-color-dark;
24+
color: var(--file-manager-primary-color);
2525
z-index: 2;
2626

2727
.drop-zone-file-name {
@@ -41,7 +41,7 @@
4141
border-radius: 4px;
4242
position: relative;
4343
color: white;
44-
background-color: $primary-color;
44+
background-color: var(--file-manager-primary-color);
4545
padding: 3px 8px;
4646
}
4747
}
@@ -116,11 +116,11 @@
116116
}
117117

118118
.file-selected {
119-
background-color: $primary-color;
119+
background-color: var(--file-manager-primary-color);
120120
color: white;
121121

122122
&:hover {
123-
background-color: $primary-color;
123+
background-color: var(--file-manager-primary-color);
124124
}
125125
}
126126

@@ -182,7 +182,7 @@
182182

183183
.file-item-container.file-selected {
184184
&:hover {
185-
background-color: $primary-color !important;
185+
background-color: var(--file-manager-primary-color) !important;
186186
}
187187
}
188188

0 commit comments

Comments
 (0)