docs: adds examples of typed custom field components (#10741)
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
@@ -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'
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<SelectField
|
||||
field={clientField}
|
||||
path={path}
|
||||
name={path}
|
||||
options={adjustedOptions}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.value)}
|
||||
schemaPath={schemaPath}
|
||||
permissions={permissions}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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
459
examples/custom-components/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
@@ -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} />
|
||||
}
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
@@ -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} />
|
||||
}
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user