Remember message Read More state when scrolling in virtualized container
This commit is contained in:
parent
c5b5f2fe42
commit
edab7c7d83
12 changed files with 159 additions and 72 deletions
|
@ -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;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue