a6f13f7330
Although the `<FieldLabel />` component receives a `field` prop, it does
not use this prop to extract the `label` from the field. This is
currently only an issue when rendering this component directly, such as
within `admin.components.Label`. The label simply won't appear unless
explicitly provided, despite it being passed as `field.label`. This is
not an issue when rendering field components themselves, because they
properly thread this value through as a top-level prop.
Here's an example of the issue:
```tsx
import type { TextFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const MyCustomLabelComponent: TextFieldLabelServerComponent = ({ clientField }) => {
return (
<FieldLabel
field={clientField}
label={clientField.label} // this should not be needed!
/>
)
}
```
Here is the end result:
```tsx
import type { TextFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@payloadcms/ui'
import React from 'react'
export const MyCustomLabelComponent: TextFieldLabelServerComponent = ({ clientField }) => {
return <FieldLabel field={clientField} />
}
```
19 lines
501 B
TypeScript
19 lines
501 B
TypeScript
'use client'
|
|
|
|
import type { EmailFieldClientComponent } from 'payload'
|
|
|
|
import { useFieldProps } from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
export const CustomLabel: EmailFieldClientComponent = ({ field }) => {
|
|
const { path: pathFromContext } = useFieldProps()
|
|
|
|
const path = pathFromContext ?? field?._schemaPath // pathFromContext will be undefined in list view
|
|
|
|
return (
|
|
<label className="custom-label" htmlFor={`field-${path.replace(/\./g, '__')}`}>
|
|
#label
|
|
</label>
|
|
)
|
|
}
|