@kiwicom/orbit-components/lib/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 strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.TableRow = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("./consts");
var _TableHead = _interopRequireDefault(require("./TableHead"));
exports.TableHead = _TableHead.default;
var _TableBody = _interopRequireDefault(require("./TableBody"));
exports.TableBody = _TableBody.default;
var _TableFooter = _interopRequireDefault(require("./TableFooter"));
exports.TableFooter = _TableFooter.default;
var _TableRow = _interopRequireDefault(require("./TableRow"));
exports.TableRow = _TableRow.default;
var _TableCell = _interopRequireDefault(require("./TableCell"));
exports.TableCell = _TableCell.default;
const Table = ({
  children,
  striped = true,
  compact = false,
  dataTest,
  id,
  type = _consts.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: (0, _clsx.default)("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: (0, _clsx.default)("w-full", shadows && "overflow-x-auto"),
    onScroll: handleScroll,
    ref: inner
  }, /*#__PURE__*/React.createElement("table", {
    className: (0, _clsx.default)("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 === _consts.TYPE_OPTIONS.SECONDARY && "[&_td]:text-ink-normal [&_th]:text-ink-normal"),
    ref: table
  }, children)));
};
var _default = Table;
exports.default = _default;