signal-desktop/ts/components/conversation/MessageBodyReadMore.tsx

89 lines
2.1 KiB
TypeScript
Raw Normal View History

2023-01-03 19:55:46 +00:00
// Copyright 2021 Signal Messenger, LLC
2021-10-20 20:46:42 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
2021-10-20 20:46:42 +00:00
import type { Props as MessageBodyPropsType } from './MessageBody';
import { MessageBody } from './MessageBody';
import { graphemeAndLinkAwareSlice } from '../../util/graphemeAndLinkAwareSlice';
import { shouldLinkifyMessage } from '../../types/LinkPreview';
2021-10-20 20:46:42 +00:00
export type Props = Pick<
MessageBodyPropsType,
| 'bodyRanges'
2021-10-20 20:46:42 +00:00
| 'direction'
| 'disableLinks'
| 'i18n'
| 'isSpoilerExpanded'
| 'onExpandSpoiler'
| 'kickOffBodyDownload'
| 'renderLocation'
| 'showConversation'
| 'text'
| 'textAttachment'
2021-10-20 20:46:42 +00:00
> & {
id: string;
displayLimit?: number;
messageExpanded: (id: string, displayLimit: number) => unknown;
2021-10-20 20:46:42 +00:00
};
const INITIAL_LENGTH = 800;
const INCREMENT_COUNT = 3000;
2021-11-29 15:42:26 +00:00
const BUFFER = 100;
2021-10-20 20:46:42 +00:00
export function doesMessageBodyOverflow(str: string): boolean {
return str.length > INITIAL_LENGTH + BUFFER;
}
2021-10-20 20:46:42 +00:00
export function MessageBodyReadMore({
bodyRanges,
direction,
disableLinks,
displayLimit,
2021-10-20 20:46:42 +00:00
i18n,
id,
isSpoilerExpanded,
kickOffBodyDownload,
messageExpanded,
onExpandSpoiler,
renderLocation,
showConversation,
2021-10-20 20:46:42 +00:00
text,
textAttachment,
2021-10-20 20:46:42 +00:00
}: Props): JSX.Element {
const maxLength = displayLimit || INITIAL_LENGTH;
2021-10-20 20:46:42 +00:00
const shouldDisableLinks = disableLinks || !shouldLinkifyMessage(text);
const { hasReadMore, text: slicedText } = graphemeAndLinkAwareSlice(
2022-04-14 17:02:12 +00:00
text,
maxLength,
BUFFER
);
2021-10-20 20:46:42 +00:00
const disableJumbomoji = bodyRanges?.length ? true : undefined;
2021-10-20 20:46:42 +00:00
const onIncreaseTextLength = hasReadMore
? () => {
messageExpanded(id, maxLength + INCREMENT_COUNT);
2021-10-20 20:46:42 +00:00
}
: undefined;
return (
<MessageBody
bodyRanges={bodyRanges}
direction={direction}
disableJumbomoji={disableJumbomoji}
disableLinks={shouldDisableLinks}
2021-10-20 20:46:42 +00:00
i18n={i18n}
isSpoilerExpanded={isSpoilerExpanded}
kickOffBodyDownload={kickOffBodyDownload}
onExpandSpoiler={onExpandSpoiler}
onIncreaseTextLength={onIncreaseTextLength}
renderLocation={renderLocation}
showConversation={showConversation}
2021-10-20 20:46:42 +00:00
text={slicedText}
textAttachment={textAttachment}
2021-10-20 20:46:42 +00:00
/>
);
}