add hover bug. add behaviour to click actions

Author: joeizang

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>

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>

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>
             </>

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}
                 />
               )}

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
 }