@helpscout/hsds-react/components/Nav/Nav.Item.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.NavItem = 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 _Flexy = _interopRequireDefault(require("../Flexy"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

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

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

var _reactRouterDom = require("react-router-dom");

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

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

  function NavItem() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.renderContent = function () {
      var children = _this.props.children;
      var componentClassName = (0, _classnames.default)(NavItem.contentClassName);
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.ContentUI, {
        className: componentClassName,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
          gap: "xs",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default.Block, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.TitleUI, {
              size: "13",
              lineHeightReset: true,
              className: "c-NavItemTitle",
              children: children
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.GhostTitleUI, {
              size: "13",
              lineHeightReset: true,
              "aria-hidden": true,
              className: "c-NavItemTitleGhost",
              children: children
            })]
          }), _this.renderError()]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.IndicatorUI, {
          className: "c-NavItemIndicator"
        })]
      });
    };

    return _this;
  }

  var _proto = NavItem.prototype;

  _proto.getClassName = function getClassName() {
    var _this$props = this.props,
        className = _this$props.className,
        disabled = _this$props.disabled;
    return (0, _classnames.default)(NavItem.className, disabled && 'is-disabled', className);
  };

  _proto.getLinkProps = function getLinkProps() {
    var _this$props2 = this.props,
        disabled = _this$props2.disabled,
        exact = _this$props2.exact,
        isActive = _this$props2.isActive,
        location = _this$props2.location,
        strict = _this$props2.strict,
        to = _this$props2.to,
        dataBypass = _this$props2['data-bypass'];
    return {
      disabled: disabled,
      exact: exact,
      isActive: isActive,
      location: location,
      strict: strict,
      to: to,
      'data-bypass': dataBypass
    };
  };

  _proto.renderError = function renderError() {
    var error = this.props.error;
    if (!error) return;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.ErrorWrapperUI, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
        "data-cy": "NavItemErrorTooltip",
        title: error,
        appendTo: document.body,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          "data-cy": "NavItemErrorIcon",
          name: "alert",
          state: "error",
          className: "c-NavItemErrorIcon"
        })
      })
    });
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        children = _this$props3.children,
        href = _this$props3.href,
        innerRef = _this$props3.innerRef,
        to = _this$props3.to,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["children", "href", "innerRef", "to"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.ItemUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      ref: innerRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, (0, _extends2.default)({}, this.getLinkProps(), {
        activeClassName: "is-active",
        className: "c-NavItemLink",
        isActive: this.props.isActive || null,
        children: this.renderContent()
      }))
    }));
  };

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

exports.NavItem = NavItem;
NavItem.className = 'c-NavItem';
NavItem.contentClassName = 'c-NavItemContent';

function noop() {}

NavItem.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

  /** Disables the link. */
  disabled: _propTypes.default.bool,

  /** Renders an error UI and message within a [Tooltip](../../Tooltip). */
  error: _propTypes.default.string,

  /** Used to determine the active state/className. */
  exact: _propTypes.default.bool,

  /** Hyperlink location. */
  href: _propTypes.default.string,

  /** Determines the active state. */
  isActive: _propTypes.default.any,

  /** Location object from [react-router](https://github.com/ReactTraining/react-router). */
  location: _propTypes.default.any,

  /** Route location for [react-router](https://github.com/ReactTraining/react-router). */
  to: _propTypes.default.string,

  /** Route strictness for [react-router](https://github.com/ReactTraining/react-router). */
  strict: _propTypes.default.bool,
  innerRef: _propTypes.default.func,

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

  /** Data attr for bypassing external router handler. */
  'data-bypass': _propTypes.default.bool
};
NavItem.defaultProps = {
  'data-cy': 'NavItem',
  disabled: false,
  error: '',
  exact: true,
  innerRef: noop
};
var _default = NavItem;
exports.default = _default;