DataViews: add new field types and formats to modify the default render

packages/dataviews/README.md

@@ -150,25 +150,16 @@ Example:
 [
 	{
 		id: 'date',
+		type: 'date',
 		header: __( 'Date' ),
 		getValue: ( { item } ) => item.date,
-		render: ( { item } ) => {
-			return (
-				<time>{ getFormattedDate( item.date ) }</time>
-			);
-		},
 		enableHiding: false
 	},
 	{
 		id: 'author',
+		type: 'enumeration',
 		header: __( 'Author' ),
 		getValue: ( { item } ) => item.author,
-		render: ( { item } ) => {
-			return (
-				<a href="...">{ item.author }</a>
-			);
-		},
-		type: 'enumeration',
 		elements: [
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
@@ -179,11 +170,11 @@ Example:
 ```
 
 -   `id`: identifier for the field. Unique.
+-   `type`: the type of the field. Used to render the field and generate the proper filters. See "Field types".
 -   `header`: the field's name to be shown in the UI.
 -   `getValue`: function that returns the value of the field.
--   `render`: function that renders the field.
+-   `formats`: a list of modifications to the default render provided for the field. See "Format".
 -   `elements`: the set of valid values for the field's value.
--   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 -   `filterBy`: configuration for the filters.
@@ -211,10 +202,64 @@ Array of operations that can be performed upon each record. Each action is an ob
     - `list`: the view uses a list layout.
 - Field types:
     - `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+    - `date`: the field value is a date.
+    - `text`: the field value is a string.
+    - `img`: the field value is an image.
 - Operator types:
     - `in`: operator to be used in filters for fields of type `enumeration`.
     - `notIn`: operator to be used in filters for fields of type `enumeration`.
 
+## Formats
+
+Each format is an object whose shape is:
+
+```js
+{
+	type: 'format-type',
+	renderProps: ( { item } ) => { return { newProp: '...' }; },
+	renderChildren: ( { item } ) => { return Component; }
+}
+```
+
+Existing formats are:
+
+- `link`: format that declares the field should contain a link with the given props (href, etc.).
+
+```js
+{
+	type: 'link',
+	renderProps: ( { item } ) => ({ href: 'new-url-based-on-item' }),
+},
+```
+
+- `empty`: format that declares the field wants to render an empty state different from the default.
+
+```js
+{
+	type: 'empty',
+	renderChildren: ( { item } ) => { return __( '(no title)' ); },
+},
+```
+
+- `prefix`: format that renders a component as a prefix to the default render. Example: used to render an icon before.
+
+```js
+{
+	type: 'prefix',
+	renderChildren: ( { item } ) => { return <Icon icon={ iconBasedOnItem } >; },
+}
+```
+
+- `after`: format that renders a component. Similar to CSS pseudo-element `::after`.
+
+```js
+{
+	type: 'after',
+	renderProps: ( { item } ) => ({ className: '...' }),
+	renderChildren: ( { item }) => { return <Label item={item}>; },
+}
+```
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

packages/dataviews/package.json

@@ -31,7 +31,9 @@
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
+		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keycodes": "file:../keycodes",

packages/dataviews/src/constants.js

@@ -18,6 +18,8 @@ import ViewList from './view-list';
 
 // Field types.
 export const ENUMERATION_TYPE = 'enumeration';
+export const DATE_TYPE = 'date';
+export const TEXT_TYPE = 'text';
 
 // Filter operators.
 export const OPERATOR_IN = 'in';

packages/dataviews/src/dataviews.js

@@ -14,7 +14,13 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import { VIEW_LAYOUTS } from './constants';
+import {
+	VIEW_LAYOUTS,
+	DATE_TYPE,
+	ENUMERATION_TYPE,
+	TEXT_TYPE,
+} from './constants';
+import { renderDate, renderEnumeration, renderText } from './types';
 
 export default function DataViews( {
 	view,
@@ -42,11 +48,32 @@ export default function DataViews( {
 		( v ) => v.type === view.type
 	).component;
 	const _fields = useMemo( () => {
-		return fields.map( ( field ) => ( {
-			...field,
-			render: field.render || field.getValue,
-		} ) );
+		return fields.map( ( field ) => {
+			// Normalize formats.
+			field.formats = field.formats || [];
+
+			// Normalize render.
+			switch ( field.type ) {
+				case DATE_TYPE:
+					field.render = ( { item } ) =>
+						renderDate( { field, item } );
+					break;
+				case ENUMERATION_TYPE:
+					field.render = ( { item } ) =>
+						renderEnumeration( { field, item } );
+					break;
+				case TEXT_TYPE:
+					field.render = ( { item } ) =>
+						renderText( { field, item } );
+					break;
+				default:
+					field.render = field.render || field.getValue;
+			}
+
+			return field;
+		} );
 	}, [ fields ] );
+
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 0 } justify="flex-start">
@@ -63,13 +90,13 @@ export default function DataViews( {
 							/>
 						) }
 						<Filters
-							fields={ fields }
+							fields={ _fields }
 							view={ view }
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
 					<ViewActions
-						fields={ fields }
+						fields={ _fields }
 						view={ view }
 						onChangeView={ onChangeView }
 						supportedLayouts={ supportedLayouts }

packages/dataviews/src/types.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { sprintf, __ } from '@wordpress/i18n';
+
+const renderLinkFormat = ( { format, item, children } ) => {
+	const props = format.renderProps( { item } );
+	return <a { ...props }>{ children }</a>;
+};
+
+const renderDateFormat = ( { children } ) => {
+	const formattedDate = dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( children )
+	);
+	return <time>{ formattedDate }</time>;
+};
+
+const renderAfterFormat = ( { format, item } ) => {
+	const props = format.renderProps( { item } );
+	return <span { ...props }>{ format.renderChildren( { item } ) }</span>;
+};
+
+// TODO: remove field prop?
+const renderEmptyFormat = ( { format, item, field } ) => {
+	if ( format ) {
+		const props = format.renderProps ? format.renderProps( { item } ) : {};
+		return <Text { ...props }>{ format.renderChildren( { item } ) }</Text>;
+	}
+
+	return (
+		<>
+			<Text variant="muted" aria-hidden="true">
+				&#8212;
+			</Text>
+			<VisuallyHidden>
+				{ sprintf(
+					/* translators: %s: field description or field id, e.g.: "No author." */
+					__( 'No %s.' ),
+					field.description?.toLowerCase() || field.id
+				) }
+			</VisuallyHidden>
+		</>
+	);
+};
+
+const renderPrefixFormat = ( { format, item, children } ) => {
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ format.renderChildren( { item } ) }
+			<span>{ children }</span>
+		</HStack>
+	);
+};
+
+export const renderDate = ( { field, item } ) => {
+	field.formats.unshift( { type: 'date' } );
+
+	return renderText( { field, item } );
+};
+
+export const renderText = ( { field, item } ) => {
+	const value = decodeEntities( field.getValue( { item } ) );
+	if ( ! value ) {
+		const emptyFormat = field.formats.find(
+			( format ) => format.type === 'empty'
+		);
+		return renderEmptyFormat( { format: emptyFormat, item, field } );
+	}
+
+	const result = field.formats.reduce( ( acc, format ) => {
+		if ( format.type === 'link' ) {
+			return renderLinkFormat( { format, item, children: acc } );
+		}
+		if ( format.type === 'date' ) {
+			return renderDateFormat( { format, item, children: acc } );
+		}
+		return acc;
+	}, value );
+
+	const prefixFormat = field.formats.find(
+		( format ) => format.type === 'prefix'
+	);
+	if ( prefixFormat ) {
+		return renderPrefixFormat( {
+			format: prefixFormat,
+			item,
+			children: result,
+		} );
+	}
+
+	const afterFormat = field.formats.find(
+		( format ) => format.type === 'after'
+	);
+	if ( afterFormat ) {
+		return (
+			<VStack spacing={ 1 }>
+				{ result }
+				{ renderAfterFormat( { format: afterFormat, item } ) }
+			</VStack>
+		);
+	}
+	return result;
+};
+
+export const renderEnumeration = renderText;

packages/dataviews/src/view-list.js

@@ -30,6 +30,9 @@ export default function ViewList( {
 	const primaryField = fields.find(
 		( field ) => field.id === view.layout.primaryField
 	);
+	primaryField.formats = primaryField.formats.filter(
+		( format ) => format.type !== 'link'
+	);
 	const visibleFields = fields.filter(
 		( field ) =>
 			! view.hiddenFields.includes( field.id ) &&
@@ -72,7 +75,9 @@ export default function ViewList( {
 								</div>
 								<HStack>
 									<VStack spacing={ 1 }>
-										{ primaryField?.render( { item } ) }
+										<span>
+											{ primaryField?.render( { item } ) }
+										</span>
 										<div className="dataviews-list-view__fields">
 											{ visibleFields.map( ( field ) => {
 												return (