Add validation

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

@@ -88,12 +88,13 @@ function DataFormNumberControl< Item >( {
 }
 
 const controls: {
+	// TODO: make the key type specific to FieldType.
 	[ key: string ]: < Item >(
 		props: DataFormControlProps< Item >
 	) => JSX.Element;
 } = {
 	text: DataFormTextControl,
-	number: DataFormNumberControl,
+	integer: DataFormNumberControl,
 };
 
 function getControlForField< Item >( field: NormalizedField< Item > ) {

packages/dataviews/src/index.ts

@@ -3,3 +3,4 @@ export { default as DataForm } from './components/dataform';
 export { VIEW_LAYOUTS } from './layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
+export { isItemValid } from './validation';

packages/dataviews/src/types.ts

@@ -44,7 +44,7 @@ export type Operator =
 
 export type ItemRecord = Record< string, unknown >;
 
-export type FieldType = 'text';
+export type FieldType = 'text' | 'integer';
 
 /**
  * A dataview field for a specific property of a data type.

packages/dataviews/src/validation.ts

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from './normalize-fields';
+import type { Field } from './types';
+
+export function isItemValid< Item >(
+	item: Item,
+	fields: Field< Item >[]
+): boolean {
+	const _fields = normalizeFields( fields );
+	return _fields.every( ( field ) => {
+		const value = field.getValue( { item } );
+
+		// TODO: this implicitely means the value is required.
+		if ( field.type === 'integer' && value === '' ) {
+			return false;
+		}
+
+		if (
+			field.type === 'integer' &&
+			! Number.isInteger( Number( value ) )
+		) {
+			return false;
+		}
+
+		// Nothing to validate.
+		return true;
+	} );
+}

packages/editor/src/components/post-actions/actions.js

@@ -11,7 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { parse } from '@wordpress/blocks';
-import { DataForm } from '@wordpress/dataviews';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
 import {
 	Button,
 	TextControl,
@@ -48,7 +48,7 @@ const fields = [
 		getValue: ( { item } ) => item.title,
 	},
 	{
-		type: 'number',
+		type: 'integer',
 		id: 'menu_order',
 		label: __( 'Order' ),
 		description: __( 'Determines the order of pages.' ),
@@ -653,12 +653,18 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) {
 
 	async function onOrder( event ) {
 		event.preventDefault();
+
 		if (
-			! Number.isInteger( Number( orderInput ) ) ||
-			orderInput?.trim?.() === ''
+			! isItemValid(
+				item,
+				fields.filter( ( field ) =>
+					formOrderAction.visibleFields.includes( field.id )
+				)
+			)
 		) {
 			return;
 		}
+
 		try {
 			await editEntityRecord( 'postType', item.type, item.id, {
 				menu_order: orderInput,
@@ -682,9 +688,12 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) {
 			} );
 		}
 	}
-	const saveIsDisabled =
-		! Number.isInteger( Number( orderInput ) ) ||
-		orderInput?.trim?.() === '';
+	const isSaveDisabled = ! isItemValid(
+		item,
+		fields.filter( ( field ) =>
+			formOrderAction.visibleFields.includes( field.id )
+		)
+	);
 	return (
 		<form onSubmit={ onOrder }>
 			<VStack spacing="5">
@@ -714,7 +723,7 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) {
 						variant="primary"
 						type="submit"
 						accessibleWhenDisabled
-						disabled={ saveIsDisabled }
+						disabled={ isSaveDisabled }
 						__experimentalIsFocusable
 					>
 						{ __( 'Save' ) }