Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Create custom modal or popup?

default discord avatar
kaspartr2 years ago
4

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
    Deleted User2 years ago

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

  • default discord avatar
    squareclamp2 years 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
    2 years ago

    Here’s another related discussion:

    https://github.com/payloadcms/payload/discussions/1729
  • default discord avatar
    tinouti2 years ago

    Anyone figured out how to do this by any chance (

    @567578449439621124

    @456226577798135808

    )? 👀



    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 on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.