DataViews: Refactor the edit function to be based on discrete controls

packages/dataviews/src/dataform-controls/datetime.tsx

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, TimePicker } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function DateTime< Item >( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<TimePicker
+				currentTime={ value }
+				onChange={ onChangeControl }
+				hideLabelFromVision
+			/>
+		</fieldset>
+	);
+}

packages/dataviews/src/components/dataform-controls/index.tsx → packages/dataviews/src/dataform-controls/index.tsx

@@ -10,15 +10,23 @@ import type {
 	DataFormControlProps,
 	Field,
 	FieldTypeDefinition,
-} from '../../types';
+} from '../types';
+import datetime from './datetime';
+import integer from './integer';
 import radio from './radio';
+import select from './select';
+import text from './text';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
 }
 
 const FORM_CONTROLS: FormControls = {
+	datetime,
+	integer,
 	radio,
+	select,
+	text,
 };
 
 export function getControl< Item >(
@@ -29,18 +37,25 @@ export function getControl< Item >(
 		return field.Edit;
 	}
 
-	let control;
 	if ( typeof field.Edit === 'string' ) {
-		control = getControlByType( field.Edit );
+		return getControlByType( field.Edit );
 	}
 
-	return control || fieldTypeDefinition.Edit;
+	if ( field.elements ) {
+		return getControlByType( 'select' );
+	}
+
+	if ( typeof fieldTypeDefinition.Edit === 'string' ) {
+		return getControlByType( fieldTypeDefinition.Edit );
+	}
+
+	return fieldTypeDefinition.Edit;
 }
 
 export function getControlByType( type: string ) {
 	if ( Object.keys( FORM_CONTROLS ).includes( type ) ) {
 		return FORM_CONTROLS[ type ];
 	}
 
-	return null;
+	throw 'Control ' + type + ' not found';
 }

packages/dataviews/src/dataform-controls/integer.tsx

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Integer< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, description } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: Number( newValue ),
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<NumberControl
+			label={ label }
+			help={ description }
+			value={ value }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

packages/dataviews/src/components/dataform-controls/radio.tsx → packages/dataviews/src/dataform-controls/radio.tsx

@@ -7,9 +7,9 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { DataFormControlProps } from '../../types';
+import type { DataFormControlProps } from '../types';
 
-export default function Edit< Item >( {
+export default function Radio< Item >( {
 	data,
 	field,
 	onChange,
@@ -20,10 +20,9 @@ export default function Edit< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
+			onChange( {
 				[ id ]: newValue,
-			} ) ),
+			} ),
 		[ id, onChange ]
 	);
 

packages/dataviews/src/dataform-controls/select.tsx

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Select< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: any ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const elements = [
+		/*
+		 * Value can be undefined when:
+		 *
+		 * - the field is not required
+		 * - in bulk editing
+		 *
+		 */
+		{ label: __( 'Select item' ), value: '' },
+		...( field?.elements ?? [] ),
+	];
+
+	return (
+		<SelectControl
+			label={ label }
+			value={ value }
+			options={ elements }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

packages/dataviews/src/dataform-controls/text.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Text< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

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

@@ -1,18 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { BaseControl, TimePicker, SelectControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type {
-	SortDirection,
-	ValidationContext,
-	DataFormControlProps,
-} from '../types';
+import type { SortDirection, ValidationContext } from '../types';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	const timeA = new Date( a ).getTime();
@@ -32,60 +21,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
-function Edit< Item >( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
-		[ id, onChange ]
-	);
-
-	if ( field.elements ) {
-		const elements = [
-			/*
-			 * Value can be undefined when:
-			 *
-			 * - the field is not required
-			 * - in bulk editing
-			 *
-			 */
-			{ label: __( 'Select item' ), value: '' },
-			...field.elements,
-		];
-
-		return (
-			<SelectControl
-				label={ label }
-				value={ value }
-				options={ elements }
-				onChange={ onChangeControl }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-			/>
-		);
-	}
-
-	return (
-		<fieldset>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			<TimePicker
-				currentTime={ value }
-				onChange={ onChangeControl }
-				hideLabelFromVision
-			/>
-		</fieldset>
-	);
-}
-
 export default {
 	sort,
 	isValid,
-	Edit,
+	Edit: 'datetime',
 };