Create custom modal or popup?

KasparTr

5 months ago

8

• 

  Martin R

  5 months ago

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

• 

  akshay

  5 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
• 

  jacobsfletch

  Payload Team

  5 months ago

  Here’s another related discussion:

  https://github.com/payloadcms/payload/discussions/1729
• 

  Tinouti

  2 months ago

  Anyone figured out how to do this by any chance ( @KasparTr @Martin R )? 👀

  
  

  
  

  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. 😅