524ef0812c
Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import {
|
|
IconButton,
|
|
Menu,
|
|
MenuButton,
|
|
MenuButtonProps,
|
|
MenuItem,
|
|
MenuList,
|
|
} from '@chakra-ui/react'
|
|
import assert from 'assert'
|
|
import { DownloadIcon, MoreVerticalIcon } from 'assets/icons'
|
|
import { useTypebot } from 'contexts/TypebotContext'
|
|
import React, { useState } from 'react'
|
|
import { parseDefaultPublicId } from 'services/typebots'
|
|
|
|
export const BoardMenuButton = (props: MenuButtonProps) => {
|
|
const { typebot } = useTypebot()
|
|
const [isDownloading, setIsDownloading] = useState(false)
|
|
|
|
const downloadFlow = () => {
|
|
assert(typebot)
|
|
setIsDownloading(true)
|
|
const data =
|
|
'data:application/json;charset=utf-8,' +
|
|
encodeURIComponent(JSON.stringify(typebot))
|
|
const fileName = `typebot-export-${parseDefaultPublicId(
|
|
typebot.name,
|
|
typebot.id
|
|
)}.json`
|
|
const linkElement = document.createElement('a')
|
|
linkElement.setAttribute('href', data)
|
|
linkElement.setAttribute('download', fileName)
|
|
linkElement.click()
|
|
setIsDownloading(false)
|
|
}
|
|
return (
|
|
<Menu>
|
|
<MenuButton
|
|
as={IconButton}
|
|
variant="outline"
|
|
colorScheme="blue"
|
|
icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
|
|
isLoading={isDownloading}
|
|
size="sm"
|
|
{...props}
|
|
/>
|
|
<MenuList>
|
|
<MenuItem icon={<DownloadIcon />} onClick={downloadFlow}>
|
|
Export flow
|
|
</MenuItem>
|
|
</MenuList>
|
|
</Menu>
|
|
)
|
|
}
|