Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-03-04 02:02:39 -05:00
Code Issues Activity

refactor: added renderList

Browse source
This commit is contained in:
Priscila Oliveira 2019-01-20 13:32:08 +01:00
parent 27b40fbdcb
commit 05498fe651
2 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/webui/components/Dependencies/index.js
View file

@ -8,11 +8,10 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { DetailContextConsumer } from '../../pages/version/index'; import { DetailContextConsumer } from '../../pages/version';
import CardContent from '@material-ui/core/CardContent/index'; import Chip from '@material-ui/core/Chip';
import Chip from '@material-ui/core/Chip/index'; import { Content, CardWrap, Heading, ListItem, CardContent } from './styles';
import { Content, Tags, Tag, CardWrap } from './styles'; import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography/index';
class DepDetail extends Component<any, any> { class DepDetail extends Component<any, any> {
constructor(props: any) { constructor(props: any) {
@ -28,11 +27,10 @@ class DepDetail extends Component<any, any> {
render() { render() {
const { name, version } = this.state; const { name, version } = this.state;
const tagText = `${name}@${version}`; const tagText = `${name}@${version}`;
return ( return (
<Tag> <ListItem>
<Chip clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} /> <Chip clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />
</Tag> </ListItem>
); );
} }
@ -48,6 +46,13 @@ class DepDetail extends Component<any, any> {
const WrappDepDetail = withRouter(DepDetail); const WrappDepDetail = withRouter(DepDetail);
class DependencyBlock extends Component<any, any> { class DependencyBlock extends Component<any, any> {
renderList = (deps: object, enableLoading: boolean) =>
deps.map(dep => {
const [name, version] = dep;
return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
});
render() { render() {
const { dependencies, title } = this.props; const { dependencies, title } = this.props;
const deps = Object.entries(dependencies); const deps = Object.entries(dependencies);
@ -59,16 +64,8 @@ class DependencyBlock extends Component<any, any> {
return ( return (
<CardWrap> <CardWrap>
<CardContent> <CardContent>
<Typography gutterBottom={true} variant={'headline'}> <Heading variant={'subheading'}>{title}</Heading>
{title} <List>{this.renderList(deps, enableLoading)}</List>
</Typography>
<Tags>
{deps.map(dep => {
const [name, version] = dep;
return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
})}
</Tags>
</CardContent> </CardContent>
</CardWrap> </CardWrap>
); );

30
src/webui/components/Dependencies/styles.js
View file

@ -4,7 +4,10 @@
*/ */
import styled from 'react-emotion'; import styled from 'react-emotion';
import Card from '@material-ui/core/Card/index'; import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import { default as MuiListItem } from '@material-ui/core/ListItem';
import { default as MuiCardContent } from '@material-ui/core/CardContent';
export const Content = styled.div` export const Content = styled.div`
&& { && {
@ -12,17 +15,9 @@ export const Content = styled.div`
} }
`; `;
export const Tags = styled.span` export const CardContent = styled(MuiCardContent)`
&& { && {
display: flex; padding-bottom: 0;
justify-content: start;
flex-wrap: wrap;
}
`;
export const Tag = styled.span`
&& {
margin: 5px;
} }
`; `;
@ -31,3 +26,16 @@ export const CardWrap = styled(Card)`
margin: 0 0 25px; margin: 0 0 25px;
} }
`; `;
export const Heading = styled(Typography)`
&& {
font-weight: 700;
}
`;
export const ListItem = styled(MuiListItem)`
&& {
padding-left: 0;
padding-right: 0;
}
`;