This commit is contained in:
2025-11-01 13:51:43 +01:00
parent 816c880e8e
commit 9aed7ec524
+48 -43
View File
@@ -203,6 +203,7 @@ const DocumentsTable = ({
subfolders, subfolders,
documents, documents,
searchResults, searchResults,
isFilterActive = false,
onFolderSelect, onFolderSelect,
onFolderDrop, onFolderDrop,
onFolderDragOver, onFolderDragOver,
@@ -473,11 +474,10 @@ const DocumentsTable = ({
[activeCorrespondentIdSet, onCorrespondentClick], [activeCorrespondentIdSet, onCorrespondentClick],
); );
const showDefaultEmptyState = !showingSearchResults && !subfolders.length && rows.length === 0; const noResults = rows.length === 0;
const showListSearchEmptyState = const showDefaultEmptyState = !showingSearchResults && !isFilterActive && !subfolders.length && noResults;
showingSearchResults && rows.length === 0 && !isGridView && !isSearchLoading; const showListSearchEmptyState = showingSearchResults && noResults && !isGridView && !isSearchLoading;
const showGridSearchEmptyState = const showGridSearchEmptyState = isGridView && showingSearchResults && noResults && !isSearchLoading;
isGridView && showingSearchResults && rows.length === 0 && !isSearchLoading;
const showSearchHint = showingSearchResults && rows.length > 0; const showSearchHint = showingSearchResults && rows.length > 0;
const breadcrumbEntries = useMemo(() => (Array.isArray(breadcrumbs) ? breadcrumbs.filter(Boolean) : []), [breadcrumbs]); const breadcrumbEntries = useMemo(() => (Array.isArray(breadcrumbs) ? breadcrumbs.filter(Boolean) : []), [breadcrumbs]);
const trailEntries = useMemo(() => { const trailEntries = useMemo(() => {
@@ -548,41 +548,48 @@ const DocumentsTable = ({
</div> </div>
</div> </div>
) : null} ) : null}
{showDefaultEmptyState && ( {showDefaultEmptyState ? (
<div className="empty-state"> <div className="panel-section__body">
Drop files anywhere or onto a folder to upload documents. <div className="empty-state">
Drop files anywhere or onto a folder to upload documents.
</div>
</div> </div>
)} ) : showGridSearchEmptyState ? (
{showGridSearchEmptyState && ( <div className="panel-section__body">
<div className="empty-state empty-state--global"> <div className="empty-state empty-state--global">
No documents match the current filters. No documents match the current filters.
</div>
</div> </div>
)} ) : showListSearchEmptyState ? (
<div className="panel-section__body"> <div className="panel-section__body">
<div <div className="empty-state">No documents match the current filters.</div>
ref={assignScrollRef} </div>
className="documents-scroll" ) : (
onFocus={(event) => { <div className="panel-section__body">
if (event.target === scrollRef.current) { <div
onDocumentListFocus?.(); ref={assignScrollRef}
} className="documents-scroll"
}} onFocus={(event) => {
onKeyDown={(event) => { if (event.target === scrollRef.current) {
if (event.target !== scrollRef.current) { onDocumentListFocus?.();
return; }
} }}
if (onDocumentListKeyDown) { onKeyDown={(event) => {
onDocumentListKeyDown(event); if (event.target !== scrollRef.current) {
} return;
}} }
onClick={(event) => { if (onDocumentListKeyDown) {
if (event.target === event.currentTarget) { onDocumentListKeyDown(event);
onClearSelection?.(); }
} }}
}} onClick={(event) => {
aria-activedescendant={isGridView ? undefined : activeDescendantId} if (event.target === event.currentTarget) {
> onClearSelection?.();
{showDefaultEmptyState ? null : isGridView ? ( }
}}
aria-activedescendant={isGridView ? undefined : activeDescendantId}
>
{isGridView ? (
<div <div
className="documents-grid" className="documents-grid"
role="list" role="list"
@@ -766,7 +773,7 @@ const DocumentsTable = ({
); );
})} })}
</div> </div>
) : ( ) : noResults ? null : (
<table aria-multiselectable="true"> <table aria-multiselectable="true">
<thead> <thead>
<tr> <tr>
@@ -1060,15 +1067,13 @@ const DocumentsTable = ({
</table> </table>
)} )}
</div> </div>
{showListSearchEmptyState && (
<div className="empty-state">No documents match the current filters.</div>
)}
{showSearchHint && ( {showSearchHint && (
<div className="search-hint"> <div className="search-hint">
Showing {rows.length} document{rows.length === 1 ? '' : 's'} in {currentFolderName} and subfolders. Showing {rows.length} document{rows.length === 1 ? '' : 's'} in {currentFolderName} and subfolders.
</div> </div>
)} )}
</div> </div>
)}
</section> </section>
); );
}; };