Skip to content

DataForm: introduce validity prop #71412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Oct 16, 2025
Merged

DataForm: introduce validity prop #71412

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
26b113b
Make validation controlled and async
oandregal Aug 29, 2025
9b1fa80
Remove isItemValid
oandregal Oct 15, 2025
1acbc8f
Document useIsFormValid hook
oandregal Oct 15, 2025
c965fa8
Test useIsFormValid: port all existing test for isItemValid
oandregal Oct 15, 2025
219dd24
Update FieldValidity and FormValidity types
oandregal Oct 15, 2025
3cbe36d
useIsFormValid: update tests
oandregal Oct 15, 2025
744e219
Update docs
oandregal Oct 15, 2025
81579ac
Create getCustomValidity utility
oandregal Oct 15, 2025
9ff587b
Update tests
oandregal Oct 15, 2025
16676bb
Rename useIsFormValid to useFormValidity
oandregal Oct 15, 2025
522dd49
useFormValidity returns validity and isValid
oandregal Oct 15, 2025
b2600d0
Add a test for isValid
oandregal Oct 15, 2025
af2bc15
DataForm: datetime control uses validity prop
oandregal Oct 15, 2025
2121abb
DataForm: date control uses validity prop
oandregal Oct 15, 2025
e067e62
Add changelog
oandregal Oct 15, 2025
f8d2252
DataForm: date control attaches different class depending on type
oandregal Oct 15, 2025
1851f70
Fix unmounting issue with panel dropdown/modal
oandregal Oct 16, 2025
10862ef
getCustomValidity: fall through to elements or custom if validity.req…
oandregal Oct 16, 2025
e80ff81
Update changelog
oandregal Oct 16, 2025
84b0a5d
Update README
oandregal Oct 16, 2025
224089f
Story: better custom Edit
oandregal Oct 16, 2025
b1979b1
Support combined fields.
oandregal Oct 16, 2025
1027148
Make linter happy
oandregal Oct 16, 2025
375c4a8
story: remove unnecessary flags
oandregal Oct 16, 2025
22c8cb7
Move useFormValidity test to proper place
oandregal Oct 16, 2025
12f88bf
Improve useFormValidity hook
oandregal Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update FieldValidity and FormValidity types
  • Loading branch information
@oandregal
oandregal committed Oct 16, 2025
commit 219dd24eaefd75114aea9ab7928358910984e683
9 changes: 2 additions & 7 deletions packages/dataviews/src/dataform-layouts/data-form-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,25 +90,20 @@ export function DataFormLayout< Item >( {
( props ) => (
<FieldLayout
{ ...props }
validity={ validity?.find(
( item ) => item.id === formField.id
) }
validity={ validity?.[ formField.id ] }
/>
),
formField
);
}

const fieldValidity = validity?.find(
( item ) => item.id === formField.id
);
return (
<FieldLayout
key={ formField.id }
data={ data }
field={ formField }
onChange={ onChange }
validity={ fieldValidity }
validity={ validity?.[ formField.id ] }
/>
);
} ) }
Expand Down
169 changes: 69 additions & 100 deletions packages/dataviews/src/hooks/use-is-form-valid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,16 @@ export function useIsFormValid< Item >(
field.isValid.required &&
isInvalidForRequired( field.type, value )
) {
setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !== field.id
)
: [] ),
{
id: field.id,
required: 'invalid',
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
required: {
type: 'invalid',
message: 'Required',
},
},
] );
} ) );
return;
}

Expand All @@ -126,33 +124,30 @@ export function useIsFormValid< Item >(
if ( allAreValid ) {
return;
}
setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !== field.id
)
: [] ),
{
id: field.id,
elements: 'invalid',
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
elements: {
type: 'invalid',
message:
'Value must be one of the elements.',
},
},
] );
} ) );
return;
}

setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !== field.id
)
: [] ),
{
id: field.id,
elements: 'invalid',
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
elements: {
type: 'invalid',
message: 'Value must be one of the elements.',
},
},
] );
} ) );
return;
}

Expand All @@ -162,18 +157,16 @@ export function useIsFormValid< Item >(
return;
}

setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !== field.id
)
: [] ),
{
id: field.id,
elements: 'invalid',
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
elements: {
type: 'invalid',
message: 'Value must be one of the elements.',
},
},
] );
} ) );
return;
}

Expand All @@ -196,79 +189,57 @@ export function useIsFormValid< Item >(
return;
}

setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !== field.id
)
: [] ),
{
id: field.id,
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
custom: {
type: 'validating',
message: 'Validating...',
},
},
] );
} ) );

if ( customAsyncError instanceof Promise ) {
customAsyncError
.then( ( result ) => {
if ( result === null ) {
setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !==
field.id
)
: [] ),
{
id: field.id,
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
custom: {
type: 'valid',
message: 'Valid',
},
},
] );
} ) );
}

if ( typeof result === 'string' ) {
setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !==
field.id
)
: [] ),
{
id: field.id,
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
custom: {
type: 'invalid',
message: result,
},
},
] );
} ) );
}
} )
.catch( ( error ) => {
setFormValidity( ( prev ) => [
...( prev
? prev.filter(
( fieldValidation ) =>
fieldValidation.id !== field.id
)
: [] ),
{
id: field.id,
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
custom: {
type: 'invalid',
message: error.message,
},
},
] );
} ) );
} );
}

Expand All @@ -282,35 +253,33 @@ export function useIsFormValid< Item >(
) {
const customError = field.isValid.custom( item, field );
if ( typeof customError === 'string' ) {
setFormValidity( ( prev ) => [
...( prev
? prev.filter( ( error ) => error.id !== field.id )
: [] ),
{
id: field.id,
setFormValidity( ( prev ) => ( {
...prev,
[ field.id ]: {
...prev?.[ field.id ],
custom: {
type: 'invalid',
message: customError,
},
},
] );
} ) );
return;
}
}

// No errors for this field, remove from errors object
setFormValidity( ( prev ) => {
const errors = [
...( prev ? prev : [] ).filter(
( error ) => error.id !== field.id
),
];
if ( ! prev || ! prev[ field.id ] ) {
return prev;
}

const { [ field.id ]: removed, ...rest } = prev;

if ( errors.length === 0 ) {
if ( Object.keys( rest ).length === 0 ) {
return undefined;
}

return errors;
return rest;
} );
} );
}, [ item, fields, form ] );
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/types/dataform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export interface DataFormProps< Item > {
validity?: FormValidity;
}

export type FormValidity = FieldValidity[] | undefined;
export type FormValidity = Record< string, FieldValidity > | undefined;

export interface FieldLayoutProps< Item > {
data: Item;
Expand Down
25 changes: 12 additions & 13 deletions packages/dataviews/src/types/field-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,19 +326,18 @@ export type NormalizedField< Item > = Omit< Field< Item >, 'Edit' > & {
export type Fields< Item > = Field< Item >[];

export type FieldValidity = {
Copy link
Contributor

@youknowriad youknowriad Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why limit it to "required", "elements" and "custom". I believe we need to absorb more later (min, max...)... So might be better to just keep it open ended and fields can even have their own custom keys.

Copy link
Member Author

@oandregal oandregal Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's easier to open it later than to close it, so I'd rather start small and focused. If we allow anything as key, we'll run into conflicts later when we want to add more keys. For example, imagine we want to add a min/max/patterns key, but, a 3rd party is already using those.

Copy link
Contributor

@youknowriad youknowriad Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imagine we want to add a min/max/patterns key, but, a 3rd party is already using those.

Seems fine to me but I'm ok with opening later.

id: string;
required?: 'invalid';
elements?: 'invalid';
custom?:
| {
type: 'invalid';
message: string;
}
| {
type: 'validating';
message: 'Validating...';
}
| { type: 'valid'; message: 'Valid' };
required?: {
type: 'valid' | 'invalid' | 'validating';
message?: string;
};
elements?: {
type: 'valid' | 'invalid' | 'validating';
message?: string;
};
custom?: {
type: 'valid' | 'invalid' | 'validating';
message: string;
};
};

export type DataFormControlProps< Item > = {
Expand Down