tooltips while dragging

libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts

@@ -5,5 +5,6 @@ export const MoveContext = createContext<MoveContextType>({
   dragged: {} as { path: string, isDirectory: boolean },
   moveFile: () => null,
   moveFolder: () => null,
-  currentlyMoved: () => null
+  currentlyMoved: () => null,
+  dragStatus: () => null
 })

libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx

@@ -14,7 +14,8 @@ export const Drag = (props: DragType) => {
         moveFolder: props.onFolderMoved,
         currentlyMoved: (path) => {
           setDragged(() => path)
-        }
+        },
+        dragStatus: props.dragStatus
       }}
     >
       {props.children}
@@ -68,6 +69,7 @@ export const Draggable = (props: DraggableType) => {
   }
 
   const handleDrag = () => {
+    context.dragStatus(true)
     if (context.dragged.path !== destination.path) {
       context.currentlyMoved({
         path: destination.path,
@@ -76,6 +78,10 @@ export const Draggable = (props: DraggableType) => {
     }
   }
 
+  const handleDragEnd = () => {
+    context.dragStatus(false)
+  }
+
   return (
     <>
       {props.isDraggable ? (
@@ -97,6 +103,9 @@ export const Draggable = (props: DraggableType) => {
               handleDrag()
             }
           }}
+          onDragEnd={(event) => {
+            handleDragEnd()
+          }}
           onDragOver={(event) => {
             if (destination) {
               handleDragover(event)

libs/remix-ui/drag-n-drop/src/lib/types/index.ts

@@ -17,6 +17,7 @@ export interface MoveContextType {
   moveFile: (dest: string, src: string) => void
   moveFolder: (dest: string, src: string) => void
   currentlyMoved: (file: { path: string, isDirectory: boolean }) => void
+  dragStatus: (isDragged: boolean) => void
 }
 
 export interface DraggableType {
@@ -31,4 +32,5 @@ export interface DragType {
   children: ReactNode
   onFileMoved: (dest: string, src: string) => void
   onFolderMoved: (dest: string, src: string) => void
+  dragStatus: (isDragged: boolean) => void
 }

libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
-import {Fragment} from 'react'
-import {OverlayTrigger, Popover} from 'react-bootstrap'
-import {CustomTooltipType} from '../../types/customtooltip'
+import { use } from 'chai'
+import React, { useEffect } from 'react'
+import { Fragment } from 'react'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
+import { CustomTooltipType } from '../../types/customtooltip'
 
-export function CustomTooltip({children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay}: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay, hide }: CustomTooltipType) {
   if (typeof tooltipText !== 'string') {
     const newTooltipText = React.cloneElement(tooltipText, {
       className: ' bg-secondary text-wrap p-1 px-2 '
@@ -12,17 +13,19 @@ export function CustomTooltip({children, placement, tooltipId, tooltipClasses, t
   }
 
   return (
+    (!hide ? (
       <Fragment>
         <OverlayTrigger
           placement={placement}
           overlay={
+
             <Popover id={`popover-positioned-${placement}`}>
               <Popover.Content
                 id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
-              style={{minWidth: 'fit-content'}}
+                style={{ minWidth: 'fit-content' }}
                 className={'text-wrap p-1 px-2 bg-secondary w-100' + tooltipClasses}
               >
-              {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + {tooltipTextClasses}}>{tooltipText}</span> : tooltipText}
+                {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + { tooltipTextClasses }}>{tooltipText}</span> : tooltipText}
               </Popover.Content>
             </Popover>
           }
@@ -31,5 +34,10 @@ export function CustomTooltip({children, placement, tooltipId, tooltipClasses, t
           {children}
         </OverlayTrigger>
       </Fragment>
+    ) : (
+      <Fragment>
+        {children}
+      </Fragment>
+    ))
   )
 }

libs/remix-ui/helper/src/types/customtooltip.ts

@@ -9,4 +9,5 @@ export type CustomTooltipType = {
   tooltipText: string | JSX.Element,
   tooltipTextClasses?: string
   delay?: OverlayDelay
+  hide?: boolean
 }

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

@@ -334,6 +334,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  const dragStatus = (isDragged: boolean) => {
+    props.dragStatus(isDragged)
+  }
+
   useEffect(() => {
     if (files[ROOT_PATH]){
       try {
@@ -349,7 +353,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
 
   return (
-    <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
+    <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove} dragStatus={dragStatus}>
       <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
         <TreeView id="treeView">
           <li key={`treeViewLiMenu`} data-id={`treeViewLiMenu`} className="li_tv">
@@ -393,6 +397,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                     key={index}
                     showIconsMenu={props.showIconsMenu}
                     hideIconsMenu={props.hideIconsMenu}
+                    dragStatus={state.dragStatus}
                   />
                 ))
               }

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

@@ -14,6 +14,7 @@ export interface FileLabelProps {
   }
   fileDecorations: fileDecoration[]
   editModeOff: (content: string) => void
+  dragStatus: boolean
 }
 
 export const FileLabel = (props: FileLabelProps) => {
@@ -84,6 +85,7 @@ export const FileLabel = (props: FileLabelProps) => {
         tooltipText={`${file.path}`}
         tooltipId={`fileExplorer.${file.path}`}
         tooltipClasses="text-nowrap"
+        hide={props.dragStatus}
       >
         <span className={`remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')} data-path={file.path}>
           {file.name}

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

@@ -25,6 +25,7 @@ export interface RenderFileProps {
   handleClickFile: (path: string, type: string) => void
   handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void
   fileDecorations: fileDecoration[]
+  dragStatus: boolean
 }
 
 export const FileRender = (props: RenderFileProps) => {
@@ -107,7 +108,7 @@ export const FileRender = (props: RenderFileProps) => {
           <>
             <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
               <div className="d-flex flex-row">
-                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} dragStatus={props.dragStatus} />
                 <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
               </div>
             </Draggable>
@@ -138,6 +139,7 @@ export const FileRender = (props: RenderFileProps) => {
                 handleContextMenu={props.handleContextMenu}
                 expandPath={props.expandPath}
                 key={index}
+                dragStatus={props.dragStatus}
               />
             ))}
           </TreeView>
@@ -155,7 +157,7 @@ export const FileRender = (props: RenderFileProps) => {
           <>
             <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
               <div className="d-flex flex-row">
-                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} dragStatus={props.dragStatus} />
                 <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
               </div>
             </Draggable>

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

@@ -68,7 +68,8 @@ export function Workspace() {
     mouseOverElement: null,
     showContextMenu: false,
     reservedKeywords: [ROOT_PATH, 'gist-'],
-    copyElement: []
+    copyElement: [],
+    dragStatus: false
   })
 
   useEffect(() => {
@@ -612,6 +613,15 @@ export function Workspace() {
     })
   }
 
+  const dragStatus = (status: boolean) => {
+    setState((prevState) => {
+      return {
+        ...prevState,
+        dragStatus: status
+      }
+    })
+  }
+
   const handleNewFileInput = async (parentFolder?: string) => {
     if (!parentFolder) parentFolder = getFocusedFolder()
     const expandPath = [...new Set([...global.fs.browser.expandPath, parentFolder])]
@@ -1041,6 +1051,7 @@ export function Workspace() {
                     editModeOn={editModeOn}
                     handleNewFileInput={handleNewFileInput}
                     handleNewFolderInput={handleNewFolderInput}
+                    dragStatus={dragStatus}
                   />
                 </div>
               )}
@@ -1099,6 +1110,7 @@ export function Workspace() {
                     editModeOn={editModeOn}
                     handleNewFileInput={handleNewFileInput}
                     handleNewFolderInput={handleNewFolderInput}
+                    dragStatus={dragStatus}
                   />
                 </div>
               )}

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

@@ -125,6 +125,7 @@ export interface FileExplorerProps {
     toGist: (path?: string, type?: string) => void
     handleNewFileInput: (parentFolder?: string) => Promise<void>
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
+    dragStatus: (status: boolean) => void
 }
 type Placement = import('react-overlays/usePopper').Placement
 export interface FileExplorerMenuProps {
@@ -190,6 +191,7 @@ export interface WorkSpaceState {
     showContextMenu: boolean
     reservedKeywords: string[]
     copyElement: CopyElementType[]
+    dragStatus: boolean
 }
 
 export type FileFocusContextType = {