forked from sombochea/verdaccio-ui
109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
|
/**
|
||
|
* @prettier
|
||
|
* @flow
|
||
|
*/
|
||
|
|
||
|
/* eslint react/jsx-max-depth: 0 */
|
||
|
|
||
|
import React, { Component, Fragment } from 'react';
|
||
|
import { withRouter } from 'react-router-dom';
|
||
|
import CardContent from '@material-ui/core/CardContent/index';
|
||
|
|
||
|
import { DetailContextConsumer } from '../../pages/version';
|
||
|
import { Content, CardWrap, Heading, Tags, Tag } from './styles';
|
||
|
|
||
|
class DepDetail extends Component<any, any> {
|
||
|
constructor(props: any) {
|
||
|
super(props);
|
||
|
const { name, version } = this.props;
|
||
|
|
||
|
this.state = {
|
||
|
name,
|
||
|
version,
|
||
|
};
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
const { name, version } = this.state;
|
||
|
const tagText = `${name}@${version}`;
|
||
|
return <Tag clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
|
||
|
}
|
||
|
|
||
|
handleOnClick = () => {
|
||
|
const { name } = this.state;
|
||
|
const { onLoading, history } = this.props;
|
||
|
|
||
|
onLoading();
|
||
|
history.push(`/-/web/version/${name}`);
|
||
|
};
|
||
|
}
|
||
|
|
||
|
const WrappDepDetail = withRouter(DepDetail);
|
||
|
|
||
|
class DependencyBlock extends Component<any, any> {
|
||
|
renderTags = (deps: any, enableLoading: any) =>
|
||
|
deps.map(dep => {
|
||
|
const [name, version] = dep;
|
||
|
|
||
|
return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
|
||
|
});
|
||
|
|
||
|
render() {
|
||
|
const { dependencies, title } = this.props;
|
||
|
const deps = Object.entries(dependencies);
|
||
|
|
||
|
return (
|
||
|
// $FlowFixMe
|
||
|
<DetailContextConsumer>
|
||
|
{({ enableLoading }) => {
|
||
|
return (
|
||
|
<CardWrap>
|
||
|
<CardContent>
|
||
|
<Heading variant={'subheading'}>{title}</Heading>
|
||
|
<Tags>{this.renderTags(deps, enableLoading)}</Tags>
|
||
|
</CardContent>
|
||
|
</CardWrap>
|
||
|
);
|
||
|
}}
|
||
|
</DetailContextConsumer>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class Dependencies extends Component<any, any> {
|
||
|
state = {
|
||
|
tabPosition: 0,
|
||
|
};
|
||
|
|
||
|
render() {
|
||
|
return (
|
||
|
<DetailContextConsumer>
|
||
|
{packageMeta => {
|
||
|
return this.renderDependencies(packageMeta);
|
||
|
}}
|
||
|
</DetailContextConsumer>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
// $FlowFixMe
|
||
|
renderDependencies({ packageMeta }) {
|
||
|
const { latest } = packageMeta;
|
||
|
// console.log('renderDependencies', latest);
|
||
|
const { dependencies, devDependencies, peerDependencies } = latest;
|
||
|
// console.log('dependencies', dependencies);
|
||
|
// console.log('devDependencies', devDependencies);
|
||
|
|
||
|
return (
|
||
|
<Content>
|
||
|
<Fragment>
|
||
|
{dependencies && <DependencyBlock dependencies={dependencies} title={'Dependencies'} />}
|
||
|
{devDependencies && <DependencyBlock dependencies={devDependencies} title={'DevDependencies'} />}
|
||
|
{peerDependencies && <DependencyBlock dependencies={peerDependencies} title={'PeerDependencies'} />}
|
||
|
</Fragment>
|
||
|
</Content>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default Dependencies;
|