react-dyn-tabs/lib/cjs/tab/tab.js

React dynamic tabs with full API

"use strict";

exports.__esModule = true;
exports.tabPropsManager = exports.tabInnerPropsManager = exports.memomizeTab = exports["default"] = exports.closeIconPropsManager = void 0;
var _tabFactory = _interopRequireDefault(require("./tab.factory.js"));
var _memomizeTab = _interopRequireDefault(require("./memomizeTab.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var _tabPropsManager = exports.tabPropsManager = function tabPropsManager(ins, props) {
  var id = props.id,
    selectedTabID = props.selectedTabID;
  var isSelected = selectedTabID === id;
  var _ins$getTab = ins.getTab(id),
    disable = _ins$getTab.disable,
    title = _ins$getTab.title,
    tooltip = _ins$getTab.tooltip;
  var outputProps = {
    'tab-id': id,
    className: ins.getSetting('tabClass'),
    tabIndex: -1,
    title: tooltip || title
  };
  //check if tab is selected
  if (isSelected) {
    outputProps.tabIndex = 0;
    outputProps.className += ' ' + ins.getSetting('selectedClass');
  }
  // check if tab is disable
  if (disable) {
    outputProps.tabIndex = -1;
    outputProps.className += ' ' + ins.getSetting('disableClass');
  }
  // check if accessibility option is enable
  if (ins.getOption('accessibility')) {
    outputProps.role = 'tab';
    outputProps.id = ins.getSetting('ariaLabelledbyIdTemplate', id);
    outputProps['aria-controls'] = ins.getSetting('panelIdTemplate', id);
    outputProps['aria-label'] = tooltip || title;
    outputProps['aria-selected'] = outputProps['aria-expanded'] = isSelected;
  }
  return outputProps;
};
var _tabInnerPropsManager = exports.tabInnerPropsManager = function tabInnerPropsManager(ins, props) {
  var id = props.id,
    selectedTabID = props.selectedTabID;
  var isSelected = selectedTabID == id;
  var _ins$getTab2 = ins.getTab(id),
    iconClass = _ins$getTab2.iconClass;
  var outputProps = {
    id: id,
    isSelected: isSelected,
    api: ins.userProxy,
    tabProps: {
      'tab-id': id,
      className: ins.getSetting('titleClass'),
      tabIndex: -1,
      role: 'presentation'
    }
  };
  // check if there is a iconClass option
  if (iconClass) {
    outputProps.iconProps = {
      className: ins.getSetting('iconClass') + ' ' + iconClass,
      role: 'presentation'
    };
  }
  return outputProps;
};
var _closeIconPropsManager = exports.closeIconPropsManager = function closeIconPropsManager(ins) {
  var outputProps = {
    className: ins.getSetting('closeClass')
  };
  // check if accessibility option is enable
  if (ins.getOption('accessibility')) {
    outputProps.role = 'button';
  }
  return outputProps;
};
var memomizeTab = exports.memomizeTab = _memomizeTab["default"];
var _default = exports["default"] = (0, _memomizeTab["default"])(_tabFactory["default"].bind(undefined, function (ins) {
  return {
    tabPropsManager: function tabPropsManager(props) {
      return _tabPropsManager(ins, props);
    },
    tabInnerPropsManager: function tabInnerPropsManager(props) {
      return _tabInnerPropsManager(ins, props);
    },
    closeIconPropsManager: function closeIconPropsManager() {
      return _closeIconPropsManager(ins);
    }
  };
}));