ffr-components/es/tabs/Tab.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import classnames from 'classnames';
import React from 'react';

var Tab = function Tab(props) {
  var title = props.title,
      className = props.className,
      disabled = props.disabled,
      glyph = props.glyph,
      id = props.id,
      selected = props.selected,
      onClick = props.onClick,
      tabContentProps = props.tabContentProps,
      linkProps = props.linkProps,
      index = props.index,
      rest = _objectWithoutProperties(props, ["title", "className", "disabled", "glyph", "id", "selected", "onClick", "tabContentProps", "linkProps", "index"]);

  var tabClasses = classnames(className, 'fd-tabs__item'); // css classes used for tabs

  var linkClasses = classnames('fd-tabs__link', _defineProperty({}, "sap-icon--".concat(glyph), !!glyph));
  return React.createElement("li", _extends({}, rest, {
    className: tabClasses,
    key: id
  }), React.createElement("a", _extends({}, linkProps, {
    "aria-controls": id,
    "aria-disabled": disabled,
    "aria-selected": selected,
    className: linkClasses,
    href: !disabled ? "#".concat(id) : null,
    onClick: !disabled ? function (event) {
      props.onClick(event, index);
    } : null,
    role: "tab"
  }), title));
};

Tab.displayName = 'Tab';
Tab.defaultProps = {
  onClick: function onClick() {}
};
export default Tab;