Skip to content

Commit

Permalink
Refactor dataviews table layout header menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@ciampo
ciampo committed Dec 5, 2024
1 parent 8324bd3 commit ff2ee13
Showing 1 changed file with 129 additions and 120 deletions.
249 changes: 129 additions & 120 deletions packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,151 +102,160 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(

return (
<Menu
align="start"
trigger={
<Button
size="compact"
className="dataviews-view-table-header-button"
ref={ ref }
variant="tertiary"
>
{ header }
{ view.sort && isSorted && (
<span aria-hidden="true">
{ sortArrows[ view.sort.direction ] }
</span>
) }
</Button>
}
style={ { minWidth: '240px' } }
// align="start" TODO: align prop doesn't exist on Menu — is it ok to just remove
>
<WithMenuSeparators>
{ isSortable && (
<Menu.Group>
{ SORTING_DIRECTIONS.map(
( direction: SortDirection ) => {
const isChecked =
view.sort &&
isSorted &&
view.sort.direction === direction;
<Menu.TriggerButton
render={
<Button
size="compact"
className="dataviews-view-table-header-button"
ref={ ref }
variant="tertiary"
/>
}
>
{ header }
{ view.sort && isSorted && (
<span aria-hidden="true">
{ sortArrows[ view.sort.direction ] }
</span>
) }
</Menu.TriggerButton>
<Menu.Popover style={ { minWidth: '240px' } }>
<WithMenuSeparators>
{ isSortable && (
<Menu.Group>
{ SORTING_DIRECTIONS.map(
( direction: SortDirection ) => {
const isChecked =
view.sort &&
isSorted &&
view.sort.direction === direction;

const value = `${ fieldId }-${ direction }`;
const value = `${ fieldId }-${ direction }`;

return (
<Menu.RadioItem
key={ value }
// All sorting radio items share the same name, so that
// selecting a sorting option automatically deselects the
// previously selected one, even if it is displayed in
// another submenu. The field and direction are passed via
// the `value` prop.
name="view-table-sorting"
value={ value }
checked={ isChecked }
onChange={ () => {
onChangeView( {
...view,
sort: {
field: fieldId,
direction,
},
} );
} }
>
<Menu.ItemLabel>
{ sortLabels[ direction ] }
</Menu.ItemLabel>
</Menu.RadioItem>
);
}
) }
</Menu.Group>
) }
{ canAddFilter && (
return (
<Menu.RadioItem
key={ value }
// All sorting radio items share the same name, so that
// selecting a sorting option automatically deselects the
// previously selected one, even if it is displayed in
// another submenu. The field and direction are passed via
// the `value` prop.
name="view-table-sorting"
value={ value }
checked={ isChecked }
onChange={ () => {
onChangeView( {
...view,
sort: {
field: fieldId,
direction,
},
} );
} }
>
<Menu.ItemLabel>
{ sortLabels[ direction ] }
</Menu.ItemLabel>
</Menu.RadioItem>
);
}
) }
</Menu.Group>
) }
{ canAddFilter && (
<Menu.Group>
<Menu.Item
prefix={ <Icon icon={ funnel } /> }
onClick={ () => {
setOpenedFilter( fieldId );
onChangeView( {
...view,
page: 1,
filters: [
...( view.filters || [] ),
{
field: fieldId,
value: undefined,
operator: operators[ 0 ],
},
],
} );
} }
>
<Menu.ItemLabel>
{ __( 'Add filter' ) }
</Menu.ItemLabel>
</Menu.Item>
</Menu.Group>
) }
<Menu.Group>
<Menu.Item
prefix={ <Icon icon={ funnel } /> }
prefix={ <Icon icon={ arrowLeft } /> }
disabled={ index < 1 }
onClick={ () => {
setOpenedFilter( fieldId );
onChangeView( {
...view,
page: 1,
filters: [
...( view.filters || [] ),
{
field: fieldId,
value: undefined,
operator: operators[ 0 ],
},
fields: [
...( visibleFieldIds.slice(
0,
index - 1
) ?? [] ),
fieldId,
visibleFieldIds[ index - 1 ],
...visibleFieldIds.slice( index + 1 ),
],
} );
} }
>
<Menu.ItemLabel>
{ __( 'Add filter' ) }
{ __( 'Move left' ) }
</Menu.ItemLabel>
</Menu.Item>
</Menu.Group>
) }
<Menu.Group>
<Menu.Item
prefix={ <Icon icon={ arrowLeft } /> }
disabled={ index < 1 }
onClick={ () => {
onChangeView( {
...view,
fields: [
...( visibleFieldIds.slice(
0,
index - 1
) ?? [] ),
fieldId,
visibleFieldIds[ index - 1 ],
...visibleFieldIds.slice( index + 1 ),
],
} );
} }
>
<Menu.ItemLabel>{ __( 'Move left' ) }</Menu.ItemLabel>
</Menu.Item>
<Menu.Item
prefix={ <Icon icon={ arrowRight } /> }
disabled={ index >= visibleFieldIds.length - 1 }
onClick={ () => {
onChangeView( {
...view,
fields: [
...( visibleFieldIds.slice( 0, index ) ??
[] ),
visibleFieldIds[ index + 1 ],
fieldId,
...visibleFieldIds.slice( index + 2 ),
],
} );
} }
>
<Menu.ItemLabel>{ __( 'Move right' ) }</Menu.ItemLabel>
</Menu.Item>
{ isHidable && field && (
<Menu.Item
prefix={ <Icon icon={ unseen } /> }
prefix={ <Icon icon={ arrowRight } /> }
disabled={ index >= visibleFieldIds.length - 1 }
onClick={ () => {
onHide( field );
onChangeView( {
...view,
fields: visibleFieldIds.filter(
( id ) => id !== fieldId
),
fields: [
...( visibleFieldIds.slice(
0,
index
) ?? [] ),
visibleFieldIds[ index + 1 ],
fieldId,
...visibleFieldIds.slice( index + 2 ),
],
} );
} }
>
<Menu.ItemLabel>
{ __( 'Hide column' ) }
{ __( 'Move right' ) }
</Menu.ItemLabel>
</Menu.Item>
) }
</Menu.Group>
</WithMenuSeparators>
{ isHidable && field && (
<Menu.Item
prefix={ <Icon icon={ unseen } /> }
onClick={ () => {
onHide( field );
onChangeView( {
...view,
fields: visibleFieldIds.filter(
( id ) => id !== fieldId
),
} );
} }
>
<Menu.ItemLabel>
{ __( 'Hide column' ) }
</Menu.ItemLabel>
</Menu.Item>
) }
</Menu.Group>
</WithMenuSeparators>
</Menu.Popover>
</Menu>
);
} );
Expand Down

0 comments on commit ff2ee13

Please sign in to comment.