import React, { FC, Fragment } from 'react'; import Add from '@material-ui/icons/Add'; import { DetailContext } from '../../pages/version/Version'; import { AvatarTooltip } from '../AvatarTooltip'; import { Details, Heading, Content, Fab } from './styles'; export type DevelopersType = 'contributors' | 'maintainers'; interface Props { type: DevelopersType; visibleMax?: number; } export const VISIBLE_MAX = 6; const Developers: FC = ({ type, visibleMax }) => { const [visibleDevs, setVisibleDevs] = React.useState(visibleMax || VISIBLE_MAX); const { packageMeta } = React.useContext(DetailContext); const handleLoadMore = () => { setVisibleDevs(visibleDevs + VISIBLE_MAX); }; const renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => { const { name: packageName, version } = packageMeta.latest; return ; }; const renderDevelopers = (developers, packageMeta) => { const listVisibleDevelopers = developers.slice(0, visibleDevs); return ( {type} {listVisibleDevelopers.map(developer => (
{renderDeveloperDetails(developer, packageMeta)}
))} {visibleDevs < developers.length && ( )}
); }; const developerList = packageMeta && packageMeta.latest[type]; if (!developerList || developerList.length === 0) { return null; } return renderDevelopers(developerList, packageMeta); }; export default Developers;