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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import styled from "styled-components";
import { StyledTableRow } from "./TableRow";
import { StyledTableCell } from "./TableCell";
import { StyledTableBody } from "./TableBody";
import defaultTokens from "../defaultTokens";
const StyledTableOuter = styled.div.withConfig({
  displayName: "Table__StyledTableOuter",
  componentId: "sc-156ovmd-0"
})(["max-width:100%;position:relative;overflow:hidden;border-radius:", ";&::after,&::before{content:\" \";display:", ";position:absolute;width:16px;height:100%;top:0;transition:opacity ", " ease-in-out;}&::after{opacity:", ";background-image:linear-gradient(to right,transparent,rgba(186,199,213,0.23));right:0;}&::before{opacity:", ";left:0;background-image:linear-gradient(to left,transparent,rgba(186,199,213,0.23));}"], ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  showShadows
}) => showShadows ? "block" : "none", ({
  theme
}) => theme.orbit.durationNormal, ({
  showRight
}) => showRight ? "1" : "0", ({
  showLeft
}) => showLeft ? "1" : "0");
StyledTableOuter.defaultProps = {
  theme: defaultTokens
};
const StyledTableInner = styled.div.withConfig({
  displayName: "Table__StyledTableInner",
  componentId: "sc-156ovmd-1"
})(["width:100%;overflow-x:", ";"], ({
  showShadows
}) => showShadows ? "scroll" : "hidden");
const StyledTable = styled.table.withConfig({
  displayName: "Table__StyledTable",
  componentId: "sc-156ovmd-2"
})(["display:table;border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;white-space:nowrap;& ", " > ", "{border-bottom:1px solid ", ";&:nth-of-type(even){background-color:", ";transition:background-color ", " ease-in-out;}&:last-child{border:0;}&:hover{background-color:", ";}}& ", "{min-height:", ";padding:", ";}"], StyledTableBody, StyledTableRow, ({
  theme
}) => theme.orbit.paletteCloudNormal, ({
  theme
}) => theme.orbit.paletteCloudLight, ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.paletteCloudNormal, StyledTableCell, ({
  compact
}) => compact ? "24px" : "48px", ({
  theme,
  compact
}) => compact ? `${theme.orbit.spaceXSmall} ${theme.orbit.spaceSmall}` : `${theme.orbit.spaceSmall} ${theme.orbit.spaceMedium}`);
StyledTable.defaultProps = {
  theme: defaultTokens
};

class Table extends React.PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      showShadows: false,
      showRight: false,
      showLeft: false
    });

    _defineProperty(this, "handleResize", () => {
      const {
        table,
        outer
      } = this;

      if (table && outer) {
        var _table$current, _outer$current;

        const showShadows = ((_table$current = table.current) === null || _table$current === void 0 ? void 0 : _table$current.clientWidth) > ((_outer$current = outer.current) === null || _outer$current === void 0 ? void 0 : _outer$current.clientWidth);
        this.setState({
          showShadows,
          showRight: showShadows
        });
      }
    });

    _defineProperty(this, "handleScroll", () => {
      const {
        inner,
        table,
        outer
      } = this;
      const {
        showShadows
      } = this.state;

      if (showShadows && inner && table && outer) {
        var _inner$current, _inner$current2, _outer$current2, _table$current2;

        this.setState({
          showLeft: ((_inner$current = inner.current) === null || _inner$current === void 0 ? void 0 : _inner$current.scrollLeft) >= 5,
          showRight: ((_inner$current2 = inner.current) === null || _inner$current2 === void 0 ? void 0 : _inner$current2.scrollLeft) + ((_outer$current2 = outer.current) === null || _outer$current2 === void 0 ? void 0 : _outer$current2.clientWidth) <= ((_table$current2 = table.current) === null || _table$current2 === void 0 ? void 0 : _table$current2.clientWidth)
        });
      }
    });

    _defineProperty(this, "outer", React.createRef());

    _defineProperty(this, "inner", React.createRef());

    _defineProperty(this, "table", React.createRef());
  }

  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  render() {
    const {
      children,
      compact = false,
      dataTest
    } = this.props;
    const {
      showShadows,
      showLeft,
      showRight
    } = this.state;
    return React.createElement(StyledTableOuter, {
      ref: this.outer,
      showShadows: showShadows,
      showLeft: showLeft,
      showRight: showRight,
      "data-test": dataTest
    }, React.createElement(StyledTableInner, {
      ref: this.inner,
      onScroll: this.handleScroll,
      showShadows: showShadows
    }, React.createElement(StyledTable, {
      compact: compact,
      ref: this.table
    }, children)));
  }

}

export default Table;