terra-consumer-nav/lib/components/nav-items/NavItem.js

A responsive container that neatly displays logo, quicklinks, navlinks and profile.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || 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; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _NavItem = require('./NavItem.scss');

var _NavItem2 = _interopRequireDefault(_NavItem);

var _NavPropShapes = require('../../NavPropShapes');

var _NavPropShapes2 = _interopRequireDefault(_NavPropShapes);

var _NavToggler = require('../nav-toggler/NavToggler');

var _NavToggler2 = _interopRequireDefault(_NavToggler);

var _SafeHtml = require('../safe-html/SafeHtml');

var _SafeHtml2 = _interopRequireDefault(_SafeHtml);

var _SmartLink = require('../smart-link/SmartLink');

var _SmartLink2 = _interopRequireDefault(_SmartLink);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var cx = _bind2.default.bind(_NavItem2.default);

var propTypes = _extends({}, _NavPropShapes2.default, {

  /**
   * The id of the toggle component to be toggled.
   */
  toggleId: _propTypes2.default.number,

  /**
   * Function callback when the toggle component is clicked.
   */
  handleToggle: _propTypes2.default.func,

  /**
   * Whether or not the content should be toggled open or not.
   */
  isOpen: _propTypes2.default.bool,

  /**
   * Function to be applied to the generated link.
   */
  handleClick: _propTypes2.default.func,

  /**
   * Items to be displayed within the toggler.
   */
  children: _propTypes2.default.node
});

var defaultProps = {
  // eslint-disable-next-line react/default-props-match-prop-types
  isActive: false, // Optional from navItemShape
  handleToggle: function handleToggle() {}
};

var NavItem = function NavItem(_ref) {
  var url = _ref.url,
      text = _ref.text,
      icon = _ref.icon,
      target = _ref.target,
      isActive = _ref.isActive,
      badgeValue = _ref.badgeValue,
      toggleId = _ref.toggleId,
      _handleToggle = _ref.handleToggle,
      isOpen = _ref.isOpen,
      isExternal = _ref.isExternal,
      handleClick = _ref.handleClick,
      children = _ref.children,
      customProps = _objectWithoutProperties(_ref, ['url', 'text', 'icon', 'target', 'isActive', 'badgeValue', 'toggleId', 'handleToggle', 'isOpen', 'isExternal', 'handleClick', 'children']);

  var activeClass = cx('active');
  var badgeString = '' + badgeValue;

  var itemLabel = _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(_SafeHtml2.default, { text: text }),
    badgeValue !== undefined && badgeValue !== null && badgeString.trim() && _react2.default.createElement(_SafeHtml2.default, { className: cx('badge'), text: badgeString })
  );

  var itemText = _react2.default.createElement(
    'div',
    { className: cx('item') },
    icon && _react2.default.createElement(
      'div',
      { className: cx('icon') },
      icon
    ),
    _react2.default.createElement(
      'div',
      { className: cx('label') },
      itemLabel
    )
  );

  return children && children.length > 0 ? _react2.default.createElement(
    _NavToggler2.default,
    _extends({}, customProps, {
      header: itemText,
      handleToggle: function handleToggle(open) {
        return _handleToggle(toggleId, open);
      },
      isOpen: isOpen,
      className: cx('nested', customProps.className)
    }),
    children
  ) : _react2.default.createElement(
    'div',
    { className: isActive ? activeClass : '' },
    _react2.default.createElement(
      _SmartLink2.default,
      _extends({}, customProps, {
        url: url,
        target: target,
        isExternal: isExternal,
        activeClass: activeClass,
        handleClick: handleClick,
        className: cx('link', customProps.className)
      }),
      itemText
    )
  );
};

NavItem.propTypes = propTypes;
NavItem.defaultProps = defaultProps;

exports.default = NavItem;