DataViews: Support combined fields (WordPress#63236)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
carstingaxion · Jul 18, 2024 · 89dff42 · 89dff42
1 parent 5335f34
commit 89dff42
Show file tree

Hide file tree

Showing 11 changed files with 327 additions and 147 deletions.
diff --git a/packages/dataviews/src/layouts.ts b/packages/dataviews/src/layouts.ts
@@ -16,6 +16,7 @@ import ViewTable from './view-table';
 import ViewGrid from './view-grid';
 import ViewList from './view-list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from './constants';
+import type { View } from './types';
 
 export const VIEW_LAYOUTS = [
 	{
@@ -37,3 +38,29 @@ export const VIEW_LAYOUTS = [
 		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
 	},
 ];
+
+export function getMandatoryFields( view: View ): string[] {
+	if ( view.type === 'table' ) {
+		return [ view.layout?.primaryField ]
+			.concat(
+				view.layout?.combinedFields?.flatMap(
+					( field ) => field.children
+				) ?? []
+			)
+			.filter( ( item ): item is string => !! item );
+	}
+
+	if ( view.type === 'grid' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	if ( view.type === 'list' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	return [];
+}
diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js
@@ -167,20 +167,17 @@ export const fields = [
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		width: 50,
 		enableSorting: false,
 	},
 	{
 		header: 'Title',
 		id: 'title',
-		maxWidth: 400,
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
 	{
 		header: 'Type',
 		id: 'type',
-		maxWidth: 400,
 		enableHiding: false,
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
@@ -197,7 +194,6 @@ export const fields = [
 	{
 		header: 'Description',
 		id: 'description',
-		maxWidth: 200,
 		enableSorting: false,
 		enableGlobalSearch: true,
 	},

diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
@@ -39,6 +39,20 @@ Default.args = {
 		[ LAYOUT_TABLE ]: {
 			layout: {
 				primaryField: 'title',
+				styles: {
+					image: {
+						width: 50,
+					},
+					title: {
+						maxWidth: 400,
+					},
+					type: {
+						maxWidth: 400,
+					},
+					description: {
+						maxWidth: 200,
+					},
+				},
 			},
 		},
 		[ LAYOUT_GRID ]: {

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -91,7 +91,7 @@
 		padding: $grid-unit-15;
 		white-space: nowrap;
 
-		&[data-field-id="actions"] {
+		&.dataviews-view-table__actions-column {
 			text-align: right;
 		}
 
@@ -215,6 +215,10 @@
 				}
 			}
 		}
+
+		.components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
+			min-height: 0;
+		}
 	}
 	.dataviews-view-table-header-button {
 		padding: $grid-unit-05 $grid-unit-10;

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -75,21 +75,6 @@ export type Field< Item > = {
 	 */
 	render?: ( args: { item: Item } ) => ReactNode;
 
-	/**
-	 * The width of the field column.
-	 */
-	width?: string | number;
-
-	/**
-	 * The minimum width of the field column.
-	 */
-	maxWidth?: string | number;
-
-	/**
-	 * The maximum width of the field column.
-	 */
-	minWidth?: string | number;
-
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -249,11 +234,44 @@ interface ViewBase {
 	perPage?: number;
 
 	/**
-	 * The hidden fields.
+	 * The fields to render
 	 */
 	fields?: string[];
 }
 
+export interface CombinedField {
+	id: string;
+
+	header: string;
+
+	/**
+	 * The fields to use as columns.
+	 */
+	children: string[];
+
+	/**
+	 * The direction of the stack.
+	 */
+	direction: 'horizontal' | 'vertical';
+}
+
+export interface ColumnStyle {
+	/**
+	 * The width of the field column.
+	 */
+	width?: string | number;
+
+	/**
+	 * The minimum width of the field column.
+	 */
+	maxWidth?: string | number;
+
+	/**
+	 * The maximum width of the field column.
+	 */
+	minWidth?: string | number;
+}
+
 export interface ViewTable extends ViewBase {
 	type: 'table';
 
@@ -264,9 +282,14 @@ export interface ViewTable extends ViewBase {
 		primaryField?: string;
 
 		/**
-		 * The field to use as the media field.
+		 * The fields to use as columns.
 		 */
-		mediaField?: string;
+		combinedFields?: CombinedField[];
+
+		/**
+		 * The styles for the columns.
+		 */
+		styles?: Record< string, ColumnStyle >;
 	};
 }
 

diff --git a/packages/dataviews/src/view-actions.tsx b/packages/dataviews/src/view-actions.tsx
@@ -20,7 +20,7 @@ import { cog } from '@wordpress/icons';
  */
 import { unlock } from './lock-unlock';
 import { SORTING_DIRECTIONS, sortLabels } from './constants';
-import { VIEW_LAYOUTS } from './layouts';
+import { VIEW_LAYOUTS, getMandatoryFields } from './layouts';
 import type { NormalizedField, View, SupportedLayouts } from './types';
 
 const {
@@ -147,10 +147,11 @@ function FieldsVisibilityMenu< Item >( {
 	onChangeView,
 	fields,
 }: FieldsVisibilityMenuProps< Item > ) {
+	const mandatoryFields = getMandatoryFields( view );
 	const hidableFields = fields.filter(
 		( field ) =>
 			field.enableHiding !== false &&
-			field.id !== view?.layout?.mediaField
+			! mandatoryFields.includes( field.id )
 	);
 	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	if ( ! hidableFields?.length ) {