feat: add keyboard navigation for document views, externalize document preview handling, and include physics model documentation.
This commit is contained in:
@@ -22,7 +22,6 @@ import DocumentsPanelHeader, {
|
||||
DocumentsHeaderBreadcrumb,
|
||||
} from './DocumentsPanelHeader';
|
||||
import { SelectionFloatingPanel } from '../SelectionFloatingActions';
|
||||
import { createDocumentEntryKey } from '../../app/entryKey';
|
||||
import { createDocumentsTableHeaderActions } from './DocumentsToolbar';
|
||||
import { useDocumentsFilter } from '../context/DocumentsFilterContext';
|
||||
import { DEFAULT_GRID_ICON_SIZE } from '../../constants/documents';
|
||||
@@ -77,10 +76,7 @@ export interface DocumentsViewProps {
|
||||
// Desk specific (optional for now or handled via intersection)
|
||||
tenantId?: Identifier | null;
|
||||
viewId?: string | null;
|
||||
documentLinks?: Map<Identifier, any> | null;
|
||||
ensureDownloadUrl?: (docId: Identifier, options?: { force?: boolean }) => Promise<any>;
|
||||
onDocumentStackSelect?: (docIds: Identifier[], event?: any) => void;
|
||||
onPromoteSelection?: (docId: Identifier | null) => void;
|
||||
activeTagFilters?: Array<Identifier | null>;
|
||||
}
|
||||
|
||||
@@ -113,7 +109,6 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
isSearchLoading = false,
|
||||
viewMode = 'list',
|
||||
onViewModeChange,
|
||||
documentLinks,
|
||||
ensureDownloadUrl,
|
||||
onRefresh = () => { },
|
||||
sortField,
|
||||
@@ -135,18 +130,12 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
activeTagFilters = [],
|
||||
activeCorrespondentFilters = [],
|
||||
selectedFolder = null,
|
||||
promoteSelectionOrder,
|
||||
onDocumentTagDrop,
|
||||
currentTenantId,
|
||||
}): ReactNode => {
|
||||
const {
|
||||
selectedEntries,
|
||||
focusedEntryKey,
|
||||
setFocusedEntryKey,
|
||||
handleEntrySelection,
|
||||
clearSelection,
|
||||
selectionAnchorRef,
|
||||
applySelection,
|
||||
} = useWorkspaceSelectionContext();
|
||||
const {
|
||||
isActive: isFilterActive,
|
||||
@@ -167,43 +156,10 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
|
||||
const showingSearchResults = Array.isArray(searchResultIds);
|
||||
const rows = showingSearchResults && searchDocuments ? searchDocuments : documents;
|
||||
const documentLinkMap = documentLinks instanceof Map ? documentLinks : null;
|
||||
|
||||
const searchResultCount = Array.isArray(searchResultIds) ? searchResultIds.length : 0;
|
||||
|
||||
const handleDeskDocumentStackSelect = useCallback(
|
||||
(docIds: Array<Identifier | string>) => {
|
||||
if (!Array.isArray(docIds) || docIds.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entryKeys = docIds
|
||||
.map((id) => createDocumentEntryKey(id as Identifier))
|
||||
.filter((value): value is string => typeof value === 'string');
|
||||
|
||||
if (!entryKeys.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextKeys = [...selectedEntries];
|
||||
entryKeys.forEach((key) => {
|
||||
if (!nextKeys.includes(key)) {
|
||||
nextKeys.push(key);
|
||||
}
|
||||
});
|
||||
|
||||
const anchor = (entryKeys[0]
|
||||
|| selectionAnchorRef.current
|
||||
|| nextKeys[nextKeys.length - 1]) as string | null;
|
||||
|
||||
applySelection(nextKeys, {
|
||||
anchor,
|
||||
interactedKeys: entryKeys,
|
||||
});
|
||||
},
|
||||
[applySelection, selectedEntries, selectionAnchorRef],
|
||||
);
|
||||
|
||||
const deskViewId = useMemo(() => {
|
||||
const viewId = useMemo(() => {
|
||||
if (showingSearchResults) {
|
||||
const trimmedQuery = searchQuery.trim();
|
||||
const tagsKey = [...activeTagFilters].sort().join(',');
|
||||
@@ -361,89 +317,59 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
const isDeskView = viewMode === 'desk';
|
||||
const gridIconSize = DEFAULT_GRID_ICON_SIZE;
|
||||
|
||||
type ZoomSource = { url: string; alt?: string | null; mimeType?: string | null };
|
||||
|
||||
const [previewDocId, setPreviewDocId] = useState<Identifier | null>(null);
|
||||
|
||||
const previewDoc = useMemo(() => {
|
||||
if (!previewDocId) {
|
||||
return null;
|
||||
}
|
||||
return rows.find((doc) => doc?.id === previewDocId) || null;
|
||||
}, [previewDocId, rows]);
|
||||
const [previewDoc, setPreviewDoc] = useState<Document | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (previewDocId && !previewDoc) {
|
||||
setPreviewDocId(null);
|
||||
if (previewDoc && !rows.find(d => d.id === previewDoc.id)) {
|
||||
setPreviewDoc(null);
|
||||
}
|
||||
}, [previewDocId, previewDoc]);
|
||||
}, [previewDoc, rows]);
|
||||
|
||||
const [previewZoomSource, setPreviewZoomSource] = useState<ZoomSource | null>(null);
|
||||
const zoomDisplay = previewZoomSource;
|
||||
const overlayDocument = useMemo(() => (
|
||||
previewDoc && zoomDisplay?.url
|
||||
? { ...previewDoc, documentLink: zoomDisplay }
|
||||
: previewDoc
|
||||
), [previewDoc, zoomDisplay]);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
if (!previewDocId || !previewDoc) {
|
||||
setPreviewZoomSource(null);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
const overlayDocument = useMemo(() => {
|
||||
if (!previewDoc || !previewUrl) {
|
||||
return previewDoc;
|
||||
}
|
||||
const documentMimeType = previewDoc.mime_type;
|
||||
|
||||
const applyEntry = (entry?: DocumentLinkLike | null) => {
|
||||
if (!entry?.url) {
|
||||
setPreviewZoomSource(null);
|
||||
return;
|
||||
}
|
||||
setPreviewZoomSource({
|
||||
url: entry.url,
|
||||
return {
|
||||
...previewDoc,
|
||||
documentLink: {
|
||||
url: previewUrl,
|
||||
alt: previewDoc.title,
|
||||
mimeType: documentMimeType,
|
||||
});
|
||||
mimeType: previewDoc.mime_type,
|
||||
},
|
||||
};
|
||||
}, [previewDoc, previewUrl]);
|
||||
|
||||
const cachedEntry = documentLinkMap?.get(previewDocId) || null;
|
||||
if (cachedEntry?.url) {
|
||||
applyEntry(cachedEntry);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!previewDoc) {
|
||||
setPreviewUrl(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!ensureDownloadUrl) {
|
||||
setPreviewZoomSource(null);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
let cancelled = false;
|
||||
if (ensureDownloadUrl) {
|
||||
ensureDownloadUrl(previewDoc.id)
|
||||
.then((entry) => {
|
||||
if (!cancelled && entry?.url) {
|
||||
setPreviewUrl(entry.url);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setPreviewUrl(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ensureDownloadUrl(previewDocId)
|
||||
.then((entry) => {
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
applyEntry(entry);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setPreviewZoomSource(null);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [previewDocId, previewDoc, documentLinkMap, ensureDownloadUrl]);
|
||||
}, [previewDoc, ensureDownloadUrl]);
|
||||
|
||||
const closePreviewOverlay = useCallback(() => {
|
||||
setPreviewDocId(null);
|
||||
setPreviewZoomSource(null);
|
||||
setPreviewDoc(null);
|
||||
setPreviewUrl(null);
|
||||
}, []);
|
||||
|
||||
const handleDocumentPreviewZoom = useCallback(
|
||||
@@ -451,251 +377,15 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
if (!doc || !doc.id) {
|
||||
return;
|
||||
}
|
||||
if (!ensureDownloadUrl && !(documentLinkMap?.get(doc.id)?.url)) {
|
||||
if (!ensureDownloadUrl) {
|
||||
return;
|
||||
}
|
||||
setPreviewDocId(doc.id);
|
||||
setPreviewDoc(doc);
|
||||
},
|
||||
[ensureDownloadUrl, documentLinkMap],
|
||||
[ensureDownloadUrl],
|
||||
);
|
||||
|
||||
const handleDocumentActivate = useCallback(
|
||||
(doc, event?: React.MouseEvent | KeyboardEvent | null) => {
|
||||
if (!doc) {
|
||||
return;
|
||||
}
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
if (event?.altKey) {
|
||||
handleDocumentPreviewZoom(doc);
|
||||
return;
|
||||
}
|
||||
onDocumentActivate?.(doc.id);
|
||||
},
|
||||
[handleDocumentPreviewZoom, onDocumentActivate],
|
||||
);
|
||||
|
||||
const navigableRows = useMemo(
|
||||
() => entries.map((entry) => ({ key: entry.key, type: entry.type, id: entry.id })),
|
||||
[entries],
|
||||
);
|
||||
const navigableEntryKeys = useMemo(() => navigableRows.map((row) => row.key), [navigableRows]);
|
||||
|
||||
const getEntryByKey = useCallback(
|
||||
(entryKey) => entries.find((entry) => entry.key === entryKey) || null,
|
||||
[entries],
|
||||
);
|
||||
|
||||
const handlePanelFocus = useCallback(() => {
|
||||
let resolvedKey = null;
|
||||
|
||||
if (focusedEntryKey && navigableEntryKeys.includes(focusedEntryKey)) {
|
||||
resolvedKey = focusedEntryKey;
|
||||
}
|
||||
|
||||
if (!resolvedKey) {
|
||||
for (let index = selectedEntries.length - 1; index >= 0; index -= 1) {
|
||||
const candidate = selectedEntries[index];
|
||||
if (navigableEntryKeys.includes(candidate)) {
|
||||
resolvedKey = candidate;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!resolvedKey) {
|
||||
if (!selectedEntries.length) {
|
||||
return;
|
||||
}
|
||||
if (navigableRows.length) {
|
||||
resolvedKey = navigableRows[0].key;
|
||||
}
|
||||
}
|
||||
|
||||
if (!resolvedKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
setFocusedEntryKey(resolvedKey);
|
||||
}, [
|
||||
focusedEntryKey,
|
||||
navigableEntryKeys,
|
||||
navigableRows,
|
||||
setFocusedEntryKey,
|
||||
selectedEntries,
|
||||
]);
|
||||
|
||||
const handlePanelKeyDown = useCallback(
|
||||
(event) => {
|
||||
const { key, shiftKey } = event;
|
||||
const triggers = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' ', 'Space', 'Spacebar'];
|
||||
if (!triggers.includes(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!navigableRows.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
let activeKey =
|
||||
focusedEntryKey && navigableEntryKeys.includes(focusedEntryKey)
|
||||
? focusedEntryKey
|
||||
: null;
|
||||
|
||||
if (!activeKey) {
|
||||
if (selectedEntries.length) {
|
||||
for (let index = selectedEntries.length - 1; index >= 0; index -= 1) {
|
||||
const candidate = selectedEntries[index];
|
||||
if (navigableEntryKeys.includes(candidate)) {
|
||||
activeKey = candidate;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!activeKey) {
|
||||
activeKey = key === 'ArrowUp' ? navigableEntryKeys[navigableEntryKeys.length - 1] : navigableEntryKeys[0];
|
||||
}
|
||||
}
|
||||
|
||||
const currentIndex = navigableEntryKeys.indexOf(activeKey);
|
||||
const activeRow = currentIndex === -1 ? null : navigableRows[currentIndex];
|
||||
|
||||
if (key === 'Enter' || key === ' ' || key === 'Space' || key === 'Spacebar') {
|
||||
if (activeRow) {
|
||||
handleEntrySelection(activeRow.key, event);
|
||||
if (activeRow.type === EntryType.folder) {
|
||||
onFolderSelect?.(activeRow.id);
|
||||
} else {
|
||||
const entry = getEntryByKey(activeRow.key);
|
||||
if (entry?.document) {
|
||||
handleDocumentPreviewZoom(entry.document);
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let nextIndex = currentIndex;
|
||||
if (key === 'ArrowDown') {
|
||||
nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, navigableRows.length - 1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
nextIndex = currentIndex === -1 ? navigableRows.length - 1 : Math.max(currentIndex - 1, 0);
|
||||
} else if (key === 'Home') {
|
||||
nextIndex = 0;
|
||||
} else if (key === 'End') {
|
||||
nextIndex = navigableRows.length - 1;
|
||||
}
|
||||
|
||||
if (nextIndex === -1 || nextIndex >= navigableRows.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetRow = navigableRows[nextIndex];
|
||||
if (!targetRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
setFocusedEntryKey(targetRow.key);
|
||||
handleEntrySelection(targetRow.key, {
|
||||
shiftKey,
|
||||
preventDefault: () => { },
|
||||
});
|
||||
},
|
||||
[
|
||||
focusedEntryKey,
|
||||
getEntryByKey,
|
||||
navigableEntryKeys,
|
||||
navigableRows,
|
||||
onFolderSelect,
|
||||
selectedEntries,
|
||||
handleDocumentPreviewZoom,
|
||||
handleEntrySelection,
|
||||
setFocusedEntryKey,
|
||||
],
|
||||
);
|
||||
|
||||
const scrollToTop = useCallback(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = 0;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const searchKey = useMemo(
|
||||
() => (Array.isArray(searchResultIds) ? searchResultIds.join(':') : 'none'),
|
||||
[searchResultIds],
|
||||
);
|
||||
|
||||
const breadcrumbKey = useMemo(
|
||||
() => (Array.isArray(breadcrumbs) ? breadcrumbs.map((crumb) => crumb?.id ?? '').join(':') : 'none'),
|
||||
[breadcrumbs],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToTop();
|
||||
}, [
|
||||
scrollToTop,
|
||||
viewMode,
|
||||
showingSearchResults,
|
||||
searchKey,
|
||||
breadcrumbKey,
|
||||
]);
|
||||
|
||||
const isTagDragEvent = useCallback((event) => isTagTransferEvent(event), []);
|
||||
const ensureFocusedRowVisible = useCallback(() => {
|
||||
if (!focusedEntryKey) return;
|
||||
const container = scrollRef.current;
|
||||
if (!container) return;
|
||||
let selector = null;
|
||||
if (focusedEntryKey.startsWith('document:')) {
|
||||
selector = `#document-${focusedEntryKey.slice('document:'.length)}`;
|
||||
} else if (focusedEntryKey.startsWith('folder:')) {
|
||||
selector = `#folder-${focusedEntryKey.slice('folder:'.length)}`;
|
||||
}
|
||||
if (!selector) {
|
||||
return;
|
||||
}
|
||||
const row = container.querySelector(selector);
|
||||
if (!row || !container.contains(row)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const header = container.querySelector('thead');
|
||||
const headerHeight = header ? header.getBoundingClientRect().height : 0;
|
||||
const rowTop = row.offsetTop;
|
||||
const rowBottom = rowTop + row.offsetHeight;
|
||||
const visibleTop = container.scrollTop + headerHeight;
|
||||
const visibleBottom = container.scrollTop + container.clientHeight;
|
||||
|
||||
if (rowTop < visibleTop) {
|
||||
container.scrollTop = Math.max(rowTop - headerHeight, 0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (rowBottom > visibleBottom) {
|
||||
const nextScrollTop = rowBottom - container.clientHeight;
|
||||
container.scrollTop = Math.max(nextScrollTop, 0);
|
||||
}
|
||||
}, [focusedEntryKey]);
|
||||
|
||||
useEffect(() => {
|
||||
ensureFocusedRowVisible();
|
||||
}, [ensureFocusedRowVisible]);
|
||||
|
||||
const activeDescendantId = useMemo(() => {
|
||||
if (!focusedEntryKey) return undefined;
|
||||
if (focusedEntryKey.startsWith('document:')) {
|
||||
return `document-${focusedEntryKey.slice('document:'.length)}`;
|
||||
}
|
||||
if (focusedEntryKey.startsWith('folder:')) {
|
||||
return `folder-${focusedEntryKey.slice('folder:'.length)}`;
|
||||
}
|
||||
return undefined;
|
||||
}, [focusedEntryKey]);
|
||||
|
||||
const handleDocumentTagDragOver = useCallback(
|
||||
(event) => {
|
||||
@@ -736,6 +426,24 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
[onEntryPointer],
|
||||
);
|
||||
|
||||
const handleDocumentActivate = useCallback(
|
||||
(doc, event?: React.MouseEvent | KeyboardEvent | null) => {
|
||||
if (!doc) {
|
||||
return;
|
||||
}
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
if (event?.altKey) {
|
||||
handleDocumentPreviewZoom(doc);
|
||||
return;
|
||||
}
|
||||
onDocumentActivate?.(doc.id);
|
||||
},
|
||||
[handleDocumentPreviewZoom, onDocumentActivate],
|
||||
);
|
||||
|
||||
const handleFolderClick = useCallback(
|
||||
(folder, event) => {
|
||||
if (!folder) {
|
||||
@@ -812,9 +520,8 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
activeCorrespondentIdSet: activeCorrespondentIdSet,
|
||||
onCorrespondentClick: toggleCorrespondentFilter,
|
||||
tenantId: currentTenantId,
|
||||
viewId: deskViewId,
|
||||
onDocumentStackSelect: handleDeskDocumentStackSelect,
|
||||
onPromoteSelection: promoteSelectionOrder,
|
||||
viewId,
|
||||
onPreview: handleDocumentPreviewZoom,
|
||||
};
|
||||
|
||||
const renderBody = () => {
|
||||
@@ -839,7 +546,7 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
|
||||
switch (viewMode) {
|
||||
case 'desk':
|
||||
return <DesktopWorkspace {...viewProps} tenantId={currentTenantId} viewId={deskViewId} />;
|
||||
return <DesktopWorkspace {...viewProps} />;
|
||||
case 'grid':
|
||||
return <DocumentsGrid {...viewProps} gridIconSize={gridIconSize} />;
|
||||
case 'list':
|
||||
@@ -851,20 +558,6 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
const panelVariant = isDeskView ? 'desk' : isGridView ? 'grid' : 'list';
|
||||
const shouldHandlePanelInteractions = !isDeskView && entries.length > 0;
|
||||
|
||||
const handleSectionFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
|
||||
if (!shouldHandlePanelInteractions || event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
handlePanelFocus();
|
||||
}, [shouldHandlePanelInteractions, handlePanelFocus]);
|
||||
|
||||
const handleSectionKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>) => {
|
||||
if (!shouldHandlePanelInteractions || event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
handlePanelKeyDown(event);
|
||||
}, [shouldHandlePanelInteractions, handlePanelKeyDown]);
|
||||
|
||||
const handleSectionClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
|
||||
if (!shouldHandlePanelInteractions || event.target !== event.currentTarget) {
|
||||
return;
|
||||
@@ -881,16 +574,12 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
|
||||
<section
|
||||
ref={scrollRef}
|
||||
className={`documents-panel documents-panel--view-${panelVariant}`}
|
||||
tabIndex={shouldHandlePanelInteractions ? 0 : undefined}
|
||||
onFocus={handleSectionFocus}
|
||||
onKeyDown={handleSectionKeyDown}
|
||||
onClick={handleSectionClick}
|
||||
aria-activedescendant={shouldHandlePanelInteractions && !isGridView ? activeDescendantId : undefined}
|
||||
>
|
||||
{renderBody()}
|
||||
</section>
|
||||
<PreviewZoomOverlay
|
||||
open={Boolean(zoomDisplay?.url)}
|
||||
open={Boolean(previewUrl)}
|
||||
onClose={closePreviewOverlay}
|
||||
document={overlayDocument}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user