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
|
@ -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'),
|
||||
|
|
|
@ -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 || ''}
|
||||
|
|
|
@ -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 || ''),
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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: [],
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -269,6 +269,7 @@ const getActions = createSelector(
|
|||
'showContactModal',
|
||||
'kickOffAttachmentDownload',
|
||||
'markAttachmentAsCorrupted',
|
||||
'messageExpanded',
|
||||
'showVisualAttachment',
|
||||
'downloadAttachment',
|
||||
'displayTapToViewMessage',
|
||||
|
|
|
@ -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'),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue