tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: adds examples of typed custom field components (#10741)

Browse Source 
Although the "customizing fields" doc provides a big picture overview of
how to create custom field components, it is not explicit enough for
developers to know exactly where to start. For example, it can be
challenging to import the correct types when building these components,
and the natural place to go looking for this information is on the
fields docs themselves. Now, each field doc has its own dedicated
"custom components" section which provides concrete examples for fields
and field labels in both server and client component format, with more
examples to come over time such as using inputs directly, etc. In the
same vein, the "customizing fields" doc itself should probably be moved
to the fields overview section so it remains as intuitive as possible
when searching for this information.
This commit is contained in:
Jacob Fletcher
2025-01-22 23:07:09 -05:00
committed by GitHub
parent 3501d47e2d
commit 8b3e2ff5e5
76 changed files with 2043 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
docs/fields/array.mdx
View File

@@ -125,18 +125,99 @@ export const ExampleCollection: CollectionConfig = {
type: 'text',
},
],
admin: {
components: {
RowLabel: '/path/to/ArrayRowLabel#ArrayRowLabel',
},
},
},
],
}
```
### Example of a custom RowLabel component
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { ArrayField } from '@payloadcms/ui'
import type { ArrayFieldServerComponent } from 'payload'
export const CustomArrayFieldServer: ArrayFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions
}) => {
return (
<ArrayField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { ArrayField } from '@payloadcms/ui'
import type { ArrayFieldClientComponent } from 'payload'
export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
return <ArrayField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { ArrayFieldLabelServerComponent } from 'payload'
export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import type { ArrayFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = ({
field,
path
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```
### Row Label
```tsx
'use client'

86
docs/fields/blocks.mdx
View File

@@ -209,6 +209,92 @@ export const ExampleCollection: CollectionConfig = {
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { BlocksField } from '@payloadcms/ui'
import type { BlocksFieldServerComponent } from 'payload'
export const CustomBlocksFieldServer: BlocksFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions
}) => {
return (
<BlocksField field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { BlocksField } from '@payloadcms/ui'
import type { BlocksFieldClientComponent } from 'payload'
export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
return <BlocksField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { BlocksFieldLabelServerComponent } from 'payload'
export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { BlocksFieldLabelClientComponent } from 'payload'
export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({
label,
path,
required,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```
## TypeScript
As you build your own Block configs, you might want to store them in separate files but retain typing accordingly. To do so, you can import and use Payload's `Block` type:

87
docs/fields/checkbox.mdx
View File

@@ -67,3 +67,90 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { CheckboxField } from '@payloadcms/ui'
import type { CheckboxFieldServerComponent } from 'payload'
export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<CheckboxField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { CheckboxField } from '@payloadcms/ui'
import type { CheckboxFieldClientComponent } from 'payload'
export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (props) => {
return <CheckboxField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CheckboxFieldLabelServerComponent } from 'payload'
export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CheckboxFieldLabelClientComponent } from 'payload'
export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = ({
label,
path,
required,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

82
docs/fields/code.mdx
View File

@@ -95,3 +95,85 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { CodeField } from '@payloadcms/ui'
import type { CodeFieldServerComponent } from 'payload'
export const CustomCodeFieldServer: CodeFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<CodeField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { CodeField } from '@payloadcms/ui'
import type { CodeFieldClientComponent } from 'payload'
export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => {
return <CodeField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CodeFieldLabelServerComponent } from 'payload'
export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CodeFieldLabelClientComponent } from 'payload'
export const CustomCodeFieldLabelClient: CodeFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

87
docs/fields/date.mdx
View File

@@ -135,3 +135,90 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { DateTimeField } from '@payloadcms/ui'
import type { DateFieldServerComponent } from 'payload'
export const CustomDateFieldServer: DateFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<DateTimeField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { DateTimeField } from '@payloadcms/ui'
import type { DateFieldClientComponent } from 'payload'
export const CustomDateFieldClient: DateFieldClientComponent = (props) => {
return <DateTimeField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { DateFieldLabelServerComponent } from 'payload'
export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { DateFieldLabelClientComponent } from 'payload'
export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

80
docs/fields/email.mdx
View File

@@ -90,3 +90,83 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { EmailField } from '@payloadcms/ui'
import type { EmailFieldServerComponent } from 'payload'
export const CustomEmailFieldServer: EmailFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<EmailField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { EmailField } from '@payloadcms/ui'
import type { EmailFieldClientComponent } from 'payload'
export const CustomEmailFieldClient: EmailFieldClientComponent = (props) => {
return <EmailField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { EmailFieldLabelServerComponent } from 'payload'
export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { EmailFieldLabelClientComponent } from 'payload'
export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)}
```

86
docs/fields/json.mdx
View File

@@ -154,3 +154,89 @@ export const ExampleCollection: CollectionConfig = {
// {"foo": "bar"} or {"foo": "foobar"} - ok
// Attempting to create {"foo": "not-bar"} will throw an error
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { JSONField } from '@payloadcms/ui'
import type { JSONFieldServerComponent } from 'payload'
export const CustomJSONFieldServer: JSONFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<JSONField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { JSONField } from '@payloadcms/ui'
import type { JSONFieldClientComponent } from 'payload'
export const CustomJSONFieldClient: JSONFieldClientComponent = (props) => {
return <JSONField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { JSONFieldLabelServerComponent } from 'payload'
export const CustomJSONFieldLabelServer: JSONFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { JSONFieldLabelClientComponent } from 'payload'
export const CustomJSONFieldLabelClient: JSONFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

86
docs/fields/number.mdx
View File

@@ -98,3 +98,89 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { NumberField } from '@payloadcms/ui'
import type { NumberFieldServerComponent } from 'payload'
export const CustomNumberFieldServer: NumberFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<NumberField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { NumberField } from '@payloadcms/ui'
import type { NumberFieldClientComponent } from 'payload'
export const CustomNumberFieldClient: NumberFieldClientComponent = (props) => {
return <NumberField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { NumberFieldLabelServerComponent } from 'payload'
export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { NumberFieldLabelClientComponent } from 'payload'
export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

81
docs/fields/point.mdx
View File

@@ -129,3 +129,84 @@ payload.find({
},
})
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { PointField } from '@payloadcms/ui'
import type { PointFieldServerComponent } from 'payload'
export const CustomPointFieldServer: PointFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<PointField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { PointField } from '@payloadcms/ui'
import type { PointFieldClientComponent } from 'payload'
export const CustomPointFieldClient: PointFieldClientComponent = (props) => {
return <PointField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { PointFieldLabelServerComponent } from 'payload'
export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { PointFieldLabelClientComponent } from 'payload'
export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

87
docs/fields/radio.mdx
View File

@@ -117,3 +117,90 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { RadioGroupField } from '@payloadcms/ui'
import type { RadioFieldServerComponent } from 'payload'
export const CustomRadioFieldServer: RadioFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<RadioGroupField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { RadioGroupField } from '@payloadcms/ui'
import type { RadioFieldClientComponent } from 'payload'
export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => {
return <RadioGroupField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RadioFieldLabelServerComponent } from 'payload'
export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({
clientField,
path,
required,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RadioFieldLabelClientComponent } from 'payload'
export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

86
docs/fields/relationship.mdx
View File

@@ -373,3 +373,89 @@ Since we are referencing multiple collections, the field you are querying on may
You **cannot** query on a field within a polymorphic relationship as you would with a
non-polymorphic relationship.
</Banner>
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { RelationshipField } from '@payloadcms/ui'
import type { RelationshipFieldServerComponent } from 'payload'
export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<RelationshipField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { RelationshipField } from '@payloadcms/ui'
import type { RelationshipFieldClientComponent } from 'payload'
export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (props) => {
return <RelationshipField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RelationshipFieldLabelServerComponent } from 'payload'
export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = (
clientField,
path
) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RelationshipFieldLabelClientComponent } from 'payload'
export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

143
docs/fields/select.mdx
View File

@@ -125,83 +125,90 @@ export const ExampleCollection: CollectionConfig = {
}
```
## Customization
## Custom Components
The Select field UI component can be customized by providing a custom React component to the `components` object in the Base config.
### Field
```ts
export const CustomSelectField: Field = {
name: 'customSelectField',
type: 'select', // or 'text' if you have dynamic options
admin: {
components: {
Field: CustomSelectComponent({
options: [
{
label: 'Option 1',
value: '1',
},
{
label: 'Option 2',
value: '2',
},
],
}),
},
},
}
```
#### Server Component
You can import the existing Select component directly from Payload, then extend and customize it as needed.
```tsx
import type { SelectFieldServerComponent } from 'payload'
import type React from 'react'
```ts
import * as React from 'react';
import { SelectInput, useAuth, useField } from '@payloadcms/ui';
type CustomSelectProps = {
path: string;
options: {
label: string;
value: string;
}[];
}
export const CustomSelectComponent: React.FC<CustomSelectProps> = ({ path, options }) => {
const { value, setValue } = useField<string>({ path })
const { user } = useAuth()
const adjustedOptions = options.filter((option) => {
/*
A common use case for a custom select
is to show different options based on
the current user's role.
*/
return option;
});
import { SelectField } from '@payloadcms/ui'
export const CustomSelectFieldServer: SelectFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<div>
<label className="field-label">
Custom Select
</label>
<SelectInput
path={path}
name={path}
options={adjustedOptions}
value={value}
onChange={(e) => setValue(e.value)}
/>
</div>
<SelectField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
If you are looking to create a dynamic select field, the following tutorial will walk you through the process of creating a custom select field that fetches its options from an external API.
#### Client Component
<VideoDrawer
id="Efn9OxSjA6Y"
label="How to Create a Custom Select Field"
drawerTitle="How to Create a Custom Select Field: A Step-by-Step Guide"
/>
```tsx
'use client'
import type { SelectFieldClientComponent } from 'payload'
If you want to learn more about custom components check out the [Admin > Custom Component](/docs/admin/fields) docs.
import { SelectField } from '@payloadcms/ui'
import React from 'react'
export const CustomSelectFieldClient: SelectFieldClientComponent = (props) => {
return <SelectField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { SelectFieldLabelServerComponent } from 'payload'
export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { SelectFieldLabelClientComponent } from 'payload'
export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

82
docs/fields/text.mdx
View File

@@ -95,3 +95,85 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'
export const CustomTextFieldServer: TextFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<TextField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldClientComponent } from 'payload'
export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
return <TextField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextFieldLabelServerComponent } from 'payload'
export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = ({
clientField,
path,
required,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextFieldLabelClientComponent } from 'payload'
export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

86
docs/fields/textarea.mdx
View File

@@ -93,3 +93,89 @@ export const ExampleCollection: CollectionConfig = {
],
}
```
## Custom Components
### Field
#### Server Component
```tsx
import type React from 'react'
import { TextareaField } from '@payloadcms/ui'
import type { TextareaFieldServerComponent } from 'payload'
export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<TextareaField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { TextareaField } from '@payloadcms/ui'
import type { TextareaFieldClientComponent } from 'payload'
export const CustomTextareaFieldClient: TextareaFieldClientComponent = (props) => {
return <TextareaField {...props} />
}
```
### Label
#### Server Component
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextareaFieldLabelServerComponent } from 'payload'
export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}
```
#### Client Component
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextareaFieldLabelClientComponent } from 'payload'
export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = ({
field,
path,
}) => {
return (
<FieldLabel
label={field?.label || field?.name}
path={path}
required={field?.required}
/>
)
}
```

459
examples/custom-components/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

189
examples/custom-components/src/app/(payload)/admin/importMap.js
View File

@@ -8,6 +8,10 @@ import { CustomCheckboxFieldLabelServer as CustomCheckboxFieldLabelServer_48cd2d
import { CustomCheckboxFieldServer as CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8 } from '@/collections/Fields/checkbox/components/server/Field'
import { CustomCheckboxFieldLabelClient as CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194 } from '@/collections/Fields/checkbox/components/client/Label'
import { CustomCheckboxFieldClient as CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de } from '@/collections/Fields/checkbox/components/client/Field'
import { CustomCodeFieldLabelServer as CustomCodeFieldLabelServer_566aaa8491895af5900235f95e62c2cf } from '@/collections/Fields/code/components/server/Label'
import { CustomCodeFieldServer as CustomCodeFieldServer_e76f292770f788ad4ec46a180ab3c174 } from '@/collections/Fields/code/components/server/Field'
import { CustomCodeFieldLabelClient as CustomCodeFieldLabelClient_823b02f23d594204cfa7fcfc30aeed46 } from '@/collections/Fields/code/components/client/Label'
import { CustomCodeFieldClient as CustomCodeFieldClient_2ef913b825e7bb326ec86b0f6ea4dd3c } from '@/collections/Fields/code/components/client/Field'
import { CustomDateFieldLabelServer as CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b } from '@/collections/Fields/date/components/server/Label'
import { CustomDateFieldServer as CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b } from '@/collections/Fields/date/components/server/Field'
import { CustomDateFieldLabelClient as CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8 } from '@/collections/Fields/date/components/client/Label'
@@ -16,6 +20,10 @@ import { CustomEmailFieldLabelServer as CustomEmailFieldLabelServer_a5097abb06ef
import { CustomEmailFieldServer as CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1 } from '@/collections/Fields/email/components/server/Field'
import { CustomEmailFieldLabelClient as CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50 } from '@/collections/Fields/email/components/client/Label'
import { CustomEmailFieldClient as CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97 } from '@/collections/Fields/email/components/client/Field'
import { CustomJSONFieldLabelServer as CustomJSONFieldLabelServer_94d8c8f7c699cb282fb912bead88f8b6 } from '@/collections/Fields/json/components/server/Label'
import { CustomJSONFieldServer as CustomJSONFieldServer_6034ebd8b071080c9e06e4abab7a6fd2 } from '@/collections/Fields/json/components/server/Field'
import { CustomJSONFieldLabelClient as CustomJSONFieldLabelClient_16798ccfd3eb2cb009c4f0ea34c3c31e } from '@/collections/Fields/json/components/client/Label'
import { CustomJSONFieldClient as CustomJSONFieldClient_077b2498f1ebe1df34940ffc4ce4f8e6 } from '@/collections/Fields/json/components/client/Field'
import { CustomNumberFieldLabelServer as CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f } from '@/collections/Fields/number/components/server/Label'
import { CustomNumberFieldServer as CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86 } from '@/collections/Fields/number/components/server/Field'
import { CustomNumberFieldLabelClient as CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51 } from '@/collections/Fields/number/components/client/Label'
@@ -55,59 +63,130 @@ import { CustomDefaultRootView as CustomDefaultRootView_a2f8ce99b3a1692f7ec03a90
import { CustomMinimalRootView as CustomMinimalRootView_9211f699dea5524a957f33011b786586 } from '@/components/views/CustomMinimalRootView'
export const importMap = {
"@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer": CustomArrayFieldLabelServer_f8d063e9b7f25c350451c1865199c947,
"@/collections/Fields/array/components/server/Field#CustomArrayFieldServer": CustomArrayFieldServer_4c3c139a9b1a198103c8a2ec2869c837,
"@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient": CustomArrayFieldLabelClient_c07dc2c547c47aca8e9f471795279e9d,
"@/collections/Fields/array/components/client/Field#CustomArrayFieldClient": CustomArrayFieldClient_60ede271f2b85983daf36710010ad8ab,
"@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer": CustomBlocksFieldServer_61732537ad2c492ac9938959902f6954,
"@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient": CustomBlocksFieldClient_2ef3a03de3974b6f18f07623af0cd515,
"@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer": CustomCheckboxFieldLabelServer_48cd2d9639f54745ad4cdb6905c825d9,
"@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer": CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8,
"@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient": CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194,
"@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient": CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de,
"@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer": CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b,
"@/collections/Fields/date/components/server/Field#CustomDateFieldServer": CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b,
"@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient": CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8,
"@/collections/Fields/date/components/client/Field#CustomDateFieldClient": CustomDateFieldClient_4ef537c727f5de7c26aaea94024a0b2c,
"@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer": CustomEmailFieldLabelServer_a5097abb06efbe71fc6ba1636f7194ab,
"@/collections/Fields/email/components/server/Field#CustomEmailFieldServer": CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1,
"@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient": CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50,
"@/collections/Fields/email/components/client/Field#CustomEmailFieldClient": CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97,
"@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer": CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f,
"@/collections/Fields/number/components/server/Field#CustomNumberFieldServer": CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86,
"@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient": CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51,
"@/collections/Fields/number/components/client/Field#CustomNumberFieldClient": CustomNumberFieldClient_5d5605680426c77470fd74d010fe051f,
"@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer": CustomPointFieldLabelServer_c5fb0c717f353a8c6149238dd7d92ec9,
"@/collections/Fields/point/components/server/Field#CustomPointFieldServer": CustomPointFieldServer_a23d13971ed0ff10615e3248bb1ee55d,
"@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient": CustomPointFieldLabelClient_3c6c8c891bc098021e618d5cf4dc3150,
"@/collections/Fields/point/components/client/Field#CustomPointFieldClient": CustomPointFieldClient_abb4ee1633cbc83b4cec9b8abb95f132,
"@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer": CustomRadioFieldLabelServer_5c732ac2af72bb41657cc9a1a22bc67b,
"@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer": CustomRadioFieldServer_b7edb363e225e2976a994da8e8803e60,
"@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient": CustomRadioFieldLabelClient_d46d0583023d87065f05972901727bbf,
"@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient": CustomRadioFieldClient_42845db96f999817cb9f0a590413d669,
"@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer": CustomRelationshipFieldLabelServer_7c45510caabe204587b638c40f0d0a70,
"@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer": CustomRelationshipFieldServer_d2e0b17d4b1c00b1fc726f0ea55ddc16,
"@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient": CustomRelationshipFieldLabelClient_37b268226ded7dd38d5cb8f2952f4b3a,
"@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient": CustomRelationshipFieldClient_eb1bc838beb92b05ba1bb9c1fdfd7869,
"@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer": CustomSelectFieldLabelServer_653acab80b672fd4ebeeed757e09d4c9,
"@/collections/Fields/select/components/server/Field#CustomSelectFieldServer": CustomSelectFieldServer_ee886c859ef756c29ae7383a2be0a08a,
"@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient": CustomSelectFieldLabelClient_2db542ef2e0a664acaa5679fc14aa54b,
"@/collections/Fields/select/components/client/Field#CustomSelectFieldClient": CustomSelectFieldClient_c8b4c7f3e98b5887ca262dd841bffa2f,
"@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer": CustomTextFieldLabelServer_64a4b68861269d69d4c16a0f651b7ac9,
"@/collections/Fields/text/components/server/Field#CustomTextFieldServer": CustomTextFieldServer_e0caaef49c00003336b08d834c0c9fe9,
"@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient": CustomTextFieldLabelClient_9af2b9e4733a9fc79fb9dfb1578c18bf,
"@/collections/Fields/text/components/client/Field#CustomTextFieldClient": CustomTextFieldClient_c7c0687b5204b201f8b1af831f34fd98,
"@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer": CustomTextareaFieldLabelServer_5c8f706a3452bccefa9f5044e2cd250c,
"@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer": CustomTextareaFieldServer_3f7b621f5c4c42971fc099a1fa492d99,
"@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient": CustomTextareaFieldLabelClient_9959ee64353edb5f2606b52187275823,
"@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient": CustomTextareaFieldClient_4fd3331c38982e86768c64dcc9a10691,
"@/collections/Views/components/CustomTabEditView#CustomTabEditView": CustomTabEditView_0a7acb05a3192ecfa7e07f8b42e7a193,
"@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView": CustomDefaultEditView_2d3c652c5909d3a3dc3464f0547d5424,
"@/collections/RootViews/components/CustomRootEditView#CustomRootEditView": CustomRootEditView_ba37229da543ad3c8dc40f7a48771f99,
"@/components/afterNavLinks/LinkToCustomView#LinkToCustomView": LinkToCustomView_6f16fe358985478a2ead2354ef2cc9a0,
"@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView": LinkToCustomMinimalView_fd2cefb054695a5b60b860a69d67d15d,
"@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView": LinkToCustomDefaultView_4c5f581c8bfa951ce2f83c24c4f36b3b,
"@/components/views/CustomRootView#CustomRootView": CustomRootView_1ebb91ef5ff1ea4dc9a27ceb8e9ee0ab,
"@/components/views/CustomDefaultRootView#CustomDefaultRootView": CustomDefaultRootView_a2f8ce99b3a1692f7ec03a907e1ea4ce,
"@/components/views/CustomMinimalRootView#CustomMinimalRootView": CustomMinimalRootView_9211f699dea5524a957f33011b786586
'@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer':
CustomArrayFieldLabelServer_f8d063e9b7f25c350451c1865199c947,
'@/collections/Fields/array/components/server/Field#CustomArrayFieldServer':
CustomArrayFieldServer_4c3c139a9b1a198103c8a2ec2869c837,
'@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient':
CustomArrayFieldLabelClient_c07dc2c547c47aca8e9f471795279e9d,
'@/collections/Fields/array/components/client/Field#CustomArrayFieldClient':
CustomArrayFieldClient_60ede271f2b85983daf36710010ad8ab,
'@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer':
CustomBlocksFieldServer_61732537ad2c492ac9938959902f6954,
'@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient':
CustomBlocksFieldClient_2ef3a03de3974b6f18f07623af0cd515,
'@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer':
CustomCheckboxFieldLabelServer_48cd2d9639f54745ad4cdb6905c825d9,
'@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer':
CustomCheckboxFieldServer_85023d60242dd4cca7c406a728ec37a8,
'@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient':
CustomCheckboxFieldLabelClient_f2b214145c1cbe98957573cf62455194,
'@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient':
CustomCheckboxFieldClient_a13e6003bc89da826df764d7234782de,
'@/collections/Fields/code/components/server/Label#CustomCodeFieldLabelServer':
CustomCodeFieldLabelServer_566aaa8491895af5900235f95e62c2cf,
'@/collections/Fields/code/components/server/Field#CustomCodeFieldServer':
CustomCodeFieldServer_e76f292770f788ad4ec46a180ab3c174,
'@/collections/Fields/code/components/client/Label#CustomCodeFieldLabelClient':
CustomCodeFieldLabelClient_823b02f23d594204cfa7fcfc30aeed46,
'@/collections/Fields/code/components/client/Field#CustomCodeFieldClient':
CustomCodeFieldClient_2ef913b825e7bb326ec86b0f6ea4dd3c,
'@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer':
CustomDateFieldLabelServer_ae9eb459b79a1363a40d62b1e463aa6b,
'@/collections/Fields/date/components/server/Field#CustomDateFieldServer':
CustomDateFieldServer_9d448604d99b3b06826ea95986ffd27b,
'@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient':
CustomDateFieldLabelClient_0b6c1439c63aadfd306cf432713a52d8,
'@/collections/Fields/date/components/client/Field#CustomDateFieldClient':
CustomDateFieldClient_4ef537c727f5de7c26aaea94024a0b2c,
'@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer':
CustomEmailFieldLabelServer_a5097abb06efbe71fc6ba1636f7194ab,
'@/collections/Fields/email/components/server/Field#CustomEmailFieldServer':
CustomEmailFieldServer_457ae84519701bf0b287c30a994ddab1,
'@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient':
CustomEmailFieldLabelClient_147edabdb378c855b9c8c06b8c627e50,
'@/collections/Fields/email/components/client/Field#CustomEmailFieldClient':
CustomEmailFieldClient_e22bcec891915f255e5ac6e1850aeb97,
'@/collections/Fields/json/components/server/Label#CustomJSONFieldLabelServer':
CustomJSONFieldLabelServer_94d8c8f7c699cb282fb912bead88f8b6,
'@/collections/Fields/json/components/server/Field#CustomJSONFieldServer':
CustomJSONFieldServer_6034ebd8b071080c9e06e4abab7a6fd2,
'@/collections/Fields/json/components/client/Label#CustomJSONFieldLabelClient':
CustomJSONFieldLabelClient_16798ccfd3eb2cb009c4f0ea34c3c31e,
'@/collections/Fields/json/components/client/Field#CustomJSONFieldClient':
CustomJSONFieldClient_077b2498f1ebe1df34940ffc4ce4f8e6,
'@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer':
CustomNumberFieldLabelServer_1b47d0cd70ad88e23dcf9c4f91bf319f,
'@/collections/Fields/number/components/server/Field#CustomNumberFieldServer':
CustomNumberFieldServer_54fc6ad95d89a3b66b59136e84d20b86,
'@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient':
CustomNumberFieldLabelClient_dd3e3dcfc7b07c3a02f947ac81718a51,
'@/collections/Fields/number/components/client/Field#CustomNumberFieldClient':
CustomNumberFieldClient_5d5605680426c77470fd74d010fe051f,
'@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer':
CustomPointFieldLabelServer_c5fb0c717f353a8c6149238dd7d92ec9,
'@/collections/Fields/point/components/server/Field#CustomPointFieldServer':
CustomPointFieldServer_a23d13971ed0ff10615e3248bb1ee55d,
'@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient':
CustomPointFieldLabelClient_3c6c8c891bc098021e618d5cf4dc3150,
'@/collections/Fields/point/components/client/Field#CustomPointFieldClient':
CustomPointFieldClient_abb4ee1633cbc83b4cec9b8abb95f132,
'@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer':
CustomRadioFieldLabelServer_5c732ac2af72bb41657cc9a1a22bc67b,
'@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer':
CustomRadioFieldServer_b7edb363e225e2976a994da8e8803e60,
'@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient':
CustomRadioFieldLabelClient_d46d0583023d87065f05972901727bbf,
'@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient':
CustomRadioFieldClient_42845db96f999817cb9f0a590413d669,
'@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer':
CustomRelationshipFieldLabelServer_7c45510caabe204587b638c40f0d0a70,
'@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer':
CustomRelationshipFieldServer_d2e0b17d4b1c00b1fc726f0ea55ddc16,
'@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient':
CustomRelationshipFieldLabelClient_37b268226ded7dd38d5cb8f2952f4b3a,
'@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient':
CustomRelationshipFieldClient_eb1bc838beb92b05ba1bb9c1fdfd7869,
'@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer':
CustomSelectFieldLabelServer_653acab80b672fd4ebeeed757e09d4c9,
'@/collections/Fields/select/components/server/Field#CustomSelectFieldServer':
CustomSelectFieldServer_ee886c859ef756c29ae7383a2be0a08a,
'@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient':
CustomSelectFieldLabelClient_2db542ef2e0a664acaa5679fc14aa54b,
'@/collections/Fields/select/components/client/Field#CustomSelectFieldClient':
CustomSelectFieldClient_c8b4c7f3e98b5887ca262dd841bffa2f,
'@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer':
CustomTextFieldLabelServer_64a4b68861269d69d4c16a0f651b7ac9,
'@/collections/Fields/text/components/server/Field#CustomTextFieldServer':
CustomTextFieldServer_e0caaef49c00003336b08d834c0c9fe9,
'@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient':
CustomTextFieldLabelClient_9af2b9e4733a9fc79fb9dfb1578c18bf,
'@/collections/Fields/text/components/client/Field#CustomTextFieldClient':
CustomTextFieldClient_c7c0687b5204b201f8b1af831f34fd98,
'@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer':
CustomTextareaFieldLabelServer_5c8f706a3452bccefa9f5044e2cd250c,
'@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer':
CustomTextareaFieldServer_3f7b621f5c4c42971fc099a1fa492d99,
'@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient':
CustomTextareaFieldLabelClient_9959ee64353edb5f2606b52187275823,
'@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient':
CustomTextareaFieldClient_4fd3331c38982e86768c64dcc9a10691,
'@/collections/Views/components/CustomTabEditView#CustomTabEditView':
CustomTabEditView_0a7acb05a3192ecfa7e07f8b42e7a193,
'@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView':
CustomDefaultEditView_2d3c652c5909d3a3dc3464f0547d5424,
'@/collections/RootViews/components/CustomRootEditView#CustomRootEditView':
CustomRootEditView_ba37229da543ad3c8dc40f7a48771f99,
'@/components/afterNavLinks/LinkToCustomView#LinkToCustomView':
LinkToCustomView_6f16fe358985478a2ead2354ef2cc9a0,
'@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView':
LinkToCustomMinimalView_fd2cefb054695a5b60b860a69d67d15d,
'@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView':
LinkToCustomDefaultView_4c5f581c8bfa951ce2f83c24c4f36b3b,
'@/components/views/CustomRootView#CustomRootView':
CustomRootView_1ebb91ef5ff1ea4dc9a27ceb8e9ee0ab,
'@/components/views/CustomDefaultRootView#CustomDefaultRootView':
CustomDefaultRootView_a2f8ce99b3a1692f7ec03a907e1ea4ce,
'@/components/views/CustomMinimalRootView#CustomMinimalRootView':
CustomMinimalRootView_9211f699dea5524a957f33011b786586,
}

2
examples/custom-components/src/collections/Fields/array/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { ArrayField } from '@payloadcms/ui'
import React from 'react'
export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
return <ArrayField field={props?.field} path={props?.path} permissions={props?.permissions} />
return <ArrayField {...props} />
}

4
examples/custom-components/src/collections/Fields/array/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { ArrayFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

12
examples/custom-components/src/collections/Fields/array/components/server/Field.tsx
View File

@@ -3,7 +3,13 @@ import type React from 'react'
import { ArrayField } from '@payloadcms/ui'
export const CustomArrayFieldServer: ArrayFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <ArrayField field={props.clientField} path={path} permissions={props?.permissions} />
export const CustomArrayFieldServer: ArrayFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<ArrayField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}

13
examples/custom-components/src/collections/Fields/array/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { ArrayFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
required={clientField?.required}
path={path}
/>
)
}

2
examples/custom-components/src/collections/Fields/blocks/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { BlocksField } from '@payloadcms/ui'
import React from 'react'
export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
return <BlocksField field={props?.field} path={props.path} permissions={props?.permissions} />
return <BlocksField {...props} />
}

4
examples/custom-components/src/collections/Fields/blocks/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { BlocksFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/blocks/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { BlocksField } from '@payloadcms/ui'
export const CustomBlocksFieldServer: BlocksFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <BlocksField field={props?.clientField} path={path} permissions={props?.permissions} />
export const CustomBlocksFieldServer: BlocksFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<BlocksField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/blocks/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { BlocksFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/checkbox/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { CheckboxField } from '@payloadcms/ui'
import React from 'react'
export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (props) => {
return <CheckboxField field={props?.field} path={props?.path} />
return <CheckboxField {...props} />
}

7
examples/custom-components/src/collections/Fields/checkbox/components/client/Label.tsx
View File

@@ -4,6 +4,9 @@ import type { CheckboxFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent = ({
field,
path,
}) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/checkbox/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { CheckboxField } from '@payloadcms/ui'
export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <CheckboxField field={props?.clientField} path={path} />
export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<CheckboxField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/checkbox/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { CheckboxFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

9
examples/custom-components/src/collections/Fields/code/components/client/Field.tsx Normal file
View File

@@ -0,0 +1,9 @@
'use client'
import type { CodeFieldClientComponent } from 'payload'
import { CodeField } from '@payloadcms/ui'
import React from 'react'
export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => {
return <CodeField {...props} />
}

9
examples/custom-components/src/collections/Fields/code/components/client/Label.tsx Normal file
View File

@@ -0,0 +1,9 @@
'use client'
import type { CodeFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomCodeFieldLabelClient: CodeFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

15
examples/custom-components/src/collections/Fields/code/components/server/Field.tsx Normal file
View File

@@ -0,0 +1,15 @@
import type { CodeFieldServerComponent } from 'payload'
import type React from 'react'
import { CodeField } from '@payloadcms/ui'
export const CustomCodeFieldServer: CodeFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<CodeField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}

17
examples/custom-components/src/collections/Fields/code/components/server/Label.tsx Normal file
View File

@@ -0,0 +1,17 @@
import type { CodeFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

24
examples/custom-components/src/collections/Fields/code/index.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { CollectionConfig } from 'payload'
export const codeFields: CollectionConfig['fields'] = [
{
name: 'codeFieldServerComponent',
type: 'code',
admin: {
components: {
Field: '@/collections/Fields/code/components/server/Field#CustomCodeFieldServer',
Label: '@/collections/Fields/code/components/server/Label#CustomCodeFieldLabelServer',
},
},
},
{
name: 'codeFieldClientComponent',
type: 'code',
admin: {
components: {
Field: '@/collections/Fields/code/components/client/Field#CustomCodeFieldClient',
Label: '@/collections/Fields/code/components/client/Label#CustomCodeFieldLabelClient',
},
},
},
]

2
examples/custom-components/src/collections/Fields/date/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { DateTimeField } from '@payloadcms/ui'
import React from 'react'
export const CustomDateFieldClient: DateFieldClientComponent = (props) => {
return <DateTimeField field={props?.field} path={props?.path} />
return <DateTimeField {...props} />
}

4
examples/custom-components/src/collections/Fields/date/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { DateFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/date/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { DateTimeField } from '@payloadcms/ui'
export const CustomDateFieldServer: DateFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <DateTimeField field={props?.clientField} path={path} />
export const CustomDateFieldServer: DateFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<DateTimeField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/date/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { DateFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/email/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { EmailField } from '@payloadcms/ui'
import React from 'react'
export const CustomEmailFieldClient: EmailFieldClientComponent = (props) => {
return <EmailField field={props?.field} path={props?.path} />
return <EmailField {...props} />
}

4
examples/custom-components/src/collections/Fields/email/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { EmailFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

12
examples/custom-components/src/collections/Fields/email/components/server/Field.tsx
View File

@@ -3,7 +3,13 @@ import type React from 'react'
import { EmailField } from '@payloadcms/ui'
export const CustomEmailFieldServer: EmailFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <EmailField field={props?.clientField} path={path} />
export const CustomEmailFieldServer: EmailFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<EmailField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}

13
examples/custom-components/src/collections/Fields/email/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { EmailFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

4
examples/custom-components/src/collections/Fields/index.ts
View File

@@ -3,8 +3,10 @@ import type { CollectionConfig, Field } from 'payload'
import { arrayFields } from './array'
import { blocksFields } from './blocks'
import { checkboxFields } from './checkbox'
import { codeFields } from './code'
import { dateFields } from './date'
import { emailFields } from './email'
import { jsonFields } from './json'
import { numberFields } from './number'
import { pointFields } from './point'
import { radioFields } from './radio'
@@ -28,8 +30,10 @@ export const CustomFields: CollectionConfig = {
arrayFields,
blocksFields,
checkboxFields,
codeFields,
dateFields,
emailFields,
jsonFields,
numberFields,
pointFields,
radioFields,

9
examples/custom-components/src/collections/Fields/json/components/client/Field.tsx Normal file
View File

@@ -0,0 +1,9 @@
'use client'
import type { JSONFieldClientComponent } from 'payload'
import { JSONField } from '@payloadcms/ui'
import React from 'react'
export const CustomJSONFieldClient: JSONFieldClientComponent = (props) => {
return <JSONField {...props} />
}

9
examples/custom-components/src/collections/Fields/json/components/client/Label.tsx Normal file
View File

@@ -0,0 +1,9 @@
'use client'
import type { JSONFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomJSONFieldLabelClient: JSONFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

15
examples/custom-components/src/collections/Fields/json/components/server/Field.tsx Normal file
View File

@@ -0,0 +1,15 @@
import type { JSONFieldServerComponent } from 'payload'
import type React from 'react'
import { JSONField } from '@payloadcms/ui'
export const CustomJSONFieldServer: JSONFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<JSONField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}

17
examples/custom-components/src/collections/Fields/json/components/server/Label.tsx Normal file
View File

@@ -0,0 +1,17 @@
import type { JSONFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomJSONFieldLabelServer: JSONFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

24
examples/custom-components/src/collections/Fields/json/index.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { CollectionConfig } from 'payload'
export const jsonFields: CollectionConfig['fields'] = [
{
name: 'jsonFieldServerComponent',
type: 'json',
admin: {
components: {
Field: '@/collections/Fields/json/components/server/Field#CustomJSONFieldServer',
Label: '@/collections/Fields/json/components/server/Label#CustomJSONFieldLabelServer',
},
},
},
{
name: 'jsonFieldClientComponent',
type: 'json',
admin: {
components: {
Field: '@/collections/Fields/json/components/client/Field#CustomJSONFieldClient',
Label: '@/collections/Fields/json/components/client/Label#CustomJSONFieldLabelClient',
},
},
},
]

2
examples/custom-components/src/collections/Fields/number/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { NumberField } from '@payloadcms/ui'
import React from 'react'
export const CustomNumberFieldClient: NumberFieldClientComponent = (props) => {
return <NumberField field={props?.field} path={props?.path} />
return <NumberField {...props} />
}

4
examples/custom-components/src/collections/Fields/number/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { NumberFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/number/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { NumberField } from '@payloadcms/ui'
export const CustomNumberFieldServer: NumberFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <NumberField field={props?.clientField} path={path} />
export const CustomNumberFieldServer: NumberFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<NumberField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/number/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { NumberFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/point/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { PointField } from '@payloadcms/ui'
import React from 'react'
export const CustomPointFieldClient: PointFieldClientComponent = (props) => {
return <PointField field={props?.field} path={props?.path} />
return <PointField {...props} />
}

4
examples/custom-components/src/collections/Fields/point/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { PointFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

12
examples/custom-components/src/collections/Fields/point/components/server/Field.tsx
View File

@@ -3,7 +3,13 @@ import type React from 'react'
import { PointField } from '@payloadcms/ui'
export const CustomPointFieldServer: PointFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <PointField field={props?.clientField} path={path} />
export const CustomPointFieldServer: PointFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<PointField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}

13
examples/custom-components/src/collections/Fields/point/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { PointFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/radio/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { RadioGroupField } from '@payloadcms/ui'
import React from 'react'
export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => {
return <RadioGroupField field={props?.field} path={props?.path} />
return <RadioGroupField {...props} />
}

4
examples/custom-components/src/collections/Fields/radio/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { RadioFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/radio/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { RadioGroupField } from '@payloadcms/ui'
export const CustomRadioFieldServer: RadioFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <RadioGroupField field={props?.clientField} path={path} />
export const CustomRadioFieldServer: RadioFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<RadioGroupField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/radio/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { RadioFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/relationship/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { RelationshipField } from '@payloadcms/ui'
import React from 'react'
export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (props) => {
return <RelationshipField field={props?.field} path={props?.path} />
return <RelationshipField {...props} />
}

9
examples/custom-components/src/collections/Fields/relationship/components/client/Label.tsx
View File

@@ -4,8 +4,9 @@ import type { RelationshipFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = (
props,
) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent = ({
field,
path,
}) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/relationship/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { RelationshipField } from '@payloadcms/ui'
export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <RelationshipField field={props?.clientField} path={path} />
export const CustomRelationshipFieldServer: RelationshipFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<RelationshipField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

15
examples/custom-components/src/collections/Fields/relationship/components/server/Label.tsx
View File

@@ -3,8 +3,15 @@ import type { RelationshipFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = (
props,
) => {
return <FieldLabel label={props?.label} />
export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/select/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { SelectField } from '@payloadcms/ui'
import React from 'react'
export const CustomSelectFieldClient: SelectFieldClientComponent = (props) => {
return <SelectField field={props?.field} path={props?.path} />
return <SelectField {...props} />
}

4
examples/custom-components/src/collections/Fields/select/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { SelectFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/select/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { SelectField } from '@payloadcms/ui'
export const CustomSelectFieldServer: SelectFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <SelectField field={props?.clientField} path={path} />
export const CustomSelectFieldServer: SelectFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<SelectField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/select/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { SelectFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/text/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { TextField } from '@payloadcms/ui'
import React from 'react'
export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
return <TextField field={props?.field} path={props?.path} />
return <TextField {...props} />
}

4
examples/custom-components/src/collections/Fields/text/components/client/Label.tsx
View File

@@ -4,6 +4,6 @@ import type { TextFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = ({ field, path }) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

12
examples/custom-components/src/collections/Fields/text/components/server/Field.tsx
View File

@@ -3,7 +3,13 @@ import type React from 'react'
import { TextField } from '@payloadcms/ui'
export const CustomTextFieldServer: TextFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <TextField field={props?.clientField} path={path} />
export const CustomTextFieldServer: TextFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<TextField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
)
}

13
examples/custom-components/src/collections/Fields/text/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { TextFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

2
examples/custom-components/src/collections/Fields/textarea/components/client/Field.tsx
View File

@@ -5,5 +5,5 @@ import { TextareaField } from '@payloadcms/ui'
import React from 'react'
export const CustomTextareaFieldClient: TextareaFieldClientComponent = (props) => {
return <TextareaField field={props?.field} path={props?.path} />
return <TextareaField {...props} />
}

7
examples/custom-components/src/collections/Fields/textarea/components/client/Label.tsx
View File

@@ -4,6 +4,9 @@ import type { TextareaFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = (props) => {
return <FieldLabel label={props?.label} path={props?.path} />
export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = ({
field,
path,
}) => {
return <FieldLabel label={field?.label || field?.name} path={path} required={field?.required} />
}

17
examples/custom-components/src/collections/Fields/textarea/components/server/Field.tsx
View File

@@ -3,7 +3,18 @@ import type React from 'react'
import { TextareaField } from '@payloadcms/ui'
export const CustomTextareaFieldServer: TextareaFieldServerComponent = (props) => {
const path = (props?.path || props?.field?.name || '') as string
return <TextareaField field={props?.clientField} path={path} />
export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
clientField,
path,
schemaPath,
permissions,
}) => {
return (
<TextareaField
field={clientField}
path={path}
schemaPath={schemaPath}
permissions={permissions}
/>
)
}

13
examples/custom-components/src/collections/Fields/textarea/components/server/Label.tsx
View File

@@ -3,6 +3,15 @@ import type { TextareaFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = (props) => {
return <FieldLabel label={props?.label} />
export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = ({
clientField,
path,
}) => {
return (
<FieldLabel
label={clientField?.label || clientField?.name}
path={path}
required={clientField?.required}
/>
)
}

24
examples/custom-components/src/payload-types.ts
View File

@@ -98,10 +98,30 @@ export interface CustomField {
| null;
checkboxFieldServerComponent?: boolean | null;
checkboxFieldClientComponent?: boolean | null;
codeFieldServerComponent?: string | null;
codeFieldClientComponent?: string | null;
dateFieldServerComponent?: string | null;
dateFieldClientComponent?: string | null;
emailFieldServerComponent?: string | null;
emailFieldClientComponent?: string | null;
jsonFieldServerComponent?:
| {
[k: string]: unknown;
}
| unknown[]
| string
| number
| boolean
| null;
jsonFieldClientComponent?:
| {
[k: string]: unknown;
}
| unknown[]
| string
| number
| boolean
| null;
numberFieldServerComponent?: number | null;
numberFieldClientComponent?: number | null;
/**
@@ -271,10 +291,14 @@ export interface CustomFieldsSelect<T extends boolean = true> {
};
checkboxFieldServerComponent?: T;
checkboxFieldClientComponent?: T;
codeFieldServerComponent?: T;
codeFieldClientComponent?: T;
dateFieldServerComponent?: T;
dateFieldClientComponent?: T;
emailFieldServerComponent?: T;
emailFieldClientComponent?: T;
jsonFieldServerComponent?: T;
jsonFieldClientComponent?: T;
numberFieldServerComponent?: T;
numberFieldClientComponent?: T;
pointFieldServerComponent?: T;