add props, make icons visible.

libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx

@@ -17,17 +17,17 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
 
   return (
     <>
-      {(props.hover && !props.isEditable) && <div className={`d-flex flex-row align-items-center`} style={{ marginLeft: '6rem' }}>
+      {(!props.hover && !props.isEditable) && <div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
         {
           props.file.isDirectory ? (
             <>
-              <CustomTooltip
+              {/* <CustomTooltip
                 placement="right-start"
                 delay={{show: 1000, hide: 0}}
                 tooltipText={<FormattedMessage id="filePanel.edit" />}
                 tooltipId={`filePanel.edit.${props.file.path}`}
                 tooltipClasses="text-nowrap"
-              >
+              > */}
               <span
                 className="far fa-folder fa-1x remixui_icons_space remixui_icons"
                 onClick={async (e) => {
@@ -37,14 +37,14 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                   console.log('clicked on folder icon')
                 }}
               ></span>
-              </CustomTooltip>
+              {/* </CustomTooltip> */}
-              <CustomTooltip
+              {/* <CustomTooltip
                 placement="right-start"
                 delay={{show: 1000, hide: 0}}
                 tooltipText={<FormattedMessage id="fileExplorer.edit" />}
                 tooltipId={`fileExplorer.edit.${props.file.path}`}
                 tooltipClasses="text-nowrap"
-              >
+              > */}
               <span
                 className="far fa-file fa-1x remixui_icons remixui_icons_space"
                 onClick={async (e) => {
@@ -53,17 +53,17 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                   console.log('clicked on file icon')
                 }}
               ></span>
-              </CustomTooltip>
+              {/* </CustomTooltip> */}
             </>
           ) : null
         }
-        <CustomTooltip
+        {/* <CustomTooltip
           placement="right-start"
           delay={{show: 1000, hide: 0}}
           tooltipText={<FormattedMessage id="fileExplorer.edit" />}
           tooltipId={`fileExplorer.edit.${props.file.path}`}
           tooltipClasses="text-nowrap"
-        >
+        > */}
         <span
           className="far fa-pen fa-1x remixui_icons remixui_icons_space"
           onClick={async (e) => {
@@ -74,14 +74,14 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
             console.log('clicked on edit icon')
           }}
         ></span>
-        </CustomTooltip>
+        {/* </CustomTooltip> */}
-        <CustomTooltip
+        {/* <CustomTooltip
           placement="right-start"
           delay={{show: 1000, hide: 0}}
           tooltipText={<FormattedMessage id="fileExplorer.edit" />}
           tooltipId={`fileExplorer.edit.${props.file.path}`}
           tooltipClasses="text-nowrap"
-        >
+        > */}
         <span
           className="far fa-trash fa-1x remixui_icons remixui_icons_space"
           onClick={async (e) => {
@@ -92,7 +92,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
             await props.deletePathOp(props.file.path)
           }}
         ></span>
-        </CustomTooltip>
+        {/* </CustomTooltip> */}
       </div>
       }
     </>

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, SyntheticEvent, useTransition } from 'react' // eslint-disable-line
+import React, { useEffect, useState, useRef, SyntheticEvent } from 'react' // eslint-disable-line
 import { useIntl } from 'react-intl'
 import { TreeView } from '@remix-ui/tree-view' // eslint-disable-line
 import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
@@ -27,12 +27,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
     handleContextMenu,
     handleNewFileInput,
     handleNewFolderInput,
+    deletePath,
     uploadFile,
     uploadFolder,
     fileState
   } = props
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
-  const [isPending, startTransition] = useTransition();
+  // const [isPending, startTransition] = useTransition();
   const treeRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -404,6 +405,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
           moveFile={handleFileMove}
           moveFolder={handleFolderMove}
           handleClickFolder={handleClickFolder}
+          createNewFile={handleNewFileInput}
+          createNewFolder={handleNewFolderInput}
         />
       </div>
     </div>

libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, startTransition, useEffect, useRef, useState } from 'react'
+import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { FileType } from '../types'
 import { getEventTarget } from '../utils/getEventTarget'
 import { extractParentFromKey } from '@remix-ui/helper'

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -8,6 +8,7 @@ import { FlatTreeDrop } from './flat-tree-drop';
 import { getEventTarget } from '../utils/getEventTarget';
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators';
 import { FileHoverIcons } from './file-explorer-hovericons';
+import { deletePath } from '../actions';
 
 export default function useOnScreen(ref: RefObject<HTMLElement>) {
 
@@ -37,6 +38,10 @@ interface FlatTreeProps {
   moveFile: (dest: string, src: string) => void
   moveFolder: (dest: string, src: string) => void
   fileState: fileDecoration[]
+  createNewFile?: any
+  createNewFolder?: any
+  deletePath?: (path: string | string[]) => void | Promise<void>
+  renamePath?: (path: string, newName: string) => void | Promise<void>
 }
 
 let mouseTimer: any = {
@@ -45,7 +50,7 @@ let mouseTimer: any = {
 }
 
 export const FlatTree = (props: FlatTreeProps) => {
-  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder } = props
+  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, renamePath } = props
   const [hover, setHover] = useState<string>('')
   const [mouseOverTarget, setMouseOverTarget] = useState<{
     path: string,
@@ -211,7 +216,9 @@ export const FlatTree = (props: FlatTreeProps) => {
 
           </div>
           <div className="d-flex flex-row gap-1">
-            <div><FileHoverIcons file={file} /></div>{getFileStateIcons(file)}
+            <div>
+              <FileHoverIcons file={file} />
+            </div> {getFileStateIcons(file)}
           </div>
           </>
         }

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -1188,6 +1188,7 @@ export function Workspace() {
                   editModeOn={editModeOn}
                   handleNewFileInput={handleNewFileInput}
                   handleNewFolderInput={handleNewFolderInput}
+                  deletePath={deletePath}
                   dragStatus={dragStatus}
                 />
               )}

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -130,6 +130,7 @@ export interface FileExplorerProps {
     toGist: (path?: string, type?: string) => void
     handleNewFileInput: (parentFolder?: string) => Promise<void>
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
+    deletePath?: (path: string[]) => Promise<void>
     dragStatus: (status: boolean) => void
 }