Merge pull request #109 from performant-software/feature/archnet600_download_button

Archnet #600 - Download Button

Author: dleadbetter

src/semantic-ui/DownloadButton.js

@@ -1,32 +1,23 @@
 // @flow
 
-import React, { useState } from 'react';
+import React from 'react';
+import uuid from 'react-uuid';
 import { Button } from 'semantic-ui-react';
 
 type Props = {
+  filename?: string,
   url: string
 };
 
-const DownloadButton = ({ url, ...button }: Props) => {
-  const [loading, setLoading] = useState(false);
-
-  return (
+const DownloadButton = ({ filename, url, ...button }: Props) => (
+  <a
+    download={filename || uuid()}
+    href={url}
+  >
     <Button
       {...button}
-      loading={loading}
-      onClick={() => {
-        setLoading(true);
-        return fetch(url).then((response) => {
-          response.blob().then((blob) => {
-            const downloadUrl = window.URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = downloadUrl;
-            link.click();
-          });
-        }).finally(() => setLoading(false));
-      }}
     />
-  );
-};
+  </a>
+);
 
 export default DownloadButton;

stories/components/semantic-ui/DownloadButton.stories.js

@@ -16,3 +16,22 @@ export const Default = () => (
     url={image}
   />
 );
+
+export const LargeFile = () => (
+  <DownloadButton
+    content='Download'
+    icon='cloud download'
+    primary
+    url='https://speed.hetzner.de/100MB.bin'
+  />
+);
+
+export const WithFilename = () => (
+  <DownloadButton
+    content='Download'
+    filename='Test12345'
+    icon='cloud download'
+    primary
+    url={image}
+  />
+);