2019-06-20 19:37:28 +07:00
|
|
|
import React, { Component, ReactElement } from 'react';
|
2019-03-28 05:39:06 +07:00
|
|
|
|
|
|
|
import BugReportIcon from '@material-ui/icons/BugReport';
|
2019-04-09 03:29:20 +07:00
|
|
|
import DownloadIcon from '@material-ui/icons/CloudDownload';
|
2019-03-28 05:39:06 +07:00
|
|
|
import HomeIcon from '@material-ui/icons/Home';
|
2019-06-20 19:37:28 +07:00
|
|
|
import List from '@material-ui/core/List';
|
|
|
|
import Tooltip from '@material-ui/core/Tooltip';
|
2019-03-28 05:39:06 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
|
2019-03-28 05:39:06 +07:00
|
|
|
import { Fab, ActionListItem } from './styles';
|
2019-05-16 21:25:40 +07:00
|
|
|
import { isURL } from '../../utils/url';
|
2019-03-28 05:39:06 +07:00
|
|
|
|
|
|
|
const ACTIONS = {
|
|
|
|
homepage: {
|
|
|
|
icon: <HomeIcon />,
|
|
|
|
title: 'Visit homepage',
|
|
|
|
},
|
|
|
|
issue: {
|
|
|
|
icon: <BugReportIcon />,
|
|
|
|
title: 'Open an issue',
|
|
|
|
},
|
|
|
|
tarball: {
|
|
|
|
icon: <DownloadIcon />,
|
|
|
|
title: 'Download tarball',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2019-06-25 05:54:32 +07:00
|
|
|
class ActionBar extends Component {
|
2019-06-20 19:37:28 +07:00
|
|
|
public render(): ReactElement<HTMLElement> {
|
2019-03-28 05:39:06 +07:00
|
|
|
return (
|
|
|
|
<DetailContextConsumer>
|
|
|
|
{context => {
|
2019-06-20 19:37:28 +07:00
|
|
|
return this.renderActionBar(context as VersionPageConsumerProps);
|
2019-03-28 05:39:06 +07:00
|
|
|
}}
|
|
|
|
</DetailContextConsumer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-06-25 05:54:32 +07:00
|
|
|
private renderIconsWithLink(link: string, component: JSX.Element): ReactElement<HTMLElement> {
|
2019-03-28 05:39:06 +07:00
|
|
|
return (
|
2019-04-09 03:29:20 +07:00
|
|
|
<a href={link} target={'_blank'}>
|
2019-03-28 05:39:06 +07:00
|
|
|
{component}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
private renderActionBarListItems = packageMeta => {
|
|
|
|
// @ts-ignore
|
2019-04-09 03:29:20 +07:00
|
|
|
const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
|
2019-03-28 05:39:06 +07:00
|
|
|
|
|
|
|
const actionsMap = {
|
|
|
|
homepage,
|
|
|
|
issue,
|
|
|
|
tarball,
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderList = Object.keys(actionsMap).reduce((component, value, key) => {
|
|
|
|
const link = actionsMap[value];
|
2019-05-16 21:25:40 +07:00
|
|
|
if (link && isURL(link)) {
|
2019-04-09 03:29:20 +07:00
|
|
|
const fab = <Fab size={'small'}>{ACTIONS[value]['icon']}</Fab>;
|
2019-03-28 05:39:06 +07:00
|
|
|
component.push(
|
2019-06-20 19:37:28 +07:00
|
|
|
// @ts-ignore
|
2019-03-28 05:39:06 +07:00
|
|
|
<Tooltip key={key} title={ACTIONS[value]['title']}>
|
2019-06-20 19:37:28 +07:00
|
|
|
<>{this.renderIconsWithLink(link, fab)}</>
|
2019-03-28 05:39:06 +07:00
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return component;
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2019-04-09 03:29:20 +07:00
|
|
|
<ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
|
2019-03-28 05:39:06 +07:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
private renderActionBar = ({ packageMeta = {} }) => {
|
2019-04-09 03:29:20 +07:00
|
|
|
return <List>{this.renderActionBarListItems(packageMeta)}</List>;
|
2019-03-28 05:39:06 +07:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ActionBar;
|