Release v0.1.4
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
|
||||
import { useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
|
||||
import { ChevronRight, Copy, Download, File, Folder, Home, Link2, MoveRight, Plus, Search, Trash2, UploadCloud } from "lucide-react";
|
||||
import {
|
||||
Button,
|
||||
@@ -78,6 +78,9 @@ import { useFileDragDropState } from "./hooks/useFileDragDropState";
|
||||
|
||||
type UploadPhase = "idle" | "uploading" | "unpacking" | "finalizing";
|
||||
|
||||
const DEFAULT_FILE_LIST_ROW_HEIGHT = 58;
|
||||
const FILE_LIST_OVERSCAN_ROWS = 8;
|
||||
|
||||
export default function FilesPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
|
||||
const canDownload = hasScope(auth, "files:download");
|
||||
const canUpload = hasScope(auth, "files:upload");
|
||||
@@ -141,6 +144,28 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
|
||||
const entries = buildExplorerEntries(visibleFiles, folders, currentFolder, searchActive);
|
||||
return sortExplorerEntries(entries, sortColumn, sortDirection);
|
||||
}, [visibleFiles, folders, currentFolder, searchActive, sortColumn, sortDirection]);
|
||||
const fileListViewportRef = useRef<HTMLDivElement | null>(null);
|
||||
const fileListMeasureRowRef = useRef<HTMLDivElement | null>(null);
|
||||
const [fileListViewportHeight, setFileListViewportHeight] = useState(0);
|
||||
const [fileListScrollTop, setFileListScrollTop] = useState(0);
|
||||
const [fileListRowHeight, setFileListRowHeight] = useState(DEFAULT_FILE_LIST_ROW_HEIGHT);
|
||||
const virtualExplorerRows = useMemo(() => {
|
||||
const rowHeight = Math.max(1, fileListRowHeight);
|
||||
const entryScrollTop = Math.max(0, fileListScrollTop - rowHeight);
|
||||
const viewportHeight = Math.max(fileListViewportHeight, rowHeight * FILE_LIST_OVERSCAN_ROWS);
|
||||
const startIndex = Math.max(0, Math.floor(entryScrollTop / rowHeight) - FILE_LIST_OVERSCAN_ROWS);
|
||||
const endIndex = Math.min(
|
||||
explorerEntries.length,
|
||||
Math.ceil((entryScrollTop + viewportHeight) / rowHeight) + FILE_LIST_OVERSCAN_ROWS
|
||||
);
|
||||
|
||||
return {
|
||||
startIndex,
|
||||
topSpacerHeight: startIndex * rowHeight,
|
||||
bottomSpacerHeight: Math.max(0, (explorerEntries.length - endIndex) * rowHeight),
|
||||
entries: explorerEntries.slice(startIndex, endIndex)
|
||||
};
|
||||
}, [explorerEntries, fileListRowHeight, fileListScrollTop, fileListViewportHeight]);
|
||||
const visibleEntryKeys = useMemo(() => explorerEntries.map(entrySelectionKey), [explorerEntries]);
|
||||
const {
|
||||
selectedFileIds,
|
||||
@@ -172,6 +197,47 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
|
||||
const activeDialogSpace = activeDialogTarget ? spaces.find((space) => space.id === activeDialogTarget.spaceId) ?? null : null;
|
||||
const downloadLabel = selectedDownloadFileIds.length > 1 ? "Download ZIP" : "Download";
|
||||
|
||||
useEffect(() => {
|
||||
const viewport = fileListViewportRef.current;
|
||||
if (!viewport) return undefined;
|
||||
|
||||
const updateViewportHeight = () => {
|
||||
setFileListViewportHeight(viewport.clientHeight);
|
||||
setFileListScrollTop(viewport.scrollTop);
|
||||
};
|
||||
|
||||
updateViewportHeight();
|
||||
if (typeof ResizeObserver === "undefined") return undefined;
|
||||
|
||||
const observer = new ResizeObserver(updateViewportHeight);
|
||||
observer.observe(viewport);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const row = fileListMeasureRowRef.current;
|
||||
if (!row) return undefined;
|
||||
|
||||
const updateRowHeight = () => {
|
||||
const measuredHeight = row.getBoundingClientRect().height;
|
||||
if (measuredHeight > 0) setFileListRowHeight(Math.round(measuredHeight));
|
||||
};
|
||||
|
||||
updateRowHeight();
|
||||
if (typeof ResizeObserver === "undefined") return undefined;
|
||||
|
||||
const observer = new ResizeObserver(updateRowHeight);
|
||||
observer.observe(row);
|
||||
return () => observer.disconnect();
|
||||
}, [activeSpaceId, currentFolder]);
|
||||
|
||||
useEffect(() => {
|
||||
const viewport = fileListViewportRef.current;
|
||||
if (!viewport) return;
|
||||
viewport.scrollTop = 0;
|
||||
setFileListScrollTop(0);
|
||||
}, [activeSpaceId, currentFolder, searchActive, searchResults, sortColumn, sortDirection]);
|
||||
|
||||
async function loadSpaces() {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
@@ -1161,6 +1227,75 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
|
||||
: undefined;
|
||||
const visibleUploadProgress = uploadPhase === "unpacking" ? null : uploadProgress;
|
||||
|
||||
function renderExplorerEntry(entry: ExplorerEntry, rowIndex: number) {
|
||||
const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
|
||||
const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
|
||||
|
||||
return entry.kind === "folder" ? (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
|
||||
role="row"
|
||||
aria-rowindex={rowIndex}
|
||||
tabIndex={0}
|
||||
draggable
|
||||
onDragStart={(event) => handleInternalDragStart(entry, event)}
|
||||
onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
|
||||
onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
|
||||
onDragLeave={clearDropState}
|
||||
onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
|
||||
onMouseDown={preventTextSelectionOnShift}
|
||||
onClick={(event) => handleEntrySelection(entry, event)}
|
||||
onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
|
||||
onContextMenu={(event) => openContextMenu(event, "folder", entry)}
|
||||
onKeyDown={(event) => handleEntryKeyDown(entry, event)}
|
||||
>
|
||||
<div className="file-list-name-cell">
|
||||
<div className="file-list-name">
|
||||
<Folder className="file-row-icon" size={20} aria-hidden="true" />
|
||||
<span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
|
||||
</div>
|
||||
</div>
|
||||
<span>{formatBytes(entry.totalSize)}</span>
|
||||
<span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
|
||||
role="row"
|
||||
aria-rowindex={rowIndex}
|
||||
tabIndex={0}
|
||||
draggable
|
||||
onDragStart={(event) => handleInternalDragStart(entry, event)}
|
||||
onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
|
||||
onMouseDown={preventTextSelectionOnShift}
|
||||
onClick={(event) => handleEntrySelection(entry, event)}
|
||||
onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
|
||||
onContextMenu={(event) => openContextMenu(event, "file", entry)}
|
||||
onKeyDown={(event) => handleEntryKeyDown(entry, event)}
|
||||
>
|
||||
<div className="file-list-name-cell">
|
||||
<div className="file-list-name">
|
||||
<File className="file-row-icon" size={20} aria-hidden="true" />
|
||||
<span>
|
||||
<strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
|
||||
<small
|
||||
className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
|
||||
title={campaignShareTitle(entry.file)}
|
||||
>
|
||||
{activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
|
||||
{campaignShareLabel(entry.file)}
|
||||
</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>{formatBytes(entry.file.size_bytes)}</span>
|
||||
<span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
|
||||
{error && (
|
||||
@@ -1258,20 +1393,24 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
|
||||
|
||||
<div
|
||||
className="file-list-drop-target"
|
||||
ref={fileListViewportRef}
|
||||
onScroll={(event) => setFileListScrollTop(event.currentTarget.scrollTop)}
|
||||
onContextMenu={(event) => openContextMenu(event, "empty")}
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) applySelectionKeys(new Set<EntrySelectionKey>());
|
||||
}}
|
||||
>
|
||||
<div className="file-list-table" role="table" aria-label="Managed files">
|
||||
<div className="file-list-table" role="table" aria-label="Managed files" aria-rowcount={explorerEntries.length + 1}>
|
||||
{(() => {
|
||||
const normalizedCurrentFolder = normalizeFolder(currentFolder);
|
||||
const canOpenParent = Boolean(normalizedCurrentFolder && activeSpace);
|
||||
const targetParentFolder = parentFolderPath(normalizedCurrentFolder);
|
||||
return (
|
||||
<div
|
||||
ref={fileListMeasureRowRef}
|
||||
className={`file-list-row folder-row file-parent-row ${canOpenParent ? "" : "is-disabled"}`}
|
||||
role="row"
|
||||
aria-rowindex={1}
|
||||
tabIndex={canOpenParent ? 0 : -1}
|
||||
aria-disabled={!canOpenParent}
|
||||
aria-label={canOpenParent ? `Open parent folder ${targetParentFolder || activeSpace?.label || "root"}` : "Already at the root folder"}
|
||||
@@ -1301,71 +1440,13 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
|
||||
{explorerEntries.length === 0 && (
|
||||
<div className="file-list-empty">This folder is empty. Use Upload or Create Folder to add content.</div>
|
||||
)}
|
||||
{explorerEntries.map((entry) => {
|
||||
const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
|
||||
const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
|
||||
return entry.kind === "folder" ? (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
|
||||
role="row"
|
||||
tabIndex={0}
|
||||
draggable
|
||||
onDragStart={(event) => handleInternalDragStart(entry, event)}
|
||||
onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
|
||||
onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
|
||||
onDragLeave={clearDropState}
|
||||
onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
|
||||
onMouseDown={preventTextSelectionOnShift}
|
||||
onClick={(event) => handleEntrySelection(entry, event)}
|
||||
onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
|
||||
onContextMenu={(event) => openContextMenu(event, "folder", entry)}
|
||||
onKeyDown={(event) => handleEntryKeyDown(entry, event)}
|
||||
>
|
||||
<div className="file-list-name-cell">
|
||||
<div className="file-list-name">
|
||||
<Folder className="file-row-icon" size={20} aria-hidden="true" />
|
||||
<span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
|
||||
</div>
|
||||
</div>
|
||||
<span>{formatBytes(entry.totalSize)}</span>
|
||||
<span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
|
||||
role="row"
|
||||
tabIndex={0}
|
||||
draggable
|
||||
onDragStart={(event) => handleInternalDragStart(entry, event)}
|
||||
onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
|
||||
onMouseDown={preventTextSelectionOnShift}
|
||||
onClick={(event) => handleEntrySelection(entry, event)}
|
||||
onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
|
||||
onContextMenu={(event) => openContextMenu(event, "file", entry)}
|
||||
onKeyDown={(event) => handleEntryKeyDown(entry, event)}
|
||||
>
|
||||
<div className="file-list-name-cell">
|
||||
<div className="file-list-name">
|
||||
<File className="file-row-icon" size={20} aria-hidden="true" />
|
||||
<span>
|
||||
<strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
|
||||
<small
|
||||
className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
|
||||
title={campaignShareTitle(entry.file)}
|
||||
>
|
||||
{activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
|
||||
{campaignShareLabel(entry.file)}
|
||||
</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>{formatBytes(entry.file.size_bytes)}</span>
|
||||
<span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{virtualExplorerRows.topSpacerHeight > 0 && (
|
||||
<div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.topSpacerHeight }} aria-hidden="true" />
|
||||
)}
|
||||
{virtualExplorerRows.entries.map((entry, index) => renderExplorerEntry(entry, virtualExplorerRows.startIndex + index + 2))}
|
||||
{virtualExplorerRows.bottomSpacerHeight > 0 && (
|
||||
<div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.bottomSpacerHeight }} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user