tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: nests doc tab li in tab conditions

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-02 15:12:36 -04:00
parent 29aa6e1449
commit 0c6bea7388
7 changed files with 53 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/Tab/index.scss
View File

@@ -2,12 +2,15 @@
.doc-tab {
@extend %h5;
text-decoration: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--base) / 2) calc(var(--base));
&__link {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
&:focus:not(:focus-visible) {
opacity: 1;
@@ -60,10 +63,13 @@
position: relative;
align-items: center;
gap: 4px;
width: 100%;
height: 100%;
padding: calc(var(--base) / 2) calc(var(--base));
}
&__count {
padding: 0px 6px;
padding: 0px 7px;
background-color: var(--theme-elevation-100);
border-radius: 1px;
}

32
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/Tab/index.tsx
View File

@@ -57,21 +57,23 @@ export const DocumentTab: React.FC<DocumentTabProps & DocumentTabConfig> = (prop
const pillToRender = typeof pillLabel === 'function' ? pillLabel({ versions }) : pillLabel
return (
<Link
className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}
to={href}
{...(newTab && { rel: 'noopener noreferrer', target: '_blank' })}
>
<span className={`${baseClass}__label`}>
{labelToRender}
{pillToRender && (
<Fragment>
&nbsp;
<span className={`${baseClass}__count`}>{pillToRender}</span>
</Fragment>
)}
</span>
</Link>
<li className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}>
<Link
className={`${baseClass}__link`}
to={href}
{...(newTab && { rel: 'noopener noreferrer', target: '_blank' })}
>
<span className={`${baseClass}__label`}>
{labelToRender}
{pillToRender && (
<Fragment>
&nbsp;
<span className={`${baseClass}__count`}>{pillToRender}</span>
</Fragment>
)}
</span>
</Link>
</li>
)
}

9
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
View File

@@ -10,11 +10,6 @@
padding-left: 0;
}
&__tab {
display: flex;
white-space: nowrap;
}
@include mid-break {
width: 100%;
padding: 0;
@@ -23,10 +18,8 @@
&__tabs {
padding: 0;
margin-left: var(--gutter-h);
}
&__tab {
&:last-child {
& > *:last-child {
// CSS hack, give the illusion of right margin within the overflowing container
// margin-right, padding-right, etc are tricky within overflowing flex-boxes
&::after {

12
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx
View File

@@ -19,21 +19,13 @@ export const DocumentTabs: React.FC<DocumentTabProps> = (props) => {
<div className={baseClass}>
<ul className={`${baseClass}__tabs`}>
{tabs?.map((Tab, index) => {
return (
<li className={`${baseClass}__tab`} key={`tab-${index}`}>
<DocumentTab {...props} {...Tab} />
</li>
)
return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
})}
{customViews?.map((CustomView, index) => {
const { Tab, path } = CustomView
if (typeof Tab === 'function') {
return (
<li className={`${baseClass}__tab`} key={`tab-custom-${index}`}>
<Tab path={path} {...props} />
</li>
)
return <Tab path={path} {...props} key={`tab-custom-${index}`} />
}
return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />

14
packages/payload/src/admin/components/elements/DocumentHeader/Tabs/types.ts
View File

@@ -43,10 +43,10 @@ export type DocumentTabConfig = {
| string
}
export type DocumentTab =
| DocumentTabConfig
| React.ComponentType<
DocumentTabProps & {
path: string
}
>
export type DocumentTabComponent = React.ComponentType<
DocumentTabProps & {
path: string
}
>
export type DocumentTab = DocumentTabComponent | DocumentTabConfig

16
test/admin/components/CustomTabComponent/index.scss
View File

@@ -1,11 +1,13 @@
.custom-doc-tab {
text-decoration: none;
background-color: var(--theme-elevation-200);
padding: 0 6px;
border-radius: 2px;
white-space: nowrap;
a {
text-decoration: none;
background-color: var(--theme-elevation-200);
padding: 2px 6px;
border-radius: 2px;
white-space: nowrap;
&:hover {
background-color: var(--theme-elevation-300);
&:hover {
background-color: var(--theme-elevation-300);
}
}
}

10
test/admin/components/CustomTabComponent/index.tsx
View File

@@ -1,18 +1,18 @@
import React from 'react'
import { Link, useRouteMatch } from 'react-router-dom'
import type { DocumentTabProps } from '../../../../packages/payload/src/admin/components/elements/DocumentHeader/Tabs/types'
import type { DocumentTabComponent } from '../../../../packages/payload/src/admin/components/elements/DocumentHeader/Tabs/types'
import './index.scss'
const CustomTabComponent: React.FC<DocumentTabProps> = (props) => {
const CustomTabComponent: DocumentTabComponent = (props) => {
const { path } = props
const match = useRouteMatch()
return (
<Link className="custom-doc-tab" to={`${match.url}${path}`}>
Custom Tab Component
</Link>
<li className="custom-doc-tab">
<Link to={`${match.url}${path}`}>Custom Tab Component</Link>
</li>
)
}