Collapse message bubbles when applicable

This commit is contained in:
Evan Hahn 2022-03-08 08:32:42 -06:00 committed by GitHub
parent 16cd115530
commit c527de0a8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 707 additions and 383 deletions

View file

@ -1,9 +1,10 @@
// Copyright 2018-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent, ReactChild } from 'react';
import type { ReactChild, ReactElement } from 'react';
import React from 'react';
import classNames from 'classnames';
import Measure from 'react-measure';
import type { LocalizerType } from '../../types/Util';
import type { DirectionType, MessageStatusType } from './Message';
@ -19,35 +20,37 @@ type PropsType = {
hasText: boolean;
i18n: LocalizerType;
id: string;
isInline?: boolean;
isShowingImage: boolean;
isSticker?: boolean;
isTapToViewExpired?: boolean;
now: number;
onWidthMeasured?: (width: number) => unknown;
showMessageDetail: (id: string) => void;
status?: MessageStatusType;
textPending?: boolean;
timestamp: number;
};
export const MessageMetadata: FunctionComponent<PropsType> = props => {
const {
deletedForEveryone,
direction,
expirationLength,
expirationTimestamp,
hasText,
i18n,
id,
isShowingImage,
isSticker,
isTapToViewExpired,
now,
showMessageDetail,
status,
textPending,
timestamp,
} = props;
export const MessageMetadata = ({
deletedForEveryone,
direction,
expirationLength,
expirationTimestamp,
hasText,
i18n,
id,
isInline,
isShowingImage,
isSticker,
isTapToViewExpired,
now,
onWidthMeasured,
showMessageDetail,
status,
textPending,
timestamp,
}: Readonly<PropsType>): ReactElement => {
const withImageNoCaption = Boolean(!isSticker && !hasText && isShowingImage);
const metadataDirection = isSticker ? undefined : direction;
@ -114,16 +117,13 @@ export const MessageMetadata: FunctionComponent<PropsType> = props => {
}
}
return (
<div
className={classNames(
'module-message__metadata',
`module-message__metadata--${direction}`,
withImageNoCaption
? 'module-message__metadata--with-image-no-caption'
: null
)}
>
const className = classNames(
'module-message__metadata',
isInline && 'module-message__metadata--inline',
withImageNoCaption && 'module-message__metadata--with-image-no-caption'
);
const children = (
<>
{timestampNode}
{expirationLength && expirationTimestamp ? (
<ExpireTimer
@ -161,6 +161,25 @@ export const MessageMetadata: FunctionComponent<PropsType> = props => {
)}
/>
) : null}
</div>
</>
);
if (onWidthMeasured) {
return (
<Measure
bounds
onResize={({ bounds }) => {
onWidthMeasured(bounds?.width || 0);
}}
>
{({ measureRef }) => (
<div className={className} ref={measureRef}>
{children}
</div>
)}
</Measure>
);
}
return <div className={className}>{children}</div>;
};