When you delete a collection item, there is a Delete confirmation modal / popup.
Is it possible to use this built-in functionality to trigger confirmation popups on demand?
For example one would like to trigger confirmation before creation or update.
That's a great question. I would like to know that too.
You should be able to use the
Modal
component and
useModal
hook if you import from
payload/dist
. It would be awesome, if payload just export their whole component Kit.
Here's the related idea -
https://github.com/payloadcms/payload/discussions/1471#discussioncomment-4514706Hereโs another related discussion:
https://github.com/payloadcms/payload/discussions/1729Anyone figured out how to do this by any chance ( @kaspartr @martin.rahbek )? ๐
Actually I started looking at this a while ago and turns out I was pretty much there already. Here's the code I used to display a button that will open a modal when clicked (wrapped in a UI field):
import React from 'react'
import { useDocumentInfo } from "payload/components/utilities";
import { Modal, useModal } from '@faceless-ui/modal';
import { MinimalTemplate } from "payload/components/templates";
import { Button } from "payload/components/elements";
import { Props } from 'payload/components/fields/Text';
import './styles.scss';
const baseClass = 'ui-element-with-modal';
const UIElement: React.FC<Props> = (props) => {
const { toggleModal } = useModal();
const { id } = useDocumentInfo();
const modalSlug = `${baseClass}-confirmation-${id}`;
return (
<div>
<Button
size="medium"
buttonStyle="secondary"
onClick={() => {
toggleModal(modalSlug);
}}
>
Open modal
</Button>
<Modal
slug={modalSlug}
className={`${baseClass}__modal`}
>
<MinimalTemplate className={`${baseClass}__template`}>
<h1>Modal title goes here</h1>
<p>Modal description goes here</p>
<Button
buttonStyle="secondary"
type="button"
onClick={() => {
toggleModal(modalSlug);
}}
>
Cancel
</Button>
<Button>
Confirm
</Button>
</MinimalTemplate>
</Modal>
</div>
)
};
export default UIElement;
And I also needed to copy some css over:
.ui-element-with-modal {
&__modal {
display: flex;
align-items: center;
height: 100%;
&:before, &:after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&:before {
background: var(--theme-bg);
opacity: 0.85;
}
&:after {
backdrop-filter: blur(5px);
}
}
&__template {
position: relative;
z-index: 1;
.btn {
margin-right: 1.9230769231rem;
}
}
}
Really looking forward to having access to Payload's components directly though, as this is a bit gross. ๐
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.