react-dyn-tabs/lib/cjs/plugins/moreButtonPlugin/button/api.js

React dynamic tabs with full API

"use strict";

exports.__esModule = true;
exports["default"] = Api;
var _react = require("react");
var _excluded = ["aria-controls", "aria-expanded", "aria-selected", "id"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
var _counter = 0;
function Api(components, setOpen) {
  return new (this.helper.module(function (api) {
    this._components = components;
    this._api = api;
    this._counter = _counter++;
    this._buttonID = this._getButtonID();
    this._tablistID = this._getTabListID();
    this.TabsComponent = this._getTabsComponent();
    this._closePopper = function () {
      setOpen(false);
    }, this._togglePopper = function (open) {
      setOpen(!open);
    };
    this._onBackdropClick = this._onBackdropClick.bind(this);
    this._onSelectTab = this._onSelectTab.bind(this);
  }, {
    _getTabListID: function _getTabListID() {
      return "rc-dyn-tabs-popupcontainer_" + this._counter;
    },
    _getButtonID: function _getButtonID() {
      return "rc-dyn-tabs-more-button-" + this._counter;
    },
    btnPropsGenerator: function btnPropsGenerator(onClick, ref, isOpen) {
      var result = {
        onClick: onClick,
        ref: ref,
        className: this._api.getSetting('titleClass') + ' ' + this._api.getSetting('showMoreButtonClass'),
        title: this._api.getOption('moreButtonPlugin_buttonTooltip')
      };
      if (this._api.getOption('accessibility')) {
        result.tabIndex = 0;
        result.role = 'button';
        result['aria-haspopup'] = 'true';
        result['aria-label'] = result.title; //todo
        result.id = this._buttonID;
        result['aria-controls'] = this._tablistID;
        result['aria-expanded'] = isOpen;
      }
      return result;
    },
    _getTabsComponent: function _getTabsComponent() {
      var _this = this;
      var buttonID = this._buttonID;
      var tablistID = this._tablistID;
      var _TabsPropsManager = function TabsPropsManager(ins, props) {
        var dir = props.dir,
          isVertical = props.isVertical;
        var result = {
          className: ins.getSetting('tablistClass') + ' ' + ins.getSetting(dir + "Class")
        };
        if (isVertical) {
          result.className += ' ' + ins.getSetting('verticalClass');
        }
        if (ins.getOption('accessibility')) {
          result.role = 'menu';
          result['aria-labelledby'] = buttonID;
          result.id = tablistID;
        }
        return result;
      };
      this._components.Tabs = /*#__PURE__*/(0, _react.forwardRef)(this._components.TabsFactory.bind(undefined, function (ins) {
        return {
          Tab: _this._getTabComponent(),
          TabsPropsManager: function TabsPropsManager(props) {
            return _TabsPropsManager(ins, props);
          }
        };
      }));
      return components.Tabs;
    },
    _getTabComponent: function _getTabComponent() {
      var _this2 = this;
      return this._components.memomizeTab(this._components.TabFactory.bind(undefined, function (ins) {
        return {
          tabPropsManager: function tabPropsManager(props) {
            var originalProps = _this2._components.tabPropsManager(ins, props);
            var ariaControls = originalProps['aria-controls'],
              ariaExpanded = originalProps['aria-expanded'],
              ariaSelected = originalProps['aria-selected'],
              id = originalProps.id,
              rest = _objectWithoutPropertiesLoose(originalProps, _excluded);
            if (rest.role) {
              rest.role = 'menuitem';
            }
            return rest;
          },
          tabInnerPropsManager: function tabInnerPropsManager(props) {
            return _extends({}, _this2._components.tabInnerPropsManager(ins, props), {
              popup: true
            });
          },
          closeIconPropsManager: function closeIconPropsManager() {
            return _this2._components.closeIconPropsManager(ins);
          }
        };
      }));
    },
    onButtonClick: function onButtonClick(ev, open) {
      ev.stopPropagation();
      this._registerBackdropEvent()._togglePopper(open);
    },
    _onBackdropClick: function _onBackdropClick() {
      this._closePopper();
    },
    _onSelectTab: function _onSelectTab() {
      this._closePopper();
    },
    _registerBackdropEvent: function _registerBackdropEvent() {
      window.document.removeEventListener('click', this._onBackdropClick, {
        once: true
      });
      window.document.addEventListener('click', this._onBackdropClick, {
        once: true
      });
      return this;
    },
    _CleanBackdropEvent: function _CleanBackdropEvent() {
      window.document.removeEventListener('click', this._onBackdropClick, {
        once: true
      });
      return this;
    },
    onDestroy: function onDestroy() {
      this._CleanBackdropEvent();
      this._cleanSelectEvent();
    },
    _registerSelectEvent: function _registerSelectEvent() {
      this._api.on('onSelect', this._onSelectTab);
    },
    _cleanSelectEvent: function _cleanSelectEvent() {
      (this == null ? void 0 : this._api) && this._api.off && this._api.off('onSelect', this._onSelectTab);
    },
    onMount: function onMount() {
      this._registerSelectEvent();
    }
  }))(this);
}