diff --git a/ts/components/GroupDescriptionText.tsx b/ts/components/GroupDescriptionText.tsx new file mode 100644 index 00000000000..b1eff4a9492 --- /dev/null +++ b/ts/components/GroupDescriptionText.tsx @@ -0,0 +1,24 @@ +// Copyright 2021 Signal Messenger, LLC +// SPDX-License-Identifier: AGPL-3.0-only + +import React, { FunctionComponent } from 'react'; +import { RenderTextCallbackType } from '../types/Util'; +import { AddNewLines } from './conversation/AddNewLines'; +import { Emojify } from './conversation/Emojify'; +import { Linkify } from './conversation/Linkify'; + +type PropsType = { + text: string; +}; + +const renderNonLink: RenderTextCallbackType = ({ key, text }) => ( + +); + +const renderNonNewLine: RenderTextCallbackType = ({ key, text }) => ( + +); + +export const GroupDescriptionText: FunctionComponent = ({ + text, +}) => ; diff --git a/ts/components/conversation/GroupDescription.stories.tsx b/ts/components/conversation/GroupDescription.stories.tsx index f9aa74d646b..7817b88236b 100644 --- a/ts/components/conversation/GroupDescription.stories.tsx +++ b/ts/components/conversation/GroupDescription.stories.tsx @@ -30,3 +30,37 @@ story.add('Long', () => ( })} /> )); + +story.add('With newlines', () => ( + +)); + +story.add('With emoji', () => ( + +)); + +story.add('With link', () => ( + +)); + +story.add('Kitchen sink', () => ( + +)); diff --git a/ts/components/conversation/GroupDescription.tsx b/ts/components/conversation/GroupDescription.tsx index f58ce93557a..dc1b19038d8 100644 --- a/ts/components/conversation/GroupDescription.tsx +++ b/ts/components/conversation/GroupDescription.tsx @@ -1,10 +1,14 @@ // Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only -import React, { useEffect, useRef, useState } from 'react'; +import React, { useLayoutEffect, useRef, useState } from 'react'; import { Modal } from '../Modal'; import { LocalizerType } from '../../types/Util'; -import { AddNewLines } from './AddNewLines'; +import { GroupDescriptionText } from '../GroupDescriptionText'; + +// Emojification can cause the scroll height to be *slightly* larger than the client +// height, so we add a little wiggle room. +const SHOW_READ_MORE_THRESHOLD = 5; export type PropsType = { i18n: LocalizerType; @@ -21,13 +25,16 @@ export const GroupDescription = ({ const [hasReadMore, setHasReadMore] = useState(false); const [showFullDescription, setShowFullDescription] = useState(false); - useEffect(() => { + useLayoutEffect(() => { if (!textRef || !textRef.current) { return; } - setHasReadMore(textRef.current.scrollHeight > textRef.current.clientHeight); - }, [setHasReadMore, textRef]); + setHasReadMore( + textRef.current.scrollHeight - SHOW_READ_MORE_THRESHOLD > + textRef.current.clientHeight + ); + }, [setHasReadMore, text, textRef]); return ( <> @@ -38,11 +45,11 @@ export const GroupDescription = ({ onClose={() => setShowFullDescription(false)} title={title} > - + )}
- {text} +
{hasReadMore && (