## Description
Currently, there is no way to read field props from within a custom
field component, i.e. `admin.components.Description`. For example, if
you set `maxLength: 100` on your field, your custom description
component cannot read it from `props.maxLength` or any other methods.
Because these components are rendered on the server, there is also no
way of using `admin.component.Field` to inject custom props yourself,
either. To support this, we can simply pass the base component props
into these components on the server, as expected. This has also led to
custom field component props becoming more strictly typed within the
config.
This change is considered breaking only because the types have changed.
This only affects you if you were previously importing the following
types into your own custom components. To migrate, simply change the
import paths for that type.
Old:
```ts
import type {
ArrayFieldProps,
ReducedBlock,
BlocksFieldProps,
CheckboxFieldProps,
CodeFieldProps,
CollapsibleFieldProps,
DateFieldProps,
EmailFieldProps,
GroupFieldProps,
HiddenFieldProps,
JSONFieldProps,
NumberFieldProps,
PointFieldProps,
RadioFieldProps,
RelationshipFieldProps,
RichTextComponentProps,
RowFieldProps,
SelectFieldProps,
TabsFieldProps,
TextFieldProps,
TextareaFieldProps,
UploadFieldProps,
ErrorProps,
FormFieldBase,
FieldComponentProps,
FieldMap,
MappedField,
MappedTab,
ReducedBlock,
} from '@payloadcms/ui'
```
New:
```ts
import type {
FormFieldBase,
// etc.
} from 'payload'
```
Custom field components are now much more strongly typed. To make this
happen, an explicit type for every custom component has been generated
for every field type. The convention is to append
`DescriptionComponent`, `LabelComponent`, and `ErrorComponent` onto the
end of the field name, i.e. `TextFieldDescriptionComponent`. Here's an
example:
```ts
import type { TextFieldDescriptionComponent } from 'payload'
import React from 'react'
export const CustomDescription: TextFieldDescriptionComponent = (props) => {
return (
<div id="custom-field-description">{`The max length of this field is: ${props?.maxLength}`}</div>
)
}
```
Here's the full list of all new types:
Label Components:
```ts
import type {
ArrayFieldLabelComponent,
BlocksFieldLabelComponent,
CheckboxFieldLabelComponent,
CodeFieldLabelComponent,
CollapsibleFieldLabelComponent,
DateFieldLabelComponent,
EmailFieldLabelComponent,
GroupFieldLabelComponent,
HiddenFieldLabelComponent,
JSONFieldLabelComponent,
NumberFieldLabelComponent,
PointFieldLabelComponent,
RadioFieldLabelComponent,
RelationshipFieldLabelComponent,
RichTextFieldLabelComponent,
RowFieldLabelComponent,
SelectFieldLabelComponent,
TabsFieldLabelComponent,
TextFieldLabelComponent,
TextareaFieldLabelComponent,
UploadFieldLabelComponent
} from 'payload'
```
Error Components:
```tsx
import type {
ArrayFieldErrorComponent,
BlocksFieldErrorComponent,
CheckboxFieldErrorComponent,
CodeFieldErrorComponent,
CollapsibleFieldErrorComponent,
DateFieldErrorComponent,
EmailFieldErrorComponent,
GroupFieldErrorComponent,
HiddenFieldErrorComponent,
JSONFieldErrorComponent,
NumberFieldErrorComponent,
PointFieldErrorComponent,
RadioFieldErrorComponent,
RelationshipFieldErrorComponent,
RichTextFieldErrorComponent,
RowFieldErrorComponent,
SelectFieldErrorComponent,
TabsFieldErrorComponent,
TextFieldErrorComponent,
TextareaFieldErrorComponent,
UploadFieldErrorComponent
} from 'payload'
```
Description Components:
```tsx
import type {
ArrayFieldDescriptionComponent,
BlocksFieldDescriptionComponent,
CheckboxFieldDescriptionComponent,
CodeFieldDescriptionComponent,
CollapsibleFieldDescriptionComponent,
DateFieldDescriptionComponent,
EmailFieldDescriptionComponent,
GroupFieldDescriptionComponent,
HiddenFieldDescriptionComponent,
JSONFieldDescriptionComponent,
NumberFieldDescriptionComponent,
PointFieldDescriptionComponent,
RadioFieldDescriptionComponent,
RelationshipFieldDescriptionComponent,
RichTextFieldDescriptionComponent,
RowFieldDescriptionComponent,
SelectFieldDescriptionComponent,
TabsFieldDescriptionComponent,
TextFieldDescriptionComponent,
TextareaFieldDescriptionComponent,
UploadFieldDescriptionComponent
} from 'payload'
```
This PR also:
- Standardizes the `FieldBase['label']` type with a new `LabelStatic`
type. This makes type usage much more consistent across components.
- Simplifies some of the typings in the field component map, removes
unneeded `<Omit>`, etc.
- Fixes misc. linting issues around voiding promises
- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## Checklist:
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes
- [x] I have made corresponding changes to the documentation
386 lines
9.0 KiB
TypeScript
386 lines
9.0 KiB
TypeScript
/* tslint:disable */
|
|
/* eslint-disable */
|
|
/**
|
|
* This file was automatically generated by Payload.
|
|
* DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
|
|
* and re-run `payload generate:types` to regenerate this file.
|
|
*/
|
|
|
|
export interface Config {
|
|
auth: {
|
|
users: UserAuthOperations;
|
|
};
|
|
collections: {
|
|
uploads: Upload;
|
|
posts: Post;
|
|
users: User;
|
|
'hidden-collection': HiddenCollection;
|
|
'collection-no-api-view': CollectionNoApiView;
|
|
'custom-views-one': CustomViewsOne;
|
|
'custom-views-two': CustomViewsTwo;
|
|
'custom-fields': CustomField;
|
|
'group-one-collection-ones': GroupOneCollectionOne;
|
|
'group-one-collection-twos': GroupOneCollectionTwo;
|
|
'group-two-collection-ones': GroupTwoCollectionOne;
|
|
'group-two-collection-twos': GroupTwoCollectionTwo;
|
|
geo: Geo;
|
|
customIdTab: CustomIdTab;
|
|
customIdRow: CustomIdRow;
|
|
'disable-duplicate': DisableDuplicate;
|
|
'payload-preferences': PayloadPreference;
|
|
'payload-migrations': PayloadMigration;
|
|
};
|
|
db: {
|
|
defaultIDType: string;
|
|
};
|
|
globals: {
|
|
'hidden-global': HiddenGlobal;
|
|
'global-no-api-view': GlobalNoApiView;
|
|
global: Global;
|
|
'custom-global-views-one': CustomGlobalViewsOne;
|
|
'custom-global-views-two': CustomGlobalViewsTwo;
|
|
'group-globals-one': GroupGlobalsOne;
|
|
'group-globals-two': GroupGlobalsTwo;
|
|
};
|
|
locale: 'es' | 'en';
|
|
user: User & {
|
|
collection: 'users';
|
|
};
|
|
}
|
|
export interface UserAuthOperations {
|
|
forgotPassword: {
|
|
email: string;
|
|
};
|
|
login: {
|
|
email: string;
|
|
password: string;
|
|
};
|
|
registerFirstUser: {
|
|
email: string;
|
|
password: string;
|
|
};
|
|
unlock: {
|
|
email: string;
|
|
};
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "uploads".
|
|
*/
|
|
export interface Upload {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
url?: string | null;
|
|
thumbnailURL?: string | null;
|
|
filename?: string | null;
|
|
mimeType?: string | null;
|
|
filesize?: number | null;
|
|
width?: number | null;
|
|
height?: number | null;
|
|
focalX?: number | null;
|
|
focalY?: number | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "posts".
|
|
*/
|
|
export interface Post {
|
|
id: string;
|
|
title?: string | null;
|
|
description?: string | null;
|
|
number?: number | null;
|
|
richText?:
|
|
| {
|
|
[k: string]: unknown;
|
|
}[]
|
|
| null;
|
|
group?: {
|
|
title?: string | null;
|
|
};
|
|
relationship?: (string | null) | Post;
|
|
customCell?: string | null;
|
|
sidebarField?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
_status?: ('draft' | 'published') | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "users".
|
|
*/
|
|
export interface User {
|
|
id: string;
|
|
textField?: string | null;
|
|
sidebarField?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
email: string;
|
|
resetPasswordToken?: string | null;
|
|
resetPasswordExpiration?: string | null;
|
|
salt?: string | null;
|
|
hash?: string | null;
|
|
loginAttempts?: number | null;
|
|
lockUntil?: string | null;
|
|
password?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "hidden-collection".
|
|
*/
|
|
export interface HiddenCollection {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "collection-no-api-view".
|
|
*/
|
|
export interface CollectionNoApiView {
|
|
id: string;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "custom-views-one".
|
|
*/
|
|
export interface CustomViewsOne {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "custom-views-two".
|
|
*/
|
|
export interface CustomViewsTwo {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "custom-fields".
|
|
*/
|
|
export interface CustomField {
|
|
id: string;
|
|
customTextField?: string | null;
|
|
descriptionAsString?: string | null;
|
|
descriptionAsFunction?: string | null;
|
|
descriptionAsComponent?: string | null;
|
|
customSelectField?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "group-one-collection-ones".
|
|
*/
|
|
export interface GroupOneCollectionOne {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "group-one-collection-twos".
|
|
*/
|
|
export interface GroupOneCollectionTwo {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "group-two-collection-ones".
|
|
*/
|
|
export interface GroupTwoCollectionOne {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "group-two-collection-twos".
|
|
*/
|
|
export interface GroupTwoCollectionTwo {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "geo".
|
|
*/
|
|
export interface Geo {
|
|
id: string;
|
|
/**
|
|
* @minItems 2
|
|
* @maxItems 2
|
|
*/
|
|
point?: [number, number] | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "customIdTab".
|
|
*/
|
|
export interface CustomIdTab {
|
|
id: string | null;
|
|
title?: string | null;
|
|
description?: string | null;
|
|
number?: number | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "customIdRow".
|
|
*/
|
|
export interface CustomIdRow {
|
|
id: string | null;
|
|
title?: string | null;
|
|
description?: string | null;
|
|
number?: number | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "disable-duplicate".
|
|
*/
|
|
export interface DisableDuplicate {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "payload-preferences".
|
|
*/
|
|
export interface PayloadPreference {
|
|
id: string;
|
|
user: {
|
|
relationTo: 'users';
|
|
value: string | User;
|
|
};
|
|
key?: string | null;
|
|
value?:
|
|
| {
|
|
[k: string]: unknown;
|
|
}
|
|
| unknown[]
|
|
| string
|
|
| number
|
|
| boolean
|
|
| null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "payload-migrations".
|
|
*/
|
|
export interface PayloadMigration {
|
|
id: string;
|
|
name?: string | null;
|
|
batch?: number | null;
|
|
updatedAt: string;
|
|
createdAt: string;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "hidden-global".
|
|
*/
|
|
export interface HiddenGlobal {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "global-no-api-view".
|
|
*/
|
|
export interface GlobalNoApiView {
|
|
id: string;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "global".
|
|
*/
|
|
export interface Global {
|
|
id: string;
|
|
title?: string | null;
|
|
sidebarField?: string | null;
|
|
_status?: ('draft' | 'published') | null;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "custom-global-views-one".
|
|
*/
|
|
export interface CustomGlobalViewsOne {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "custom-global-views-two".
|
|
*/
|
|
export interface CustomGlobalViewsTwo {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "group-globals-one".
|
|
*/
|
|
export interface GroupGlobalsOne {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "group-globals-two".
|
|
*/
|
|
export interface GroupGlobalsTwo {
|
|
id: string;
|
|
title?: string | null;
|
|
updatedAt?: string | null;
|
|
createdAt?: string | null;
|
|
}
|
|
/**
|
|
* This interface was referenced by `Config`'s JSON-Schema
|
|
* via the `definition` "auth".
|
|
*/
|
|
export interface Auth {
|
|
[k: string]: unknown;
|
|
}
|
|
|
|
|
|
declare module 'payload' {
|
|
// @ts-ignore
|
|
export interface GeneratedTypes extends Config {}
|
|
} |