Skip to content

Commit

Permalink
DataViews: align filter implementations (#57059)
Browse files Browse the repository at this point in the history
  • Loading branch information
@oandregal @artemiomorales
oandregal authored and artemiomorales committed Jan 4, 2024
1 parent 9bf422b commit 3f25916
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 176 deletions.
134 changes: 60 additions & 74 deletions packages/dataviews/src/add-filter.js
View file
Expand Up @@ -73,6 +73,9 @@ export default function AddFilter( { filters, view, onChangeView } ) {
const filterInView = view.filters.find(
( f ) => f.field === filter.field
);
const otherFilters = view.filters.filter(
( f ) => f.field !== filter.field
);
const activeElement = filter.elements.find(
( element ) => element.value === filterInView?.value
);
Expand Down Expand Up @@ -107,50 +110,45 @@ export default function AddFilter( { filters, view, onChangeView } ) {
>
<WithSeparators>
<DropdownMenuGroup>
{ filter.elements.map( ( element ) => (
<DropdownMenuItem
key={ element.value }
role="menuitemradio"
aria-checked={
activeElement?.value ===
element.value
}
prefix={
activeElement?.value ===
element.value && (
<Icon icon={ check } />
)
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView(
( currentView ) => ( {
...currentView,
{ filter.elements.map( ( element ) => {
const isActive =
activeElement?.value ===
element.value;
return (
<DropdownMenuItem
key={ element.value }
role="menuitemradio"
aria-checked={ isActive }
prefix={
isActive && (
<Icon
icon={ check }
/>
)
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView( {
...view,
page: 1,
filters: [
...currentView.filters.filter(
( f ) =>
f.field !==
filter.field
),
...otherFilters,
{
field: filter.field,
operator:
activeOperator,
value:
activeElement?.value ===
element.value
? undefined
: element.value,
value: isActive
? undefined
: element.value,
},
],
} )
);
} }
>
{ element.label }
</DropdownMenuItem>
) ) }
} );
} }
>
{ element.label }
</DropdownMenuItem>
);
} ) }
</DropdownMenuGroup>
{ filter.operators.length > 1 && (
<DropdownSubMenu
Expand Down Expand Up @@ -191,25 +189,19 @@ export default function AddFilter( { filters, view, onChangeView } ) {
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView(
( currentView ) => ( {
...currentView,
page: 1,
filters: [
...view.filters.filter(
( f ) =>
f.field !==
filter.field
),
{
field: filter.field,
operator:
OPERATOR_IN,
value: filterInView?.value,
},
],
} )
);
onChangeView( {
...view,
page: 1,
filters: [
...otherFilters,
{
field: filter.field,
operator:
OPERATOR_IN,
value: filterInView?.value,
},
],
} );
} }
>
{ __( 'Is' ) }
Expand All @@ -229,25 +221,19 @@ export default function AddFilter( { filters, view, onChangeView } ) {
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView(
( currentView ) => ( {
...currentView,
page: 1,
filters: [
...view.filters.filter(
( f ) =>
f.field !==
filter.field
),
{
field: filter.field,
operator:
OPERATOR_NOT_IN,
value: filterInView?.value,
},
],
} )
);
onChangeView( {
...view,
page: 1,
filters: [
...otherFilters,
{
field: filter.field,
operator:
OPERATOR_NOT_IN,
value: filterInView?.value,
},
],
} );
} }
>
{ __( 'Is not' ) }
Expand Down
77 changes: 31 additions & 46 deletions packages/dataviews/src/filter-summary.js
View file
Expand Up @@ -74,9 +74,13 @@ function WithSeparators( { children } ) {

export default function FilterSummary( { filter, view, onChangeView } ) {
const filterInView = view.filters.find( ( f ) => f.field === filter.field );
const otherFilters = view.filters.filter(
( f ) => f.field !== filter.field
);
const activeElement = filter.elements.find(
( element ) => element.value === filterInView?.value
);
const activeOperator = filterInView?.operator || filter.operators[ 0 ];

return (
<DropdownMenu
Expand All @@ -95,40 +99,28 @@ export default function FilterSummary( { filter, view, onChangeView } ) {
<WithSeparators>
<DropdownMenuGroup>
{ filter.elements.map( ( element ) => {
const isActive = activeElement?.value === element.value;
return (
<DropdownMenuItem
key={ element.value }
role="menuitemradio"
aria-checked={
activeElement?.value === element.value
}
prefix={
activeElement?.value === element.value && (
<Icon icon={ check } />
)
}
aria-checked={ isActive }
prefix={ isActive && <Icon icon={ check } /> }
onSelect={ () =>
onChangeView( ( currentView ) => ( {
...currentView,
onChangeView( {
...view,
page: 1,
filters: [
...view.filters.filter(
( f ) =>
f.field !== filter.field
),
...otherFilters,
{
field: filter.field,
operator:
filterInView?.operator ||
filter.operators[ 0 ],
value:
activeElement?.value ===
element.value
? undefined
: element.value,
operator: activeOperator,
value: isActive
? undefined
: element.value,
},
],
} ) )
} )
}
>
{ element.label }
Expand All @@ -142,9 +134,10 @@ export default function FilterSummary( { filter, view, onChangeView } ) {
<DropdownSubMenuTrigger
suffix={
<>
{ filterInView.operator === OPERATOR_IN
? __( 'Is' )
: __( 'Is not' ) }
{ activeOperator === OPERATOR_IN &&
__( 'Is' ) }
{ activeOperator === OPERATOR_NOT_IN &&
__( 'Is not' ) }
<Icon icon={ chevronRightSmall } />{ ' ' }
</>
}
Expand All @@ -156,59 +149,51 @@ export default function FilterSummary( { filter, view, onChangeView } ) {
<DropdownMenuItem
key="in-filter"
role="menuitemradio"
aria-checked={
filterInView?.operator === OPERATOR_IN
}
aria-checked={ activeOperator === OPERATOR_IN }
prefix={
filterInView?.operator === OPERATOR_IN && (
activeOperator === OPERATOR_IN && (
<Icon icon={ check } />
)
}
onSelect={ () =>
onChangeView( ( currentView ) => ( {
...currentView,
onChangeView( {
...view,
page: 1,
filters: [
...view.filters.filter(
( f ) => f.field !== filter.field
),
...otherFilters,
{
field: filter.field,
operator: OPERATOR_IN,
value: filterInView?.value,
},
],
} ) )
} )
}
>
{ __( 'Is' ) }
</DropdownMenuItem>
<DropdownMenuItem
key="not-in-filter"
role="menuitemradio"
aria-checked={
filterInView?.operator === OPERATOR_NOT_IN
}
aria-checked={ activeOperator === OPERATOR_NOT_IN }
prefix={
filterInView?.operator === OPERATOR_NOT_IN && (
activeOperator === OPERATOR_NOT_IN && (
<Icon icon={ check } />
)
}
onSelect={ () =>
onChangeView( ( currentView ) => ( {
...currentView,
onChangeView( {
...view,
page: 1,
filters: [
...view.filters.filter(
( f ) => f.field !== filter.field
),
...otherFilters,
{
field: filter.field,
operator: OPERATOR_NOT_IN,
value: filterInView?.value,
},
],
} ) )
} )
}
>
{ __( 'Is not' ) }
Expand Down

0 comments on commit 3f25916

Please sign in to comment.