82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import {
|
|
HStack,
|
|
Button,
|
|
Fade,
|
|
Tag,
|
|
Text,
|
|
useDisclosure,
|
|
} from '@chakra-ui/react'
|
|
import { DownloadIcon, TrashIcon } from 'assets/icons'
|
|
import { ConfirmModal } from 'components/modals/ConfirmModal'
|
|
import React from 'react'
|
|
|
|
type ResultsActionButtonsProps = {
|
|
totalSelected: number
|
|
isDeleteLoading: boolean
|
|
isExportLoading: boolean
|
|
onDeleteClick: () => Promise<void>
|
|
onExportClick: () => void
|
|
}
|
|
|
|
export const ResultsActionButtons = ({
|
|
totalSelected,
|
|
isDeleteLoading,
|
|
isExportLoading,
|
|
onDeleteClick,
|
|
onExportClick,
|
|
}: ResultsActionButtonsProps) => {
|
|
const { isOpen, onOpen, onClose } = useDisclosure()
|
|
return (
|
|
<HStack>
|
|
<Fade in={totalSelected > 0} unmountOnExit>
|
|
<HStack
|
|
as={Button}
|
|
colorScheme="blue"
|
|
onClick={onExportClick}
|
|
isLoading={isExportLoading}
|
|
>
|
|
<DownloadIcon />
|
|
<Text>Export</Text>
|
|
|
|
<Tag colorScheme="blue" variant="subtle" size="sm">
|
|
{totalSelected}
|
|
</Tag>
|
|
</HStack>
|
|
</Fade>
|
|
|
|
<Fade in={totalSelected > 0} unmountOnExit>
|
|
<HStack
|
|
as={Button}
|
|
colorScheme="red"
|
|
onClick={onOpen}
|
|
isLoading={isDeleteLoading}
|
|
>
|
|
<TrashIcon />
|
|
<Text>Delete</Text>
|
|
{totalSelected > 0 && (
|
|
<Tag colorScheme="red" variant="subtle" size="sm">
|
|
{totalSelected}
|
|
</Tag>
|
|
)}
|
|
</HStack>
|
|
<ConfirmModal
|
|
isOpen={isOpen}
|
|
onConfirm={onDeleteClick}
|
|
onClose={onClose}
|
|
message={
|
|
<Text>
|
|
You are about to delete{' '}
|
|
<strong>
|
|
{totalSelected} submission
|
|
{totalSelected > 1 ? 's' : ''}
|
|
</strong>
|
|
. Are you sure you wish to continue?
|
|
</Text>
|
|
}
|
|
confirmButtonLabel={'Delete'}
|
|
/>
|
|
</Fade>
|
|
</HStack>
|
|
)
|
|
}
|