@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
50 lines (49 loc) • 1.65 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useRef, useState } from "react";
import classNames from "classnames";
import Tooltip from "../Tooltip/Tooltip.js";
import setRef from "../../utils/setRef.js";
import useResizeObserver from "../../hooks/useResizeObserver.js";
function debounce(func, timeout = 300) {
let timer;
return ()=>{
clearTimeout(timer);
timer = setTimeout(()=>{
func();
}, timeout);
};
}
/**
* Show ellipsis `...` for text overflow, with a tooltip for full text.
*/ const Ellipsis = /*#__PURE__*/ forwardRef(({ lines = 1, padded = false, children, ...props }, ref)=>{
const [hasOverflow, setHasOverflow] = useState(false);
const spanRef = useRef(null);
useResizeObserver(spanRef, debounce(()=>{
if (!spanRef.current) return;
setHasOverflow(spanRef.current.scrollHeight > spanRef.current.clientHeight);
}));
return /*#__PURE__*/ _jsx(Tooltip, {
content: children,
state: "neutral",
disabled: !hasOverflow,
children: /*#__PURE__*/ _jsx("span", {
...props,
ref: (r)=>{
setRef(ref, r);
setRef(spanRef, r);
},
className: classNames("bf-ellipsis", props.className, {
"bf-ellipsis-padded": padded,
"bf-ellipsis-line": lines === 1
}),
style: {
"--bf-ellipsis-lines": lines,
...props.style
},
children: children
})
});
});
Ellipsis.displayName = "Ellipsis";
export default Ellipsis;