CellTooltip.tsx

import Tippy from "@tippyjs/react/headless";
import { FC, ReactElement, ReactNode } from "react";
import styled from "styled-components";
import { Spacer } from "../../../components/Spacer";
import { Txt } from "../../../components/Txt";
import { colors } from "../../../styles";
import { ColumnDisplayType } from "../../../util/column-display-config";

const TooltipContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 4px 5px;

  background: ${colors.white};
  background-color: ${colors.lightGray4};
  border-radius: 2px;

  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
`;

const EnumValueWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 4px;
  background: ${colors.lightGray2};
  border-radius: 2px;

  box-sizing: border-box;
`;

interface EnumValueProps {
  value: string;
}
const EnumValue: FC<EnumValueProps> = ({ value }) => (
  <EnumValueWrapper>
    <Txt color={"black"}>{value}</Txt>
  </EnumValueWrapper>
);

interface TooltipTypeBase {
  type: ColumnDisplayType;
}
export interface EnumTooltipType extends TooltipTypeBase {
  type: "enum";
  text: string;
}
export interface ButtonTooltipType extends TooltipTypeBase {
  type: "button";
  text: string;
  enumeration: string;
}

export type TooltipTypes = EnumTooltipType | ButtonTooltipType;

interface CellTooltipParams {
  children: ReactElement;
  placement: NonNullable<React.ComponentProps<typeof Tippy>["placement"]>;
  offset?: { x: number; y: number };
}
type CellTooltipProps = CellTooltipParams & TooltipTypes;
export const CellTooltip: FC<CellTooltipProps> = ({
  children,
  placement,
  offset = { x: 0, y: 0 },
  ...params
}) => {
  const tippyRender = (): ReactNode => {
    switch (params.type) {
      case "enum": {
        const { text } = params;
        return (
          <TooltipContainer>
            <Txt fontSize={11} fontWeight={500} color={"black"}>
              {text}
            </Txt>
          </TooltipContainer>
        );
      }
      case "button": {
        const { text, enumeration } = params;
        return (
          <TooltipContainer>
            <Txt fontSize={11} fontWeight={500} color={"black"}>
              {text}
            </Txt>
            <Spacer width={10} />
            <EnumValue value={enumeration} />
          </TooltipContainer>
        );
      }
    }
  };

  const popperOffset: [number, number] = [offset.x, offset.y];
  if (placement.includes("right")) {
    // NOTE(gab): When using `placement=right-x`, x and y will be reversed for no apparent reason
    // Found this keepTogether prop but didnt solve the problem: https://github.com/atomiks/tippyjs/issues/420
    // so instead we manually reverse the offset here
    popperOffset.reverse();
  }
  return (
    <Tippy
      render={tippyRender}
      placement={placement}
      delay={[300, 0]}
      offset={popperOffset}
    >
      {children}
    </Tippy>
  );
};