DataViews: iterate on list view

packages/dataviews/README.md

@@ -22,6 +22,7 @@ npm install @wordpress/dataviews --save
 	fields={ fields }
 	actions={ [ trashPostAction ] }
 	paginationInfo={ { totalItems, totalPages } }
+	onSelectionChange={ ( items ) => { /* ... */ } }
 />
 ```
 
@@ -75,8 +76,8 @@ Example:
     -   `value`: the actual value selected by the user.
 -   `hiddenFields`: the `id` of the fields that are hidden in the UI.
 -   `layout`: config that is specific to a particular layout type.
-    -   `mediaField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's media.
-    -   `primaryField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's title.
+    -   `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 `grid` and `list` layouts. The `id` of the field to be highlighted in each card/list item.
 
 ### View <=> data
 

packages/dataviews/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/private-apis": "file:../private-apis",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"

packages/dataviews/src/constants.js

@@ -1,8 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { blockTable, category, drawerLeft } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -29,26 +34,17 @@ export const VIEW_LAYOUTS = [
 		label: __( 'Table' ),
 		component: ViewTable,
 		icon: blockTable,
-		supports: {
-			preview: false,
-		},
 	},
 	{
 		type: LAYOUT_GRID,
 		label: __( 'Grid' ),
 		component: ViewGrid,
 		icon: category,
-		supports: {
-			preview: false,
-		},
 	},
 	{
 		type: LAYOUT_LIST,
 		label: __( 'List' ),
 		component: ViewList,
-		icon: drawerLeft,
-		supports: {
-			preview: true,
-		},
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
 	},
 ];

packages/dataviews/src/dataviews.js

@@ -5,7 +5,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,7 +28,15 @@ export default function DataViews( {
 	isLoading = false,
 	paginationInfo,
 	supportedLayouts,
+	onSelectionChange,
 } ) {
+	const [ selection, setSelection ] = useState( [] );
+
+	const onSetSelection = ( items ) => {
+		setSelection( items.map( ( item ) => item.id ) );
+		onSelectionChange( items );
+	};
+
 	const ViewComponent = VIEW_LAYOUTS.find(
 		( v ) => v.type === view.type
 	).component;
@@ -72,6 +80,8 @@ export default function DataViews( {
 					data={ data }
 					getItemId={ getItemId }
 					isLoading={ isLoading }
+					onSelectionChange={ onSetSelection }
+					selection={ selection }
 				/>
 				<Pagination
 					view={ view }

packages/dataviews/src/style.scss

@@ -127,6 +127,86 @@
 	}
 }
 
+.dataviews-list-view {
+	li {
+		border-bottom: $border-width solid $gray-100;
+		margin: 0;
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	.dataviews-list-view__item {
+		padding: $grid-unit-15 $grid-unit-40;
+		cursor: default;
+		&:focus,
+		&:hover {
+			background-color: lighten($gray-100, 3%);
+		}
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+		h3 {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.dataviews-list-view__item-selected,
+	.dataviews-list-view__item-selected:hover {
+		background-color: $gray-100;
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.dataviews-list-view__media-wrapper {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+		border-radius: $grid-unit-05;
+		overflow: hidden;
+		position: relative;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+		}
+	}
+
+	.edit-site-page-pages__featured-image,
+	.dataviews-list-view__media-placeholder {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+	}
+
+	.dataviews-list-view__media-placeholder {
+		background-color: $gray-200;
+	}
+
+	.dataviews-list-view__fields {
+		color: $gray-700;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		.dataviews-list-view__field {
+			margin-right: $grid-unit-15;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
 .dataviews-action-modal {
 	z-index: z-index(".dataviews-action-modal");
 }

packages/dataviews/src/view-grid.js

@@ -43,14 +43,14 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
 					className="dataviews-view-grid__card"
 				>
 					<div className="dataviews-view-grid__media">
-						{ mediaField?.render( { item, view } ) }
+						{ mediaField?.render( { item } ) }
 					</div>
 					<HStack
 						className="dataviews-view-grid__primary-field"
 						justify="space-between"
 					>
 						<FlexBlock>
-							{ primaryField?.render( { item, view } ) }
+							{ primaryField?.render( { item } ) }
 						</FlexBlock>
 						<ItemActions
 							item={ item }
@@ -65,7 +65,6 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
 						{ visibleFields.map( ( field ) => {
 							const renderedValue = field.render( {
 								item,
-								view,
 							} );
 							if ( ! renderedValue ) {
 								return null;
@@ -80,7 +79,7 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
 										{ field.header }
 									</div>
 									<div className="dataviews-view-grid__field-value">
-										{ field.render( { item, view } ) }
+										{ field.render( { item } ) }
 									</div>
 								</VStack>
 							);

packages/dataviews/src/view-list.js

@@ -1,9 +1,97 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-import ViewTable from './view-table';
+import classNames from 'classnames';
 
-export default function ViewList( props ) {
-	// To do: change to email-like preview list.
-	return <ViewTable { ...props } />;
+/**
+ * WordPress dependencies
+ */
+import { useAsyncList } from '@wordpress/compose';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+export default function ViewList( {
+	view,
+	fields,
+	data,
+	getItemId,
+	onSelectionChange,
+	selection,
+} ) {
+	const shownData = useAsyncList( data, { step: 3 } );
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			! [ view.layout.primaryField, view.layout.mediaField ].includes(
+				field.id
+			)
+	);
+
+	const onEnter = ( item ) => ( event ) => {
+		const { keyCode } = event;
+		if ( [ ENTER, SPACE ].includes( keyCode ) ) {
+			onSelectionChange( [ item ] );
+		}
+	};
+
+	return (
+		<ul className="dataviews-list-view">
+			{ shownData.map( ( item, index ) => {
+				return (
+					<li key={ getItemId?.( item ) || index }>
+						<div
+							role="button"
+							tabIndex={ 0 }
+							aria-pressed={ selection.includes( item.id ) }
+							onKeyDown={ onEnter( item ) }
+							className={ classNames(
+								'dataviews-list-view__item',
+								{
+									'dataviews-list-view__item-selected':
+										selection.includes( item.id ),
+								}
+							) }
+							onClick={ () => onSelectionChange( [ item ] ) }
+						>
+							<HStack spacing={ 3 }>
+								<div className="dataviews-list-view__media-wrapper">
+									{ mediaField?.render( { item } ) || (
+										<div className="dataviews-list-view__media-placeholder"></div>
+									) }
+								</div>
+								<HStack>
+									<VStack spacing={ 1 }>
+										{ primaryField?.render( { item } ) }
+										<div className="dataviews-list-view__fields">
+											{ visibleFields.map( ( field ) => {
+												return (
+													<span
+														key={ field.id }
+														className="dataviews-list-view__field"
+													>
+														{ field.render( {
+															item,
+														} ) }
+													</span>
+												);
+											} ) }
+										</div>
+									</VStack>
+								</HStack>
+							</HStack>
+						</div>
+					</li>
+				);
+			} ) }
+		</ul>
+	);
 }

packages/dataviews/src/view-table.js

@@ -344,8 +344,7 @@ function ViewTable( {
 	const columns = useMemo( () => {
 		const _columns = fields.map( ( field ) => {
 			const { render, getValue, ...column } = field;
-			column.cell = ( props ) =>
-				render( { item: props.row.original, view } );
+			column.cell = ( props ) => render( { item: props.row.original } );
 			if ( getValue ) {
 				column.accessorFn = ( item ) => getValue( { item } );
 			}