132 lines
5.8 KiB
TypeScript
132 lines
5.8 KiB
TypeScript
import React from 'react';
|
|
import { FolderIcon } from '../../components/icons';
|
|
import DocumentThumbnailImage from '../DocumentThumbnailImage';
|
|
import { resolveCorrespondents } from '../correspondents';
|
|
import type { DocumentsListEntry } from '../../types/documents';
|
|
import type { DocumentsViewProps } from '../panel/DocumentsPanel';
|
|
import type { DocumentViewLogic } from '../logic/useDocumentViewLogic';
|
|
import EditableEntryTitle from './EditableEntryTitle';
|
|
import EntryCorrespondents from './EntryCorrespondents';
|
|
import EntryTags from './EntryTags';
|
|
import FolderEntry from './FolderEntry';
|
|
import DocumentEntry from './DocumentEntry';
|
|
|
|
interface DocumentsGridCardProps extends DocumentsViewProps {
|
|
entry: DocumentsListEntry;
|
|
viewLogic: DocumentViewLogic;
|
|
iconSize?: number;
|
|
}
|
|
|
|
const DocumentsGridCard: React.FC<DocumentsGridCardProps> = (props) => {
|
|
const { entry, iconSize } = props;
|
|
|
|
if (entry.type === 'folder') {
|
|
const folder = entry.folder;
|
|
if (!folder) return null;
|
|
|
|
return (
|
|
<FolderEntry
|
|
{...props}
|
|
folder={folder}
|
|
component="div"
|
|
className="document-card folder-card"
|
|
role="listitem"
|
|
>
|
|
{(logic) => (
|
|
<>
|
|
<div className="folder-card__icon">
|
|
<FolderIcon className="folder-card__icon-svg" size={iconSize} />
|
|
</div>
|
|
<div className="folder-card__meta">
|
|
<div className="folder-card__label-row">
|
|
<EditableEntryTitle
|
|
isEditing={logic.isFolderEditing}
|
|
draftValue={logic.folderDraftValue}
|
|
onChange={logic.handlers.onRenameChange}
|
|
onSubmit={logic.handlers.onRenameSubmit}
|
|
onCancel={logic.handlers.onRenameCancel}
|
|
isSaving={logic.isFolderSaving}
|
|
canSubmit={logic.canSubmitFolder}
|
|
inputRef={logic.attachFolderInputRef}
|
|
allowInlineEdit={logic.allowInlineFolderEdit}
|
|
onBeginEditing={logic.handlers.onRenameBegin}
|
|
className="folder-card__name"
|
|
>
|
|
{folder.name}
|
|
</EditableEntryTitle>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</FolderEntry>
|
|
);
|
|
}
|
|
|
|
const doc = entry.document;
|
|
if (!doc) return null;
|
|
|
|
const correspondents = resolveCorrespondents(doc);
|
|
|
|
return (
|
|
<DocumentEntry
|
|
{...props}
|
|
doc={doc}
|
|
component="div"
|
|
className="document-card document"
|
|
role="listitem"
|
|
>
|
|
{(logic) => (
|
|
<>
|
|
<DocumentThumbnailImage
|
|
document={doc}
|
|
ensureAssetUrl={props.ensureAssetUrl}
|
|
getDocumentAsset={props.getDocumentAsset}
|
|
alt={`Thumbnail for ${doc.title}`}
|
|
maxSize={iconSize}
|
|
scrollRootRef={props.scrollRef}
|
|
/>
|
|
<div className="document-card__meta">
|
|
<div className="document-card__title" title={doc.title}>
|
|
<EntryCorrespondents
|
|
correspondents={correspondents}
|
|
activeCorrespondentIdSet={props.activeCorrespondentIdSet}
|
|
onCorrespondentClick={props.onCorrespondentClick}
|
|
/>
|
|
<div className="document-card__title-row">
|
|
<EditableEntryTitle
|
|
isEditing={logic.isEditingDoc}
|
|
draftValue={logic.documentDraftValue}
|
|
onChange={logic.handlers.onRenameChange}
|
|
onSubmit={logic.handlers.onRenameSubmit}
|
|
onCancel={logic.handlers.onRenameCancel}
|
|
isSaving={logic.isDocumentSaving}
|
|
canSubmit={logic.canSubmitDocument}
|
|
inputRef={logic.attachDocumentInputRef}
|
|
allowInlineEdit={logic.allowInlineDocumentEdit}
|
|
onBeginEditing={logic.handlers.onRenameBegin}
|
|
className="document-card__title-badge"
|
|
>
|
|
{doc.title}
|
|
</EditableEntryTitle>
|
|
</div>
|
|
</div>
|
|
<div className="document-card__tags">
|
|
<EntryTags
|
|
tags={doc.tags || []}
|
|
tagLookupById={props.tagLookupById}
|
|
onTagClick={props.onTagClick}
|
|
docId={doc.id}
|
|
onDocumentTagDetach={props.onDocumentTagDetach}
|
|
onTagDragStart={logic.handlers.onTagDragStart}
|
|
onTagDragEnd={logic.handlers.onTagDragEnd}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</DocumentEntry>
|
|
);
|
|
};
|
|
|
|
export default DocumentsGridCard;
|