frontend/src/components/TextPopover.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { FunctionComponent, ReactElement } from "react";
import { Tooltip, TooltipProps } from "@mantine/core";
import { useHover } from "@mantine/hooks";
import { isNull, isUndefined } from "lodash";

interface TextPopoverProps {
  children: ReactElement;
  text: string | undefined | null;
  tooltip?: Omit<TooltipProps, "opened" | "label" | "children">;
}

const TextPopover: FunctionComponent<TextPopoverProps> = ({
  children,
  text,
  tooltip,
}) => {
  const { hovered, ref } = useHover();

  if (isNull(text) || isUndefined(text)) {
    return children;
  }

  return (
    <Tooltip
      opened={hovered}
      label={text}
      {...tooltip}
      style={{ textWrap: "wrap" }}
    >
      <div ref={ref}>{children}</div>
    </Tooltip>
  );
};

export default TextPopover;