verdaccio-ui/src/components/Developers/Developers.tsx

60 lines
1.8 KiB
TypeScript
Raw Normal View History

import React, { FC, Fragment } from 'react';
2019-02-03 17:23:33 +07:00
import Add from '@material-ui/icons/Add';
2019-03-28 05:39:06 +07:00
import { DetailContext } from '../../pages/Version';
import { AvatarTooltip } from '../AvatarTooltip';
2019-03-28 05:39:06 +07:00
import { Details, Heading, Content, Fab } from './styles';
export type DevelopersType = 'contributors' | 'maintainers';
2019-02-03 17:23:33 +07:00
interface Props {
type: DevelopersType;
visibleMax?: number;
}
2019-02-03 17:23:33 +07:00
export const VISIBLE_MAX = 6;
const Developers: FC<Props> = ({ type, visibleMax }) => {
const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
const { packageMeta } = React.useContext(DetailContext);
const handleLoadMore = (): void => {
setVisibleDevs(visibleDevs + VISIBLE_MAX);
2019-02-03 17:23:33 +07:00
};
2019-10-03 02:52:27 +07:00
const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
const { name: packageName, version } = packageMeta.latest;
2019-02-03 17:23:33 +07:00
return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />;
};
2019-03-28 05:39:06 +07:00
2019-10-03 02:52:27 +07:00
const renderDevelopers = (developers, packageMeta): JSX.Element => {
const listVisibleDevelopers = developers.slice(0, visibleDevs);
2019-02-03 17:23:33 +07:00
return (
<Fragment>
<Heading variant={'subtitle1'}>{type}</Heading>
2019-03-28 05:39:06 +07:00
<Content>
{listVisibleDevelopers.map(developer => (
<Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
2019-03-28 05:39:06 +07:00
))}
{visibleDevs < developers.length && (
<Fab onClick={handleLoadMore} size="small">
<Add />
</Fab>
)}
2019-03-28 05:39:06 +07:00
</Content>
</Fragment>
2019-02-03 17:23:33 +07:00
);
};
2019-02-03 17:23:33 +07:00
const developerList = packageMeta && packageMeta.latest[type];
if (!developerList || developerList.length === 0) {
return null;
2019-02-03 17:23:33 +07:00
}
return renderDevelopers(developerList, packageMeta);
};
2019-02-03 17:23:33 +07:00
export default Developers;