Implement notifications/dialogs RFCs (#3584)

Signed-off-by: Jan Potoms <[email protected]>
Co-authored-by: Pedro Ferreira <[email protected]>

docs/data/toolpad/core/components/use-dialogs/AlertDialog.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          // preview-start
+          await dialogs.alert('Hello World');
+          // preview-end
+        }}
+      >
+        Alert
+      </Button>
+    </div>
+  );
+}
+
+export default function AlertDialog() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/AlertDialog.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          // preview-start
+          await dialogs.alert('Hello World');
+          // preview-end
+        }}
+      >
+        Alert
+      </Button>
+    </div>
+  );
+}
+
+export default function AlertDialog() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/AlertDialog.tsx.preview

@@ -0,0 +1 @@
+await dialogs.alert('Hello World');

docs/data/toolpad/core/components/use-dialogs/ConfirmDialog.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          // preview-start
+          const confirmed = await dialogs.confirm('Are you sure?', {
+            okText: 'Yes',
+            cancelText: 'No',
+          });
+          if (confirmed) {
+            await dialogs.alert("Then let's do it!");
+          } else {
+            await dialogs.alert('Ok, forget about it!');
+          }
+          // preview-end
+        }}
+      >
+        Confirm
+      </Button>
+    </div>
+  );
+}
+
+export default function ConfirmDialog() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/ConfirmDialog.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          // preview-start
+          const confirmed = await dialogs.confirm('Are you sure?', {
+            okText: 'Yes',
+            cancelText: 'No',
+          });
+          if (confirmed) {
+            await dialogs.alert("Then let's do it!");
+          } else {
+            await dialogs.alert('Ok, forget about it!');
+          }
+          // preview-end
+        }}
+      >
+        Confirm
+      </Button>
+    </div>
+  );
+}
+
+export default function ConfirmDialog() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/ConfirmDialog.tsx.preview

@@ -0,0 +1,9 @@
+const confirmed = await dialogs.confirm('Are you sure?', {
+  okText: 'Yes',
+  cancelText: 'No',
+});
+if (confirmed) {
+  await dialogs.alert("Then let's do it!");
+} else {
+  await dialogs.alert('Ok, forget about it!');
+}

docs/data/toolpad/core/components/use-dialogs/CustomDialog.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+function MyCustomDialog({ open, onClose }) {
+  return (
+    <Dialog fullWidth open={open} onClose={() => onClose()}>
+      <DialogTitle>Custom dialog</DialogTitle>
+      <DialogContent>I am a custom dialog</DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose()}>Close me</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+MyCustomDialog.propTypes = {
+  /**
+   * A function to call when the dialog should be closed. If the dialog has a return
+   * value, it should be passed as an argument to this function. You should use the promise
+   * that is returned to show a loading state while the dialog is performing async actions
+   * on close.
+   * @param result The result to return from the dialog.
+   * @returns A promise that resolves when the dialog can be fully closed.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Whether the dialog is open.
+   */
+  open: PropTypes.bool.isRequired,
+};
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          // preview-start
+          await dialogs.open(MyCustomDialog);
+          // preview-end
+        }}
+      >
+        Open custom
+      </Button>
+    </div>
+  );
+}
+
+export default function CustomDialog() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/CustomDialog.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+function MyCustomDialog({ open, onClose }: DialogProps) {
+  return (
+    <Dialog fullWidth open={open} onClose={() => onClose()}>
+      <DialogTitle>Custom dialog</DialogTitle>
+      <DialogContent>I am a custom dialog</DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose()}>Close me</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  return (
+    <div>
+      <Button
+        onClick={async () => {
+          // preview-start
+          await dialogs.open(MyCustomDialog);
+          // preview-end
+        }}
+      >
+        Open custom
+      </Button>
+    </div>
+  );
+}
+
+export default function CustomDialog() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/CustomDialog.tsx.preview

@@ -0,0 +1 @@
+await dialogs.open(MyCustomDialog);

docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayload.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+
+function MyCustomDialog({ payload, open, onClose }) {
+  return (
+    <Dialog fullWidth open={open} onClose={() => onClose()}>
+      <DialogTitle>Dialog with payload</DialogTitle>
+      <DialogContent>The payload is &quot;{payload}&quot;</DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose()}>Close me</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+MyCustomDialog.propTypes = {
+  /**
+   * A function to call when the dialog should be closed. If the dialog has a return
+   * value, it should be passed as an argument to this function. You should use the promise
+   * that is returned to show a loading state while the dialog is performing async actions
+   * on close.
+   * @param result The result to return from the dialog.
+   * @returns A promise that resolves when the dialog can be fully closed.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Whether the dialog is open.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * The payload that was passed when the dialog was opened.
+   */
+  payload: PropTypes.string.isRequired,
+};
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  const [payload, setPayload] = React.useState('Some payload');
+  return (
+    <Stack spacing={2}>
+      <TextField
+        label="Payload"
+        value={payload}
+        onChange={(event) => setPayload(event.currentTarget.value)}
+      />
+      <Button
+        onClick={async () => {
+          // preview-start
+          await dialogs.open(MyCustomDialog, payload);
+          // preview-end
+        }}
+      >
+        Open
+      </Button>
+    </Stack>
+  );
+}
+
+export default function CustomDialogWithPayload() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayload.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+
+function MyCustomDialog({ payload, open, onClose }: DialogProps<string>) {
+  return (
+    <Dialog fullWidth open={open} onClose={() => onClose()}>
+      <DialogTitle>Dialog with payload</DialogTitle>
+      <DialogContent>The payload is &quot;{payload}&quot;</DialogContent>
+      <DialogActions>
+        <Button onClick={() => onClose()}>Close me</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function DemoContent() {
+  const dialogs = useDialogs();
+  const [payload, setPayload] = React.useState('Some payload');
+  return (
+    <Stack spacing={2}>
+      <TextField
+        label="Payload"
+        value={payload}
+        onChange={(event) => setPayload(event.currentTarget.value)}
+      />
+      <Button
+        onClick={async () => {
+          // preview-start
+          await dialogs.open(MyCustomDialog, payload);
+          // preview-end
+        }}
+      >
+        Open
+      </Button>
+    </Stack>
+  );
+}
+
+export default function CustomDialogWithPayload() {
+  return (
+    <DialogsProvider>
+      <DemoContent />
+    </DialogsProvider>
+  );
+}

docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayload.tsx.preview

@@ -0,0 +1 @@
+await dialogs.open(MyCustomDialog, payload);