@wordpress/components
Version:
UI components for WordPress.
139 lines (133 loc) • 4.26 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Navigation = Navigation;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _element = require("@wordpress/element");
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");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
/**
* Render a navigation list with optional groupings and hierarchy.
*
* @deprecated Use `Navigator` instead.
*
* ```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({
activeItem,
activeMenu = _constants.ROOT_MENU,
children,
className,
onActivateMenu = 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';
(0, _deprecated.default)('wp.components.Navigation (and all subcomponents)', {
since: '6.8',
version: '7.1',
alternative: 'wp.components.Navigator'
});
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 isMountedRef = (0, _element.useRef)(false);
(0, _element.useEffect)(() => {
if (!isMountedRef.current) {
isMountedRef.current = true;
}
}, []);
(0, _element.useEffect)(() => {
if (activeMenu !== menu) {
setActiveMenu(activeMenu);
}
// Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
// See https://github.com/WordPress/gutenberg/pull/41612 for context.
}, [activeMenu]);
const context = {
activeItem,
activeMenu: menu,
setActiveMenu,
navigationTree
};
const classes = (0, _clsx.default)('components-navigation', className);
const animateClassName = (0, _animate.getAnimateClassName)({
type: 'slide-in',
origin: slideOrigin
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.NavigationUI, {
className: classes,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: animateClassName ? (0, _clsx.default)({
[animateClassName]: isMountedRef.current && slideOrigin
}) : undefined,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationContext.Provider, {
value: context,
children: children
})
}, menu)
});
}
var _default = exports.default = Navigation;
//# sourceMappingURL=index.js.map