0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-30 22:34:10 -05:00

refactor: removed list

This commit is contained in:
Priscila Oliveira 2019-01-20 16:44:51 +01:00
parent 108936a6e4
commit 593f1c09f8
2 changed files with 17 additions and 21 deletions

View file

@ -7,11 +7,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 CardContent from '@material-ui/core/CardContent';
import { DetailContextConsumer } from '../../pages/version'; import { DetailContextConsumer } from '../../pages/version';
import Chip from '@material-ui/core/Chip'; import { Content, CardWrap, Heading, Tags, Tag } from './styles';
import { Content, CardWrap, Heading, ListItem, CardContent } from './styles';
import List from '@material-ui/core/List';
class DepDetail extends Component<any, any> { class DepDetail extends Component<any, any> {
constructor(props: any) { constructor(props: any) {
@ -27,11 +26,7 @@ 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 clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
<ListItem>
<Chip clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />
</ListItem>
);
} }
handleOnClick = () => { handleOnClick = () => {
@ -46,7 +41,7 @@ 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) => renderTags = (deps: object, enableLoading: boolean) =>
deps.map(dep => { deps.map(dep => {
const [name, version] = dep; const [name, version] = dep;
@ -65,7 +60,7 @@ class DependencyBlock extends Component<any, any> {
<CardWrap> <CardWrap>
<CardContent> <CardContent>
<Heading variant={'subheading'}>{title}</Heading> <Heading variant={'subheading'}>{title}</Heading>
<List>{this.renderList(deps, enableLoading)}</List> <Tags>{this.renderTags(deps, enableLoading)}</Tags>
</CardContent> </CardContent>
</CardWrap> </CardWrap>
); );

View file

@ -6,8 +6,7 @@
import styled from 'react-emotion'; import styled from 'react-emotion';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { default as MuiListItem } from '@material-ui/core/ListItem'; import Chip from '@material-ui/core/Chip';
import { default as MuiCardContent } from '@material-ui/core/CardContent';
export const Content = styled.div` export const Content = styled.div`
&& { && {
@ -15,12 +14,6 @@ export const Content = styled.div`
} }
`; `;
export const CardContent = styled(MuiCardContent)`
&& {
padding-bottom: 0;
}
`;
export const CardWrap = styled(Card)` export const CardWrap = styled(Card)`
&& { && {
margin: 0 0 25px; margin: 0 0 25px;
@ -33,9 +26,17 @@ export const Heading = styled(Typography)`
} }
`; `;
export const ListItem = styled(MuiListItem)` export const Tags = styled('div')`
&& { && {
padding-left: 0; display: flex;
padding-right: 0; justify-content: start;
flex-wrap: wrap;
margin: 0 -5px;
}
`;
export const Tag = styled(Chip)`
&& {
margin: 5px;
} }
`; `;