@gechiui/block-editor/src/components/block-alignment-matrix-control/index.js

Generic block editor.

/**
 * External dependencies
 */
import { noop } from 'lodash';
/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { DOWN } from '@gechiui/keycodes';
import {
	ToolbarButton,
	Dropdown,
	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
} from '@gechiui/components';

function BlockAlignmentMatrixControl( props ) {
	const {
		label = __( '更改矩阵对齐' ),
		onChange = noop,
		value = 'center',
		isDisabled,
	} = props;

	const icon = <AlignmentMatrixControl.Icon value={ value } />;
	const className = 'block-editor-block-alignment-matrix-control';
	const popoverClassName = `${ className }__popover`;
	const isAlternate = true;

	return (
		<Dropdown
			position="bottom right"
			className={ className }
			popoverProps={ { className: popoverClassName, isAlternate } }
			renderToggle={ ( { onToggle, isOpen } ) => {
				const openOnArrowDown = ( event ) => {
					if ( ! isOpen && event.keyCode === DOWN ) {
						event.preventDefault();
						onToggle();
					}
				};

				return (
					<ToolbarButton
						onClick={ onToggle }
						aria-haspopup="true"
						aria-expanded={ isOpen }
						onKeyDown={ openOnArrowDown }
						label={ label }
						icon={ icon }
						showTooltip
						disabled={ isDisabled }
					/>
				);
			} }
			renderContent={ () => (
				<AlignmentMatrixControl
					hasFocusBorder={ false }
					onChange={ onChange }
					value={ value }
				/>
			) }
		/>
	);
}

export default BlockAlignmentMatrixControl;