Fix view types

WordPress · May 23, 2024 · e4ab2ce · e4ab2ce
1 parent 51b7f2a
commit e4ab2ce
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 37 deletions.
diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -16,7 +21,7 @@ import { VIEW_LAYOUTS } from './layouts';
 import BulkActions from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
-import type { Action, AnyItem, Field, View } from './types';
+import type { Action, AnyItem, Field, View, ViewBaseProps } from './types';
 
 interface DataViewsProps< Item extends AnyItem > {
 	view: View;
@@ -99,9 +104,8 @@ export default function DataViews< Item extends AnyItem >( {
 		[ setSelection, getItemId, onSelectionChange ]
 	);
 
-	const ViewComponent = VIEW_LAYOUTS.find(
-		( v ) => v.type === view.type
-	).component;
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< Item > >;
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(

diff --git a/packages/dataviews/src/layouts.ts b/packages/dataviews/src/layouts.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ComponentType } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -21,7 +16,6 @@ import ViewTable from './view-table';
 import ViewGrid from './view-grid';
 import ViewList from './view-list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from './constants';
-import { ViewProps } from './types';
 
 export const VIEW_LAYOUTS = [
 	{

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -373,15 +373,35 @@ export type Action< Item extends AnyItem > =
 	| ActionModal< Item >
 	| ActionButton< Item >;
 
-export interface ViewProps< Item extends AnyItem, ViewType extends ViewBase > {
+export interface ViewBaseProps< Item extends AnyItem > {
 	actions: Action< Item >[];
 	data: Item[];
 	fields: NormalizedField< Item >[];
 	getItemId: ( item: Item ) => string;
 	isLoading?: boolean;
-	onChangeView( view: ViewType ): void;
+	onChangeView( view: View ): void;
 	onSelectionChange: ( items: Item[] ) => void;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
-	view: ViewType;
+	view: View;
 }
+
+export interface ViewTableProps< Item extends AnyItem >
+	extends ViewBaseProps< Item > {
+	view: ViewTable;
+}
+
+export interface ViewListProps< Item extends AnyItem >
+	extends ViewBaseProps< Item > {
+	view: ViewList;
+}
+
+export interface ViewGridProps< Item extends AnyItem >
+	extends ViewBaseProps< Item > {
+	view: ViewGrid;
+}
+
+export type ViewProps< Item extends AnyItem > =
+	| ViewTableProps< Item >
+	| ViewGridProps< Item >
+	| ViewListProps< Item >;
diff --git a/packages/dataviews/src/view-grid.tsx b/packages/dataviews/src/view-grid.tsx
@@ -22,16 +22,7 @@ import { __ } from '@wordpress/i18n';
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
 import { useHasAPossibleBulkAction } from './bulk-actions';
-import type {
-	Action,
-	AnyItem,
-	NormalizedField,
-	ViewGrid as ViewGridType,
-	ViewProps,
-} from './types';
-
-interface ViewGridProps< Item extends AnyItem >
-	extends ViewProps< Item, ViewGridType > {}
+import type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';
 
 interface GridItemProps< Item extends AnyItem > {
 	selection: string[];

diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
@@ -32,19 +32,10 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import type {
-	Action,
-	AnyItem,
-	NormalizedField,
-	ViewList as ViewListType,
-	ViewProps,
-} from './types';
+import type { Action, AnyItem, NormalizedField, ViewListProps } from './types';
 
 import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
 
-interface ViewListProps< Item extends AnyItem >
-	extends ViewProps< Item, ViewListType > {}
-
 interface ListViewItemProps< Item extends AnyItem > {
 	actions: Action< Item >[];
 	id?: string;

diff --git a/packages/dataviews/src/view-table.tsx b/packages/dataviews/src/view-table.tsx
@@ -50,8 +50,8 @@ import type {
 	AnyItem,
 	NormalizedField,
 	SortDirection,
-	ViewProps,
 	ViewTable as ViewTableType,
+	ViewTableProps,
 } from './types';
 
 const {
@@ -91,9 +91,6 @@ interface TableRowProps< Item extends AnyItem > {
 	data: Item[];
 }
 
-interface ViewTableProps< Item extends AnyItem >
-	extends ViewProps< Item, ViewTableType > {}
-
 function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
 	return Children.toArray( children )
 		.filter( Boolean )