ed44ec0a9c
Extension of #9933. Custom components are returned by form state, meaning that if we don't wait for form state to return before rendering row labels, the default row label component will render in briefly before being swapped by a custom component (if applicable). Using the new `isLoading` prop on array and block rows, we can conditionally render them just as we currently do for the row fields themselves.
16 lines
456 B
TypeScript
16 lines
456 B
TypeScript
'use client'
|
|
|
|
import type { PayloadClientReactComponent, RowLabelComponent } from 'payload'
|
|
|
|
import { useRowLabel } from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
export const ArrayRowLabel: PayloadClientReactComponent<RowLabelComponent> = () => {
|
|
const { data } = useRowLabel<{ title: string }>()
|
|
return (
|
|
<div id="custom-array-row-label" style={{ color: 'coral', textTransform: 'uppercase' }}>
|
|
{data.title || 'Untitled'}
|
|
</div>
|
|
)
|
|
}
|