diff --git a/src/components/pure-status-content.tsx b/src/components/pure-status-content.tsx new file mode 100644 index 000000000..a728ecd6b --- /dev/null +++ b/src/components/pure-status-content.tsx @@ -0,0 +1,137 @@ +import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg'; +import clsx from 'clsx'; +import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react'; +import { FormattedMessage } from 'react-intl'; + +import Icon from 'soapbox/components/icon.tsx'; +import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts'; +import { isOnlyEmoji as _isOnlyEmoji } from 'soapbox/utils/only-emoji.ts'; +import { getTextDirection } from 'soapbox/utils/rtl.ts'; + +import Markup from './markup.tsx'; +import Poll from './polls/poll.tsx'; + +import type { Sizes } from 'soapbox/components/ui/text.tsx'; + +const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) + +interface IReadMoreButton { + onClick: React.MouseEventHandler; +} + +/** Button to expand a truncated status (due to too much content) */ +const ReadMoreButton: React.FC = ({ onClick }) => ( + +); + +interface IPureStatusContent { + status: EntityTypes[Entities.STATUSES]; + onClick?: () => void; + collapsable?: boolean; + translatable?: boolean; + textSize?: Sizes; +} + +/** Renders the text content of a status */ +const PureStatusContent: React.FC = ({ + status, + onClick, + collapsable = false, + translatable, + textSize = 'md', +}) => { + const [collapsed, setCollapsed] = useState(false); + + const node = useRef(null); + const isOnlyEmoji = useMemo(() => _isOnlyEmoji(status.content, status.emojis, 10), [status.content]); + + const maybeSetCollapsed = (): void => { + if (!node.current) return; + + if (collapsable && onClick && !collapsed) { + if (node.current.clientHeight > MAX_HEIGHT) { + setCollapsed(true); + } + } + }; + + useLayoutEffect(() => { + maybeSetCollapsed(); + }); + + const parsedHtml = useMemo((): string => { + return translatable && status.translation ? status.translation.content : status.content; + }, [status.content, status.translation]); + + if (status.content.length === 0) { + return null; + } + + const withSpoiler = status.spoiler_text.length > 0; + + const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative focus:outline-none'; + + const direction = getTextDirection(status.search_index); + const className = clsx(baseClassName, { + 'cursor-pointer': onClick, + 'whitespace-normal': withSpoiler, + 'max-h-[300px]': collapsed, + 'leading-normal !text-4xl': isOnlyEmoji, + }); + + if (onClick) { + const output = [ + , + ]; + + if (collapsed) { + output.push(); + } + + const hasPoll = (!!status.poll) && typeof status.poll.id === 'string'; + if (hasPoll) { + output.push(); + } + + return
{output}
; + } else { + const output = [ + , + ]; + + if (status.poll && typeof status.poll === 'string') { + output.push(); + } + + return <>{output}; + } +}; + +export default memo(PureStatusContent); diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx index 496858585..56134ea8b 100644 --- a/src/components/pure-status.tsx +++ b/src/components/pure-status.tsx @@ -9,6 +9,7 @@ import { Link, useHistory } from 'react-router-dom'; import { openModal } from 'soapbox/actions/modals.ts'; import { unfilterStatus } from 'soapbox/actions/statuses.ts'; import PureEventPreview from 'soapbox/components/pure-event-preview.tsx'; +import PureStatusContent from 'soapbox/components/pure-status-content.tsx'; import PureStatusReplyMentions from 'soapbox/components/pure-status-reply-mentions.tsx'; import PureSensitiveContentOverlay from 'soapbox/components/statuses/pure-sensitive-content-overlay.tsx'; import TranslateButton from 'soapbox/components/translate-button.tsx'; @@ -33,7 +34,6 @@ import { emojifyText } from 'soapbox/utils/emojify.tsx'; import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts'; import StatusActionBar from './status-action-bar.tsx'; -import StatusContent from './status-content.tsx'; import StatusMedia from './status-media.tsx'; import StatusInfo from './statuses/status-info.tsx'; import Tombstone from './tombstone.tsx'; @@ -468,8 +468,8 @@ const PureStatus: React.FC = (props) => { {actualStatus.event ? : ( -