@massds/mayflower-react/dist/Tabs/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/**
 * Tabs module.
 * @module @massds/mayflower-react/Tabs
 * @requires module:@massds/mayflower-assets/scss/02-molecules/tabs
 */
// eslint-disable-next-line import/no-unresolved
var Tabs = function Tabs(_ref) {
  var handleClick = _ref.handleClick,
      tabs = _ref.tabs,
      selectedTab = _ref.selectedTab;
  var isClickFunction = typeof handleClick === 'function';

  var handleAllClick = function handleAllClick(e) {
    var selTab = e.target;

    if (selTab && selTab.scrollIntoView) {
      selTab.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center'
      });
    } // invokes custom function if passed in the component


    if (isClickFunction) {
      handleClick(selTab.name);
    }
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__search--tabs"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "main-content--two"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__tabs"
  }, tabs.map(function (tab) {
    var value = tab.value,
        label = tab.label,
        ariaLabel = tab.ariaLabel,
        href = tab.href;
    var isSelected = selectedTab === value ? 'is-selected' : '';

    if (isClickFunction) {
      return /*#__PURE__*/_react["default"].createElement("button", {
        type: "button",
        key: "tab_" + value,
        className: "ma__tabs-item " + isSelected,
        name: value,
        onClick: function onClick(e) {
          return handleAllClick(e);
        },
        "aria-label": ariaLabel || value
      }, label);
    }

    return /*#__PURE__*/_react["default"].createElement("a", {
      key: "tab_" + value,
      href: href,
      className: "ma__tabs-item " + isSelected
    }, label);
  }))));
};

Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
  /** `handleClick` is a custom callback function that returns the selected tab value.
   If `handleClick` is passed in as a function, the tabs will be rendered as buttons, otherwise will be rendered anchor links.
  */
  handleClick: _propTypes["default"].func,

  /** Default tab value rendered as selected. */
  selectedTab: _propTypes["default"].string,

  /**
   {
   <br />
   `href:` is used as anchor link href for the tab if the handleClick is not passed as a function.
  <br />
  `text:` rendered for the tab
  <br />
  `arialLabel:` for the tab button if `handleClick` is passed as a function
  <br />
   }
  */
  tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    value: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string.isRequired,
    href: _propTypes["default"].string,
    ariaLabel: _propTypes["default"].string
  }))
} : {};
var _default = Tabs;
exports["default"] = _default;
module.exports = exports.default;