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

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "TableRow", {
  enumerable: true,
  get: function get() {
    return _TableRow.default;
  }
});
Object.defineProperty(exports, "TableCell", {
  enumerable: true,
  get: function get() {
    return _TableCell.default;
  }
});
Object.defineProperty(exports, "TableBody", {
  enumerable: true,
  get: function get() {
    return _TableBody.default;
  }
});
Object.defineProperty(exports, "TableHead", {
  enumerable: true,
  get: function get() {
    return _TableHead.default;
  }
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _TableRow = _interopRequireWildcard(require("./TableRow"));

var _TableCell = _interopRequireWildcard(require("./TableCell"));

var _TableBody = _interopRequireWildcard(require("./TableBody"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _TableHead = _interopRequireDefault(require("./TableHead"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var StyledTableOuter = _styledComponents.default.div.withConfig({
  displayName: "Table__StyledTableOuter",
  componentId: "sc-156ovmd-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:", ";}"], function (_ref) {
  var showShadows = _ref.showShadows;
  return showShadows ? "block" : "none";
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.durationNormal;
}, function (_ref3) {
  var showRight = _ref3.showRight;
  return showRight ? "1" : "0";
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.backgroundTableShadowRight;
}, function (_ref5) {
  var showLeft = _ref5.showLeft;
  return showLeft ? "1" : "0";
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.backgroundTableShadowLeft;
});

StyledTableOuter.defaultProps = {
  theme: _defaultTheme.default
};

var StyledTableInner = _styledComponents.default.div.withConfig({
  displayName: "Table__StyledTableInner",
  componentId: "sc-156ovmd-1"
})(["width:100%;", ";"], function (_ref7) {
  var showShadows = _ref7.showShadows;
  return showShadows && (0, _styledComponents.css)(["overflow-x:auto;-webkit-overflow-scrolling:touch;"]);
});

var StyledTable = _styledComponents.default.table.withConfig({
  displayName: "Table__StyledTable",
  componentId: "sc-156ovmd-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;&:nth-of-type(even){background-color:", ";}&:last-child{border:0;}&:hover{background-color:", ";}}& ", "{min-height:", ";padding:", ";}"], _TableBody.StyledTableBody, _TableRow.StyledTableRow, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.backgroundTable;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.borderColorTable;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.durationFast;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.backgroundTableEven;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.backgroundTableHover;
}, _TableCell.StyledTableCell, function (_ref13) {
  var compact = _ref13.compact;
  return compact ? "24px" : "48px";
}, function (_ref14) {
  var theme = _ref14.theme,
      compact = _ref14.compact;
  return compact ? theme.orbit.paddingTableCompact : theme.orbit.paddingTable;
});

StyledTable.defaultProps = {
  theme: _defaultTheme.default
};

var Table = function Table(_ref15) {
  var children = _ref15.children,
      _ref15$compact = _ref15.compact,
      compact = _ref15$compact === void 0 ? false : _ref15$compact,
      dataTest = _ref15.dataTest;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      shadows = _React$useState2[0],
      setShadows = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      right = _React$useState4[0],
      setRight = _React$useState4[1];

  var _React$useState5 = React.useState(false),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      left = _React$useState6[0],
      setLeft = _React$useState6[1];

  var outer = React.useRef(null);
  var inner = React.useRef(null);
  var table = React.useRef(null);

  var handleScroll = function handleScroll() {
    if (shadows && inner && table && outer) {
      var _inner$current, _inner$current2, _outer$current, _table$current;

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

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

      var showShadows = ((_table$current2 = table.current) === null || _table$current2 === void 0 ? void 0 : _table$current2.clientWidth) > ((_outer$current2 = outer.current) === null || _outer$current2 === void 0 ? void 0 : _outer$current2.clientWidth);
      setShadows(showShadows);
      setRight(showShadows);
    }
  }, []);
  React.useEffect(function () {
    window.addEventListener("resize", handleResize);
    handleResize();
    return function () {
      window.removeEventListener("resize", handleResize);
    };
  }, [handleResize]);
  return React.createElement(StyledTableOuter, {
    ref: outer,
    showShadows: shadows,
    showLeft: left,
    showRight: right,
    "data-test": dataTest
  }, React.createElement(StyledTableInner, {
    ref: inner,
    onScroll: handleScroll,
    showShadows: shadows
  }, React.createElement(StyledTable, {
    compact: compact,
    ref: table
  }, children)));
};

var _default = Table;
exports.default = _default;