DataViews: Fix field rendering (#63452)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]>
WordPress · Jul 12, 2024 · d6eecb9 · d6eecb9
1 parent ebb5788
commit d6eecb9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 40 deletions.
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/layouts/grid/index.tsx
@@ -53,6 +53,12 @@ function GridItem< Item >( {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : null;
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
 	return (
 		<VStack
 			spacing={ 0 }
@@ -76,7 +82,7 @@ function GridItem< Item >( {
 			} }
 		>
 			<div className="dataviews-view-grid__media">
-				{ mediaField?.render( { item } ) }
+				{ renderedMediaField }
 			</div>
 			<HStack
 				justify="space-between"
@@ -91,7 +97,7 @@ function GridItem< Item >( {
 					disabled={ ! hasBulkAction }
 				/>
 				<HStack className="dataviews-view-grid__primary-field">
-					{ primaryField?.render( { item } ) }
+					{ renderedPrimaryField }
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
@@ -104,18 +110,12 @@ function GridItem< Item >( {
 					justify="flex-start"
 				>
 					{ badgeFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<FlexItem
 								key={ field.id }
 								className="dataviews-view-grid__field-value"
 							>
-								{ renderedValue }
+								<field.render item={ item } />
 							</FlexItem>
 						);
 					} ) }
@@ -124,12 +124,6 @@ function GridItem< Item >( {
 			{ !! visibleFields?.length && (
 				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
 					{ visibleFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<Flex
 								className={ clsx(
@@ -157,7 +151,7 @@ function GridItem< Item >( {
 										className="dataviews-view-grid__field-value"
 										style={ { maxHeight: 'none' } }
 									>
-										{ renderedValue }
+										<field.render item={ item } />
 									</FlexItem>
 								</>
 							</Flex>

diff --git a/packages/dataviews/src/layouts/list/index.tsx b/packages/dataviews/src/layouts/list/index.tsx
@@ -112,6 +112,16 @@ function ListItem< Item >( {
 			? primaryAction.label
 			: primaryAction.label( [ item ] ) );
 
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : (
+		<div className="dataviews-view-list__media-placeholder"></div>
+	);
+
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
+
 	return (
 		<CompositeRow
 			ref={ itemRef }
@@ -147,9 +157,7 @@ function ListItem< Item >( {
 							alignment="flex-start"
 						>
 							<div className="dataviews-view-list__media-wrapper">
-								{ mediaField?.render( { item } ) || (
-									<div className="dataviews-view-list__media-placeholder"></div>
-								) }
+								{ renderedMediaField }
 							</div>
 							<VStack
 								spacing={ 1 }
@@ -159,7 +167,7 @@ function ListItem< Item >( {
 									className="dataviews-view-list__primary-field"
 									id={ labelId }
 								>
-									{ primaryField?.render( { item } ) }
+									{ renderedPrimaryField }
 								</span>
 								<div
 									className="dataviews-view-list__fields"
@@ -177,7 +185,7 @@ function ListItem< Item >( {
 												{ field.header }
 											</VisuallyHidden>
 											<span className="dataviews-view-list__field-value">
-												{ field.render( { item } ) }
+												<field.render item={ item } />
 											</span>
 										</div>
 									) ) }

diff --git a/packages/dataviews/src/layouts/table/index.tsx b/packages/dataviews/src/layouts/table/index.tsx
@@ -360,23 +360,15 @@ function TableColumnField< Item >( {
 	item,
 	field,
 }: TableColumnFieldProps< Item > ) {
-	const value = field.render( {
-		item,
-	} );
 	return (
-		!! value && (
-			<div
-				className={ clsx(
-					'dataviews-view-table__cell-content-wrapper',
-					{
-						'dataviews-view-table__primary-field':
-							primaryField?.id === field.id,
-					}
-				) }
-			>
-				{ value }
-			</div>
-		)
+		<div
+			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
+				'dataviews-view-table__primary-field':
+					primaryField?.id === field.id,
+			} ) }
+		>
+			<field.render { ...{ item } } />
+		</div>
 	);
 }
 

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -244,6 +244,12 @@
 	}
 }
 
+.dataviews-view-table__cell-content-wrapper:empty,
+.dataviews-view-grid__field-value:empty,
+.dataviews-view-grid__field:empty {
+	display: none;
+}
+
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
 .dataviews-view-table__primary-field {

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ComponentType } from 'react';
 
 /**
  * Internal dependencies
@@ -73,7 +73,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
 	 */
-	render?: ( args: { item: Item } ) => ReactNode;
+	render?: ComponentType< { item: Item } >;
 
 	/**
 	 * Whether the field is sortable.
@@ -118,7 +118,7 @@ export type Field< Item > = {
 export type NormalizedField< Item > = Field< Item > & {
 	header: string;
 	getValue: ( args: { item: Item } ) => any;
-	render: ( args: { item: Item } ) => ReactNode;
+	render: ComponentType< { item: Item } >;
 };
 
 /**