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.
37 lines
896 B
TypeScript
37 lines
896 B
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
import { useWatchForm } from '../../Form/context.js'
|
|
|
|
type RowLabelType<T = unknown> = {
|
|
readonly data: T
|
|
readonly path: string
|
|
readonly rowNumber?: number
|
|
}
|
|
|
|
const RowLabel = React.createContext<RowLabelType>({
|
|
data: {},
|
|
path: '',
|
|
rowNumber: undefined,
|
|
})
|
|
|
|
type Props<T> = {
|
|
readonly children: React.ReactNode
|
|
} & Omit<RowLabelType<T>, 'data'>
|
|
|
|
export const RowLabelProvider: React.FC<Props<unknown>> = ({ children, path, rowNumber }) => {
|
|
'use no memo'
|
|
const { getDataByPath, getSiblingData } = useWatchForm()
|
|
const collapsibleData = getSiblingData(path)
|
|
const arrayData = getDataByPath(path)
|
|
|
|
const data = arrayData || collapsibleData
|
|
|
|
return <RowLabel.Provider value={{ data, path, rowNumber }}>{children}</RowLabel.Provider>
|
|
}
|
|
|
|
export const useRowLabel = <T,>() => {
|
|
return React.useContext(RowLabel) as RowLabelType<T>
|
|
}
|