DataViews: Create a single component for rendering the actions list (#67558)

Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: oandregal <[email protected]>

Author: 3 people

packages/dataviews/src/components/dataviews-item-actions/index.tsx

@@ -65,6 +65,12 @@ interface PrimaryActionsProps< Item > {
 	actions: Action< Item >[];
 	registry: ReturnType< typeof useRegistry >;
 }
+interface ActionsListProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	registry: ReturnType< typeof useRegistry >;
+	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
+}
 
 function ButtonTrigger< Item >( {
 	action,
@@ -160,28 +166,12 @@ export function ActionsMenuGroup< Item >( {
 	const registry = useRegistry();
 	return (
 		<Menu.Group>
-			{ actions.map( ( action ) => {
-				if ( 'RenderModal' in action ) {
-					return (
-						<ActionWithModal
-							key={ action.id }
-							action={ action }
-							items={ [ item ] }
-							ActionTrigger={ MenuItemTrigger }
-						/>
-					);
-				}
-				return (
-					<MenuItemTrigger
-						key={ action.id }
-						action={ action }
-						onClick={ () => {
-							action.callback( [ item ], { registry } );
-						} }
-						items={ [ item ] }
-					/>
-				);
-			} ) }
+			<ActionsList
+				actions={ actions }
+				item={ item }
+				registry={ registry }
+				ActionTrigger={ MenuItemTrigger }
+			/>
 		</Menu.Group>
 	);
 }
@@ -286,20 +276,35 @@ function PrimaryActions< Item >( {
 	if ( ! Array.isArray( actions ) || actions.length === 0 ) {
 		return null;
 	}
+	return (
+		<ActionsList
+			actions={ actions }
+			item={ item }
+			registry={ registry }
+			ActionTrigger={ ButtonTrigger }
+		/>
+	);
+}
 
+function ActionsList< Item >( {
+	item,
+	actions,
+	registry,
+	ActionTrigger,
+}: ActionsListProps< Item > ) {
 	return actions.map( ( action ) => {
 		if ( 'RenderModal' in action ) {
 			return (
 				<ActionWithModal
 					key={ action.id }
 					action={ action }
 					items={ [ item ] }
-					ActionTrigger={ ButtonTrigger }
+					ActionTrigger={ ActionTrigger }
 				/>
 			);
 		}
 		return (
-			<ButtonTrigger
+			<ActionTrigger
 				key={ action.id }
 				action={ action }
 				onClick={ () => {