"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.TabsVariant = void 0;

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

var _tabsCss = _interopRequireDefault(require("../../@patternfly/patternfly/components/Tabs/tabs.css.js"));

var _reactStyles = require("@patternfly/react-styles");

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

var _reactIcons = require("@patternfly/react-icons");

var _util = require("../../helpers/util");

var _constants = require("../../helpers/constants");

var _TabContent = _interopRequireDefault(require("./TabContent"));

var _Tab = _interopRequireDefault(require("./Tab"));

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 _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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 TabsVariant = {
  div: 'div',
  nav: 'nav'
};
exports.TabsVariant = TabsVariant;
var propTypes = {
  /** content rendered inside the Tabs Component. */
  children: _propTypes["default"].node.isRequired,

  /** additional classes added to the Tabs */
  className: _propTypes["default"].string,

  /** the index of the active tab */
  activeKey: _propTypes["default"].number,

  /** handle tab selection */
  onSelect: _propTypes["default"].func,

  /** uniquely identifies the Tabs */
  id: _propTypes["default"].string,

  /** enables the filled tab list layout */
  isFilled: _propTypes["default"].bool,

  /** enables Secondary Tab styling */
  isSecondary: _propTypes["default"].bool,

  /** aria-label for the left Scroll Button */
  leftScrollAriaLabel: _propTypes["default"].string,

  /** aria-label for the right Scroll Button */
  rightScrollAriaLabel: _propTypes["default"].string,

  /** determines what tag is used around the Tabs. Use "nav" to define the Tabs inside a navigation region */
  variant: _propTypes["default"].oneOf(Object.values(TabsVariant)),

  /** provides an accessible label for the Tabs. Labels should be unique for each set of Tabs that are present on a page. When variant is set to nav, this prop should be defined to differentiate the Tabs from other navigation regions on the page. */
  'aria-label': _propTypes["default"].string
};
var defaultProps = {
  className: '',
  activeKey: 0,
  onSelect: function onSelect() {
    return undefined;
  },
  id: null,
  isFilled: false,
  isSecondary: false,
  leftScrollAriaLabel: 'Scroll left',
  rightScrollAriaLabel: 'Scroll Right',
  'aria-label': null,
  variant: TabsVariant.div
};

var Tabs =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Tabs, _React$Component);

  function Tabs() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Tabs);

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

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

    _defineProperty(_assertThisInitialized(_this), "state", {
      showLeftScrollButton: false,
      showRightScrollButton: false,
      highlightLeftScrollButton: false,
      highlightRightScrollButton: false
    });

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

    _defineProperty(_assertThisInitialized(_this), "handleScrollButtons", function () {
      if (_this.tabList.current) {
        var container = _this.tabList.current; // get first element and check if it is in view

        var showLeftScrollButton = !(0, _util.isElementInView)(container, container.firstChild, false); // get lase element and check if it is in view

        var showRightScrollButton = !(0, _util.isElementInView)(container, container.lastChild, false); // determine if selected tab is out of view and apply styles

        var selectedTab;
        var childrenArr = Array.from(container.children);
        childrenArr.forEach(function (child) {
          var className = child.className;

          if (className.search('pf-m-current') > 0) {
            selectedTab = child;
          }
        });
        var sideOutOfView = (0, _util.sideElementIsOutOfView)(container, selectedTab);

        _this.setState({
          showLeftScrollButton: showLeftScrollButton,
          showRightScrollButton: showRightScrollButton,
          highlightLeftScrollButton: (sideOutOfView === _constants.SIDE.LEFT || sideOutOfView === _constants.SIDE.BOTH) && showLeftScrollButton,
          highlightRightScrollButton: (sideOutOfView === _constants.SIDE.RIGHT || sideOutOfView === _constants.SIDE.BOTH) && showRightScrollButton
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "scrollLeft", function () {
      // find first Element that is fully in view on the left, then scroll to the element before it
      if (_this.tabList.current) {
        var container = _this.tabList.current;
        var childrenArr = Array.from(container.children);
        var firstElementInView;
        var lastElementOutOfView;
        var i;

        for (i = 0; i < childrenArr.length && !firstElementInView; i++) {
          if ((0, _util.isElementInView)(container, childrenArr[i], false)) {
            firstElementInView = childrenArr[i];
            lastElementOutOfView = childrenArr[i - 1];
          }
        }

        lastElementOutOfView && (container.scrollLeft -= lastElementOutOfView.scrollWidth);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "scrollRight", function () {
      // find last Element that is fully in view on the right, then scroll to the element after it
      if (_this.tabList.current) {
        var container = _this.tabList.current;
        var childrenArr = Array.from(container.children);
        var lastElementInView;
        var firstElementOutOfView;
        var i;

        for (i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {
          if ((0, _util.isElementInView)(container, childrenArr[i], false)) {
            lastElementInView = childrenArr[i];
            firstElementOutOfView = childrenArr[i + 1];
          }
        }

        firstElementOutOfView && (container.scrollLeft += firstElementOutOfView.scrollWidth);
      }
    });

    return _this;
  }

  _createClass(Tabs, [{
    key: "handleTabClick",
    value: function handleTabClick(event, eventKey, tabContentRef) {
      var _this2 = this;

      this.props.onSelect(event, eventKey); // process any tab content sections outside of the component

      if (tabContentRef) {
        React.Children.map(this.props.children, function (child, i) {
          child.props.tabContentRef.current.hidden = true;
        }); // most recently selected tabContent

        tabContentRef.current.hidden = false;
      } // Update scroll button state and which button to highlight


      setTimeout(function () {
        _this2.handleScrollButtons();
      }, 1);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.handleScrollButtons, false); // call the handle resize function to check if scroll buttons should be shown

      this.handleScrollButtons();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('resize', this.handleScrollButtons, false);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props = this.props,
          className = _this$props.className,
          children = _this$props.children,
          activeKey = _this$props.activeKey,
          id = _this$props.id,
          isFilled = _this$props.isFilled,
          isSecondary = _this$props.isSecondary,
          leftScrollAriaLabel = _this$props.leftScrollAriaLabel,
          rightScrollAriaLabel = _this$props.rightScrollAriaLabel,
          ariaLabel = _this$props['aria-label'],
          variant = _this$props.variant,
          props = _objectWithoutProperties(_this$props, ["className", "children", "activeKey", "id", "isFilled", "isSecondary", "leftScrollAriaLabel", "rightScrollAriaLabel", "aria-label", "variant"]);

      var _this$state = this.state,
          showLeftScrollButton = _this$state.showLeftScrollButton,
          showRightScrollButton = _this$state.showRightScrollButton,
          highlightLeftScrollButton = _this$state.highlightLeftScrollButton,
          highlightRightScrollButton = _this$state.highlightRightScrollButton;
      var uniqueId = id || (0, _util.getUniqueId)();
      var Component = variant === TabsVariant.nav ? 'nav' : 'div';
      return React.createElement(React.Fragment, null, React.createElement(Component, _extends({
        "aria-label": ariaLabel,
        className: (0, _reactStyles.css)(_tabsCss["default"].tabs, isFilled && _tabsCss["default"].modifiers.fill, isSecondary && _tabsCss["default"].modifiers.tabsSecondary, showLeftScrollButton && _tabsCss["default"].modifiers.start, showRightScrollButton && _tabsCss["default"].modifiers.end, highlightLeftScrollButton && _tabsCss["default"].modifiers.startCurrent, highlightRightScrollButton && _tabsCss["default"].modifiers.endCurrent, className)
      }, props), !isSecondary && React.createElement("button", {
        className: (0, _reactStyles.css)(_tabsCss["default"].tabsScrollButton),
        variant: "plain",
        "aria-label": leftScrollAriaLabel,
        onClick: this.scrollLeft
      }, React.createElement(_reactIcons.AngleLeftIcon, null)), React.createElement("ul", {
        className: (0, _reactStyles.css)(_tabsCss["default"].tabsList),
        ref: this.tabList,
        onScroll: this.handleScrollButtons
      }, React.Children.map(children, function (child, index) {
        return React.createElement("li", {
          key: index,
          className: (0, _reactStyles.css)(_tabsCss["default"].tabsItem, child.props.eventKey === activeKey && _tabsCss["default"].modifiers.current, className)
        }, React.createElement(_Tab["default"], _extends({
          ref: function ref(node) {
            _this3.child = node;
          },
          className: (0, _reactStyles.css)(_tabsCss["default"].tabsButton),
          onClick: function onClick(event) {
            return _this3.handleTabClick(event, child.props.eventKey, child.props.tabContentRef);
          },
          id: "pf-tab-".concat(child.props.eventKey, "-").concat(child.props.id || uniqueId),
          "aria-controls": child.props.tabContentId ? child.props.tabContentId : "pf-tab-section-".concat(child.props.eventKey, "-").concat(child.props.id || uniqueId)
        }, child.props), child.props.title));
      })), !isSecondary && React.createElement("button", {
        className: (0, _reactStyles.css)(_tabsCss["default"].tabsScrollButton),
        variant: "plain",
        "aria-label": rightScrollAriaLabel,
        onClick: this.scrollRight
      }, React.createElement(_reactIcons.AngleRightIcon, null))), React.Children.map(children, function (child, index) {
        return !child.props.children ? null : React.createElement(_TabContent["default"], {
          key: index,
          activeKey: activeKey,
          child: child,
          id: child.props.id || uniqueId
        });
      }));
    }
  }]);

  return Tabs;
}(React.Component);

_defineProperty(Tabs, "propTypes", propTypes);

_defineProperty(Tabs, "defaultProps", defaultProps);

Tabs.propTypes = propTypes;
Tabs.defaultProps = defaultProps;
var _default = Tabs;
exports["default"] = _default;