mirror of
https://github.com/SomboChea/ui
synced 2024-11-24 06:54:27 +07:00
Refactor: Updated developers component structure (#360)
This commit is contained in:
Priscila Oliveira
GitHub
parent
eef2913dd5
commit
3a9f66c023
@ -1,37 +0,0 @@
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import { isEmail } from '../../utils/url';
|
||||
import Tooltip from '../../muiComponents/Tooltip';
|
||||
import Avatar from '../../muiComponents/Avatar';
|
||||
|
||||
export interface AvatarDeveloper {
|
||||
name: string;
|
||||
packageName: string;
|
||||
version: string;
|
||||
avatar: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
const AvatarTooltip: FC<AvatarDeveloper> = ({ name, packageName, version, avatar, email }) => {
|
||||
const avatarComponent = <Avatar aria-label={name} src={avatar} />;
|
||||
function renderLinkForMail(
|
||||
email: string,
|
||||
avatarComponent: JSX.Element,
|
||||
packageName: string,
|
||||
version: string
|
||||
): JSX.Element {
|
||||
if (!email || isEmail(email) === false) {
|
||||
return avatarComponent;
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
|
||||
{avatarComponent}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return <Tooltip title={name}>{renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>;
|
||||
};
|
||||
|
||||
export { AvatarTooltip };
|
||||
@ -1,4 +0,0 @@
|
||||
import { AvatarTooltip } from './AvatarTooltip';
|
||||
|
||||
export { AvatarTooltip };
|
||||
export default AvatarTooltip;
|
||||
@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
|
||||
|
||||
import ActionBar from '../ActionBar';
|
||||
import Author from '../Author';
|
||||
import Developers from '../Developers';
|
||||
import Developers, { DeveloperType } from '../Developers';
|
||||
import Dist from '../Dist/Dist';
|
||||
import Engine from '../Engines/Engines';
|
||||
import Install from '../Install';
|
||||
@ -28,8 +28,6 @@ const renderLatestDescription = (description, version, isLatest = true): JSX.Ele
|
||||
};
|
||||
|
||||
const renderCopyCLI = (): JSX.Element => <Install />;
|
||||
const renderMaintainers = (): JSX.Element => <Developers type="maintainers" />;
|
||||
const renderContributors = (): JSX.Element => <Developers type="contributors" />;
|
||||
const renderRepository = (): JSX.Element => <Repository />;
|
||||
const renderAuthor = (): JSX.Element => <Author />;
|
||||
const renderEngine = (): JSX.Element => <Engine />;
|
||||
@ -63,8 +61,8 @@ function renderSideBar(packageName, packageVersion, packageMeta): ReactElement<H
|
||||
{renderEngine()}
|
||||
{renderDist()}
|
||||
{renderAuthor()}
|
||||
{renderMaintainers()}
|
||||
{renderContributors()}
|
||||
<Developers type={DeveloperType.MAINTAINERS} />
|
||||
<Developers type={DeveloperType.CONTRIBUTORS} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -3,8 +3,7 @@ import React from 'react';
|
||||
import { mount } from '../../utils/test-enzyme';
|
||||
import { DetailContextProvider } from '../../pages/Version';
|
||||
|
||||
import Developers, { DevelopersType } from './Developers';
|
||||
import { Fab } from './styles';
|
||||
import Developers, { DeveloperType, Fab } from './Developers';
|
||||
|
||||
describe('test Developers', () => {
|
||||
const packageMeta = {
|
||||
@ -35,14 +34,13 @@ describe('test Developers', () => {
|
||||
};
|
||||
|
||||
test('should render the component with no items', () => {
|
||||
const type: DevelopersType = 'maintainers';
|
||||
const packageMeta = {
|
||||
latest: {},
|
||||
};
|
||||
const wrapper = mount(
|
||||
// @ts-ignore
|
||||
<DetailContextProvider value={{ packageMeta }}>
|
||||
<Developers type={type} />
|
||||
<Developers type={DeveloperType.MAINTAINERS} />
|
||||
</DetailContextProvider>
|
||||
);
|
||||
|
||||
@ -50,11 +48,10 @@ describe('test Developers', () => {
|
||||
});
|
||||
|
||||
test('should render the component for maintainers with items', () => {
|
||||
const type: DevelopersType = 'maintainers';
|
||||
const wrapper = mount(
|
||||
// @ts-ignore
|
||||
<DetailContextProvider value={{ packageMeta }}>
|
||||
<Developers type={type} />
|
||||
<Developers type={DeveloperType.MAINTAINERS} />
|
||||
</DetailContextProvider>
|
||||
);
|
||||
|
||||
@ -62,11 +59,10 @@ describe('test Developers', () => {
|
||||
});
|
||||
|
||||
test('should render the component for contributors with items', () => {
|
||||
const type: DevelopersType = 'contributors';
|
||||
const wrapper = mount(
|
||||
// @ts-ignore
|
||||
<DetailContextProvider value={{ packageMeta }}>
|
||||
<Developers type={type} />
|
||||
<Developers type={DeveloperType.CONTRIBUTORS} />
|
||||
</DetailContextProvider>
|
||||
);
|
||||
|
||||
@ -74,7 +70,6 @@ describe('test Developers', () => {
|
||||
});
|
||||
|
||||
test('should test onClick the component avatar', () => {
|
||||
const type: DevelopersType = 'contributors';
|
||||
const packageMeta = {
|
||||
latest: {
|
||||
packageName: 'foo',
|
||||
@ -95,7 +90,7 @@ describe('test Developers', () => {
|
||||
const wrapper = mount(
|
||||
// @ts-ignore
|
||||
<DetailContextProvider value={{ packageMeta }}>
|
||||
<Developers type={type} visibleMax={1} />
|
||||
<Developers type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
|
||||
</DetailContextProvider>
|
||||
);
|
||||
|
||||
|
||||
@ -1,60 +1,89 @@
|
||||
import React, { FC, Fragment } from 'react';
|
||||
import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
|
||||
import Add from '@material-ui/icons/Add';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import { AvatarTooltip } from '../AvatarTooltip';
|
||||
import Tooltip from '../../muiComponents/Tooltip';
|
||||
import Avatar from '../../muiComponents/Avatar';
|
||||
import Box from '../../muiComponents/Box';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
import { Details, StyledText, Content, Fab } from './styles';
|
||||
import getUniqueDeveloperValues from './get-unique-developer-values';
|
||||
|
||||
export type DevelopersType = 'contributors' | 'maintainers';
|
||||
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
|
||||
backgroundColor: props.theme && props.theme.palette.primary.main,
|
||||
color: props.theme && props.theme.palette.white,
|
||||
}));
|
||||
|
||||
export enum DeveloperType {
|
||||
CONTRIBUTORS = 'contributors',
|
||||
MAINTAINERS = 'maintainers',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
type: DevelopersType;
|
||||
type: DeveloperType;
|
||||
visibleMax?: number;
|
||||
}
|
||||
|
||||
export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
|
||||
fontWeight: theme && theme.fontWeight.bold,
|
||||
marginBottom: '10px',
|
||||
textTransform: 'capitalize',
|
||||
}));
|
||||
|
||||
const StyledBox = styled(Box)({
|
||||
'> *': {
|
||||
margin: 5,
|
||||
},
|
||||
});
|
||||
|
||||
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 Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
|
||||
const detailContext = useContext(DetailContext);
|
||||
|
||||
const handleLoadMore = (): void => {
|
||||
setVisibleDevs(visibleDevs + VISIBLE_MAX);
|
||||
};
|
||||
if (!detailContext) {
|
||||
throw Error("The app's detail Context was not correct used");
|
||||
}
|
||||
|
||||
const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
|
||||
const { name: packageName, version } = packageMeta.latest;
|
||||
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
|
||||
detailContext.packageMeta,
|
||||
type,
|
||||
]);
|
||||
|
||||
return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />;
|
||||
};
|
||||
const [visibleDevelopersMax, setVisibleDevelopersMax] = useState(visibleMax);
|
||||
const [visibleDevelopers, setVisibleDevelopers] = useState(developers);
|
||||
|
||||
const renderDevelopers = (developers, packageMeta): JSX.Element => {
|
||||
const listVisibleDevelopers = developers.slice(0, visibleDevs);
|
||||
useEffect(() => {
|
||||
if (!developers) return;
|
||||
setVisibleDevelopers(developers.slice(0, visibleDevelopersMax));
|
||||
}, [developers, visibleDevelopersMax]);
|
||||
|
||||
const handleSetVisibleDevelopersMax = useCallback(() => {
|
||||
setVisibleDevelopersMax(visibleDevelopersMax + VISIBLE_MAX);
|
||||
}, [visibleDevelopersMax]);
|
||||
|
||||
if (!visibleDevelopers || !developers) return null;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<>
|
||||
<StyledText variant={'subtitle1'}>{type}</StyledText>
|
||||
<Content>
|
||||
{listVisibleDevelopers.map(developer => (
|
||||
<Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
|
||||
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
|
||||
{visibleDevelopers.map(visibleDeveloper => (
|
||||
<Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
|
||||
<Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
|
||||
</Tooltip>
|
||||
))}
|
||||
{visibleDevs < developers.length && (
|
||||
<Fab onClick={handleLoadMore} size="small">
|
||||
{visibleDevelopersMax < developers.length && (
|
||||
<Fab onClick={handleSetVisibleDevelopersMax} size="small">
|
||||
<Add />
|
||||
</Fab>
|
||||
)}
|
||||
</Content>
|
||||
</Fragment>
|
||||
</StyledBox>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const developerList = packageMeta && packageMeta.latest[type];
|
||||
if (!developerList || developerList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return renderDevelopers(developerList, packageMeta);
|
||||
};
|
||||
|
||||
export default Developers;
|
||||
|
||||
@ -7,35 +7,10 @@ exports[`test Developers should render the component for contributors with items
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.emotion-12 {
|
||||
margin: 10px 0 10px 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.emotion-12 > * {
|
||||
.emotion-8 > * {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
<Developers
|
||||
type="contributors"
|
||||
>
|
||||
@ -97,22 +72,28 @@ exports[`test Developers should render the component for contributors with items
|
||||
</WithStyles(ForwardRef(Typography))>
|
||||
</ForwardRef(Text)>
|
||||
</StyledText>
|
||||
<Content>
|
||||
<div
|
||||
className="emotion-12 emotion-13"
|
||||
<StyledBox
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
margin="10px 0 10px 0"
|
||||
>
|
||||
<Details
|
||||
<Box
|
||||
className="emotion-8 emotion-9"
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
margin="10px 0 10px 0"
|
||||
>
|
||||
<Styled(MuiBox)
|
||||
className="emotion-8 emotion-9"
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
margin="10px 0 10px 0"
|
||||
>
|
||||
<div
|
||||
className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
|
||||
>
|
||||
<ForwardRef(ToolTip)
|
||||
key="dave.methvin@gmail.com"
|
||||
>
|
||||
<span
|
||||
className="emotion-8 emotion-9"
|
||||
>
|
||||
<AvatarTooltip
|
||||
email="dave.methvin@gmail.com"
|
||||
name="dmethvin"
|
||||
version="1.0.0"
|
||||
>
|
||||
<ForwardRef(ToolTip)
|
||||
title="dmethvin"
|
||||
>
|
||||
<WithStyles(ForwardRef(Tooltip))
|
||||
@ -137,27 +118,34 @@ exports[`test Developers should render the component for contributors with items
|
||||
}
|
||||
title="dmethvin"
|
||||
>
|
||||
<a
|
||||
<ForwardRef(Avatar)
|
||||
alt="dmethvin"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="dmethvin"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
alt="dmethvin"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
target="_top"
|
||||
title="dmethvin"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="dmethvin"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
aria-label="dmethvin"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="dmethvin"
|
||||
alt="dmethvin"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
classes={
|
||||
Object {
|
||||
"circle": "MuiAvatar-circle",
|
||||
@ -169,10 +157,24 @@ exports[`test Developers should render the component for contributors with items
|
||||
"square": "MuiAvatar-square",
|
||||
}
|
||||
}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="dmethvin"
|
||||
>
|
||||
<div
|
||||
aria-label="dmethvin"
|
||||
aria-describedby={null}
|
||||
className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="dmethvin"
|
||||
>
|
||||
<ForwardRef
|
||||
className="MuiAvatar-fallback"
|
||||
@ -214,18 +216,11 @@ exports[`test Developers should render the component for contributors with items
|
||||
</ForwardRef(Avatar)>
|
||||
</WithStyles(ForwardRef(Avatar))>
|
||||
</ForwardRef(Avatar)>
|
||||
</a>
|
||||
<ForwardRef(Popper)
|
||||
anchorEl={
|
||||
<a
|
||||
class=""
|
||||
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
|
||||
target="_top"
|
||||
title="dmethvin"
|
||||
>
|
||||
<div
|
||||
aria-label="dmethvin"
|
||||
class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
title="dmethvin"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -239,7 +234,6 @@ exports[`test Developers should render the component for contributors with items
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
className="MuiTooltip-popper"
|
||||
id={null}
|
||||
@ -260,21 +254,8 @@ exports[`test Developers should render the component for contributors with items
|
||||
</ForwardRef(Tooltip)>
|
||||
</WithStyles(ForwardRef(Tooltip))>
|
||||
</ForwardRef(ToolTip)>
|
||||
</AvatarTooltip>
|
||||
</span>
|
||||
</Details>
|
||||
<Details
|
||||
<ForwardRef(ToolTip)
|
||||
key="m.goleb@gmail.com"
|
||||
>
|
||||
<span
|
||||
className="emotion-8 emotion-9"
|
||||
>
|
||||
<AvatarTooltip
|
||||
email="m.goleb@gmail.com"
|
||||
name="mgol"
|
||||
version="1.0.0"
|
||||
>
|
||||
<ForwardRef(ToolTip)
|
||||
title="mgol"
|
||||
>
|
||||
<WithStyles(ForwardRef(Tooltip))
|
||||
@ -299,27 +280,34 @@ exports[`test Developers should render the component for contributors with items
|
||||
}
|
||||
title="mgol"
|
||||
>
|
||||
<a
|
||||
<ForwardRef(Avatar)
|
||||
alt="mgol"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="mgol"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
alt="mgol"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
target="_top"
|
||||
title="mgol"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="mgol"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
aria-label="mgol"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="mgol"
|
||||
alt="mgol"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
classes={
|
||||
Object {
|
||||
"circle": "MuiAvatar-circle",
|
||||
@ -331,10 +319,24 @@ exports[`test Developers should render the component for contributors with items
|
||||
"square": "MuiAvatar-square",
|
||||
}
|
||||
}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="mgol"
|
||||
>
|
||||
<div
|
||||
aria-label="mgol"
|
||||
aria-describedby={null}
|
||||
className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="mgol"
|
||||
>
|
||||
<ForwardRef
|
||||
className="MuiAvatar-fallback"
|
||||
@ -376,18 +378,11 @@ exports[`test Developers should render the component for contributors with items
|
||||
</ForwardRef(Avatar)>
|
||||
</WithStyles(ForwardRef(Avatar))>
|
||||
</ForwardRef(Avatar)>
|
||||
</a>
|
||||
<ForwardRef(Popper)
|
||||
anchorEl={
|
||||
<a
|
||||
class=""
|
||||
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
|
||||
target="_top"
|
||||
title="mgol"
|
||||
>
|
||||
<div
|
||||
aria-label="mgol"
|
||||
class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
title="mgol"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -401,7 +396,6 @@ exports[`test Developers should render the component for contributors with items
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
className="MuiTooltip-popper"
|
||||
id={null}
|
||||
@ -422,11 +416,10 @@ exports[`test Developers should render the component for contributors with items
|
||||
</ForwardRef(Tooltip)>
|
||||
</WithStyles(ForwardRef(Tooltip))>
|
||||
</ForwardRef(ToolTip)>
|
||||
</AvatarTooltip>
|
||||
</span>
|
||||
</Details>
|
||||
</div>
|
||||
</Content>
|
||||
</Styled(MuiBox)>
|
||||
</Box>
|
||||
</StyledBox>
|
||||
</Developers>
|
||||
`;
|
||||
|
||||
@ -437,35 +430,10 @@ exports[`test Developers should render the component for maintainers with items
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.emotion-12 {
|
||||
margin: 10px 0 10px 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.emotion-12 > * {
|
||||
.emotion-8 > * {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
<Developers
|
||||
type="maintainers"
|
||||
>
|
||||
@ -527,22 +495,28 @@ exports[`test Developers should render the component for maintainers with items
|
||||
</WithStyles(ForwardRef(Typography))>
|
||||
</ForwardRef(Text)>
|
||||
</StyledText>
|
||||
<Content>
|
||||
<div
|
||||
className="emotion-12 emotion-13"
|
||||
<StyledBox
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
margin="10px 0 10px 0"
|
||||
>
|
||||
<Details
|
||||
<Box
|
||||
className="emotion-8 emotion-9"
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
margin="10px 0 10px 0"
|
||||
>
|
||||
<Styled(MuiBox)
|
||||
className="emotion-8 emotion-9"
|
||||
display="flex"
|
||||
flexWrap="wrap"
|
||||
margin="10px 0 10px 0"
|
||||
>
|
||||
<div
|
||||
className="MuiBox-root MuiBox-root-32 emotion-8 emotion-9"
|
||||
>
|
||||
<ForwardRef(ToolTip)
|
||||
key="dave.methvin@gmail.com"
|
||||
>
|
||||
<span
|
||||
className="emotion-8 emotion-9"
|
||||
>
|
||||
<AvatarTooltip
|
||||
email="dave.methvin@gmail.com"
|
||||
name="dmethvin"
|
||||
version="1.0.0"
|
||||
>
|
||||
<ForwardRef(ToolTip)
|
||||
title="dmethvin"
|
||||
>
|
||||
<WithStyles(ForwardRef(Tooltip))
|
||||
@ -567,27 +541,34 @@ exports[`test Developers should render the component for maintainers with items
|
||||
}
|
||||
title="dmethvin"
|
||||
>
|
||||
<a
|
||||
<ForwardRef(Avatar)
|
||||
alt="dmethvin"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="dmethvin"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
alt="dmethvin"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
target="_top"
|
||||
title="dmethvin"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="dmethvin"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
aria-label="dmethvin"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="dmethvin"
|
||||
alt="dmethvin"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
classes={
|
||||
Object {
|
||||
"circle": "MuiAvatar-circle",
|
||||
@ -599,10 +580,24 @@ exports[`test Developers should render the component for maintainers with items
|
||||
"square": "MuiAvatar-square",
|
||||
}
|
||||
}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="dmethvin"
|
||||
>
|
||||
<div
|
||||
aria-label="dmethvin"
|
||||
aria-describedby={null}
|
||||
className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="dmethvin"
|
||||
>
|
||||
<ForwardRef
|
||||
className="MuiAvatar-fallback"
|
||||
@ -644,18 +639,11 @@ exports[`test Developers should render the component for maintainers with items
|
||||
</ForwardRef(Avatar)>
|
||||
</WithStyles(ForwardRef(Avatar))>
|
||||
</ForwardRef(Avatar)>
|
||||
</a>
|
||||
<ForwardRef(Popper)
|
||||
anchorEl={
|
||||
<a
|
||||
class=""
|
||||
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
|
||||
target="_top"
|
||||
title="dmethvin"
|
||||
>
|
||||
<div
|
||||
aria-label="dmethvin"
|
||||
class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
title="dmethvin"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -669,7 +657,6 @@ exports[`test Developers should render the component for maintainers with items
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
className="MuiTooltip-popper"
|
||||
id={null}
|
||||
@ -690,21 +677,8 @@ exports[`test Developers should render the component for maintainers with items
|
||||
</ForwardRef(Tooltip)>
|
||||
</WithStyles(ForwardRef(Tooltip))>
|
||||
</ForwardRef(ToolTip)>
|
||||
</AvatarTooltip>
|
||||
</span>
|
||||
</Details>
|
||||
<Details
|
||||
<ForwardRef(ToolTip)
|
||||
key="m.goleb@gmail.com"
|
||||
>
|
||||
<span
|
||||
className="emotion-8 emotion-9"
|
||||
>
|
||||
<AvatarTooltip
|
||||
email="m.goleb@gmail.com"
|
||||
name="mgol"
|
||||
version="1.0.0"
|
||||
>
|
||||
<ForwardRef(ToolTip)
|
||||
title="mgol"
|
||||
>
|
||||
<WithStyles(ForwardRef(Tooltip))
|
||||
@ -729,27 +703,34 @@ exports[`test Developers should render the component for maintainers with items
|
||||
}
|
||||
title="mgol"
|
||||
>
|
||||
<a
|
||||
<ForwardRef(Avatar)
|
||||
alt="mgol"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="mgol"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
alt="mgol"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
target="_top"
|
||||
title="mgol"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="mgol"
|
||||
>
|
||||
<WithStyles(ForwardRef(Avatar))
|
||||
aria-label="mgol"
|
||||
>
|
||||
<ForwardRef(Avatar)
|
||||
aria-label="mgol"
|
||||
alt="mgol"
|
||||
aria-describedby={null}
|
||||
className=""
|
||||
classes={
|
||||
Object {
|
||||
"circle": "MuiAvatar-circle",
|
||||
@ -761,10 +742,24 @@ exports[`test Developers should render the component for maintainers with items
|
||||
"square": "MuiAvatar-square",
|
||||
}
|
||||
}
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="mgol"
|
||||
>
|
||||
<div
|
||||
aria-label="mgol"
|
||||
aria-describedby={null}
|
||||
className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
title="mgol"
|
||||
>
|
||||
<ForwardRef
|
||||
className="MuiAvatar-fallback"
|
||||
@ -806,18 +801,11 @@ exports[`test Developers should render the component for maintainers with items
|
||||
</ForwardRef(Avatar)>
|
||||
</WithStyles(ForwardRef(Avatar))>
|
||||
</ForwardRef(Avatar)>
|
||||
</a>
|
||||
<ForwardRef(Popper)
|
||||
anchorEl={
|
||||
<a
|
||||
class=""
|
||||
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
|
||||
target="_top"
|
||||
title="mgol"
|
||||
>
|
||||
<div
|
||||
aria-label="mgol"
|
||||
class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
|
||||
title="mgol"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -831,7 +819,6 @@ exports[`test Developers should render the component for maintainers with items
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
className="MuiTooltip-popper"
|
||||
id={null}
|
||||
@ -852,11 +839,10 @@ exports[`test Developers should render the component for maintainers with items
|
||||
</ForwardRef(Tooltip)>
|
||||
</WithStyles(ForwardRef(Tooltip))>
|
||||
</ForwardRef(ToolTip)>
|
||||
</AvatarTooltip>
|
||||
</span>
|
||||
</Details>
|
||||
</div>
|
||||
</Content>
|
||||
</Styled(MuiBox)>
|
||||
</Box>
|
||||
</StyledBox>
|
||||
</Developers>
|
||||
`;
|
||||
|
||||
|
||||
12
src/components/Developers/get-unique-developer-values.ts
Normal file
12
src/components/Developers/get-unique-developer-values.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Developer } from '../../../types/packageMeta';
|
||||
|
||||
function getUniqueDeveloperValues(developers?: Array<Developer>): undefined | Array<Developer> {
|
||||
if (!developers) return;
|
||||
return developers.reduce(
|
||||
(accumulator: Array<Developer>, current: Developer) =>
|
||||
accumulator.some(developer => developer.email === current.email) ? accumulator : [...accumulator, current],
|
||||
[]
|
||||
);
|
||||
}
|
||||
|
||||
export default getUniqueDeveloperValues;
|
||||
@ -1 +1 @@
|
||||
export { default } from './Developers';
|
||||
export { default, DeveloperType } from './Developers';
|
||||
|
||||
@ -24,9 +24,16 @@ export interface PackageMetaInterface {
|
||||
type?: string;
|
||||
url?: string;
|
||||
};
|
||||
maintainers?: Array<Developer>;
|
||||
contributors?: Array<Developer>;
|
||||
};
|
||||
_uplinks: {};
|
||||
}
|
||||
export interface Developer {
|
||||
name: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
}
|
||||
|
||||
interface LicenseInterface {
|
||||
type: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user