remove view prop

packages/dataviews/src/constants.ts

@@ -68,6 +68,3 @@ export const sortIcons = {
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_GRID = 'grid';
 export const LAYOUT_LIST = 'list';
-
-// Form layouts.
-export const LAYOUT_PANEL = 'panel';

packages/dataviews/src/dataforms-layouts/panel/index.tsx

@@ -19,7 +19,6 @@ import { closeSmall } from '@wordpress/icons';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps, NormalizedField } from '../../types';
-import { LAYOUT_PANEL } from '../../constants';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -111,7 +110,7 @@ function FormField< Item >( {
 							) }
 							onClick={ onToggle }
 						>
-							<field.render item={ data } view={ LAYOUT_PANEL } />
+							<field.render item={ data } />
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -24,7 +24,6 @@ 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 { LAYOUT_GRID } from '../../constants';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -55,10 +54,10 @@ function GridItem< Item >( {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } view={ LAYOUT_GRID } />
+		<mediaField.render item={ item } />
 	) : null;
 	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } view={ LAYOUT_GRID } />
+		<primaryField.render item={ item } />
 	) : null;
 	return (
 		<VStack
@@ -116,10 +115,7 @@ function GridItem< Item >( {
 								key={ field.id }
 								className="dataviews-view-grid__field-value"
 							>
-								<field.render
-									item={ item }
-									view={ LAYOUT_GRID }
-								/>
+								<field.render item={ item } />
 							</FlexItem>
 						);
 					} ) }
@@ -155,10 +151,7 @@ function GridItem< Item >( {
 										className="dataviews-view-grid__field-value"
 										style={ { maxHeight: 'none' } }
 									>
-										<field.render
-											item={ item }
-											view={ LAYOUT_GRID }
-										/>
+										<field.render item={ item } />
 									</FlexItem>
 								</>
 							</Flex>

packages/dataviews/src/dataviews-layouts/list/index.tsx

@@ -36,7 +36,6 @@ import {
 	ActionModal,
 } from '../../components/dataviews-item-actions';
 import type { Action, NormalizedField, ViewListProps } from '../../types';
-import { LAYOUT_LIST } from '../../constants';
 
 interface ListViewItemProps< Item > {
 	actions: Action< Item >[];
@@ -177,13 +176,13 @@ function ListItem< Item >( {
 	}, [ actions, item ] );
 
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } view={ LAYOUT_LIST } />
+		<mediaField.render item={ item } />
 	) : (
 		<div className="dataviews-view-list__media-placeholder"></div>
 	);
 
 	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } view={ LAYOUT_LIST } />
+		<primaryField.render item={ item } />
 	) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
@@ -281,10 +280,7 @@ function ListItem< Item >( {
 										{ field.label }
 									</VisuallyHidden>
 									<span className="dataviews-view-list__field-value">
-										<field.render
-											item={ item }
-											view={ LAYOUT_LIST }
-										/>
+										<field.render item={ item } />
 									</span>
 								</div>
 							) ) }

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

@@ -19,7 +19,7 @@ import { useEffect, useId, useRef, useState } from '@wordpress/element';
  */
 import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import ItemActions from '../../components/dataviews-item-actions';
-import { LAYOUT_TABLE, sortValues } from '../../constants';
+import { sortValues } from '../../constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
@@ -110,7 +110,7 @@ function TableColumnField< Item >( {
 					primaryField?.id === field.id,
 			} ) }
 		>
-			<field.render { ...{ item } } view={ LAYOUT_TABLE } />
+			<field.render { ...{ item } } />
 		</div>
 	);
 }

packages/dataviews/src/types.ts

@@ -7,12 +7,6 @@ import type { ReactElement, ComponentType } from 'react';
  * Internal dependencies
  */
 import type { SetSelection } from './private-types';
-import type {
-	LAYOUT_GRID,
-	LAYOUT_LIST,
-	LAYOUT_PANEL,
-	LAYOUT_TABLE,
-} from './constants';
 
 export type SortDirection = 'asc' | 'desc';
 
@@ -189,11 +183,6 @@ export type DataFormControlProps< Item > = {
 
 export type DataViewRenderFieldProps< Item > = {
 	item: Item;
-	view:
-		| typeof LAYOUT_LIST
-		| typeof LAYOUT_GRID
-		| typeof LAYOUT_TABLE
-		| typeof LAYOUT_PANEL;
 };
 
 /**

packages/fields/src/fields/featured-image/featured-image-view.tsx

@@ -2,143 +2,16 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import type { Attachment } from '@wordpress/core-data';
-import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
-// @ts-ignore
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-import { __ } from '@wordpress/i18n';
 import type { BasePost } from '../../types';
 import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
-import { getItemTitle } from '../../actions/utils';
-
-const { useHistory } = unlock( routerPrivateApis );
-
-const Media = ( {
-	id,
-	size = [ 'large', 'medium', 'thumbnail' ],
-	...props
-}: {
-	id: number;
-	size?: Array< 'large' | 'medium' | 'full' | 'thumbnail' >;
-} & Record< string, any > ) => {
-	const { record: media } = useEntityRecord< Attachment >(
-		'root',
-		'media',
-		id
-	);
-
-	const currentSize =
-		size.find( ( s ) => !! media?.media_details?.sizes[ s ] ) ?? '';
-
-	const mediaUrl =
-		media?.media_details?.sizes[ currentSize ]?.source_url ||
-		media?.source_url;
-
-	if ( ! mediaUrl ) {
-		return null;
-	}
-
-	return <img { ...props } src={ mediaUrl } alt={ media.alt_text } />;
-};
-
-const getComponentToDisplay = ( {
-	item,
-	url,
-	title,
-	onClick,
-}: {
-	item: BasePost;
-	title: string | undefined;
-	url: string | undefined;
-	onClick: () => void;
-} ) => ( {
-	grid: {
-		NoUrl: <></>,
-		WithUrl: (
-			<>
-				<button
-					className="fields-controls__featured-image-button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ getItemTitle( item ) ?? __( '(no title)' ) }
-				>
-					{ item.featured_media && (
-						<Media
-							className="fields-controls__featured-image-image"
-							id={ item.featured_media }
-							size={ [ 'large', 'full', 'medium', 'thumbnail' ] }
-						/>
-					) }
-					{ ! item.featured_media && <></> }
-				</button>
-			</>
-		),
-	},
-	list: {
-		NoUrl: <></>,
-		WithUrl: (
-			<div className="fields-controls__featured-image-container">
-				<img
-					className="fields-controls__featured-image-image"
-					src={ url }
-					alt=""
-				/>
-			</div>
-		),
-	},
-	panel: {
-		NoUrl: (
-			<HStack className="fields-controls__featured-image-container">
-				<span
-					style={ {
-						width: '16px',
-						height: '16px',
-					} }
-					className="fields-controls__featured-image-placeholder"
-				/>
-				<span>{ __( 'Choose an image…' ) }</span>
-			</HStack>
-		),
-		WithUrl: (
-			<HStack className="fields-controls__featured-image-container">
-				<img
-					className="fields-controls__featured-image-image"
-					src={ url }
-					width={ 16 }
-					height={ 16 }
-					alt=""
-				/>
-				<span>{ title }</span>
-			</HStack>
-		),
-	},
-	table: {
-		NoUrl: (
-			<span className="fields-controls__featured-image-placeholder__table" />
-		),
-		WithUrl: (
-			<HStack className="fields-controls__featured-image-container">
-				<img
-					className="fields-controls__featured-image-image"
-					src={ url }
-					alt=""
-					width={ 32 }
-					height={ 32 }
-				/>
-			</HStack>
-		),
-	},
-} );
 
 export const FeaturedImageView = ( {
 	item,
-	view,
 }: DataViewRenderFieldProps< BasePost > ) => {
 	const mediaId = item.featured_media;
 
@@ -150,27 +23,16 @@ export const FeaturedImageView = ( {
 		[ mediaId ]
 	);
 	const url = media?.source_url;
-	const title = media?.title?.rendered;
-
-	const history = useHistory();
-
-	const onClick = useCallback( () => {
-		const params = {
-			post: item.id,
-			post_type: item.type,
-			canvas: 'edit',
-		};
-
-		history.push( params );
-	}, [ history, item.id, item.type ] );
-
-	const component = getComponentToDisplay( { item, title, url, onClick } )[
-		view
-	];
 
 	if ( url ) {
-		return component.WithUrl;
+		return (
+			<img
+				className="fields-controls__featured-image-image"
+				src={ url }
+				alt=""
+			/>
+		);
 	}
 
-	return component.NoUrl;
+	return <span className="fields-controls__featured-image-placeholder" />;
 };