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

Merge branch '2.0' of github.com:payloadcms/payload into 2.0

Browse Source
This commit is contained in:
James
2023-10-08 16:47:47 -04:00
parent 999f2fba04 6009b18f75
commit a0645bbae5
20 changed files with 326 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/admin/components/AfterNavLinks/index.tsx
View File

@@ -30,7 +30,7 @@ const AfterNavLinks: React.FC = () => {
<NavLink
activeClassName="active"
style={{ textDecoration: 'none' }}
to={`${adminRoute}/custom-default-route`}
to={`${adminRoute}/custom-default-view`}
>
Default Template
</NavLink>
@@ -39,7 +39,7 @@ const AfterNavLinks: React.FC = () => {
<NavLink
activeClassName="active"
style={{ textDecoration: 'none' }}
to={`${adminRoute}/custom-minimal-route`}
to={`${adminRoute}/custom-minimal-view`}
>
Minimal Template
</NavLink>

69
test/admin/components/routes/CustomDefault/index.tsx
View File

@@ -1,69 +0,0 @@
import React, { useEffect } from 'react'
import { Redirect } from 'react-router-dom'
import type { CustomAdminView } from '../../../../../packages/payload/src/config/types'
import Button from '../../../../../packages/payload/src/admin/components/elements/Button'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
// As this is the demo project, we import our dependencies from the `src` directory.
import DefaultTemplate from '../../../../../packages/payload/src/admin/components/templates/Default'
import { useConfig } from '../../../../../packages/payload/src/admin/components/utilities/Config'
import Meta from '../../../../../packages/payload/src/admin/components/utilities/Meta'
// In your projects, you can import as follows:
// import { DefaultTemplate } from 'payload/components/templates';
// import { Button, Eyebrow } from 'payload/components/elements';
// import { AdminView } from 'payload/config';
// import { useStepNav } from 'payload/components/hooks';
// import { useConfig, Meta } from 'payload/components/utilities';
const CustomDefaultRoute: CustomAdminView = ({ canAccessAdmin, user }) => {
const {
routes: { admin: adminRoute },
} = useConfig()
const { setStepNav } = useStepNav()
// This effect will only run one time and will allow us
// to set the step nav to display our custom route name
useEffect(() => {
setStepNav([
{
label: 'Custom Route with Default Template',
},
])
}, [setStepNav])
// If an unauthorized user tries to navigate straight to this page,
// Boot 'em out
if (!user || (user && !canAccessAdmin)) {
return <Redirect to={`${adminRoute}/unauthorized`} />
}
return (
<DefaultTemplate>
<Meta
description="Building custom routes into Payload is easy."
keywords="Custom React Components, Payload, CMS"
title="Custom Route with Default Template"
/>
<div
style={{
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Route</h1>
<p>
Here is a custom route that was added in the Payload config. It uses the Default Template,
so the sidebar is rendered.
</p>
<Button buttonStyle="secondary" el="link" to={`${adminRoute}`}>
Go to Dashboard
</Button>
</div>
</DefaultTemplate>
)
}
export default CustomDefaultRoute

27
test/admin/components/views/CustomAccount/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React, { Fragment } from 'react'
import type { AdminViewComponent } from '../../../../../packages/payload/src/config/types'
const CustomAccountView: AdminViewComponent = () => {
return (
<Fragment>
<div
style={{
marginTop: 'calc(var(--base) * 2)',
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Account View</h1>
<p>This custom view was added through the Payload config:</p>
<ul>
<li>
<code>components.views.Account</code>
</li>
</ul>
</div>
</Fragment>
)
}
export default CustomAccountView

27
test/admin/components/views/CustomDashboard/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React, { Fragment } from 'react'
import { AdminViewComponent } from '../../../../../packages/payload/src/config/types'
const CustomDashboardView: AdminViewComponent = () => {
return (
<Fragment>
<div
style={{
marginTop: 'calc(var(--base) * 2)',
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Dashboard View</h1>
<p>This custom view was added through the Payload config:</p>
<ul>
<li>
<code>components.views.Dashboard</code>
</li>
</ul>
</div>
</Fragment>
)
}
export default CustomDashboardView

21
test/admin/components/routes/CustomMinimal/index.scss → test/admin/components/views/CustomDefault/index.scss
View File

@@ -4,8 +4,27 @@
// In your own projects, you'd import as follows:
// @import '~payload/scss';
.custom-minimal-route {
.custom-default-view {
&__login-btn {
margin-right: base(0.5);
}
&__content {
display: flex;
flex-direction: column;
gap: base(1);
& > * {
margin: 0;
}
}
&__controls {
display: flex;
gap: calc(var(--base) / 2);
& > * {
margin: 0;
}
}
}

73
test/admin/components/views/CustomDefault/index.tsx
View File

@@ -1,21 +1,30 @@
import React, { Fragment, useEffect } from 'react'
import React, { useEffect } from 'react'
import { Redirect } from 'react-router-dom'
import type { EditViewComponent } from '../../../../../packages/payload/src/config/types'
import type { AdminViewComponent } from '../../../../../packages/payload/src/config/types'
import Button from '../../../../../packages/payload/src/admin/components/elements/Button'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
// As this is the demo project, we import our dependencies from the `src` directory.
import DefaultTemplate from '../../../../../packages/payload/src/admin/components/templates/Default'
import { useConfig } from '../../../../../packages/payload/src/admin/components/utilities/Config'
import Meta from '../../../../../packages/payload/src/admin/components/utilities/Meta'
const CustomDefaultView: EditViewComponent = ({
canAccessAdmin,
// collection,
// global,
user,
}) => {
// In your projects, you can import as follows:
// import { DefaultTemplate } from 'payload/components/templates';
// import { Button, Eyebrow } from 'payload/components/elements';
// import { AdminView } from 'payload/config';
// import { useStepNav } from 'payload/components/hooks';
// import { useConfig, Meta } from 'payload/components/utilities';
import './index.scss'
const baseClass = 'custom-default-view'
const CustomDefaultView: AdminViewComponent = ({ canAccessAdmin, user }) => {
const {
routes: { admin: adminRoute },
} = useConfig()
const { setStepNav } = useStepNav()
// This effect will only run one time and will allow us
@@ -24,7 +33,7 @@ const CustomDefaultView: EditViewComponent = ({
useEffect(() => {
setStepNav([
{
label: 'Custom Default View',
label: 'Custom Admin View with Default Template',
},
])
}, [setStepNav])
@@ -36,39 +45,31 @@ const CustomDefaultView: EditViewComponent = ({
}
return (
<Fragment>
<DefaultTemplate>
<Meta
description="Building custom views into Payload is easy."
keywords="Custom React Components, Payload, CMS"
title="Custom Admin View with Default Template"
/>
<div
className={`${baseClass}__content`}
style={{
marginTop: 'calc(var(--base) * 2)',
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Default View</h1>
<p>This custom Default view was added through one of the following Payload configs:</p>
<ul>
<li>
<code>components.views.Edit.Default</code>
<p>
{'This allows you to override only the default edit view specifically, but '}
<b>
<em>not</em>
</b>
{
' any nested views like versions, etc. The document header will render above this component.'
}
</p>
</li>
<li>
<code>components.views.Edit.Default.Component</code>
<p>
This is the most granular override, allowing you to override only the Default
component, or any of its other properties like path and label.
</p>
</li>
</ul>
<h1>Custom Admin View</h1>
<p>
Here is a custom admin view that was added in the Payload config. It uses the Default
Template, so the sidebar is rendered.
</p>
<div className={`${baseClass}__controls`}>
<Button buttonStyle="secondary" el="link" to={`${adminRoute}`}>
Go to Dashboard
</Button>
</div>
</div>
</Fragment>
</DefaultTemplate>
)
}

75
test/admin/components/views/CustomDefaultEdit/index.tsx Normal file
View File

@@ -0,0 +1,75 @@
import React, { Fragment, useEffect } from 'react'
import { Redirect } from 'react-router-dom'
import type { EditViewComponent } from '../../../../../packages/payload/src/config/types'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
import { useConfig } from '../../../../../packages/payload/src/admin/components/utilities/Config'
const CustomDefaultView: EditViewComponent = ({
canAccessAdmin,
// collection,
// global,
user,
}) => {
const {
routes: { admin: adminRoute },
} = useConfig()
const { setStepNav } = useStepNav()
// This effect will only run one time and will allow us
// to set the step nav to display our custom route name
useEffect(() => {
setStepNav([
{
label: 'Custom Default View',
},
])
}, [setStepNav])
// If an unauthorized user tries to navigate straight to this page,
// Boot 'em out
if (!user || (user && !canAccessAdmin)) {
return <Redirect to={`${adminRoute}/unauthorized`} />
}
return (
<Fragment>
<div
style={{
marginTop: 'calc(var(--base) * 2)',
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Default View</h1>
<p>This custom Default view was added through one of the following Payload configs:</p>
<ul>
<li>
<code>components.views.Edit.Default</code>
<p>
{'This allows you to override only the default edit view specifically, but '}
<b>
<em>not</em>
</b>
{
' any nested views like versions, etc. The document header will render above this component.'
}
</p>
</li>
<li>
<code>components.views.Edit.Default.Component</code>
<p>
This is the most granular override, allowing you to override only the Default
component, or any of its other properties like path and label.
</p>
</li>
</ul>
</div>
</Fragment>
)
}
export default CustomDefaultView

30
test/admin/components/views/CustomMinimal/index.scss Normal file
View File

@@ -0,0 +1,30 @@
// As this is the demo folder, we import Payload SCSS functions relatively.
@import '../../../../../packages/payload/src/exports/scss.scss';
// In your own projects, you'd import as follows:
// @import '~payload/scss';
.custom-minimal-view {
&__login-btn {
margin-right: base(0.5);
}
&__content {
display: flex;
flex-direction: column;
gap: base(1);
& > * {
margin: 0;
}
}
&__controls {
display: flex;
gap: calc(var(--base) / 2);
& > * {
margin: 0;
}
}
}

26
test/admin/components/routes/CustomMinimal/index.tsx → test/admin/components/views/CustomMinimal/index.tsx
View File

@@ -12,25 +12,29 @@ import { useConfig } from '../../../../../packages/payload/src/admin/components/
import './index.scss'
const baseClass = 'custom-minimal-route'
const baseClass = 'custom-minimal-view'
const CustomMinimalRoute: React.FC = () => {
const CustomMinimalView: React.FC = () => {
const {
routes: { admin: adminRoute },
} = useConfig()
return (
<MinimalTemplate className={baseClass}>
<h1>Custom Route</h1>
<p>Here is a custom route that was added in the Payload config.</p>
<Button className={`${baseClass}__login-btn`} el="link" to={`${adminRoute}/login`}>
Go to Login
</Button>
<Button buttonStyle="secondary" el="link" to={`${adminRoute}`}>
Go to Dashboard
</Button>
<div className={`${baseClass}__content`}>
<h1>Custom Admin View</h1>
<p>Here is a custom admin view that was added in the Payload config.</p>
<div className={`${baseClass}__controls`}>
<Button className={`${baseClass}__login-btn`} el="link" to={`${adminRoute}/login`}>
Go to Login
</Button>
<Button buttonStyle="secondary" el="link" to={`${adminRoute}`}>
Go to Dashboard
</Button>
</div>
</div>
</MinimalTemplate>
)
}
export default CustomMinimalRoute
export default CustomMinimalView

26
test/admin/config.ts
View File

@@ -11,10 +11,10 @@ import CustomTabComponent from './components/CustomTabComponent'
import DemoUIFieldCell from './components/DemoUIField/Cell'
import DemoUIFieldField from './components/DemoUIField/Field'
import Logout from './components/Logout'
import CustomDefaultRoute from './components/routes/CustomDefault'
import CustomMinimalRoute from './components/routes/CustomMinimal'
import CustomDefaultView from './components/views/CustomDefault'
import CustomDefaultEditView from './components/views/CustomDefaultEdit'
import CustomEditView from './components/views/CustomEdit'
import CustomMinimalRoute from './components/views/CustomMinimal'
import CustomVersionsView from './components/views/CustomVersions'
import CustomView from './components/views/CustomView'
import { globalSlug, postsSlug, slugPluralLabel, slugSingularLabel } from './shared'
@@ -32,16 +32,6 @@ export default buildConfigWithDefaults({
css: path.resolve(__dirname, 'styles.scss'),
components: {
// providers: [CustomProvider, CustomProvider],
routes: [
{
path: '/custom-minimal-route',
Component: CustomMinimalRoute,
},
{
path: '/custom-default-route',
Component: CustomDefaultRoute,
},
],
afterDashboard: [AfterDashboard],
beforeLogin: [BeforeLogin],
logout: {
@@ -51,6 +41,14 @@ export default buildConfigWithDefaults({
views: {
// Dashboard: CustomDashboardView,
// Account: CustomAccountView,
CustomMinimalRoute: {
path: '/custom-minimal-view',
Component: CustomMinimalRoute,
},
CustomDefaultRoute: {
path: '/custom-default-view',
Component: CustomDefaultView,
},
},
},
},
@@ -184,7 +182,7 @@ export default buildConfigWithDefaults({
views: {
Edit: {
// This will override one specific nested view within the `/edit/:id` route, i.e. `/edit/:id/versions`
Default: CustomDefaultView,
Default: CustomDefaultEditView,
Versions: CustomVersionsView,
MyCustomView: {
path: '/custom-tab-view',
@@ -328,7 +326,7 @@ export default buildConfigWithDefaults({
components: {
views: {
Edit: {
Default: CustomDefaultView,
Default: CustomDefaultEditView,
Versions: CustomVersionsView,
MyCustomView: {
path: '/custom-tab-view',