import React, { Component, Fragment, ReactElement } from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import CardContent from '@material-ui/core/CardContent'; import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version'; import { CardWrap, Heading, Tags, Tag } from './styles'; import NoItems from '../NoItems'; type DepDetailProps = { name: string; version: string; onLoading?: () => void; } & RouteComponentProps; interface DepDetailState { name: string; version: string; } class DepDetail extends Component { constructor(props: DepDetailProps) { super(props); const { name, version } = this.props; this.state = { name, version, }; } public render(): ReactElement { const { name, version } = this.state; const tagText = `${name}@${version}`; return ; } private handleOnClick = () => { const { name } = this.state; const { onLoading, history } = this.props; onLoading && onLoading(); history.push(`/-/web/detail/${name}`); }; } const WrapperDependencyDetail = withRouter(DepDetail); class DependencyBlock extends Component<{ title: string; dependencies: [] }> { public render(): ReactElement { const { dependencies, title } = this.props; const deps = Object.entries(dependencies) as []; return ( {({ enableLoading }) => { return ( {`${title} (${deps.length})`} {this.renderTags(deps, enableLoading)} ); }} ); } private renderTags = (deps: [], enableLoading?: () => void) => deps.map(dep => { const [name, version] = dep as [string, string]; return ; }); } class Dependencies extends Component { public state = { tabPosition: 0, }; public render(): ReactElement { return ( {packageMeta => { return this.renderDependencies(packageMeta as VersionPageConsumerProps); }} ); } private checkDependencyLength(dependency: Record = {}): boolean { return Object.keys(dependency).length > 0; } private renderDependencies({ packageMeta }): ReactElement { const { latest } = packageMeta; 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)) { // @ts-ignore result.push(); } return result; }, []); if (dependencyList.length) { return {dependencyList}; } return ; } } export default Dependencies;