diff --git a/src/webui/components/ActionBar/index.js b/src/webui/components/ActionBar/index.js new file mode 100644 index 000000000..a1a771a24 --- /dev/null +++ b/src/webui/components/ActionBar/index.js @@ -0,0 +1,109 @@ +/* eslint-disable react/jsx-max-depth */ +/** + * @prettier + */ + +import React, { Component } from 'react'; + +import { DetailContextConsumer } from '../../pages/version/index'; +import List from '@material-ui/core/List/index'; + +import DownloadIcon from '@material-ui/icons/CloudDownload'; +import BugReportIcon from '@material-ui/icons/BugReport'; +import HomeIcon from '@material-ui/icons/Home'; +import Tooltip from '@material-ui/core/Tooltip/index'; + +import { Fab, ActionListItem } from './styles'; + +const ACTIONS = { + homepage: { + icon: , + title: 'Visit homepage', + }, + issue: { + icon: , + title: 'Open an issue', + }, + tarball: { + icon: , + title: 'Download tarball', + }, +}; + +class ActionBar extends Component { + render() { + return ( + + {context => { + return this.renderActionBar(context); + }} + + ); + } + + renderIconsWithLink(link, component) { + if (!link) { + return null; + } + return ( + + {component} + + ); + } + + renderActionBarListItems = (packageMeta) => { + const { + latest: { + bugs: { + url: issue, + } = {}, + homepage, + dist: { + tarball, + } = {}, + } = {}, + } = packageMeta; + + const actionsMap = { + homepage, + issue, + tarball, + }; + + const renderList = Object.keys(actionsMap).reduce((component, value, key) => { + const link = actionsMap[value]; + if (link) { + const fab = ( + + {ACTIONS[value]['icon']} + + ); + component.push( + + {this.renderIconsWithLink(link, fab)} + + ); + } + return component; + }, []); + + return ( + <> + + {renderList} + + + ); + }; + + renderActionBar = ({ packageMeta = {} }) => { + return ( + + {this.renderActionBarListItems(packageMeta)} + + ); + }; +} + +export default ActionBar; diff --git a/src/webui/components/ActionBar/styles.js b/src/webui/components/ActionBar/styles.js new file mode 100644 index 000000000..3c75f7cc6 --- /dev/null +++ b/src/webui/components/ActionBar/styles.js @@ -0,0 +1,25 @@ +/** + * @prettier + * @flow + */ +import styled from 'react-emotion'; +import { default as MuiFab } from '@material-ui/core/Fab'; +import ListItem from '@material-ui/core/ListItem/index'; + +import colors from '../../utils/styles/colors'; + +export const ActionListItem = styled(ListItem)` + && { + padding-top: 0; + padding-left: 0; + padding-right: 0; + } +`; + +export const Fab = styled(MuiFab)` + && { + background-color: ${colors.primary}; + color: ${colors.white}; + margin-right: 10px; + } +`; diff --git a/src/webui/components/DetailSidebar/index.js b/src/webui/components/DetailSidebar/index.js index 8aefa84f6..8b2e592e9 100644 --- a/src/webui/components/DetailSidebar/index.js +++ b/src/webui/components/DetailSidebar/index.js @@ -1,25 +1,23 @@ -/* eslint-disable */ import React, {Component} from 'react'; -import Add from '@material-ui/icons/Add'; -import BugReport from '@material-ui/icons/BugReport'; import Card from '@material-ui/core/Card/index'; import CardContent from '@material-ui/core/CardContent/index'; -import Home from '@material-ui/icons/Home'; import List from '@material-ui/core/List/index'; import ListItemText from '@material-ui/core/ListItemText/index'; -import Tooltip from '@material-ui/core/Tooltip/index'; -import Install from '../Install'; +import ActtionBar from '../ActionBar'; import Author from '../Author'; +import Developers from '../Developers'; +import Dist from '../Dist'; +import Engine from '../Engines'; +import Install from '../Install'; import License from '../License'; import Repository from '../Repository'; -import Developers from '../Developers'; -import Engine from '../Engines'; -import Dist from '../Dist'; + + import { DetailContextConsumer } from '../../pages/version/index'; -import { TitleListItem, TitleAvatar, Fab } from './styles'; +import { TitleListItem } from './styles'; class DetailSidebar extends Component { render() { @@ -36,6 +34,7 @@ class DetailSidebar extends Component { {this.renderTitle(packageName, packageMeta)} + {this.renderActionBar()} {this.renderCopyCLI()} {this.renderRepository()} {this.renderEngine()} @@ -54,23 +53,10 @@ class DetailSidebar extends Component { return ( - {/* {packageName[0]} */} {packageName}} secondary={packageMeta.latest.description} /> - - - - - - - - - - - - ); @@ -107,6 +93,10 @@ class DetailSidebar extends Component { renderDist = () => { return ; } + + renderActionBar = () => { + return ; + } } export default DetailSidebar; diff --git a/src/webui/components/DetailSidebar/styles.js b/src/webui/components/DetailSidebar/styles.js index 12439e2a8..2d1cde8e2 100644 --- a/src/webui/components/DetailSidebar/styles.js +++ b/src/webui/components/DetailSidebar/styles.js @@ -5,7 +5,6 @@ import styled from 'react-emotion'; import Avatar from '@material-ui/core/Avatar/index'; -import { default as MuiFab } from '@material-ui/core/Fab'; import ListItem from '@material-ui/core/ListItem/index'; import colors from '../../utils/styles/colors'; @@ -14,6 +13,7 @@ export const TitleListItem = styled(ListItem)` && { padding-left: 0; padding-right: 0; + padding-bottom: 0; } `; @@ -24,11 +24,3 @@ export const TitleAvatar = styled(Avatar)` text-transform: capitalize; } `; - -export const Fab = styled(MuiFab)` - && { - background-color: ${colors.primary}; - color: ${colors.white}; - margin-right: 10px; - } -`;