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>
101 lines
3.4 KiB
JavaScript
101 lines
3.4 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { VisuallyHidden } from '../visually-hidden';
|
|
import { Wrapper, StyledField, StyledLabel, StyledHelp, StyledVisualLabel } from './styles/base-control-styles';
|
|
import { contextConnectWithoutRef, useContextSystem } from '../context';
|
|
export { useBaseControlProps } from './hooks';
|
|
|
|
/**
|
|
* `BaseControl` is a component used to generate labels and help text for components handling user inputs.
|
|
*
|
|
* ```jsx
|
|
* import { BaseControl, useBaseControlProps } from '@wordpress/components';
|
|
*
|
|
* // Render a `BaseControl` for a textarea input
|
|
* const MyCustomTextareaControl = ({ children, ...baseProps }) => (
|
|
* // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
|
|
* // and the inner control itself. Namely, it takes care of generating a unique `id`,
|
|
* // properly associating it with the `label` and `help` elements.
|
|
* const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
|
|
*
|
|
* return (
|
|
* <BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
|
|
* <textarea { ...controlProps }>
|
|
* { children }
|
|
* </textarea>
|
|
* </BaseControl>
|
|
* );
|
|
* );
|
|
* ```
|
|
*/
|
|
const UnconnectedBaseControl = props => {
|
|
const {
|
|
__nextHasNoMarginBottom = false,
|
|
id,
|
|
label,
|
|
hideLabelFromVision = false,
|
|
help,
|
|
className,
|
|
children
|
|
} = useContextSystem(props, 'BaseControl');
|
|
return createElement(Wrapper, {
|
|
className: className
|
|
}, createElement(StyledField, {
|
|
className: "components-base-control__field"
|
|
// TODO: Official deprecation for this should start after all internal usages have been migrated
|
|
,
|
|
__nextHasNoMarginBottom: __nextHasNoMarginBottom
|
|
}, label && id && (hideLabelFromVision ? createElement(VisuallyHidden, {
|
|
as: "label",
|
|
htmlFor: id
|
|
}, label) : createElement(StyledLabel, {
|
|
className: "components-base-control__label",
|
|
htmlFor: id
|
|
}, label)), label && !id && (hideLabelFromVision ? createElement(VisuallyHidden, {
|
|
as: "label"
|
|
}, label) : createElement(VisualLabel, null, label)), children), !!help && createElement(StyledHelp, {
|
|
id: id ? id + '__help' : undefined,
|
|
className: "components-base-control__help",
|
|
__nextHasNoMarginBottom: __nextHasNoMarginBottom
|
|
}, help));
|
|
};
|
|
|
|
/**
|
|
* `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
|
|
*
|
|
* It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
|
|
* e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
|
|
* otherwise use if the `label` prop was passed.
|
|
*
|
|
* @example
|
|
* import { BaseControl } from '@wordpress/components';
|
|
*
|
|
* const MyBaseControl = () => (
|
|
* <BaseControl help="This button is already accessibly labeled.">
|
|
* <BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
|
|
* <Button>Select an author</Button>
|
|
* </BaseControl>
|
|
* );
|
|
*/
|
|
export const VisualLabel = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}) => {
|
|
return createElement(StyledVisualLabel, {
|
|
...props,
|
|
className: classnames('components-base-control__label', className)
|
|
}, children);
|
|
};
|
|
export const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseControl, 'BaseControl'), {
|
|
VisualLabel
|
|
});
|
|
export default BaseControl;
|
|
//# sourceMappingURL=index.js.map
|