@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
});
exports.default = void 0;

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

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

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

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

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

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

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 _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var StyledTableOuter = _styledComponents.default.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));}"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref2) {
  var showShadows = _ref2.showShadows;
  return showShadows ? "block" : "none";
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.durationNormal;
}, function (_ref4) {
  var showRight = _ref4.showRight;
  return showRight ? "1" : "0";
}, function (_ref5) {
  var showLeft = _ref5.showLeft;
  return showLeft ? "1" : "0";
});

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

var StyledTableInner = _styledComponents.default.div.withConfig({
  displayName: "Table__StyledTableInner",
  componentId: "sc-156ovmd-1"
})(["width:100%;overflow-x:", ";"], function (_ref6) {
  var showShadows = _ref6.showShadows;
  return showShadows ? "scroll" : "hidden";
});

var StyledTable = _styledComponents.default.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:", ";}"], _TableBody.StyledTableBody, _TableRow.StyledTableRow, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.paletteCloudLight;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.durationFast;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.paletteCloudNormal;
}, _TableCell.StyledTableCell, function (_ref11) {
  var compact = _ref11.compact;
  return compact ? "24px" : "48px";
}, function (_ref12) {
  var theme = _ref12.theme,
      compact = _ref12.compact;
  return compact ? "".concat(theme.orbit.spaceXSmall, " ").concat(theme.orbit.spaceSmall) : "".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceMedium);
});

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

var Table =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Table, _React$PureComponent);

  function Table() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Table);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Table)).call.apply(_getPrototypeOf2, [this].concat(args)));

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleResize", function () {
      var _assertThisInitialize = _assertThisInitialized(_assertThisInitialized(_this)),
          table = _assertThisInitialize.table,
          outer = _assertThisInitialize.outer;

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

        var 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: showShadows,
          showRight: showShadows
        });
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleScroll", function () {
      var _assertThisInitialize2 = _assertThisInitialized(_assertThisInitialized(_this)),
          inner = _assertThisInitialize2.inner,
          table = _assertThisInitialize2.table,
          outer = _assertThisInitialize2.outer;

      var showShadows = _this.state.showShadows;

      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(_assertThisInitialized(_assertThisInitialized(_this)), "outer", React.createRef());

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inner", React.createRef());

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "table", React.createRef());

    return _this;
  }

  _createClass(Table, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener("resize", this.handleResize);
      this.handleResize();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          _this$props$compact = _this$props.compact,
          compact = _this$props$compact === void 0 ? false : _this$props$compact,
          dataTest = _this$props.dataTest;
      var _this$state = this.state,
          showShadows = _this$state.showShadows,
          showLeft = _this$state.showLeft,
          showRight = _this$state.showRight;
      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)));
    }
  }]);

  return Table;
}(React.PureComponent);

var _default = Table;
exports.default = _default;