Skip to content

Commit

Permalink
[Data Views]: Add drop down with action in headers (#55293)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras authored Oct 12, 2023
1 parent 1e0c9c6 commit c268241
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 49 deletions.
73 changes: 59 additions & 14 deletions packages/edit-site/src/components/dataviews/list-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,76 @@ import { flexRender } from '@tanstack/react-table';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { chevronDown, chevronUp } from '@wordpress/icons';
import { Button } from '@wordpress/components';
import { chevronDown, chevronUp, unseen } from '@wordpress/icons';
import {
Button,
Icon,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { forwardRef } from '@wordpress/element';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { FieldSortingItems } from './view-actions';

const {
DropdownMenuV2,
DropdownMenuGroupV2,
DropdownMenuItemV2,
DropdownMenuSeparatorV2,
} = unlock( componentsPrivateApis );

const sortIcons = { asc: chevronUp, desc: chevronDown };
function Header( { header } ) {
function HeaderMenu( { dataView, header } ) {
if ( header.isPlaceholder ) {
return null;
}
const text = flexRender(
header.column.columnDef.header,
header.getContext()
);
if ( ! header.column.getCanSort() ) {
const isSortable = !! header.column.getCanSort();
const isHidable = !! header.column.getCanHide();
if ( ! isSortable && ! isHidable ) {
return text;
}
const sortDirection = header.column.getIsSorted();
return (
<Button
onClick={ header.column.getToggleSortingHandler() }
icon={ sortIcons[ sortDirection ] }
iconPosition="right"
text={ text }
style={ { padding: 0 } }
/>
<DropdownMenuV2
align="start"
trigger={
<Button
icon={ sortIcons[ header.column.getIsSorted() ] }
iconPosition="right"
text={ text }
style={ { padding: 0 } }
/>
}
>
{ isSortable && (
<DropdownMenuGroupV2>
<FieldSortingItems
field={ header.column }
dataView={ dataView }
/>
</DropdownMenuGroupV2>
) }
{ isSortable && isHidable && <DropdownMenuSeparatorV2 /> }
{ isHidable && (
<DropdownMenuItemV2
prefix={ <Icon icon={ unseen } /> }
onSelect={ ( event ) => {
event.preventDefault();
header.column.getToggleVisibilityHandler()( event );
} }
>
{ __( 'Hide' ) }
</DropdownMenuItemV2>
) }
</DropdownMenuV2>
);
}

function ListView( { dataView, className, isLoading = false }, ref ) {
const { rows } = dataView.getRowModel();
const hasRows = !! rows?.length;
Expand Down Expand Up @@ -66,7 +108,10 @@ function ListView( { dataView, className, isLoading = false }, ref ) {
.maxWidth || undefined,
} }
>
<Header header={ header } />
<HeaderMenu
dataView={ dataView }
header={ header }
/>
</th>
) ) }
</tr>
Expand Down
64 changes: 29 additions & 35 deletions packages/edit-site/src/components/dataviews/view-actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,31 @@ const sortingItemsInfo = {
asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
desc: { icon: arrowDown, label: __( 'Sort descending' ) },
};
export function FieldSortingItems( { field, dataView } ) {
const sortedDirection = field.getIsSorted();
return Object.entries( sortingItemsInfo ).map( ( [ direction, info ] ) => (
<DropdownMenuItemV2
key={ direction }
prefix={ <Icon icon={ info.icon } /> }
suffix={ sortedDirection === direction && <Icon icon={ check } /> }
onSelect={ ( event ) => {
event.preventDefault();
if ( sortedDirection === direction ) {
dataView.resetSorting();
} else {
dataView.setSorting( [
{
id: field.id,
desc: direction === 'desc',
},
] );
}
} }
>
{ info.label }
</DropdownMenuItemV2>
) );
}
function SortMenu( { dataView } ) {
const sortableFields = dataView
.getAllColumns()
Expand All @@ -170,7 +195,6 @@ function SortMenu( { dataView } ) {
}
>
{ sortableFields?.map( ( field ) => {
const sortedDirection = field.getIsSorted();
return (
<DropdownSubMenuV2
key={ field.id }
Expand All @@ -183,40 +207,10 @@ function SortMenu( { dataView } ) {
}
side="left"
>
{ Object.entries( sortingItemsInfo ).map(
( [ direction, info ] ) => {
return (
<DropdownMenuItemV2
key={ direction }
prefix={ <Icon icon={ info.icon } /> }
suffix={
sortedDirection === direction && (
<Icon icon={ check } />
)
}
onSelect={ ( event ) => {
event.preventDefault();
if (
sortedDirection === direction
) {
dataView.resetSorting();
} else {
dataView.setSorting( [
{
id: field.id,
desc:
direction ===
'desc',
},
] );
}
} }
>
{ info.label }
</DropdownMenuItemV2>
);
}
) }
<FieldSortingItems
field={ field }
dataView={ dataView }
/>
</DropdownSubMenuV2>
);
} ) }
Expand Down

1 comment on commit c268241

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in c268241.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6494557303
📝 Reported issues:

Please sign in to comment.