From 20c9aa959570dd2e1c444f49cbcd33d419e793ff Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 4 Jul 2024 19:25:00 +0200 Subject: [PATCH] DataViews: Replace hiddenFields config with fields property instead (#63127) Co-authored-by: youknowriad Co-authored-by: ellatrix --- packages/dataviews/CHANGELOG.md | 5 +++++ packages/dataviews/README.md | 6 +++--- packages/dataviews/src/stories/fixtures.js | 2 +- packages/dataviews/src/types.ts | 2 +- packages/dataviews/src/view-actions.tsx | 14 +++++--------- packages/dataviews/src/view-grid.tsx | 3 ++- packages/dataviews/src/view-list.tsx | 3 ++- packages/dataviews/src/view-table.tsx | 17 ++++++++++++----- .../src/components/page-templates/index.js | 4 +--- .../sidebar-dataviews/default-views.js | 4 +--- 10 files changed, 33 insertions(+), 27 deletions(-) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 595a3e51719843..022e160034866a 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased + +### Breaking Changes + +- Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead. + ### New features - Added a new `DataForm` component to render controls from a given configuration (fields, form), and data. diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 4256270d2dc849..1c3becf9a1e5b4 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -149,7 +149,7 @@ const view = { field: 'date', direction: 'desc', }, - hiddenFields: [ 'date', 'featured-image' ], + fields: [ 'author', 'status' ], layout: {}, }; ``` @@ -167,7 +167,7 @@ Properties: - `sort`: - `field`: the field used for sorting the dataset. - `direction`: the direction to use for sorting, one of `asc` or `desc`. -- `hiddenFields`: the `id` of the fields that are hidden in the UI. +- `fields`: the `id` of the fields that are visible in the UI. - `layout`: config that is specific to a particular layout type. - `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media. - `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item. @@ -199,7 +199,7 @@ function MyCustomPageTable() { value: [ 'publish', 'draft' ], }, ], - hiddenFields: [ 'date', 'featured-image' ], + fields: [ 'author', 'status' ], layout: {}, } ); diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js index a51a215aa65279..4117f7a3587dc7 100644 --- a/packages/dataviews/src/stories/fixtures.js +++ b/packages/dataviews/src/stories/fixtures.js @@ -110,7 +110,7 @@ export const DEFAULT_VIEW = { search: '', page: 1, perPage: 10, - hiddenFields: [ 'image', 'type' ], + fields: [ 'title', 'description', 'categories' ], layout: {}, filters: [], }; diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 9c611b3882a7e3..36dcfb2e29f35d 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -251,7 +251,7 @@ interface ViewBase { /** * The hidden fields. */ - hiddenFields?: string[]; + fields?: string[]; } export interface ViewTable extends ViewBase { diff --git a/packages/dataviews/src/view-actions.tsx b/packages/dataviews/src/view-actions.tsx index ff3041b1077337..44add039efd7e1 100644 --- a/packages/dataviews/src/view-actions.tsx +++ b/packages/dataviews/src/view-actions.tsx @@ -170,6 +170,7 @@ function FieldsVisibilityMenu< Item >( { ( field ) => field.enableHiding !== false && field.id !== view.layout.mediaField ); + const viewFields = view.fields || fields.map( ( field ) => field.id ); if ( ! hidableFields?.length ) { return null; } @@ -188,20 +189,15 @@ function FieldsVisibilityMenu< Item >( { { onChangeView( { ...view, - hiddenFields: view.hiddenFields?.includes( - field.id - ) - ? view.hiddenFields.filter( + fields: viewFields.includes( field.id ) + ? viewFields.filter( ( id ) => id !== field.id ) - : [ - ...( view.hiddenFields || [] ), - field.id, - ], + : [ ...viewFields, field.id ], } ); } } > diff --git a/packages/dataviews/src/view-grid.tsx b/packages/dataviews/src/view-grid.tsx index 56f856a5d82b29..7406cd9c7818af 100644 --- a/packages/dataviews/src/view-grid.tsx +++ b/packages/dataviews/src/view-grid.tsx @@ -185,10 +185,11 @@ export default function ViewGrid< Item >( { const primaryField = fields.find( ( field ) => field.id === view.layout.primaryField ); + const viewFields = view.fields || fields.map( ( field ) => field.id ); const { visibleFields, badgeFields } = fields.reduce( ( accumulator: Record< string, NormalizedField< Item >[] >, field ) => { if ( - view.hiddenFields?.includes( field.id ) || + ! viewFields.includes( field.id ) || [ view.layout.mediaField, view.layout.primaryField ].includes( field.id ) diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 093bf42cb1d0c9..6a56f05e83202c 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -325,9 +325,10 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) { const primaryField = fields.find( ( field ) => field.id === view.layout.primaryField ); + const viewFields = view.fields || fields.map( ( field ) => field.id ); const visibleFields = fields.filter( ( field ) => - ! view.hiddenFields?.includes( field.id ) && + viewFields.includes( field.id ) && ! [ view.layout.primaryField, view.layout.mediaField ].includes( field.id ) diff --git a/packages/dataviews/src/view-table.tsx b/packages/dataviews/src/view-table.tsx index fbd1400a301a15..79118d2f095616 100644 --- a/packages/dataviews/src/view-table.tsx +++ b/packages/dataviews/src/view-table.tsx @@ -65,6 +65,7 @@ const { interface HeaderMenuProps< Item > { field: NormalizedField< Item >; view: ViewTableType; + fields: NormalizedField< Item >[]; onChangeView: ( view: ViewTableType ) => void; onHide: ( field: NormalizedField< Item > ) => void; setOpenedFilter: ( fieldId: string ) => void; @@ -105,6 +106,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >( { field, view, + fields, onChangeView, onHide, setOpenedFilter, @@ -219,12 +221,14 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >( } onClick={ () => { + const viewFields = + view.fields || fields.map( ( f ) => f.id ); onHide( field ); onChangeView( { ...view, - hiddenFields: ( - view.hiddenFields ?? [] - ).concat( field.id ), + fields: viewFields.filter( + ( fieldId ) => fieldId !== field.id + ), } ); } } > @@ -454,10 +458,12 @@ function ViewTable< Item >( { : undefined; setNextHeaderMenuToFocus( fallback?.node ); }; + + const viewFields = view.fields || fields.map( ( f ) => f.id ); const visibleFields = fields.filter( ( field ) => - ! view.hiddenFields?.includes( field.id ) && - ! [ view.layout.mediaField ].includes( field.id ) + viewFields.includes( field.id ) || + [ view.layout.mediaField ].includes( field.id ) ); const hasData = !! data?.length; @@ -531,6 +537,7 @@ function ViewTable< Item >( { } } field={ field } view={ view } + fields={ fields } onChangeView={ onChangeView } onHide={ onHide } setOpenedFilter={ setOpenedFilter } diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 0e4d7db5a25b6c..5ba29d25a432f5 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -78,9 +78,7 @@ const DEFAULT_VIEW = { field: 'title', direction: 'asc', }, - // All fields are visible by default, so it's - // better to keep track of the hidden ones. - hiddenFields: [ 'preview' ], + fields: [ 'title', 'description', 'author' ], layout: defaultConfigPerViewType[ LAYOUT_GRID ], filters: [], }; diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index 6c98ec7346488a..41d641d7bf454e 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -50,9 +50,7 @@ const DEFAULT_POST_BASE = { field: 'date', direction: 'desc', }, - // All fields are visible by default, so it's - // better to keep track of the hidden ones. - hiddenFields: [ 'date', 'featured-image' ], + fields: [ 'title', 'author', 'status' ], layout: { ...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ], },