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>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import type { GlobalConfig } from 'payload'
|
|
|
|
import { customTabComponent, overriddenDefaultRouteTabLabel } from '../shared.js'
|
|
import { customGlobalViews2GlobalSlug } from '../slugs.js'
|
|
|
|
export const CustomGlobalViews2: GlobalConfig = {
|
|
slug: customGlobalViews2GlobalSlug,
|
|
admin: {
|
|
components: {
|
|
views: {
|
|
edit: {
|
|
api: {
|
|
// Override the default tab component for the default route
|
|
tab: {
|
|
Component: {
|
|
path: '/components/CustomTabComponent/index.js#CustomTabComponent',
|
|
clientProps: {
|
|
label: overriddenDefaultRouteTabLabel,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
default: {
|
|
Component: '/components/views/CustomEditDefault/index.js#CustomDefaultEditView',
|
|
},
|
|
myCustomView: {
|
|
Component: '/components/views/CustomTabLabel/index.js#CustomTabLabelView',
|
|
tab: {
|
|
href: '/custom-tab-view',
|
|
label: 'Custom',
|
|
},
|
|
path: '/custom-tab-view',
|
|
},
|
|
myCustomViewWithCustomTab: {
|
|
Component: {
|
|
path: '/components/views/CustomTabComponent/index.js#CustomTabComponentView',
|
|
clientProps: {
|
|
label: customTabComponent,
|
|
},
|
|
},
|
|
tab: {
|
|
Component: {
|
|
path: '/components/CustomTabComponent/index.js#CustomTabComponent',
|
|
clientProps: {
|
|
label: customTabComponent,
|
|
},
|
|
},
|
|
},
|
|
path: '/custom-tab-component',
|
|
},
|
|
versions: {
|
|
Component: '/components/views/CustomVersions/index.js#CustomVersionsView',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
},
|
|
],
|
|
versions: true,
|
|
}
|