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>
131 lines
3.9 KiB
JavaScript
131 lines
3.9 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.Navigation = Navigation;
|
|
exports.default = void 0;
|
|
var _react = require("react");
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
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");
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
|
|
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>
|
|
* );
|
|
* ```
|
|
*/
|
|
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';
|
|
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);
|
|
}
|
|
// 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, _react.createElement)(_navigationStyles.NavigationUI, {
|
|
className: classes
|
|
}, (0, _react.createElement)("div", {
|
|
key: menu,
|
|
className: animateClassName ? (0, _classnames.default)({
|
|
[animateClassName]: isMounted.current && slideOrigin
|
|
}) : undefined
|
|
}, (0, _react.createElement)(_context.NavigationContext.Provider, {
|
|
value: context
|
|
}, children)));
|
|
}
|
|
var _default = Navigation;
|
|
exports.default = _default;
|
|
//# sourceMappingURL=index.js.map
|