DataViews table layout: hide actions menu when there is only one acti…

…on and is primary (#67020) Co-authored-by: oandregal <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: ntsekouras <[email protected]>
WordPress · Nov 15, 2024 · 40954ff · 40954ff · github-actions · Nov 15, 2024
1 parent 02f67b8
commit 40954ff
Showing 1 changed file with 63 additions and 23 deletions.
diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -59,6 +59,12 @@ interface CompactItemActionsProps< Item > {
 	actions: Action< Item >[];
 }
 
+interface PrimaryActionsProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	registry: ReturnType< typeof useRegistry >;
+}
+
 function ButtonTrigger< Item >( {
 	action,
 	onClick,
@@ -179,6 +185,13 @@ export function ActionsMenuGroup< Item >( {
 	);
 }
 
+function hasOnlyOneActionAndIsPrimary< Item >(
+	primaryActions: Action< Item >[],
+	actions: Action< Item >[]
+) {
+	return primaryActions.length === 1 && actions.length;
+}
+
 export default function ItemActions< Item >( {
 	item,
 	actions,
@@ -199,9 +212,21 @@ export default function ItemActions< Item >( {
 			eligibleActions: _eligibleActions,
 		};
 	}, [ actions, item ] );
+
 	if ( isCompact ) {
 		return <CompactItemActions item={ item } actions={ eligibleActions } />;
 	}
+
+	if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) {
+		return (
+			<PrimaryActions
+				item={ item }
+				actions={ primaryActions }
+				registry={ registry }
+			/>
+		);
+	}
+
 	return (
 		<HStack
 			spacing={ 1 }
@@ -212,29 +237,11 @@ export default function ItemActions< Item >( {
 				width: 'auto',
 			} }
 		>
-			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => {
-					if ( 'RenderModal' in action ) {
-						return (
-							<ActionWithModal
-								key={ action.id }
-								action={ action }
-								items={ [ item ] }
-								ActionTrigger={ ButtonTrigger }
-							/>
-						);
-					}
-					return (
-						<ButtonTrigger
-							key={ action.id }
-							action={ action }
-							onClick={ () => {
-								action.callback( [ item ], { registry } );
-							} }
-							items={ [ item ] }
-						/>
-					);
-				} ) }
+			<PrimaryActions
+				item={ item }
+				actions={ primaryActions }
+				registry={ registry }
+			/>
 			<CompactItemActions item={ item } actions={ eligibleActions } />
 		</HStack>
 	);
@@ -262,3 +269,36 @@ function CompactItemActions< Item >( {
 		</Menu>
 	);
 }
+
+function PrimaryActions< Item >( {
+	item,
+	actions,
+	registry,
+}: PrimaryActionsProps< Item > ) {
+	if ( ! Array.isArray( actions ) || actions.length === 0 ) {
+		return null;
+	}
+
+	return actions.map( ( action ) => {
+		if ( 'RenderModal' in action ) {
+			return (
+				<ActionWithModal
+					key={ action.id }
+					action={ action }
+					items={ [ item ] }
+					ActionTrigger={ ButtonTrigger }
+				/>
+			);
+		}
+		return (
+			<ButtonTrigger
+				key={ action.id }
+				action={ action }
+				onClick={ () => {
+					action.callback( [ item ], { registry } );
+				} }
+				items={ [ item ] }
+			/>
+		);
+	} );
+}