How to use payloads FullscreenModal?Error with slug on payload modal - Stack Overflow

admin管理员组

文章数量:1314025

Hey im trying to use the FullscreenModal to verify user intend on a specific action.

I pretty much copied the code from the discardWithoutSavings modal sourceCode from the payload monorepo. but i get a weird bug related to the slug.

Error: TypeError: Cannot read properties of undefined (reading 'bulk-upload--discard-without-saving')

Code:

"use client";

import { useModal } from "@payloadcms/ui/elements/Modal";
import React from "react";

import { Button } from "@payloadcms/ui/elements/Button";
import { FullscreenModal } from "@payloadcms/ui/elements/FullscreenModal";

export const customModalSlug = "bulk-upload--discard-without-saving";
const baseClass = "leave-without-saving";

export default function CustomModal() {
  const { closeModal } = useModal();

  const onCancel = React.useCallback(() => {
    closeModal(customModalSlug);
  }, [closeModal]);

  const onConfirm = React.useCallback(() => {
    closeModal(customModalSlug);
  }, [closeModal]);

  return (
    <FullscreenModal className={baseClass} slug={customModalSlug}>
      <div className={`${baseClass}__wrapper`}>
        <div className={`${baseClass}__content`}>
          <h1>Leave without saving</h1>
          <p>Changes not saved</p>
        </div>
        <div className={`${baseClass}__controls`}>
          <Button buttonStyle="secondary" onClick={onCancel} size="large">
            Stay on this page
          </Button>
          <Button onClick={onConfirm} size="large">
            Leave anyway
          </Button>
        </div>
      </div>
    </FullscreenModal>
  );
}

What I tried:

• changing slug
• use raw Modal instead of the nicly wrapped FullscreenModal

Both didnt change a thing.

I found a video showing how to implement the modals in v2 but the process looks very different from what payload seems to offer in v3.

Any ideas/ help?

本文标签： How to use payloads FullscreenModalError with slug on payload modalStack Overflow