Create custom modal or popup?

default discord avatar
kaspartr
11 months ago
8

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.

  • default discord avatar
    martin.rahbek
    11 months ago

    That's a great question. I would like to know that too.

  • default discord avatar
    akshay
    11 months ago

    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-4514706
  • discord user avatar
    jacobsfletch
    Payload Team
    11 months ago

    Hereโ€™s another related discussion:

    https://github.com/payloadcms/payload/discussions/1729
  • default discord avatar
    tinouti
    8 months ago

    Anyone 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. ๐Ÿ˜…

    image.png
    image.png
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.