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>
140 lines
3.9 KiB
JavaScript
140 lines
3.9 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { useState, useEffect, Children, useRef } from '@wordpress/element';
|
|
import deprecated from '@wordpress/deprecated';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Modal from '../modal';
|
|
import Button from '../button';
|
|
import PageControl from './page-control';
|
|
/**
|
|
* `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.
|
|
*
|
|
* ```jsx
|
|
* function MyTutorial() {
|
|
* const [ isOpen, setIsOpen ] = useState( true );
|
|
*
|
|
* if ( ! isOpen ) {
|
|
* return null;
|
|
* }
|
|
*
|
|
* return (
|
|
* <Guide
|
|
* onFinish={ () => setIsOpen( false ) }
|
|
* pages={ [
|
|
* {
|
|
* content: <p>Welcome to the ACME Store!</p>,
|
|
* },
|
|
* {
|
|
* image: <img src="https://acmestore.com/add-to-cart.png" />,
|
|
* content: (
|
|
* <p>
|
|
* Click <i>Add to Cart</i> to buy a product.
|
|
* </p>
|
|
* ),
|
|
* },
|
|
* ] }
|
|
* />
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
function Guide({
|
|
children,
|
|
className,
|
|
contentLabel,
|
|
finishButtonText = __('Finish'),
|
|
onFinish,
|
|
pages = []
|
|
}) {
|
|
const ref = useRef(null);
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
useEffect(() => {
|
|
// Place focus at the top of the guide on mount and when the page changes.
|
|
const frame = ref.current?.querySelector('.components-guide');
|
|
if (frame instanceof HTMLElement) {
|
|
frame.focus();
|
|
}
|
|
}, [currentPage]);
|
|
useEffect(() => {
|
|
if (Children.count(children)) {
|
|
deprecated('Passing children to <Guide>', {
|
|
since: '5.5',
|
|
alternative: 'the `pages` prop'
|
|
});
|
|
}
|
|
}, [children]);
|
|
if (Children.count(children)) {
|
|
var _Children$map;
|
|
pages = (_Children$map = Children.map(children, child => ({
|
|
content: child
|
|
}))) !== null && _Children$map !== void 0 ? _Children$map : [];
|
|
}
|
|
const canGoBack = currentPage > 0;
|
|
const canGoForward = currentPage < pages.length - 1;
|
|
const goBack = () => {
|
|
if (canGoBack) {
|
|
setCurrentPage(currentPage - 1);
|
|
}
|
|
};
|
|
const goForward = () => {
|
|
if (canGoForward) {
|
|
setCurrentPage(currentPage + 1);
|
|
}
|
|
};
|
|
if (pages.length === 0) {
|
|
return null;
|
|
}
|
|
return createElement(Modal, {
|
|
className: classnames('components-guide', className),
|
|
contentLabel: contentLabel,
|
|
isDismissible: pages.length > 1,
|
|
onRequestClose: onFinish,
|
|
onKeyDown: event => {
|
|
if (event.code === 'ArrowLeft') {
|
|
goBack();
|
|
// Do not scroll the modal's contents.
|
|
event.preventDefault();
|
|
} else if (event.code === 'ArrowRight') {
|
|
goForward();
|
|
// Do not scroll the modal's contents.
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
ref: ref
|
|
}, createElement("div", {
|
|
className: "components-guide__container"
|
|
}, createElement("div", {
|
|
className: "components-guide__page"
|
|
}, pages[currentPage].image, pages.length > 1 && createElement(PageControl, {
|
|
currentPage: currentPage,
|
|
numberOfPages: pages.length,
|
|
setCurrentPage: setCurrentPage
|
|
}), pages[currentPage].content), createElement("div", {
|
|
className: "components-guide__footer"
|
|
}, canGoBack && createElement(Button, {
|
|
className: "components-guide__back-button",
|
|
variant: "tertiary",
|
|
onClick: goBack
|
|
}, __('Previous')), canGoForward && createElement(Button, {
|
|
className: "components-guide__forward-button",
|
|
variant: "primary",
|
|
onClick: goForward
|
|
}, __('Next')), !canGoForward && createElement(Button, {
|
|
className: "components-guide__finish-button",
|
|
variant: "primary",
|
|
onClick: onFinish
|
|
}, finishButtonText))));
|
|
}
|
|
export default Guide;
|
|
//# sourceMappingURL=index.js.map
|