You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import classNames from 'classnames';
|
|
import { useCallback } from 'react';
|
|
|
|
import formatFileSize from 'filesize';
|
|
import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
|
|
import { saveAttachmentToDisk } from '../../../util/attachmentsUtil';
|
|
import { MediaItemType } from '../../lightbox/LightboxGallery';
|
|
import { formatWithLocale } from '../../../util/i18n/formater/generics';
|
|
|
|
type Props = {
|
|
// Required
|
|
timestamp: number;
|
|
|
|
// Optional
|
|
fileName?: string;
|
|
fileSize?: number | null;
|
|
shouldShowSeparator?: boolean;
|
|
mediaItem: MediaItemType;
|
|
};
|
|
|
|
export const DocumentListItem = (props: Props) => {
|
|
const { shouldShowSeparator, fileName, fileSize, timestamp } = props;
|
|
|
|
const defaultShowSeparator = shouldShowSeparator === undefined ? true : shouldShowSeparator;
|
|
const selectedConversationKey = useSelectedConversationKey();
|
|
|
|
if (!selectedConversationKey) {
|
|
throw new Error('DocumentListItem: selectedConversationKey was not set');
|
|
}
|
|
|
|
const saveAttachmentCallback = useCallback(() => {
|
|
void saveAttachmentToDisk({
|
|
messageSender: props.mediaItem.messageSender,
|
|
messageTimestamp: props.mediaItem.messageTimestamp,
|
|
attachment: props.mediaItem.attachment,
|
|
conversationId: selectedConversationKey,
|
|
index: 0,
|
|
});
|
|
}, [
|
|
selectedConversationKey,
|
|
props.mediaItem.messageSender,
|
|
props.mediaItem.messageTimestamp,
|
|
props.mediaItem.attachment,
|
|
]);
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'module-document-list-item',
|
|
defaultShowSeparator ? 'module-document-list-item--with-separator' : null
|
|
)}
|
|
>
|
|
<div
|
|
className="module-document-list-item__content"
|
|
role="button"
|
|
onClick={saveAttachmentCallback}
|
|
>
|
|
<div className="module-document-list-item__icon" />
|
|
<div className="module-document-list-item__metadata">
|
|
<span className="module-document-list-item__file-name">{fileName}</span>
|
|
<span className="module-document-list-item__file-size">
|
|
{typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
|
|
</span>
|
|
</div>
|
|
<div className="module-document-list-item__date">
|
|
{formatWithLocale({ date: new Date(timestamp), formatStr: 'ddd, MMM D, Y' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|