@parkassist/pa-ui-library/dist/components/OverflowingText/index.js

INX Platform elements

import { jsx as _jsx } from "react/jsx-runtime";
import React, { useCallback, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import CustomTooltip from "../Tooltip";
import { debounce } from "lodash";
const OverflowingContainer = styled.div`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;
function OverflowingText({
  text = null,
  tooltipText = null,
  tooltipProps = {},
  textStyle = {}
}) {
  const [isOverflowing, setIsOverflowing] = useState(false);
  const ref = useRef(null);
  const setOverflowing = target => {
    setIsOverflowing(target.scrollWidth > target.clientWidth);
  };
  const callbackSetOverflowing = useCallback(entry => debounce(setOverflowing, 350)(entry), []);
  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      callbackSetOverflowing(entries[0].target);
    });
    resizeObserver.observe(ref.current);
    return () => {
      resizeObserver.disconnect();
    };
  }, [callbackSetOverflowing]);
  useEffect(() => {
    setIsOverflowing(ref.current.scrollWidth > ref.current.clientWidth);
  }, []);
  return _jsx(CustomTooltip, Object.assign({
    content: tooltipText || text,
    placement: 'top',
    disableHoverListener: !isOverflowing
  }, tooltipProps, {
    children: _jsx(OverflowingContainer, {
      style: textStyle,
      ref: ref,
      children: text
    })
  }));
}
export default OverflowingText;