DataViews: Replace hiddenFields config with fields property instead (#…

…63127) Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Jul 4, 2024 · 3d618eb · 3d618eb · github-actions · Jul 4, 2024
1 parent 6273def
commit 3d618eb
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 >( {
 					<DropdownMenuCheckboxItem
 						key={ field.id }
 						value={ field.id }
-						checked={ ! view.hiddenFields?.includes( field.id ) }
+						checked={ viewFields.includes( field.id ) }
 						onChange={ () => {
 							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
@@ -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
@@ -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
@@ -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 >(
 					<DropdownMenuItem
 						prefix={ <Icon icon={ unseen } /> }
 						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
@@ -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
@@ -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 ],
 	},