@mapbox/mr-ui/tabs/tab-item.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TabItem;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
var _tabsConstants = require("./tabs-constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function TabItem(_ref) {
  let {
    active = false,
    disabled = false,
    themeTabItem,
    size,
    tabBorder,
    label,
    id
  } = _ref;
  const itemClassesArray = themeTabItem.split(' ');
  // disabled tab should alway be gray, so we remove all color classes for it
  const noneColorClasses = itemClassesArray.filter(c => !c.startsWith('color-') && !c.startsWith('bg-'));
  const colorClasses = itemClassesArray.filter(c => c.startsWith('color-') || c.startsWith('bg-')).join(' ');
  const itemClasses = (0, _classnames.default)(`block relative`, noneColorClasses, {
    [colorClasses]: !disabled,
    'color-gray-light cursor-default': disabled,
    'cursor-default': active,
    'is-active': active && !disabled,
    'border-b border--transparent border--gray-dark-on-active': tabBorder
  });
  label = label || (0, _capitalize.default)(id);
  const getHeight = () => {
    if (!tabBorder) {
      return undefined;
    }
    switch (size) {
      case _tabsConstants.SIZE_SMALL:
        return 36;
      case _tabsConstants.SIZE_LARGE:
        return 48;
      default:
        return 42;
    }
  };
  return /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)('block relative flex flex--center-cross', itemClasses),
    style: {
      height: getHeight()
    }
  }, label);
}