0f3f6e73da
Fixes #9264. When externally updating array or block rows through the `addFieldRow` or `replaceFieldRow` methods, nested rich text fields along with any custom components within them are never rendered. This is because unless the form is explicitly set to modified, as the default array and blocks fields currently do, the newly generated form-state will skip the rendering step. Now, the underlying callbacks themselves automatically set the form to modified to trigger rendering.
216 lines
4.0 KiB
TypeScript
216 lines
4.0 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
import { arrayFieldsSlug } from '../../slugs.js'
|
|
|
|
export const arrayDefaultValue = [{ text: 'row one' }, { text: 'row two' }]
|
|
|
|
const ArrayFields: CollectionConfig = {
|
|
admin: {
|
|
enableRichTextLink: false,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
required: false,
|
|
},
|
|
{
|
|
name: 'items',
|
|
defaultValue: arrayDefaultValue,
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'anotherText',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'uiField',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: './collections/Array/LabelComponent.js#ArrayRowLabel',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'localizedText',
|
|
type: 'text',
|
|
localized: true,
|
|
},
|
|
{
|
|
name: 'subArray',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
],
|
|
required: true,
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'collapsedArray',
|
|
admin: {
|
|
initCollapsed: true,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
required: true,
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'localized',
|
|
defaultValue: arrayDefaultValue,
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
required: true,
|
|
type: 'text',
|
|
},
|
|
],
|
|
localized: true,
|
|
required: true,
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'readOnly',
|
|
admin: {
|
|
readOnly: true,
|
|
},
|
|
defaultValue: [
|
|
{
|
|
text: 'defaultValue',
|
|
},
|
|
{
|
|
text: 'defaultValue2',
|
|
},
|
|
],
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'potentiallyEmptyArray',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'groupInRow',
|
|
fields: [
|
|
{
|
|
name: 'textInGroupInRow',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'group',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'rowLabelAsComponent',
|
|
admin: {
|
|
components: {
|
|
RowLabel: '/collections/Array/LabelComponent.js#ArrayRowLabel',
|
|
},
|
|
description: 'Row labels rendered as react components.',
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'arrayWithMinRows',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
minRows: 2,
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'disableSort',
|
|
defaultValue: arrayDefaultValue,
|
|
admin: {
|
|
isSortable: false,
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
required: true,
|
|
type: 'text',
|
|
},
|
|
],
|
|
type: 'array',
|
|
},
|
|
{
|
|
name: 'nestedArrayLocalized',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
type: 'array',
|
|
name: 'array',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
localized: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'externallyUpdatedArray',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
name: 'customField',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: '/collections/Array/CustomField.js#CustomField',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'ui',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: '/collections/Array/AddRowButton.js',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
slug: arrayFieldsSlug,
|
|
versions: true,
|
|
}
|
|
|
|
export default ArrayFields
|