diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx index d772c677ae3ac8..75d34c168e56b9 100644 --- a/packages/dataviews/src/components/dataform/index.tsx +++ b/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 > ) { diff --git a/packages/dataviews/src/index.ts b/packages/dataviews/src/index.ts index 8b6e53e1ff7293..95a8ab4c2e5e8d 100644 --- a/packages/dataviews/src/index.ts +++ b/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'; diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index f8706597de5a76..37c3efbde5cfb0 100644 --- a/packages/dataviews/src/types.ts +++ b/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. diff --git a/packages/dataviews/src/validation.ts b/packages/dataviews/src/validation.ts new file mode 100644 index 00000000000000..426c61a3481af3 --- /dev/null +++ b/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; + } ); +} diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index 61775bfd1cc1b5..24775dc5bae4b2 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/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 (
@@ -714,7 +723,7 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) { variant="primary" type="submit" accessibleWhenDisabled - disabled={ saveIsDisabled } + disabled={ isSaveDisabled } __experimentalIsFocusable > { __( 'Save' ) }