Add: Selection and bulk actions to grid view.

WordPress · Jan 30, 2024 · 63cf98b · 63cf98b
1 parent 7934adc
commit 63cf98b
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 51 deletions.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -14,7 +14,7 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
+import { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import BulkActions from './bulk-actions';
 
 const defaultGetItemId = ( item ) => item.id;
@@ -93,7 +93,8 @@ export default function DataViews( {
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
-					{ view.type === LAYOUT_TABLE && (
+					{ ( view.type === LAYOUT_TABLE ||
+						view.type === LAYOUT_GRID ) && (
 						<BulkActions
 							actions={ actions }
 							data={ data }

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -280,6 +280,10 @@
 		.dataviews-view-grid__primary-field {
 			min-height: $grid-unit-50;
 		}
+		&.is-selected {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			background-color: #aecae1;
+		}
 	}
 
 	.dataviews-view-grid__media {

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -21,6 +26,8 @@ export default function ViewGrid( {
 	actions,
 	getItemId,
 	deferredRendering,
+	selection,
+	onSelectionChange,
 } ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
@@ -44,59 +51,90 @@ export default function ViewGrid( {
 			alignment="top"
 			className="dataviews-view-grid"
 		>
-			{ usedData.map( ( item ) => (
-				<VStack
-					spacing={ 0 }
-					key={ getItemId( item ) }
-					className="dataviews-view-grid__card"
-				>
-					<div className="dataviews-view-grid__media">
-						{ mediaField?.render( { item } ) }
-					</div>
-					<HStack
-						justify="space-between"
-						className="dataviews-view-grid__title-actions"
-					>
-						<HStack className="dataviews-view-grid__primary-field">
-							{ primaryField?.render( { item } ) }
-						</HStack>
-						<ItemActions
-							item={ item }
-							actions={ actions }
-							isCompact
-						/>
-					</HStack>
+			{ usedData.map( ( item ) => {
+				const id = getItemId( item );
+				const isSelected = selection.includes( getItemId( item ) );
+				return (
 					<VStack
-						className="dataviews-view-grid__fields"
-						spacing={ 3 }
-					>
-						{ visibleFields.map( ( field ) => {
-							const renderedValue = field.render( {
-								item,
-							} );
-							if ( ! renderedValue ) {
-								return null;
+						spacing={ 0 }
+						key={ id }
+						className={ classnames( 'dataviews-view-grid__card', {
+							'is-selected': isSelected,
+						} ) }
+						onClick={ ( event ) => {
+							if ( event.ctrlKey || event.metaKey ) {
+								if ( ! isSelected ) {
+									onSelectionChange(
+										data.filter( ( _item ) => {
+											const itemId = getItemId?.( _item );
+											return (
+												itemId === id ||
+												selection.includes( itemId )
+											);
+										} )
+									);
+								} else {
+									onSelectionChange(
+										data.filter( ( _item ) => {
+											const itemId = getItemId?.( _item );
+											return (
+												itemId !== id &&
+												selection.includes( itemId )
+											);
+										} )
+									);
+								}
 							}
-							return (
-								<VStack
-									className="dataviews-view-grid__field"
-									key={ field.id }
-									spacing={ 1 }
-								>
-									<Tooltip
-										text={ field.header }
-										placement="left"
+						} }
+					>
+						<div className="dataviews-view-grid__media">
+							{ mediaField?.render( { item } ) }
+						</div>
+						<HStack
+							justify="space-between"
+							className="dataviews-view-grid__title-actions"
+						>
+							<HStack className="dataviews-view-grid__primary-field">
+								{ primaryField?.render( { item } ) }
+							</HStack>
+							<ItemActions
+								item={ item }
+								actions={ actions }
+								isCompact
+							/>
+						</HStack>
+						<VStack
+							className="dataviews-view-grid__fields"
+							spacing={ 3 }
+						>
+							{ visibleFields.map( ( field ) => {
+								const renderedValue = field.render( {
+									item,
+								} );
+								if ( ! renderedValue ) {
+									return null;
+								}
+								return (
+									<VStack
+										className="dataviews-view-grid__field"
+										key={ field.id }
+										spacing={ 1 }
 									>
-										<div className="dataviews-view-grid__field-value">
-											{ renderedValue }
-										</div>
-									</Tooltip>
-								</VStack>
-							);
-						} ) }
+										<Tooltip
+											text={ field.header }
+											placement="left"
+										>
+											<div className="dataviews-view-grid__field-value">
+												{ renderedValue }
+											</div>
+										</Tooltip>
+									</VStack>
+								);
+							} ) }
+						</VStack>
 					</VStack>
-				</VStack>
-			) ) }
+				);
+			} ) }
 		</Grid>
 	);
 }