From 146981dab47a079f3a96850a2ba55ceac02f860a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Wed, 18 Oct 2023 10:51:14 +0200
Subject: [PATCH 1/3] Allow filters to be declared as a string
---
.../edit-site/src/components/dataviews/filters.js | 11 +++++++++--
packages/edit-site/src/components/page-pages/index.js | 2 +-
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
index 8d72852e26bcb4..96363ac4a7dc2a 100644
--- a/packages/edit-site/src/components/dataviews/filters.js
+++ b/packages/edit-site/src/components/dataviews/filters.js
@@ -16,8 +16,15 @@ export default function Filters( { fields, view, onChangeView } ) {
return;
}
- field.filters.forEach( ( f ) => {
- filters[ f.id ] = { type: f.type };
+ field.filters.forEach( ( filter ) => {
+ if ( 'string' === typeof filter ) {
+ filters[ field.id ] = { type: filter };
+ }
+
+ if ( 'object' === typeof filter ) {
+ filters[ filter.id ] = { ...filter };
+ delete filters[ filter.id ].id;
+ }
} );
} );
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 4b7fe8228a53a9..272e98774f3967 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -150,7 +150,7 @@ export default function PagePages() {
);
},
- filters: [ { id: 'author', type: 'enumeration' } ],
+ filters: [ 'enumeration' ],
elements: [
{
value: '',
From 5a99e93a122970e9d690eb1762269a25f525ca31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Wed, 18 Oct 2023 11:51:07 +0200
Subject: [PATCH 2/3] Provide a default filter reset value that filters can
override
---
.../src/components/dataviews/filters.js | 34 +++++++++++++++----
.../src/components/dataviews/in-filter.js | 12 +++----
.../src/components/dataviews/text-filter.js | 6 ++--
.../src/components/page-pages/index.js | 31 +++++++++--------
4 files changed, 52 insertions(+), 31 deletions(-)
diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
index 96363ac4a7dc2a..e30b3c9ca71bdf 100644
--- a/packages/edit-site/src/components/dataviews/filters.js
+++ b/packages/edit-site/src/components/dataviews/filters.js
@@ -17,13 +17,36 @@ export default function Filters( { fields, view, onChangeView } ) {
}
field.filters.forEach( ( filter ) => {
+ let id = field.id;
if ( 'string' === typeof filter ) {
- filters[ field.id ] = { type: filter };
+ filters[ id ] = {
+ id,
+ name: field.header,
+ type: filter,
+ };
}
if ( 'object' === typeof filter ) {
- filters[ filter.id ] = { ...filter };
- delete filters[ filter.id ].id;
+ id = filter.id || field.id;
+ filters[ id ] = {
+ id,
+ name: filter.name || field.header,
+ type: filter.type,
+ };
+ }
+
+ if ( 'enumeration' === filters[ id ]?.type ) {
+ const elements = [
+ {
+ value: filter.resetValue || '',
+ label: filter.resetLabel || __( 'All' ),
+ },
+ ...( field.elements || [] ),
+ ];
+ filters[ id ] = {
+ ...filters[ id ],
+ elements,
+ };
}
} );
} );
@@ -40,7 +63,7 @@ export default function Filters( { fields, view, onChangeView } ) {
return (
@@ -50,8 +73,7 @@ export default function Filters( { fields, view, onChangeView } ) {
return (
diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
index 0b62b59a3028b0..ca9436f5a7ea1f 100644
--- a/packages/edit-site/src/components/dataviews/in-filter.js
+++ b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -14,21 +14,19 @@ import { unlock } from '../../lock-unlock';
const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
-export default ( { id, fields, view, onChangeView } ) => {
- const field = fields.find( ( f ) => f.id === id );
-
+export default ( { filter, view, onChangeView } ) => {
return (
- { field.header + ':' }
+ { filter.name + ':' }
}
- options={ field?.elements || [] }
+ options={ filter.elements }
onChange={ ( value ) => {
if ( value === '' ) {
value = undefined;
@@ -38,7 +36,7 @@ export default ( { id, fields, view, onChangeView } ) => {
...currentView,
filters: cleanEmptyObject( {
...currentView.filters,
- [ id ]: value,
+ [ filter.id ]: value,
} ),
} ) );
} }
diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
index 4791bc1357e8df..cf324478391953 100644
--- a/packages/edit-site/src/components/dataviews/text-filter.js
+++ b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -10,9 +10,9 @@ import { SearchControl } from '@wordpress/components';
*/
import useDebouncedInput from '../../utils/use-debounced-input';
-export default function TextFilter( { id, view, onChangeView } ) {
+export default function TextFilter( { filter, view, onChangeView } ) {
const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
- view.filters[ id ]
+ view.filters[ filter.id ]
);
const onChangeViewRef = useRef( onChangeView );
useEffect( () => {
@@ -24,7 +24,7 @@ export default function TextFilter( { id, view, onChangeView } ) {
page: 1,
filters: {
...currentView.filters,
- [ id ]: debouncedSearch,
+ [ filter.id ]: debouncedSearch,
},
} ) );
}, [ debouncedSearch ] );
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 272e98774f3967..0745810af3e441 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -133,7 +133,9 @@ export default function PagePages() {
);
},
- filters: [ { id: 'search', type: 'search' } ],
+ filters: [
+ { id: 'search', type: 'search', name: __( 'Search' ) },
+ ],
maxWidth: 400,
sortingFn: 'alphanumeric',
enableHiding: false,
@@ -151,26 +153,26 @@ export default function PagePages() {
);
},
filters: [ 'enumeration' ],
- elements: [
- {
- value: '',
- label: __( 'All' ),
- },
- ...( authors?.map( ( { id, name } ) => ( {
+ elements:
+ authors?.map( ( { id, name } ) => ( {
value: id,
label: name,
- } ) ) || [] ),
- ],
+ } ) ) || [],
},
{
header: __( 'Status' ),
id: 'status',
getValue: ( { item } ) =>
postStatuses[ item.status ] ?? item.status,
- filters: [ { type: 'enumeration', id: 'status' } ],
- elements: [
- { label: __( 'All' ), value: 'publish,draft' },
- ...( ( postStatuses &&
+ filters: [
+ {
+ type: 'enumeration',
+ id: 'status',
+ resetValue: 'publish,draft',
+ },
+ ],
+ elements:
+ ( postStatuses &&
Object.entries( postStatuses )
.filter( ( [ slug ] ) =>
[ 'publish', 'draft' ].includes( slug )
@@ -179,8 +181,7 @@ export default function PagePages() {
value: slug,
label: name,
} ) ) ) ||
- [] ),
- ],
+ [],
enableSorting: false,
},
{
From 628e2a3ec098492b4c336e0bcd6684de6ae3a58b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Wed, 18 Oct 2023 11:56:35 +0200
Subject: [PATCH 3/3] Document changes
---
.../edit-site/src/components/dataviews/README.md | 16 +++++++++-------
1 file changed, 9 insertions(+), 7 deletions(-)
diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
index a1d03a42baab49..9128c71e64874d 100644
--- a/packages/edit-site/src/components/dataviews/README.md
+++ b/packages/edit-site/src/components/dataviews/README.md
@@ -69,12 +69,12 @@ The fields describe the dataset. For example:
);
},
elements: [
- { value: 1, label: 'admin' }
- { value: 2, label: 'user' }
+ { value: 1, label: 'Admin' }
+ { value: 2, label: 'User' }
]
filters: [
- { id: 'author', type: 'enumeration' },
- { id: 'author_search', type: 'search' }
+ 'enumeration',
+ { id: 'author_search', type: 'search', name: __( 'Search by author' ) }
],
},
]
@@ -85,10 +85,12 @@ The fields describe the dataset. For example:
- `getValue`: function that returns the value of the field.
- `render`: function that renders the field.
- `elements`: a set of valid values for the field.
-- `filters`: what filters are available. A filter is an object with `id` and `type` as properties:
- - `id`: unique identifier for the filter. Matches the entity query param.
+- `filters`: what filters are available for the user to use. A filter contains the following properties:
+ - `id`: unique identifier for the filter. Matches the entity query param. If not provided, the field's `id` is used.
+ - `name`: nice looking name for the filter. If not provided, the field's `header` is used.
- `type`: the type of filter. One of `search` or `enumeration`.
-
+ - `resetLabel`: the label for the reset option of the filter. If none provided, `All` is used.
+ - `resetValue`: the value for the reset option of the filter. If none provedid, `''` is used.
## DataViews