@kadoui/react
Version:
Kadoui primitive components for React
22 lines (21 loc) • 1.1 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { ShowMoreContext } from "./ShowMoreContext";
export function ShowMoreRoot({ maxLines, defaultExpanded = false, style, ...p }) {
const [shouldShowMore, setShouldShowMore] = useState(false);
const [isShowMore, setIsShowMore] = useState(defaultExpanded);
const [maxHeight, setMaxHeight] = useState(0);
const contentRef = useRef(null);
useEffect(() => {
if (contentRef.current) {
const element = contentRef.current;
const lineHeight = Number.parseInt(window.getComputedStyle(element).lineHeight);
const maxHeight = lineHeight * maxLines;
const actualHeight = element.scrollHeight;
setMaxHeight(maxHeight);
setShouldShowMore(actualHeight > maxHeight);
}
}, [maxLines]);
return (_jsx(ShowMoreContext, { value: { contentRef, isShowMore, setIsShowMore, maxHeight, shouldShowMore }, children: _jsx("div", { style: { position: "relative", ...style }, ...p }) }));
}