fix: prevent asset conflicts between React and Grid.js versions

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>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,106 @@
import { createElement } from "react";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { useInstanceId, useRefEffect } from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';
import { Icon, check, reset } from '@wordpress/icons';
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
/**
* Checkboxes allow the user to select one or more items from a set.
*
* ```jsx
* import { CheckboxControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyCheckboxControl = () => {
* const [ isChecked, setChecked ] = useState( true );
* return (
* <CheckboxControl
* label="Is author"
* help="Is the user a author or not?"
* checked={ isChecked }
* onChange={ setChecked }
* />
* );
* };
* ```
*/
export function CheckboxControl(props) {
const {
__nextHasNoMarginBottom,
label,
className,
heading,
checked,
indeterminate,
help,
id: idProp,
onChange,
...additionalProps
} = props;
if (heading) {
deprecated('`heading` prop in `CheckboxControl`', {
alternative: 'a separate element to implement a heading',
since: '5.8'
});
}
const [showCheckedIcon, setShowCheckedIcon] = useState(false);
const [showIndeterminateIcon, setShowIndeterminateIcon] = useState(false);
// Run the following callback every time the `ref` (and the additional
// dependencies) change.
const ref = useRefEffect(node => {
if (!node) {
return;
}
// It cannot be set using an HTML attribute.
node.indeterminate = !!indeterminate;
setShowCheckedIcon(node.matches(':checked'));
setShowIndeterminateIcon(node.matches(':indeterminate'));
}, [checked, indeterminate]);
const id = useInstanceId(CheckboxControl, 'inspector-checkbox-control', idProp);
const onChangeValue = event => onChange(event.target.checked);
return createElement(BaseControl, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
label: heading,
id: id,
help: help,
className: classnames('components-checkbox-control', className)
}, createElement("span", {
className: "components-checkbox-control__input-container"
}, createElement("input", {
ref: ref,
id: id,
className: "components-checkbox-control__input",
type: "checkbox",
value: "1",
onChange: onChangeValue,
checked: checked,
"aria-describedby": !!help ? id + '__help' : undefined,
...additionalProps
}), showIndeterminateIcon ? createElement(Icon, {
icon: reset,
className: "components-checkbox-control__indeterminate",
role: "presentation"
}) : null, showCheckedIcon ? createElement(Icon, {
icon: check,
className: "components-checkbox-control__checked",
role: "presentation"
}) : null), label && createElement("label", {
className: "components-checkbox-control__label",
htmlFor: id
}, label));
}
export default CheckboxControl;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/checkbox-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type CheckboxControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * A function that receives the checked state (boolean) as input.\n\t */\n\tonChange: ( value: boolean ) => void;\n\t/**\n\t * A label for the input field, that appears at the side of the checkbox.\n\t * The prop will be rendered as content a label element. If no prop is\n\t * passed an empty label is rendered. If the prop is set to false no label\n\t * is rendered.\n\t */\n\tlabel?: string | false;\n\t/**\n\t * If checked is true the checkbox will be checked. If checked is false the\n\t * checkbox will be unchecked. If no value is passed the checkbox will be\n\t * unchecked.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * If indeterminate is true the state of the checkbox will be indeterminate.\n\t */\n\tindeterminate?: boolean;\n\t/**\n\t * @deprecated\n\t */\n\theading?: ReactNode;\n};\n"],"mappings":""}