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>
114 lines
2.6 KiB
TypeScript
114 lines
2.6 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { __, isRTL } from '@wordpress/i18n';
|
|
import { useInstanceId } from '@wordpress/compose';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Cell from './cell';
|
|
import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
|
|
import { Root, Row } from './styles/alignment-matrix-control-styles';
|
|
import AlignmentMatrixControlIcon from './icon';
|
|
import { GRID, getItemId, getItemValue } from './utils';
|
|
import type { WordPressComponentProps } from '../context';
|
|
import type { AlignmentMatrixControlProps } from './types';
|
|
|
|
/**
|
|
*
|
|
* AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
|
|
*
|
|
* ```jsx
|
|
* import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
|
|
* import { useState } from '@wordpress/element';
|
|
*
|
|
* const Example = () => {
|
|
* const [ alignment, setAlignment ] = useState( 'center center' );
|
|
*
|
|
* return (
|
|
* <AlignmentMatrixControl
|
|
* value={ alignment }
|
|
* onChange={ setAlignment }
|
|
* />
|
|
* );
|
|
* };
|
|
* ```
|
|
*/
|
|
export function AlignmentMatrixControl( {
|
|
className,
|
|
id,
|
|
label = __( 'Alignment Matrix Control' ),
|
|
defaultValue = 'center center',
|
|
value,
|
|
onChange,
|
|
width = 92,
|
|
...props
|
|
}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
|
|
const baseId = useInstanceId(
|
|
AlignmentMatrixControl,
|
|
'alignment-matrix-control',
|
|
id
|
|
);
|
|
|
|
const compositeStore = useCompositeStore( {
|
|
defaultActiveId: getItemId( baseId, defaultValue ),
|
|
activeId: getItemId( baseId, value ),
|
|
setActiveId: ( nextActiveId ) => {
|
|
const nextValue = getItemValue( baseId, nextActiveId );
|
|
if ( nextValue ) onChange?.( nextValue );
|
|
},
|
|
rtl: isRTL(),
|
|
} );
|
|
|
|
const activeId = compositeStore.useState( 'activeId' );
|
|
|
|
const classes = classnames(
|
|
'component-alignment-matrix-control',
|
|
className
|
|
);
|
|
|
|
return (
|
|
<Composite
|
|
store={ compositeStore }
|
|
render={
|
|
<Root
|
|
{ ...props }
|
|
aria-label={ label }
|
|
className={ classes }
|
|
id={ baseId }
|
|
role="grid"
|
|
size={ width }
|
|
/>
|
|
}
|
|
>
|
|
{ GRID.map( ( cells, index ) => (
|
|
<CompositeRow render={ <Row role="row" /> } key={ index }>
|
|
{ cells.map( ( cell ) => {
|
|
const cellId = getItemId( baseId, cell );
|
|
const isActive = cellId === activeId;
|
|
|
|
return (
|
|
<Cell
|
|
id={ cellId }
|
|
isActive={ isActive }
|
|
key={ cell }
|
|
value={ cell }
|
|
/>
|
|
);
|
|
} ) }
|
|
</CompositeRow>
|
|
) ) }
|
|
</Composite>
|
|
);
|
|
}
|
|
|
|
AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
|
|
|
|
export default AlignmentMatrixControl;
|