Merge pull request #48 from Saifullah-dev/feature/inline-editing

Feature: Inline Editing
Saifullah-dev · Sep 5, 2024 · 2a31eba · 2a31eba
2 parents 7158aaf + 632d39c
commit 2a31eba
Show file tree

Hide file tree

Showing 23 changed files with 655 additions and 269 deletions.
diff --git a/README.md b/README.md
@@ -1,26 +1,28 @@
-![React File Manager](https://github.com/user-attachments/assets/45994895-0269-43bb-b268-06bd2dd85397)
+![React File Manager](https://github.com/user-attachments/assets/53b09633-220e-460d-a5a5-48f553640dd0)
 
 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.
 
-## Features
+## ✨ Features
 
 - **View Files and Folders**: Display the directory structure with folders and files.
 - **Upload Files**: Upload new files to a selected directory.
 - **Delete Files and Folders**: Remove unwanted files or folders.
+- **Copy and Move Files**: Easily copy or move files and folders to a different directory.
+- **Inline Folder Creation and Renaming**: Create new folders and rename files or folders directly within the file list.
 - **Toolbar**: Access common file operations such as upload, delete, and refresh with a convenient toolbar.
-- **Breadcrumb Navigation**: Easily navigate through the directory structure.
-- **Navigation Pane**: Easily switch between folders and directories with a sidebar navigation pane.
+- **Breadcrumb Navigation**: Navigate through the directory structure with a breadcrumb trail.
+- **Navigation Pane**: Quickly switch between folders and directories using a sidebar navigation pane.
 - **Context Menu**: Right-click to open a context menu with options for cutting, copying, pasting, renaming, and deleting files or folders.
 
-## Installation
+## 🚀 Installation
 
 To install `React File Manager`, use the following command:
 
 ```bash
 npm i @cubone/react-file-manager
 ```
 
-## Usage
+## 💻 Usage
 
 Here’s a basic example of how to use the File Manager Component in your React application:
 
@@ -55,7 +57,7 @@ function App() {
   );
 }
 ```
-## Props
+## ⚙️ Props
 
 | Name       | Type                                                                                           | Description                                                                 |
 |-----------------|------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
@@ -70,7 +72,7 @@ function App() {
 | onPaste | (sourceItem: { name: string, isDirectory: boolean, path: string }, destinationFolder: { name: string, isDirectory: boolean, path: string }, operationType: "copy" or "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. |
 
-## Contributing
+## 🤝 Contributing
 
 Contributions are welcome! To contribute:
 
@@ -91,6 +93,6 @@ npm run dev
 ```
 The application should now be running on `http://localhost:5173`, have fun!
 
-## License
+## ©️ License
 
 React File Manager is [MIT Licensed](LICENSE).
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/react-file-manager-logo.png" type="image/icon type" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>React File Manager</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/react-file-manager-logo.png b/frontend/public/react-file-manager-logo.png
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import { renameAPI } from "./Mock APIs/renameAPI";
 import { deleteAPI } from "./Mock APIs/deleteAPI";
 import { copyItemAPI, moveItemAPI } from "./Mock APIs/fileTransferAPI";
 import { getAllFilesAPI } from "./Mock APIs/getAllFilesAPI";
+import "./App.scss";
 
 function App() {
   const fileUploadConfig = {
@@ -98,19 +99,23 @@ function App() {
   //
 
   return (
-    <FileManager
-      files={files}
-      fileUploadConfig={fileUploadConfig}
-      isLoading={isLoading}
-      onCreateFolder={handleCreateFolder}
-      onFileUploading={handleFileUploading}
-      onFileUploaded={handleFileUploaded}
-      onRename={handleRename}
-      onDelete={handleDelete}
-      onPaste={handlePaste}
-      onRefresh={handleRefresh}
-      allowedFileExtensions=".txt, .png, .jpg, .jpeg, .pdf, .doc, .docx"
-    />
+    <div className="app">
+      <div className="file-manager-container">
+        <FileManager
+          files={files}
+          fileUploadConfig={fileUploadConfig}
+          isLoading={isLoading}
+          onCreateFolder={handleCreateFolder}
+          onFileUploading={handleFileUploading}
+          onFileUploaded={handleFileUploaded}
+          onRename={handleRename}
+          onDelete={handleDelete}
+          onPaste={handlePaste}
+          onRefresh={handleRefresh}
+          allowedFileExtensions=".txt, .png, .jpg, .jpeg, .pdf, .doc, .docx"
+        />
+      </div>
+    </div>
   );
 }
 

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -0,0 +1,16 @@
+body {
+  margin: 0;
+}
+
+.app {
+  height: 100dvh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #32363a;
+
+  .file-manager-container {
+    height: 70%;
+    width: 65%;
+  }
+}
diff --git a/frontend/src/File Manager/Actions/Actions.jsx b/frontend/src/File Manager/Actions/Actions.jsx
@@ -25,22 +25,22 @@ const Actions = ({
   const [activeAction, setActiveAction] = useState(null);
 
   const actionTypes = {
-    createFolder: {
-      title: "Create Folder",
-      component: (
-        <CreateFolderAction
-          files={files}
-          currentPath={currentPath}
-          currentPathFiles={currentPathFiles}
-          triggerAction={triggerAction}
-          handleCreateFolder={handleCreateFolder}
-          currentFolder={currentFolder}
-        />
-      ),
-      width: "25%",
-    },
+    // createFolder: {
+    //   title: "Create Folder",
+    //   component: (
+    //     <CreateFolderAction
+    //       files={files}
+    //       currentPath={currentPath}
+    //       currentPathFiles={currentPathFiles}
+    //       triggerAction={triggerAction}
+    //       handleCreateFolder={handleCreateFolder}
+    //       currentFolder={currentFolder}
+    //     />
+    //   ),
+    //   width: "25%",
+    // },
     uploadFile: {
-      title: "Upload File",
+      title: "Upload Files",
       component: (
         <UploadFileAction
           fileUploadConfig={fileUploadConfig}
@@ -52,20 +52,20 @@ const Actions = ({
       ),
       width: "35%",
     },
-    rename: {
-      title: "Rename",
-      component: (
-        <RenameAction
-          files={files}
-          selectedFile={selectedFile}
-          currentPathFiles={currentPathFiles}
-          triggerAction={triggerAction}
-          handleRename={handleRename}
-          setSelectedFile={setSelectedFile}
-        />
-      ),
-      width: "25%",
-    },
+    // rename: {
+    //   title: "Rename",
+    //   component: (
+    //     <RenameAction
+    //       files={files}
+    //       selectedFile={selectedFile}
+    //       currentPathFiles={currentPathFiles}
+    //       triggerAction={triggerAction}
+    //       handleRename={handleRename}
+    //       setSelectedFile={setSelectedFile}
+    //     />
+    //   ),
+    //   width: "25%",
+    // },
     delete: {
       title: "Delete",
       component: (
@@ -94,16 +94,18 @@ const Actions = ({
     }
   }, [triggerAction.isActive]);
 
-  return (
-    <Modal
-      heading={activeAction?.title}
-      show={triggerAction.isActive}
-      setShow={triggerAction.close}
-      dialogWidth={activeAction?.width}
-    >
-      {activeAction?.component}
-    </Modal>
-  );
+  if (activeAction) {
+    return (
+      <Modal
+        heading={activeAction.title}
+        show={triggerAction.isActive}
+        setShow={triggerAction.close}
+        dialogWidth={activeAction.width}
+      >
+        {activeAction?.component}
+      </Modal>
+    );
+  }
 };
 
 export default Actions;