mirror of
https://github.com/SomboChea/ui
synced 2024-09-29 21:07:47 +07:00
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import Divider from '@material-ui/core/Divider';
|
|
|
|
import Package from '../Package';
|
|
import Help from '../Help';
|
|
import { formatLicense } from '../../utils/package';
|
|
import { PackageInterface } from '../Package/Package';
|
|
|
|
import * as classes from './styles';
|
|
|
|
interface Props {
|
|
packages: PackageInterface[];
|
|
}
|
|
|
|
export const PackageList: React.FC<Props> = props => {
|
|
const renderPackages: () => React.ReactElement<HTMLElement>[] = () => {
|
|
return props.packages.map((pkg, i) => {
|
|
const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
|
|
// TODO: move format license to API side.
|
|
const license = formatLicense(pkg.license);
|
|
return (
|
|
<React.Fragment key={i}>
|
|
{i !== 0 && <Divider />}
|
|
<Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
|
|
</React.Fragment>
|
|
);
|
|
});
|
|
};
|
|
|
|
const hasPackages: () => boolean = () => props.packages.length > 0;
|
|
|
|
return (
|
|
<div className={'package-list-items'}>
|
|
<div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
|
|
</div>
|
|
);
|
|
};
|