Dataviews: Update item actions in grid view (#56501)

* Dataviews: Update item actions in grid view * Use new dropdown * remove separators and icons * add `isCompact` prop instead of viewType
WordPress · Nov 27, 2023 · c86154f · c86154f
1 parent 0adb73f
commit c86154f
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 39 deletions.
diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -2,18 +2,28 @@
  * WordPress dependencies
  */
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 	Button,
 	Modal,
 	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
 
-function PrimaryActionTrigger( { action, onClick } ) {
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2Ariakit: DropdownMenu,
+	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
+	DropdownMenuItemV2Ariakit: DropdownMenuItem,
+	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+function ButtonTrigger( { action, onClick } ) {
 	return (
 		<Button
 			label={ action.label }
@@ -25,11 +35,11 @@ function PrimaryActionTrigger( { action, onClick } ) {
 	);
 }
 
-function SecondaryActionTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger( { action, onClick } ) {
 	return (
-		<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>
-			{ action.label }
-		</MenuItem>
+		<DropdownMenuItem onClick={ onClick }>
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
 	);
 }
 
@@ -62,7 +72,33 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 	);
 }
 
-export default function ItemActions( { item, actions } ) {
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( !! action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( item ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}
+
+export default function ItemActions( { item, actions, isCompact } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
 			( accumulator, action ) => {
@@ -84,6 +120,15 @@ export default function ItemActions( { item, actions } ) {
 	if ( ! primaryActions.length && ! secondaryActions.length ) {
 		return null;
 	}
+	if ( isCompact ) {
+		return (
+			<CompactItemActions
+				item={ item }
+				primaryActions={ primaryActions }
+				secondaryActions={ secondaryActions }
+			/>
+		);
+	}
 	return (
 		<HStack justify="flex-end">
 			{ !! primaryActions.length &&
@@ -94,49 +139,63 @@ export default function ItemActions( { item, actions } ) {
 								key={ action.id }
 								action={ action }
 								item={ item }
-								ActionTrigger={ PrimaryActionTrigger }
+								ActionTrigger={ ButtonTrigger }
 							/>
 						);
 					}
 					return (
-						<PrimaryActionTrigger
+						<ButtonTrigger
 							key={ action.id }
 							action={ action }
 							onClick={ () => action.callback( item ) }
 						/>
 					);
 				} ) }
 			{ !! secondaryActions.length && (
-				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
-					{ () => (
-						<MenuGroup>
-							{ secondaryActions.map( ( action ) => {
-								if ( !! action.RenderModal ) {
-									return (
-										<ActionWithModal
-											key={ action.id }
-											action={ action }
-											item={ item }
-											ActionTrigger={
-												SecondaryActionTrigger
-											}
-										/>
-									);
-								}
-								return (
-									<SecondaryActionTrigger
-										key={ action.id }
-										action={ action }
-										onClick={ () =>
-											action.callback( item )
-										}
-									/>
-								);
-							} ) }
-						</MenuGroup>
-					) }
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+						/>
+					}
+					placement="bottom-end"
+				>
+					<ActionsDropdownMenuGroup
+						actions={ secondaryActions }
+						item={ item }
+					/>
 				</DropdownMenu>
 			) }
 		</HStack>
 	);
 }
+
+function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+				/>
+			}
+			placement="bottom-end"
+		>
+			{ !! primaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ primaryActions }
+					item={ item }
+				/>
+			) }
+			{ !! secondaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ secondaryActions }
+					item={ item }
+				/>
+			) }
+		</DropdownMenu>
+	);
+}
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -61,6 +61,7 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 								<ItemActions
 									item={ item }
 									actions={ actions }
+									isCompact
 								/>
 							</FlexBlock>
 						</HStack>