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>
76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import { createElement, Fragment } from "react";
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
// eslint-disable-next-line no-restricted-imports
|
|
import * as Ariakit from '@ariakit/react';
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { createContext, useContext } from '@wordpress/element';
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import * as Styled from './styles';
|
|
export const CustomSelectContext = createContext(undefined);
|
|
function defaultRenderSelectedValue(value) {
|
|
const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
|
|
if (isValueEmpty) {
|
|
return __('Select an item');
|
|
}
|
|
if (Array.isArray(value)) {
|
|
return value.length === 1 ? value[0] :
|
|
// translators: %s: number of items selected (it will always be 2 or more items)
|
|
sprintf(__('%s items selected'), value.length);
|
|
}
|
|
return value;
|
|
}
|
|
export function CustomSelect({
|
|
children,
|
|
defaultValue,
|
|
label,
|
|
onChange,
|
|
size = 'default',
|
|
value,
|
|
renderSelectedValue,
|
|
...props
|
|
}) {
|
|
const store = Ariakit.useSelectStore({
|
|
setValue: nextValue => onChange?.(nextValue),
|
|
defaultValue,
|
|
value
|
|
});
|
|
const {
|
|
value: currentValue
|
|
} = store.useState();
|
|
const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
|
|
return createElement(Fragment, null, createElement(Styled.CustomSelectLabel, {
|
|
store: store
|
|
}, label), createElement(Styled.CustomSelectButton, {
|
|
...props,
|
|
size: size,
|
|
hasCustomRenderProp: !!renderSelectedValue,
|
|
store: store
|
|
}, computedRenderSelectedValue(currentValue), createElement(Ariakit.SelectArrow, null)), createElement(Styled.CustomSelectPopover, {
|
|
gutter: 12,
|
|
store: store,
|
|
sameWidth: true
|
|
}, createElement(CustomSelectContext.Provider, {
|
|
value: {
|
|
store
|
|
}
|
|
}, children)));
|
|
}
|
|
export function CustomSelectItem({
|
|
children,
|
|
...props
|
|
}) {
|
|
const customSelectContext = useContext(CustomSelectContext);
|
|
return createElement(Styled.CustomSelectItem, {
|
|
store: customSelectContext?.store,
|
|
...props
|
|
}, children !== null && children !== void 0 ? children : props.value, createElement(Ariakit.SelectItemCheck, null));
|
|
}
|
|
//# sourceMappingURL=index.js.map
|