verdaccio-ui/src/webui/components/Dependencies/index.js

115 lines
3.0 KiB
JavaScript
Raw Normal View History

2019-02-03 17:23:33 +07:00
/**
* @prettier
* @flow
*/
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';
2019-03-28 05:39:06 +07:00
import { CardWrap, Heading, Tags, Tag } from './styles';
import NoItems from '../NoItems';
2019-02-03 17:23:33 +07:00
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}`;
2019-03-28 05:39:06 +07:00
return <Tag className={'dep-tag'} clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
2019-02-03 17:23:33 +07:00
}
handleOnClick = () => {
const { name } = this.state;
const { onLoading, history } = this.props;
onLoading();
2019-03-28 05:39:06 +07:00
history.push(`/-/web/detail/${name}`);
2019-02-03 17:23:33 +07:00
};
}
const WrapperDependencyDetail = withRouter(DepDetail);
2019-02-03 17:23:33 +07:00
class DependencyBlock extends Component<any, any> {
render() {
const { dependencies, title } = this.props;
const deps = Object.entries(dependencies);
return (
// $FlowFixMe
<DetailContextConsumer>
{({ enableLoading }) => {
return (
<CardWrap>
<CardContent>
2019-03-28 05:39:06 +07:00
<Heading variant={'subheading'}>{`${title} (${deps.length})`}</Heading>
2019-02-03 17:23:33 +07:00
<Tags>{this.renderTags(deps, enableLoading)}</Tags>
</CardContent>
</CardWrap>
);
}}
</DetailContextConsumer>
);
}
2019-03-28 05:39:06 +07:00
renderTags = (deps: any, enableLoading: any) =>
deps.map(dep => {
const [name, version] = dep;
return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
2019-03-28 05:39:06 +07:00
});
2019-02-03 17:23:33 +07:00
}
class Dependencies extends Component<any, any> {
state = {
tabPosition: 0,
};
render() {
return (
<DetailContextConsumer>
{packageMeta => {
return this.renderDependencies(packageMeta);
}}
</DetailContextConsumer>
);
}
2019-03-28 05:39:06 +07:00
checkDependencyLength(dependency: Object = {}) {
return Object.keys(dependency).length > 0;
}
2019-02-03 17:23:33 +07:00
// $FlowFixMe
renderDependencies({ packageMeta }) {
const { latest } = packageMeta;
2019-03-28 05:39:06 +07:00
const { dependencies, devDependencies, peerDependencies, name } = latest;
const dependencyMap = { dependencies, devDependencies, peerDependencies };
const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => {
const selectedDepndency = dependencyMap[value];
if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
result.push(<DependencyBlock className={'dependency-block'} dependencies={selectedDepndency} key={key} title={value} />);
}
return result;
}, []);
if (dependencyList.length) {
return <Fragment>{dependencyList}</Fragment>;
}
return <NoItems className={'no-dependencies'} text={`${name} has no dependencies.`} />;
2019-02-03 17:23:33 +07:00
}
}
export default Dependencies;