From 7b7f4f49ecdcf95ad1453b8c399faad3d754e1e0 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 9 Feb 2024 12:37:59 +0100
Subject: [PATCH] add hover bug. add behaviour to click actions

---
 .../components/file-explorer-hovericons.tsx   | 13 ++------
 .../src/lib/components/file-explorer.tsx      |  7 +++--
 .../src/lib/components/flat-tree.tsx          | 31 ++++++++++---------
 .../workspace/src/lib/remix-ui-workspace.tsx  |  7 +++++
 .../remix-ui/workspace/src/lib/types/index.ts |  3 ++
 5 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 444b56f40b..ba675d739b 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -8,8 +8,8 @@ export type FileHoverIconsProps = {
   file: any
   handleNewFolderOp?: any
   handleNewFileOp?: any
-  renamePathOp?: any
-  deletePathOp?: any
+  renamePathOp?: (path: string, newName: string) => void | Promise<void>
+  deletePathOp?: (path: string | string[]) => void | Promise<void>
 }
 
 export function FileHoverIcons(props: FileHoverIconsProps) {
@@ -31,9 +31,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 className="far fa-folder fa-1x remixui_icons_space remixui_icons"
                 onClick={async (e) => {
                   e.stopPropagation()
-                  console.log(props)
                   await props.handleNewFolderOp(props.file.path)
-                  console.log('clicked on folder icon')
                 }}
               ></span>
               {/* </CustomTooltip> */}
@@ -49,7 +47,6 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 onClick={async (e) => {
                   e.stopPropagation()
                   await props.handleNewFileOp(props.file.path)
-                  console.log('clicked on file icon')
                 }}
               ></span>
               {/* </CustomTooltip> */}
@@ -67,10 +64,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           className="far fa-pen fa-1x remixui_icons remixui_icons_space"
           onClick={async (e) => {
             e.stopPropagation()
-            console.log(props)
-            console.log(e)
             await props.renamePathOp(props.file.path, props.file.type)
-            console.log('clicked on edit icon')
           }}
         ></span>
         {/* </CustomTooltip> */}
@@ -85,9 +79,6 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           className="far fa-trash fa-1x remixui_icons remixui_icons_space"
           onClick={async (e) => {
             e.stopPropagation()
-            console.log(props)
-            console.log(e)
-            console.log('clicked on trash icon')
             await props.deletePathOp(props.file.path)
           }}
         ></span>
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index 9eca0e4c7d..0b1113940f 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -405,8 +405,11 @@ export const FileExplorer = (props: FileExplorerProps) => {
           moveFile={handleFileMove}
           moveFolder={handleFolderMove}
           handleClickFolder={handleClickFolder}
-          createNewFile={handleNewFileInput}
-          createNewFolder={handleNewFolderInput}
+          createNewFile={props.createNewFile}
+          createNewFolder={props.createNewFolder}
+          deletePath={deletePath}
+          renamePath={renamePath}
+          editModeOn={props.editModeOn}
         />
       </div>
     </div>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index 332357eb73..c960edc098 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -41,7 +41,8 @@ interface FlatTreeProps {
   createNewFile?: any
   createNewFolder?: any
   deletePath?: (path: string | string[]) => void | Promise<void>
-  renamePath?: (path: string, newName: string) => void | Promise<void>
+  renamePath?: (path: string, type: string, isNew?: boolean) => void
+  editModeOn?: (path: string, type: string, isNew?: boolean) => void
 }
 
 let mouseTimer: any = {
@@ -184,7 +185,19 @@ export const FlatTree = (props: FlatTreeProps) => {
     }
   }, [focusEdit])
 
-  const [onMouseEnter, setOnMouseEnter] = useState(false)
+  const showIcons = (file: FileType) =>
+    file.path === hover ? (
+      <div>
+        <FileHoverIcons
+          file={file}
+          isEditable={true}
+          renamePathOp={props.editModeOn}
+          deletePathOp={deletePath}
+          handleNewFileOp={props.createNewFile}
+          handleNewFolderOp={props.createNewFolder}
+        />
+      </div>
+    ) : null
 
   const Row = (index: number) => {
     const node = Object.keys(flatTree)[index]
@@ -193,17 +206,14 @@ export const FlatTree = (props: FlatTreeProps) => {
       <li
         className={`${labelClass(file)} li_tv`}
         onMouseOver={(e) => {
-          console.log(e)
           setHover(file.path)
         }}
         onMouseOut={() => {
-          setHover(file.path)
+          setHover('')
         }}
         data-type={file.isDirectory ? 'folder' : 'file'}
         data-path={`${file.path}`}
         data-id={`treeViewLitreeViewItem${file.path}`}
-        onMouseEnter={() => setOnMouseEnter(true)}
-        onMouseLeave={() => setOnMouseEnter(false)}
       >
         <div data-id={`treeViewDivtreeViewItem${file.path}`} className={`d-flex flex-row align-items-center`}>
           {getIndentLevelDiv(file.path)}
@@ -222,16 +232,9 @@ export const FlatTree = (props: FlatTreeProps) => {
               data-label-path={`${file.path}`}
               key={index}>
               {file.name}
-
             </div>
             <div className="d-flex flex-row align-items-center">
-              {!onMouseEnter && (
-                <div>
-                  <FileHoverIcons
-                    file={file}
-                    isEditable={true}
-                  />
-                </div>)}
+              {showIcons(file)}
               {getFileStateIcons(file)}
             </div>
             </>
diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
index c9785841e5..e71d94ffd9 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -1129,6 +1129,10 @@ export function Workspace() {
                   handleNewFileInput={handleNewFileInput}
                   handleNewFolderInput={handleNewFolderInput}
                   dragStatus={dragStatus}
+                  createNewFile={handleNewFileInput}
+                  createNewFolder={handleNewFolderInput}
+                  deletePath={deletePath}
+                  renamePath={editModeOn}
                 />
 
               )}
@@ -1188,7 +1192,10 @@ export function Workspace() {
                   editModeOn={editModeOn}
                   handleNewFileInput={handleNewFileInput}
                   handleNewFolderInput={handleNewFolderInput}
+                  createNewFile={handleNewFileInput}
+                  createNewFolder={handleNewFolderInput}
                   deletePath={deletePath}
+                  renamePath={editModeOn}
                   dragStatus={dragStatus}
                 />
               )}
diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts
index 354e000f6a..313f7a5dda 100644
--- a/libs/remix-ui/workspace/src/lib/types/index.ts
+++ b/libs/remix-ui/workspace/src/lib/types/index.ts
@@ -131,6 +131,9 @@ export interface FileExplorerProps {
     handleNewFileInput: (parentFolder?: string) => Promise<void>
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
     deletePath?: (path: string[]) => Promise<void>
+    createNewFile:(parentFolder?: string) => Promise<void>
+    createNewFolder:(parentFolder?: string) => Promise<void>
+    renamePath:(path: string, type: string, isNew?: boolean) => void
     dragStatus: (status: boolean) => void
 }