feat: added download tarball button at list (#237)

* chore: added download button at packagelist

* feat: added download btn in package list
This commit is contained in:
Anix 2019-11-07 22:41:08 +05:30 committed by Juan Picado @jotadeveloper
parent 84257e1a84
commit bdef686914

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import BugReport from '@material-ui/icons/BugReport'; import BugReport from '@material-ui/icons/BugReport';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta'; import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
@ -8,6 +9,7 @@ import fileSizeSI from '../../utils/file-size';
import { formatDate, formatDateDistance } from '../../utils/package'; import { formatDate, formatDateDistance } from '../../utils/package';
import Tooltip from '../../muiComponents/Tooltip'; import Tooltip from '../../muiComponents/Tooltip';
import { isURL } from '../../utils/url'; import { isURL } from '../../utils/url';
import { downloadHandler } from '../ActionBar/ActionBar';
import ListItem from '../../muiComponents/ListItem'; import ListItem from '../../muiComponents/ListItem';
import Grid from '../../muiComponents/Grid'; import Grid from '../../muiComponents/Grid';
@ -34,6 +36,7 @@ interface Bugs {
} }
interface Dist { interface Dist {
unpackedSize: number; unpackedSize: number;
tarball: string;
} }
export interface PackageInterface { export interface PackageInterface {
@ -132,6 +135,21 @@ const Package: React.FC<PackageInterface> = ({
</a> </a>
); );
const renderDownloadLink = (): React.ReactNode =>
dist &&
dist.tarball &&
isURL(dist.tarball) && (
// eslint-disable-next-line
<a onClick={() => downloadHandler(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
<Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
<IconButton aria-label={'Download'}>
{/* eslint-disable-next-line react/jsx-max-depth */}
<DownloadIcon />
</IconButton>
</Tooltip>
</a>
);
const renderPrimaryComponent = (): React.ReactNode => { const renderPrimaryComponent = (): React.ReactNode => {
return ( return (
<Grid container={true} item={true} xs={12}> <Grid container={true} item={true} xs={12}>
@ -144,6 +162,7 @@ const Package: React.FC<PackageInterface> = ({
<GridRightAligned item={true} xs={true}> <GridRightAligned item={true} xs={true}>
{renderHomePageLink()} {renderHomePageLink()}
{renderBugsLink()} {renderBugsLink()}
{renderDownloadLink()}
</GridRightAligned> </GridRightAligned>
</Grid> </Grid>
); );