mirror of
https://github.com/SomboChea/ui
synced 2024-09-30 05:17:47 +07:00
a8deeb9b9d
* refactor: introduced forwardref * refacttor: updated ref's * fix: fixed func's name * fix: fixed snapshots * fix: updated snap
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import React, { FC, Fragment } from 'react';
|
|
import Add from '@material-ui/icons/Add';
|
|
|
|
import { DetailContext } from '../../pages/Version';
|
|
import { AvatarTooltip } from '../AvatarTooltip';
|
|
|
|
import { Details, StyledText, Content, Fab } from './styles';
|
|
|
|
export type DevelopersType = 'contributors' | 'maintainers';
|
|
|
|
interface Props {
|
|
type: DevelopersType;
|
|
visibleMax?: number;
|
|
}
|
|
|
|
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);
|
|
};
|
|
|
|
const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
|
|
const { name: packageName, version } = packageMeta.latest;
|
|
|
|
return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />;
|
|
};
|
|
|
|
const renderDevelopers = (developers, packageMeta): JSX.Element => {
|
|
const listVisibleDevelopers = developers.slice(0, visibleDevs);
|
|
|
|
return (
|
|
<Fragment>
|
|
<StyledText variant={'subtitle1'}>{type}</StyledText>
|
|
<Content>
|
|
{listVisibleDevelopers.map(developer => (
|
|
<Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
|
|
))}
|
|
{visibleDevs < developers.length && (
|
|
<Fab onClick={handleLoadMore} size="small">
|
|
<Add />
|
|
</Fab>
|
|
)}
|
|
</Content>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
const developerList = packageMeta && packageMeta.latest[type];
|
|
if (!developerList || developerList.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return renderDevelopers(developerList, packageMeta);
|
|
};
|
|
|
|
export default Developers;
|