src/components/input/DownloadButton.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

import { Button, Icon, Tooltip, TooltipTrigger } from '@umami/react-zen';
import Papa from 'papaparse';
import { useMessages } from '@/components/hooks';
import { Download } from '@/components/icons';

export function DownloadButton({
  filename = 'data',
  data,
}: {
  filename?: string;
  data?: any;
  onClick?: () => void;
}) {
  const { formatMessage, labels } = useMessages();

  const handleClick = async () => {
    downloadCsv(`${filename}.csv`, Papa.unparse(data));
  };

  return (
    <TooltipTrigger delay={0}>
      <Button variant="quiet" onClick={handleClick} isDisabled={!data || data.length === 0}>
        <Icon>
          <Download />
        </Icon>
      </Button>
      <Tooltip>{formatMessage(labels.download)}</Tooltip>
    </TooltipTrigger>
  );
}

function downloadCsv(filename: string, data: any) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();

  URL.revokeObjectURL(url);
}