verdaccio-ui/src/webui/components/Package/index.js

162 lines
4.0 KiB
JavaScript
Raw Normal View History

2019-02-03 17:23:33 +07:00
/**
* @prettier
* @flow
*/
import React from 'react';
import type { Element } from 'react';
2019-03-28 05:39:06 +07:00
import BugReport from '@material-ui/icons/BugReport';
import Grid from '@material-ui/core/Grid/index';
import HomeIcon from '@material-ui/icons/Home';
import ListItem from '@material-ui/core/ListItem/index';
import Tooltip from '@material-ui/core/Tooltip/index';
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';
import { IProps } from './types';
2019-03-28 05:39:06 +07:00
2019-02-03 17:23:33 +07:00
import {
2019-03-28 05:39:06 +07:00
Author,
Avatar,
2019-02-03 17:23:33 +07:00
Description,
2019-03-28 05:39:06 +07:00
Details,
GridRightAligned,
2019-02-03 17:23:33 +07:00
Icon,
2019-03-28 05:39:06 +07:00
IconButton,
OverviewItem,
PackageList,
PackageListItem,
PackageListItemText,
PackageTitle,
Published,
TagContainer,
2019-02-03 17:23:33 +07:00
Text,
2019-03-28 05:39:06 +07:00
WrapperLink,
2019-02-03 17:23:33 +07:00
} from './styles';
2019-03-28 05:39:06 +07:00
const Package = ({
author: { name: authorName, avatar: authorAvatar },
bugs: { url } = {},
description,
dist: { unpackedSize } = {},
homepage,
keywords = [],
license,
name: packageName,
time,
version,
}: IProps): Element<WrapperLink> => {
//
const renderVersionInfo = () =>
version && (
<OverviewItem>
<Icon name={'version'} />
{`v${version}`}
</OverviewItem>
);
2019-02-03 17:23:33 +07:00
2019-03-28 05:39:06 +07:00
const renderAuthorInfo = () =>
authorName && (
<Author>
<Avatar alt={authorName} src={authorAvatar} />
<Details>
<Text text={authorName} />
</Details>
</Author>
);
2019-02-03 17:23:33 +07:00
2019-03-28 05:39:06 +07:00
const renderFileSize = () =>
unpackedSize && (
<OverviewItem>
<Icon name={'filebinary'} />
{fileSizeSI(unpackedSize)}
</OverviewItem>
);
2019-02-03 17:23:33 +07:00
const renderLicenseInfo = () =>
license && (
<OverviewItem>
2019-03-28 05:39:06 +07:00
<Icon name={'law'} />
2019-02-03 17:23:33 +07:00
{license}
</OverviewItem>
);
2019-03-28 05:39:06 +07:00
const renderPublishedInfo = () =>
time && (
<OverviewItem>
<Icon name={'time'} />
<Published>{`Published on ${formatDate(time)} •`}</Published>
{`${formatDateDistance(time)} ago`}
</OverviewItem>
);
2019-02-03 17:23:33 +07:00
2019-03-28 05:39:06 +07:00
const renderHomePageLink = () =>
homepage && (
<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-03-28 05:39:06 +07:00
const renderBugsLink = () =>
url && (
<a href={url} target={'_blank'}>
<Tooltip aria-label={'Bugs'} title={'Open an issue'}>
<IconButton aria-label={'Bugs'}>
{/* eslint-disable-next-line react/jsx-max-depth */}
<BugReport />
</IconButton>
</Tooltip>
</a>
);
const renderPrimaryComponent = () => {
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>
);
};
const renderSecondaryComponent = () => {
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-02-03 17:23:33 +07:00
return (
2019-03-28 05:39:06 +07:00
<PackageList className={'package'}>
<ListItem alignItems={'flex-start'}>
<PackageListItemText className={'package-link'} component={'div'} primary={renderPrimaryComponent()} secondary={renderSecondaryComponent()} />
</ListItem>
<PackageListItem alignItems={'flex-start'}>
{renderAuthorInfo()}
{renderVersionInfo()}
{renderPublishedInfo()}
{renderFileSize()}
{renderLicenseInfo()}
</PackageListItem>
</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;