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>
116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { useInstanceId } from '@wordpress/compose';
|
|
import { forwardRef, useMemo } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Backdrop from './backdrop';
|
|
import Label from './label';
|
|
import { Container, Root, Prefix, Suffix, getSizeConfig } from './styles/input-control-styles';
|
|
import { ContextSystemProvider } from '../context';
|
|
import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
|
|
function useUniqueId(idProp) {
|
|
const instanceId = useInstanceId(InputBase);
|
|
const id = `input-base-control-${instanceId}`;
|
|
return idProp || id;
|
|
}
|
|
|
|
// Adapter to map props for the new ui/flex component.
|
|
function getUIFlexProps(labelPosition) {
|
|
const props = {};
|
|
switch (labelPosition) {
|
|
case 'top':
|
|
props.direction = 'column';
|
|
props.expanded = false;
|
|
props.gap = 0;
|
|
break;
|
|
case 'bottom':
|
|
props.direction = 'column-reverse';
|
|
props.expanded = false;
|
|
props.gap = 0;
|
|
break;
|
|
case 'edge':
|
|
props.justify = 'space-between';
|
|
break;
|
|
}
|
|
return props;
|
|
}
|
|
export function InputBase(props, ref) {
|
|
const {
|
|
__next40pxDefaultSize,
|
|
__unstableInputWidth,
|
|
children,
|
|
className,
|
|
disabled = false,
|
|
hideLabelFromVision = false,
|
|
labelPosition,
|
|
id: idProp,
|
|
isFocused = false,
|
|
label,
|
|
prefix,
|
|
size = 'default',
|
|
suffix,
|
|
...restProps
|
|
} = useDeprecated36pxDefaultSizeProp(props, 'wp.components.InputBase', '6.4');
|
|
const id = useUniqueId(idProp);
|
|
const hideLabel = hideLabelFromVision || !label;
|
|
const {
|
|
paddingLeft,
|
|
paddingRight
|
|
} = getSizeConfig({
|
|
inputSize: size,
|
|
__next40pxDefaultSize
|
|
});
|
|
const prefixSuffixContextValue = useMemo(() => {
|
|
return {
|
|
InputControlPrefixWrapper: {
|
|
paddingLeft
|
|
},
|
|
InputControlSuffixWrapper: {
|
|
paddingRight
|
|
}
|
|
};
|
|
}, [paddingLeft, paddingRight]);
|
|
return (
|
|
// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
|
|
createElement(Root, {
|
|
...restProps,
|
|
...getUIFlexProps(labelPosition),
|
|
className: className,
|
|
gap: 2,
|
|
isFocused: isFocused,
|
|
labelPosition: labelPosition,
|
|
ref: ref
|
|
}, createElement(Label, {
|
|
className: "components-input-control__label",
|
|
hideLabelFromVision: hideLabelFromVision,
|
|
labelPosition: labelPosition,
|
|
htmlFor: id
|
|
}, label), createElement(Container, {
|
|
__unstableInputWidth: __unstableInputWidth,
|
|
className: "components-input-control__container",
|
|
disabled: disabled,
|
|
hideLabel: hideLabel,
|
|
labelPosition: labelPosition
|
|
}, createElement(ContextSystemProvider, {
|
|
value: prefixSuffixContextValue
|
|
}, prefix && createElement(Prefix, {
|
|
className: "components-input-control__prefix"
|
|
}, prefix), children, suffix && createElement(Suffix, {
|
|
className: "components-input-control__suffix"
|
|
}, suffix)), createElement(Backdrop, {
|
|
disabled: disabled,
|
|
isFocused: isFocused
|
|
})))
|
|
);
|
|
}
|
|
export default forwardRef(InputBase);
|
|
//# sourceMappingURL=input-base.js.map
|