[Data views]: Normalize render fields function

WordPress · Oct 17, 2023 · ba56611 · ba56611
1 parent 017d1ad
commit ba56611
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -5,6 +5,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,6 +26,12 @@ export default function DataViews( {
 	paginationInfo,
 } ) {
 	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
+	const _fields = useMemo( () => {
+		return fields.map( ( field ) => ( {
+			...field,
+			render: field.render || field.accessorFn,
+		} ) );
+	}, [ fields ] );
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 }>
@@ -37,7 +44,7 @@ export default function DataViews( {
 					/>
 				</HStack>
 				<ViewComponent
-					fields={ fields }
+					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
 					paginationInfo={ paginationInfo }

diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -29,8 +29,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 				return (
 					<VStack key={ index }>
 						<div className="dataviews-view-grid__media">
-							{ ( mediaField &&
-								mediaField.render( { item, view } ) ) || (
+							{ mediaField?.render( item, view ) || (
 								<Placeholder
 									withIllustration
 									style={ {
@@ -46,9 +45,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 								<VStack>
 									{ visibleFields.map( ( field ) => (
 										<div key={ field.id }>
-											{ field.render
-												? field.render( { item, view } )
-												: field.accessorFn( item ) }
+											{ field.render( item, view ) }
 										</div>
 									) ) }
 								</VStack>

diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
@@ -132,18 +132,12 @@ function ViewList( {
 	paginationInfo,
 } ) {
 	const columns = useMemo( () => {
-		const _columns = [
-			...fields.map( ( field ) => {
-				const column = { ...field };
-				delete column.render;
-				column.cell = ( props ) => {
-					return field.render
-						? field.render( { item: props.row.original, view } )
-						: field.accessorFn( props.row.original );
-				};
-				return column;
-			} ),
-		];
+		const _columns = fields.map( ( field ) => {
+			const column = { ...field };
+			delete column.render;
+			column.cell = ( props ) => field.render( props.row.original, view );
+			return column;
+		} );
 		if ( actions?.length ) {
 			_columns.push( {
 				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -89,7 +89,7 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				accessorFn: ( page ) => page.featured_media,
-				render: ( { item, view: currentView } ) =>
+				render: ( item, currentView ) =>
 					!! item.featured_media ? (
 						<Media
 							className="edit-site-page-pages__featured-image"
@@ -107,7 +107,7 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				accessorFn: ( page ) => page.title?.rendered || page.slug,
-				render: ( { item: page } ) => {
+				render: ( page ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
@@ -134,7 +134,7 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
-				render: ( { item } ) => {
+				render: ( item ) => {
 					const author = item._embedded?.author[ 0 ];
 					return (
 						<a href={ `user-edit.php?user_id=${ author.id }` }>
@@ -153,7 +153,7 @@ export default function PagePages() {
 			{
 				header: 'Date',
 				id: 'date',
-				render: ( { item } ) => {
+				render: ( item ) => {
 					const formattedDate = dateI18n(
 						getSettings().formats.datetimeAbbreviated,
 						getDate( item.date )