From 151b203759c7a9cb901f033437cc97f7cbca05a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 31 Oct 2023 10:03:57 +0100 Subject: [PATCH 1/6] Dataviews: it can only have a single global search filter --- .../src/components/dataviews/dataviews.js | 14 ++++++++++++-- .../edit-site/src/components/dataviews/filters.js | 10 +--------- .../edit-site/src/components/page-pages/index.js | 5 ----- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index a4e8a5524cceba..3990c2db70a70d 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -6,6 +6,7 @@ import { __experimentalHStack as HStack, } from '@wordpress/components'; import { useMemo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -14,18 +15,23 @@ import ViewList from './view-list'; import Pagination from './pagination'; import ViewActions from './view-actions'; import Filters from './filters'; +import TextFilter from './text-filter'; import { ViewGrid } from './view-grid'; export default function DataViews( { view, onChangeView, fields, - filters, actions, data, isLoading = false, paginationInfo, } ) { + const searchFilter = { + id: 'search', + type: 'search', + name: __( 'Filter list' ), + }; const ViewComponent = view.type === 'list' ? ViewList : ViewGrid; const _fields = useMemo( () => { return fields.map( ( field ) => ( { @@ -38,8 +44,12 @@ export default function DataViews( { + { - if ( 'object' !== typeof filter || ! filter?.id || ! filter?.type ) { - return; - } - - filterIndex[ filter.id ] = filter; - } ); - fields.forEach( ( field ) => { if ( ! field.filters ) { return; diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index e548ddb07f5010..cfac0890d7ef7b 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -208,10 +208,6 @@ export default function PagePages() { [ statuses, authors ] ); - const filters = useMemo( () => [ - { id: 'search', type: 'search', name: __( 'Filter list' ) }, - ] ); - const trashPostAction = useTrashPostAction(); const editPostAction = useEditPostAction(); const actions = useMemo( @@ -249,7 +245,6 @@ export default function PagePages() { Date: Tue, 31 Oct 2023 10:05:10 +0100 Subject: [PATCH 2/6] Make search filter a constant so it does not trigger a re-render --- .../edit-site/src/components/dataviews/dataviews.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 3990c2db70a70d..70bce5c812866f 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -18,6 +18,12 @@ import Filters from './filters'; import TextFilter from './text-filter'; import { ViewGrid } from './view-grid'; +const searchFilter = { + id: 'search', + type: 'search', + name: __( 'Filter list' ), +}; + export default function DataViews( { view, onChangeView, @@ -27,11 +33,6 @@ export default function DataViews( { isLoading = false, paginationInfo, } ) { - const searchFilter = { - id: 'search', - type: 'search', - name: __( 'Filter list' ), - }; const ViewComponent = view.type === 'list' ? ViewList : ViewGrid; const _fields = useMemo( () => { return fields.map( ( field ) => ( { From 5625d5788b719844c51b604c1daf1a8086ee3ed8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 31 Oct 2023 10:30:43 +0100 Subject: [PATCH 3/6] Remove TextFilter from Filters generator: it is no longer a filter --- .../edit-site/src/components/dataviews/filters.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 07fb745ec9e530..1cb2b36d6cda79 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import TextFilter from './text-filter'; import InFilter from './in-filter'; export default function Filters( { fields, view, onChangeView } ) { @@ -59,16 +58,6 @@ export default function Filters( { fields, view, onChangeView } ) { return null; } - if ( filter.type === 'search' ) { - return ( - - ); - } if ( filter.type === 'enumeration' ) { return ( Date: Tue, 31 Oct 2023 10:43:05 +0100 Subject: [PATCH 4/6] Move filters.search to search --- .../edit-site/src/components/dataviews/dataviews.js | 8 -------- .../edit-site/src/components/dataviews/provider.js | 4 ++-- .../src/components/dataviews/text-filter.js | 13 +++++-------- .../edit-site/src/components/page-pages/index.js | 1 + 4 files changed, 8 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 70bce5c812866f..1470274b585994 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -6,7 +6,6 @@ import { __experimentalHStack as HStack, } from '@wordpress/components'; import { useMemo } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -18,12 +17,6 @@ import Filters from './filters'; import TextFilter from './text-filter'; import { ViewGrid } from './view-grid'; -const searchFilter = { - id: 'search', - type: 'search', - name: __( 'Filter list' ), -}; - export default function DataViews( { view, onChangeView, @@ -46,7 +39,6 @@ export default function DataViews( { diff --git a/packages/edit-site/src/components/dataviews/provider.js b/packages/edit-site/src/components/dataviews/provider.js index f418f8d91834d9..7c07ff98a05f3c 100644 --- a/packages/edit-site/src/components/dataviews/provider.js +++ b/packages/edit-site/src/components/dataviews/provider.js @@ -28,8 +28,8 @@ export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All s const DEFAULT_VIEWS = { page: { type: 'list', + search: '', filters: { - search: '', status: DEFAULT_STATUSES, }, page: 1, @@ -38,7 +38,7 @@ const DEFAULT_VIEWS = { field: 'date', direction: 'desc', }, - visibleFilters: [ 'search', 'author', 'status' ], + visibleFilters: [ 'author', 'status' ], // All fields are visible by default, so it's // better to keep track of the hidden ones. hiddenFields: [ 'date', 'featured-image' ], diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js index 79ae77c60b71aa..909df92770b59b 100644 --- a/packages/edit-site/src/components/dataviews/text-filter.js +++ b/packages/edit-site/src/components/dataviews/text-filter.js @@ -10,12 +10,12 @@ import { SearchControl } from '@wordpress/components'; */ import useDebouncedInput from '../../utils/use-debounced-input'; -export default function TextFilter( { filter, view, onChangeView } ) { +export default function TextFilter( { label, view, onChangeView } ) { const [ search, setSearch, debouncedSearch ] = useDebouncedInput( - view.filters[ filter.id ] + view.search ); useEffect( () => { - setSearch( view.filters[ filter.id ] ); + setSearch( view.search ); }, [ view ] ); const onChangeViewRef = useRef( onChangeView ); useEffect( () => { @@ -25,13 +25,10 @@ export default function TextFilter( { filter, view, onChangeView } ) { onChangeViewRef.current( ( currentView ) => ( { ...currentView, page: 1, - filters: { - ...currentView.filters, - [ filter.id ]: debouncedSearch, - }, + search: debouncedSearch, } ) ); }, [ debouncedSearch ] ); - const searchLabel = filter?.name || __( 'Filter list' ); + const searchLabel = label || __( 'Filter list' ); return ( Date: Tue, 31 Oct 2023 10:50:05 +0100 Subject: [PATCH 5/6] External API for search --- .../edit-site/src/components/dataviews/dataviews.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 1470274b585994..b6474692a23285 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -21,6 +21,8 @@ export default function DataViews( { view, onChangeView, fields, + search = true, + searchLabel = undefined, actions, data, isLoading = false, @@ -38,10 +40,13 @@ export default function DataViews( { - + { search && ( + + ) } Date: Tue, 31 Oct 2023 10:50:15 +0100 Subject: [PATCH 6/6] Update docs --- .../src/components/dataviews/README.md | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md index 460235c8df3df4..9b9dabec1b2269 100644 --- a/packages/edit-site/src/components/dataviews/README.md +++ b/packages/edit-site/src/components/dataviews/README.md @@ -9,7 +9,6 @@ This file documents the DataViews UI component, which provides an API to render view={ view } onChangeView={ onChangeView } fields={ fields } - filters={ filters } actions={ [ trashPostAction ] } paginationInfo={ { totalItems, totalPages } } /> @@ -43,12 +42,12 @@ Example: field: 'date', direction: 'desc', }, + search: '', filters: { - search: '', author: 2, status: 'publish, draft' }, - visibleFilters: [ 'search', 'author', 'status' ], + visibleFilters: [ 'author', 'status' ], hiddenFields: [ 'date', 'featured-image' ], layout: {}, } @@ -59,6 +58,7 @@ Example: - `page`: the page that is visible. - `sort.field`: field used for sorting the dataset. - `sort.direction`: the direction to use for sorting, one of `asc` or `desc`. +- `search`: the text search applied to the dataset. - `filters`: the filters applied to the dataset. See filters section. - `visibleFilters`: the `id` of the filters that are visible in the UI. - `hiddenFields`: the `id` of the fields that are hidden in the UI. @@ -82,6 +82,7 @@ function MyCustomPageList() { page: view.page, order: view.sort?.direction, orderby: view.sort?.field + search: view.search, ...view.filters } ), [ view ] @@ -133,10 +134,7 @@ Example: { value: 1, label: 'Admin' } { value: 2, label: 'User' } ] - filters: [ - 'enumeration' - { id: 'author_search', type: 'search', name: __( 'Search by author' ) } - ], + filters: [ 'enumeration' ], } ] ``` @@ -150,26 +148,18 @@ Example: ## Filters -Filters describe the conditions a record should match to be listed as part of the dataset. - -Filters can be provided globally, as a property of the `DataViews` component, or per field, should they be considered part of a fields' description. +Filters describe the conditions a record should match to be listed as part of the dataset. Filters are provided per field. ```js const field = [ { id: 'author', - filters: [ - 'enumeration' - { id: 'author_search', type: 'search', name: __( 'Search by author' ) } - ], + filters: [ 'enumeration' ], } ]; ``` @@ -177,7 +167,7 @@ A filter is an object that may contain the following properties: - `id`: unique identifier for the filter. Matches the entity query param. Field filters may omit it, in which case the field's `id` will be used. - `name`: nice looking name for the filter. Field filters may omit it, in which case the field's `header` will be used. -- `type`: the type of filter. One of `search` or `enumeration`. +- `type`: the type of filter. Only `enumeration` is supported at the moment. - `elements`: for filters of type `enumeration`, the list of options to show. A one-dimensional array of object with value/label keys, as in `[ { value: 1, label: "Value name" } ]`. - `value`: what's serialized into the view's filters. - `label`: nice-looking name for users.