2019-02-03 17:23:33 +07:00
|
|
|
import React from 'react';
|
2019-03-28 05:39:06 +07:00
|
|
|
|
|
|
|
import BugReport from '@material-ui/icons/BugReport';
|
2019-06-20 19:37:28 +07:00
|
|
|
import Grid from '@material-ui/core/Grid';
|
2019-03-28 05:39:06 +07:00
|
|
|
import HomeIcon from '@material-ui/icons/Home';
|
2019-06-20 19:37:28 +07:00
|
|
|
import ListItem from '@material-ui/core/ListItem';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-06 16:50:09 +07:00
|
|
|
import { PackageMetaInterface } from 'types/packageMeta';
|
2019-02-03 17:23:33 +07:00
|
|
|
import Tag from '../Tag';
|
2019-03-28 05:39:06 +07:00
|
|
|
import fileSizeSI from '../../utils/file-size';
|
2019-02-03 17:23:33 +07:00
|
|
|
import { formatDate, formatDateDistance } from '../../utils/package';
|
2019-10-03 23:17:04 +07:00
|
|
|
import Tooltip from '../../muiComponents/Tooltip';
|
2019-07-06 16:50:09 +07:00
|
|
|
import {
|
|
|
|
Author,
|
|
|
|
Avatar,
|
|
|
|
Description,
|
|
|
|
Details,
|
|
|
|
GridRightAligned,
|
|
|
|
Icon,
|
|
|
|
IconButton,
|
|
|
|
OverviewItem,
|
|
|
|
PackageList,
|
|
|
|
PackageListItemText,
|
|
|
|
PackageTitle,
|
|
|
|
Published,
|
|
|
|
TagContainer,
|
|
|
|
Text,
|
|
|
|
WrapperLink,
|
|
|
|
} from './styles';
|
|
|
|
import { isURL } from '../../utils/url';
|
2019-06-20 19:37:28 +07:00
|
|
|
interface Author {
|
|
|
|
name: string;
|
|
|
|
avatar?: string;
|
|
|
|
email?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Bugs {
|
|
|
|
url: string;
|
|
|
|
}
|
|
|
|
interface Dist {
|
|
|
|
unpackedSize: number;
|
|
|
|
}
|
|
|
|
|
2019-06-22 16:43:59 +07:00
|
|
|
export interface PackageInterface {
|
2019-06-20 19:37:28 +07:00
|
|
|
name: string;
|
|
|
|
version: string;
|
2019-06-22 16:43:59 +07:00
|
|
|
time?: number | string;
|
2019-06-20 19:37:28 +07:00
|
|
|
author: Author;
|
|
|
|
description?: string;
|
|
|
|
keywords?: string[];
|
2019-07-06 16:50:09 +07:00
|
|
|
license?: PackageMetaInterface['latest']['license'];
|
2019-06-20 19:37:28 +07:00
|
|
|
homepage?: string;
|
|
|
|
bugs?: Bugs;
|
|
|
|
dist?: Dist;
|
|
|
|
}
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-06-22 16:43:59 +07:00
|
|
|
const Package: React.FC<PackageInterface> = ({
|
2019-03-28 05:39:06 +07:00
|
|
|
author: { name: authorName, avatar: authorAvatar },
|
2019-06-20 19:37:28 +07:00
|
|
|
bugs,
|
2019-03-28 05:39:06 +07:00
|
|
|
description,
|
2019-06-20 19:37:28 +07:00
|
|
|
dist,
|
2019-03-28 05:39:06 +07:00
|
|
|
homepage,
|
|
|
|
keywords = [],
|
|
|
|
license,
|
|
|
|
name: packageName,
|
|
|
|
time,
|
|
|
|
version,
|
2019-06-20 19:37:28 +07:00
|
|
|
}) => {
|
|
|
|
const renderVersionInfo = (): React.ReactNode =>
|
2019-03-28 05:39:06 +07:00
|
|
|
version && (
|
|
|
|
<OverviewItem>
|
|
|
|
<Icon name={'version'} />
|
|
|
|
{`v${version}`}
|
|
|
|
</OverviewItem>
|
|
|
|
);
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderAuthorInfo = (): React.ReactNode =>
|
2019-03-28 05:39:06 +07:00
|
|
|
authorName && (
|
|
|
|
<Author>
|
|
|
|
<Avatar alt={authorName} src={authorAvatar} />
|
|
|
|
<Details>
|
|
|
|
<Text text={authorName} />
|
|
|
|
</Details>
|
|
|
|
</Author>
|
|
|
|
);
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderFileSize = (): React.ReactNode =>
|
|
|
|
dist &&
|
|
|
|
dist.unpackedSize && (
|
2019-03-28 05:39:06 +07:00
|
|
|
<OverviewItem>
|
|
|
|
<Icon name={'filebinary'} />
|
2019-06-20 19:37:28 +07:00
|
|
|
{fileSizeSI(dist.unpackedSize)}
|
2019-03-28 05:39:06 +07:00
|
|
|
</OverviewItem>
|
|
|
|
);
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderLicenseInfo = (): React.ReactNode =>
|
2019-02-03 17:23:33 +07:00
|
|
|
license && (
|
|
|
|
<OverviewItem>
|
2019-06-20 19:37:28 +07:00
|
|
|
<Icon name="law" />
|
2019-02-03 17:23:33 +07:00
|
|
|
{license}
|
|
|
|
</OverviewItem>
|
|
|
|
);
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderPublishedInfo = (): React.ReactNode =>
|
2019-03-28 05:39:06 +07:00
|
|
|
time && (
|
|
|
|
<OverviewItem>
|
2019-06-20 19:37:28 +07:00
|
|
|
<Icon name="time" />
|
2019-03-28 05:39:06 +07:00
|
|
|
<Published>{`Published on ${formatDate(time)} •`}</Published>
|
|
|
|
{`${formatDateDistance(time)} ago`}
|
|
|
|
</OverviewItem>
|
|
|
|
);
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderHomePageLink = (): React.ReactNode =>
|
2019-05-16 21:25:40 +07:00
|
|
|
homepage &&
|
|
|
|
isURL(homepage) && (
|
2019-03-28 05:39:06 +07:00
|
|
|
<a href={homepage} target={'_blank'}>
|
|
|
|
<Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
|
|
|
|
<IconButton aria-label={'Homepage'}>
|
|
|
|
{/* eslint-disable-next-line react/jsx-max-depth */}
|
|
|
|
<HomeIcon />
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
|
|
|
</a>
|
2019-02-03 17:23:33 +07:00
|
|
|
);
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderBugsLink = (): React.ReactNode =>
|
|
|
|
bugs &&
|
|
|
|
bugs.url &&
|
|
|
|
isURL(bugs.url) && (
|
|
|
|
<a href={bugs.url} target={'_blank'}>
|
2019-03-28 05:39:06 +07:00
|
|
|
<Tooltip aria-label={'Bugs'} title={'Open an issue'}>
|
|
|
|
<IconButton aria-label={'Bugs'}>
|
|
|
|
{/* eslint-disable-next-line react/jsx-max-depth */}
|
|
|
|
<BugReport />
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderPrimaryComponent = (): React.ReactNode => {
|
2019-03-28 05:39:06 +07:00
|
|
|
return (
|
|
|
|
<Grid container={true} item={true} xs={12}>
|
|
|
|
<Grid item={true} xs={true}>
|
|
|
|
<WrapperLink to={`/-/web/detail/${packageName}`}>
|
|
|
|
{/* eslint-disable-next-line react/jsx-max-depth */}
|
|
|
|
<PackageTitle>{packageName}</PackageTitle>
|
|
|
|
</WrapperLink>
|
|
|
|
</Grid>
|
|
|
|
<GridRightAligned item={true} xs={true}>
|
|
|
|
{renderHomePageLink()}
|
|
|
|
{renderBugsLink()}
|
|
|
|
</GridRightAligned>
|
|
|
|
</Grid>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderSecondaryComponent = (): React.ReactNode => {
|
|
|
|
// @ts-ignore
|
2019-03-28 05:39:06 +07:00
|
|
|
const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Description component={'span'}>{description}</Description>
|
|
|
|
{tags.length > 0 && <TagContainer>{tags}</TagContainer>}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const renderPackageListItemText = (): React.ReactNode => (
|
|
|
|
// @ts-ignore
|
|
|
|
<PackageListItemText className="package-link" component="div" primary={renderPrimaryComponent()} secondary={renderSecondaryComponent()} />
|
|
|
|
);
|
|
|
|
|
2019-02-03 17:23:33 +07:00
|
|
|
return (
|
2019-03-28 05:39:06 +07:00
|
|
|
<PackageList className={'package'}>
|
2019-06-20 19:37:28 +07:00
|
|
|
<ListItem alignItems={'flex-start'}>{renderPackageListItemText()}</ListItem>
|
2019-09-29 21:44:10 +07:00
|
|
|
<ListItem alignItems={'flex-start'}>
|
2019-03-28 05:39:06 +07:00
|
|
|
{renderAuthorInfo()}
|
|
|
|
{renderVersionInfo()}
|
|
|
|
{renderPublishedInfo()}
|
|
|
|
{renderFileSize()}
|
|
|
|
{renderLicenseInfo()}
|
2019-09-29 21:44:10 +07:00
|
|
|
</ListItem>
|
2019-03-28 05:39:06 +07:00
|
|
|
</PackageList>
|
2019-02-03 17:23:33 +07:00
|
|
|
);
|
|
|
|
};
|
2019-03-28 05:39:06 +07:00
|
|
|
|
2019-02-03 17:23:33 +07:00
|
|
|
export default Package;
|