add useClickableItemProps

WordPress · Nov 5, 2024 · 507d60b · 507d60b
1 parent 0071e09
commit 507d60b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 69 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -24,6 +24,7 @@ import SingleSelectionCheckbox from '../../components/dataviews-selection-checkb
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
+import { useClickableItemProps } from '../hooks/use-clickable-item-props';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -64,6 +65,20 @@ function GridItem< Item >( {
 		<primaryField.render item={ item } />
 	) : null;
 
+	const clickableMediaItemProps = useClickableItemProps(
+		item,
+		isItemClickable,
+		onClickItem,
+		'dataviews-view-grid__media'
+	);
+
+	const clickablePrimaryItemProps = useClickableItemProps(
+		item,
+		isItemClickable,
+		onClickItem,
+		'dataviews-view-grid__primary-field'
+	);
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -86,29 +101,7 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div
-				className={ clsx( 'dataviews-view-grid__media', {
-					'dataviews-view-grid__media--clickable':
-						isItemClickable( item ),
-				} ) }
-				tabIndex={ isItemClickable( item ) ? 0 : undefined }
-				role="button"
-				onClick={ () => {
-					if ( isItemClickable( item ) ) {
-						onClickItem( item );
-					}
-				} }
-				onKeyDown={ ( event ) => {
-					if (
-						( event.key === 'Enter' || event.key === '' ) &&
-						isItemClickable( item )
-					) {
-						onClickItem( item );
-					}
-				} }
-			>
-				{ renderedMediaField }
-			</div>
+			<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
 			<SingleSelectionCheckbox
 				item={ item }
 				selection={ selection }
@@ -122,30 +115,7 @@ function GridItem< Item >( {
 				className="dataviews-view-grid__title-actions"
 			>
 				<HStack>
-					<div
-						className={ clsx(
-							'dataviews-view-grid__primary-field',
-							{
-								'dataviews-view-grid__primary-field--clickable':
-									isItemClickable( item ),
-							}
-						) }
-						tabIndex={ isItemClickable( item ) ? 0 : undefined }
-						role="button"
-						onClick={ () => {
-							if ( isItemClickable( item ) ) {
-								onClickItem( item );
-							}
-						} }
-						onKeyDown={ ( event ) => {
-							if (
-								( event.key === 'Enter' || event.key === '' ) &&
-								isItemClickable( item )
-							) {
-								onClickItem( item );
-							}
-						} }
-					>
+					<div { ...clickablePrimaryItemProps }>
 						{ renderedPrimaryField }
 					</div>
 				</HStack>

diff --git a/packages/dataviews/src/dataviews-layouts/hooks/use-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/hooks/use-clickable-item-props.ts
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export const useClickableItemProps = < Item >(
+	item: Item,
+	isItemClickable: ( item: Item ) => boolean,
+	onClickItem: ( item: Item ) => void,
+	className: string
+) => {
+	const isClickable = isItemClickable( item );
+
+	return {
+		className: clsx( className, {
+			[ className + '--clickable' ]: isClickable,
+		} ),
+		role: isItemClickable( item ) ? 'button' : undefined,
+		onClick: () => {
+			if ( isClickable ) {
+				onClickItem( item );
+			}
+		},
+		tabIndex: isClickable ? 0 : undefined,
+		onKeyDown: ( event: React.KeyboardEvent ) => {
+			if (
+				( event.key === 'Enter' || event.key === '' ) &&
+				isClickable
+			) {
+				onClickItem( item );
+			}
+		},
+	};
+};
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -35,6 +35,7 @@ import type {
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
 import { getVisibleFieldIds } from '../index';
+import { useClickableItemProps } from '../hooks/use-clickable-item-props';
 
 interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
@@ -114,34 +115,23 @@ function TableColumnField< Item >( {
 	onClickItem,
 }: TableColumnFieldProps< Item > ) {
 	const isPrimaryField = primaryField?.id === field.id;
-	const isItemClickableField = isItemClickable( item ) && isPrimaryField;
+	const isItemClickableField = ( i: Item ) =>
+		isItemClickable( i ) && isPrimaryField;
+
+	const clickableProps = useClickableItemProps(
+		item,
+		isItemClickableField,
+		onClickItem,
+		'dataviews-view-table__cell-content'
+	);
+
 	return (
 		<div
 			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
 				'dataviews-view-table__primary-field': isPrimaryField,
 			} ) }
 		>
-			<div
-				className={ clsx( 'dataviews-view-table__cell-content', {
-					'dataviews-view-table__cell-content--clickable':
-						isItemClickableField,
-				} ) }
-				tabIndex={ isItemClickableField ? 0 : undefined }
-				role="button"
-				onClick={ () => {
-					if ( isItemClickableField ) {
-						onClickItem( item );
-					}
-				} }
-				onKeyDown={ ( event ) => {
-					if (
-						( event.key === 'Enter' || event.key === '' ) &&
-						isItemClickableField
-					) {
-						onClickItem( item );
-					}
-				} }
-			>
+			<div { ...clickableProps }>
 				<field.render { ...{ item } } />
 			</div>
 		</div>