Payload CMS Custom Admin View Form

CustomAdminView.tsx

import { FC, Fragment } from 'react'
import {
  Form,
  FormSubmit,
  Gutter,
  HydrateClientUser,
  RenderFields,
  SetStepNav,
  SetViewActions,
} from '@payloadcms/ui'
import { mapFields } from '@payloadcms/ui/utilities/buildComponentMap'
import { AdminViewProps, Field } from 'payload'
import { WithServerSideProps as WithServerSidePropsGeneric } from '@payloadcms/ui/shared'
import { WithServerSidePropsPrePopulated } from '@payloadcms/ui/providers/ComponentMap/buildComponentMap'
import { DefaultTemplate } from '@payloadcms/next/templates'

const fields: Field[] = [
  {
    type: 'select',
    name: 'select',
    options: [
      {
        label: 'Hide',
        value: 'Hide',
      },
      {
        label: 'Show',
        value: 'Show',
      },
    ],
  },
  {
    type: 'text',
    name: 'conditionalTextField',
    admin: {
      condition: (_, siblingData) => siblingData.select === 'show',
    },
  },
]

const CustomAdminView: FC<AdminViewProps> = async ({ initPageResult, params, searchParams }) => {
  const {
    locale,
    permissions,
    req: {
      i18n,
      payload: { config },
      payload,
      user,
    },
    visibleEntities,
  } = initPageResult

  const WithServerSideProps: WithServerSidePropsPrePopulated = ({ Component, ...rest }) => {
    return (
      <WithServerSidePropsGeneric
        Component={Component}
        serverOnlyProps={{
          i18n,
          payload,
        }}
        {...rest}
      />
    )
  }

  const fieldMap = mapFields({
    WithServerSideProps,
    config,
    i18n,
    fieldSchema: fields,
    disableAddingID: true,
  })

  return (
    <DefaultTemplate visibleEntities={visibleEntities} i18n={i18n} payload={payload}>
      <HydrateClientUser permissions={permissions} user={user} />
      <SetStepNav nav={[]} />
      <SetViewActions actions={[]} />
      <Gutter>
        <Form method="POST" action="/api/custom-action" fields={fields}>
          <RenderFields fieldMap={fieldMap} path="" schemaPath="" readOnly={false} />
          <FormSubmit>Submit</FormSubmit>
        </Form>
      </Gutter>
    </DefaultTemplate>
  )
}

export default CustomAdminView