bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: partly fix problem with spoiler expand/collpase button position

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-06 01:06:25 +02:00
parent 953d580ec3
commit ffae5e9df5
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/pl-fe/src/components/status-content.tsx
View file

@ -1,6 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser'; import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
import React, { useState, useRef, useLayoutEffect, useMemo } from 'react'; import React, { useState, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -66,8 +66,10 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const [onlyEmoji, setOnlyEmoji] = useState(false); const [onlyEmoji, setOnlyEmoji] = useState(false);
const [lineClamp, setLineClamp] = useState(true);
const node = useRef<HTMLDivElement>(null); const node = useRef<HTMLDivElement>(null);
const spoilerNode = useRef<HTMLSpanElement>(null);
const maybeSetCollapsed = (): void => { const maybeSetCollapsed = (): void => {
if (!node.current) return; if (!node.current) return;
@ -169,6 +171,10 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
return parse(parsedHtml, options); return parse(parsedHtml, options);
}, [parsedHtml]); }, [parsedHtml]);
useEffect(() => {
setLineClamp(!spoilerNode.current || spoilerNode.current.clientHeight >= 96);
}, [spoilerNode.current]);
const withSpoiler = status.spoiler_text.length > 0; const withSpoiler = status.spoiler_text.length > 0;
const spoilerText = status.spoilerMapHtml && status.currentLanguage const spoilerText = status.spoilerMapHtml && status.currentLanguage
@ -191,8 +197,9 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
output.push( output.push(
<Text key='spoiler' size='2xl' weight='medium'> <Text key='spoiler' size='2xl' weight='medium'>
<span <span
className={clsx({ 'line-clamp-3': !expanded })} className={clsx({ 'line-clamp-3': !expanded && lineClamp })}
dangerouslySetInnerHTML={{ __html: spoilerText }} dangerouslySetInnerHTML={{ __html: spoilerText }}
ref={spoilerNode}
/> />
{expandable && ( {expandable && (
<Button <Button