@kiwicom/orbit-components/lib/Table/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var React = _interopRequireWildcard(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

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

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

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

var _defaultTokens2 = _interopRequireDefault(_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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

var StyledTableOuter = _styledComponents2.default.div.withConfig({
  displayName: "Table__StyledTableOuter"
})(["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: _defaultTokens2.default
};

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

var StyledTable = _styledComponents2.default.table.withConfig({
  displayName: "Table__StyledTable"
})(["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 ? theme.orbit.spaceXSmall + " " + theme.orbit.spaceSmall : theme.orbit.spaceSmall + " " + theme.orbit.spaceMedium;
});

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

var Table = function (_React$PureComponent) {
  _inherits(Table, _React$PureComponent);

  function Table() {
    var _ref13;

    var _temp, _this, _ret;

    _classCallCheck(this, Table);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref13 = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref13, [this].concat(args))), _this), _this.state = {
      showShadows: false,
      showRight: false,
      showLeft: false
    }, _this.handleResize = function () {
      var _this2 = _this,
          table = _this2.table,
          outer = _this2.outer;

      if (table && outer) {
        var showShadows = table.clientWidth > outer.clientWidth;
        _this.setState({ showShadows: showShadows, showRight: showShadows });
      }
    }, _this.handleScroll = function () {
      var _this3 = _this,
          inner = _this3.inner,
          table = _this3.table,
          outer = _this3.outer;
      var showShadows = _this.state.showShadows;

      if (showShadows && inner && table && outer) {
        _this.setState({
          showLeft: inner.scrollLeft >= 5,
          showRight: inner.scrollLeft + outer.clientWidth <= table.clientWidth
        });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _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 _this4 = this;

      var _props = this.props,
          children = _props.children,
          _props$compact = _props.compact,
          compact = _props$compact === undefined ? false : _props$compact,
          dataTest = _props.dataTest;
      var _state = this.state,
          showShadows = _state.showShadows,
          showLeft = _state.showLeft,
          showRight = _state.showRight;

      return React.createElement(
        StyledTableOuter,
        {
          innerRef: function innerRef(outer) {
            _this4.outer = outer;
          },
          showShadows: showShadows,
          showLeft: showLeft,
          showRight: showRight,
          "data-test": dataTest
        },
        React.createElement(
          StyledTableInner,
          {
            innerRef: function innerRef(inner) {
              _this4.inner = inner;
            },
            onScroll: this.handleScroll,
            showShadows: showShadows
          },
          React.createElement(
            StyledTable,
            {
              compact: compact,
              innerRef: function innerRef(table) {
                _this4.table = table;
              }
            },
            children
          )
        )
      );
    }
  }]);

  return Table;
}(React.PureComponent);

exports.default = Table;