-
Notifications
You must be signed in to change notification settings - Fork 2
/
GlobalDialog.tsx
97 lines (87 loc) · 3.07 KB
/
GlobalDialog.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Dialog
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import type { DialogProps } from "./Dialog";
import { Dialog } from "./Dialog";
/** Properties for the [[GlobalDialog]] component
* @public
* @deprecated in 4.12.x. Props of deprecated component {@link GlobalDialog}.
*/
// eslint-disable-next-line deprecation/deprecation
export interface GlobalDialogProps extends DialogProps {
identifier?: string;
}
/** State properties for the [[GlobalDialog]] component
* @public
* @deprecated in 4.12.x. State of deprecated component {@link GlobalDialog}.
*/
export interface GlobalDialogState {
parentDocument: Document | null;
}
/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
* @public
* @deprecated in 4.12.x. Use {@link https://itwinui.bentley.com/docs/dialog iTwinUI dialog} instead.
*/
export class GlobalDialog extends React.Component<
// eslint-disable-next-line deprecation/deprecation
GlobalDialogProps,
// eslint-disable-next-line deprecation/deprecation
GlobalDialogState
> {
private _container?: HTMLDivElement;
// eslint-disable-next-line deprecation/deprecation
public override readonly state: GlobalDialogState = {
parentDocument: null,
};
// eslint-disable-next-line deprecation/deprecation
constructor(props: GlobalDialogProps) {
super(props);
}
private _handleRefSet = (popupDiv: HTMLElement | null) => {
const parentDocument = popupDiv?.ownerDocument ?? null;
if (parentDocument) {
this._container = parentDocument.createElement("div");
this._container.id =
this.props.identifier !== undefined
? `dialog-${this.props.identifier}`
: "core-dialog";
let rt = parentDocument.getElementById(
"core-dialog-root"
) as HTMLDivElement;
if (!rt) {
rt = parentDocument.createElement("div");
rt.id = "core-dialog-root";
parentDocument.body.appendChild(rt);
}
rt.appendChild(this._container);
// used to support component rendering in pop-out window
this.setState({ parentDocument });
}
};
public override componentWillUnmount() {
// istanbul ignore else
if (this._container && this._container.parentElement) {
// cleanup
this._container.parentElement.removeChild(this._container);
}
}
public override render(): React.ReactNode {
const { identifier, ...props } = this.props;
return (
<div ref={this._handleRefSet}>
{this.state.parentDocument &&
ReactDOM.createPortal(
// eslint-disable-next-line deprecation/deprecation
<Dialog {...props} />,
this.state.parentDocument.body
)}
</div>
);
}
}