tooltips while dragging

1 year ago · f94a982e79
parent ae4e9270c6
commit f94a982e79
10 changed files with 73 additions and 29 deletions
--- a/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts
+++ b/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
 })
--- a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx
+++ b/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)
--- a/libs/remix-ui/drag-n-drop/src/lib/types/index.ts
+++ b/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
 }
--- a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
+++ b/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,24 +13,31 @@ export function CustomTooltip({children, placement, tooltipId, tooltipClasses, t
  }

  return (
-    <Fragment>
-      <OverlayTrigger
-        placement={placement}
-        overlay={
-          <Popover id={`popover-positioned-${placement}`}>
-            <Popover.Content
-              id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
-              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}
-            </Popover.Content>
-          </Popover>
-        }
-        delay={delay}
-      >
+    (!hide ? (
+      <Fragment>
+        <OverlayTrigger
+          placement={placement}
+          overlay={
+
+            <Popover id={`popover-positioned-${placement}`}>
+              <Popover.Content
+                id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
+                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}
+              </Popover.Content>
+            </Popover>
+          }
+          delay={delay}
+        >
+          {children}
+        </OverlayTrigger>
+      </Fragment>
+    ) : (
+      <Fragment>
        {children}
-      </OverlayTrigger>
-    </Fragment>
+      </Fragment>
+    ))
  )
 }
--- a/libs/remix-ui/helper/src/types/customtooltip.ts
+++ b/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
 }
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/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}
                  />
                ))
              }
--- a/libs/remix-ui/workspace/src/lib/components/file-label.tsx
+++ b/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}
--- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx
+++ b/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>
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/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>
              )}
--- a/libs/remix-ui/workspace/src/lib/types/index.ts
+++ b/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 = {