Timeline date headers

This commit is contained in:
Evan Hahn 2022-01-26 17:05:26 -06:00 committed by GitHub
parent 0fa069f260
commit f9440bf594
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 1183 additions and 771 deletions

View file

@ -1,4 +1,4 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode, FunctionComponent } from 'react';
@ -9,12 +9,12 @@ import { v4 as uuid } from 'uuid';
import { Avatar, AvatarSize } from '../Avatar';
import type { BadgeType } from '../../badges/types';
import { Timestamp } from '../conversation/Timestamp';
import { isConversationUnread } from '../../util/isConversationUnread';
import { cleanId } from '../_util';
import type { LocalizerType, ThemeType } from '../../types/Util';
import type { ConversationType } from '../../state/ducks/conversations';
import { Spinner } from '../Spinner';
import { formatDateTimeShort } from '../../util/timestamp';
const BASE_CLASS_NAME =
'module-conversation-list__item--contact-or-conversation';
@ -24,7 +24,6 @@ const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
export const HEADER_NAME_CLASS_NAME = `${HEADER_CLASS_NAME}__name`;
export const HEADER_CONTACT_NAME_CLASS_NAME = `${HEADER_NAME_CLASS_NAME}__contact-name`;
export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
const TIMESTAMP_CLASS_NAME = `${DATE_CLASS_NAME}__timestamp`;
const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
@ -175,16 +174,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
>
<div className={HEADER_CLASS_NAME}>
<div className={`${HEADER_CLASS_NAME}__name`}>{headerName}</div>
{isNumber(headerDate) && (
<div className={DATE_CLASS_NAME}>
<Timestamp
timestamp={headerDate}
extended={false}
module={TIMESTAMP_CLASS_NAME}
i18n={i18n}
/>
</div>
)}
<Timestamp timestamp={headerDate} i18n={i18n} />
</div>
{messageText || isUnread ? (
<div className={MESSAGE_CLASS_NAME}>
@ -258,6 +248,22 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
);
});
function Timestamp({
i18n,
timestamp,
}: Readonly<{ i18n: LocalizerType; timestamp?: number }>) {
if (!isNumber(timestamp)) {
return null;
}
const date = new Date(timestamp);
return (
<time className={DATE_CLASS_NAME} dateTime={date.toISOString()}>
{formatDateTimeShort(i18n, date)}
</time>
);
}
function UnreadIndicator({
count = 0,
isUnread,