Merge pull request #1080 from datopian/changeset-release/main

Version Packages

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/components
 
+## 0.5.8
+
+### Patch Changes
+
+- [#1079](https://github.com/datopian/portaljs/pull/1079) [`058d2367`](https://github.com/datopian/portaljs/commit/058d23678a024890f8a6d909ded9fc8fc11cf145) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Changed the download behaviour of the bucket viewer component and removed loading component while downloading
+
 ## 0.5.7
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [

packages/components/src/components/BucketViewer.tsx

@@ -10,7 +10,6 @@ export interface BucketViewerProps {
   onLoadTotalNumberOfItems?: (total: number) => void;
   domain: string;
   downloadConfig?: {
-    downloadingMessageComponent?: ReactNode;
     hoverOfTheFileComponent?: ReactNode;
   };
   suffix?: string;
@@ -47,14 +46,10 @@ export function BucketViewer({
 }: BucketViewerProps) {
   suffix = suffix ?? '/';
 
-  const { downloadingMessageComponent, hoverOfTheFileComponent } =
+  const { hoverOfTheFileComponent } = downloadConfig ?? {};
-    downloadConfig ?? {};
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] =
     useState(-1);
-  const [showDownloadLoadingOnFile, setShowDownloadLoadingOnFile] = useState(
-    new Map<string, boolean>()
-  );
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [lastPage, setLastPage] = useState<number>(0);
   const [bucketFiles, setBucketFiles] = useState<BucketViewerData[]>([]);
@@ -136,31 +131,13 @@ export function BucketViewer({
         (data, i) => (
           <ul
             onClick={() => {
-              const anchorId = `download_anchor_${data.fileName} `;
+              const a: HTMLAnchorElement = document.createElement('a');
-              const a: HTMLAnchorElement =
+              a.href = data.downloadFileUri;
-                (document.getElementById(
+              a.target = `_blank`;
-                  anchorId
+              a.download = data.fileName;
-                ) as HTMLAnchorElement | null) ?? document.createElement('a');
+              document.body.appendChild(a);
-              a.id = anchorId;
+              a.click();
-              if (a.download) a.click();
+              document.removeChild(a);
-              else {
-                setShowDownloadLoadingOnFile((lastState) => {
-                  lastState.set(data.fileName, true);
-                  return new Map(lastState);
-                });
-                fetch(data.downloadFileUri)
-                  .then((res) => res.blob())
-                  .then((res) => {
-                    setShowDownloadLoadingOnFile((lastState) => {
-                      lastState.set(data.fileName, false);
-                      return new Map(lastState);
-                    });
-                    a.href = URL.createObjectURL(res);
-                    a.download = res.name ?? data.fileName;
-                    document.body.appendChild(a);
-                    a.click();
-                  });
-              }
             }}
             key={i}
             onMouseEnter={() => setShowDownloadComponentOnLine(i)}
@@ -184,13 +161,6 @@ export function BucketViewer({
                   <></>
                 )}
               </div>
-              {showDownloadLoadingOnFile.get(data.fileName) ? (
-                downloadingMessageComponent ?? (
-                  <label>Downloading file...</label>
-                )
-              ) : (
-                <></>
-              )}
             </div>
           </ul>
         )

packages/components/stories/BucketViewer.stories.ts

@@ -95,23 +95,3 @@ export const WithComponentOnHoverOfEachBucketFile: Story = {
     },
   },
 };
-
-export const WithLoadingComponentWhileDownloadTheBucketFile: Story = {
-  name: 'With loading component while download the bucket file',
-  args: {
-    domain: 'https://ssen-smart-meter.datopian.workers.dev',
-    suffix: '/',
-    downloadConfig: { downloadingMessageComponent: 'COMPONENT....' },
-    dataMapperFn: async (rawData: Response) => {
-      const result = await rawData.json();
-      return result.objects.map((e) => ({
-        downloadFileUri: e.downloadLink,
-        fileName: e.key.replace(/^(\w+\/)/g, ''),
-        dateProps: {
-          date: new Date(e.uploaded),
-          dateFormatter: (date) => date.toLocaleDateString(),
-        },
-      }));
-    },
-  },
-};