@wordpress/dataviews 4.22.0 → 5.0.0

package/src/field-types/email.tsx

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { isEmail } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+} 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;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'email',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_CONTAINS,
+			OPERATOR_NOT_CONTAINS,
+			OPERATOR_STARTS_WITH,
+			// Multiple selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/index.tsx

@@ -1,10 +1,23 @@
 /**
  * Internal dependencies
  */
-import type { FieldType, SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	FieldType,
+	FieldTypeDefinition,
+	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';
+import { default as date } from './date';
+import { default as boolean } from './boolean';
+import { default as media } from './media';
+import { default as array } from './array';
+import { renderFromElements } from '../utils';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 /**
  *
@@ -12,7 +25,13 @@ import { default as datetime } from './datetime';
  *
  * @return A field type definition.
  */
-export default function getFieldTypeDefinition( type?: FieldType ) {
+export default function getFieldTypeDefinition< Item >(
+	type?: FieldType
+): FieldTypeDefinition< Item > {
+	if ( 'email' === type ) {
+		return email;
+	}
+
 	if ( 'integer' === type ) {
 		return integer;
 	}
@@ -25,6 +44,24 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 		return datetime;
 	}
 
+	if ( 'date' === type ) {
+		return date;
+	}
+
+	if ( 'boolean' === type ) {
+		return boolean;
+	}
+
+	if ( 'media' === type ) {
+		return media;
+	}
+
+	if ( 'array' === type ) {
+		return array;
+	}
+
+	// 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' ) {
@@ -45,6 +82,16 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 
 			return true;
 		},
-		Edit: () => null,
+		Edit: null,
+		render: ( { item, field }: DataViewRenderFieldProps< Item > ) => {
+			return field.elements
+				? renderFromElements( { item, field } )
+				: field.getValue( { item } );
+		},
+		enableSorting: true,
+		filterBy: {
+			defaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
+			validOperators: ALL_OPERATORS,
+		},
 	};
 }

package/src/field-types/integer.tsx

@@ -1,7 +1,26 @@
 /**
  * Internal dependencies
  */
-import type { SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_BETWEEN,
+} from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? a - b : b - a;
@@ -31,4 +50,36 @@ export default {
 	sort,
 	isValid,
 	Edit: 'integer',
-};
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+		],
+		validOperators: [
+			// Single-selection
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+			// Multiple-selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/media.tsx

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import type { ValidationContext, FieldTypeDefinition } from '../types';
+
+function sort() {
+	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,
+	filterBy: false,
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/text.tsx

@@ -1,7 +1,24 @@
 /**
  * Internal dependencies
  */
-import type { SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_CONTAINS,
+	OPERATOR_IS,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+} from '../constants';
 
 function sort( valueA: any, valueB: any, direction: SortDirection ) {
 	return direction === 'asc'
@@ -24,4 +41,26 @@ export default {
 	sort,
 	isValid,
 	Edit: 'text',
-};
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			// Single selection
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_CONTAINS,
+			OPERATOR_NOT_CONTAINS,
+			OPERATOR_STARTS_WITH,
+			// Multiple selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/filter-and-sort-data-view.ts

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
+import { subDays, subWeeks, subMonths, subYears } from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { getDate } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -13,6 +19,22 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_BETWEEN,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
 } from './constants';
 import { normalizeFields } from './normalize-fields';
 import type { Field, View } from './types';
@@ -23,6 +45,28 @@ function normalizeSearchInput( input = '' ) {
 
 const EMPTY_ARRAY: [] = [];
 
+/**
+ * Calculates a date offset from now.
+ *
+ * @param value Number of units to offset.
+ * @param unit  Unit of time to offset.
+ * @return      Date offset from now.
+ */
+function getRelativeDate( value: number, unit: string ): Date {
+	switch ( unit ) {
+		case 'days':
+			return subDays( new Date(), value );
+		case 'weeks':
+			return subWeeks( new Date(), value );
+		case 'months':
+			return subMonths( new Date(), value );
+		case 'years':
+			return subYears( new Date(), value );
+		default:
+			return new Date();
+	}
+}
+
 /**
  * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
  *
@@ -121,28 +165,244 @@ export function filterSortAndPaginate< Item >(
 					} );
 				} else if ( filter.operator === OPERATOR_IS ) {
 					filteredData = filteredData.filter( ( item ) => {
-						return filter.value === field.getValue( { item } );
+						return (
+							filter.value === field.getValue( { item } ) ||
+							filter.value === undefined
+						);
 					} );
 				} else if ( filter.operator === OPERATOR_IS_NOT ) {
 					filteredData = filteredData.filter( ( item ) => {
 						return filter.value !== field.getValue( { item } );
 					} );
+				} else if (
+					filter.operator === OPERATOR_ON &&
+					filter.value !== undefined
+				) {
+					const filterDate = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldDate = getDate( field.getValue( { item } ) );
+						return filterDate.getTime() === fieldDate.getTime();
+					} );
+				} else if (
+					filter.operator === OPERATOR_NOT_ON &&
+					filter.value !== undefined
+				) {
+					const filterDate = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldDate = getDate( field.getValue( { item } ) );
+						return filterDate.getTime() !== fieldDate.getTime();
+					} );
+				} else if (
+					filter.operator === OPERATOR_LESS_THAN &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue < filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_GREATER_THAN &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue > filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_LESS_THAN_OR_EQUAL &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue <= filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_GREATER_THAN_OR_EQUAL &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue >= filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_CONTAINS &&
+					filter?.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return (
+							typeof fieldValue === 'string' &&
+							filter.value &&
+							fieldValue
+								.toLowerCase()
+								.includes(
+									String( filter.value ).toLowerCase()
+								)
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_NOT_CONTAINS &&
+					filter?.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return (
+							typeof fieldValue === 'string' &&
+							filter.value &&
+							! fieldValue
+								.toLowerCase()
+								.includes(
+									String( filter.value ).toLowerCase()
+								)
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_STARTS_WITH &&
+					filter?.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return (
+							typeof fieldValue === 'string' &&
+							filter.value &&
+							fieldValue
+								.toLowerCase()
+								.startsWith(
+									String( filter.value ).toLowerCase()
+								)
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_BEFORE &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue < filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_AFTER &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue > filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_BEFORE_INC &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue <= filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_AFTER_INC &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue >= filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_BETWEEN &&
+					Array.isArray( filter.value ) &&
+					filter.value.length === 2 &&
+					filter.value[ 0 ] !== undefined &&
+					filter.value[ 1 ] !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						if (
+							typeof fieldValue === 'number' ||
+							fieldValue instanceof Date ||
+							typeof fieldValue === 'string'
+						) {
+							return (
+								fieldValue >= filter.value[ 0 ] &&
+								fieldValue <= filter.value[ 1 ]
+							);
+						}
+						return false;
+					} );
+				} else if (
+					filter.operator === OPERATOR_IN_THE_PAST &&
+					filter.value?.value !== undefined &&
+					filter.value?.unit !== undefined
+				) {
+					const targetDate = getRelativeDate(
+						filter.value.value,
+						filter.value.unit
+					);
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return (
+							fieldValue >= targetDate && fieldValue <= new Date()
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_OVER &&
+					filter.value?.value !== undefined &&
+					filter.value?.unit !== undefined
+				) {
+					const targetDate = getRelativeDate(
+						filter.value.value,
+						filter.value.unit
+					);
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue < targetDate;
+					} );
 				}
 			}
 		} );
 	}
 
 	// Handle sorting.
-	if ( view.sort ) {
-		const fieldId = view.sort.field;
-		const fieldToSort = _fields.find( ( field ) => {
-			return field.id === fieldId;
+	const sortByField = view.sort?.field
+		? _fields.find( ( field ) => {
+				return field.id === view.sort?.field;
+		  } )
+		: null;
+	const groupByField = view.groupByField
+		? _fields.find( ( field ) => {
+				return field.id === view.groupByField;
+		  } )
+		: null;
+	if ( sortByField || groupByField ) {
+		filteredData.sort( ( a, b ) => {
+			if ( groupByField ) {
+				const groupCompare = groupByField.sort( a, b, 'asc' );
+
+				// If items are in different groups, return the group comparison result.
+				// Otherwise, fall back to sorting by the sort field.
+				if ( groupCompare !== 0 ) {
+					return groupCompare;
+				}
+			}
+
+			if ( sortByField ) {
+				return sortByField.sort( a, b, view.sort?.direction ?? 'desc' );
+			}
+
+			return 0;
 		} );
-		if ( fieldToSort ) {
-			filteredData.sort( ( a, b ) => {
-				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
-			} );
-		}
 	}
 
 	// Handle pagination.