-
Notifications
You must be signed in to change notification settings - Fork 2
/
ActivityCenter.tsx
78 lines (71 loc) · 2.57 KB
/
ActivityCenter.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
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Notification
*/
import classnames from "classnames";
import * as React from "react";
import type { CommonProps } from "@itwin/core-react";
import { Centered } from "@itwin/core-react";
import { MessageManager } from "../messages/MessageManager";
import type { NotifyMessageType } from "../messages/ReactNotifyMessageDetails";
import { ProgressLinear, Text } from "@itwin/itwinui-react";
import { useTranslation } from "../hooks/useTranslation";
/** Activity Center Field React component.
* @public
*/
export function ActivityCenterField(props: CommonProps) {
const { translate } = useTranslation();
const [message, setMessage] = React.useState<NotifyMessageType>("");
const [percentage, setPercentage] = React.useState<number>(0);
const [isVisible, setIsVisible] = React.useState<boolean>(true);
React.useEffect(() => {
return MessageManager.onActivityMessageUpdatedEvent.addListener((args) => {
setMessage(args.message);
setPercentage(args.percentage);
setIsVisible(true);
});
}, []);
React.useEffect(() => {
return MessageManager.onActivityMessageCancelledEvent.addListener(() => {
setIsVisible(false);
});
}, []);
const openActivityMessage = () => {
MessageManager.setupActivityMessageValues(message, percentage, true);
};
const isPercentageValid = percentage > 0 && percentage < 100;
if (!isVisible || !isPercentageValid) return null;
const moreDetails = translate("activityCenter.moreDetails");
// eslint-disable-next-line @typescript-eslint/no-base-to-string
const tooltip = `${message}-${moreDetails}`;
return (
// eslint-disable-next-line deprecation/deprecation
<Centered
className={classnames("open-activity-message", props.className)}
style={{
height: "100%",
minWidth: 120,
padding: "0 8px",
alignItems: "end",
...props.style,
}}
onClick={openActivityMessage}
title={tooltip}
>
<ProgressLinear
style={{
flex: "1",
}}
value={percentage}
labels={[
<Text variant="small" key={0}>
{percentage} {translate("activityCenter.percentComplete")}
</Text>,
]}
/>
</Centered>
);
}