@wordpress/dataviews 4.0.0 → 4.1.0

package/src/normalize-fields.ts

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { Field, NormalizedField, ItemRecord } from './types';
+import getFieldTypeDefinition from './field-types';
+import type { Field, NormalizedField } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -13,15 +14,55 @@ export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
+		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
+
 		const getValue =
 			field.getValue ||
-			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
+			( ( { item }: { item: Item } ) => item[ field.id as keyof Item ] );
+
+		const sort =
+			field.sort ??
+			function sort( a, b, direction ) {
+				return fieldTypeDefinition.sort(
+					getValue( { item: a } ),
+					getValue( { item: b } ),
+					direction
+				);
+			};
+
+		const isValid =
+			field.isValid ??
+			function isValid( item, context ) {
+				return fieldTypeDefinition.isValid(
+					getValue( { item } ),
+					context
+				);
+			};
+
+		const Edit = field.Edit || fieldTypeDefinition.Edit;
+
+		const renderFromElements = ( { item }: { item: Item } ) => {
+			const value = getValue( { item } );
+			const label = field?.elements?.find( ( element ) => {
+				// Intentionally using == here to allow for type coercion.
+				// eslint-disable-next-line eqeqeq
+				return element.value == value;
+			} )?.label;
+
+			return label || value;
+		};
+
+		const render =
+			field.render || ( field.elements ? renderFromElements : getValue );
 
 		return {
 			...field,
 			label: field.label || field.id,
 			getValue,
-			render: field.render || getValue,
+			render,
+			sort,
+			isValid,
+			Edit,
 		};
 	} );
 }

package/src/style.scss

@@ -5,7 +5,10 @@
 @import "./components/dataviews-pagination/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
+@import "./components/dataviews-view-config/style.scss";
 
-@import "./layouts/grid/style.scss";
-@import "./layouts/list/style.scss";
-@import "./layouts/table/style.scss";
+@import "./dataviews-layouts/grid/style.scss";
+@import "./dataviews-layouts/list/style.scss";
+@import "./dataviews-layouts/table/style.scss";
+
+@import "./dataforms-layouts/panel/style.scss";

package/src/test/filter-and-sort-data-view.js

@@ -233,7 +233,22 @@ describe( 'filters', () => {
 } );
 
 describe( 'sorting', () => {
-	it( 'should sort by string', () => {
+	it( 'should sort integer field types', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'satellites', direction: 'desc' },
+			},
+			fields
+		);
+
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should sort text field types', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
@@ -253,13 +268,18 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
 
-	it( 'should sort by number', () => {
+	it( 'should sort untyped fields if the value is a number', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
 				sort: { field: 'satellites', direction: 'desc' },
 			},
-			fields
+			// Remove type information for satellites field to test sorting untyped fields.
+			fields.map( ( field ) =>
+				field.id === 'satellites'
+					? { ...field, type: undefined }
+					: field
+			)
 		);
 
 		expect( result ).toHaveLength( 11 );
@@ -267,6 +287,29 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].title ).toBe( 'Uranus' );
 	} );
+
+	it( 'should sort untyped fields if the value is string', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			// Remove type information for the title field to test sorting untyped fields.
+			fields.map( ( field ) =>
+				field.id === 'title' ? { ...field, type: undefined } : field
+			)
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
 } );
 
 describe( 'pagination', () => {

package/src/test/validation.ts

@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { isItemValid } from '../validation';
+import type { Field } from '../types';
+
+describe( 'validation', () => {
+	it( 'fields not visible in form are not validated', () => {
+		const item = { id: 1, valid_order: 2, invalid_order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'valid_order',
+				type: 'integer',
+			},
+			{
+				id: 'invalid_order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'valid_order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field is valid if value is integer', () => {
+		const item = { id: 1, order: 2, title: 'hi' };
+		const fields: Field< {} >[] = [
+			{
+				type: 'integer',
+				id: 'order',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field is invalid if value is not integer', () => {
+		const item = { id: 1, order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field is invalid if value is empty', () => {
+		const item = { id: 1, order: '' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 3 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Jane' },
+					{ value: 2, label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'text field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 'not-in-elements' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				type: 'text',
+				elements: [
+					{ value: 'jane', label: 'Jane' },
+					{ value: 'john', label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'untyped field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 'not-in-elements' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				elements: [
+					{ value: 'jane', label: 'Jane' },
+					{ value: 'john', label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'fields can provide its own isValid function', () => {
+		const item = { id: 1, order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+				elements: [
+					{ value: 'a', label: 'A' },
+					{ value: 'b', label: 'B' },
+				],
+				isValid: () => true, // Overrides the validation provided for integer types.
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+} );

package/src/types.ts

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ComponentType } from 'react';
+import type {
+	ReactElement,
+	ComponentType,
+	Dispatch,
+	SetStateAction,
+} from 'react';
 
 /**
  * Internal dependencies
@@ -44,7 +49,11 @@ export type Operator =
 
 export type ItemRecord = Record< string, unknown >;
 
-export type FieldType = 'text';
+export type FieldType = 'text' | 'integer';
+
+export type ValidationContext = {
+	elements?: Option[];
+};
 
 /**
  * A dataview field for a specific property of a data type.
@@ -65,6 +74,11 @@ export type Field< Item > = {
 	 */
 	label?: string;
 
+	/**
+	 * A description of the field.
+	 */
+	description?: string;
+
 	/**
 	 * Placeholder for the field.
 	 */
@@ -75,6 +89,21 @@ export type Field< Item > = {
 	 */
 	render?: ComponentType< { item: Item } >;
 
+	/**
+	 * Callback used to render an edit control for the field.
+	 */
+	Edit?: ComponentType< DataFormControlProps< Item > >;
+
+	/**
+	 * Callback used to sort the field.
+	 */
+	sort?: ( a: Item, b: Item, direction: SortDirection ) => number;
+
+	/**
+	 * Callback used to validate the field.
+	 */
+	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
+
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -119,6 +148,9 @@ export type NormalizedField< Item > = Field< Item > & {
 	label: string;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< { item: Item } >;
+	Edit: ComponentType< DataFormControlProps< Item > >;
+	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
+	isValid: ( item: Item, context?: ValidationContext ) => boolean;
 };
 
 /**
@@ -132,7 +164,15 @@ export type Data< Item > = Item[];
  * The form configuration.
  */
 export type Form = {
-	visibleFields?: string[];
+	type?: 'regular' | 'panel';
+	fields?: string[];
+};
+
+export type DataFormControlProps< Item > = {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: Dispatch< SetStateAction< Item > >;
+	hideLabelFromVision?: boolean;
 };
 
 /**
@@ -459,3 +499,10 @@ export interface SupportedLayouts {
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;
 }
+
+export interface DataFormProps< Item > {
+	data: Item;
+	fields: Field< Item >[];
+	form: Form;
+	onChange: Dispatch< SetStateAction< Item > >;
+}

package/src/validation.ts

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from './normalize-fields';
+import type { Field, Form } from './types';
+
+export function isItemValid< Item >(
+	item: Item,
+	fields: Field< Item >[],
+	form: Form
+): boolean {
+	const _fields = normalizeFields(
+		fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+	);
+	return _fields.every( ( field ) => {
+		return field.isValid( item, { elements: field.elements } );
+	} );
+}

package/tsconfig.json

@@ -14,7 +14,8 @@
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../primitives" },
-		{ "path": "../private-apis" }
+		{ "path": "../private-apis" },
+		{ "path": "../warning" }
 	],
 	"include": [ "src" ]
 }