diff --git a/src/components/dialog/DialogManager.js b/src/components/dialog/DialogManager.js
index e8d0b44..f2f3f3a 100644
--- a/src/components/dialog/DialogManager.js
+++ b/src/components/dialog/DialogManager.js
@@ -1,13 +1,15 @@
import React, { useRef } from 'react';
import './Dialog.css';
-import Dialog from './Dialog';
import { useDialogs } from '../../hooks/useDialogs';
import { removeDialog } from '../../services/dialogService';
+import { getDialogComponent } from './utils/getDialogComponent';
+import { useEmbeddedContext } from '../../contexts/EmbeddedContext';
function DialogManager() {
const dialogs = useDialogs();
const currentDialogRef = useRef(null);
const currentDialog = dialogs[dialogs.length - 1];
+ const { isEmbedded } = useEmbeddedContext();
const onClose = () => {
removeDialog();
@@ -20,14 +22,11 @@ function DialogManager() {
if (!currentDialog) return null;
- const { customComponent, message, buttons } = currentDialog;
- const DialogContent = customComponent ?
- React.cloneElement(customComponent, { onClose, ref: currentDialogRef }) :
- ;
+ const DialogComponent = getDialogComponent(currentDialog, onClose, currentDialogRef, isEmbedded);
return (
- {DialogContent}
+ {DialogComponent}
);
}
diff --git a/src/components/dialog/EmbeddedDialog.css b/src/components/dialog/EmbeddedDialog.css
new file mode 100644
index 0000000..0b7fc18
--- /dev/null
+++ b/src/components/dialog/EmbeddedDialog.css
@@ -0,0 +1,14 @@
+.embedded-dialog {
+ display: flex;
+ background-color: var(--background-color);
+ position: relative;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+.embedded-dialog-message {
+ white-space: pre-wrap;
+ text-align: center;
+}
diff --git a/src/components/dialog/EmbeddedDialog.js b/src/components/dialog/EmbeddedDialog.js
new file mode 100644
index 0000000..6f50c5e
--- /dev/null
+++ b/src/components/dialog/EmbeddedDialog.js
@@ -0,0 +1,15 @@
+import './EmbeddedDialog.css';
+
+const EmbeddedDialog = (props) => {
+ const {message} = props;
+
+ return (
+
+ );
+};
+
+export default EmbeddedDialog;
\ No newline at end of file
diff --git a/src/components/dialog/utils/getDialogComponent.js b/src/components/dialog/utils/getDialogComponent.js
new file mode 100644
index 0000000..abce0f4
--- /dev/null
+++ b/src/components/dialog/utils/getDialogComponent.js
@@ -0,0 +1,15 @@
+import { cloneElement } from 'react';
+import Dialog from '../Dialog';
+import EmbeddedDialog from '../EmbeddedDialog';
+
+export const getDialogComponent = (dialog, onClose, ref, isEmbedded) => {
+ if (dialog.customComponent) {
+ return cloneElement(dialog.customComponent, { onClose, ref });
+ }
+
+ if (isEmbedded) {
+ return ;
+ }
+
+ return ;
+}
\ No newline at end of file