DataViews: Better handling of missing onClickItem prop (#67402)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: jsnajdr <[email protected]>
WordPress · Dec 2, 2024 · 39a4d1c · 39a4d1c
1 parent e07fe5c
commit 39a4d1c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 29 deletions.
diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -26,7 +26,7 @@ type DataViewsContextType< Item > = {
 	openedFilter: string | null;
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 	getItemId: ( item: Item ) => string;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
 };
 
@@ -44,8 +44,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	setOpenedFilter: () => {},
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
-	onClickItem: () => {},
-	isItemClickable: () => false,
+	isItemClickable: () => true,
 } );
 
 export default DataViewsContext;
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
@@ -52,8 +52,7 @@ type DataViewsProps< Item > = {
 	: { getItemId: ( item: Item ) => string } );
 
 const defaultGetItemId = ( item: ItemWithId ) => item.id;
-const defaultIsItemClickable = () => false;
-const defaultOnClickItem = () => {};
+const defaultIsItemClickable = () => true;
 const EMPTY_ARRAY: any[] = [];
 
 export default function DataViews< Item >( {
@@ -70,7 +69,7 @@ export default function DataViews< Item >( {
 	defaultLayouts,
 	selection: selectionProperty,
 	onChangeSelection,
-	onClickItem = defaultOnClickItem,
+	onClickItem,
 	isItemClickable = defaultIsItemClickable,
 	header,
 }: DataViewsProps< Item > ) {

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -31,7 +31,7 @@ interface GridItemProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
@@ -66,19 +66,19 @@ function GridItem< Item >( {
 		<primaryField.render item={ item } />
 	) : null;
 
-	const clickableMediaItemProps = getClickableItemProps(
+	const clickableMediaItemProps = getClickableItemProps( {
 		item,
 		isItemClickable,
 		onClickItem,
-		'dataviews-view-grid__media'
-	);
+		className: 'dataviews-view-grid__media',
+	} );
 
-	const clickablePrimaryItemProps = getClickableItemProps(
+	const clickablePrimaryItemProps = getClickableItemProps( {
 		item,
 		isItemClickable,
 		onClickItem,
-		'dataviews-view-grid__primary-field'
-	);
+		className: 'dataviews-view-grid__primary-field',
+	} );
 
 	return (
 		<VStack

diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -42,7 +42,7 @@ interface TableColumnFieldProps< Item > {
 	field: NormalizedField< Item >;
 	item: Item;
 	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 }
 
 interface TableColumnCombinedProps< Item > {
@@ -52,7 +52,7 @@ interface TableColumnCombinedProps< Item > {
 	item: Item;
 	view: ViewTableType;
 	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 }
 
 interface TableColumnProps< Item > {
@@ -62,7 +62,7 @@ interface TableColumnProps< Item > {
 	column: string;
 	view: ViewTableType;
 	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 }
 
 interface TableRowProps< Item > {
@@ -77,7 +77,7 @@ interface TableRowProps< Item > {
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
 	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 }
 
 function TableColumn< Item >( {
@@ -118,12 +118,12 @@ function TableColumnField< Item >( {
 	const isItemClickableField = ( i: Item ) =>
 		isItemClickable( i ) && isPrimaryField;
 
-	const clickableProps = getClickableItemProps(
+	const clickableProps = getClickableItemProps( {
 		item,
-		isItemClickableField,
+		isItemClickable: isItemClickableField,
 		onClickItem,
-		'dataviews-view-table__cell-content'
-	);
+		className: 'dataviews-view-table__cell-content',
+	} );
 
 	return (
 		<div

diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
@@ -1,10 +1,15 @@
-export default function getClickableItemProps< Item >(
-	item: Item,
-	isItemClickable: ( item: Item ) => boolean,
-	onClickItem: ( item: Item ) => void,
-	className: string
-) {
-	if ( ! isItemClickable( item ) ) {
+export default function getClickableItemProps< Item >( {
+	item,
+	isItemClickable,
+	onClickItem,
+	className,
+}: {
+	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem?: ( item: Item ) => void;
+	className: string;
+} ) {
+	if ( ! isItemClickable( item ) || ! onClickItem ) {
 		return { className };
 	}
 

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -510,7 +510,7 @@ export interface ViewBaseProps< Item > {
 	onChangeSelection: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
-	onClickItem: ( item: Item ) => void;
+	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
 	view: View;
 }