Implement field type media (#103249)

Author: oandregal

packages/dataviews/CHANGELOG.automattic.md

@@ -2,6 +2,7 @@
 
 ## Next
 
+- Implement the `media` field type definition and allow type definitions to provide a new default: `enableSorting`.
 - Add new `boolean` field type definition and edit control. Field type definitions are able to define a default render function that will be used if the field doesn't define one.
 - Pin the actions column on the table view when the width is insufficient.
 - Bring changes from @wordpress/dataviews 4.19.0 (no updates in this version).

packages/dataviews/src/components/dataviews/stories/fixtures.tsx

@@ -633,6 +633,7 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		label: 'Image',
 		id: 'image',
+		type: 'media',
 		header: (
 			<HStack spacing={ 1 } justify="start">
 				<Icon icon={ image } />
@@ -644,7 +645,6 @@ export const fields: Field< SpaceObject >[] = [
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		enableSorting: false,
 	},
 	{
 		label: 'Title',

packages/dataviews/src/field-types/boolean.tsx

@@ -57,4 +57,5 @@ export default {
 
 		return null;
 	},
+	enableSorting: true,
 };

packages/dataviews/src/field-types/datetime.tsx

@@ -35,4 +35,5 @@ export default {
 			? renderFromElements( { item, field } )
 			: field.getValue( { item } );
 	},
+	enableSorting: true,
 };

packages/dataviews/src/field-types/index.tsx

@@ -11,6 +11,7 @@ import { default as integer } from './integer';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
 import { default as boolean } from './boolean';
+import { default as media } from './media';
 import { renderFromElements } from '../utils';
 
 /**
@@ -36,6 +37,12 @@ export default function getFieldTypeDefinition< Item >( type?: FieldType ) {
 		return boolean;
 	}
 
+	if ( 'media' === type ) {
+		return media;
+	}
+
+	// This is a fallback for fields that don't provide a type.
+	// It can be removed when the field.type is mandatory.
 	return {
 		sort: ( a: any, b: any, direction: SortDirection ) => {
 			if ( typeof a === 'number' && typeof b === 'number' ) {
@@ -62,5 +69,6 @@ export default function getFieldTypeDefinition< Item >( type?: FieldType ) {
 				? renderFromElements( { item, field } )
 				: field.getValue( { item } );
 		},
+		enableSorting: true,
 	};
 }

packages/dataviews/src/field-types/integer.tsx

@@ -41,4 +41,5 @@ export default {
 			? renderFromElements( { item, field } )
 			: field.getValue( { item } );
 	},
+	enableSorting: true,
 };

packages/dataviews/src/field-types/media.tsx

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return 0;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: () => null,
+	render: () => null,
+	enableSorting: false,
+};

packages/dataviews/src/field-types/text.tsx

@@ -34,4 +34,5 @@ export default {
 			? renderFromElements( { item, field } )
 			: field.getValue( { item } );
 	},
+	enableSorting: true,
 };

packages/dataviews/src/media.tsx

@@ -77,7 +77,10 @@ export function normalizeFields< Item >(
 			isValid,
 			Edit,
 			enableHiding: field.enableHiding ?? true,
-			enableSorting: field.enableSorting ?? true,
+			enableSorting:
+				field.enableSorting ??
+				fieldTypeDefinition.enableSorting ??
+				true,
 		};
 	} );
 }

packages/dataviews/src/normalize-fields.ts

@@ -76,6 +76,11 @@ export type FieldTypeDefinition< Item > = {
 	 * Callback used to render the field.
 	 */
 	render: ComponentType< DataViewRenderFieldProps< Item > >;
+
+	/**
+	 * Whether the field is sortable.
+	 */
+	enableSorting: boolean;
 };
 
 /**