@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.

import * as React from "react";
import styled, { css } from "styled-components";
import { StyledTableRow } from "./TableRow";
import { StyledTableCell } from "./TableCell";
import { StyledTableBody } from "./TableBody";
import TYPE_OPTIONS from "./consts";
import defaultTheme from "../defaultTheme";
const StyledTableOuter = styled.div.withConfig({
  displayName: "Table__StyledTableOuter",
  componentId: "sc-1bxd8er-0"
})(["max-width:100%;width:100%;position:relative;&::after,&::before{content:\" \";display:", ";position:absolute;width:16px;height:100%;top:0;transition:opacity ", " ease-in-out;}&::after{opacity:", ";background-image:", ";right:0;}&::before{opacity:", ";left:0;background-image:", ";}"], ({
  showShadows
}) => showShadows ? "block" : "none", ({
  theme
}) => theme.orbit.durationNormal, ({
  showRight
}) => showRight ? "1" : "0", ({
  theme
}) => theme.orbit.backgroundTableShadowRight, ({
  showLeft
}) => showLeft ? "1" : "0", ({
  theme
}) => theme.orbit.backgroundTableShadowLeft); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTableOuter.defaultProps = {
  theme: defaultTheme
};
const StyledTableInner = styled.div.withConfig({
  displayName: "Table__StyledTableInner",
  componentId: "sc-1bxd8er-1"
})(["width:100%;", ";"], ({
  showShadows
}) => showShadows && css(["overflow-x:auto;-webkit-overflow-scrolling:touch;"]));
const StyledTable = styled.table.withConfig({
  displayName: "Table__StyledTable",
  componentId: "sc-1bxd8er-2"
})(["display:table;border-collapse:collapse;border-spacing:0;width:100%;white-space:nowrap;& ", " > ", "{background-color:", ";border-bottom:1px solid ", ";transition:background-color ", " ease-in-out;", " &:last-child{border:0;}&:hover{background-color:", ";}}& ", "{height:", ";padding:", ";line-height:", ";color:", ";}"], StyledTableBody, StyledTableRow, ({
  theme
}) => theme.orbit.backgroundTable, ({
  theme
}) => theme.orbit.borderColorTable, ({
  theme
}) => theme.orbit.durationFast, ({
  striped,
  theme
}) => striped && css(["&:nth-of-type(even){background-color:", ";}"], theme.orbit.backgroundTableEven), ({
  theme
}) => theme.orbit.backgroundTableHover, StyledTableCell, ({
  compact,
  theme
}) => compact ? theme.orbit.spaceXLarge : theme.orbit.spaceXXLarge, ({
  theme,
  compact
}) => compact ? `6px ${theme.orbit.spaceSmall}` : `10px ${theme.orbit.spaceSmall}`, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  type,
  theme
}) => type === TYPE_OPTIONS.SECONDARY && theme.orbit.paletteInkLight); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTable.defaultProps = {
  theme: defaultTheme
};

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 && table && outer) {
      var _inner$current, _inner$current2, _outer$current, _table$current;

      setLeft(((_inner$current = inner.current) == null ? void 0 : _inner$current.scrollLeft) >= 5);
      setRight(((_inner$current2 = inner.current) == null ? void 0 : _inner$current2.scrollLeft) + ((_outer$current = outer.current) == null ? void 0 : _outer$current.clientWidth) <= ((_table$current = table.current) == null ? void 0 : _table$current.clientWidth));
    }
  };

  const handleResize = React.useCallback(() => {
    if (table && outer) {
      var _table$current2, _outer$current2;

      const showShadows = ((_table$current2 = table.current) == null ? void 0 : _table$current2.clientWidth) > ((_outer$current2 = outer.current) == null ? void 0 : _outer$current2.clientWidth);
      setShadows(showShadows);
      setRight(showShadows);
    }
  }, []);
  React.useEffect(() => {
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [handleResize]);
  return /*#__PURE__*/React.createElement(StyledTableOuter, {
    ref: outer,
    showShadows: shadows,
    showLeft: left,
    showRight: right,
    "data-test": dataTest,
    id: id
  }, /*#__PURE__*/React.createElement(StyledTableInner, {
    ref: inner,
    onScroll: handleScroll,
    showShadows: shadows
  }, /*#__PURE__*/React.createElement(StyledTable, {
    striped: striped,
    compact: compact,
    type: type,
    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";