Make dialogs work in iframes

mui · Feb 7, 2025 · 3cf7eb8 · 3cf7eb8
1 parent 461b973
commit 3cf7eb8
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 9 deletions.
diff --git a/docs/data/toolpad/core/components/crud/CRUDBasic.js b/docs/data/toolpad/core/components/crud/CRUDBasic.js
@@ -33,7 +33,10 @@ const demoTheme = createTheme({
   },
 });
 
-let notesStore = [];
+let notesStore = [
+  { id: 1, title: 'Grocery List Item', text: 'Buy more coffee.' },
+  { id: 2, title: 'Personal Goal', text: 'Finish reading the book.' },
+];
 
 export const notesDataSource = {
   fields: [
@@ -180,6 +183,12 @@ export const notesDataSource = {
   },
 };
 
+function matchPath(pattern, pathname) {
+  const regex = new RegExp(`^${pattern.replace(/:[^/]+/g, '([^/]+)')}$`);
+  const match = pathname.match(regex);
+  return match ? match[1] : null;
+}
+
 function CRUDBasic(props) {
   const { window } = props;
 
@@ -189,8 +198,20 @@ function CRUDBasic(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   const title = React.useMemo(() => {
+    if (router.pathname === '/notes/new') {
+      return 'New Note';
+    }
+    const editNoteId = matchPath('/notes/:noteId/edit', router.pathname);
+    if (editNoteId) {
+      return `Note ${editNoteId} - Edit`;
+    }
+    const showNoteId = matchPath('/notes/:noteId', router.pathname);
+    if (showNoteId) {
+      return `Note ${showNoteId}`;
+    }
+
     return undefined;
-  }, []);
+  }, [router.pathname]);
 
   return (
     <AppProvider
@@ -205,8 +226,7 @@ function CRUDBasic(props) {
           <CRUD
             dataSource={notesDataSource}
             rootPath="/notes"
-            initialPageSize={25}
-            defaultValues={{ itemCount: 1 }}
+            initialPageSize={10}
           />
           {/* preview-end */}
         </PageContainer>

diff --git a/docs/data/toolpad/core/components/crud/CRUDBasic.tsx b/docs/data/toolpad/core/components/crud/CRUDBasic.tsx
@@ -181,7 +181,7 @@ export const notesDataSource: DataSource<Note> = {
       errors.title = 'Title must be at least 3 characters long';
     }
     if (!formValues.text) {
-      errors.status = 'Text is required';
+      errors.text = 'Text is required';
     }
 
     return errors;

diff --git a/docs/data/toolpad/core/components/crud/CRUDBasic.tsx.preview b/docs/data/toolpad/core/components/crud/CRUDBasic.tsx.preview
@@ -1,6 +1,5 @@
 <CRUD<Note>
   dataSource={notesDataSource}
   rootPath="/notes"
-  initialPageSize={25}
-  defaultValues={{ itemCount: 1 }}
+  initialPageSize={10}
 />
diff --git a/packages/toolpad-core/src/useDialogs/useDialogs.tsx b/packages/toolpad-core/src/useDialogs/useDialogs.tsx
@@ -11,6 +11,7 @@ import { useNonNullableContext } from '@toolpad/utils/react';
 import invariant from 'invariant';
 import * as React from 'react';
 import { DialogsContext } from './DialogsContext';
+import { WindowContext } from '../shared/context';
 
 export interface OpenDialogOptions<R> {
   /**
@@ -192,9 +193,17 @@ export interface AlertDialogPayload extends AlertOptions {
 export interface AlertDialogProps extends DialogProps<AlertDialogPayload, void> {}
 
 export function AlertDialog({ open, payload, onClose }: AlertDialogProps) {
+  const appWindowContext = React.useContext(WindowContext);
+
   const okButtonProps = useDialogLoadingButton(() => onClose());
   return (
-    <Dialog maxWidth="xs" fullWidth open={open} onClose={() => onClose()}>
+    <Dialog
+      maxWidth="xs"
+      fullWidth
+      open={open}
+      onClose={() => onClose()}
+      container={appWindowContext?.document.body}
+    >
       <DialogTitle>{payload.title ?? 'Alert'}</DialogTitle>
       <DialogContent>{payload.msg}</DialogContent>
       <DialogActions>
@@ -213,10 +222,18 @@ export interface ConfirmDialogPayload extends ConfirmOptions {
 export interface ConfirmDialogProps extends DialogProps<ConfirmDialogPayload, boolean> {}
 
 export function ConfirmDialog({ open, payload, onClose }: ConfirmDialogProps) {
+  const appWindowContext = React.useContext(WindowContext);
+
   const cancelButtonProps = useDialogLoadingButton(() => onClose(false));
   const okButtonProps = useDialogLoadingButton(() => onClose(true));
   return (
-    <Dialog maxWidth="xs" fullWidth open={open} onClose={() => onClose(false)}>
+    <Dialog
+      maxWidth="xs"
+      fullWidth
+      open={open}
+      onClose={() => onClose(false)}
+      container={appWindowContext?.document.body}
+    >
       <DialogTitle>{payload.title ?? 'Confirm'}</DialogTitle>
       <DialogContent>{payload.msg}</DialogContent>
       <DialogActions>
@@ -238,6 +255,8 @@ export interface PromptDialogPayload extends PromptOptions {
 export interface PromptDialogProps extends DialogProps<PromptDialogPayload, string | null> {}
 
 export function PromptDialog({ open, payload, onClose }: PromptDialogProps) {
+  const appWindowContext = React.useContext(WindowContext);
+
   const [input, setInput] = React.useState('');
   const cancelButtonProps = useDialogLoadingButton(() => onClose(null));
 
@@ -265,6 +284,7 @@ export function PromptDialog({ open, payload, onClose }: PromptDialogProps) {
           }
         },
       }}
+      container={appWindowContext?.document.body}
     >
       <DialogTitle>{payload.title ?? 'Confirm'}</DialogTitle>
       <DialogContent>