diff --git a/src/components/Object/Object.jsx b/src/components/Object/Object.jsx index 5e45bac..de91261 100644 --- a/src/components/Object/Object.jsx +++ b/src/components/Object/Object.jsx @@ -1,26 +1,59 @@ import "./Object.scss"; -import { useState } from "react"; +import { useState, useEffect, useRef } from "react"; function Object(props) { const [isExpanded, setIsExpanded] = useState(false); + const [needsExpansion, setNeedsExpansion] = useState(false); + const contentRef = useRef(null); - const addressLimit = 30; - const isAddressTooLong = props.address && props.address.length > addressLimit; - const needsExpansion = isAddressTooLong; + const checkIfContentOverflows = () => { + if (contentRef.current) { + // Временно убираем класс collapsed для измерения полной высоты + const element = contentRef.current; + const hadCollapsedClass = element.classList.contains( + "item__content--collapsed" + ); - const truncateAddress = (text) => { - if (!text) return ""; - if (isExpanded) return text; - if (text.length <= addressLimit) return text; + if (hadCollapsedClass) { + element.classList.remove("item__content--collapsed"); + } - const truncated = text.substring(0, addressLimit); - const lastSpaceIndex = truncated.lastIndexOf(" "); - if (lastSpaceIndex > 0) { - return truncated.substring(0, lastSpaceIndex) + "..."; + // Измеряем полную высоту + const fullHeight = element.scrollHeight; + + // Возвращаем класс обратно + if (hadCollapsedClass) { + element.classList.add("item__content--collapsed"); + } + + // Измеряем высоту в свернутом состоянии + const collapsedHeight = element.clientHeight; + + // Проверяем, есть ли разница больше чем 20px (чтобы избежать ложных срабатываний) + const heightDifference = fullHeight - collapsedHeight; + setNeedsExpansion(heightDifference > 20); } - return truncated + "..."; }; + useEffect(() => { + // Задержка для правильного расчета после рендера + const timeoutId = setTimeout(() => { + checkIfContentOverflows(); + }, 200); + + // Проверяем при изменении размера окна + const handleResize = () => { + setTimeout(checkIfContentOverflows, 100); + }; + + window.addEventListener("resize", handleResize); + + return () => { + clearTimeout(timeoutId); + window.removeEventListener("resize", handleResize); + }; + }, [props.desc, props.address]); + const toggleExpansion = () => { setIsExpanded(!isExpanded); }; @@ -29,23 +62,31 @@ function Object(props) {
{props.price}
{props.desc}
- {truncateAddress(props.address)} + {props.address}