b80010b1a1
It is currently very difficult to build custom edit and list views or inject custom components into these views because these views and components are not explicitly typed. Instances of these components were not fully type safe as well, i.e. when rendering them via `RenderServerComponent`, there was little to no type-checking in most cases. There is now a 1:1 type match for all views and view components and they now receive type-checking at render time. The following types have been newly added and/or improved: List View: - `ListViewClientProps` - `ListViewServerProps` - `BeforeListClientProps` - `BeforeListServerProps` - `BeforeListTableClientProps` - `BeforeListTableServerProps` - `AfterListClientProps` - `AfterListServerProps` - `AfterListTableClientProps` - `AfterListTableServerProps` - `ListViewSlotSharedClientProps` Document View: - `DocumentViewClientProps` - `DocumentViewServerProps` - `SaveButtonClientProps` - `SaveButtonServerProps` - `SaveDraftButtonClientProps` - `SaveDraftButtonServerProps` - `PublishButtonClientProps` - `PublishButtonServerProps` - `PreviewButtonClientProps` - `PreviewButtonServerProps` Root View: - `AdminViewClientProps` - `AdminViewServerProps` General: - `ViewDescriptionClientProps` - `ViewDescriptionServerProps` A few other changes were made in a non-breaking way: - `Column` is now exported from `payload` - `ListPreferences` is now exported from `payload` - `ListViewSlots` is now exported from `payload` - `ListViewClientProps` is now exported from `payload` - `AdminViewProps` is now an alias of `AdminViewServerProps` (listed above) - `ClientSideEditViewProps` is now an alias of `DocumentViewClientProps` (listed above) - `ServerSideEditViewProps` is now an alias of `DocumentViewServerProps` (listed above) - `ListComponentClientProps` is now an alias of `ListViewClientProps` (listed above) - `ListComponentServerProps` is now an alias of `ListViewServerProps` (listed above) - `CustomSaveButton` is now marked as deprecated because this is only relevant to the config (see correct type above) - `CustomSaveDraftButton` is now marked as deprecated because this is only relevant to the config (see correct type above) - `CustomPublishButton` is now marked as deprecated because this is only relevant to the config (see correct type above) - `CustomPreviewButton` is now marked as deprecated because this is only relevant to the config (see correct type above) This PR _does not_ apply these changes to _root_ components, i.e. `afterNavLinks`. Those will come in a future PR. Related: #10987.
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import type { DocumentViewServerProps } from 'payload'
|
|
|
|
import { SetStepNav } from '@payloadcms/ui'
|
|
import { notFound, redirect } from 'next/navigation.js'
|
|
import React, { Fragment } from 'react'
|
|
|
|
export function CustomEditView({ initPageResult }: DocumentViewServerProps) {
|
|
if (!initPageResult) {
|
|
notFound()
|
|
}
|
|
|
|
const {
|
|
permissions: { canAccessAdmin },
|
|
req: {
|
|
payload: {
|
|
config: {
|
|
routes: { admin: adminRoute },
|
|
},
|
|
},
|
|
user,
|
|
},
|
|
} = initPageResult
|
|
|
|
// If an unauthorized user tries to navigate straight to this page,
|
|
// Boot 'em out
|
|
if (!user || (user && !canAccessAdmin)) {
|
|
return redirect(`${adminRoute}/unauthorized`)
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<SetStepNav
|
|
nav={[
|
|
{
|
|
label: 'Custom Edit View',
|
|
},
|
|
]}
|
|
/>
|
|
<div
|
|
style={{
|
|
marginTop: 'calc(var(--base) * 2)',
|
|
paddingLeft: 'var(--gutter-h)',
|
|
paddingRight: 'var(--gutter-h)',
|
|
}}
|
|
>
|
|
<h1>Custom Edit View</h1>
|
|
<p>This custom edit view was added through the following Payload config:</p>
|
|
<code>components.views.edit</code>
|
|
<p>
|
|
{'This takes precedence over the default edit view, '}
|
|
<b>as well as all nested views like versions.</b>
|
|
{' The document header will be completely overridden.'}
|
|
</p>
|
|
</div>
|
|
</Fragment>
|
|
)
|
|
}
|