Remember message Read More state when scrolling in virtualized container

This commit is contained in:
Scott Nonnenberg 2021-11-11 15:45:47 -08:00 committed by GitHub
parent c5b5f2fe42
commit edab7c7d83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 159 additions and 72 deletions

View file

@ -144,6 +144,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
markViewed: action('markViewed'),
messageExpanded: action('messageExpanded'),
onHeightChange: action('onHeightChange'),
openConversation: action('openConversation'),
openLink: action('openLink'),

View file

@ -131,6 +131,7 @@ export type PropsData = {
conversationColor: ConversationColorType;
customColor?: CustomColorType;
conversationId: string;
displayLimit?: number;
text?: string;
textPending?: boolean;
isSticker?: boolean;
@ -216,6 +217,7 @@ export type PropsActions = {
clearSelectedMessage: () => unknown;
doubleCheckMissingQuoteReference: (messageId: string) => unknown;
onHeightChange: () => unknown;
messageExpanded: (id: string, displayLimit: number) => unknown;
checkForAccount: (identifier: string) => unknown;
reactToMessage: (
@ -1229,7 +1231,10 @@ export class Message extends React.PureComponent<Props, State> {
bodyRanges,
deletedForEveryone,
direction,
displayLimit,
i18n,
id,
messageExpanded,
onHeightChange,
openConversation,
status,
@ -1263,7 +1268,10 @@ export class Message extends React.PureComponent<Props, State> {
bodyRanges={bodyRanges}
disableLinks={!this.areLinksEnabled()}
direction={direction}
displayLimit={displayLimit}
i18n={i18n}
id={id}
messageExpanded={messageExpanded}
openConversation={openConversation}
onHeightChange={onHeightChange}
text={contents || ''}

View file

@ -19,7 +19,10 @@ const story = storiesOf('Components/Conversation/MessageBodyReadMore', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
bodyRanges: overrideProps.bodyRanges,
direction: 'incoming',
displayLimit: overrideProps.displayLimit,
i18n,
id: 'some-id',
messageExpanded: action('messageExpanded'),
onHeightChange: action('onHeightChange'),
text: text('text', overrideProps.text || ''),
});

View file

@ -1,10 +1,11 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useState } from 'react';
import React, { useEffect } from 'react';
import type { Props as MessageBodyPropsType } from './MessageBody';
import { MessageBody } from './MessageBody';
import { usePrevious } from '../../hooks/usePrevious';
export type Props = Pick<
MessageBodyPropsType,
@ -16,6 +17,9 @@ export type Props = Pick<
| 'bodyRanges'
| 'openConversation'
> & {
id: string;
displayLimit?: number;
messageExpanded: (id: string, displayLimit: number) => unknown;
onHeightChange: () => unknown;
};
@ -57,20 +61,29 @@ export function MessageBodyReadMore({
bodyRanges,
direction,
disableLinks,
displayLimit,
i18n,
id,
messageExpanded,
onHeightChange,
openConversation,
text,
textPending,
}: Props): JSX.Element {
const [maxLength, setMaxLength] = useState(INITIAL_LENGTH);
const maxLength = displayLimit || INITIAL_LENGTH;
const previousMaxLength = usePrevious(maxLength, maxLength);
useEffect(() => {
if (previousMaxLength !== maxLength) {
onHeightChange();
}
}, [maxLength, previousMaxLength, onHeightChange]);
const { hasReadMore, text: slicedText } = graphemeAwareSlice(text, maxLength);
const onIncreaseTextLength = hasReadMore
? () => {
setMaxLength(oldMaxLength => oldMaxLength + INCREMENT_COUNT);
onHeightChange();
messageExpanded(id, maxLength + INCREMENT_COUNT);
}
: undefined;

View file

@ -313,6 +313,7 @@ export class MessageDetail extends React.Component<Props> {
}
disableMenu
disableScroll
displayLimit={Number.MAX_SAFE_INTEGER}
displayTapToViewMessage={displayTapToViewMessage}
downloadAttachment={() =>
log.warn('MessageDetail: deleteMessageForEveryone called!')
@ -323,6 +324,7 @@ export class MessageDetail extends React.Component<Props> {
kickOffAttachmentDownload={kickOffAttachmentDownload}
markAttachmentAsCorrupted={markAttachmentAsCorrupted}
markViewed={markViewed}
messageExpanded={noop}
onHeightChange={noop}
openConversation={openConversation}
openLink={openLink}

View file

@ -63,7 +63,8 @@ const defaultMessageProps: MessagesProps = {
kickOffAttachmentDownload: action('default--kickOffAttachmentDownload'),
markAttachmentAsCorrupted: action('default--markAttachmentAsCorrupted'),
markViewed: action('default--markViewed'),
onHeightChange: action('onHeightChange'),
messageExpanded: action('dafult--message-expanded'),
onHeightChange: action('default--onHeightChange'),
openConversation: action('default--openConversation'),
openLink: action('default--openLink'),
previews: [],

View file

@ -327,6 +327,7 @@ const actions = () => ({
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
markViewed: action('markViewed'),
messageExpanded: action('messageExpanded'),
showVisualAttachment: action('showVisualAttachment'),
downloadAttachment: action('downloadAttachment'),
displayTapToViewMessage: action('displayTapToViewMessage'),

View file

@ -269,6 +269,7 @@ const getActions = createSelector(
'showContactModal',
'kickOffAttachmentDownload',
'markAttachmentAsCorrupted',
'messageExpanded',
'showVisualAttachment',
'downloadAttachment',
'displayTapToViewMessage',

View file

@ -66,6 +66,7 @@ const getDefaultProps = () => ({
learnMoreAboutDeliveryIssue: action('learnMoreAboutDeliveryIssue'),
markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
markViewed: action('markViewed'),
messageExpanded: action('messageExpanded'),
showMessageDetail: action('showMessageDetail'),
openConversation: action('openConversation'),
showContactDetail: action('showContactDetail'),