/
ActionsMenu.tsx
124 lines (116 loc) · 3.28 KB
/
ActionsMenu.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
124
import {
As,
Icon,
IconButton,
Menu,
MenuButton,
MenuDivider,
MenuItem,
MenuList,
MenuListProps,
} from '@chakra-ui/react'
import { ActionsProvider, Button } from '@vocdoni/chakra-components'
import { useActions, useClient, useElection } from '@vocdoni/react-providers'
import { ElectionStatus } from '@vocdoni/sdk'
import { useTranslation } from 'react-i18next'
import { FaCog } from 'react-icons/fa'
import { RiCloseCircleLine, RiPauseCircleLine, RiPlayCircleLine, RiStopCircleLine } from 'react-icons/ri'
export const ActionsMenu = (props: MenuListProps) => {
const { account } = useClient()
const { election } = useElection()
if (!election || (election && election?.organizationId !== account?.address)) return null
// canceled and ended elections cannot be acted upon
if ([ElectionStatus.CANCELED, ElectionStatus.ENDED, ElectionStatus.RESULTS].includes(election.status)) return null
return (
<Menu closeOnSelect={false}>
<MenuButton as={IconButton} aria-label='Actions' icon={<FaCog />} variant='ghost' />
<ActionsProvider>
<ActionsMenuList {...props} />
</ActionsProvider>
</Menu>
)
}
const ActionsMenuList = (props: MenuListProps) => {
const { t } = useTranslation()
const { election } = useElection()
const { cancel, end, pause, resume, loading } = useActions()
if (!election) return null
return (
<MenuList p={0}>
{election.status === ElectionStatus.PAUSED && (
<MenuItem
as={Button}
leftIcon={<ActionIcon icon={RiPlayCircleLine} />}
onClick={resume}
justifyContent='start'
isLoading={loading.continue}
variant=''
sx={{
'& span': {
display: 'flex',
alignItems: 'center',
},
}}
>
{t('process_actions.start')}
</MenuItem>
)}
{election.status === ElectionStatus.ONGOING && (
<MenuItem
as={Button}
leftIcon={<ActionIcon icon={RiPauseCircleLine} />}
onClick={pause}
justifyContent='start'
isLoading={loading.pause}
variant=''
sx={{
'& span': {
display: 'flex',
alignItems: 'center',
},
}}
>
{t('process_actions.pause')}
</MenuItem>
)}
<MenuItem
as={Button}
leftIcon={<ActionIcon icon={RiStopCircleLine} />}
onClick={end}
justifyContent='start'
isLoading={loading.end}
variant='solid'
colorScheme='gray'
sx={{
'& span': {
display: 'flex',
alignItems: 'center',
},
}}
>
{t('process_actions.end')}
</MenuItem>
<MenuDivider m={1} />
<MenuItem
as={Button}
leftIcon={<ActionIcon icon={RiCloseCircleLine} />}
onClick={cancel}
justifyContent='start'
isLoading={loading.cancel}
variant='solid'
colorScheme='gray'
sx={{
'& span': {
display: 'flex',
alignItems: 'center',
},
}}
>
{t('process_actions.cancel')}
</MenuItem>
</MenuList>
)
}
const ActionIcon = ({ icon }: { icon: As }) => {
return <Icon as={icon} w={6} h={6} />
}