Create native version of 'ui.js'

As more native-specific changes are going to be added to 'ui.js', a native version is created with this commit.

packages/block-editor/src/components/block-alignment-control/ui.native.js

@@ -0,0 +1,165 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
+import {
+	alignNone,
+	positionCenter,
+	positionLeft,
+	positionRight,
+	stretchFullWidth,
+	stretchWide,
+} from '@wordpress/icons';
+import { Platform } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useAvailableAlignments from './use-available-alignments';
+
+const BLOCK_ALIGNMENTS_CONTROLS = {
+	none: {
+		icon: alignNone,
+		title: __( 'None' ),
+	},
+	left: {
+		icon: positionLeft,
+		title: __( 'Align left' ),
+	},
+	center: {
+		icon: positionCenter,
+		title: __( 'Align center' ),
+	},
+	right: {
+		icon: positionRight,
+		title: __( 'Align right' ),
+	},
+	wide: {
+		icon: stretchWide,
+		title: __( 'Wide width' ),
+	},
+	full: {
+		icon: stretchFullWidth,
+		title: __( 'Full width' ),
+	},
+};
+
+const DEFAULT_CONTROL = 'none';
+
+const POPOVER_PROPS = {
+	isAlternate: true,
+};
+
+function BlockAlignmentUI( {
+	value,
+	onChange,
+	controls,
+	isToolbar,
+	isCollapsed = true,
+} ) {
+	const enabledControls = useAvailableAlignments( controls );
+	const hasEnabledControls = !! enabledControls.length;
+
+	if ( ! hasEnabledControls ) {
+		return null;
+	}
+
+	function onChangeAlignment( align ) {
+		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
+	}
+
+	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
+	const defaultAlignmentControl =
+		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
+
+	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
+	const commonProps = {
+		popoverProps: POPOVER_PROPS,
+		icon: activeAlignmentControl
+			? activeAlignmentControl.icon
+			: defaultAlignmentControl.icon,
+		label: __( 'Align' ),
+		toggleProps: { describedBy: __( 'Change alignment' ) },
+	};
+	const extraProps =
+		isToolbar || Platform.isNative
+			? {
+					isCollapsed: isToolbar ? isCollapsed : undefined,
+					controls: enabledControls.map(
+						( { name: controlName } ) => {
+							return {
+								...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+								isActive:
+									value === controlName ||
+									( ! value && controlName === 'none' ),
+								role: isCollapsed ? 'menuitemradio' : undefined,
+								onClick: () => onChangeAlignment( controlName ),
+							};
+						}
+					),
+			  }
+			: {
+					children: ( { onClose } ) => {
+						return (
+							<>
+								<MenuGroup className="block-editor-block-alignment-control__menu-group">
+									{ enabledControls.map(
+										( { name: controlName, info } ) => {
+											const {
+												icon,
+												title,
+											} = BLOCK_ALIGNMENTS_CONTROLS[
+												controlName
+											];
+											// If no value is provided, mark as selected the `none` option.
+											const isSelected =
+												controlName === value ||
+												( ! value &&
+													controlName === 'none' );
+											return (
+												<MenuItem
+													key={ controlName }
+													icon={ icon }
+													iconPosition="left"
+													className={ classNames(
+														'components-dropdown-menu__menu-item',
+														{
+															'is-active': isSelected,
+														}
+													) }
+													isSelected={ isSelected }
+													onClick={ () => {
+														onChangeAlignment(
+															controlName
+														);
+														onClose();
+													} }
+													role="menuitemradio"
+													info={ info }
+												>
+													{ title }
+												</MenuItem>
+											);
+										}
+									) }
+								</MenuGroup>
+							</>
+						);
+					},
+			  };
+
+	return <UIComponent { ...commonProps } { ...extraProps } />;
+}
+
+export default BlockAlignmentUI;