-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Exitter.tsx
64 lines (59 loc) · 2 KB
/
Exitter.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
import ReactFocusLock from "react-focus-lock";
import { mpMenu } from "cfx/apps/mpMenu/mpMenu";
import { $L } from "cfx/common/services/intl/l10n";
import { Button, ButtonTheme } from "cfx/ui/Button/Button";
import { Icons } from "cfx/ui/Icons";
import { Flex } from "cfx/ui/Layout/Flex/Flex";
import { AfterTitleOutlet } from "cfx/ui/outlets";
import { Text } from "cfx/ui/Text/Text";
import { Title } from "cfx/ui/Title/Title";
import { useOpenFlag } from "cfx/utils/hooks";
import { NavBarState } from "../NavBarState";
import s from './Exitter.module.scss';
export function Exitter() {
const [confirmerOpen, openConfirmer, closeConfirmer] = useOpenFlag(false);
const buttonTheme: ButtonTheme = NavBarState.forceTransparentNav
? 'default'
: 'default-blurred';
return (
<>
<Title fixedOn="bottom-right" title={$L('#ExitToDesktop')}>
<Button
size="large"
icon={Icons.exit}
theme={buttonTheme}
onClick={openConfirmer}
/>
</Title>
{confirmerOpen && (
<AfterTitleOutlet>
<div className={s.root}>
<div className={s.wrapper}>
<ReactFocusLock disabled={!confirmerOpen}>
<Flex centered="axis" gap="xlarge">
<Text size="xxlarge">
{$L('#ExitToDesktopConfirmation')}
</Text>
<Flex gap="large">
<Button
theme="default-blurred"
size="large"
text={$L('#ExitToDesktop')}
onClick={mpMenu.exit}
/>
<Button
theme="primary"
size="large"
text={$L('#ExitToDesktopConfirmationCancel')}
onClick={closeConfirmer}
/>
</Flex>
</Flex>
</ReactFocusLock>
</div>
</div>
</AfterTitleOutlet>
)}
</>
);
}