e8fbfb14c1
Add coexistence checks to all enqueue methods to prevent loading both React and Grid.js assets simultaneously. Changes: - ReactAdmin.php: Only enqueue React assets when ?react=1 - Init.php: Skip Grid.js when React active on admin pages - Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0 - Customer.php, Product.php, License.php: Add coexistence checks Now the toggle between Classic and React versions works correctly. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { useEffect, useRef, useState } from '@wordpress/element';
|
|
import { isRTL } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { getAnimateClassName } from '../animate';
|
|
import { ROOT_MENU } from './constants';
|
|
import { NavigationContext } from './context';
|
|
import { NavigationUI } from './styles/navigation-styles';
|
|
import { useCreateNavigationTree } from './use-create-navigation-tree';
|
|
const noop = () => {};
|
|
|
|
/**
|
|
* Render a navigation list with optional groupings and hierarchy.
|
|
*
|
|
* ```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>
|
|
* );
|
|
* ```
|
|
*/
|
|
export function Navigation({
|
|
activeItem,
|
|
activeMenu = ROOT_MENU,
|
|
children,
|
|
className,
|
|
onActivateMenu = noop
|
|
}) {
|
|
const [menu, setMenu] = useState(activeMenu);
|
|
const [slideOrigin, setSlideOrigin] = useState();
|
|
const navigationTree = useCreateNavigationTree();
|
|
const defaultSlideOrigin = 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 = useRef(false);
|
|
useEffect(() => {
|
|
if (!isMounted.current) {
|
|
isMounted.current = true;
|
|
}
|
|
}, []);
|
|
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 = classnames('components-navigation', className);
|
|
const animateClassName = getAnimateClassName({
|
|
type: 'slide-in',
|
|
origin: slideOrigin
|
|
});
|
|
return createElement(NavigationUI, {
|
|
className: classes
|
|
}, createElement("div", {
|
|
key: menu,
|
|
className: animateClassName ? classnames({
|
|
[animateClassName]: isMounted.current && slideOrigin
|
|
}) : undefined
|
|
}, createElement(NavigationContext.Provider, {
|
|
value: context
|
|
}, children)));
|
|
}
|
|
export default Navigation;
|
|
//# sourceMappingURL=index.js.map
|