@airplane/views/dist/components/table/useIsOverflow.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx, jsxs } from "react/jsx-runtime";
import { createStyles, HoverCard } from "@mantine/core";
import { useRef, useState, useLayoutEffect } from "react";
import { Label } from "../text/Text.js";
const useIsOverflow = (ref) => {
  const [isOverflow, setIsOverflow] = useState(void 0);
  useLayoutEffect(() => {
    const {
      current
    } = ref;
    const trigger = () => {
      const hasOverflow = current.scrollWidth > current.clientWidth;
      setIsOverflow(hasOverflow);
    };
    if (current) {
      trigger();
      if ("ResizeObserver" in window) {
        new ResizeObserver(trigger).observe(current);
        new ResizeObserver(trigger).observe(document.body);
      }
    }
  }, [ref]);
  return isOverflow;
};
const useStyles = createStyles(() => {
  return {
    truncate: {
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      overflow: "hidden"
    },
    wrap: {
      overflowWrap: "break-word",
      overflow: "hidden"
    }
  };
});
const OverflowText = ({
  className,
  value,
  wrap,
  weight
}) => {
  const ref = useRef(null);
  const isOverflow = useIsOverflow(ref);
  const {
    classes,
    cx
  } = useStyles();
  const target = /* @__PURE__ */ jsx(Label, { ref, size: "md", className: cx(wrap ? classes.wrap : classes.truncate, className), weight, children: value });
  return /* @__PURE__ */ jsxs(HoverCard, { position: "right-start", shadow: "sm", radius: 4, transitionDuration: 300, openDelay: 300, withinPortal: true, children: [
    /* @__PURE__ */ jsx(HoverCard.Target, { children: target }),
    isOverflow && /* @__PURE__ */ jsx(HoverCard.Dropdown, { children: /* @__PURE__ */ jsx(Label, { size: "sm", children: value }) })
  ] });
};
export {
  OverflowText,
  useIsOverflow
};
//# sourceMappingURL=useIsOverflow.js.map