diff --git a/packages/dataviews/src/bulk-actions.js b/packages/dataviews/src/bulk-actions.js index 528092c93322a..1569940ce45d3 100644 --- a/packages/dataviews/src/bulk-actions.js +++ b/packages/dataviews/src/bulk-actions.js @@ -29,6 +29,16 @@ export function useHasAPossibleBulkAction( actions, item ) { }, [ actions, item ] ); } +export function useSomeItemHasAPossibleBulkAction( actions, data ) { + return useMemo( () => { + return data.some( ( item ) => { + return actions.some( ( action ) => { + return action.supportsBulk && action.isEligible( item ); + } ); + } ); + }, [ actions, data ] ); +} + function ActionWithModal( { action, selectedItems, @@ -118,6 +128,12 @@ export default function BulkActions( { const areAllSelected = selection && selection.length === data.length; const [ isMenuOpen, onMenuOpenChange ] = useState( false ); const [ actionWithModal, setActionWithModal ] = useState(); + const numberSelectableItems = useMemo( () => { + return data.filter( ( item ) => { + return bulkActions.some( ( action ) => action.isEligible( item ) ); + } ).length; + }, [ data, bulkActions ] ); + const selectedItems = useMemo( () => { return data.filter( ( item ) => selection.includes( getItemId( item ) ) @@ -167,7 +183,7 @@ export default function BulkActions( { onClick={ () => { onSelectionChange( data ); } } - suffix={ data.length } + suffix={ numberSelectableItems } > { __( 'Select all' ) } diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 18b7e7dd878cd..b1b928639b6c7 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -33,7 +33,10 @@ import { unlock } from './lock-unlock'; import ItemActions from './item-actions'; import { sanitizeOperators } from './utils'; import { ENUMERATION_TYPE, SORTING_DIRECTIONS } from './constants'; -import { useHasAPossibleBulkAction } from './bulk-actions'; +import { + useSomeItemHasAPossibleBulkAction, + useHasAPossibleBulkAction, +} from './bulk-actions'; const { DropdownMenuV2: DropdownMenu, @@ -207,6 +210,82 @@ function BulkSelectionCheckbox( { selection, onSelectionChange, data } ) { ); } +function TableRow( { + hasBulkActions, + item, + actions, + id, + visibleFields, + primaryField, + selection, + getItemId, + onSelectionChange, + data, +} ) { + const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item ); + return ( + + { hasBulkActions && ( + +
+ { hasPossibleBulkAction && ( + + ) } +
+ + ) } + { visibleFields.map( ( field ) => ( + +
+ { field.render( { + item, + } ) } +
+ + ) ) } + { !! actions?.length && ( + + + + ) } + + ); +} + function ViewTable( { view, onChangeView, @@ -223,7 +302,7 @@ function ViewTable( { const headerMenuRefs = useRef( new Map() ); const headerMenuToFocusRef = useRef(); const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState(); - const hasBulkActions = useHasAPossibleBulkAction( actions, data ); + const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data ); useEffect( () => { if ( headerMenuToFocusRef.current ) { @@ -348,78 +427,19 @@ function ViewTable( { { hasData && usedData.map( ( item, index ) => ( - - { hasBulkActions && ( - -
- -
- - ) } - { visibleFields.map( ( field ) => ( - -
- { field.render( { - item, - } ) } -
- - ) ) } - { !! actions?.length && ( - - - - ) } - + item={ item } + hasBulkActions={ hasBulkActions } + actions={ actions } + id={ getItemId( item ) || index } + visibleFields={ visibleFields } + primaryField={ primaryField } + selection={ selection } + getItemId={ getItemId } + onSelectionChange={ onSelectionChange } + data={ data } + /> ) ) }