diff options
Diffstat (limited to 'subprojects/frontend/src/editor/ConnectButton.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/ConnectButton.tsx | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx new file mode 100644 index 00000000..52e7b854 --- /dev/null +++ b/subprojects/frontend/src/editor/ConnectButton.tsx | |||
@@ -0,0 +1,68 @@ | |||
1 | import CloudIcon from '@mui/icons-material/Cloud'; | ||
2 | import CloudOffIcon from '@mui/icons-material/CloudOff'; | ||
3 | import SyncIcon from '@mui/icons-material/Sync'; | ||
4 | import SyncProblemIcon from '@mui/icons-material/SyncProblem'; | ||
5 | import IconButton from '@mui/material/IconButton'; | ||
6 | import { keyframes, styled } from '@mui/material/styles'; | ||
7 | import { observer } from 'mobx-react-lite'; | ||
8 | import React from 'react'; | ||
9 | |||
10 | import type EditorStore from './EditorStore'; | ||
11 | |||
12 | const rotateKeyframe = keyframes` | ||
13 | 0% { | ||
14 | transform: rotate(0deg); | ||
15 | } | ||
16 | 100% { | ||
17 | transform: rotate(-360deg); | ||
18 | } | ||
19 | `; | ||
20 | |||
21 | const AnimatedSyncIcon = styled(SyncIcon)` | ||
22 | animation: ${rotateKeyframe} 1.4s linear infinite; | ||
23 | `; | ||
24 | |||
25 | export default observer(function ConnectButton({ | ||
26 | editorStore, | ||
27 | }: { | ||
28 | editorStore: EditorStore | undefined; | ||
29 | }): JSX.Element { | ||
30 | if ( | ||
31 | editorStore !== undefined && | ||
32 | (editorStore.opening || editorStore.opened) | ||
33 | ) { | ||
34 | return ( | ||
35 | <IconButton | ||
36 | onClick={() => editorStore.disconnect()} | ||
37 | aria-label="Disconnect" | ||
38 | color="inherit" | ||
39 | > | ||
40 | {editorStore.opening ? ( | ||
41 | <AnimatedSyncIcon fontSize="small" /> | ||
42 | ) : ( | ||
43 | <CloudIcon fontSize="small" /> | ||
44 | )} | ||
45 | </IconButton> | ||
46 | ); | ||
47 | } | ||
48 | |||
49 | let disconnectedIcon: JSX.Element; | ||
50 | if (editorStore === undefined) { | ||
51 | disconnectedIcon = <SyncIcon fontSize="small" />; | ||
52 | } else if (editorStore.connectionErrors.length > 0) { | ||
53 | disconnectedIcon = <SyncProblemIcon fontSize="small" />; | ||
54 | } else { | ||
55 | disconnectedIcon = <CloudOffIcon fontSize="small" />; | ||
56 | } | ||
57 | |||
58 | return ( | ||
59 | <IconButton | ||
60 | disabled={editorStore === undefined} | ||
61 | onClick={() => editorStore?.connect()} | ||
62 | aria-label="Connect" | ||
63 | color="inherit" | ||
64 | > | ||
65 | {disconnectedIcon} | ||
66 | </IconButton> | ||
67 | ); | ||
68 | }); | ||