updates

WordPress · Jan 31, 2024 · c543418 · c543418
1 parent acbb3b8
commit c543418
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 84 deletions.
diff --git a/packages/dataviews/src/single-selection-checkbox.js b/packages/dataviews/src/single-selection-checkbox.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+
+export default function SingleSelectionCheckbox( {
+	selection,
+	onSelectionChange,
+	item,
+	data,
+	getItemId,
+	primaryField,
+} ) {
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	let selectionLabel;
+	if ( primaryField?.getValue && item ) {
+		// eslint-disable-next-line @wordpress/valid-sprintf
+		selectionLabel = sprintf(
+			/* translators: %s: item title. */
+			isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			primaryField.getValue( { item } )
+		);
+	} else {
+		selectionLabel = isSelected
+			? __( 'Select a new item' )
+			: __( 'Deselect item' );
+	}
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ isSelected }
+			label={ selectionLabel }
+			onChange={ () => {
+				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 )
+							);
+						} )
+					);
+				}
+			} }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -301,10 +301,6 @@
 		}
 	}
 
-	.dataviews-view-grid__primary-field {
-		padding: $grid-unit-10;
-	}
-
 	.dataviews-view-grid__fields {
 		position: relative;
 		font-size: 12px;
@@ -499,3 +495,11 @@
 .dataviews-bulk-edit-button.components-button {
 	flex-shrink: 0;
 }
+
+.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
+	margin-left: $grid-unit-10;
+}
+
+.dataviews-view-grid__card.has-no-pointer-events * {
+	pointer-events: none;
+}
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -13,11 +13,115 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ItemActions from './item-actions';
+import SingleSelectionCheckbox from './single-selection-checkbox';
+
+function GridItem( {
+	selection,
+	data,
+	onSelectionChange,
+	getItemId,
+	item,
+	actions,
+	mediaField,
+	primaryField,
+	visibleFields,
+} ) {
+	const [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	return (
+		<VStack
+			spacing={ 0 }
+			key={ id }
+			className={ classnames( 'dataviews-view-grid__card', {
+				'is-selected': isSelected,
+				'has-no-pointer-events': hasNoPointerEvents,
+			} ) }
+			onMouseDown={ ( event ) => {
+				if ( event.ctrlKey || event.metaKey ) {
+					setHasNoPointerEvents( true );
+					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 )
+								);
+							} )
+						);
+					}
+				}
+			} }
+			onClick={ () => {
+				if ( hasNoPointerEvents ) {
+					setHasNoPointerEvents( false );
+				}
+			} }
+		>
+			<div className="dataviews-view-grid__media">
+				{ mediaField?.render( { item } ) }
+			</div>
+			<HStack
+				justify="space-between"
+				className="dataviews-view-grid__title-actions"
+			>
+				<SingleSelectionCheckbox
+					id={ id }
+					item={ item }
+					selection={ selection }
+					onSelectionChange={ onSelectionChange }
+					getItemId={ getItemId }
+					data={ data }
+					primaryField={ primaryField }
+				/>
+				<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 }
+						>
+							<Tooltip text={ field.header } placement="left">
+								<div className="dataviews-view-grid__field-value">
+									{ renderedValue }
+								</div>
+							</Tooltip>
+						</VStack>
+					);
+				} ) }
+			</VStack>
+		</VStack>
+	);
+}
 
 export default function ViewGrid( {
 	data,
@@ -52,87 +156,19 @@ export default function ViewGrid( {
 			className="dataviews-view-grid"
 		>
 			{ usedData.map( ( item ) => {
-				const id = getItemId( item );
-				const isSelected = selection.includes( getItemId( item ) );
 				return (
-					<VStack
-						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 )
-											);
-										} )
-									);
-								}
-							}
-						} }
-					>
-						<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 }
-									>
-										<Tooltip
-											text={ field.header }
-											placement="left"
-										>
-											<div className="dataviews-view-grid__field-value">
-												{ renderedValue }
-											</div>
-										</Tooltip>
-									</VStack>
-								);
-							} ) }
-						</VStack>
-					</VStack>
+					<GridItem
+						key={ getItemId( item ) }
+						selection={ selection }
+						data={ data }
+						onSelectionChange={ onSelectionChange }
+						getItemId={ getItemId }
+						item={ item }
+						actions={ actions }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						visibleFields={ visibleFields }
+					/>
 				);
 			} ) }
 		</Grid>