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:
parent
108936a6e4
commit
593f1c09f8
2 changed files with 17 additions and 21 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
Loading…
Reference in a new issue