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>
92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { useResizeObserver } from '@wordpress/compose';
|
|
import { SVG, Path } from '@wordpress/primitives';
|
|
import { useEffect } from '@wordpress/element';
|
|
import { speak } from '@wordpress/a11y';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Icon from '../icon';
|
|
const PlaceholderIllustration = createElement(SVG, {
|
|
className: "components-placeholder__illustration",
|
|
fill: "none",
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 60 60",
|
|
preserveAspectRatio: "none"
|
|
}, createElement(Path, {
|
|
vectorEffect: "non-scaling-stroke",
|
|
d: "M60 60 0 0"
|
|
}));
|
|
|
|
/**
|
|
* Renders a placeholder. Normally used by blocks to render their empty state.
|
|
*
|
|
* ```jsx
|
|
* import { Placeholder } from '@wordpress/components';
|
|
* import { more } from '@wordpress/icons';
|
|
*
|
|
* const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
|
|
* ```
|
|
*/
|
|
export function Placeholder(props) {
|
|
const {
|
|
icon,
|
|
children,
|
|
label,
|
|
instructions,
|
|
className,
|
|
notices,
|
|
preview,
|
|
isColumnLayout,
|
|
withIllustration,
|
|
...additionalProps
|
|
} = props;
|
|
const [resizeListener, {
|
|
width
|
|
}] = useResizeObserver();
|
|
|
|
// Since `useResizeObserver` will report a width of `null` until after the
|
|
// first render, avoid applying any modifier classes until width is known.
|
|
let modifierClassNames;
|
|
if (typeof width === 'number') {
|
|
modifierClassNames = {
|
|
'is-large': width >= 480,
|
|
'is-medium': width >= 160 && width < 480,
|
|
'is-small': width < 160
|
|
};
|
|
}
|
|
const classes = classnames('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
|
|
const fieldsetClasses = classnames('components-placeholder__fieldset', {
|
|
'is-column-layout': isColumnLayout
|
|
});
|
|
useEffect(() => {
|
|
if (instructions) {
|
|
speak(instructions);
|
|
}
|
|
}, [instructions]);
|
|
return createElement("div", {
|
|
...additionalProps,
|
|
className: classes
|
|
}, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && createElement("div", {
|
|
className: "components-placeholder__preview"
|
|
}, preview), createElement("div", {
|
|
className: "components-placeholder__label"
|
|
}, createElement(Icon, {
|
|
icon: icon
|
|
}), label), !!instructions && createElement("div", {
|
|
className: "components-placeholder__instructions"
|
|
}, instructions), createElement("div", {
|
|
className: fieldsetClasses
|
|
}, children));
|
|
}
|
|
export default Placeholder;
|
|
//# sourceMappingURL=index.js.map
|