c639c5f278
### What?
TypeScript says that it is possible to modify the tab of the default
view however, when you specify the path to the custom component, nothing
happens. I fixed it.
### How?
If a Component for the tab of the default view is defined in the config,
I return that Component instead of DocumentTab
### Example Configuration
config.ts
```ts
export const MenuGlobal: GlobalConfig = {
slug: menuSlug,
fields: [
{
name: 'globalText',
type: 'text',
},
],
admin: {
components: {
views: {
edit: {
api: {
tab: {
Component: './TestComponent.tsx',
},
},
},
},
},
},
}
```
./TestComponent.tsx
```tsx
const TestComponent = () => 'example'
export default TestComponent
```
### Before
### After
---------
Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
29 lines
753 B
TypeScript
29 lines
753 B
TypeScript
'use client'
|
|
|
|
import type { DocumentTabClientProps } from 'payload'
|
|
|
|
import { useConfig } from '@payloadcms/ui'
|
|
import LinkImport from 'next/link.js'
|
|
import { useParams } from 'next/navigation.js'
|
|
import React from 'react'
|
|
|
|
const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
|
|
|
|
type CustomTabComponentClientProps = {
|
|
label: string
|
|
} & DocumentTabClientProps
|
|
|
|
export function CustomTabComponentClient({ label, path }: CustomTabComponentClientProps) {
|
|
const {
|
|
config: {
|
|
routes: { admin: adminRoute },
|
|
},
|
|
} = useConfig()
|
|
|
|
const params = useParams()
|
|
|
|
const baseRoute = (params.segments?.slice(0, 3) as string[]).join('/')
|
|
|
|
return <Link href={`${adminRoute}/${baseRoute}${path}`}>{label}</Link>
|
|
}
|