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>
93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { cloneElement, forwardRef } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Shortcut from '../shortcut';
|
|
import Button from '../button';
|
|
import Icon from '../icon';
|
|
function UnforwardedMenuItem(props, ref) {
|
|
let {
|
|
children,
|
|
info,
|
|
className,
|
|
icon,
|
|
iconPosition = 'right',
|
|
shortcut,
|
|
isSelected,
|
|
role = 'menuitem',
|
|
suffix,
|
|
...buttonProps
|
|
} = props;
|
|
className = classnames('components-menu-item__button', className);
|
|
if (info) {
|
|
children = createElement("span", {
|
|
className: "components-menu-item__info-wrapper"
|
|
}, createElement("span", {
|
|
className: "components-menu-item__item"
|
|
}, children), createElement("span", {
|
|
className: "components-menu-item__info"
|
|
}, info));
|
|
}
|
|
if (icon && typeof icon !== 'string') {
|
|
icon = cloneElement(icon, {
|
|
className: classnames('components-menu-items__item-icon', {
|
|
'has-icon-right': iconPosition === 'right'
|
|
})
|
|
});
|
|
}
|
|
return createElement(Button, {
|
|
ref: ref
|
|
// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
|
|
,
|
|
"aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined,
|
|
role: role,
|
|
icon: iconPosition === 'left' ? icon : undefined,
|
|
className: className,
|
|
...buttonProps
|
|
}, createElement("span", {
|
|
className: "components-menu-item__item"
|
|
}, children), !suffix && createElement(Shortcut, {
|
|
className: "components-menu-item__shortcut",
|
|
shortcut: shortcut
|
|
}), !suffix && icon && iconPosition === 'right' && createElement(Icon, {
|
|
icon: icon
|
|
}), suffix);
|
|
}
|
|
|
|
/**
|
|
* MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.
|
|
*
|
|
* ```jsx
|
|
* import { MenuItem } from '@wordpress/components';
|
|
* import { useState } from '@wordpress/element';
|
|
*
|
|
* const MyMenuItem = () => {
|
|
* const [ isActive, setIsActive ] = useState( true );
|
|
*
|
|
* return (
|
|
* <MenuItem
|
|
* icon={ isActive ? 'yes' : 'no' }
|
|
* isSelected={ isActive }
|
|
* role="menuitemcheckbox"
|
|
* onClick={ () => setIsActive( ( state ) => ! state ) }
|
|
* >
|
|
* Toggle
|
|
* </MenuItem>
|
|
* );
|
|
* };
|
|
* ```
|
|
*/
|
|
export const MenuItem = forwardRef(UnforwardedMenuItem);
|
|
export default MenuItem;
|
|
//# sourceMappingURL=index.js.map
|