DataViews: Experiment with field types and inline editing

packages/dataviews/package.json

@@ -31,6 +31,7 @@
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",

packages/dataviews/src/dataviews.js

@@ -15,6 +15,7 @@ import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
 import { VIEW_LAYOUTS } from './constants';
+import { FIELD_TYPES } from './field-types';
 
 export default function DataViews( {
 	view,
@@ -44,7 +45,11 @@ export default function DataViews( {
 	const _fields = useMemo( () => {
 		return fields.map( ( field ) => ( {
 			...field,
-			render: field.render || field.getValue,
+			render:
+				field.render ||
+				FIELD_TYPES[ field.fieldType ]?.render ||
+				field.getValue,
+			edit: field.edit || FIELD_TYPES[ field.fieldType ]?.edit,
 		} ) );
 	}, [ fields ] );
 	return (

packages/dataviews/src/field-types/date-field.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+
+export function DateField( { item, field } ) {
+	const formattedDate = dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( field.getValue( { item } ) )
+	);
+	return <time>{ formattedDate }</time>;
+}

packages/dataviews/src/field-types/enumeration-field.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+
+export function EnumerationFieldEdit( { item, field } ) {
+	const currentValue = field.getValue( { item } );
+	return (
+		<VStack
+			spacing={ 2 }
+			justify="flex-start"
+			className="enumeration-field-edit-wrapper"
+		>
+			{ ( field.editElements || field.elements ).map( ( element ) => {
+				return (
+					<Button
+						key={ element.value.toString() }
+						className="enumeration-field-edit-item"
+						onClick={ () => {
+							if ( element.value !== currentValue ) {
+								field.setValue( {
+									value: element.value,
+									item,
+								} );
+							}
+						} }
+						icon={
+							element.value === currentValue ? check : undefined
+						}
+						style={ {
+							backgroundColor: element.color || undefined,
+						} }
+						disabled={ element.value === currentValue }
+					>
+						{ element.label }
+					</Button>
+				);
+			} ) }
+		</VStack>
+	);
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { DateField } from './date-field';
+import { StringFieldEdit } from './string-field';
+import { EnumerationFieldEdit } from './enumeration-field';
+
+export const FIELD_TYPES = {
+	date: {
+		render: DateField,
+	},
+	string: {
+		edit: StringFieldEdit,
+	},
+	enumeration: { edit: EnumerationFieldEdit },
+};

packages/dataviews/src/field-types/string-field.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+export function StringFieldEdit( { item, field } ) {
+	const [ value, setValue ] = useState( field.getValue( { item } ) );
+	return (
+		<form
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				field.setValue( { value, item } );
+			} }
+		>
+			<TextControl
+				__nextHasNoMarginBottom
+				label={ field.header }
+				hideLabelFromVision
+				value={ value }
+				onChange={ setValue }
+				size="__unstable-large"
+				style={ { margin: 0 } }
+			/>
+		</form>
+	);
+}

packages/dataviews/src/style.scss

@@ -242,3 +242,15 @@
 .dataviews-loading {
 	padding: 0 $grid-unit-40;
 }
+
+
+// TODO: change names/tidy
+.edit-field-popover {
+	.components-popover__content {
+		// TODO: check if this the best way to do it..
+		width: max-content;
+	}
+	.enumeration-field-edit-wrapper {
+		padding: $grid-unit-15;
+	}
+}

packages/dataviews/src/view-grid.js

@@ -51,14 +51,17 @@ export default function ViewGrid( {
 					className="dataviews-view-grid__card"
 				>
 					<div className="dataviews-view-grid__media">
-						{ mediaField?.render( { item } ) }
+						{ mediaField?.render( { item, field: mediaField } ) }
 					</div>
 					<HStack
 						className="dataviews-view-grid__primary-field"
 						justify="space-between"
 					>
 						<FlexBlock>
-							{ primaryField?.render( { item } ) }
+							{ primaryField?.render( {
+								item,
+								field: primaryField,
+							} ) }
 						</FlexBlock>
 						<ItemActions
 							item={ item }
@@ -73,6 +76,7 @@ export default function ViewGrid( {
 						{ visibleFields.map( ( field ) => {
 							const renderedValue = field.render( {
 								item,
+								field,
 							} );
 							if ( ! renderedValue ) {
 								return null;
@@ -87,7 +91,7 @@ export default function ViewGrid( {
 										{ field.header }
 									</div>
 									<div className="dataviews-view-grid__field-value">
-										{ field.render( { item } ) }
+										{ renderedValue }
 									</div>
 								</VStack>
 							);

packages/dataviews/src/view-table.js

@@ -12,13 +12,17 @@ import {
 	arrowDown,
 	chevronRightSmall,
 	funnel,
+	edit,
 } from '@wordpress/icons';
 import {
+	Popover,
 	Button,
 	Icon,
+	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
+	FlexBlock,
 } from '@wordpress/components';
-import { Children, Fragment } from '@wordpress/element';
+import { useState, useRef, Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -396,20 +400,11 @@ function ViewTable( {
 						{ usedData.map( ( item, index ) => (
 							<tr key={ getItemId?.( item ) || index }>
 								{ visibleFields.map( ( field ) => (
-									<td
+									<SingleCell
 										key={ field.id }
-										style={ {
-											width: field.width || undefined,
-											minWidth:
-												field.minWidth || undefined,
-											maxWidth:
-												field.maxWidth || undefined,
-										} }
-									>
-										{ field.render( {
-											item,
-										} ) }
-									</td>
+										field={ field }
+										item={ item }
+									/>
 								) ) }
 								{ !! actions?.length && (
 									<td>
@@ -433,4 +428,75 @@ function ViewTable( {
 	);
 }
 
+function SingleCell( { item, field } ) {
+	const ref = useRef();
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ isViewMode, setIsViewMode ] = useState( true );
+	// TODO: we probably need an `isEligible` function too..
+	// TODO: we need an `edit` function and a `setValue` function.. Can we simplify/combine?
+	const isEditable = !! field.edit;
+	return (
+		<td
+			style={ {
+				width: field.width || undefined,
+				minWidth: field.minWidth || undefined,
+				maxWidth: field.maxWidth || undefined,
+			} }
+			onMouseLeave={ () => setIsHovered( false ) }
+			onMouseEnter={ () => setIsHovered( true ) }
+		>
+			<>
+				<HStack>
+					<FlexBlock ref={ ref }>
+						{ field.render( { item, field } ) }
+					</FlexBlock>
+					<Button
+						icon={ edit }
+						onClick={ () => isViewMode && setIsViewMode( false ) }
+						style={ {
+							padding: 0,
+							visibility:
+								( isEditable && isHovered ) || ! isViewMode
+									? 'visible'
+									: 'hidden',
+						} }
+						disabled={ ! isViewMode }
+						size="compact"
+					/>
+				</HStack>
+				<EditPopover
+					field={ field }
+					item={ item }
+					isViewMode={ isViewMode }
+					setIsViewMode={ setIsViewMode }
+					fieldRef={ ref }
+				/>
+			</>
+		</td>
+	);
+}
+
+function EditPopover( { field, item, isViewMode, setIsViewMode, fieldRef } ) {
+	return (
+		<>
+			{ ! isViewMode && (
+				<Popover
+					placement="bottom-start"
+					className="edit-field-popover"
+					role="dialog"
+					// TODO: check
+					// The anchor element should be stored in local state rather than a plain React ref to ensure reactive updating when it changes.
+					anchor={ fieldRef?.current }
+					onFocusOutside={ () => {
+						setIsViewMode( true );
+					} }
+					animate={ false }
+				>
+					{ field.edit( { item, field } ) }
+				</Popover>
+			) }
+		</>
+	);
+}
+
 export default ViewTable;