Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 109x 109x 109x 109x 109x 109x 88x 88x 88x 88x 88x 88x 109x 7x | import {useLayoutEffect, useRef, useState} from "react";
import clsx from "clsx";
import {ChevronDown, ChevronUp} from "lucide-react";
import {useTranslation} from "react-i18next";
/**
* ExpandableText component
*
* Displays a text block limited to a maximum number of lines, with the ability to expand or collapse.
*
* @component
* @module components/ui/expandableText/ExpandableText
* @param {Object} props - Component props
* @param {string} props.value - The text content to display.
* @param {number} [props.maxLines=3] - Maximum number of visible lines when collapsed.
* @param {string} [props.className] - Additional CSS classes for styling.
* @returns {JSX.Element} An expandable text block with a toggle button.
*/
export function ExpandableText({value = "", maxLines = 3, className = ""}) {
const [expanded, setExpanded] = useState(false);
const [showButton, setShowButton] = useState(false);
const [contentHeight, setContentHeight] = useState(0);
const paragraphRef = useRef(null);
const {t} = useTranslation();
useLayoutEffect(() => {
const el = paragraphRef.current;
Iif (!el) return;
const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
const maxHeightCollapsed = maxLines * lineHeight;
setContentHeight(el.scrollHeight);
setShowButton(el.scrollHeight > maxHeightCollapsed);
}, [value, maxLines]);
return (
<div className="relative">
<div
ref={paragraphRef}
className={clsx(
"text-sm sm:text-base whitespace-pre-wrap overflow-hidden transition-all duration-500 ease-in-out relative",
className
)}
style={{
maxHeight: expanded ? `${contentHeight}px` : `${maxLines * 1.5}em`,
}}
aria-expanded={expanded}
>
{value}
{!expanded && showButton && (
<div className="absolute bottom-0 left-0 w-full h-6 bg-gradient-to-t from-white dark:from-slate-900 pointer-events-none"/>
)}
</div>
{showButton && (
<div className="mt-1 flex justify-end">
<button
type="button"
onClick={() => setExpanded(!expanded)}
className="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
>
{expanded ? (
<>
{t("showLess")} <ChevronUp className="w-4 h-4"/>
</>
) : (
<>
{t("showMore")} <ChevronDown className="w-4 h-4"/>
</>
)}
</button>
</div>
)}
</div>
);
}
|