{
if ( activeElement === undefined ) {
@@ -62,127 +54,145 @@ const FilterText = ( { activeElement, filterInView, filter } ) => {
);
};
-function WithSeparators( { children } ) {
- return Children.toArray( children )
- .filter( Boolean )
- .map( ( child, i ) => (
-
- { i > 0 && }
- { child }
-
- ) );
+function OperatorSelector( { filter, view, onChangeView } ) {
+ const operatorOptions = filter.operators?.map( ( operator ) => ( {
+ value: operator,
+ label: OPERATORS[ operator ]?.label,
+ } ) );
+ const currentFilter = view.filters.find(
+ ( _filter ) => _filter.field === filter.field
+ );
+ const value = currentFilter?.operator || filter.operators[ 0 ];
+ return (
+ operatorOptions.length > 1 && (
+
+
+ { filter.name }
+
+
+ {
+ const newFilters = currentFilter
+ ? [
+ ...view.filters.map( ( _filter ) => {
+ if ( _filter.field === filter.field ) {
+ return {
+ ..._filter,
+ operator: newValue,
+ };
+ }
+ return _filter;
+ } ),
+ ]
+ : [
+ ...view.filters,
+ {
+ field: filter.field,
+ operator: newValue,
+ },
+ ];
+ onChangeView( {
+ ...view,
+ page: 1,
+ filters: newFilters,
+ } );
+ } }
+ size="small"
+ __nextHasNoMarginBottom
+ hideLabelFromVision
+ />
+
+ )
+ );
}
-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
+function ResetFilter( { filter, view, onChangeView, addFilterRef } ) {
+ const isDisabled =
+ filter.isPrimary &&
+ view.filters.find( ( _filter ) => _filter.field === filter.field )
+ ?.value === undefined;
+ return (
+
+
+
);
+}
+
+export default function FilterSummary( {
+ addFilterRef,
+ openedFilter,
+ ...commonProps
+} ) {
+ const toggleRef = useRef();
+ const { filter, view } = commonProps;
+ const filterInView = view.filters.find( ( f ) => f.field === filter.field );
const activeElement = filter.elements.find(
( element ) => element.value === filterInView?.value
);
- const activeOperator = filterInView?.operator || filter.operators[ 0 ];
-
return (
-
+ {
+ toggleRef.current?.focus();
+ } }
+ renderToggle={ ( { isOpen, onToggle } ) => (
+
- }
- >
-
-
- { filter.elements.map( ( element ) => {
- const isActive = activeElement?.value === element.value;
- return (
-
- onChangeView( {
- ...view,
- page: 1,
- filters: [
- ...otherFilters,
- {
- field: filter.field,
- operator: activeOperator,
- value: isActive
- ? undefined
- : element.value,
- },
- ],
- } )
- }
- >
-
- { element.label }
-
- { !! element.description && (
-
- { element.description }
-
- ) }
-
- );
- } ) }
-
- { filter.operators.length > 1 && (
-
- { OPERATORS[ activeOperator ]?.label }
-
- }
- >
-
- { __( 'Conditions' ) }
-
-
- }
- >
- { Object.entries( OPERATORS ).map(
- ( [ operator, { label, key } ] ) => (
- {
- onChangeView( {
- ...view,
- page: 1,
- filters: [
- ...otherFilters,
- {
- field: filter.field,
- operator: e.target.value,
- value: filterInView?.value,
- },
- ],
- } );
- } }
- >
-
- { label }
-
-
- )
- ) }
-
- ) }
-
-
+ ) }
+ renderContent={ () => {
+ return (
+
+
+
+
+
+ );
+ } }
+ />
);
}
diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js
index a3dc193605620..80008fb6e569d 100644
--- a/packages/dataviews/src/filters.js
+++ b/packages/dataviews/src/filters.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { memo } from '@wordpress/element';
+import { memo, useRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -9,24 +9,17 @@ import { memo } from '@wordpress/element';
import FilterSummary from './filter-summary';
import AddFilter from './add-filter';
import ResetFilters from './reset-filters';
-import {
- ENUMERATION_TYPE,
- OPERATOR_IN,
- OPERATOR_NOT_IN,
- LAYOUT_LIST,
-} from './constants';
+import { sanitizeOperators } from './utils';
+import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
-const sanitizeOperators = ( field ) => {
- let operators = field.filterBy?.operators;
- if ( ! operators || ! Array.isArray( operators ) ) {
- operators = [ OPERATOR_IN, OPERATOR_NOT_IN ];
- }
- return operators.filter( ( operator ) =>
- [ OPERATOR_IN, OPERATOR_NOT_IN ].includes( operator )
- );
-};
-
-const Filters = memo( function Filters( { fields, view, onChangeView } ) {
+const Filters = memo( function Filters( {
+ fields,
+ view,
+ onChangeView,
+ openedFilter,
+ setOpenedFilter,
+} ) {
+ const addFilterRef = useRef();
const filters = [];
fields.forEach( ( field ) => {
if ( ! field.type ) {
@@ -63,19 +56,30 @@ const Filters = memo( function Filters( { fields, view, onChangeView } ) {
} );
}
} );
-
+ // Sort filters by primary property. We need the primary filters to be first.
+ // Then we sort by name.
+ filters.sort( ( a, b ) => {
+ if ( a.isPrimary && ! b.isPrimary ) {
+ return -1;
+ }
+ if ( ! a.isPrimary && b.isPrimary ) {
+ return 1;
+ }
+ return a.name.localeCompare( b.name );
+ } );
const addFilter = (
);
const filterComponents = [
- addFilter,
...filters.map( ( filter ) => {
- if ( ! filter.isVisible || view.type === LAYOUT_LIST ) {
+ if ( ! filter.isVisible ) {
return null;
}
@@ -85,12 +89,15 @@ const Filters = memo( function Filters( { fields, view, onChangeView } ) {
filter={ filter }
view={ view }
onChangeView={ onChangeView }
+ addFilterRef={ addFilterRef }
+ openedFilter={ openedFilter }
/>
);
} ),
+ addFilter,
];
- if ( filterComponents.length > 1 && view.type !== LAYOUT_LIST ) {
+ if ( filterComponents.length > 1 ) {
filterComponents.push(
- filters.some( ( f ) => f.field === field && f.isPrimary );
- let isDisabled = true;
- if ( view.search !== '' ) {
- isDisabled = false;
- } else if (
- view.filters?.length > 0 &&
- ( view.filters.some( ( filter ) => filter.value !== undefined ) ||
- view.filters.some(
- ( filter ) =>
- filter.value === undefined && ! isPrimary( filter.field )
- ) )
- ) {
- isDisabled = false;
- }
-
+ filters.some(
+ ( _filter ) => _filter.field === field && _filter.isPrimary
+ );
+ const isDisabled =
+ ! view.search &&
+ ! view.filters?.some(
+ ( _filter ) =>
+ _filter.value !== undefined || ! isPrimary( _filter.field )
+ );
return (