feat: file tree context menu

Author: drl990114

apps/linebyline/src/components/Explorer/index.tsx

@@ -10,7 +10,6 @@ import { useGlobalCacheData, useOpen } from '@/hooks'
 import { CacheManager } from '@/helper'
 import { Empty, FileTree, List, Popper } from '@/components'
 import styled from 'styled-components'
-import type { RightNavItem } from '../SideBar/SideBarHeader'
 import SideBarHeader from '../SideBar/SideBarHeader'
 
 const RecentListBottom = styled.div`
@@ -26,7 +25,7 @@ const RecentListBottom = styled.div`
 
 const Explorer: FC<ExplorerProps> = (props) => {
   const { t } = useTranslation()
-  const { addFile, folderData, activeId, addOpenedFile, setActiveId } = useEditorStore()
+  const { folderData, activeId, addOpenedFile, setActiveId } = useEditorStore()
   const [popperOpen, setPopperOpen] = useState(false)
   const [cache] = useGlobalCacheData()
   const { openFolderDialog, openFolder } = useOpen()
@@ -51,15 +50,6 @@ const Explorer: FC<ExplorerProps> = (props) => {
     [openFolder],
   )
 
-  const handleRightNavItemClick = useCallback(
-    (item: RightNavItem) => {
-      if (item.key === 'addFile') {
-        addFile()
-      }
-    },
-    [addFile],
-  )
-
   const listData = useMemo(
     () =>
       cache.openFolderHistory.map((history: { time: string; path: string }) => ({
@@ -74,19 +64,9 @@ const Explorer: FC<ExplorerProps> = (props) => {
 
   return (
     <Container className={containerCLs}>
-      <SideBarHeader
-        name='EXPLORER'
-        onRightNavItemClick={handleRightNavItemClick}
-        rightNavItems={[
-          {
-            iconCls: 'ri-file-add-line',
-            key: 'addFile',
-            tooltip: { title: 'Add File', arrow: true },
-          },
-        ]}
-      />
+      <SideBarHeader name='EXPLORER' />
       <div className='h-full w-full overflow-auto'>
-        {folderData && folderData.length > 1 ? (
+        {folderData && folderData.length > 0 ? (
           <FileTree
             className='flex-1'
             data={folderData}

apps/linebyline/src/components/FileTree/FileNode.tsx

@@ -1,32 +1,53 @@
 import classNames from 'classnames'
 import type { FC, MouseEventHandler } from 'react'
-import { memo, useCallback, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { FileNodeStyled } from './styles'
 import type { IFile } from '@/helper/filesys'
+import type { NewInputRef } from './NewFIleInput'
+import NewFileInput from './NewFIleInput'
+import bus from '@/helper/eventBus'
+import useFileTreeContextMenuNode from '@/hooks/useContextMenuNode'
 
-const FileNode: FC<FileNodeProps> = ({
-  item,
-  level = 0,
-  activeId,
-  onSelect,
-}) => {
+const FileNode: FC<FileNodeProps> = ({ item, level = 0, activeId, onSelect }) => {
   const [isOpen, setIsOpen] = useState(false)
+  const newInputRef = useRef<NewInputRef>(null)
+  const { contextMenuNode, setContextMenuNode } = useFileTreeContextMenuNode()
   const isActived = activeId === item.id
   const isFolder = item.kind === 'dir'
 
+  useEffect(() => {
+    const newFileHandler = () => {
+      if (!contextMenuNode || contextMenuNode.id !== item.id) return
+      newInputRef.current?.show({ fileNode: contextMenuNode })
+    }
+
+    bus.on('SIDEBAR:show-new-input', newFileHandler)
+
+    return () => {
+      bus.detach('SIDEBAR:show-new-input', newFileHandler)
+    }
+  }, [contextMenuNode, item])
+
   const handleClick: MouseEventHandler = useCallback(
     (e) => {
       e.stopPropagation()
+      bus.emit('SIDEBAR:hide-new-input')
       setIsOpen(!isOpen)
     },
     [isOpen],
   )
 
-  const handleSelect: MouseEventHandler = useCallback(
-    () => {
-      onSelect(item)
+  const handleSelect: MouseEventHandler = useCallback(() => {
+    onSelect(item)
+  }, [item, onSelect])
+
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, fileNode?: IFile) => {
+      e.stopPropagation()
+      const node = fileNode || item
+      setContextMenuNode(node)
     },
-    [item, onSelect],
+    [item, setContextMenuNode],
   )
 
   const nodeWrapperCls = classNames('file-node', {
@@ -36,24 +57,23 @@ const FileNode: FC<FileNodeProps> = ({
   const iconCls = 'file-icon'
 
   return (
-    <FileNodeStyled onClick={handleClick}>
+    <FileNodeStyled onClick={handleClick} onContextMenu={handleContextMenu}>
+      <NewFileInput ref={newInputRef} autoFocus style={{ marginLeft: level * 16 + 6 }} />
       <div
         className={nodeWrapperCls}
         style={{ paddingLeft: level * 16 + 6 }}
         onClick={handleSelect}
       >
-        {isFolder
-          ? (
+        {isFolder ? (
           <i className={`${isOpen ? 'ri-folder-5-line' : 'ri-folder-3-line'} ${iconCls}`} />
-            )
-          : (
+        ) : (
           <i className={`ri-markdown-fill ${iconCls}`} />
-            )}
-        <div className="file-node__text">{item.name}</div>
+        )}
+        <div className='file-node__text'>{item.name}</div>
       </div>
-      {isOpen
-        && item.children
-        && item.children.map(child => (
+      {isOpen &&
+        item.children &&
+        item.children.map((child) => (
           <FileNode
             key={child.name}
             item={child}

apps/linebyline/src/components/FileTree/FileNodeContextMenu.tsx

@@ -0,0 +1,62 @@
+import bus from '@/helper/eventBus'
+import useFileTreeContextMenu from '@/hooks/useContextMenu'
+import { MenuList, MenuItem, ListItemText, Paper } from '@mui/material'
+import { memo } from 'react'
+import styled, { css } from 'styled-components'
+
+const ContextMenu = styled(Paper)<ContextMenuProps>`
+  position: fixed;
+  width: 140px;
+
+  ${({ top, left }) => css`
+    top: ${top}px;
+    left: ${left}px;
+  `}
+`
+
+export const FileNodeContextMenu = memo((props: ContextMenuProps) => {
+  const { open, setOpen } = useFileTreeContextMenu()
+  const { ...positionProps } = props
+
+  if (!open) return null
+
+  const ContextMenuItems = [
+    {
+      key: 'add_file',
+      label: 'Add File',
+      handler: () => {
+        bus.emit('SIDEBAR:show-new-input')
+      },
+    },
+  ]
+
+  return (
+    <ContextMenu {...positionProps}>
+      <MenuList sx={{ padding: 0 }}>
+        {ContextMenuItems.map((menuItem) => {
+          const { key, label, handler } = menuItem
+          return (
+            <MenuItem
+              sx={{ padding: 0.7 }}
+              key={key}
+              onClick={(e) => {
+                e.stopPropagation()
+                setOpen(false)
+                handler()
+              }}
+            >
+              <ListItemText>
+                <span style={{ fontSize: 12 }}>{label}</span>
+              </ListItemText>
+            </MenuItem>
+          )
+        })}
+      </MenuList>
+    </ContextMenu>
+  )
+})
+
+interface ContextMenuProps {
+  top: number
+  left: number
+}

apps/linebyline/src/components/FileTree/FileTree.tsx

@@ -1,25 +1,35 @@
 import classNames from 'classnames'
 import type { FC } from 'react'
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import FileNode from './FileNode'
 import type { IFile } from '@/helper/filesys'
+import { FileNodeContextMenu } from './FileNodeContextMenu'
+import useFileTreeContextMenu from '@/hooks/useContextMenu'
 
 const FileTree: FC<FileTreeProps> = (props) => {
   const { data, activeId, onSelect, className } = props
+  const { setOpen, points, setPoints } = useFileTreeContextMenu()
 
   const containerCls = classNames('w-full overflow-hidden', className)
 
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.preventDefault()
+      setOpen(true)
+      setPoints({
+        x: e.clientX,
+        y: e.clientY,
+      })
+    },
+    [setOpen, setPoints],
+  )
+
   return (
-    <div className={containerCls}>
-      {data?.map(item => (
-        <FileNode
-          key={item.name}
-          item={item}
-          level={0}
-          activeId={activeId}
-          onSelect={onSelect}
-        />
+    <div className={containerCls} onContextMenuCapture={handleContextMenu}>
+      {data?.map((item) => (
+        <FileNode key={item.name} item={item} level={0} activeId={activeId} onSelect={onSelect} />
       ))}
+      <FileNodeContextMenu top={points.y} left={points.x} />
     </div>
   )
 }

apps/linebyline/src/components/FileTree/NewFIleInput.tsx

@@ -0,0 +1,91 @@
+import bus from '@/helper/eventBus'
+import type { IFile } from '@/helper/filesys'
+import { useEditorStore } from '@/stores'
+import {
+  useCallback,
+  type HTMLAttributes,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from 'react'
+
+export type NewInputRef = {
+  show: (args: { fileNode: IFile }) => void
+}
+
+const NewFileInput = forwardRef<NewInputRef, HTMLAttributes<HTMLInputElement>>((props, ref) => {
+  const [visible, setVisible] = useState(false)
+  const [inputName, setInputName] = useState('')
+  const contextFileNode = useRef<IFile>()
+  const { addFile } = useEditorStore()
+
+  const hideInput = useCallback( () => {
+    setVisible(false)
+    setInputName('')
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        document.addEventListener('click', hideInput)
+      })
+    }
+
+    return () => {
+      document.removeEventListener('click', hideInput)
+    }
+  }, [visible, hideInput])
+
+  useEffect(() => {
+    bus.on('SIDEBAR:hide-new-input', hideInput)
+
+    return () => {
+      bus.detach('SIDEBAR:hide-new-input', hideInput)
+    }
+  }, [hideInput])
+
+  useImperativeHandle(ref, () => ({
+    show({ fileNode }) {
+      setVisible(true)
+      contextFileNode.current = fileNode
+    },
+  }))
+
+  const handleKeyup: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (!event.shiftKey && event.keyCode === 13) {
+        if (!contextFileNode.current) return
+        const res = addFile(contextFileNode.current, { name: inputName, kind: 'file' })
+
+        if (res === false) {
+          // TODO has same file
+        }
+
+        hideInput()
+        event.preventDefault()
+        return false
+      }
+    },
+    [addFile, inputName, hideInput],
+  )
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+    setInputName(e.target.value)
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <input
+      className='newfile-input'
+      value={inputName}
+      onChange={handleChange}
+      onKeyUp={handleKeyup}
+      {...props}
+    ></input>
+  )
+})
+
+export default NewFileInput

apps/linebyline/src/components/FileTree/styles.ts

@@ -9,6 +9,7 @@ export const FileNodeStyled = styled.div`
     box-sizing: border-box;
     font-size: 0.9rem;
     cursor: pointer;
+    user-select: none;
 
     &__text {
       text-overflow: ellipsis;
@@ -30,4 +31,10 @@ export const FileNodeStyled = styled.div`
   .file-icon {
     flex-shrink: 0;
   }
+
+
+  .newfile-input {
+    margin: 0 8px;
+    border: 1px solid ${props => props.theme.accentColor};
+  }
 `