@wordpress/dataviews 0.6.0 → 0.8.0

package/src/view-table.js

@@ -14,6 +14,7 @@ import {
 	Icon,
 	privateApis as componentsPrivateApis,
 	CheckboxControl,
+	Spinner,
 } from '@wordpress/components';
 import {
 	forwardRef,
@@ -21,6 +22,7 @@ import {
 	useId,
 	useRef,
 	useState,
+	useMemo,
 	Children,
 	Fragment,
 } from '@wordpress/element';
@@ -33,6 +35,10 @@ import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
 import { sanitizeOperators } from './utils';
 import { ENUMERATION_TYPE, SORTING_DIRECTIONS } from './constants';
+import {
+	useSomeItemHasAPossibleBulkAction,
+	useHasAPossibleBulkAction,
+} from './bulk-actions';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -43,7 +49,7 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-function WithSeparators( { children } ) {
+function WithDropDownMenuSeparators( { children } ) {
 	return Children.toArray( children )
 		.filter( Boolean )
 		.map( ( child, i ) => (
@@ -96,7 +102,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 			}
 			style={ { minWidth: '240px' } }
 		>
-			<WithSeparators>
+			<WithDropDownMenuSeparators>
 				{ isSortable && (
 					<DropdownMenuGroup>
 						{ Object.entries( SORTING_DIRECTIONS ).map(
@@ -181,13 +187,25 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 						</DropdownMenuItemLabel>
 					</DropdownMenuItem>
 				) }
-			</WithSeparators>
+			</WithDropDownMenuSeparators>
 		</DropdownMenu>
 	);
 } );
 
-function BulkSelectionCheckbox( { selection, onSelectionChange, data } ) {
-	const areAllSelected = selection.length === data.length;
+function BulkSelectionCheckbox( {
+	selection,
+	onSelectionChange,
+	data,
+	actions,
+} ) {
+	const selectableItems = useMemo( () => {
+		return data.filter( ( item ) => {
+			return actions.some(
+				( action ) => action.supportsBulk && action.isEligible( item )
+			);
+		} );
+	}, [ data, actions ] );
+	const areAllSelected = selection.length === selectableItems.length;
 	return (
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
@@ -198,7 +216,7 @@ function BulkSelectionCheckbox( { selection, onSelectionChange, data } ) {
 				if ( areAllSelected ) {
 					onSelectionChange( [] );
 				} else {
-					onSelectionChange( data );
+					onSelectionChange( selectableItems );
 				}
 			} }
 			label={ areAllSelected ? __( 'Deselect all' ) : __( 'Select all' ) }
@@ -206,6 +224,127 @@ function BulkSelectionCheckbox( { selection, onSelectionChange, data } ) {
 	);
 }
 
+function TableRow( {
+	hasBulkActions,
+	item,
+	actions,
+	id,
+	visibleFields,
+	primaryField,
+	selection,
+	getItemId,
+	onSelectionChange,
+	data,
+} ) {
+	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
+
+	const isSelected = selection.includes( id );
+
+	const [ isHovered, setIsHovered ] = useState( false );
+
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	return (
+		<tr
+			className={ classnames( 'dataviews-view-table__row', {
+				'is-selected':
+					hasPossibleBulkAction && selection.includes( id ),
+				'is-hovered': isHovered,
+			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+			onClickCapture={ ( event ) => {
+				if ( event.ctrlKey || event.metaKey ) {
+					event.stopPropagation();
+					event.preventDefault();
+					if ( ! hasPossibleBulkAction ) {
+						return;
+					}
+					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 )
+								);
+							} )
+						);
+					}
+				}
+			} }
+		>
+			{ hasBulkActions && (
+				<td
+					className="dataviews-view-table__checkbox-column"
+					style={ {
+						width: 20,
+						minWidth: 20,
+					} }
+				>
+					<div className="dataviews-view-table__cell-content-wrapper">
+						<SingleSelectionCheckbox
+							id={ id }
+							item={ item }
+							selection={ selection }
+							onSelectionChange={ onSelectionChange }
+							getItemId={ getItemId }
+							data={ data }
+							primaryField={ primaryField }
+							disabled={ ! hasPossibleBulkAction }
+						/>
+					</div>
+				</td>
+			) }
+			{ visibleFields.map( ( field ) => (
+				<td
+					key={ field.id }
+					style={ {
+						width: field.width || undefined,
+						minWidth: field.minWidth || undefined,
+						maxWidth: field.maxWidth || undefined,
+					} }
+				>
+					<div
+						className={ classnames(
+							'dataviews-view-table__cell-content-wrapper',
+							{
+								'dataviews-view-table__primary-field':
+									primaryField?.id === field.id,
+							}
+						) }
+					>
+						{ field.render( {
+							item,
+						} ) }
+					</div>
+				</td>
+			) ) }
+			{ !! actions?.length && (
+				<td className="dataviews-view-table__actions-column">
+					<ItemActions item={ item } actions={ actions } />
+				</td>
+			) }
+		</tr>
+	);
+}
+
 function ViewTable( {
 	view,
 	onChangeView,
@@ -219,10 +358,10 @@ function ViewTable( {
 	onSelectionChange,
 	setOpenedFilter,
 } ) {
-	const hasBulkActions = actions?.some( ( action ) => action.supportsBulk );
 	const headerMenuRefs = useRef( new Map() );
 	const headerMenuToFocusRef = useRef();
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState();
+	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
 
 	useEffect( () => {
 		if ( headerMenuToFocusRef.current ) {
@@ -263,7 +402,7 @@ function ViewTable( {
 	);
 
 	return (
-		<div className="dataviews-view-table-wrapper">
+		<>
 			<table
 				className="dataviews-view-table"
 				aria-busy={ isLoading }
@@ -285,6 +424,7 @@ function ViewTable( {
 									selection={ selection }
 									onSelectionChange={ onSelectionChange }
 									data={ data }
+									actions={ actions }
 								/>
 							</th>
 						) }
@@ -347,78 +487,19 @@ function ViewTable( {
 				<tbody>
 					{ hasData &&
 						usedData.map( ( item, index ) => (
-							<tr
+							<TableRow
 								key={ getItemId( item ) }
-								className={ classnames(
-									'dataviews-view-table__row',
-									{
-										'is-selected': selection.includes(
-											getItemId( item ) || index
-										),
-									}
-								) }
-							>
-								{ hasBulkActions && (
-									<td
-										className="dataviews-view-table__checkbox-column"
-										style={ {
-											width: 20,
-											minWidth: 20,
-										} }
-									>
-										<div className="dataviews-view-table__cell-content-wrapper">
-											<SingleSelectionCheckbox
-												id={
-													getItemId( item ) || index
-												}
-												item={ item }
-												selection={ selection }
-												onSelectionChange={
-													onSelectionChange
-												}
-												getItemId={ getItemId }
-												data={ data }
-												primaryField={ primaryField }
-											/>
-										</div>
-									</td>
-								) }
-								{ visibleFields.map( ( field ) => (
-									<td
-										key={ field.id }
-										style={ {
-											width: field.width || undefined,
-											minWidth:
-												field.minWidth || undefined,
-											maxWidth:
-												field.maxWidth || undefined,
-										} }
-									>
-										<div
-											className={ classnames(
-												'dataviews-view-table__cell-content-wrapper',
-												{
-													'dataviews-view-table__primary-field':
-														primaryField?.id ===
-														field.id,
-												}
-											) }
-										>
-											{ field.render( {
-												item,
-											} ) }
-										</div>
-									</td>
-								) ) }
-								{ !! actions?.length && (
-									<td className="dataviews-view-table__actions-column">
-										<ItemActions
-											item={ item }
-											actions={ actions }
-										/>
-									</td>
-								) }
-							</tr>
+								item={ item }
+								hasBulkActions={ hasBulkActions }
+								actions={ actions }
+								id={ getItemId( item ) || index }
+								visibleFields={ visibleFields }
+								primaryField={ primaryField }
+								selection={ selection }
+								getItemId={ getItemId }
+								onSelectionChange={ onSelectionChange }
+								data={ data }
+							/>
 						) ) }
 				</tbody>
 			</table>
@@ -430,10 +511,10 @@ function ViewTable( {
 				id={ tableNoticeId }
 			>
 				{ ! hasData && (
-					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				) }
 			</div>
-		</div>
+		</>
 	);
 }