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

feat: custom admin buttons (#2618)

Browse Source 
Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>
This commit is contained in:
Jarrod Flesch
2023-05-04 16:04:06 -04:00
committed by GitHub
parent 56a1dee3d6
commit 1d58007606
6 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/admin/components.mdx
View File

@@ -77,14 +77,14 @@ _For more examples regarding how to customize components, look at the following
You can override components on a Collection-by-Collection basis via each Collection's `admin` property.
| Path | Description |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| **`views.Edit`** | Used while a document within this Collection is being edited. |
| **`views.List`** | The `List` view is used to render a paginated, filterable table of Documents in this Collection. |
| **`elements.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled |
| **`elements.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
| **`elements.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. |
| **`elements.PreviewButton`** | Replace the default `Preview` button with a custom component. |
| Path | Description |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **`views.Edit`** | Used while a document within this Collection is being edited. |
| **`views.List`** | The `List` view is used to render a paginated, filterable table of Documents in this Collection. |
| **`edit.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled |
| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
| **`edit.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. |
| **`edit.PreviewButton`** | Replace the default `Preview` button with a custom component. |
#### Examples
@@ -140,13 +140,13 @@ export const CustomPreviewButton: CustomPreviewButtonProps = ({
As with Collections, You can override components on a global-by-global basis via their `admin` property.
| Path | Description |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| **`views.Edit`** | Used while this Global is being edited. |
| **`elements.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled |
| **`elements.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
| **`elements.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. |
| **`elements.PreviewButton`** | Replace the default `Preview` button with a custom component. |
| Path | Description |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **`views.Edit`** | Used while this Global is being edited. |
| **`edit.SaveButton`** | Replace the default `Save` button with a custom component. Drafts must be disabled |
| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
| **`edit.PublishButton`** | Replace the default `Publish` button with a custom component. Drafts must be enabled. |
| **`edit.PreviewButton`** | Replace the default `Preview` button with a custom component. |
### Fields

4
src/admin/components/views/Account/Default.tsx
View File

@@ -147,12 +147,12 @@ const DefaultAccount: React.FC<Props> = (props) => {
{(preview && (!collection.versions?.drafts || collection.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
CustomComponent={collection?.admin?.components?.elements?.PreviewButton}
CustomComponent={collection?.admin?.components?.edit?.PreviewButton}
/>
)}
{hasSavePermission && (
<Save
CustomComponent={collection?.admin?.components?.elements?.SaveButton}
CustomComponent={collection?.admin?.components?.edit?.SaveButton}
/>
)}
</div>

12
src/admin/components/views/collections/Edit/Default.tsx
View File

@@ -216,7 +216,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
{(isEditing && preview && (!collection.versions?.drafts || collection.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
CustomComponent={collection?.admin?.components?.elements?.PreviewButton}
CustomComponent={collection?.admin?.components?.edit?.PreviewButton}
/>
)}
@@ -225,17 +225,15 @@ const DefaultEditView: React.FC<Props> = (props) => {
{collection.versions?.drafts ? (
<React.Fragment>
{!collection.versions.drafts.autosave && (
<SaveDraft CustomComponent={collection?.admin?.components?.elements?.SaveDraftButton} />
<SaveDraft CustomComponent={collection?.admin?.components?.edit?.SaveDraftButton} />
)}
<Publish
CustomComponent={collection?.admin?.components?.elements?.PublishButton}
CustomComponent={collection?.admin?.components?.edit?.PublishButton}
/>
</React.Fragment>
) : (
<Save
CustomComponent={collection?.admin?.components?.elements?.SaveButton}
/>
<Save CustomComponent={collection?.admin?.components?.edit?.SaveButton} />
)}
</React.Fragment>
)}
@@ -245,7 +243,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
{(isEditing && preview && (collection.versions?.drafts && !collection.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
CustomComponent={collection?.admin?.components?.elements?.PreviewButton}
CustomComponent={collection?.admin?.components?.edit?.PreviewButton}
/>
)}

2
src/collections/config/schema.ts
View File

@@ -62,7 +62,7 @@ const collectionSchema = joi.object().keys({
List: componentSchema,
Edit: componentSchema,
}),
elements: joi.object({
edit: joi.object({
SaveButton: componentSchema,
PublishButton: componentSchema,
SaveDraftButton: componentSchema,

5
src/collections/config/types.ts
View File

@@ -194,7 +194,10 @@ export type CollectionAdminOptions = {
* Custom admin components
*/
components?: {
elements?: {
/**
* Components within the edit view
*/
edit?: {
/**
* Replaces the "Save" button
* + drafts must be disabled

2
test/versions/collections/Drafts.ts
View File

@@ -9,7 +9,7 @@ const DraftPosts: CollectionConfig = {
defaultColumns: ['title', 'description', 'createdAt', '_status'],
preview: () => 'https://payloadcms.com',
components: {
elements: {
edit: {
PublishButton: CustomPublishButton,
},
},