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 = exports.LineTransitionContext = void 0;

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

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

var _reactFela = require("react-fela");

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

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

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

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

var _tabNavItem = require("../tab-nav-item");

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

var _activeLineWithTransition = _interopRequireDefault(require("./active-line-with-transition"));

var _getThemeStyle = require("../../get-theme-style");

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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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 _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 LineTransitionContext = (0, _react.createContext)({});
exports.LineTransitionContext = LineTransitionContext;

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(_this), "state", {});

    _defineProperty(_assertThisInitialized(_this), "getActiveIndex", function () {
      var children = _this.props.children;
      return children.length ? children.filter(Boolean).findIndex(function (child) {
        var props = child.props;
        var nestLimit = 5;

        while (!("isActive" in props) && nestLimit > 0 && props.children && props.children.props) {
          props = props.children.props;
          nestLimit -= 1;
        }

        return props.isActive;
      }) : 0;
    });

    _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() {
      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({
          showBackButton: true
        }),
        innerRef: this.navItemGroup
      }, this.renderChildren()))), _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,
          theme = _this$props.theme,
          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";
      var styleProps = {
        theme: theme,
        reverseOut: reverseOut,
        showBackButtonOn: showBackButtonOn
      };
      return _react.default.createElement(_click.Click, {
        extend: [_styles.default.backButton(styleProps), (0, _getThemeStyle.getThemeStyle)("tabNavBackButton", theme, styleProps)],
        innerRef: this.backButton,
        href: href,
        onClick: clickHandler
      }, _react.default.createElement(_arrow.Arrow, {
        direction: "left",
        size: 10,
        color: reverseOut ? theme.colors.white : theme.colors.primary
      }), _react.default.createElement(_inline.Inline, {
        extend: _styles.default.backButtonText({
          theme: theme
        })
      }, text || ""));
    }
  }, {
    key: "renderSimpleLayout",
    value: function renderSimpleLayout() {
      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          textAlign = _ref3.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: textAlign,
          isScrolling: isScrolling
        })
      }, _react.default.createElement(_inline.Inline, {
        extend: _styles.default.navItemGroupInner({
          showBackButton: showBackButton
        }),
        innerRef: this.navItemGroup
      }, this.renderChildren())));
    }
  }, {
    key: "renderChildren",
    value: function renderChildren() {
      var _this3 = this;

      var _this$props2 = this.props,
          children = _this$props2.children,
          enableLineTransition = _this$props2.enableLineTransition;

      if (enableLineTransition) {
        var itemsDimensions = this.state.itemsDimensions;

        var updateDimensions = function updateDimensions(index, newDimensions) {
          if (!itemsDimensions) {
            itemsDimensions = children.map(function () {
              return {
                x: 0,
                width: 0
              };
            });
          }

          if (itemsDimensions[index] === newDimensions) {
            return;
          }

          var newItemsDimensions = itemsDimensions;
          newItemsDimensions[index] = newDimensions;

          _this3.setState({
            itemsDimensions: newItemsDimensions
          });
        };

        var activeIndex = this.getActiveIndex();
        return _react.default.createElement(LineTransitionContext.Provider, {
          value: {
            activeIndex: activeIndex,
            itemsDimensions: itemsDimensions,
            updateDimensions: updateDimensions
          }
        }, _react.Children.map(children, function (child, index) {
          return child.type === _tabNavItem.TabNavItem ? (0, _react.cloneElement)(child, {
            index: index
          }) : (0, _react.cloneElement)(child);
        }), _react.default.createElement(_activeLineWithTransition.default, null));
      }

      return children;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          theme = _this$props3.theme,
          textAlign = _this$props3.textAlign,
          variant = _this$props3.variant;
      var useSimpleLayout = this.state.useSimpleLayout;
      var reverseOut = variant === "dark";
      var showBackButton = this.shouldShowBackButton();
      var styleProps = {
        showBackButton: showBackButton,
        textAlign: textAlign,
        reverseOut: reverseOut,
        theme: theme
      };
      return _react.default.createElement(_block.Block, {
        as: "nav",
        extend: [_styles.default.nav(styleProps), (0, _getThemeStyle.getThemeStyle)("tabNav", theme, styleProps)],
        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"])),

  /** Enable fancy transition when changing active tabs */
  enableLineTransition: _propTypes.default.bool
};
var defaultProps = {
  variant: "light",
  textAlign: "center",
  showBackButtonOn: ["s", "m", "l"]
};
TabNavComponent.propTypes = propTypes;
TabNavComponent.defaultProps = defaultProps;
TabNavComponent.displayName = "TabNav";
var TabNav = (0, _reactFela.withTheme)(TabNavComponent);
exports.TabNav = TabNav;