mirror of
https://github.com/verdaccio/verdaccio.git
synced 2024-12-23 22:27:34 -05:00
refactor: removed list
This commit is contained in:
parent
108936a6e4
commit
593f1c09f8
2 changed files with 17 additions and 21 deletions
|
@ -7,11 +7,10 @@
|
|||
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
|
||||
import { DetailContextConsumer } from '../../pages/version';
|
||||
import Chip from '@material-ui/core/Chip';
|
||||
import { Content, CardWrap, Heading, ListItem, CardContent } from './styles';
|
||||
import List from '@material-ui/core/List';
|
||||
import { Content, CardWrap, Heading, Tags, Tag } from './styles';
|
||||
|
||||
class DepDetail extends Component<any, any> {
|
||||
constructor(props: any) {
|
||||
|
@ -27,11 +26,7 @@ class DepDetail extends Component<any, any> {
|
|||
render() {
|
||||
const { name, version } = this.state;
|
||||
const tagText = `${name}@${version}`;
|
||||
return (
|
||||
<ListItem>
|
||||
<Chip clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />
|
||||
</ListItem>
|
||||
);
|
||||
return <Tag clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
|
||||
}
|
||||
|
||||
handleOnClick = () => {
|
||||
|
@ -46,7 +41,7 @@ class DepDetail extends Component<any, any> {
|
|||
const WrappDepDetail = withRouter(DepDetail);
|
||||
|
||||
class DependencyBlock extends Component<any, any> {
|
||||
renderList = (deps: object, enableLoading: boolean) =>
|
||||
renderTags = (deps: object, enableLoading: boolean) =>
|
||||
deps.map(dep => {
|
||||
const [name, version] = dep;
|
||||
|
||||
|
@ -65,7 +60,7 @@ class DependencyBlock extends Component<any, any> {
|
|||
<CardWrap>
|
||||
<CardContent>
|
||||
<Heading variant={'subheading'}>{title}</Heading>
|
||||
<List>{this.renderList(deps, enableLoading)}</List>
|
||||
<Tags>{this.renderTags(deps, enableLoading)}</Tags>
|
||||
</CardContent>
|
||||
</CardWrap>
|
||||
);
|
||||
|
|
|
@ -6,8 +6,7 @@
|
|||
import styled from 'react-emotion';
|
||||
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';
|
||||
import Chip from '@material-ui/core/Chip';
|
||||
|
||||
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)`
|
||||
&& {
|
||||
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;
|
||||
padding-right: 0;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Tag = styled(Chip)`
|
||||
&& {
|
||||
margin: 5px;
|
||||
}
|
||||
`;
|
||||
|
|
Loading…
Reference in a new issue