Skip to content

Commit

Permalink
Filter to applicable items on table and bulk edit selection.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Feb 14, 2024
1 parent dab0803 commit c62406c
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 74 deletions.
18 changes: 17 additions & 1 deletion packages/dataviews/src/bulk-actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 ) )
Expand Down Expand Up @@ -167,7 +183,7 @@ export default function BulkActions( {
onClick={ () => {
onSelectionChange( data );
} }
suffix={ data.length }
suffix={ numberSelectableItems }
>
{ __( 'Select all' ) }
</DropdownMenuItem>
Expand Down
166 changes: 93 additions & 73 deletions packages/dataviews/src/view-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 (
<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">
{ hasPossibleBulkAction && (
<SingleSelectionCheckbox
id={ id }
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>
);
}

function ViewTable( {
view,
onChangeView,
Expand All @@ -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 ) {
Expand Down Expand Up @@ -348,78 +427,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>
Expand Down

0 comments on commit c62406c

Please sign in to comment.