57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
'use client'
|
|
import { useField } from '@payloadcms/ui'
|
|
import * as React from 'react'
|
|
|
|
import { collection1Slug } from '../collectionSlugs.js'
|
|
|
|
export const PrePopulateFieldUI: React.FC<{
|
|
hasMany?: boolean
|
|
hasMultipleRelations?: boolean
|
|
path: string
|
|
}> = ({ hasMany = true, hasMultipleRelations = false, path }) => {
|
|
const { setValue } = useField({ path })
|
|
|
|
const addDefaults = React.useCallback(() => {
|
|
const fetchRelationDocs = async () => {
|
|
const res = await fetch(
|
|
`/api/${collection1Slug}?limit=20&where[name][contains]=relationship-test`,
|
|
)
|
|
const json = await res.json()
|
|
if (hasMany) {
|
|
const docIds = json.docs.map((doc) => {
|
|
if (hasMultipleRelations) {
|
|
return {
|
|
relationTo: collection1Slug,
|
|
value: doc.id,
|
|
}
|
|
}
|
|
|
|
return doc.id
|
|
})
|
|
setValue(docIds)
|
|
} else {
|
|
// value that does not appear in first 10 docs fetch
|
|
setValue(json.docs[6].id)
|
|
}
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
fetchRelationDocs()
|
|
}, [setValue, hasMultipleRelations, hasMany])
|
|
|
|
return (
|
|
<div
|
|
className="pre-populate-field-ui"
|
|
style={{
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<button onClick={addDefaults} style={{}} type="button">
|
|
Add default items
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|