diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js index a13e2cdf25865b..1ede6ebcd8b75a 100644 --- a/packages/edit-site/src/components/dataviews/view-actions.js +++ b/packages/edit-site/src/components/dataviews/view-actions.js @@ -13,6 +13,8 @@ import { check, blockTable, chevronDown, + arrowUp, + arrowDown, } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; @@ -67,7 +69,7 @@ function PageSizeMenu( { dataView } ) { suffix={ <> { currenPageSize } - { ' ' } + } > @@ -116,20 +118,20 @@ function FieldsVisibilityMenu( { dataView } ) { } > - { hideableFields?.map( ( column ) => { + { hideableFields?.map( ( field ) => { return ( + field.getIsVisible() && } onSelect={ ( event ) => { event.preventDefault(); - column.getToggleVisibilityHandler()( event ); + field.getToggleVisibilityHandler()( event ); } } role="menuitemcheckbox" > - { column.columnDef.header } + { field.columnDef.header } ); } ) } @@ -137,6 +139,91 @@ function FieldsVisibilityMenu( { dataView } ) { ); } +// This object is used to construct the sorting options per sortable field. +const sortingItemsInfo = { + asc: { icon: arrowUp, label: __( 'Sort ascending' ) }, + desc: { icon: arrowDown, label: __( 'Sort descending' ) }, +}; +function SortMenu( { dataView } ) { + const sortableFields = dataView + .getAllColumns() + .filter( ( columnn ) => columnn.getCanSort() ); + if ( ! sortableFields?.length ) { + return null; + } + const currentSortedField = sortableFields.find( ( field ) => + field.getIsSorted() + ); + return ( + + { currentSortedField?.columnDef.header } + + + } + > + { __( 'Sort by' ) } + + } + > + { sortableFields?.map( ( field ) => { + const sortedDirection = field.getIsSorted(); + return ( + } + > + { field.columnDef.header } + + } + side="left" + > + { Object.entries( sortingItemsInfo ).map( + ( [ direction, info ] ) => { + return ( + } + suffix={ + sortedDirection === direction && ( + + ) + } + onSelect={ ( event ) => { + event.preventDefault(); + if ( + sortedDirection === direction + ) { + dataView.resetSorting(); + } else { + dataView.setSorting( [ + { + id: field.id, + desc: + direction === + 'desc', + }, + ] ); + } + } } + > + { info.label } + + ); + } + ) } + + ); + } ) } + + ); +} + export default function ViewActions( { dataView, className } ) { return ( +