DataViews: Support email type of the form field (#103579)

* Dataviews: Support email type of the form field

* Add the email control to dataform

* Try to remove the duplicate validation

* Add email field to story

* Add required to ValidationContext

* Revert "Try to remove the duplicate validation"

This reverts commit c0573e0.

* Revert "Add required to ValidationContext"

This reverts commit fe787dc.

* Fix naming

Author: arthur791004

packages/dataviews/CHANGELOG.automattic.md

@@ -13,6 +13,7 @@
 - Add user input filter support based on the `Edit` property of the field type definitions.
 - Add new filter operators: `lessThan`, `greaterThan`, `lessThanOrEqual`, and `greaterThanOrEqual` for numeric and comparable fields.
 - Add new filter operators: `contains`, `notContains`, `startsWith` for text fields.
+- Add `email` type to the fields of the form.
 
 ## 0.1.1
 

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -95,6 +95,11 @@ const fields = [
 			{ value: 'private', label: 'Private' },
 		],
 	},
+	{
+		id: 'email',
+		label: 'Email',
+		type: 'email' as const,
+	},
 	{
 		id: 'password',
 		label: 'Password',
@@ -123,6 +128,7 @@ export const Default = ( {
 		author: 1,
 		status: 'draft',
 		reviewer: 'fulano',
+		email: '[email protected]',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
 		sticky: false,
@@ -139,6 +145,7 @@ export const Default = ( {
 				'author',
 				'status',
 				'reviewer',
+				'email',
 				'password',
 				'date',
 				'birthdate',

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Email< 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
+			type="email"
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

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

@@ -12,6 +12,7 @@ import type {
 	FieldTypeDefinition,
 } from '../types';
 import datetime from './datetime';
+import email from './email';
 import integer from './integer';
 import radio from './radio';
 import select from './select';
@@ -26,6 +27,7 @@ interface FormControls {
 const FORM_CONTROLS: FormControls = {
 	boolean,
 	datetime,
+	email,
 	integer,
 	radio,
 	select,

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { isEmail } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	Operator,
+} from '../types';
+import { renderFromElements } from '../utils';
+import { OPERATOR_IS_ANY, OPERATOR_IS_NONE } from '../constants';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	// TODO: this implicitly means the value is required.
+	if ( value === '' ) {
+		return false;
+	}
+
+	if ( ! isEmail( value ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context?.elements?.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+const operators: Operator[] = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];
+
+export default {
+	sort,
+	isValid,
+	Edit: 'email',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		operators,
+	},
+};

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

@@ -8,6 +8,7 @@ import type {
 	SortDirection,
 	ValidationContext,
 } from '../types';
+import { default as email } from './email';
 import { default as integer } from './integer';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
@@ -24,6 +25,10 @@ import { renderFromElements } from '../utils';
 export default function getFieldTypeDefinition< Item >(
 	type?: FieldType
 ): FieldTypeDefinition< Item > {
+	if ( 'email' === type ) {
+		return email;
+	}
+
 	if ( 'integer' === type ) {
 		return integer;
 	}

packages/dataviews/src/types.ts

@@ -54,7 +54,13 @@ export type Operator =
 	| 'notContains'
 	| 'startsWith';
 
-export type FieldType = 'text' | 'integer' | 'datetime' | 'media' | 'boolean';
+export type FieldType =
+	| 'text'
+	| 'integer'
+	| 'datetime'
+	| 'media'
+	| 'boolean'
+	| 'email';
 
 export type ValidationContext = {
 	elements?: Option[];