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>
91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { useEffect, useLayoutEffect, useRef, useState } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
|
|
/**
|
|
* Gets a CSS cursor value based on a drag direction.
|
|
*
|
|
* @param dragDirection The drag direction.
|
|
* @return The CSS cursor value.
|
|
*/
|
|
export function getDragCursor(dragDirection) {
|
|
let dragCursor = 'ns-resize';
|
|
switch (dragDirection) {
|
|
case 'n':
|
|
case 's':
|
|
dragCursor = 'ns-resize';
|
|
break;
|
|
case 'e':
|
|
case 'w':
|
|
dragCursor = 'ew-resize';
|
|
break;
|
|
}
|
|
return dragCursor;
|
|
}
|
|
|
|
/**
|
|
* Custom hook that renders a drag cursor when dragging.
|
|
*
|
|
* @param {boolean} isDragging The dragging state.
|
|
* @param {string} dragDirection The drag direction.
|
|
*
|
|
* @return {string} The CSS cursor value.
|
|
*/
|
|
export function useDragCursor(isDragging, dragDirection) {
|
|
const dragCursor = getDragCursor(dragDirection);
|
|
useEffect(() => {
|
|
if (isDragging) {
|
|
document.documentElement.style.cursor = dragCursor;
|
|
} else {
|
|
// @ts-expect-error
|
|
document.documentElement.style.cursor = null;
|
|
}
|
|
}, [isDragging, dragCursor]);
|
|
return dragCursor;
|
|
}
|
|
export function useDraft(props) {
|
|
const refPreviousValue = useRef(props.value);
|
|
const [draft, setDraft] = useState({});
|
|
const value = draft.value !== undefined ? draft.value : props.value;
|
|
|
|
// Determines when to discard the draft value to restore controlled status.
|
|
// To do so, it tracks the previous value and marks the draft value as stale
|
|
// after each render.
|
|
useLayoutEffect(() => {
|
|
const {
|
|
current: previousValue
|
|
} = refPreviousValue;
|
|
refPreviousValue.current = props.value;
|
|
if (draft.value !== undefined && !draft.isStale) setDraft({
|
|
...draft,
|
|
isStale: true
|
|
});else if (draft.isStale && props.value !== previousValue) setDraft({});
|
|
}, [props.value, draft]);
|
|
const onChange = (nextValue, extra) => {
|
|
// Mutates the draft value to avoid an extra effect run.
|
|
setDraft(current => Object.assign(current, {
|
|
value: nextValue,
|
|
isStale: false
|
|
}));
|
|
props.onChange(nextValue, extra);
|
|
};
|
|
const onBlur = event => {
|
|
setDraft({});
|
|
props.onBlur?.(event);
|
|
};
|
|
return {
|
|
value,
|
|
onBlur,
|
|
onChange
|
|
};
|
|
}
|
|
//# sourceMappingURL=utils.js.map
|