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>
87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.ScrollLock = ScrollLock;
|
|
exports.default = void 0;
|
|
var _element = require("@wordpress/element");
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
|
|
/*
|
|
* Setting `overflow: hidden` on html and body elements resets body scroll in iOS.
|
|
* Save scroll top so we can restore it after locking scroll.
|
|
*
|
|
* NOTE: It would be cleaner and possibly safer to find a localized solution such
|
|
* as preventing default on certain touchmove events.
|
|
*/
|
|
let previousScrollTop = 0;
|
|
function setLocked(locked) {
|
|
const scrollingElement = document.scrollingElement || document.body;
|
|
if (locked) {
|
|
previousScrollTop = scrollingElement.scrollTop;
|
|
}
|
|
const methodName = locked ? 'add' : 'remove';
|
|
scrollingElement.classList[methodName]('lockscroll');
|
|
|
|
// Adding the class to the document element seems to be necessary in iOS.
|
|
document.documentElement.classList[methodName]('lockscroll');
|
|
if (!locked) {
|
|
scrollingElement.scrollTop = previousScrollTop;
|
|
}
|
|
}
|
|
let lockCounter = 0;
|
|
|
|
/**
|
|
* ScrollLock is a content-free React component for declaratively preventing
|
|
* scroll bleed from modal UI to the page body. This component applies a
|
|
* `lockscroll` class to the `document.documentElement` and
|
|
* `document.scrollingElement` elements to stop the body from scrolling. When it
|
|
* is present, the lock is applied.
|
|
*
|
|
* ```jsx
|
|
* import { ScrollLock, Button } from '@wordpress/components';
|
|
* import { useState } from '@wordpress/element';
|
|
*
|
|
* const MyScrollLock = () => {
|
|
* const [ isScrollLocked, setIsScrollLocked ] = useState( false );
|
|
*
|
|
* const toggleLock = () => {
|
|
* setIsScrollLocked( ( locked ) => ! locked ) );
|
|
* };
|
|
*
|
|
* return (
|
|
* <div>
|
|
* <Button variant="secondary" onClick={ toggleLock }>
|
|
* Toggle scroll lock
|
|
* </Button>
|
|
* { isScrollLocked && <ScrollLock /> }
|
|
* <p>
|
|
* Scroll locked:
|
|
* <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
|
|
* </p>
|
|
* </div>
|
|
* );
|
|
* };
|
|
* ```
|
|
*/
|
|
function ScrollLock() {
|
|
(0, _element.useEffect)(() => {
|
|
if (lockCounter === 0) {
|
|
setLocked(true);
|
|
}
|
|
++lockCounter;
|
|
return () => {
|
|
if (lockCounter === 1) {
|
|
setLocked(false);
|
|
}
|
|
--lockCounter;
|
|
};
|
|
}, []);
|
|
return null;
|
|
}
|
|
var _default = ScrollLock;
|
|
exports.default = _default;
|
|
//# sourceMappingURL=index.js.map
|