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>
106 lines
3.0 KiB
JavaScript
106 lines
3.0 KiB
JavaScript
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
|