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>
123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
import { Platform } from 'react-native';
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { BottomSheet, PanelBody } from '@wordpress/components';
|
|
import { withPreferredColorScheme } from '@wordpress/compose';
|
|
import { menu } from '@wordpress/icons';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Button from '../button';
|
|
import Dropdown from '../dropdown';
|
|
function mergeProps(defaultProps = {}, props = {}) {
|
|
const mergedProps = {
|
|
...defaultProps,
|
|
...props
|
|
};
|
|
if (props.className && defaultProps.className) {
|
|
mergedProps.className = classnames(props.className, defaultProps.className);
|
|
}
|
|
return mergedProps;
|
|
}
|
|
|
|
/**
|
|
* Whether the argument is a function.
|
|
*
|
|
* @param {*} maybeFunc The argument to check.
|
|
* @return {boolean} True if the argument is a function, false otherwise.
|
|
*/
|
|
function isFunction(maybeFunc) {
|
|
return typeof maybeFunc === 'function';
|
|
}
|
|
function DropdownMenu({
|
|
children,
|
|
className,
|
|
controls,
|
|
icon = menu,
|
|
label,
|
|
popoverProps,
|
|
toggleProps
|
|
}) {
|
|
if (!controls?.length && !isFunction(children)) {
|
|
return null;
|
|
}
|
|
|
|
// Normalize controls to nested array of objects (sets of controls)
|
|
let controlSets;
|
|
if (controls?.length) {
|
|
controlSets = controls;
|
|
if (!Array.isArray(controlSets[0])) {
|
|
controlSets = [controlSets];
|
|
}
|
|
}
|
|
const mergedPopoverProps = mergeProps({
|
|
className: 'components-dropdown-menu__popover'
|
|
}, popoverProps);
|
|
return createElement(Dropdown, {
|
|
className: classnames('components-dropdown-menu', className),
|
|
popoverProps: mergedPopoverProps,
|
|
renderToggle: ({
|
|
isOpen,
|
|
onToggle
|
|
}) => {
|
|
const mergedToggleProps = mergeProps({
|
|
className: classnames('components-dropdown-menu__toggle', {
|
|
'is-opened': isOpen
|
|
})
|
|
}, toggleProps);
|
|
return createElement(Button, {
|
|
...mergedToggleProps,
|
|
icon: icon,
|
|
onClick: event => {
|
|
onToggle(event);
|
|
if (mergedToggleProps.onClick) {
|
|
mergedToggleProps.onClick(event);
|
|
}
|
|
},
|
|
"aria-haspopup": "true",
|
|
"aria-expanded": isOpen,
|
|
label: label
|
|
}, mergedToggleProps.children);
|
|
},
|
|
renderContent: ({
|
|
isOpen,
|
|
onClose,
|
|
...props
|
|
}) => {
|
|
return createElement(BottomSheet, {
|
|
hideHeader: true,
|
|
isVisible: isOpen,
|
|
onClose: onClose
|
|
}, isFunction(children) ? children(props) : null, createElement(PanelBody, {
|
|
title: label,
|
|
style: {
|
|
paddingLeft: 0,
|
|
paddingRight: 0
|
|
}
|
|
}, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => createElement(BottomSheet.Cell, {
|
|
key: [indexOfSet, indexOfControl].join(),
|
|
label: control.title,
|
|
onPress: () => {
|
|
onClose();
|
|
if (control.onClick) {
|
|
control.onClick();
|
|
}
|
|
},
|
|
editable: false,
|
|
icon: control.icon,
|
|
leftAlign: true,
|
|
isSelected: control.isActive,
|
|
separatorType: Platform.OS === 'android' ? 'none' : 'leftMargin'
|
|
})))));
|
|
}
|
|
});
|
|
}
|
|
export default withPreferredColorScheme(DropdownMenu);
|
|
//# sourceMappingURL=index.native.js.map
|