* feat: add file manager module - Complete file manager implementation with UI/UX - Add drive management functionality - Add file upload/download with progress tracking - Add stamp integration and handling - Add bulk operations and context menus Co-authored-by: Roland Seres <roland.seres90@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com>
This commit is contained in:
Bálint Ujvári
GitHub
@@ -0,0 +1,496 @@
|
||||
import { ReactElement, useEffect, useLayoutEffect, useRef, useState, useContext } from 'react'
|
||||
import './FileBrowser.scss'
|
||||
import { FileBrowserHeader } from './FileBrowserHeader/FileBrowserHeader'
|
||||
import { FileBrowserContent } from './FileBrowserContent/FileBrowserContent'
|
||||
import { useContextMenu } from '../../hooks/useContextMenu'
|
||||
import { NotificationBar } from '../NotificationBar/NotificationBar'
|
||||
import { FileAction, FileTransferType, TransferStatus, ViewType } from '../../constants/transfers'
|
||||
import { FileProgressNotification } from '../FileProgressNotification/FileProgressNotification'
|
||||
import { useView } from '../../../../pages/filemanager/ViewContext'
|
||||
import { Context as FMContext } from '../../../../providers/FileManager'
|
||||
import { useTransfers } from '../../hooks/useTransfers'
|
||||
import { useSearch } from '../../../../pages/filemanager/SearchContext'
|
||||
import { useFileFiltering } from '../../hooks/useFileFiltering'
|
||||
import { useDragAndDrop } from '../../hooks/useDragAndDrop'
|
||||
import { useBulkActions } from '../../hooks/useBulkActions'
|
||||
import { SortKey, SortDir, useSorting } from '../../hooks/useSorting'
|
||||
|
||||
import { Point, Dir, safeSetState } from '../../utils/common'
|
||||
import { computeContextMenuPosition } from '../../utils/ui'
|
||||
import { FileBrowserTopBar } from './FileBrowserTopBar/FileBrowserTopBar'
|
||||
import { handleDestroyDrive } from '../../utils/bee'
|
||||
import { Context as SettingsContext } from '../../../../providers/Settings'
|
||||
import { ErrorModal } from '../ErrorModal/ErrorModal'
|
||||
import { FileBrowserModals } from './FileBrowserModals'
|
||||
import { FileBrowserContextMenu } from './FileBrowserMenu/FileBrowserContextMenu'
|
||||
import { FileInfo } from '@solarpunkltd/file-manager-lib'
|
||||
|
||||
const extractFilesFromClipboardEvent = (e: React.ClipboardEvent): File[] => {
|
||||
const out: File[] = []
|
||||
const items = e.clipboardData?.items ?? []
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const it = items[i]
|
||||
|
||||
if (it.kind === 'file') {
|
||||
const f = it.getAsFile()
|
||||
|
||||
if (f) out.push(f)
|
||||
}
|
||||
}
|
||||
|
||||
return out
|
||||
}
|
||||
|
||||
interface FileBrowserProps {
|
||||
errorMessage?: string
|
||||
setErrorMessage?: (error: string) => void
|
||||
}
|
||||
|
||||
export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps): ReactElement {
|
||||
const { showContext, pos, contextRef, handleContextMenu, handleCloseContext } = useContextMenu<HTMLDivElement>()
|
||||
const { view, setActualItemView } = useView()
|
||||
const { beeApi } = useContext(SettingsContext)
|
||||
const { files, currentDrive, resync, drives, fm, showError, setShowError } = useContext(FMContext)
|
||||
const {
|
||||
uploadFiles,
|
||||
isUploading,
|
||||
uploadItems,
|
||||
isDownloading,
|
||||
downloadItems,
|
||||
trackDownload,
|
||||
conflictPortal,
|
||||
cancelOrDismissUpload,
|
||||
cancelOrDismissDownload,
|
||||
dismissAllUploads,
|
||||
dismissAllDownloads,
|
||||
} = useTransfers({ setErrorMessage })
|
||||
|
||||
const { query, scope, includeActive, includeTrashed } = useSearch()
|
||||
|
||||
const [safePos, setSafePos] = useState<Point>(pos)
|
||||
const [dropDir, setDropDir] = useState<Dir>(Dir.Down)
|
||||
|
||||
const legacyUploadRef = useRef<HTMLInputElement | null>(null)
|
||||
const contentRef = useRef<HTMLDivElement | null>(null)
|
||||
const bodyRef = useRef<HTMLDivElement | null>(null)
|
||||
const isMountedRef = useRef(true)
|
||||
const rafIdRef = useRef<number | null>(null)
|
||||
|
||||
const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false)
|
||||
const [showDestroyDriveModal, setShowDestroyDriveModal] = useState(false)
|
||||
const [confirmBulkForget, setConfirmBulkForget] = useState(false)
|
||||
const [isRefreshing, setIsRefreshing] = useState(false)
|
||||
const [pendingCancelUpload, setPendingCancelUpload] = useState<string | null>(null)
|
||||
|
||||
const q = query.trim().toLowerCase()
|
||||
const isSearchMode = q.length > 0
|
||||
|
||||
const getDriveName = (fi: FileInfo): string => {
|
||||
const match = drives.find(d => d.id.toString() === fi.driveId.toString())
|
||||
|
||||
return match?.name ?? ''
|
||||
}
|
||||
|
||||
const openTopbarMenu = (anchorEl: HTMLElement) => {
|
||||
const r = anchorEl.getBoundingClientRect()
|
||||
const bodyRect = bodyRef.current?.getBoundingClientRect()
|
||||
const clickX = Math.round(r.right - 6)
|
||||
const minY = (bodyRect?.top ?? 0) + 8
|
||||
const clickY = Math.max(Math.round(r.bottom + 6), minY)
|
||||
const fakeEvt = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
preventDefault: () => {},
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
stopPropagation: () => {},
|
||||
clientX: clickX,
|
||||
clientY: clickY,
|
||||
} as React.MouseEvent<HTMLDivElement>
|
||||
handleContextMenu(fakeEvt)
|
||||
}
|
||||
|
||||
const { listToRender } = useFileFiltering({
|
||||
files,
|
||||
currentDrive: currentDrive || null,
|
||||
view,
|
||||
isSearchMode,
|
||||
query: q,
|
||||
scope,
|
||||
includeActive,
|
||||
includeTrashed,
|
||||
})
|
||||
|
||||
const { sorted, sort, toggle, reset } = useSorting(listToRender, {
|
||||
persist: false,
|
||||
defaultState: { key: SortKey.Timestamp, dir: SortDir.Desc },
|
||||
getDriveName,
|
||||
})
|
||||
|
||||
const bulk = useBulkActions({
|
||||
listToRender,
|
||||
trackDownload,
|
||||
})
|
||||
|
||||
const { isDragging, handleDragEnter, handleDragOver, handleDragLeave, handleDrop, handleOverlayDrop } =
|
||||
useDragAndDrop({
|
||||
onFilesDropped: uploadFiles,
|
||||
currentDrive: currentDrive || null,
|
||||
})
|
||||
|
||||
const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files
|
||||
|
||||
if (files && files.length > 0) {
|
||||
uploadFiles(files)
|
||||
}
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
const onContextUploadFile = () => {
|
||||
const el = legacyUploadRef.current
|
||||
|
||||
if (!el) return
|
||||
|
||||
try {
|
||||
if (typeof (el as HTMLInputElement).showPicker === 'function') {
|
||||
;(el as HTMLInputElement).showPicker()
|
||||
} else {
|
||||
el.click()
|
||||
}
|
||||
} catch {
|
||||
el.click()
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => handleCloseContext())
|
||||
}
|
||||
|
||||
const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
|
||||
const files = extractFilesFromClipboardEvent(e)
|
||||
|
||||
if (files.length === 0) return
|
||||
|
||||
e.preventDefault()
|
||||
uploadFiles(files)
|
||||
}
|
||||
|
||||
const handleFileBrowserContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const t = e.target as HTMLElement
|
||||
|
||||
if (t.closest('.fm-file-item-context-menu, .fm-file-browser-context-menu')) return
|
||||
|
||||
if (!e.shiftKey && t.closest('.fm-file-item-content')) return
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleContextMenu(e)
|
||||
}
|
||||
|
||||
const handleDeleteModalProceed = async (action: FileAction) => {
|
||||
setShowBulkDeleteModal(false)
|
||||
|
||||
if (action === FileAction.Trash) {
|
||||
return await bulk.bulkTrash(bulk.selectedFiles)
|
||||
}
|
||||
|
||||
if (action === FileAction.Forget) {
|
||||
return setConfirmBulkForget(true)
|
||||
}
|
||||
|
||||
if (action === FileAction.Destroy) {
|
||||
return setShowDestroyDriveModal(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDestroyDriveConfirm = async () => {
|
||||
if (!currentDrive) return
|
||||
|
||||
setShowDestroyDriveModal(false)
|
||||
|
||||
await handleDestroyDrive(
|
||||
beeApi,
|
||||
fm,
|
||||
currentDrive,
|
||||
() => {
|
||||
setShowDestroyDriveModal(false)
|
||||
},
|
||||
e => {
|
||||
setErrorMessage?.(`Error destroying drive: ${currentDrive.name}: ${e}`)
|
||||
setShowError(true)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const handleUploadClose = (name: string) => {
|
||||
const row = uploadItems.find(i => i.name === name)
|
||||
|
||||
if (row?.status === TransferStatus.Uploading) {
|
||||
setPendingCancelUpload(name)
|
||||
} else {
|
||||
cancelOrDismissUpload(name)
|
||||
}
|
||||
}
|
||||
|
||||
const updateContextMenuPosition = () => {
|
||||
const menu = contextRef.current
|
||||
const body = bodyRef.current
|
||||
|
||||
if (!menu) return
|
||||
|
||||
const rect = menu.getBoundingClientRect()
|
||||
const containerRect = body?.getBoundingClientRect() ?? null
|
||||
|
||||
const { safePos: sp, dropDir: dd } = computeContextMenuPosition({
|
||||
clickPos: pos,
|
||||
menuRect: rect,
|
||||
viewport: { w: window.innerWidth, h: window.innerHeight },
|
||||
margin: 8,
|
||||
containerRect,
|
||||
})
|
||||
|
||||
const topLeft = containerRect
|
||||
? { x: Math.round(sp.x - containerRect.left), y: Math.round(sp.y - containerRect.top + 2) }
|
||||
: sp
|
||||
|
||||
setSafePos(topLeft)
|
||||
setDropDir(dd)
|
||||
rafIdRef.current = null
|
||||
}
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!showContext) return
|
||||
|
||||
if (rafIdRef.current) {
|
||||
cancelAnimationFrame(rafIdRef.current)
|
||||
}
|
||||
|
||||
rafIdRef.current = requestAnimationFrame(updateContextMenuPosition)
|
||||
|
||||
return () => {
|
||||
if (rafIdRef.current) {
|
||||
cancelAnimationFrame(rafIdRef.current)
|
||||
rafIdRef.current = null
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [showContext, pos, contextRef])
|
||||
|
||||
useEffect(() => {
|
||||
let title = currentDrive?.name || ''
|
||||
|
||||
if (isSearchMode) {
|
||||
title = 'Search results'
|
||||
|
||||
if (scope === 'selected' && currentDrive?.name) {
|
||||
title += ` — ${currentDrive.name}`
|
||||
}
|
||||
}
|
||||
|
||||
setActualItemView?.(title)
|
||||
}, [isSearchMode, scope, currentDrive, setActualItemView])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSearchMode) {
|
||||
bulk.clearAll()
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isSearchMode])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
isMountedRef.current = false
|
||||
|
||||
if (rafIdRef.current) {
|
||||
cancelAnimationFrame(rafIdRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const doRefresh = async () => {
|
||||
handleCloseContext()
|
||||
|
||||
if (isRefreshing) return
|
||||
|
||||
setIsRefreshing(true)
|
||||
|
||||
try {
|
||||
await resync()
|
||||
} finally {
|
||||
safeSetState(isMountedRef, setIsRefreshing)(false)
|
||||
}
|
||||
}
|
||||
|
||||
const showDeleteModal = showBulkDeleteModal && bulk.selectedFiles.length > 0 && view === ViewType.File
|
||||
const showDragOverlay = isDragging && Boolean(currentDrive)
|
||||
const fileCountText = bulk.selectedFiles.length === 1 ? 'file' : 'files'
|
||||
|
||||
return (
|
||||
<>
|
||||
{conflictPortal}
|
||||
|
||||
<input type="file" ref={legacyUploadRef} style={{ display: 'none' }} onChange={onFileSelected} multiple />
|
||||
<input type="file" ref={bulk.fileInputRef} style={{ display: 'none' }} onChange={onFileSelected} multiple />
|
||||
|
||||
<div className="fm-file-browser-container" data-search-mode={isSearchMode ? 'true' : 'false'}>
|
||||
<FileBrowserTopBar onOpenMenu={openTopbarMenu} canOpen={!isSearchMode && Boolean(currentDrive)} />
|
||||
<div
|
||||
className="fm-file-browser-content"
|
||||
data-search-mode={isSearchMode ? 'true' : 'false'}
|
||||
ref={contentRef}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onPaste={handlePaste}
|
||||
onContextMenu={handleFileBrowserContextMenu}
|
||||
>
|
||||
<FileBrowserHeader
|
||||
key={isSearchMode ? 'hdr-search' : 'hdr-normal'}
|
||||
isSearchMode={isSearchMode}
|
||||
bulk={bulk}
|
||||
sortKey={sort.key}
|
||||
sortDir={sort.dir}
|
||||
onSortName={() => toggle(SortKey.Name)}
|
||||
onSortSize={() => toggle(SortKey.Size)}
|
||||
onSortDate={() => toggle(SortKey.Timestamp)}
|
||||
onSortDrive={() => toggle(SortKey.Drive)}
|
||||
onClearSort={reset}
|
||||
/>
|
||||
<div
|
||||
className="fm-file-browser-content-body"
|
||||
ref={bodyRef}
|
||||
onMouseDown={e => {
|
||||
if (e.button !== 0) return
|
||||
handleCloseContext()
|
||||
}}
|
||||
>
|
||||
<FileBrowserContent
|
||||
key={isSearchMode ? `content-search` : `content-${currentDrive?.id.toString() ?? 'none'}`}
|
||||
listToRender={sorted}
|
||||
drives={drives}
|
||||
currentDrive={currentDrive || null}
|
||||
view={view}
|
||||
isSearchMode={isSearchMode}
|
||||
trackDownload={trackDownload}
|
||||
selectedIds={bulk.selectedIds}
|
||||
onToggleSelected={bulk.toggleOne}
|
||||
bulkSelectedCount={bulk.selectedCount}
|
||||
onBulk={{
|
||||
download: () => bulk.bulkDownload(bulk.selectedFiles),
|
||||
restore: () => bulk.bulkRestore(bulk.selectedFiles),
|
||||
forget: () => bulk.bulkForget(bulk.selectedFiles),
|
||||
destroy: () => setShowDestroyDriveModal(true),
|
||||
delete: () => setShowBulkDeleteModal(true),
|
||||
}}
|
||||
setErrorMessage={setErrorMessage}
|
||||
/>
|
||||
{showError && (
|
||||
<ErrorModal
|
||||
label={errorMessage || 'An error occurred'}
|
||||
onClick={() => {
|
||||
setShowError(false)
|
||||
setErrorMessage?.('')
|
||||
|
||||
return
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showContext && (
|
||||
<div
|
||||
ref={contextRef}
|
||||
className="fm-file-browser-context-menu fm-context-menu"
|
||||
style={{ top: safePos.y, left: safePos.x }}
|
||||
data-drop={dropDir}
|
||||
onMouseDown={e => e.stopPropagation()}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<FileBrowserContextMenu
|
||||
drives={drives}
|
||||
view={view}
|
||||
selectedFilesCount={bulk.selectedFiles.length}
|
||||
onRefresh={doRefresh}
|
||||
enableRefresh={Boolean(fm?.adminStamp)}
|
||||
onUploadFile={onContextUploadFile}
|
||||
onBulkDownload={() => bulk.bulkDownload(bulk.selectedFiles)}
|
||||
onBulkRestore={() => bulk.bulkRestore(bulk.selectedFiles)}
|
||||
onBulkDelete={() => setShowBulkDeleteModal(true)}
|
||||
onBulkDestroy={() => setShowDestroyDriveModal(true)}
|
||||
onBulkForget={() => bulk.bulkForget(bulk.selectedFiles)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showDragOverlay && (
|
||||
<div
|
||||
className="fm-drag-overlay"
|
||||
onDragOver={e => {
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
}}
|
||||
onDrop={handleOverlayDrop}
|
||||
>
|
||||
<div className="fm-drag-text">Drop file(s) to upload</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FileBrowserModals
|
||||
showDeleteModal={showDeleteModal}
|
||||
selectedFiles={bulk.selectedFiles}
|
||||
fileCountText={fileCountText}
|
||||
currentDrive={currentDrive || null}
|
||||
confirmBulkForget={confirmBulkForget}
|
||||
showDestroyDriveModal={showDestroyDriveModal}
|
||||
pendingCancelUpload={pendingCancelUpload}
|
||||
onDeleteCancel={() => setShowBulkDeleteModal(false)}
|
||||
onDeleteProceed={handleDeleteModalProceed}
|
||||
onForgetConfirm={async () => {
|
||||
await bulk.bulkForget(bulk.selectedFiles)
|
||||
setConfirmBulkForget(false)
|
||||
}}
|
||||
onForgetCancel={() => setConfirmBulkForget(false)}
|
||||
onDestroyCancel={() => setShowDestroyDriveModal(false)}
|
||||
onDestroyConfirm={handleDestroyDriveConfirm}
|
||||
onCancelUploadConfirm={() => {
|
||||
if (pendingCancelUpload) {
|
||||
cancelOrDismissUpload(pendingCancelUpload)
|
||||
setPendingCancelUpload(null)
|
||||
}
|
||||
}}
|
||||
onCancelUploadCancel={() => setPendingCancelUpload(null)}
|
||||
/>
|
||||
|
||||
{isRefreshing && (
|
||||
<div className="fm-refresh-overlay" aria-busy="true" aria-live="polite">
|
||||
<div className="fm-refresh-content">
|
||||
<div className="fm-mini-spinner" role="status" aria-label="Syncing…" />
|
||||
<span className="fm-refresh-text">Syncing latest files…</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="fm-file-browser-footer">
|
||||
<FileProgressNotification
|
||||
label="Uploading files"
|
||||
type={FileTransferType.Upload}
|
||||
open={isUploading}
|
||||
count={uploadItems.length}
|
||||
items={uploadItems}
|
||||
onRowClose={handleUploadClose}
|
||||
onCloseAll={() => dismissAllUploads()}
|
||||
/>
|
||||
<FileProgressNotification
|
||||
label="Downloading files"
|
||||
type={FileTransferType.Download}
|
||||
open={isDownloading}
|
||||
count={downloadItems.length}
|
||||
items={downloadItems}
|
||||
onRowClose={name => cancelOrDismissDownload(name)}
|
||||
onCloseAll={() => dismissAllDownloads()}
|
||||
/>
|
||||
<NotificationBar setErrorMessage={setErrorMessage} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user