DataViews: Update view fields rendering config

packages/dataviews/README.md

@@ -150,7 +150,6 @@ const view = {
 		direction: 'desc',
 	},
 	fields: [ 'author', 'status' ],
-	layout: {},
 };
 ```
 
@@ -167,10 +166,7 @@ Properties:
 -   `sort`:
     -   `field`: the field used for sorting the dataset.
     -   `direction`: the direction to use for sorting, one of `asc` or `desc`.
--   `fields`: the `id` of the fields that are visible in the UI.
--   `layout`: config that is specific to a particular layout type.
-    -   `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
-    -   `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item.
+-   `fields`: the `id` of the fields that are visible in the UI. Can also be an object to define the render type of the field example: `{ field: 'author', render: 'media' }`.
 
 ### `onChangeView`: `function`
 
@@ -200,7 +196,6 @@ function MyCustomPageTable() {
 			},
 		],
 		fields: [ 'author', 'status' ],
-		layout: {},
 	} );
 
 	const queryArgs = useMemo( () => {

packages/dataviews/src/dataviews.tsx

@@ -24,7 +24,13 @@ import {
 } from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
-import type { Action, Field, View, ViewBaseProps } from './types';
+import type {
+	Action,
+	Field,
+	FieldRenderConfig,
+	View,
+	ViewProps,
+} from './types';
 import type { SetSelection, SelectionOrUpdater } from './private-types';
 
 type ItemWithId = { id: string };
@@ -46,6 +52,7 @@ type DataViewsProps< Item > = {
 	selection?: string[];
 	setSelection?: SetSelection;
 	onSelectionChange?: ( items: Item[] ) => void;
+	defaultFields?: Record< string, FieldRenderConfig[] >;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -69,6 +76,7 @@ export default function DataViews< Item >( {
 	selection: selectionProperty,
 	setSelection: setSelectionProperty,
 	onSelectionChange = defaultOnSelectionChange,
+	defaultFields,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const isUncontrolled =
@@ -89,7 +97,7 @@ export default function DataViews< Item >( {
 	}
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
-		?.component as ComponentType< ViewBaseProps< Item > >;
+		?.component as ComponentType< ViewProps< Item > >;
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
@@ -143,6 +151,7 @@ export default function DataViews< Item >( {
 					view={ view }
 					onChangeView={ onChangeView }
 					supportedLayouts={ supportedLayouts }
+					defaultFields={ defaultFields }
 				/>
 			</HStack>
 			<ViewComponent

packages/dataviews/src/field-render-primary.tsx

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from './types';
+
+interface FieldRenderPrimaryProps< Item > {
+	field: NormalizedField< Item >;
+	item: Item;
+	id?: string;
+}
+
+export default function FieldRenderPrimary< Item >( {
+	field,
+	item,
+	id,
+}: FieldRenderPrimaryProps< Item > ) {
+	return (
+		<div className="dataviews-field-render-primary" id={ id }>
+			{ field.render( { item } ) }
+		</div>
+	);
+}

packages/dataviews/src/normalize-field-render-configs.tsx

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	FieldRenderConfig,
+	NormalizedField,
+	NormalizedFieldRenderConfig,
+} from './types';
+
+/**
+ * Normalizes all the default field render configs
+ * To simplify its usage in the code base.
+ *
+ * @param configs Field Render Configs.
+ * @param fields  Fields config.
+ * @return Normalized field render configs.
+ */
+export function normalizeFieldRenderConfigs(
+	configs: FieldRenderConfig[] | undefined,
+	fields: NormalizedField< any >[]
+): NormalizedFieldRenderConfig[] {
+	return configs
+		? configs.map( ( config ) => {
+				if ( typeof config === 'string' ) {
+					return { render: 'default', field: config };
+				}
+
+				return config;
+		  } )
+		: fields.map( ( f ) => ( { render: 'default', field: f.id } ) );
+}

packages/dataviews/src/stories/index.story.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,44 +17,34 @@ const meta = {
 };
 export default meta;
 
-const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
-	},
-	[ LAYOUT_GRID ]: {
-		mediaField: 'image',
-		primaryField: 'title',
-	},
+const defaultFields = {
+	[ LAYOUT_TABLE ]: [
+		{ render: 'primary', field: 'title' },
+		'description',
+		'categories',
+	],
+	[ LAYOUT_GRID ]: [
+		{ render: 'media', field: 'image' },
+		{ render: 'primary', field: 'title' },
+		'description',
+		'categories',
+	],
 };
 
 export const Default = ( props ) => {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-			}
-
-			setView( newView );
-		},
-		[ view.type, setView ]
-	);
 	return (
 		<DataViews
 			{ ...props }
 			paginationInfo={ paginationInfo }
 			data={ shownData }
 			view={ view }
 			fields={ fields }
-			onChangeView={ onChangeView }
+			onChangeView={ setView }
+			defaultFields={ defaultFields }
 		/>
 	);
 };

packages/dataviews/src/style.scss

@@ -205,7 +205,7 @@
 				flex-grow: 1;
 			}
 
-			&.dataviews-view-table__primary-field {
+			.dataviews-field-render-primary {
 				a {
 					flex-grow: 0;
 				}
@@ -246,9 +246,7 @@
 	}
 }
 
-.dataviews-view-list__primary-field,
-.dataviews-view-grid__primary-field,
-.dataviews-view-table__primary-field {
+.dataviews-field-render-primary {
 	font-size: $default-font-size;
 	font-weight: 500;
 	color: $gray-700;
@@ -312,10 +310,8 @@
 
 		.dataviews-view-grid__title-actions {
 			padding: $grid-unit-10 0 $grid-unit-05;
-		}
-
-		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+			// Preserve layout when there is no ellipsis button
+			min-height: $grid-unit-40;
 		}
 
 		&.is-selected {
@@ -446,15 +442,15 @@
 		}
 
 		&:not(.is-selected) {
-			.dataviews-view-list__primary-field {
+			.dataviews-field-render-primary {
 				color: $gray-900;
 			}
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
 				background-color: #f8f8f8;
 
-				.dataviews-view-list__primary-field,
+				.dataviews-field-render-primary,
 				.dataviews-view-list__fields {
 					color: var(--wp-admin-theme-color);
 				}
@@ -469,7 +465,7 @@
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-900;
 
-			.dataviews-view-list__primary-field,
+			.dataviews-field-render-primary,
 			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
@@ -493,7 +489,7 @@
 				border-radius: $radius-block-ui;
 			}
 		}
-		.dataviews-view-list__primary-field {
+		.dataviews-field-render-primary {
 			min-height: $grid-unit-05 * 5;
 			line-height: $grid-unit-05 * 5;
 			overflow: hidden;

packages/dataviews/src/types.ts

@@ -207,11 +207,23 @@ export interface NormalizedFilter {
 	isPrimary: boolean;
 }
 
-interface ViewBase {
+export interface NormalizedFieldRenderConfig {
+	render: 'primary' | 'badge' | 'media' | 'default';
+	field: string;
+}
+
+export type FieldRenderConfig =
+	| string
+	| {
+			render: 'primary' | 'badge' | 'media' | 'default';
+			field: string;
+	  };
+
+export interface View {
 	/**
 	 * The layout of the view.
 	 */
-	type: string;
+	type: 'table' | 'grid' | 'list';
 
 	/**
 	 * The global search term.
@@ -251,69 +263,9 @@ interface ViewBase {
 	/**
 	 * The hidden fields.
 	 */
-	fields?: string[];
+	fields?: FieldRenderConfig[];
 }
 
-export interface ViewTable extends ViewBase {
-	type: 'table';
-
-	layout: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-	};
-}
-
-export interface ViewList extends ViewBase {
-	type: 'list';
-
-	layout: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-	};
-}
-
-export interface ViewGrid extends ViewBase {
-	type: 'grid';
-
-	layout: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-
-		/**
-		 * The fields to use as columns.
-		 */
-		columnFields?: string[];
-
-		/**
-		 * The fields to use as badge fields.
-		 */
-		badgeFields?: string[];
-	};
-}
-
-export type View = ViewList | ViewGrid | ViewTable;
-
 interface ActionBase< Item > {
 	/**
 	 * The unique identifier of the action.
@@ -400,7 +352,7 @@ export interface ActionButton< Item > extends ActionBase< Item > {
 
 export type Action< Item > = ActionModal< Item > | ActionButton< Item >;
 
-export interface ViewBaseProps< Item > {
+export interface ViewProps< Item > {
 	actions: Action< Item >[];
 	data: Item[];
 	fields: NormalizedField< Item >[];
@@ -412,20 +364,3 @@ export interface ViewBaseProps< Item > {
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
 }
-
-export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
-	view: ViewTable;
-}
-
-export interface ViewListProps< Item > extends ViewBaseProps< Item > {
-	view: ViewList;
-}
-
-export interface ViewGridProps< Item > extends ViewBaseProps< Item > {
-	view: ViewGrid;
-}
-
-export type ViewProps< Item > =
-	| ViewTableProps< Item >
-	| ViewGridProps< Item >
-	| ViewListProps< Item >;