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

React dynamic tabs with full API

import Tab from './tab.factory.js';
import memomizeTabComponent from './memomizeTab.js';
var _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;
};
export { _tabPropsManager as tabPropsManager };
var _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;
};
export { _tabInnerPropsManager as tabInnerPropsManager };
var _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;
};
export { _closeIconPropsManager as closeIconPropsManager };
export var memomizeTab = memomizeTabComponent;
export default memomizeTabComponent(Tab.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);
    }
  };
}));