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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { noop } from 'lodash';
/**
 * WordPress dependencies
 */

import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
import { isRTL } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import Button from '../../button';
import { useNavigationContext } from '../context';
import { ItemUI } from '../styles/navigation-styles';
import NavigationItemBaseContent from './base-content';
import NavigationItemBase from './base';
export default function NavigationItem(props) {
  const {
    badge,
    children,
    className,
    href,
    item,
    navigateToMenu,
    onClick = noop,
    title,
    hideIfTargetMenuEmpty,
    isText,
    ...restProps
  } = props;
  const {
    activeItem,
    setActiveMenu,
    navigationTree: {
      isMenuEmpty
    }
  } = 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 = classnames(className, {
    'is-active': item && activeItem === item
  });

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

    onClick(event);
  };

  const icon = isRTL() ? chevronLeft : chevronRight;
  const baseProps = isText ? restProps : {
    as: Button,
    href,
    onClick: onItemClick,
    ...restProps
  };
  return createElement(NavigationItemBase, _extends({}, props, {
    className: classes
  }), children || createElement(ItemUI, baseProps, createElement(NavigationItemBaseContent, {
    title: title,
    badge: badge
  }), navigateToMenu && createElement(Icon, {
    icon: icon
  })));
}
//# sourceMappingURL=index.js.map