39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { useSearchParams, Outlet } from "react-router"
|
|
import useRouterDialogRef from "./useRouterDialogRef"
|
|
import * as React from 'react'
|
|
import LazyChatFragment from "../chat-fragment/LazyChatFragment"
|
|
import useEventListener from "../../utils/useEventListener"
|
|
import useAsyncEffect from "../../utils/useAsyncEffect"
|
|
import sleep from "../../utils/sleep"
|
|
|
|
export default function ChatFragmentDialog() {
|
|
const [searchParams] = useSearchParams()
|
|
const id = searchParams.get('id')
|
|
|
|
const dialogRef = useRouterDialogRef()
|
|
|
|
useEventListener(dialogRef, 'open', () => {
|
|
const shadow = dialogRef.current!.shadowRoot as ShadowRoot
|
|
const panel = shadow.querySelector(".panel") as HTMLElement
|
|
panel.style.padding = '0'
|
|
panel.style.color = 'inherit'
|
|
panel.style.backgroundColor = 'rgb(var(--mdui-color-background))'
|
|
panel.style.setProperty('--mdui-color-background', 'inherit')
|
|
const body = shadow.querySelector(".body") as HTMLElement
|
|
body.style.height = '100%'
|
|
body.style.display = 'flex'
|
|
})
|
|
|
|
return (<>
|
|
<mdui-dialog fullscreen ref={dialogRef}>
|
|
<div style={{
|
|
display: 'flex',
|
|
width: '100%',
|
|
}}>
|
|
<LazyChatFragment chatId={id!} openedWithRouter={true} />
|
|
</div>
|
|
</mdui-dialog>
|
|
<Outlet />
|
|
</>)
|
|
}
|