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

@ -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;