DataViews: Replace supportedLayouts prop with defaultLayouts prop ins…

…tead (#63287) Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]>
WordPress · Jul 9, 2024 · c1c46e6 · c1c46e6
1 parent eb74cf5
commit c1c46e6
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 139 deletions.
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -6,6 +6,7 @@
 ### Breaking Changes
 
 - Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead.
+- Replace the `supportedLayouts` prop in the `DataViews` component with a `defaultLayouts` prop that accepts an object whose keys are the layout names and values are the default view objects for these layouts.
 
 ### New features
 

diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
@@ -274,9 +274,9 @@ Function that receives an item and returns an unique identifier for it. By defau
 
 Whether the data is loading. `false` by default.
 
-### `supportedLayouts`: `String[]`
+### `defaultLayouts`: `Record< string, view >`
 
-Array of layouts supported. By default, all are: `table`, `grid`, `list`.
+Default layouts. By default, uses empty layouts: `table`, `grid`, `list`.
 
 ### `onSelectionChange`: `function`
 

diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx
@@ -24,7 +24,13 @@ import {
 } from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
-import type { Action, Field, View, ViewBaseProps } from './types';
+import type {
+	Action,
+	Field,
+	View,
+	ViewBaseProps,
+	SupportedLayouts,
+} from './types';
 import type { SetSelection, SelectionOrUpdater } from './private-types';
 
 type ItemWithId = { id: string };
@@ -42,7 +48,7 @@ type DataViewsProps< Item > = {
 		totalItems: number;
 		totalPages: number;
 	};
-	supportedLayouts: string[];
+	defaultLayouts: SupportedLayouts;
 	selection?: string[];
 	setSelection?: SetSelection;
 	onSelectionChange?: ( items: Item[] ) => void;
@@ -65,7 +71,7 @@ export default function DataViews< Item >( {
 	getItemId = defaultGetItemId,
 	isLoading = false,
 	paginationInfo,
-	supportedLayouts,
+	defaultLayouts,
 	selection: selectionProperty,
 	setSelection: setSelectionProperty,
 	onSelectionChange = defaultOnSelectionChange,
@@ -142,7 +148,7 @@ export default function DataViews< Item >( {
 					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
+					defaultLayouts={ defaultLayouts }
 				/>
 			</HStack>
 			<ViewComponent

diff --git a/packages/dataviews/src/filter-and-sort-data-view.ts b/packages/dataviews/src/filter-and-sort-data-view.ts
@@ -61,7 +61,7 @@ export function filterSortAndPaginate< Item >(
 		} );
 	}
 
-	if ( view.filters?.length > 0 ) {
+	if ( view.filters && view.filters?.length > 0 ) {
 		view.filters.forEach( ( filter ) => {
 			const field = _fields.find(
 				( _field ) => _field.id === filter.field

diff --git a/packages/dataviews/src/filter-summary.tsx b/packages/dataviews/src/filter-summary.tsx
@@ -157,7 +157,7 @@ function OperatorSelector( {
 		value: operator,
 		label: OPERATORS[ operator ]?.label,
 	} ) );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
 	);
 	const value = currentFilter?.operator || filter.operators[ 0 ];
@@ -180,18 +180,22 @@ function OperatorSelector( {
 						const operator = newValue as Operator;
 						const newFilters = currentFilter
 							? [
-									...view.filters.map( ( _filter ) => {
-										if ( _filter.field === filter.field ) {
-											return {
-												..._filter,
-												operator,
-											};
+									...( view.filters ?? [] ).map(
+										( _filter ) => {
+											if (
+												_filter.field === filter.field
+											) {
+												return {
+													..._filter,
+													operator,
+												};
+											}
+											return _filter;
 										}
-										return _filter;
-									} ),
+									),
 							  ]
 							: [
-									...view.filters,
+									...( view.filters ?? [] ),
 									{
 										field: filter.field,
 										operator,
@@ -220,7 +224,9 @@ export default function FilterSummary( {
 }: FilterSummaryProps ) {
 	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
-	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const filterInView = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
 	const activeElements = filter.elements.filter( ( element ) => {
 		if ( filter.singleSelection ) {
 			return element.value === filterInView?.value;
@@ -290,7 +296,7 @@ export default function FilterSummary( {
 									onChangeView( {
 										...view,
 										page: 1,
-										filters: view.filters.filter(
+										filters: view.filters?.filter(
 											( _filter ) =>
 												_filter.field !== filter.field
 										),

diff --git a/packages/dataviews/src/filters.tsx b/packages/dataviews/src/filters.tsx
@@ -52,7 +52,7 @@ function _Filters< Item >( {
 			operators,
 			isVisible:
 				isPrimary ||
-				view.filters.some(
+				!! view.filters?.some(
 					( f ) =>
 						f.field === field.id &&
 						ALL_OPERATORS.includes( f.operator )

diff --git a/packages/dataviews/src/search-widget.tsx b/packages/dataviews/src/search-widget.tsx
@@ -93,7 +93,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 		// so the first item is not selected, since the focus is on the operators control.
 		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
 	} );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
@@ -130,7 +130,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 							onClick={ () => {
 								const newFilters = currentFilter
 									? [
-											...view.filters.map(
+											...( view.filters ?? [] ).map(
 												( _filter ) => {
 													if (
 														_filter.field ===
@@ -154,7 +154,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 											),
 									  ]
 									: [
-											...view.filters,
+											...( view.filters ?? [] ),
 											{
 												field: filter.field,
 												operator: filter.operators[ 0 ],
@@ -201,7 +201,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
@@ -218,7 +218,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter
 					? [
-							...view.filters.map( ( _filter ) => {
+							...( view.filters ?? [] ).map( ( _filter ) => {
 								if ( _filter.field === filter.field ) {
 									return {
 										..._filter,
@@ -232,7 +232,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							} ),
 					  ]
 					: [
-							...view.filters,
+							...( view.filters ?? [] ),
 							{
 								field: filter.field,
 								operator: filter.operators[ 0 ],

diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,48 +17,35 @@ const meta = {
 };
 export default meta;
 
-const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
-	},
-	[ LAYOUT_GRID ]: {
-		mediaField: 'image',
-		primaryField: 'title',
-	},
-};
-
 export const Default = ( props ) => {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-			}
-
-			setView( newView );
-		},
-		[ view.type, setView ]
-	);
 	return (
 		<DataViews
 			{ ...props }
 			paginationInfo={ paginationInfo }
 			data={ shownData }
 			view={ view }
 			fields={ fields }
-			onChangeView={ onChangeView }
+			onChangeView={ setView }
 		/>
 	);
 };
 Default.args = {
 	actions,
-	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
+	defaultLayouts: {
+		[ LAYOUT_TABLE ]: {
+			layout: {
+				primaryField: 'title',
+			},
+		},
+		[ LAYOUT_GRID ]: {
+			layout: {
+				mediaField: 'image',
+				primaryField: 'title',
+			},
+		},
+	},
 };
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -221,7 +221,7 @@ interface ViewBase {
 	/**
 	 * The filters to apply.
 	 */
-	filters: Filter[];
+	filters?: Filter[];
 
 	/**
 	 * The sorting configuration.
@@ -257,7 +257,7 @@ interface ViewBase {
 export interface ViewTable extends ViewBase {
 	type: 'table';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -273,7 +273,7 @@ export interface ViewTable extends ViewBase {
 export interface ViewList extends ViewBase {
 	type: 'list';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -289,7 +289,7 @@ export interface ViewList extends ViewBase {
 export interface ViewGrid extends ViewBase {
 	type: 'grid';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -429,3 +429,9 @@ export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
+
+export interface SupportedLayouts {
+	list?: Omit< ViewList, 'type' >;
+	grid?: Omit< ViewGrid, 'type' >;
+	table?: Omit< ViewTable, 'type' >;
+}