@massds/mayflower-react/dist/TabContainer/tab.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _is = _interopRequireDefault(require("is"));

var _context = _interopRequireDefault(require("./context"));

var _tabBody = _interopRequireDefault(require("./tab-body"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

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

  function Tab() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
      var nextIdent = null;
      var prevIdent = null;

      _this.context.tabIds.forEach(function (ident, key) {
        if (_this.context.activeTab === ident) {
          nextIdent = key === _this.context.tabIds.size - 1 ? _this.context.tabIds.get(0) : _this.context.tabIds.get(key + 1);
          prevIdent = key === 0 ? _this.context.tabIds.get(_this.context.tabIds.size - 1) : _this.context.tabIds.get(key - 1);
        }
      });

      if (e.key === 'ArrowRight') {
        var body = document.getElementById(_this.context.tabContainerBodyId);

        if (_this.context.tabRefs[nextIdent]) {
          _this.context.setActiveTab(nextIdent);
        } else if (!body.getElementsByClassName('ma__tab-container--nested')[0] && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container') && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].nextElementSibling) {
          // If the TabContainer has a parent TabContainer, and that container has a next selectable sibling.
          if (e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container') && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].nextElementSibling) {
            var nextTab = e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].nextElementSibling.getElementsByTagName('button')[0];
            nextTab.removeAttribute('tabindex');
            nextTab.focus();
          }
        }
      }

      if (e.key === 'ArrowLeft') {
        var _body = document.getElementById(_this.context.tabContainerBodyId);

        if (_this.context.tabRefs[prevIdent]) {
          _this.context.setActiveTab(prevIdent);
        } else if (!_body.getElementsByClassName('ma__tab-container--nested')[0]) {
          // If the TabContainer has a parent TabContainer, and that container has a previous selectable sibling.
          if (e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container') && e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].previousElementSibling) {
            var prevTab = e.currentTarget.closest('div.ma__tab-container').parentElement.closest('div.ma__tab-container').getElementsByClassName('ma__tab-title--active')[0].previousElementSibling.getElementsByTagName('button')[0];
            prevTab.removeAttribute('tabindex');
            prevTab.focus();
          }
        }
      }
    });

    return _this;
  }

  var _proto = Tab.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        tabIdent = _this$props.tabIdent,
        active = _this$props.active,
        tabRef = _this$props.tabRef;
    var _this$context = this.context,
        setActiveTab = _this$context.setActiveTab,
        activeTab = _this$context.activeTab;
    var tabClasses = (0, _classnames["default"])({
      'ma__tab-title': true,
      'ma__tab-title--active': active
    });
    var buttonProps = {
      onClick: function onClick(e) {
        e.target.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'center'
        });
        e.persist();

        if (activeTab !== tabIdent) {
          setActiveTab(tabIdent);
        }

        if (_is["default"].fn(_this2.props.handleClick)) {
          _this2.props.handleClick(e, tabIdent, _this2.props.children);
        }
      },
      onKeyDown: this.handleKeyDown,
      id: tabIdent,
      'aria-selected': active,
      'aria-controls': this.context.tabContainerBodyId,
      role: 'tab',
      ref: tabRef,
      tabIndex: active ? 0 : -1
    };
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", {
      role: "presentation",
      className: tabClasses
    }, /*#__PURE__*/_react["default"].createElement("button", _extends({
      type: "button"
    }, buttonProps), this.props.title)), global.window && /*#__PURE__*/_react["default"].createElement(_tabBody["default"], {
      active: activeTab === tabIdent,
      tabContainerBodyId: this.context.tabContainerBodyId
    }, this.props.children));
  };

  return Tab;
}(_react["default"].Component);

Tab.contextType = _context["default"];
Tab.defaultProps = {
  active: false
};
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The text of the tab. */
  title: _propTypes["default"].string.isRequired,

  /** A callback function ran after the tab has been clicked. */
  handleClick: _propTypes["default"].func,

  /** Sets if the tab is the currently active tab or not. */
  active: _propTypes["default"].bool,

  /** The unique identifier set by TabContainer. */
  tabIdent: _propTypes["default"].string,

  /** Children passed to tab container (tab content) */
  children: _propTypes["default"].node,

  /** The tabs ref */
  tabRef: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].any])
} : {};
var _default = Tab;
exports["default"] = _default;
module.exports = exports.default;