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

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Tabs;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tabItem = _interopRequireDefault(require("./tab-item"));
var _tabsConstants = require("./tabs-constants");
var RadixTabs = _interopRequireWildcard(require("@radix-ui/react-tabs"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
 * For navigation between sections. Tabs will be always buttons
 *
 */

function Tabs(_ref) {
  let {
    size = 'medium',
    tabBorder = true,
    items,
    active,
    onChange,
    themeTabItem = 'color-gray color-gray-dark-on-active color-blue-on-hover',
    themeTabsContainer = '',
    id
  } = _ref;
  const small = size === _tabsConstants.SIZE_SMALL;
  const containerClasses = (0, _classnames.default)(`flex txt-nowrap unselectable ${themeTabsContainer}`);
  const itemEls = items.map((item, index) => {
    const first = index === 0;
    const layoutClasses = (0, _classnames.default)({
      ml12: !first && small && tabBorder,
      'ml24 ml36-mxl': !first && !small && tabBorder,
      'inline-block': true
    });
    return /*#__PURE__*/_react.default.createElement(RadixTabs.Trigger, {
      "aria-label": typeof item.label === 'string' ? item.label : item.id,
      className: layoutClasses,
      "data-testid": id ? `button-tab-${id}-${item.id}` : `button-tab-${item.id}`,
      value: item.id,
      key: item.id,
      disabled: item.disabled
    }, /*#__PURE__*/_react.default.createElement(_tabItem.default, _extends({
      active: active === item.id,
      size: size,
      themeTabItem: themeTabItem,
      tabBorder: tabBorder
    }, item)));
  });
  const tabContents = items.map(item => {
    return /*#__PURE__*/_react.default.createElement(RadixTabs.TabsContent, {
      value: item.id,
      key: item.id
    }, item.content);
  });
  return /*#__PURE__*/_react.default.createElement(RadixTabs.Root, {
    onValueChange: onChange,
    value: active,
    id: id
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: containerClasses,
    "data-testid": id ? `tabs-wrapper-${id}` : 'tabs-wrapper'
  }, /*#__PURE__*/_react.default.createElement(RadixTabs.List, {
    className: (0, _classnames.default)({
      'mb-neg1': tabBorder
    })
  }, itemEls)), tabContents);
}
Tabs.propTypes = {
  /**
   * The ID of the active item. Value must correspond with an `id` property
   * in the `items` array.
   */
  active: _propTypes.default.string.isRequired,
  /**
   * Each tab is an object with the following properties:
   * - `id` (required): A string ID.
   * - `label`: Text or React node. A button will be automatically created based on the label. if label is not provided the id will serve as a label
   * - `disabled`: Boolean.
   * - `content`: React node for generating the tab content.
   *    If provided, the tab content will automatically be rendered when changing tabs. Tab content does not have any styling applied by by default
   */
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    id: _propTypes.default.string.isRequired,
    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
    disabled: _propTypes.default.bool,
    content: _propTypes.default.node
  })).isRequired,
  /**
   * A callback that will be invoked when an item is clicked.
   * It will receive the ID of the clicked item and the click `event` itself as arguments.
   */
  onChange: _propTypes.default.func,
  /**
   * Three sizes: "small", "medium", or "large".
   */
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
  /**
   * If `true`, there will be a bottom border on the active tab border. 
   * The element will extend down one pixel so the underline beneath the active item overlaps the bottom border of a container.
   * You must provide your own bottom border, by setting it on a container element or in the themeTabsContainer.
   */
  tabBorder: _propTypes.default.bool,
  /** Css classes for wrapping the tabs. */
  themeTabsContainer: _propTypes.default.string,
  /** Css classes for the tab item. Active tab has the is-active class, so you can use *-on-active to
   * control the color of the active tab.
   */
  themeTabItem: _propTypes.default.string
};