Skip to content

Commit

Permalink
DataViews: update filter component (#56110)
Browse files Browse the repository at this point in the history
  • Loading branch information
oandregal authored Nov 22, 2023
1 parent 9c6f6b1 commit a791158
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 84 deletions.
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/dataviews/add-filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ export default function AddFilter( { fields, view, onChangeView } ) {
<Button
disabled={ filters.length === view.filters?.length }
__experimentalIsFocusable
icon={ plus }
variant="tertiary"
size="compact"
>
<Icon icon={ plus } style={ { flexShrink: 0 } } />
{ __( 'Add filter' ) }
</Button>
}
Expand Down
13 changes: 1 addition & 12 deletions packages/edit-site/src/components/dataviews/filters.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
Expand All @@ -23,13 +18,7 @@ export default function Filters( { fields, view, onChangeView } ) {
filters.push( {
field: field.id,
name: field.header,
elements: [
{
value: '',
label: __( 'All' ),
},
...( field.elements || [] ),
],
elements: field.elements || [],
isVisible: view.filters.some(
( f ) =>
f.field === field.id && f.operator === OPERATOR_IN
Expand Down
105 changes: 59 additions & 46 deletions packages/edit-site/src/components/dataviews/in-filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,78 @@
* WordPress dependencies
*/
import {
__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
SelectControl,
Button,
privateApis as componentsPrivateApis,
Icon,
} from '@wordpress/components';
import { chevronDown } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { OPERATOR_IN } from './constants';
import { unlock } from '../../lock-unlock';

const {
DropdownMenuV2: DropdownMenu,
DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
} = unlock( componentsPrivateApis );

export default ( { filter, view, onChangeView } ) => {
const valueFound = view.filters.find(
( f ) => f.field === filter.field && f.operator === OPERATOR_IN
const filterInView = view.filters.find( ( f ) => f.field === filter.field );
const activeElement = filter.elements.find(
( element ) => element.value === filterInView?.value
);

const activeValue =
! valueFound || ! valueFound.hasOwnProperty( 'value' )
? ''
: valueFound.value;

const id = `dataviews__filters-in-${ filter.field }`;

return (
<SelectControl
id={ id }
__nextHasNoMarginBottom
value={ activeValue }
prefix={
<InputControlPrefixWrapper
as="label"
htmlFor={ id }
className="dataviews__select-control-prefix"
>
{ sprintf(
/* translators: filter name. */
__( '%s:' ),
filter.name
) }
</InputControlPrefixWrapper>
<DropdownMenu
key={ filter.field }
trigger={
<Button variant="tertiary" size="compact" label={ filter.name }>
{ activeElement !== undefined
? sprintf(
/* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
__( '%1$s is %2$s' ),
filter.name,
activeElement.label
)
: filter.name }
<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
</Button>
}
options={ filter.elements }
onChange={ ( value ) => {
const filters = view.filters.filter(
( f ) =>
f.field !== filter.field || f.operator !== OPERATOR_IN
>
{ filter.elements.map( ( element ) => {
return (
<DropdownMenuCheckboxItem
key={ element.value }
value={ element.value }
checked={ activeElement?.value === element.value }
onSelect={ () =>
onChangeView( ( currentView ) => ( {
...currentView,
page: 1,
filters: [
...view.filters.filter(
( f ) => f.field !== filter.field
),
{
field: filter.field,
operator: OPERATOR_IN,
value:
activeElement?.value ===
element.value
? undefined
: element.value,
},
],
} ) )
}
>
{ element.label }
</DropdownMenuCheckboxItem>
);

filters.push( {
field: filter.field,
operator: OPERATOR_IN,
value,
} );

onChangeView( ( currentView ) => ( {
...currentView,
page: 1,
filters,
} ) );
} }
/>
} ) }
</DropdownMenu>
);
};
35 changes: 10 additions & 25 deletions packages/edit-site/src/components/dataviews/view-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,7 @@ function HeaderMenu( { dataView, header } ) {
if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
filter = {
field: header.column.columnDef.id,
elements: [
{
value: '',
label: __( 'All' ),
},
...( header.column.columnDef.elements || [] ),
],
elements: header.column.columnDef.elements || [],
};
}
const isFilterable = !! filter;
Expand Down Expand Up @@ -166,11 +160,6 @@ function HeaderMenu( { dataView, header } ) {
)[ 0 ] === filter.field
);

// Set the empty item as active if the filter is not set.
if ( ! columnFilter && element.value === '' ) {
isActive = true;
}

if ( columnFilter ) {
const value =
Object.values( columnFilter )[ 0 ];
Expand Down Expand Up @@ -205,19 +194,15 @@ function HeaderMenu( { dataView, header } ) {
}
);

if ( element.value === '' ) {
dataView.setColumnFilters(
otherFilters
);
} else {
dataView.setColumnFilters( [
...otherFilters,
{
[ filter.field +
':in' ]: element.value,
},
] );
}
dataView.setColumnFilters( [
...otherFilters,
{
[ filter.field + ':in' ]:
isActive
? undefined
: element.value,
},
] );
} }
>
{ element.label }
Expand Down

0 comments on commit a791158

Please sign in to comment.