2019-02-03 17:23:33 +07:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
2019-03-28 05:39:06 +07:00
|
|
|
import Divider from '@material-ui/core/Divider';
|
|
|
|
|
2019-02-03 17:23:33 +07:00
|
|
|
import Package from '../Package';
|
|
|
|
import Help from '../Help';
|
2019-03-28 05:39:06 +07:00
|
|
|
import { formatLicense } from '../../utils/package';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
import classes from './packageList.scss';
|
|
|
|
|
|
|
|
export default class PackageList extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
packages: PropTypes.array,
|
|
|
|
};
|
|
|
|
|
2019-03-28 05:39:06 +07:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className={"package-list-items"}>
|
|
|
|
<div className={classes.pkgContainer}>
|
|
|
|
{this.hasPackages() ? this.renderPackages(): <Help /> }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
hasPackages() {
|
|
|
|
const {packages} = this.props;
|
|
|
|
return packages.length > 0;
|
|
|
|
}
|
|
|
|
|
2019-02-03 17:23:33 +07:00
|
|
|
renderPackages = () => {
|
|
|
|
return (
|
|
|
|
<Fragment>
|
|
|
|
{this.renderList()}
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderList = () => {
|
|
|
|
const { packages } = this.props;
|
|
|
|
return (
|
|
|
|
packages.map((pkg, i) => {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { name, version, description, time, keywords, dist, homepage, bugs } = pkg;
|
|
|
|
const author = pkg.author;
|
|
|
|
// TODO: move format license to API side.
|
2019-02-03 17:23:33 +07:00
|
|
|
const license = formatLicense(pkg.license);
|
|
|
|
return (
|
2019-03-28 05:39:06 +07:00
|
|
|
<React.Fragment key={i}>
|
|
|
|
{i !== 0 && <Divider></Divider>}
|
|
|
|
<Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
|
|
|
|
</React.Fragment>
|
2019-02-03 17:23:33 +07:00
|
|
|
);
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|