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>
69 lines
2.7 KiB
JavaScript
69 lines
2.7 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { forwardRef } from '@wordpress/element';
|
|
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
import { Resizable } from 're-resizable';
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import ResizeTooltip from './resize-tooltip';
|
|
const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
|
|
const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
|
|
const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
|
|
const HANDLE_CLASSES = {
|
|
top: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
|
|
right: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
|
|
bottom: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
|
|
left: classnames(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
|
|
topLeft: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
|
|
topRight: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
|
|
bottomRight: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
|
|
bottomLeft: classnames(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
|
|
};
|
|
|
|
// Removes the inline styles in the drag handles.
|
|
const HANDLE_STYLES_OVERRIDES = {
|
|
width: undefined,
|
|
height: undefined,
|
|
top: undefined,
|
|
right: undefined,
|
|
bottom: undefined,
|
|
left: undefined
|
|
};
|
|
const HANDLE_STYLES = {
|
|
top: HANDLE_STYLES_OVERRIDES,
|
|
right: HANDLE_STYLES_OVERRIDES,
|
|
bottom: HANDLE_STYLES_OVERRIDES,
|
|
left: HANDLE_STYLES_OVERRIDES,
|
|
topLeft: HANDLE_STYLES_OVERRIDES,
|
|
topRight: HANDLE_STYLES_OVERRIDES,
|
|
bottomRight: HANDLE_STYLES_OVERRIDES,
|
|
bottomLeft: HANDLE_STYLES_OVERRIDES
|
|
};
|
|
function UnforwardedResizableBox({
|
|
className,
|
|
children,
|
|
showHandle = true,
|
|
__experimentalShowTooltip: showTooltip = false,
|
|
__experimentalTooltipProps: tooltipProps = {},
|
|
...props
|
|
}, ref) {
|
|
return createElement(Resizable, {
|
|
className: classnames('components-resizable-box__container', showHandle && 'has-show-handle', className),
|
|
handleClasses: HANDLE_CLASSES,
|
|
handleStyles: HANDLE_STYLES,
|
|
ref: ref,
|
|
...props
|
|
}, children, showTooltip && createElement(ResizeTooltip, {
|
|
...tooltipProps
|
|
}));
|
|
}
|
|
export const ResizableBox = forwardRef(UnforwardedResizableBox);
|
|
export default ResizableBox;
|
|
//# sourceMappingURL=index.js.map
|