@wordpress/dataviews 4.6.0 → 4.8.0

package/src/dataviews-layouts/table/index.tsx

@@ -35,11 +35,14 @@ import type {
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
 import { getVisibleFieldIds } from '../index';
+import getClickableItemProps from '../utils/get-clickable-item-props';
 
 interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
 	field: NormalizedField< Item >;
 	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 interface TableColumnCombinedProps< Item > {
@@ -48,6 +51,8 @@ interface TableColumnCombinedProps< Item > {
 	field: CombinedField;
 	item: Item;
 	view: ViewTableType;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 interface TableColumnProps< Item > {
@@ -56,6 +61,8 @@ interface TableColumnProps< Item > {
 	item: Item;
 	column: string;
 	view: ViewTableType;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 interface TableRowProps< Item > {
@@ -69,6 +76,8 @@ interface TableRowProps< Item > {
 	selection: string[];
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 function TableColumn< Item >( {
@@ -102,15 +111,29 @@ function TableColumnField< Item >( {
 	primaryField,
 	item,
 	field,
+	isItemClickable,
+	onClickItem,
 }: TableColumnFieldProps< Item > ) {
+	const isPrimaryField = primaryField?.id === field.id;
+	const isItemClickableField = ( i: Item ) =>
+		isItemClickable( i ) && isPrimaryField;
+
+	const clickableProps = getClickableItemProps(
+		item,
+		isItemClickableField,
+		onClickItem,
+		'dataviews-view-table__cell-content'
+	);
+
 	return (
 		<div
 			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
-				'dataviews-view-table__primary-field':
-					primaryField?.id === field.id,
+				'dataviews-view-table__primary-field': isPrimaryField,
 			} ) }
 		>
-			<field.render { ...{ item } } />
+			<div { ...clickableProps }>
+				<field.render { ...{ item } } />
+			</div>
 		</div>
 	);
 }
@@ -139,6 +162,8 @@ function TableRow< Item >( {
 	primaryField,
 	selection,
 	getItemId,
+	isItemClickable,
+	onClickItem,
 	onChangeSelection,
 }: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
@@ -214,6 +239,8 @@ function TableRow< Item >( {
 					<td key={ column } style={ { width, maxWidth, minWidth } }>
 						<TableColumn
 							primaryField={ primaryField }
+							isItemClickable={ isItemClickable }
+							onClickItem={ onClickItem }
 							fields={ fields }
 							item={ item }
 							column={ column }
@@ -252,6 +279,8 @@ function ViewTable< Item >( {
 	onChangeSelection,
 	selection,
 	setOpenedFilter,
+	onClickItem,
+	isItemClickable,
 	view,
 }: ViewTableProps< Item > ) {
 	const headerMenuRefs = useRef<
@@ -392,6 +421,8 @@ function ViewTable< Item >( {
 								selection={ selection }
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
 							/>
 						) ) }
 				</tbody>

package/src/dataviews-layouts/utils/get-clickable-item-props.ts

@@ -0,0 +1,22 @@
+export default function getClickableItemProps< Item >(
+	item: Item,
+	isItemClickable: ( item: Item ) => boolean,
+	onClickItem: ( item: Item ) => void,
+	className: string
+) {
+	if ( ! isItemClickable( item ) ) {
+		return { className };
+	}
+
+	return {
+		className: `${ className } ${ className }--clickable`,
+		role: 'button',
+		tabIndex: 0,
+		onClick: () => onClickItem( item ),
+		onKeyDown: ( event: React.KeyboardEvent ) => {
+			if ( event.key === 'Enter' || event.key === '' ) {
+				onClickItem( item );
+			}
+		},
+	};
+}

package/src/normalize-fields.ts

@@ -11,6 +11,22 @@ import type {
 import { getControl } from './dataform-controls';
 import DataFormCombinedEdit from './components/dataform-combined-edit';
 
+const getValueFromId =
+	( id: string ) =>
+	( { item }: { item: any } ) => {
+		const path = id.split( '.' );
+		let value = item;
+		for ( const segment of path ) {
+			if ( value.hasOwnProperty( segment ) ) {
+				value = value[ segment ];
+			} else {
+				value = undefined;
+			}
+		}
+
+		return value;
+	};
+
 /**
  * Apply default values and normalize the fields config.
  *
@@ -23,8 +39,7 @@ export function normalizeFields< Item >(
 	return fields.map( ( field ) => {
 		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
 
-		const getValue =
-			field.getValue || ( ( { item } ) => ( item as any )[ field.id ] );
+		const getValue = field.getValue || getValueFromId( field.id );
 
 		const sort =
 			field.sort ??

package/src/test/normalize-fields.ts

@@ -0,0 +1,45 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../normalize-fields';
+import type { Field } from '../types';
+
+describe( 'normalizeFields: default getValue', () => {
+	describe( 'getValue from ID', () => {
+		it( 'user', () => {
+			const item = { user: 'value' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].getValue( { item } );
+			expect( result ).toBe( 'value' );
+		} );
+
+		it( 'user.name', () => {
+			const item = { user: { name: 'value' } };
+			const fields: Field< {} >[] = [
+				{
+					id: 'user.name',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].getValue( { item } );
+			expect( result ).toBe( 'value' );
+		} );
+
+		it( 'user.name.first', () => {
+			const item = { user: { name: { first: 'value' } } };
+			const fields: Field< {} >[] = [
+				{
+					id: 'user.name.first',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].getValue( { item } );
+			expect( result ).toBe( 'value' );
+		} );
+	} );
+} );

package/src/types.ts

@@ -106,7 +106,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
 	 */
-	render?: ComponentType< { item: Item } >;
+	render?: ComponentType< DataViewRenderFieldProps< Item > >;
 
 	/**
 	 * Callback used to render an edit control for the field.
@@ -123,6 +123,11 @@ export type Field< Item > = {
 	 */
 	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
 
+	/**
+	 * Callback used to decide if a field should be displayed.
+	 */
+	isVisible?: ( item: Item ) => boolean;
+
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -159,7 +164,7 @@ export type NormalizedField< Item > = Field< Item > & {
 	label: string;
 	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
-	render: ComponentType< { item: Item } >;
+	render: ComponentType< DataViewRenderFieldProps< Item > >;
 	Edit: ComponentType< DataFormControlProps< Item > >;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
 	isValid: ( item: Item, context?: ValidationContext ) => boolean;
@@ -181,6 +186,10 @@ export type DataFormControlProps< Item > = {
 	hideLabelFromVision?: boolean;
 };
 
+export type DataViewRenderFieldProps< Item > = {
+	item: Item;
+};
+
 /**
  * The filters applied to the dataset.
  */
@@ -489,6 +498,8 @@ export interface ViewBaseProps< Item > {
 	onChangeSelection: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
+	onClickItem: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
 	view: View;
 	density: number;
 }

package/src/validation.ts

@@ -4,6 +4,15 @@
 import { normalizeFields } from './normalize-fields';
 import type { Field, Form } from './types';
 
+/**
+ * Whether or not the given item's value is valid according to the fields and form config.
+ *
+ * @param item   The item to validate.
+ * @param fields Fields config.
+ * @param form   Form config.
+ *
+ * @return A boolean indicating if the item is valid (true) or not (false).
+ */
 export function isItemValid< Item >(
 	item: Item,
 	fields: Field< Item >[],