diff --git a/.changeset/proud-schools-rhyme.md b/.changeset/proud-schools-rhyme.md new file mode 100644 index 00000000..b4ed940f --- /dev/null +++ b/.changeset/proud-schools-rhyme.md @@ -0,0 +1,5 @@ +--- +'@portaljs/components': patch +--- + +Changed the download behaviour of the bucket viewer component and removed loading component while downloading diff --git a/packages/components/src/components/BucketViewer.tsx b/packages/components/src/components/BucketViewer.tsx index c3dd60bc..2a0bf1e1 100644 --- a/packages/components/src/components/BucketViewer.tsx +++ b/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 } = - downloadConfig ?? {}; + const { hoverOfTheFileComponent } = downloadConfig ?? {}; const [isLoading, setIsLoading] = useState(false); const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] = useState(-1); - const [showDownloadLoadingOnFile, setShowDownloadLoadingOnFile] = useState( - new Map() - ); const [currentPage, setCurrentPage] = useState(0); const [lastPage, setLastPage] = useState(0); const [bucketFiles, setBucketFiles] = useState([]); @@ -136,31 +131,13 @@ export function BucketViewer({ (data, i) => (
    { - const anchorId = `download_anchor_${data.fileName} `; - const a: HTMLAnchorElement = - (document.getElementById( - anchorId - ) as HTMLAnchorElement | null) ?? document.createElement('a'); - a.id = anchorId; - if (a.download) a.click(); - 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(); - }); - } + const a: HTMLAnchorElement = document.createElement('a'); + a.href = data.downloadFileUri; + a.target = `_blank`; + a.download = data.fileName; + document.body.appendChild(a); + a.click(); + document.removeChild(a); }} key={i} onMouseEnter={() => setShowDownloadComponentOnLine(i)} @@ -184,13 +161,6 @@ export function BucketViewer({ <> )} - {showDownloadLoadingOnFile.get(data.fileName) ? ( - downloadingMessageComponent ?? ( - - ) - ) : ( - <> - )}
) diff --git a/packages/components/stories/BucketViewer.stories.ts b/packages/components/stories/BucketViewer.stories.ts index 0b151c9f..893fbb2e 100644 --- a/packages/components/stories/BucketViewer.stories.ts +++ b/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(), - }, - })); - }, - }, -};