133 lines
3.6 KiB
TypeScript
133 lines
3.6 KiB
TypeScript
import { BulkActionBar } from '../BulkActionBar'
|
|
import { FilterPills } from './FilterPills'
|
|
import { NoteListHeader } from './NoteListHeader'
|
|
import { EntityView, ListView } from './NoteListViews'
|
|
import type { useNoteListModel } from './useNoteListModel'
|
|
|
|
type NoteListLayoutProps = ReturnType<typeof useNoteListModel>
|
|
|
|
export function NoteListLayout({
|
|
title,
|
|
typeDocument,
|
|
isEntityView,
|
|
listSort,
|
|
listDirection,
|
|
customProperties,
|
|
sidebarCollapsed,
|
|
searchVisible,
|
|
search,
|
|
propertyPicker,
|
|
handleSortChange,
|
|
handleCreateNote,
|
|
onOpenType,
|
|
toggleSearch,
|
|
setSearch,
|
|
handleListKeyDown,
|
|
noteListKeyboard,
|
|
entitySelection,
|
|
searchedGroups,
|
|
collapsedGroups,
|
|
sortPrefs,
|
|
toggleGroup,
|
|
renderItem,
|
|
typeEntryMap,
|
|
handleClickNote,
|
|
isArchivedView,
|
|
isChangesView,
|
|
isInboxView,
|
|
modifiedFilesError,
|
|
searched,
|
|
query,
|
|
showFilterPills,
|
|
noteListFilter,
|
|
filterCounts,
|
|
onNoteListFilterChange,
|
|
multiSelect,
|
|
handleBulkArchive,
|
|
handleBulkDeletePermanently,
|
|
handleBulkUnarchive,
|
|
contextMenuNode,
|
|
dialogNode,
|
|
}: NoteListLayoutProps) {
|
|
return (
|
|
<div
|
|
className="flex flex-col select-none overflow-hidden border-r border-border bg-card text-foreground"
|
|
style={{ height: '100%' }}
|
|
>
|
|
<NoteListHeader
|
|
title={title}
|
|
typeDocument={typeDocument}
|
|
isEntityView={isEntityView}
|
|
listSort={listSort}
|
|
listDirection={listDirection}
|
|
customProperties={customProperties}
|
|
sidebarCollapsed={sidebarCollapsed}
|
|
searchVisible={searchVisible}
|
|
search={search}
|
|
propertyPicker={propertyPicker}
|
|
onSortChange={handleSortChange}
|
|
onCreateNote={handleCreateNote}
|
|
onOpenType={onOpenType}
|
|
onToggleSearch={toggleSearch}
|
|
onSearchChange={setSearch}
|
|
/>
|
|
<div
|
|
className="relative flex flex-1 flex-col overflow-hidden outline-none"
|
|
style={{ minHeight: 0 }}
|
|
tabIndex={0}
|
|
onKeyDown={handleListKeyDown}
|
|
onFocus={noteListKeyboard.handleFocus}
|
|
data-testid="note-list-container"
|
|
>
|
|
<div className="flex-1 overflow-hidden" style={{ minHeight: 0 }}>
|
|
{entitySelection ? (
|
|
<EntityView
|
|
entity={entitySelection.entry}
|
|
groups={searchedGroups}
|
|
query={query}
|
|
collapsedGroups={collapsedGroups}
|
|
sortPrefs={sortPrefs}
|
|
onToggleGroup={toggleGroup}
|
|
onSortChange={handleSortChange}
|
|
renderItem={renderItem}
|
|
typeEntryMap={typeEntryMap}
|
|
onClickNote={handleClickNote}
|
|
/>
|
|
) : (
|
|
<ListView
|
|
isArchivedView={isArchivedView}
|
|
isChangesView={isChangesView}
|
|
isInboxView={isInboxView}
|
|
changesError={modifiedFilesError}
|
|
searched={searched}
|
|
query={query}
|
|
renderItem={renderItem}
|
|
virtuosoRef={noteListKeyboard.virtuosoRef}
|
|
/>
|
|
)}
|
|
</div>
|
|
{showFilterPills && (
|
|
<FilterPills
|
|
active={noteListFilter}
|
|
counts={filterCounts}
|
|
onChange={onNoteListFilterChange}
|
|
position="bottom"
|
|
/>
|
|
)}
|
|
</div>
|
|
{multiSelect.isMultiSelecting && (
|
|
<BulkActionBar
|
|
count={multiSelect.selectedPaths.size}
|
|
isArchivedView={isArchivedView}
|
|
onArchive={handleBulkArchive}
|
|
onDelete={handleBulkDeletePermanently}
|
|
onUnarchive={handleBulkUnarchive}
|
|
onClear={multiSelect.clear}
|
|
/>
|
|
)}
|
|
{contextMenuNode}
|
|
{dialogNode}
|
|
</div>
|
|
)
|
|
}
|