@wordpress/dataviews 0.6.0 → 0.7.0

package/src/view-table.js

@@ -14,6 +14,7 @@ import {
 	Icon,
 	privateApis as componentsPrivateApis,
 	CheckboxControl,
+	Spinner,
 } from '@wordpress/components';
 import {
 	forwardRef,
@@ -23,6 +24,7 @@ import {
 	useState,
 	Children,
 	Fragment,
+	useMemo,
 } 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,
@@ -186,8 +192,20 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 	);
 } );
 
-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,81 @@ function BulkSelectionCheckbox( { selection, onSelectionChange, data } ) {
 	);
 }
 
+function TableRow( {
+	hasBulkActions,
+	item,
+	actions,
+	id,
+	visibleFields,
+	primaryField,
+	selection,
+	getItemId,
+	onSelectionChange,
+	data,
+} ) {
+	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
+	return (
+		<tr
+			className={ classnames( 'dataviews-view-table__row', {
+				'is-selected':
+					hasPossibleBulkAction && selection.includes( id ),
+			} ) }
+		>
+			{ 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 +312,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 +356,7 @@ function ViewTable( {
 	);
 
 	return (
-		<div className="dataviews-view-table-wrapper">
+		<>
 			<table
 				className="dataviews-view-table"
 				aria-busy={ isLoading }
@@ -285,6 +378,7 @@ function ViewTable( {
 									selection={ selection }
 									onSelectionChange={ onSelectionChange }
 									data={ data }
+									actions={ actions }
 								/>
 							</th>
 						) }
@@ -347,78 +441,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 +465,10 @@ function ViewTable( {
 				id={ tableNoticeId }
 			>
 				{ ! hasData && (
-					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				) }
 			</div>
-		</div>
+		</>
 	);
 }