@wordpress/components/build/navigation/item/index.js

UI components for WordPress.

"use strict";

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

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

var _element = require("@wordpress/element");

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

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

var _lodash = require("lodash");

var _icons = require("@wordpress/icons");

var _i18n = require("@wordpress/i18n");

var _button = _interopRequireDefault(require("../../button"));

var _context = require("../context");

var _navigationStyles = require("../styles/navigation-styles");

var _baseContent = _interopRequireDefault(require("./base-content"));

var _base = _interopRequireDefault(require("./base"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function NavigationItem(props) {
  const {
    badge,
    children,
    className,
    href,
    item,
    navigateToMenu,
    onClick = _lodash.noop,
    title,
    hideIfTargetMenuEmpty,
    isText,
    ...restProps
  } = props;
  const {
    activeItem,
    setActiveMenu,
    navigationTree: {
      isMenuEmpty
    }
  } = (0, _context.useNavigationContext)(); // If hideIfTargetMenuEmpty prop is true
  // And the menu we are supposed to navigate to
  // Is marked as empty, then we skip rendering the item

  if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) {
    return null;
  }

  const classes = (0, _classnames.default)(className, {
    'is-active': item && activeItem === item
  });

  const onItemClick = event => {
    if (navigateToMenu) {
      setActiveMenu(navigateToMenu);
    }

    onClick(event);
  };

  const icon = (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight;
  const baseProps = isText ? restProps : {
    as: _button.default,
    href,
    onClick: onItemClick,
    ...restProps
  };
  return (0, _element.createElement)(_base.default, (0, _extends2.default)({}, props, {
    className: classes
  }), children || (0, _element.createElement)(_navigationStyles.ItemUI, baseProps, (0, _element.createElement)(_baseContent.default, {
    title: title,
    badge: badge
  }), navigateToMenu && (0, _element.createElement)(_icons.Icon, {
    icon: icon
  })));
}
//# sourceMappingURL=index.js.map