Skip to content

Commit 668b64d

Browse files
Saifullah-devSaifullah-dev
authored
Merge pull request #164 from Saifullah-dev/163-feat-add-onselect-callback-prop
feat(file-manager): Add callback for file/folder selection
2 parents 3cb3f26 + f7c859e commit 668b64d

File tree

6 files changed

+19
-4
lines changed

6 files changed

+19
-4
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ type File = {
125125
| `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. |
126126
| `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. |
127127
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
128+
| `onSelect` | (files: Array<[File](#-file-structure)>) => void | (Optional) A callback function triggered whenever a file or folder is selected. The function receives an array of selected files or folders, allowing you to handle selection-related actions, such as displaying file details, enabling toolbar actions, or updating the UI accordingly. |
128129
| `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`. |
129130
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
130131

‎frontend/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ type File = {
125125
| `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. |
126126
| `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. |
127127
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
128+
| `onSelect` | (files: Array<[File](#-file-structure)>) => void | (Optional) A callback function triggered whenever a file or folder is selected. The function receives an array of selected files or folders, allowing you to handle selection-related actions, such as displaying file details, enabling toolbar actions, or updating the UI accordingly. |
128129
| `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`. |
129130
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
130131

‎frontend/src/App.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,10 @@ function App() {
125125
console.log("Copied Files", files);
126126
};
127127

128+
const handleSelect = (files) => {
129+
console.log("Selected Files", files);
130+
};
131+
128132
return (
129133
<div className="app">
130134
<div className="file-manager-container">
@@ -144,6 +148,7 @@ function App() {
144148
onLayoutChange={handleLayoutChange}
145149
onRefresh={handleRefresh}
146150
onFileOpen={handleFileOpen}
151+
onSelect={handleSelect}
147152
onError={handleError}
148153
layout="grid"
149154
enableFilePreview

‎frontend/src/FileManager/FileList/FileItem.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const FileItem = ({
7272
const filesRange = currentPathFiles.slice(startRange, endRange + 1);
7373
setSelectedFiles(reverseSelection ? filesRange.reverse() : filesRange);
7474
} else if (selectedFileIndexes.length > 0 && ctrlKey) {
75-
// Remove file from selected files if it already exists on CTRL + Click, other push it in selectedFiles
75+
// Remove file from selected files if it already exists on CTRL + Click, otherwise push it in selectedFiles
7676
setSelectedFiles((prev) => {
7777
const filteredFiles = prev.filter((f) => f.path !== file.path);
7878
if (prev.length === filteredFiles.length) {

‎frontend/src/FileManager/FileManager.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const FileManager = ({
3131
onLayoutChange = () => {},
3232
onRefresh,
3333
onFileOpen = () => {},
34+
onSelect,
3435
onError = () => {},
3536
layout = "grid",
3637
enableFilePreview = true,
@@ -59,7 +60,7 @@ const FileManager = ({
5960
<Loader loading={isLoading} />
6061
<FilesProvider filesData={files} onError={onError}>
6162
<FileNavigationProvider initialPath={initialPath}>
62-
<SelectionProvider onDownload={onDownload}>
63+
<SelectionProvider onDownload={onDownload} onSelect={onSelect}>
6364
<ClipBoardProvider onPaste={onPaste} onCut={onCut} onCopy={onCopy}>
6465
<LayoutProvider layout={layout}>
6566
<Toolbar
@@ -146,6 +147,7 @@ FileManager.propTypes = {
146147
onLayoutChange: PropTypes.func,
147148
onRefresh: PropTypes.func,
148149
onFileOpen: PropTypes.func,
150+
onSelect: PropTypes.func,
149151
onError: PropTypes.func,
150152
layout: PropTypes.oneOf(["grid", "list"]),
151153
maxFileSize: PropTypes.number,

‎frontend/src/contexts/SelectionContext.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import { createContext, useContext, useState } from "react";
1+
import { createContext, useContext, useEffect, useState } from "react";
22
import { validateApiCallback } from "../utils/validateApiCallback";
33

44
const SelectionContext = createContext();
55

6-
export const SelectionProvider = ({ children, onDownload }) => {
6+
export const SelectionProvider = ({ children, onDownload, onSelect }) => {
77
const [selectedFiles, setSelectedFiles] = useState([]);
88

9+
useEffect(() => {
10+
if (selectedFiles.length && onSelect) {
11+
onSelect(selectedFiles);
12+
}
13+
}, [selectedFiles]);
14+
915
const handleDownload = () => {
1016
validateApiCallback(onDownload, "onDownload", selectedFiles);
1117
};

0 commit comments

Comments
 (0)