/
ConfigurableUiContent.tsx
115 lines (106 loc) · 4.02 KB
/
ConfigurableUiContent.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module ConfigurableUi
*/
import "./ConfigurableUiContent.scss";
import * as React from "react";
import type { CommonProps } from "@itwin/core-react";
import { Point } from "@itwin/core-react";
import { ThemeProvider } from "@itwin/itwinui-react";
import { CursorInformation } from "../cursor/CursorInformation";
import { CursorPopupMenu } from "../cursor/cursormenu/CursorMenu";
import { CursorPopupRenderer } from "../cursor/cursorpopup/CursorPopupManager";
import { ModalDialogRenderer } from "../dialog/ModalDialogManager";
import { ModelessDialogRenderer } from "../dialog/ModelessDialogManager";
import { ElementTooltip } from "../feedback/ElementTooltip";
import { KeyboardShortcutMenu } from "../keyboardshortcut/KeyboardShortcutMenu";
import { InputFieldMessage } from "../messages/InputField";
import { PointerMessage } from "../messages/Pointer";
import { PopupRenderer } from "../popup/PopupManager";
import { WidgetPanelsFrontstage } from "../widget-panels/Frontstage";
import { ContentDialogRenderer } from "../dialog/ContentDialogManager";
import { UiFramework } from "../UiFramework";
import { InternalConfigurableUiManager } from "./InternalConfigurableUiManager";
import { MessageRenderer } from "../messages/MessageRenderer";
// cSpell:ignore cursormenu cursorpopup
/** Properties for [[ConfigurableUiContent]]
* @public
*/
export interface ConfigurableUiContentProps extends CommonProps {
/** React node of the Backstage */
appBackstage?: React.ReactNode;
/** @internal */
idleTimeout?: number;
/** @internal */
intervalTimeout?: number;
}
/**
* Allows children to get the bounds or other properties of the wrapper element.
* @internal
*/
export const WrapperContext = React.createContext<HTMLElement>(document.body);
/** The ConfigurableUiContent component is the component the pages specified using ConfigurableUi
* @public
*/
export function ConfigurableUiContent(props: ConfigurableUiContentProps) {
const [mainElement, setMainElement] = React.useState<HTMLElement | null>(
null
);
const [portalContainer, setPortalContainer] = React.useState<
HTMLElement | undefined
>();
React.useEffect(() => {
UiFramework.keyboardShortcuts.setFocusToHome();
}, []);
React.useEffect(() => {
InternalConfigurableUiManager.activityTracker.initialize({
idleTimeout: props.idleTimeout,
intervalTimeout: props.intervalTimeout,
});
return () => {
InternalConfigurableUiManager.activityTracker.terminate();
};
}, [props.idleTimeout, props.intervalTimeout]);
const handleMouseMove = React.useCallback((e: React.MouseEvent) => {
const point = new Point(e.pageX, e.pageY);
CursorInformation.handleMouseMove(point);
}, []);
return (
<main
role="main"
id="uifw-configurableui-wrapper"
className={props.className}
style={props.style}
onMouseMove={handleMouseMove}
ref={setMainElement}
>
<WrapperContext.Provider value={mainElement!}>
<ThemeProvider
style={{ height: "100%" }}
portalContainer={portalContainer}
>
{props.appBackstage}
<WidgetPanelsFrontstage />
<ContentDialogRenderer />
<ModelessDialogRenderer />
<ModalDialogRenderer />
<ElementTooltip />
<PointerMessage />
<KeyboardShortcutMenu />
<InputFieldMessage />
<CursorPopupMenu />
<CursorPopupRenderer />
<PopupRenderer />
<MessageRenderer />
</ThemeProvider>
</WrapperContext.Provider>
<div
className="uifw-configurableui-portalContainer"
ref={(instance) => setPortalContainer(instance ?? undefined)}
/>
</main>
);
}