@helpscout/hsds-react/components/TabBar/TabBar.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.TabBar = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Nav = _interopRequireDefault(require("../Nav"));

var _Toolbar = _interopRequireDefault(require("../Toolbar"));

var _classnames = _interopRequireDefault(require("classnames"));

var _TabBar = require("./TabBar.css");

var _jsxRuntime = require("react/jsx-runtime");

var TabBar = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(TabBar, _React$Component);

  function TabBar() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = TabBar.prototype;

  _proto.getClassName = function getClassName() {
    var className = this.props.className;
    return (0, _classnames.default)(TabBar.className, className);
  };

  _proto.render = function render() {
    var _this$props = this.props,
        children = _this$props.children,
        innerRef = _this$props.innerRef,
        secContent = _this$props.secContent,
        align = _this$props.align,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["children", "innerRef", "secContent", "align"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBar.TabBarUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      ref: innerRef,
      align: align,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabBar.ToolbarUI, {
        placement: "top",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.default.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default, {
            children: children
          })
        }), secContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBar.SecContentUI, {
          align: align,
          children: secContent
        })]
      })
    }));
  };

  return TabBar;
}(_react.default.Component);

exports.TabBar = TabBar;
TabBar.className = 'c-TabBar';
TabBar.Item = _Nav.default.Item;

function noop() {}

TabBar.defaultProps = {
  align: 'left',
  'data-cy': 'TabBar',
  innerRef: noop
};
TabBar.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  innerRef: _propTypes.default.func,

  /** A right or left aligned placeholder that will be render inside the toolbar as the secondary content */
  secContent: _propTypes.default.any,

  /** Alignment of the toolbar contents using flexbox */
  align: _propTypes.default.oneOf(['left', 'center', 'right'])
};
var _default = TabBar;
exports.default = _default;