random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix height for SandboxFrame (#676)

This commit is contained in:
Tanuj Mittal 2021-04-14 16:56:53 -07:00 committed by GitHub
parent 5d4b193865
commit 6dba2e4792
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx
View File

@ -15,6 +15,7 @@ interface SandboxFrameState {
export class SandboxFrame extends React.PureComponent<SandboxFrameProps, SandboxFrameState> { export class SandboxFrame extends React.PureComponent<SandboxFrameProps, SandboxFrameState> {
private resizeObserver: ResizeObserver; private resizeObserver: ResizeObserver;
private mutationObserver: MutationObserver;
constructor(props: SandboxFrameProps) { constructor(props: SandboxFrameProps) {
super(props); super(props);
@ -43,22 +44,26 @@ export class SandboxFrame extends React.PureComponent<SandboxFrameProps, Sandbox
componentWillUnmount(): void { componentWillUnmount(): void {
this.resizeObserver?.disconnect(); this.resizeObserver?.disconnect();
this.mutationObserver?.disconnect();
} }
onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void { onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
const doc = (event.target as HTMLIFrameElement).contentDocument; const doc = (event.target as HTMLIFrameElement).contentDocument;
copyStyles(document, doc); copyStyles(document, doc);
this.setState({ this.setState({ frameBody: doc.body });
frameBody: doc.body,
frameHeight: doc.body.scrollHeight,
});
this.mutationObserver = new MutationObserver(() => {
const bodyFirstElementChild = this.state.frameBody?.firstElementChild;
if (!this.resizeObserver && bodyFirstElementChild) {
this.resizeObserver = new ResizeObserver(() => this.resizeObserver = new ResizeObserver(() =>
this.setState({ this.setState({
frameHeight: this.state.frameBody.scrollHeight, frameHeight: this.state.frameBody?.firstElementChild.scrollHeight,
}) })
); );
this.resizeObserver.observe(doc.body); this.resizeObserver.observe(bodyFirstElementChild);
}
});
this.mutationObserver.observe(doc.body, { childList: true });
} }
} }