diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
index 8f1349044d6cf..0645f22821cb9 100644
--- a/packages/edit-site/src/components/dataviews/README.md
+++ b/packages/edit-site/src/components/dataviews/README.md
@@ -154,11 +154,11 @@ Example:
{ item.author }
);
},
+ type: 'enumeration',
elements: [
{ value: 1, label: 'Admin' }
{ value: 2, label: 'User' }
]
- filters: [ 'in' ],
enableSorting: false
}
]
@@ -169,7 +169,7 @@ Example:
- `getValue`: function that returns the value of the field.
- `render`: function that renders the field.
- `elements`: the set of valid values for the field's value.
-- `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment.
+- `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment.
- `enableSorting`: whether the data can be sorted by the given field. True by default.
- `enableHiding`: whether the field can be hidden. True by default.
diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js
index 2cc0051f0f2d4..374a90eab9df0 100644
--- a/packages/edit-site/src/components/dataviews/add-filter.js
+++ b/packages/edit-site/src/components/dataviews/add-filter.js
@@ -22,28 +22,28 @@ const {
DropdownMenuItemV2,
} = unlock( componentsPrivateApis );
-const VALID_OPERATORS = [ OPERATOR_IN ];
+// TODO: find a place where these constants can be shared across components.
+const ENUMERATION_TYPE = 'enumeration';
export default function AddFilter( { fields, view, onChangeView } ) {
const filters = [];
fields.forEach( ( field ) => {
- if ( ! field.filters ) {
+ if ( ! field.type ) {
return;
}
- field.filters.forEach( ( filter ) => {
- if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+ switch ( field.type ) {
+ case ENUMERATION_TYPE:
filters.push( {
field: field.id,
name: field.header,
- operator: filter,
elements: field.elements || [],
isVisible: view.filters.some(
- ( f ) => f.field === field.id && f.operator === filter
+ ( f ) =>
+ f.field === field.id && f.operator === OPERATOR_IN
),
} );
- }
- } );
+ }
} );
if ( filters.length === 0 ) {
@@ -92,7 +92,7 @@ export default function AddFilter( { fields, view, onChangeView } ) {
...currentView.filters,
{
field: filter.field,
- operator: 'in',
+ operator: OPERATOR_IN,
value: element.value,
},
],
diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
index 9c37a7501a155..72ba28fd06326 100644
--- a/packages/edit-site/src/components/dataviews/filters.js
+++ b/packages/edit-site/src/components/dataviews/filters.js
@@ -10,21 +10,20 @@ import { default as InFilter, OPERATOR_IN } from './in-filter';
import AddFilter from './add-filter';
import ResetFilters from './reset-filters';
-const VALID_OPERATORS = [ OPERATOR_IN ];
+const ENUMERATION_TYPE = 'enumeration';
export default function Filters( { fields, view, onChangeView } ) {
const filters = [];
fields.forEach( ( field ) => {
- if ( ! field.filters ) {
+ if ( ! field.type ) {
return;
}
- field.filters.forEach( ( filter ) => {
- if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+ switch ( field.type ) {
+ case ENUMERATION_TYPE:
filters.push( {
field: field.id,
name: field.header,
- operator: filter,
elements: [
{
value: '',
@@ -33,30 +32,26 @@ export default function Filters( { fields, view, onChangeView } ) {
...( field.elements || [] ),
],
isVisible: view.filters.some(
- ( f ) => f.field === field.id && f.operator === filter
+ ( f ) =>
+ f.field === field.id && f.operator === OPERATOR_IN
),
} );
- }
- } );
+ }
} );
- const filterComponents = filters?.map( ( filter ) => {
+ const filterComponents = filters.map( ( filter ) => {
if ( ! filter.isVisible ) {
return null;
}
- if ( OPERATOR_IN === filter.operator ) {
- return (
-
- );
- }
-
- return null;
+ return (
+
+ );
} );
filterComponents.push(
diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
index 4154e0576101c..cb76bab0f870a 100644
--- a/packages/edit-site/src/components/dataviews/in-filter.js
+++ b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -7,6 +7,7 @@ import {
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
+// TODO: find a place where these constants can be shared across components.
export const OPERATOR_IN = 'in';
export default ( { filter, view, onChangeView } ) => {
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index 2fec328631423..fc8b407502579 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -52,6 +52,11 @@ const sortingItemsInfo = {
desc: { icon: arrowDown, label: __( 'Sort descending' ) },
};
const sortIcons = { asc: chevronUp, desc: chevronDown };
+
+// TODO: find a place where these constants can be shared across components.
+const ENUMERATION_TYPE = 'enumeration';
+const OPERATOR_IN = 'in';
+
function HeaderMenu( { dataView, header } ) {
if ( header.isPlaceholder ) {
return null;
@@ -68,12 +73,7 @@ function HeaderMenu( { dataView, header } ) {
const sortedDirection = header.column.getIsSorted();
let filter;
- if (
- header.column.columnDef.filters?.length > 0 &&
- header.column.columnDef.filters.some(
- ( f ) => 'string' === typeof f && f === 'in'
- )
- ) {
+ if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
filter = {
field: header.column.columnDef.id,
elements: [
@@ -202,7 +202,8 @@ function HeaderMenu( { dataView, header } ) {
return (
field !==
filter.field ||
- operator !== 'in'
+ operator !==
+ OPERATOR_IN
);
}
);
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index c2461adc34f8d..d6c295dc72ff0 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -227,7 +227,7 @@ export default function PagePages() {
);
},
- filters: [ 'in' ],
+ type: 'enumeration',
elements:
authors?.map( ( { id, name } ) => ( {
value: id,
@@ -240,7 +240,7 @@ export default function PagePages() {
getValue: ( { item } ) =>
STATUSES.find( ( { value } ) => value === item.status )
?.label ?? item.status,
- filters: [ 'in' ],
+ type: 'enumeration',
elements: STATUSES,
enableSorting: false,
},