c562fbfa94
This PR moves the logic for rendering diff field components in the version comparison view from the client to the server. This allows us to expose more customization options to the server-side Payload Config. For example, users can now pass their own diff components for fields - even including RSCs. This PR also cleans up the version view types Implements the following from https://github.com/payloadcms/payload/discussions/4197: - allow for customization of diff components - more control over versions screens in general TODO: - [x] Bring getFieldPaths fixes into core - [x] Cleanup and test with scrutiny. Ensure all field types display their diffs correctly - [x] Review public API for overriding field types, add docs - [x] Add e2e test for new public API
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
'use client'
|
|
import type { CollapsibleFieldDiffClientComponent } from 'payload'
|
|
|
|
import { getTranslation } from '@payloadcms/translations'
|
|
import { useTranslation } from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js'
|
|
import { DiffCollapser } from '../../DiffCollapser/index.js'
|
|
import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js'
|
|
|
|
const baseClass = 'collapsible-diff'
|
|
|
|
export const Collapsible: CollapsibleFieldDiffClientComponent = ({
|
|
baseVersionField,
|
|
comparisonValue,
|
|
field,
|
|
versionValue,
|
|
}) => {
|
|
const { i18n } = useTranslation()
|
|
const { selectedLocales } = useSelectedLocales()
|
|
|
|
if (!baseVersionField.fields?.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className={baseClass}>
|
|
<DiffCollapser
|
|
comparison={comparisonValue}
|
|
fields={field.fields}
|
|
label={
|
|
'label' in field &&
|
|
field.label &&
|
|
typeof field.label !== 'function' && <span>{getTranslation(field.label, i18n)}</span>
|
|
}
|
|
locales={selectedLocales}
|
|
version={versionValue}
|
|
>
|
|
<RenderVersionFieldsToDiff versionFields={baseVersionField.fields} />
|
|
</DiffCollapser>
|
|
</div>
|
|
)
|
|
}
|