-
Notifications
You must be signed in to change notification settings - Fork 2
/
StatusBar.tsx
123 lines (113 loc) · 3.42 KB
/
StatusBar.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
116
117
118
119
120
121
122
123
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module StatusBar
*/
import type { CommonDivProps, CommonProps } from "@itwin/core-react";
import { Div } from "@itwin/core-react";
import * as React from "react";
import classnames from "classnames";
import { UiFramework } from "../UiFramework";
import { SafeAreaContext } from "../safearea/SafeAreaContext";
import { StatusBarField } from "./Field";
import { StatusBarPopup } from "./popup/Popup";
import "./StatusBar.scss";
import type { StatusBarWidgetControl } from "./StatusBarWidgetControl";
import { SafeAreaInsetsHelpers } from "../layout/base/SafeAreaInsets";
import { DockedBar } from "../widget-panels/DockedBar";
/** Properties for the [[StatusBar]] React component
* @public
*/
export interface StatusBarProps extends CommonProps {
children?: React.ReactNode;
widgetControl?: StatusBarWidgetControl;
}
/** Status Bar React component.
* @public
*/
export function StatusBar(props: StatusBarProps) {
const safeAreaInsets = React.useContext(SafeAreaContext);
const className = classnames(
"uifw-statusBar",
safeAreaInsets && SafeAreaInsetsHelpers.getCssClassNames(safeAreaInsets),
props.className
);
return (
<DockedBar
placement="bottom"
className={className}
style={props.style}
onMouseEnter={UiFramework.visibility.handleWidgetMouseEnter}
>
{props.widgetControl?.getReactNode?.() ?? null}
{props.children}
</DockedBar>
);
}
/** StatusBar With Space Between Items React functional component
* @public
*/
export function StatusBarSpaceBetween(props: CommonDivProps) {
const { className, ...divProps } = props;
return (
// eslint-disable-next-line deprecation/deprecation
<Div
{...divProps}
mainClassName={className ? className : "uifw-statusbar-space-between"}
/>
);
}
/** StatusBar Left Section React functional component
* @public
*/
export function StatusBarLeftSection(props: CommonDivProps) {
const { className, ...divProps } = props;
return (
// eslint-disable-next-line deprecation/deprecation
<Div
{...divProps}
mainClassName={className ? className : "uifw-statusbar-left"}
/>
);
}
/** StatusBar Center Section React functional component
* @public
*/
export function StatusBarCenterSection(props: CommonDivProps) {
const { className, ...divProps } = props;
return (
// eslint-disable-next-line deprecation/deprecation
<Div
{...divProps}
mainClassName={className ? className : "uifw-statusbar-center"}
/>
);
}
/** StatusBar Right Section React functional component
* @public
*/
export function StatusBarRightSection(props: CommonDivProps) {
const { className, ...divProps } = props;
return (
// eslint-disable-next-line deprecation/deprecation
<Div
{...divProps}
mainClassName={className ? className : "uifw-statusbar-right"}
/>
);
}
/** Components used in a [[StatusBar]].
* @public
*/
export namespace StatusBar {
/** Field of a [[StatusBar]].
* @beta
*/
export const Field = StatusBarField;
/** Popup of a [[StatusBar]].
* @beta
*/
export const Popup = StatusBarPopup;
}