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,48 +0,0 @@
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { action } from '@storybook/addon-actions';
import { date, number } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import type { Props } from './Countdown';
import { Countdown } from './Countdown';
const defaultDuration = 10 * 1000;
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
duration: number('duration', overrideProps.duration || defaultDuration),
expiresAt: date(
'expiresAt',
overrideProps.expiresAt
? new Date(overrideProps.expiresAt)
: new Date(Date.now() + defaultDuration)
),
onComplete: action('onComplete'),
});
const story = storiesOf('Components/Countdown', module);
story.add('Just Started', () => {
const props = createProps();
return <Countdown {...props} />;
});
story.add('In Progress', () => {
const props = createProps({
duration: 3 * defaultDuration,
expiresAt: Date.now() + defaultDuration,
});
return <Countdown {...props} />;
});
story.add('Done', () => {
const props = createProps({
expiresAt: Date.now() - defaultDuration,
});
return <Countdown {...props} />;
});

View file

@ -1,110 +0,0 @@
// Copyright 2019-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
export type Props = {
duration: number;
expiresAt: number;
onComplete?: () => unknown;
};
type State = {
ratio: number;
};
const CIRCUMFERENCE = 11.013 * 2 * Math.PI;
export class Countdown extends React.Component<Props, State> {
public looping = false;
constructor(props: Props) {
super(props);
const { duration, expiresAt } = this.props;
const ratio = getRatio(expiresAt, duration);
this.state = { ratio };
}
public override componentDidMount(): void {
this.startLoop();
}
public override componentDidUpdate(): void {
this.startLoop();
}
public override componentWillUnmount(): void {
this.stopLoop();
}
public startLoop(): void {
if (this.looping) {
return;
}
this.looping = true;
requestAnimationFrame(this.loop);
}
public stopLoop(): void {
this.looping = false;
}
public loop = (): void => {
const { onComplete, duration, expiresAt } = this.props;
if (!this.looping) {
return;
}
const ratio = getRatio(expiresAt, duration);
this.setState({ ratio });
if (ratio === 1) {
this.looping = false;
if (onComplete) {
onComplete();
}
} else {
requestAnimationFrame(this.loop);
}
};
public override render(): JSX.Element {
const { ratio } = this.state;
const strokeDashoffset = ratio * CIRCUMFERENCE;
return (
<div className="module-countdown">
<svg viewBox="0 0 24 24">
<path
d="M12,1 A11,11,0,1,1,1,12,11.013,11.013,0,0,1,12,1Z"
className="module-countdown__back-path"
style={{
strokeDasharray: `${CIRCUMFERENCE}, ${CIRCUMFERENCE}`,
}}
/>
<path
d="M12,1 A11,11,0,1,1,1,12,11.013,11.013,0,0,1,12,1Z"
className="module-countdown__front-path"
style={{
strokeDasharray: `${CIRCUMFERENCE}, ${CIRCUMFERENCE}`,
strokeDashoffset,
}}
/>
</svg>
</div>
);
}
}
function getRatio(expiresAt: number, duration: number) {
const start = expiresAt - duration;
const end = expiresAt;
const now = Date.now();
const totalTime = end - start;
const elapsed = now - start;
return Math.min(Math.max(0, elapsed / totalTime), 1);
}

View file

@ -1,11 +1,11 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { CSSProperties } from 'react';
import React from 'react';
import type { ConversationColorType } from '../types/Colors';
import type { LocalizerType } from '../types/Util';
import { formatRelativeTime } from '../util/formatRelativeTime';
import { formatTime } from '../util/timestamp';
export type PropsType = {
backgroundStyle?: CSSProperties;
@ -51,7 +51,7 @@ const SampleMessage = ({
<span
className={`module-message__metadata__date module-message__metadata__date--${direction}`}
>
{formatRelativeTime(timestamp, { extended: true, i18n })}
{formatTime(i18n, timestamp)}
</span>
{direction === 'outgoing' && (
<div

34
ts/components/Time.tsx Normal file
View file

@ -0,0 +1,34 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { Moment } from 'moment';
import type { ReactElement, TimeHTMLAttributes } from 'react';
import moment from 'moment';
import React from 'react';
export function Time({
children,
dateOnly = false,
timestamp,
...otherProps
}: Readonly<
{
dateOnly?: boolean;
timestamp: Readonly<number | Date | Moment>;
} & Omit<TimeHTMLAttributes<HTMLElement>, 'dateTime'>
>): ReactElement {
let dateTime: string;
if (dateOnly) {
dateTime = moment(timestamp).format('YYYY-MM-DD');
} else {
const date =
typeof timestamp === 'number' ? new Date(timestamp) : timestamp;
dateTime = date.toISOString();
}
return (
<time dateTime={dateTime} {...otherProps}>
{children}
</time>
);
}

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 * as React from 'react';
@ -70,7 +70,7 @@ story.add('Two incoming direct calls back-to-back', () => {
<CallingNotification
{...getCommonProps()}
{...call1}
nextItem={{ type: 'callHistory', data: call2 }}
nextItem={{ type: 'callHistory', data: call2, timestamp: Date.now() }}
/>
<CallingNotification {...getCommonProps()} {...call2} />
</>
@ -99,7 +99,7 @@ story.add('Two outgoing direct calls back-to-back', () => {
<CallingNotification
{...getCommonProps()}
{...call1}
nextItem={{ type: 'callHistory', data: call2 }}
nextItem={{ type: 'callHistory', data: call2, timestamp: Date.now() }}
/>
<CallingNotification {...getCommonProps()} {...call2} />
</>

View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode } from 'react';
@ -8,7 +8,7 @@ import { noop } from 'lodash';
import { SystemMessage } from './SystemMessage';
import { Button, ButtonSize, ButtonVariant } from '../Button';
import { Timestamp } from './Timestamp';
import { MessageTimestamp } from './MessageTimestamp';
import type { LocalizerType } from '../../types/Util';
import { CallMode } from '../../types/Calling';
import type { CallingNotificationType } from '../../util/callingNotification';
@ -91,9 +91,8 @@ export const CallingNotification: React.FC<PropsType> = React.memo(props => {
contents={
<>
{getCallingNotificationText(props, i18n)} &middot;{' '}
<Timestamp
<MessageTimestamp
direction="outgoing"
extended
i18n={i18n}
timestamp={timestamp}
withImageNoCaption={false}

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 React from 'react';
@ -8,7 +8,7 @@ import type { LocalizerType } from '../../types/Util';
import { Intl } from '../Intl';
import { SystemMessage } from './SystemMessage';
import { Timestamp } from './Timestamp';
import { MessageTimestamp } from './MessageTimestamp';
import { Emojify } from './Emojify';
export type PropsData = {
@ -37,7 +37,7 @@ export const ChangeNumberNotification: React.FC<Props> = props => {
i18n={i18n}
/>
&nbsp;·&nbsp;
<Timestamp i18n={i18n} timestamp={timestamp} />
<MessageTimestamp i18n={i18n} timestamp={timestamp} />
</>
}
icon="phone"

View file

@ -4,11 +4,11 @@
import type { ReactChild, ReactNode } from 'react';
import React from 'react';
import classNames from 'classnames';
import moment from 'moment';
import { noop } from 'lodash';
import { Avatar, AvatarSize } from '../Avatar';
import { ContactName } from './ContactName';
import { Time } from '../Time';
import type {
Props as MessagePropsType,
PropsData as MessagePropsDataType,
@ -22,7 +22,7 @@ import type { ContactNameColorType } from '../../types/Colors';
import { SendStatus } from '../../messages/MessageSendState';
import { WidthBreakpoint } from '../_util';
import * as log from '../../logging/log';
import { Timestamp } from './Timestamp';
import { formatDateTimeLong } from '../../util/timestamp';
export type Contact = Pick<
ConversationType,
@ -194,12 +194,12 @@ export class MessageDetail extends React.Component<Props> {
{errorComponent}
{unidentifiedDeliveryComponent}
{contact.statusTimestamp && (
<Timestamp
extended
i18n={i18n}
module="module-message-detail__status-timestamp"
<Time
className="module-message-detail__status-timestamp"
timestamp={contact.statusTimestamp}
/>
>
{formatDateTimeLong(i18n, contact.statusTimestamp)}
</Time>
)}
</div>
);
@ -379,7 +379,9 @@ export class MessageDetail extends React.Component<Props> {
<tr>
<td className="module-message-detail__label">{i18n('sent')}</td>
<td>
{moment(sentAt).format('LLLL')}{' '}
<Time timestamp={sentAt}>
{formatDateTimeLong(i18n, sentAt)}
</Time>{' '}
<span className="module-message-detail__unix-timestamp">
({sentAt})
</span>
@ -391,7 +393,9 @@ export class MessageDetail extends React.Component<Props> {
{i18n('received')}
</td>
<td>
{moment(receivedAt).format('LLLL')}{' '}
<Time timestamp={receivedAt}>
{formatDateTimeLong(i18n, receivedAt)}
</Time>{' '}
<span className="module-message-detail__unix-timestamp">
({receivedAt})
</span>

View file

@ -1,4 +1,4 @@
// Copyright 2018-2021 Signal Messenger, LLC
// Copyright 2018-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent, ReactChild } from 'react';
@ -8,7 +8,7 @@ import classNames from 'classnames';
import type { LocalizerType } from '../../types/Util';
import type { DirectionType, MessageStatusType } from './Message';
import { ExpireTimer } from './ExpireTimer';
import { Timestamp } from './Timestamp';
import { MessageTimestamp } from './MessageTimestamp';
import { Spinner } from '../Spinner';
type PropsType = {
@ -94,10 +94,9 @@ export const MessageMetadata: FunctionComponent<PropsType> = props => {
);
} else {
timestampNode = (
<Timestamp
<MessageTimestamp
i18n={i18n}
timestamp={timestamp}
extended
direction={metadataDirection}
withImageNoCaption={withImageNoCaption}
withSticker={isSticker}

View file

@ -1,4 +1,4 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -7,12 +7,12 @@ import { boolean, date, select, text } from '@storybook/addon-knobs';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import type { Props } from './Timestamp';
import { Timestamp } from './Timestamp';
import type { Props } from './MessageTimestamp';
import { MessageTimestamp } from './MessageTimestamp';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/Timestamp', module);
const story = storiesOf('Components/Conversation/MessageTimestamp', module);
const { now } = Date;
const seconds = (n: number) => n * 1000;
@ -26,14 +26,6 @@ const get1201 = () => {
return d.getTime();
};
const getJanuary1201 = () => {
const d = new Date();
d.setHours(0, 1, 0, 0);
d.setMonth(0);
d.setDate(1);
return d.getTime();
};
const times = (): Array<[string, number]> => [
['500ms ago', now() - seconds(0.5)],
['30s ago', now() - seconds(30)],
@ -42,20 +34,14 @@ const times = (): Array<[string, number]> => [
['45m ago', now() - minutes(45)],
['1h ago', now() - hours(1)],
['12:01am today', get1201()],
['11:59pm yesterday', get1201() - minutes(2)],
['24h ago', now() - hours(24)],
['2d ago', now() - days(2)],
['7d ago', now() - days(7)],
['30d ago', now() - days(30)],
['January 1st this year, 12:01am ', getJanuary1201()],
['December 31st last year, 11:59pm', getJanuary1201() - minutes(2)],
['366d ago', now() - days(366)],
];
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
timestamp: overrideProps.timestamp,
extended: boolean('extended', overrideProps.extended || false),
module: text('module', ''),
withImageNoCaption: boolean('withImageNoCaption', false),
withSticker: boolean('withSticker', false),
@ -79,7 +65,7 @@ const createTable = (overrideProps: Partial<Props> = {}) => (
<tr key={timestamp}>
<td>{description}</td>
<td>
<Timestamp
<MessageTimestamp
key={timestamp}
{...createProps({ ...overrideProps, timestamp })}
/>
@ -94,14 +80,10 @@ story.add('Normal', () => {
return createTable();
});
story.add('Extended', () => {
return createTable({ extended: true });
});
story.add('Knobs', () => {
const props = createProps({
timestamp: date('timestamp', new Date()),
});
return <Timestamp {...props} />;
return <MessageTimestamp {...props} />;
});

View file

@ -1,17 +1,16 @@
// Copyright 2018-2021 Signal Messenger, LLC
// Copyright 2018-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import classNames from 'classnames';
import moment from 'moment';
import { formatRelativeTime } from '../../util/formatRelativeTime';
import { formatTime } from '../../util/timestamp';
import type { LocalizerType } from '../../types/Util';
export type Props = {
timestamp?: number;
extended?: boolean;
module?: string;
withImageNoCaption?: boolean;
withSticker?: boolean;
@ -22,7 +21,7 @@ export type Props = {
const UPDATE_FREQUENCY = 60 * 1000;
export class Timestamp extends React.Component<Props> {
export class MessageTimestamp extends React.Component<Props> {
private interval: NodeJS.Timeout | null;
constructor(props: Props) {
@ -57,7 +56,6 @@ export class Timestamp extends React.Component<Props> {
withImageNoCaption,
withSticker,
withTapToViewExpired,
extended,
} = this.props;
const moduleName = module || 'module-timestamp';
@ -78,7 +76,7 @@ export class Timestamp extends React.Component<Props> {
)}
title={moment(timestamp).format('llll')}
>
{formatRelativeTime(timestamp, { i18n, extended })}
{formatTime(i18n, timestamp)}
</span>
);
}

View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -20,7 +20,6 @@ import { ConversationHero } from './ConversationHero';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { getRandomColor } from '../../test-both/helpers/getRandomColor';
import { LastSeenIndicator } from './LastSeenIndicator';
import { TimelineLoadingRow } from './TimelineLoadingRow';
import { TypingBubble } from './TypingBubble';
import { ContactSpoofingType } from '../../util/contactSpoofing';
import { ReadStatus } from '../../messages/MessageReadStatus';
@ -62,6 +61,7 @@ const items: Record<string, TimelineItemType> = {
text: '🔥',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-2': {
type: 'message',
@ -82,6 +82,7 @@ const items: Record<string, TimelineItemType> = {
text: 'Hello there from the new world! http://somewhere.com',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-2.5': {
type: 'unsupportedMessage',
@ -95,6 +96,7 @@ const items: Record<string, TimelineItemType> = {
title: 'Mr. Pig',
},
},
timestamp: Date.now(),
},
'id-3': {
type: 'message',
@ -115,6 +117,7 @@ const items: Record<string, TimelineItemType> = {
text: 'Hello there from the new world!',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-4': {
type: 'timerNotification',
@ -124,6 +127,7 @@ const items: Record<string, TimelineItemType> = {
title: "It's Me",
type: 'fromMe',
},
timestamp: Date.now(),
},
'id-5': {
type: 'timerNotification',
@ -133,6 +137,7 @@ const items: Record<string, TimelineItemType> = {
title: '(202) 555-0000',
type: 'fromOther',
},
timestamp: Date.now(),
},
'id-6': {
type: 'safetyNumberNotification',
@ -143,6 +148,7 @@ const items: Record<string, TimelineItemType> = {
},
isGroup: true,
},
timestamp: Date.now(),
},
'id-7': {
type: 'verificationNotification',
@ -151,6 +157,7 @@ const items: Record<string, TimelineItemType> = {
isLocal: true,
type: 'markVerified',
},
timestamp: Date.now(),
},
'id-8': {
type: 'groupNotification',
@ -180,10 +187,12 @@ const items: Record<string, TimelineItemType> = {
isMe: false,
}),
},
timestamp: Date.now(),
},
'id-9': {
type: 'resetSessionNotification',
data: null,
timestamp: Date.now(),
},
'id-10': {
type: 'message',
@ -205,6 +214,7 @@ const items: Record<string, TimelineItemType> = {
text: '🔥',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-11': {
type: 'message',
@ -226,6 +236,7 @@ const items: Record<string, TimelineItemType> = {
text: 'Hello there from the new world! http://somewhere.com',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-12': {
type: 'message',
@ -247,6 +258,7 @@ const items: Record<string, TimelineItemType> = {
text: 'Hello there from the new world! 🔥',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-13': {
type: 'message',
@ -268,6 +280,7 @@ const items: Record<string, TimelineItemType> = {
text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-14': {
type: 'message',
@ -289,10 +302,12 @@ const items: Record<string, TimelineItemType> = {
text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
timestamp: Date.now(),
},
timestamp: Date.now(),
},
'id-15': {
type: 'linkNotification',
data: null,
timestamp: Date.now(),
},
};
@ -375,14 +390,17 @@ const renderItem = ({
messageId,
containerElementRef,
containerWidthBreakpoint,
isOldestTimelineItem,
}: {
messageId: string;
containerElementRef: React.RefObject<HTMLElement>;
containerWidthBreakpoint: WidthBreakpoint;
isOldestTimelineItem: boolean;
}) => (
<TimelineItem
getPreferredBadge={() => undefined}
id=""
isOldestTimelineItem={isOldestTimelineItem}
isSelected={false}
renderEmojiPicker={() => <div />}
renderReactionPicker={() => <div />}
@ -442,7 +460,6 @@ const renderHeroRow = () => {
};
return <Wrapper />;
};
const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
const renderTypingBubble = () => (
<TypingBubble
acceptedMessageRequest
@ -463,6 +480,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
i18n,
theme: React.useContext(StorybookThemeContext),
getTimestampForMessage: Date.now,
haveNewest: boolean('haveNewest', overrideProps.haveNewest !== false),
haveOldest: boolean('haveOldest', overrideProps.haveOldest !== false),
isIncomingMessageRequest: boolean(
@ -489,7 +507,6 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
renderItem,
renderLastSeenIndicator,
renderHeroRow,
renderLoadingRow,
renderTypingBubble,
typingContactId: overrideProps.typingContactId,

View file

@ -1,7 +1,7 @@
// Copyright 2019-2021 Signal Messenger, LLC
// Copyright 2019-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { debounce, get, isNumber, pick } from 'lodash';
import { debounce, get, isEqual, isNumber, pick } from 'lodash';
import classNames from 'classnames';
import type { CSSProperties, ReactChild, ReactNode, RefObject } from 'react';
import React from 'react';
@ -38,6 +38,7 @@ import { ContactSpoofingType } from '../../util/contactSpoofing';
import { ContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog';
import type { GroupNameCollisionsWithIdsByTitle } from '../../util/groupMemberNameCollisions';
import { hasUnacknowledgedCollisions } from '../../util/groupMemberNameCollisions';
import { TimelineFloatingHeader } from './TimelineFloatingHeader';
const AT_BOTTOM_THRESHOLD = 15;
const NEAR_BOTTOM_THRESHOLD = 15;
@ -104,15 +105,19 @@ type PropsHousekeepingType = {
warning?: WarningType;
contactSpoofingReview?: ContactSpoofingReviewPropType;
getTimestampForMessage: (_: string) => number;
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
theme: ThemeType;
areFloatingDateHeadersEnabled?: boolean;
renderItem: (props: {
actionProps: PropsActionsType;
containerElementRef: RefObject<HTMLElement>;
containerWidthBreakpoint: WidthBreakpoint;
conversationId: string;
isOldestTimelineItem: boolean;
messageId: string;
nextMessageId: undefined | string;
onHeightChange: (messageId: string) => unknown;
@ -125,7 +130,6 @@ type PropsHousekeepingType = {
unblurAvatar: () => void,
updateSharedGroups: () => unknown
) => JSX.Element;
renderLoadingRow: (id: string) => JSX.Element;
renderTypingBubble: (id: string) => JSX.Element;
};
@ -195,23 +199,22 @@ type OnScrollParamsType = {
_hasScrolledToRowTarget?: boolean;
};
type VisibleRowsType = {
newest?: {
id: string;
offsetTop: number;
row: number;
};
oldest?: {
id: string;
offsetTop: number;
row: number;
};
type VisibleRowType = {
id: string;
offsetTop: number;
row: number;
};
type StateType = {
atBottom: boolean;
atTop: boolean;
hasRecentlyScrolled: boolean;
oneTimeScrollRow?: number;
visibleRows?: {
newestFullyVisible?: VisibleRowType;
oldestPartiallyVisible?: VisibleRowType;
oldestFullyVisible?: VisibleRowType;
};
widthBreakpoint: WidthBreakpoint;
@ -295,26 +298,26 @@ const getActions = createSelector(
);
export class Timeline extends React.PureComponent<PropsType, StateType> {
public cellSizeCache = new CellMeasurerCache({
private cellSizeCache = new CellMeasurerCache({
defaultHeight: 64,
fixedWidth: true,
});
public mostRecentWidth = 0;
private mostRecentWidth = 0;
public mostRecentHeight = 0;
private mostRecentHeight = 0;
public offsetFromBottom: number | undefined = 0;
private offsetFromBottom: number | undefined = 0;
public resizeFlag = false;
private resizeFlag = false;
private readonly containerRef = React.createRef<HTMLDivElement>();
private readonly listRef = React.createRef<List>();
public visibleRows: VisibleRowsType | undefined;
private loadCountdownTimeout: NodeJS.Timeout | null = null;
public loadCountdownTimeout: NodeJS.Timeout | null = null;
private hasRecentlyScrolledTimeout?: NodeJS.Timeout;
private containerRefMerger = createRefMerger();
@ -332,6 +335,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
this.state = {
atBottom,
atTop: false,
hasRecentlyScrolled: true,
oneTimeScrollRow,
propScrollToIndex: scrollToIndex,
prevPropScrollToIndex: scrollToIndex,
@ -364,7 +368,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return state;
}
public getList = (): List | null => {
private getList = (): List | null => {
if (!this.listRef) {
return null;
}
@ -374,7 +378,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return current;
};
public getGrid = (): Grid | undefined => {
private getGrid = (): Grid | undefined => {
const list = this.getList();
if (!list) {
return;
@ -383,9 +387,9 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return list.Grid;
};
public getScrollContainer = (): HTMLDivElement | undefined => {
private getScrollContainer = (): HTMLDivElement | undefined => {
// We're using an internal variable (_scrollingContainer)) here,
// so cannot rely on the public type.
// so cannot rely on the private type.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const grid: any = this.getGrid();
if (!grid) {
@ -395,16 +399,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return grid._scrollingContainer as HTMLDivElement;
};
public scrollToRow = (row: number): void => {
const list = this.getList();
if (!list) {
return;
}
list.scrollToRow(row);
};
public recomputeRowHeights = (row?: number): void => {
private recomputeRowHeights = (row?: number): void => {
const list = this.getList();
if (!list) {
return;
@ -413,7 +408,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
list.recomputeRowHeights(row);
};
public onHeightOnlyChange = (): void => {
private onHeightOnlyChange = (): void => {
const grid = this.getGrid();
const scrollContainer = this.getScrollContainer();
if (!grid || !scrollContainer) {
@ -438,7 +433,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
});
};
public resize = (row?: number): void => {
private resize = (row?: number): void => {
this.offsetFromBottom = undefined;
this.resizeFlag = false;
if (isNumber(row) && row > 0) {
@ -452,11 +447,11 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
this.recomputeRowHeights(row || 0);
};
public resizeHeroRow = (): void => {
private resizeHeroRow = (): void => {
this.resize(0);
};
public resizeMessage = (messageId: string): void => {
private resizeMessage = (messageId: string): void => {
const { items } = this.props;
if (!items || !items.length) {
@ -472,7 +467,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
this.resize(row);
};
public onScroll = (data: OnScrollParamsType): void => {
private onScroll = (data: OnScrollParamsType): void => {
// Ignore scroll events generated as react-virtualized recursively scrolls and
// re-measures to get us where we want to go.
if (
@ -492,11 +487,28 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return;
}
this.setState({ hasRecentlyScrolled: true });
if (this.hasRecentlyScrolledTimeout) {
clearTimeout(this.hasRecentlyScrolledTimeout);
}
this.hasRecentlyScrolledTimeout = setTimeout(() => {
this.setState({ hasRecentlyScrolled: false });
}, 1000);
this.updateScrollMetrics(data);
this.updateWithVisibleRows();
};
public updateScrollMetrics = debounce(
private onRowsRendered = (): void => {
// React Virtualized doesn't respect `scrollToIndex` in some cases, likely
// because it hasn't rendered that row yet.
const { oneTimeScrollRow } = this.state;
if (isNumber(oneTimeScrollRow)) {
this.getList()?.scrollToRow(oneTimeScrollRow);
}
};
private updateScrollMetrics = debounce(
(data: OnScrollParamsType) => {
const { clientHeight, clientWidth, scrollHeight, scrollTop } = data;
@ -576,10 +588,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
{ maxWait: 50 }
);
public updateVisibleRows = (): void => {
let newest;
let oldest;
private updateVisibleRows = (): void => {
const scrollContainer = this.getScrollContainer();
if (!scrollContainer) {
return;
@ -589,15 +598,18 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return;
}
const visibleTop = scrollContainer.scrollTop;
const visibleBottom = visibleTop + scrollContainer.clientHeight;
const innerScrollContainer = scrollContainer.children[0];
if (!innerScrollContainer) {
return;
}
let newestFullyVisible: undefined | VisibleRowType;
let oldestPartiallyVisible: undefined | VisibleRowType;
let oldestFullyVisible: undefined | VisibleRowType;
const { children } = innerScrollContainer;
const visibleTop = scrollContainer.scrollTop;
const visibleBottom = visibleTop + scrollContainer.clientHeight;
for (let i = children.length - 1; i >= 0; i -= 1) {
const child = children[i] as HTMLDivElement;
@ -611,7 +623,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
if (bottom - AT_BOTTOM_THRESHOLD <= visibleBottom) {
const row = parseInt(child.getAttribute('data-row') || '-1', 10);
newest = { offsetTop, row, id };
newestFullyVisible = { offsetTop, row, id };
break;
}
@ -620,24 +632,45 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
const max = children.length;
for (let i = 0; i < max; i += 1) {
const child = children[i] as HTMLDivElement;
const { offsetTop, id } = child;
const { id, offsetTop, offsetHeight } = child;
if (!id) {
continue;
}
if (offsetTop + AT_TOP_THRESHOLD >= visibleTop) {
const row = parseInt(child.getAttribute('data-row') || '-1', 10);
oldest = { offsetTop, row, id };
const thisRow = {
offsetTop,
row: parseInt(child.getAttribute('data-row') || '-1', 10),
id,
};
const bottom = offsetTop + offsetHeight;
if (bottom >= visibleTop && !oldestPartiallyVisible) {
oldestPartiallyVisible = thisRow;
}
if (offsetTop + AT_TOP_THRESHOLD >= visibleTop) {
oldestFullyVisible = thisRow;
break;
}
}
this.visibleRows = { newest, oldest };
this.setState(oldState => {
const visibleRows = {
newestFullyVisible,
oldestPartiallyVisible,
oldestFullyVisible,
};
// This avoids a render loop.
return isEqual(oldState.visibleRows, visibleRows)
? null
: { visibleRows };
});
};
public updateWithVisibleRows = debounce(
private updateWithVisibleRows = debounce(
() => {
const {
unreadCount,
@ -654,16 +687,17 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
}
this.updateVisibleRows();
if (!this.visibleRows) {
const { visibleRows } = this.state;
if (!visibleRows) {
return;
}
const { newest, oldest } = this.visibleRows;
if (!newest) {
const { newestFullyVisible, oldestFullyVisible } = visibleRows;
if (!newestFullyVisible) {
return;
}
markMessageRead(newest.id);
markMessageRead(newestFullyVisible.id);
const newestRow = this.getRowCount() - 1;
const oldestRow = this.fromItemIndexToRow(0);
@ -673,7 +707,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
if (
!isLoadingMessages &&
!haveNewest &&
newest.row > newestRow - LOAD_MORE_THRESHOLD
newestFullyVisible.row > newestRow - LOAD_MORE_THRESHOLD
) {
const lastId = items[items.length - 1];
loadNewerMessages(lastId);
@ -684,8 +718,10 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
// Generally we hid this behind a countdown spinner at the top of the window, but
// this is a special-case for the situation where the window is so large and that
// all the messages are visible.
const oldestVisible = Boolean(oldest && oldestRow === oldest.row);
const newestVisible = newestRow === newest.row;
const oldestVisible = Boolean(
oldestFullyVisible && oldestRow === oldestFullyVisible.row
);
const newestVisible = newestRow === newestFullyVisible.row;
if (oldestVisible && newestVisible && !haveOldest) {
this.loadOlderMessages();
}
@ -695,13 +731,13 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
const areUnreadBelowCurrentPosition = Boolean(
isNumber(unreadCount) &&
unreadCount > 0 &&
(!haveNewest || newest.row < lastItemRow)
(!haveNewest || newestFullyVisible.row < lastItemRow)
);
const shouldShowScrollDownButton = Boolean(
!haveNewest ||
areUnreadBelowCurrentPosition ||
newest.row < newestRow - SCROLL_DOWN_BUTTON_THRESHOLD
newestFullyVisible.row < newestRow - SCROLL_DOWN_BUTTON_THRESHOLD
);
this.setState({
@ -713,7 +749,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
{ maxWait: 500 }
);
public loadOlderMessages = (): void => {
private loadOlderMessages = (): void => {
const { haveOldest, isLoadingMessages, items, loadOlderMessages } =
this.props;
@ -730,7 +766,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
loadOlderMessages(oldestId);
};
public rowRenderer = ({
private rowRenderer = ({
index,
key,
parent,
@ -743,7 +779,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
items,
renderItem,
renderHeroRow,
renderLoadingRow,
renderLastSeenIndicator,
renderTypingBubble,
unblurAvatar,
@ -774,12 +809,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
)}
</div>
);
} else if (!haveOldest && row === 0) {
rowContents = (
<div data-row={row} style={styleWithWidth} role="row">
{renderLoadingRow(id)}
</div>
);
} else if (oldestUnreadRow === row) {
rowContents = (
<div data-row={row} style={styleWithWidth} role="row">
@ -824,6 +853,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
containerElementRef: this.containerRef,
containerWidthBreakpoint: widthBreakpoint,
conversationId: id,
isOldestTimelineItem: haveOldest && itemIndex === 0,
messageId,
nextMessageId,
onHeightChange: this.resizeMessage,
@ -848,62 +878,73 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
);
};
public fromItemIndexToRow(index: number): number {
const { oldestUnreadIndex } = this.props;
private fromItemIndexToRow(index: number): number {
const { haveOldest, oldestUnreadIndex } = this.props;
// We will always render either the hero row or the loading row
let addition = 1;
let result = index;
// Hero row
if (haveOldest) {
result += 1;
}
// Unread indicator
if (isNumber(oldestUnreadIndex) && index >= oldestUnreadIndex) {
addition += 1;
result += 1;
}
return index + addition;
return result;
}
public getRowCount(): number {
const { oldestUnreadIndex, typingContactId } = this.props;
const { items } = this.props;
const itemsCount = items && items.length ? items.length : 0;
private getRowCount(): number {
const { haveOldest, items, oldestUnreadIndex, typingContactId } =
this.props;
// We will always render either the hero row or the loading row
let extraRows = 1;
let result = items?.length || 0;
// Hero row
if (haveOldest) {
result += 1;
}
// Unread indicator
if (isNumber(oldestUnreadIndex)) {
extraRows += 1;
result += 1;
}
// Typing indicator
if (typingContactId) {
extraRows += 1;
result += 1;
}
return itemsCount + extraRows;
return result;
}
public fromRowToItemIndex(
row: number,
props?: PropsType
): number | undefined {
const { items } = props || this.props;
private fromRowToItemIndex(row: number): number | undefined {
const { haveOldest, items } = this.props;
// We will always render either the hero row or the loading row
let subtraction = 1;
let result = row;
// Hero row
if (haveOldest) {
result -= 1;
}
// Unread indicator
const oldestUnreadRow = this.getLastSeenIndicatorRow();
if (isNumber(oldestUnreadRow) && row > oldestUnreadRow) {
subtraction += 1;
result -= 1;
}
const index = row - subtraction;
if (index < 0 || index >= items.length) {
if (result < 0 || result >= items.length) {
return;
}
return index;
return result;
}
public getLastSeenIndicatorRow(props?: PropsType): number | undefined {
const { oldestUnreadIndex } = props || this.props;
private getLastSeenIndicatorRow(): number | undefined {
const { oldestUnreadIndex } = this.props;
if (!isNumber(oldestUnreadIndex)) {
return;
}
@ -911,7 +952,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return this.fromItemIndexToRow(oldestUnreadIndex) - 1;
}
public getTypingBubbleRow(): number | undefined {
private getTypingBubbleRow(): number | undefined {
const { items } = this.props;
if (!items || items.length < 0) {
return;
@ -922,23 +963,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return this.fromItemIndexToRow(last) + 1;
}
public onScrollToMessage = (messageId: string): void => {
const { isLoadingMessages, items, loadAndScroll } = this.props;
const index = items.findIndex(item => item === messageId);
if (index >= 0) {
const row = this.fromItemIndexToRow(index);
this.setState({
oneTimeScrollRow: row,
});
}
if (!isLoadingMessages) {
loadAndScroll(messageId);
}
};
public scrollToBottom = (setFocus?: boolean): void => {
private scrollToBottom = (setFocus?: boolean): void => {
const { selectMessage, id, items } = this.props;
if (setFocus && items && items.length > 0) {
@ -956,11 +981,11 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
});
};
public onClickScrollDownButton = (): void => {
private onClickScrollDownButton = (): void => {
this.scrollDown(false);
};
public scrollDown = (setFocus?: boolean): void => {
private scrollDown = (setFocus?: boolean): void => {
const {
haveNewest,
id,
@ -977,7 +1002,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
const lastId = items[items.length - 1];
const lastSeenIndicatorRow = this.getLastSeenIndicatorRow();
if (!this.visibleRows) {
const { visibleRows } = this.state;
if (!visibleRows) {
if (haveNewest) {
this.scrollToBottom(setFocus);
} else if (!isLoadingMessages) {
@ -987,12 +1013,12 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return;
}
const { newest } = this.visibleRows;
const { newestFullyVisible } = visibleRows;
if (
newest &&
newestFullyVisible &&
isNumber(lastSeenIndicatorRow) &&
newest.row < lastSeenIndicatorRow
newestFullyVisible.row < lastSeenIndicatorRow
) {
if (setFocus && isNumber(oldestUnreadIndex)) {
const messageId = items[oldestUnreadIndex];
@ -1112,8 +1138,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
}
const newRow = this.fromItemIndexToRow(newFirstIndex);
const delta = newFirstIndex - oldFirstIndex;
if (delta > 0) {
if (newRow > 0) {
// We're loading more new messages at the top; we want to stay at the top
this.resize();
// TODO: DESKTOP-688
@ -1188,7 +1213,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
this.updateWithVisibleRows();
}
public getScrollTarget = (): number | undefined => {
private getScrollTarget = (): number | undefined => {
const { oneTimeScrollRow, atBottom, propScrollToIndex } = this.state;
const rowCount = this.getRowCount();
@ -1208,7 +1233,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return scrollToBottom;
};
public handleBlur = (event: React.FocusEvent): void => {
private handleBlur = (event: React.FocusEvent): void => {
const { clearSelectedMessage } = this.props;
const { currentTarget } = event;
@ -1232,7 +1257,9 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
}, 0);
};
public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
private handleKeyDown = (
event: React.KeyboardEvent<HTMLDivElement>
): void => {
const { selectMessage, selectedMessageId, items, id } = this.props;
const commandKey = get(window, 'platform') === 'darwin' && event.metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && event.ctrlKey;
@ -1309,15 +1336,19 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
public override render(): JSX.Element | null {
const {
acknowledgeGroupMemberNameCollisions,
areFloatingDateHeadersEnabled = true,
areWeAdmin,
clearInvitedUuidsForNewlyCreatedGroup,
closeContactSpoofingReview,
contactSpoofingReview,
getPreferredBadge,
getTimestampForMessage,
haveOldest,
i18n,
id,
invitedContactsForNewlyCreatedGroup,
isGroupV1AndDisabled,
isLoadingMessages,
items,
onBlock,
onBlockAndReportSpam,
@ -1332,6 +1363,9 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
const {
shouldShowScrollDownButton,
areUnreadBelowCurrentPosition,
hasRecentlyScrolled,
lastMeasuredWarningHeight,
visibleRows,
widthBreakpoint,
} = this.state;
@ -1342,6 +1376,27 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
return null;
}
let floatingHeader: ReactNode;
const oldestPartiallyVisibleRow = visibleRows?.oldestPartiallyVisible;
if (areFloatingDateHeadersEnabled && oldestPartiallyVisibleRow) {
floatingHeader = (
<TimelineFloatingHeader
i18n={i18n}
isLoading={isLoadingMessages}
style={
lastMeasuredWarningHeight
? { marginTop: lastMeasuredWarningHeight }
: undefined
}
timestamp={getTimestampForMessage(oldestPartiallyVisibleRow.id)}
visible={
(hasRecentlyScrolled || isLoadingMessages) &&
(!haveOldest || oldestPartiallyVisibleRow.id !== items[0])
}
/>
);
}
const autoSizer = (
<AutoSizer>
{({ height, width }) => {
@ -1366,6 +1421,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onScroll={this.onScroll as any}
overscanRowCount={10}
onRowsRendered={this.onRowsRendered}
ref={this.listRef}
rowCount={rowCount}
rowHeight={this.cellSizeCache.rowHeight}
@ -1549,6 +1605,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
>
{timelineWarning}
{floatingHeader}
{autoSizer}
{shouldShowScrollDownButton ? (

View file

@ -0,0 +1,43 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactElement } from 'react';
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import * as durations from '../../util/durations';
import type { LocalizerType } from '../../types/Util';
import { formatDate } from '../../util/timestamp';
import { Time } from '../Time';
export function TimelineDateHeader({
floating = false,
i18n,
timestamp,
}: Readonly<{
floating?: boolean;
i18n: LocalizerType;
timestamp: number;
}>): ReactElement {
const [text, setText] = useState(formatDate(i18n, timestamp));
useEffect(() => {
const update = () => setText(formatDate(i18n, timestamp));
update();
const interval = setInterval(update, durations.MINUTE);
return () => {
clearInterval(interval);
};
}, [i18n, timestamp]);
return (
<Time
className={classNames(
'TimelineDateHeader',
`TimelineDateHeader--${floating ? 'floating' : 'inline'}`
)}
dateOnly
timestamp={timestamp}
>
{text}
</Time>
);
}

View file

@ -0,0 +1,43 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import classNames from 'classnames';
import type { CSSProperties, ReactElement } from 'react';
import React from 'react';
import type { LocalizerType } from '../../types/Util';
import { TimelineDateHeader } from './TimelineDateHeader';
import { Spinner } from '../Spinner';
export const TimelineFloatingHeader = ({
i18n,
isLoading,
style,
timestamp,
visible,
}: Readonly<{
i18n: LocalizerType;
isLoading: boolean;
style?: CSSProperties;
timestamp: number;
visible: boolean;
}>): ReactElement => (
<div
className={classNames(
'TimelineFloatingHeader',
`TimelineFloatingHeader--${visible ? 'visible' : 'hidden'}`
)}
style={style}
>
<TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
<div
className={classNames(
'TimelineFloatingHeader__spinner-container',
`TimelineFloatingHeader__spinner-container--${
isLoading ? 'visible' : 'hidden'
}`
)}
>
<Spinner direction="on-background" size="20px" svgSize="small" />
</div>
</div>
);

View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -53,6 +53,7 @@ const getDefaultProps = () => ({
conversationId: 'conversation-id',
getPreferredBadge: () => undefined,
id: 'asdf',
isOldestTimelineItem: false,
isSelected: false,
interactionMode: 'keyboard' as const,
theme: ThemeType.light,

View file

@ -1,13 +1,15 @@
// Copyright 2019-2021 Signal Messenger, LLC
// Copyright 2019-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { RefObject } from 'react';
import type { ReactChild, RefObject } from 'react';
import React from 'react';
import { omit } from 'lodash';
import moment from 'moment';
import type { LocalizerType, ThemeType } from '../../types/Util';
import type { InteractionModeType } from '../../state/ducks/conversations';
import { TimelineDateHeader } from './TimelineDateHeader';
import type {
Props as AllMessageProps,
PropsActions as MessageActionsType,
@ -120,7 +122,7 @@ type ProfileChangeNotificationType = {
data: ProfileChangeNotificationPropsType;
};
export type TimelineItemType =
export type TimelineItemType = (
| CallHistoryType
| ChatSessionRefreshedType
| DeliveryIssueType
@ -136,7 +138,8 @@ export type TimelineItemType =
| UniversalTimerNotificationType
| ChangeNumberNotificationType
| UnsupportedMessageType
| VerificationNotificationType;
| VerificationNotificationType
) & { timestamp: number };
type PropsLocalType = {
containerElementRef: RefObject<HTMLElement>;
@ -149,6 +152,7 @@ type PropsLocalType = {
renderUniversalTimerNotification: () => JSX.Element;
i18n: LocalizerType;
interactionMode: InteractionModeType;
isOldestTimelineItem: boolean;
theme: ThemeType;
previousItem: undefined | TimelineItemType;
nextItem: undefined | TimelineItemType;
@ -179,12 +183,14 @@ export class TimelineItem extends React.PureComponent<PropsType> {
conversationId,
getPreferredBadge,
id,
isOldestTimelineItem,
isSelected,
item,
i18n,
theme,
messageSizeChanged,
nextItem,
previousItem,
renderContact,
renderUniversalTimerNotification,
returnToActiveCall,
@ -198,8 +204,9 @@ export class TimelineItem extends React.PureComponent<PropsType> {
return null;
}
let itemContents: ReactChild;
if (item.type === 'message') {
return (
itemContents = (
<Message
{...omit(this.props, ['item'])}
{...item.data}
@ -210,101 +217,143 @@ export class TimelineItem extends React.PureComponent<PropsType> {
renderingContext="conversation/TimelineItem"
/>
);
}
let notification;
if (item.type === 'unsupportedMessage') {
notification = (
<UnsupportedMessage {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'callHistory') {
notification = (
<CallingNotification
conversationId={conversationId}
i18n={i18n}
messageId={id}
messageSizeChanged={messageSizeChanged}
nextItem={nextItem}
returnToActiveCall={returnToActiveCall}
startCallingLobby={startCallingLobby}
{...item.data}
/>
);
} else if (item.type === 'chatSessionRefreshed') {
notification = (
<ChatSessionRefreshedNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'deliveryIssue') {
notification = (
<DeliveryIssueNotification {...item.data} {...this.props} i18n={i18n} />
);
} else if (item.type === 'linkNotification') {
notification = <LinkNotification i18n={i18n} />;
} else if (item.type === 'timerNotification') {
notification = (
<TimerNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'universalTimerNotification') {
notification = renderUniversalTimerNotification();
} else if (item.type === 'changeNumberNotification') {
notification = (
<ChangeNumberNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'safetyNumberNotification') {
notification = (
<SafetyNumberNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'verificationNotification') {
notification = (
<VerificationNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'groupNotification') {
notification = (
<GroupNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'groupV2Change') {
notification = (
<GroupV2Change
renderContact={renderContact}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'groupV1Migration') {
notification = (
<GroupV1Migration {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'resetSessionNotification') {
notification = (
<ResetSessionNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'profileChange') {
notification = (
<ProfileChangeNotification {...this.props} {...item.data} i18n={i18n} />
);
} else {
// Weird, yes, but the idea is to get a compile error when we aren't comprehensive
// with our if/else checks above, but also log out the type we don't understand if
// we encounter it at runtime.
const unknownItem: never = item;
const asItem = unknownItem as TimelineItemType;
throw new Error(`TimelineItem: Unknown type: ${asItem.type}`);
let notification;
if (item.type === 'unsupportedMessage') {
notification = (
<UnsupportedMessage {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'callHistory') {
notification = (
<CallingNotification
conversationId={conversationId}
i18n={i18n}
messageId={id}
messageSizeChanged={messageSizeChanged}
nextItem={nextItem}
returnToActiveCall={returnToActiveCall}
startCallingLobby={startCallingLobby}
{...item.data}
/>
);
} else if (item.type === 'chatSessionRefreshed') {
notification = (
<ChatSessionRefreshedNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'deliveryIssue') {
notification = (
<DeliveryIssueNotification
{...item.data}
{...this.props}
i18n={i18n}
/>
);
} else if (item.type === 'linkNotification') {
notification = <LinkNotification i18n={i18n} />;
} else if (item.type === 'timerNotification') {
notification = (
<TimerNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'universalTimerNotification') {
notification = renderUniversalTimerNotification();
} else if (item.type === 'changeNumberNotification') {
notification = (
<ChangeNumberNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'safetyNumberNotification') {
notification = (
<SafetyNumberNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'verificationNotification') {
notification = (
<VerificationNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'groupNotification') {
notification = (
<GroupNotification {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'groupV2Change') {
notification = (
<GroupV2Change
renderContact={renderContact}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'groupV1Migration') {
notification = (
<GroupV1Migration {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'resetSessionNotification') {
notification = (
<ResetSessionNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else if (item.type === 'profileChange') {
notification = (
<ProfileChangeNotification
{...this.props}
{...item.data}
i18n={i18n}
/>
);
} else {
// Weird, yes, but the idea is to get a compile error when we aren't comprehensive
// with our if/else checks above, but also log out the type we don't understand
// if we encounter it at runtime.
const unknownItem: never = item;
const asItem = unknownItem as TimelineItemType;
throw new Error(`TimelineItem: Unknown type: ${asItem.type}`);
}
itemContents = (
<InlineNotificationWrapper
id={id}
conversationId={conversationId}
isSelected={isSelected}
selectMessage={selectMessage}
>
{notification}
</InlineNotificationWrapper>
);
}
return (
<InlineNotificationWrapper
id={id}
conversationId={conversationId}
isSelected={isSelected}
selectMessage={selectMessage}
>
{notification}
</InlineNotificationWrapper>
);
const shouldRenderDateHeader =
isOldestTimelineItem ||
Boolean(
previousItem &&
// This comparison avoids strange header behavior for out-of-order messages.
item.timestamp > previousItem.timestamp &&
!moment(previousItem.timestamp).isSame(item.timestamp, 'day')
);
if (shouldRenderDateHeader) {
return (
<>
<TimelineDateHeader i18n={i18n} timestamp={item.timestamp} />
{itemContents}
</>
);
}
return itemContents;
}
}

View file

@ -1,45 +0,0 @@
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { date, number, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import type { Props } from './TimelineLoadingRow';
import { TimelineLoadingRow } from './TimelineLoadingRow';
const story = storiesOf('Components/Conversation/TimelineLoadingRow', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
state: select(
'state',
{ idle: 'idle', countdown: 'countdown', loading: 'loading' },
overrideProps.state || 'idle'
),
duration: number('duration', overrideProps.duration || 0),
expiresAt: date('expiresAt', new Date(overrideProps.expiresAt || Date.now())),
onComplete: action('onComplete'),
});
story.add('Idle', () => {
const props = createProps();
return <TimelineLoadingRow {...props} />;
});
story.add('Countdown', () => {
const props = createProps({
state: 'countdown',
duration: 40000,
expiresAt: Date.now() + 20000,
});
return <TimelineLoadingRow {...props} />;
});
story.add('Loading', () => {
const props = createProps({ state: 'loading' });
return <TimelineLoadingRow {...props} />;
});

View file

@ -1,48 +0,0 @@
// Copyright 2019-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { isNumber } from 'lodash';
import { Countdown } from '../Countdown';
import { Spinner } from '../Spinner';
export type STATE_ENUM = 'idle' | 'countdown' | 'loading';
export type Props = {
state: STATE_ENUM;
duration?: number;
expiresAt?: number;
onComplete?: () => unknown;
};
const FAKE_DURATION = 1000;
export class TimelineLoadingRow extends React.PureComponent<Props> {
public renderContents(): JSX.Element {
const { state, duration, expiresAt, onComplete } = this.props;
if (state === 'idle') {
const fakeExpiresAt = Date.now() - FAKE_DURATION;
return <Countdown duration={FAKE_DURATION} expiresAt={fakeExpiresAt} />;
}
if (state === 'countdown' && isNumber(duration) && isNumber(expiresAt)) {
return (
<Countdown
duration={duration}
expiresAt={expiresAt}
onComplete={onComplete}
/>
);
}
return <Spinner size="24" svgSize="small" direction="on-background" />;
}
public override render(): JSX.Element {
return (
<div className="module-timeline-loading-row">{this.renderContents()}</div>
);
}
}

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,