@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.default = Navigation;

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

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

var _lodash = require("lodash");

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
 */
function Navigation({
  activeItem,
  activeMenu = _constants.ROOT_MENU,
  children,
  className,
  onActivateMenu = _lodash.noop
}) {
  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 = (menuId, slideInOrigin = 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);
    }
  }, [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: (0, _classnames.default)({
      [animateClassName]: isMounted.current && slideOrigin
    })
  }, (0, _element.createElement)(_context.NavigationContext.Provider, {
    value: context
  }, children)));
}
//# sourceMappingURL=index.js.map