vcc-ui/lib/components/tab-nav/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabNav = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _block = require("../block");

var _inline = require("../inline");

var _click = require("../click");

var _arrow = require("../arrow");

var _2 = require("../../");

var _styles = _interopRequireDefault(require("./styles"));

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

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 TabNavComponent =
/*#__PURE__*/
function (_React$Component) {
  _inherits(TabNavComponent, _React$Component);

  function TabNavComponent(props) {
    var _this;

    _classCallCheck(this, TabNavComponent);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TabNavComponent).call(this, props));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});

    _this.root = _react.default.createRef();
    _this.navItemGroup = _react.default.createRef();
    _this.backButton = _react.default.createRef();
    return _this;
  }

  _createClass(TabNavComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var resizeTimer;

      this.resizeEventHandler = function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
          _this2.forceUpdate();
        }, 1);
      };

      this.forceUpdate();
      window.addEventListener("resize", this.resizeEventHandler);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("resize", this.resizeEventHandler);
    }
  }, {
    key: "getElementProperty",
    value: function getElementProperty(element, property) {
      return element && element.getBoundingClientRect ? element.getBoundingClientRect()[property] : 0;
    }
  }, {
    key: "getElementWidth",
    value: function getElementWidth(element) {
      return this.getElementProperty(element, "width");
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(_, prevState) {
      var textAlign = this.props.textAlign;
      var navItemsWidth = this.getElementWidth(this.navItemGroup.current);
      var width = this.getElementWidth(this.root.current);
      var overflow = prevState.overflow,
          useSimpleLayout = prevState.useSimpleLayout;

      if (this.isCenterAlignedWithBackButton()) {
        var backButtonWidth = this.getElementWidth(this.backButton.current);

        if (width < backButtonWidth + navItemsWidth && !useSimpleLayout) {
          this.setState(function () {
            return {
              useSimpleLayout: true,
              overflow: "scroll"
            };
          });
        } else if (width >= backButtonWidth + navItemsWidth && useSimpleLayout) {
          this.setState(function () {
            return {
              useSimpleLayout: false,
              overflow: null
            };
          });
        }
      }

      if (navItemsWidth >= width && !this.shouldShowBackButton() && textAlign === "center" && overflow !== "scroll") {
        this.setState(function () {
          return {
            overflow: "scroll"
          };
        });
      } else if (navItemsWidth < width && overflow === "scroll" && !useSimpleLayout) {
        this.setState(function () {
          return {
            overflow: null
          };
        });
      }
    }
  }, {
    key: "shouldShowBackButton",
    value: function shouldShowBackButton() {
      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          _ref$backButton = _ref.backButton,
          backButton = _ref$backButton === void 0 ? {} : _ref$backButton;

      return !!(backButton.clickHandler || backButton.href);
    }
  }, {
    key: "isCenterAlignedWithBackButton",
    value: function isCenterAlignedWithBackButton() {
      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          textAlign = _ref2.textAlign;

      return textAlign === "center" && this.shouldShowBackButton();
    }
  }, {
    key: "renderCenteredLayoutWithBackButton",
    value: function renderCenteredLayoutWithBackButton() {
      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          children = _ref3.children;

      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_block.Block, {
        extend: _styles.default.centeredLayoutLeft
      }, _react.default.createElement(_inline.Inline, {
        extend: _styles.default.centeredLayoutLeftInner
      }, this.renderBackButton())), _react.default.createElement(_block.Block, {
        extend: _styles.default.centeredLayoutCenter
      }, _react.default.createElement(_block.Block, {
        extend: _styles.default.centeredLayoutCenterInner
      }, _react.default.createElement(_inline.Inline, {
        extend: _styles.default.navItemGroupInner(true),
        innerRef: this.navItemGroup
      }, children))), _react.default.createElement(_block.Block, {
        extend: _styles.default.centeredLayoutRight
      }, _react.default.createElement(_inline.Inline, {
        extend: _styles.default.centeredLayoutRightInner
      })));
    }
  }, {
    key: "renderBackButton",
    value: function renderBackButton() {
      var _this$props = this.props,
          _this$props$backButto = _this$props.backButton,
          backButton = _this$props$backButto === void 0 ? {} : _this$props$backButto,
          showBackButtonOn = _this$props.showBackButtonOn,
          variant = _this$props.variant;
      var href = backButton.href,
          _backButton$clickHand = backButton.clickHandler,
          clickHandler = _backButton$clickHand === void 0 ? function () {} : _backButton$clickHand,
          text = backButton.text;
      var reverseOut = variant === "dark";
      return _react.default.createElement(_click.Click, {
        extend: _styles.default.backButton(reverseOut, showBackButtonOn),
        innerRef: this.backButton,
        href: href,
        onClick: clickHandler
      }, _react.default.createElement(_arrow.Arrow, {
        direction: "left",
        size: "10px",
        color: reverseOut ? _2.COLORS.white : _2.COLORS.blue
      }), _react.default.createElement(_inline.Inline, {
        extend: _styles.default.backButtonText
      }, text || ""));
    }
  }, {
    key: "renderSimpleLayout",
    value: function renderSimpleLayout() {
      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          children = _ref4.children,
          textAlign = _ref4.textAlign;

      var isScrolling = this.state.overflow === "scroll";
      var showBackButton = this.shouldShowBackButton();
      return _react.default.createElement(_react.default.Fragment, null, showBackButton && this.renderBackButton(), _react.default.createElement(_block.Block, {
        extend: _styles.default.navItemGroup(textAlign, isScrolling)
      }, _react.default.createElement(_inline.Inline, {
        extend: _styles.default.navItemGroupInner(showBackButton),
        innerRef: this.navItemGroup
      }, children)));
    }
  }, {
    key: "render",
    value: function render() {
      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          theme = _ref5.theme,
          textAlign = _ref5.textAlign,
          variant = _ref5.variant;

      var useSimpleLayout = this.state.useSimpleLayout;
      var reverseOut = variant === "dark";
      var showBackButton = this.shouldShowBackButton();
      return _react.default.createElement(_block.Block, {
        as: "nav",
        extend: _styles.default.nav(theme, reverseOut, textAlign, showBackButton),
        innerRef: this.root
      }, !this.isCenterAlignedWithBackButton() || useSimpleLayout ? this.renderSimpleLayout() : this.renderCenteredLayoutWithBackButton());
    }
  }]);

  return TabNavComponent;
}(_react.default.Component);

var propTypes = {
  /** Dark text on light background, or vice versa */
  variant: _propTypes.default.oneOf(["light", "dark"]),

  /** Text-align: left or center */
  textAlign: _propTypes.default.oneOf(["center", "left"]),

  /** Back button text, href, click handler */
  backButton: _propTypes.default.shape({
    text: _propTypes.default.string,
    href: _propTypes.default.string,
    clickHandler: _propTypes.default.func
  }),

  /** Which viewports to show the back button on */
  showBackButtonOn: _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "m", "l"]))
};
var defaultProps = {
  variant: "light",
  textAlign: "center",
  showBackButtonOn: ["s", "m", "l"]
};
TabNavComponent.propTypes = propTypes;
TabNavComponent.defaultProps = defaultProps;
TabNavComponent.displayName = "TabNav";
var TabNav = (0, _block.withTheme)(TabNavComponent);
exports.TabNav = TabNav;