@kiwicom/orbit-components/es/Table/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use client";

import * as React from "react";
import cx from "clsx";
import { TYPE_OPTIONS } from "./consts";
const Table = ({
  children,
  striped = true,
  compact = false,
  dataTest,
  id,
  type = TYPE_OPTIONS.PRIMARY
}) => {
  const [shadows, setShadows] = React.useState(false);
  const [right, setRight] = React.useState(false);
  const [left, setLeft] = React.useState(false);
  const outer = React.useRef(null);
  const inner = React.useRef(null);
  const table = React.useRef(null);
  const handleScroll = () => {
    if (shadows && inner.current && table.current && outer.current) {
      setLeft(inner.current?.scrollLeft >= 5);
      setRight(inner.current.scrollLeft + outer.current.clientWidth < table.current.clientWidth);
    }
  };
  const handleResize = React.useCallback(() => {
    if (table.current && outer.current) {
      const showShadows = table.current.clientWidth > outer.current.clientWidth;
      setShadows(showShadows);
      setRight(showShadows);
    }
  }, []);
  React.useEffect(() => {
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [handleResize]);
  return /*#__PURE__*/React.createElement("div", {
    className: cx("relative w-full max-w-full", "before:duration-normal before:bg-table-shadow-left before:absolute before:left-0 before:top-0 before:h-full before:w-[16px] before:transition-opacity before:ease-in-out", !left && "before:opacity-0", "after:duration-normal after:bg-table-shadow-right after:absolute after:right-0 after:top-0 after:h-full after:w-[16px] after:transition-opacity after:ease-in-out", !right && "after:opacity-0", shadows ? "before:block after:block" : "before:hidden after:hidden"),
    "data-test": dataTest,
    id: id,
    ref: outer
  }, /*#__PURE__*/React.createElement("div", {
    className: cx("w-full", shadows && "overflow-x-auto"),
    onScroll: handleScroll,
    ref: inner
  }, /*#__PURE__*/React.createElement("table", {
    className: cx("w-full border-collapse border-spacing-0 whitespace-nowrap", "[&_tbody>tr]:bg-white-normal hover:[&_tbody>tr]:bg-cloud-light [&_tbody>tr]:border-b-cloud-normal [&_tbody>tr]:duration-fast [&_tbody>tr]:border-b [&_tbody>tr]:transition-colors [&_tbody>tr]:ease-in-out last:[&_tbody>tr]:border-b-0", striped === true && "type-even:[&_tbody>tr]:bg-cloud-normal", "[&_td]:px-sm [&_th]:px-sm [&_td]:leading-normal [&_th]:leading-normal", compact === true ?
    // TODO: remove 10px and 6px with new tokens
    "[&_th]:h-xl [&_td]:h-xl [&_td]:py-[6px] [&_th]:py-[6px]" : "[&_th]:h-xxl [&_td]:h-xxl [&_td]:py-[10px] [&_th]:py-[10px]", type === TYPE_OPTIONS.SECONDARY && "[&_td]:text-ink-normal [&_th]:text-ink-normal"),
    ref: table
  }, children)));
};
export default Table;
export { default as TableHead } from "./TableHead";
export { default as TableBody } from "./TableBody";
export { default as TableFooter } from "./TableFooter";
export { default as TableRow } from "./TableRow";
export { default as TableCell } from "./TableCell";