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

UI components for WordPress.

"use strict";

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

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

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

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

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

var _animate = require("../animate");

var _constants = require("./constants");

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

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

var _useCreateNavigationTree = require("./use-create-navigation-tree");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {};
/**
 * Render a navigation list with optional groupings and hierarchy.
 *
 * @example
 * ```jsx
 * import {
 *   __experimentalNavigation as Navigation,
 *   __experimentalNavigationGroup as NavigationGroup,
 *   __experimentalNavigationItem as NavigationItem,
 *   __experimentalNavigationMenu as NavigationMenu,
 * } from '@wordpress/components';
 *
 * const MyNavigation = () => (
 *   <Navigation>
 *     <NavigationMenu title="Home">
 *       <NavigationGroup title="Group 1">
 *         <NavigationItem item="item-1" title="Item 1" />
 *         <NavigationItem item="item-2" title="Item 2" />
 *       </NavigationGroup>
 *       <NavigationGroup title="Group 2">
 *         <NavigationItem
 *           item="item-3"
 *           navigateToMenu="category"
 *           title="Category"
 *         />
 *       </NavigationGroup>
 *     </NavigationMenu>
 *
 *     <NavigationMenu
 *       backButtonLabel="Home"
 *       menu="category"
 *       parentMenu="root"
 *       title="Category"
 *     >
 *       <NavigationItem badge="1" item="child-1" title="Child 1" />
 *       <NavigationItem item="child-2" title="Child 2" />
 *     </NavigationMenu>
 *   </Navigation>
 * );
 * ```
 */


function Navigation(_ref) {
  let {
    activeItem,
    activeMenu = _constants.ROOT_MENU,
    children,
    className,
    onActivateMenu = noop
  } = _ref;
  const [menu, setMenu] = (0, _element.useState)(activeMenu);
  const [slideOrigin, setSlideOrigin] = (0, _element.useState)();
  const navigationTree = (0, _useCreateNavigationTree.useCreateNavigationTree)();
  const defaultSlideOrigin = (0, _i18n.isRTL)() ? 'right' : 'left';

  const setActiveMenu = function (menuId) {
    let slideInOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultSlideOrigin;

    if (!navigationTree.getMenu(menuId)) {
      return;
    }

    setSlideOrigin(slideInOrigin);
    setMenu(menuId);
    onActivateMenu(menuId);
  }; // Used to prevent the sliding animation on mount


  const isMounted = (0, _element.useRef)(false);
  (0, _element.useEffect)(() => {
    if (!isMounted.current) {
      isMounted.current = true;
    }
  }, []);
  (0, _element.useEffect)(() => {
    if (activeMenu !== menu) {
      setActiveMenu(activeMenu);
    } // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
    // See https://github.com/WordPress/gutenberg/pull/41612 for context.
    // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [activeMenu]);
  const context = {
    activeItem,
    activeMenu: menu,
    setActiveMenu,
    navigationTree
  };
  const classes = (0, _classnames.default)('components-navigation', className);
  const animateClassName = (0, _animate.getAnimateClassName)({
    type: 'slide-in',
    origin: slideOrigin
  });
  return (0, _element.createElement)(_navigationStyles.NavigationUI, {
    className: classes
  }, (0, _element.createElement)("div", {
    key: menu,
    className: animateClassName ? (0, _classnames.default)({
      [animateClassName]: isMounted.current && slideOrigin
    }) : undefined
  }, (0, _element.createElement)(_context.NavigationContext.Provider, {
    value: context
  }, children)));
}

var _default = Navigation;
exports.default = _default;
//# sourceMappingURL=index.js.map