Fix event viewer positioning

This commit is contained in:
Robert Long 2021-09-16 15:18:58 -07:00
parent d514f682d3
commit 37e0ad9f58

View file

@ -15,6 +15,7 @@ limitations under the License.
*/ */
import React, { useCallback, useEffect, useRef, useState } from "react"; import React, { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import ColorHash from "color-hash"; import ColorHash from "color-hash";
import classNames from "classnames"; import classNames from "classnames";
import styles from "./DevTools.module.css"; import styles from "./DevTools.module.css";
@ -221,7 +222,7 @@ function EventViewer({ event, onClose }) {
const { call_id, invitee } = event.getContent(); const { call_id, invitee } = event.getContent();
const json = event.toJSON(); const json = event.toJSON();
return ( return createPortal(
<div className={styles.eventViewer}> <div className={styles.eventViewer}>
<p>Event Type: {type}</p> <p>Event Type: {type}</p>
<p>Sender: {sender}</p> <p>Sender: {sender}</p>
@ -238,6 +239,7 @@ function EventViewer({ event, onClose }) {
<p>Raw Event:</p> <p>Raw Event:</p>
<pre className={styles.content}>{JSON.stringify(json, undefined, 2)}</pre> <pre className={styles.content}>{JSON.stringify(json, undefined, 2)}</pre>
<button onClick={onClose}>Close</button> <button onClick={onClose}>Close</button>
</div> </div>,
document.body
); );
} }