@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";

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 = exports.StyledTable = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _TableRow = _interopRequireWildcard(require("./TableRow"));
exports.StyledTableRow = _TableRow.StyledTableRow;
exports.TableRow = _TableRow.default;
var _TableCell = _interopRequireWildcard(require("./TableCell"));
exports.StyledTableCell = _TableCell.StyledTableCell;
exports.TableCell = _TableCell.default;
var _TableBody = _interopRequireWildcard(require("./TableBody"));
exports.StyledTableBody = _TableBody.StyledTableBody;
exports.TableBody = _TableBody.default;
var _TableHead = _interopRequireWildcard(require("./TableHead"));
exports.StyledTableHead = _TableHead.StyledTableHead;
exports.TableHead = _TableHead.default;
var _consts = require("./consts");
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _TableFooter = _interopRequireDefault(require("./TableFooter"));
exports.TableFooter = _TableFooter.default;
const StyledTableOuter = _styledComponents.default.div.withConfig({
  displayName: "Table__StyledTableOuter",
  componentId: "sc-1bgqd4h-0"
})(["", ""], ({
  showShadows,
  showLeft,
  showRight,
  theme
}) => (0, _styledComponents.css)(["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 ? "block" : "none", theme.orbit.durationNormal, showRight ? "1" : "0", theme.orbit.backgroundTableShadowRight, showLeft ? "1" : "0", theme.orbit.backgroundTableShadowLeft));
StyledTableOuter.defaultProps = {
  theme: _defaultTheme.default
};
const StyledTableInner = _styledComponents.default.div.withConfig({
  displayName: "Table__StyledTableInner",
  componentId: "sc-1bgqd4h-1"
})(["", ""], ({
  showShadows
}) => (0, _styledComponents.css)(["width:100%;", ";"], showShadows && (0, _styledComponents.css)(["overflow-x:auto;-webkit-overflow-scrolling:touch;"])));
const StyledTable = _styledComponents.default.table.withConfig({
  displayName: "Table__StyledTable",
  componentId: "sc-1bgqd4h-2"
})(["", ";"], ({
  theme,
  type,
  striped,
  compact
}) => (0, _styledComponents.css)(["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:", ";}"], _TableBody.StyledTableBody, _TableRow.StyledTableRow, theme.orbit.backgroundTable, theme.orbit.borderColorTable, theme.orbit.durationFast, striped && (0, _styledComponents.css)(["&:nth-of-type(even){background-color:", ";}"], theme.orbit.backgroundTableEven), theme.orbit.backgroundTableHover, _TableCell.StyledTableCell, compact ? theme.orbit.spaceXLarge : theme.orbit.spaceXXLarge, compact ? `6px ${theme.orbit.spaceSmall}` : `10px ${theme.orbit.spaceSmall}`, theme.orbit.lineHeightTextNormal, type === _consts.TYPE_OPTIONS.SECONDARY && theme.orbit.paletteInkNormal));
exports.StyledTable = StyledTable;
StyledTable.defaultProps = {
  theme: _defaultTheme.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(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)));
};
var _default = Table;
exports.default = _default;