Skip to content
This repository was archived by the owner on Jan 16, 2022. It is now read-only.

Commit 626bcce

Browse files
priscilawebdevjuanpicado
priscilawebdev
authored and
juanpicado
committed
fix: introduced forwardRef (#163)
1 parent 909a8d9 commit 626bcce

File tree

13 files changed

+105
-71
lines changed

13 files changed

+105
-71
lines changed

‎src/components/Author/Author.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { FC, useContext } from 'react';
22

3-
import Avatar from '@material-ui/core/Avatar';
43
import List from '@material-ui/core/List';
54

65
import { DetailContext } from '../../pages/Version';
76
import { Heading, AuthorListItem, AuthorListItemText } from './styles';
87
import { isEmail } from '../../utils/url';
98

10-
const Authors: FC = () => {
9+
import Avatar from '../../muiComponents/Avatar';
10+
11+
const Author: FC = () => {
1112
const { packageMeta } = useContext(DetailContext);
1213

1314
if (!packageMeta) {
@@ -41,4 +42,4 @@ const Authors: FC = () => {
4142
);
4243
};
4344

44-
export default Authors;
45+
export default Author;

‎src/components/AvatarTooltip/AvatarTooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { FC } from 'react';
22

3-
import Avatar from '@material-ui/core/Avatar';
43
import { isEmail } from '../../utils/url';
54

65
import Tooltip from '../../muiComponents/Tooltip';
6+
import Avatar from '../../muiComponents/Avatar';
77

88
export interface AvatarDeveloper {
99
name: string;

‎src/components/Developers/__snapshots__/Developers.test.tsx.snap

Lines changed: 72 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -107,25 +107,29 @@ exports[`test Developers should render the component for contributors with items
107107
target="_top"
108108
title="dmethvin"
109109
>
110-
<WithStyles(ForwardRef(Avatar))
110+
<ForwardRef(Avatar)
111111
aria-label="dmethvin"
112112
>
113-
<ForwardRef(Avatar)
113+
<WithStyles(ForwardRef(Avatar))
114114
aria-label="dmethvin"
115-
classes={
116-
Object {
117-
"colorDefault": "MuiAvatar-colorDefault",
118-
"img": "MuiAvatar-img",
119-
"root": "MuiAvatar-root",
120-
}
121-
}
122115
>
123-
<div
116+
<ForwardRef(Avatar)
124117
aria-label="dmethvin"
125-
className="MuiAvatar-root MuiAvatar-colorDefault"
126-
/>
127-
</ForwardRef(Avatar)>
128-
</WithStyles(ForwardRef(Avatar))>
118+
classes={
119+
Object {
120+
"colorDefault": "MuiAvatar-colorDefault",
121+
"img": "MuiAvatar-img",
122+
"root": "MuiAvatar-root",
123+
}
124+
}
125+
>
126+
<div
127+
aria-label="dmethvin"
128+
className="MuiAvatar-root MuiAvatar-colorDefault"
129+
/>
130+
</ForwardRef(Avatar)>
131+
</WithStyles(ForwardRef(Avatar))>
132+
</ForwardRef(Avatar)>
129133
</a>
130134
<ForwardRef(Popper)
131135
anchorEl={
@@ -199,25 +203,29 @@ exports[`test Developers should render the component for contributors with items
199203
target="_top"
200204
title="mgol"
201205
>
202-
<WithStyles(ForwardRef(Avatar))
206+
<ForwardRef(Avatar)
203207
aria-label="mgol"
204208
>
205-
<ForwardRef(Avatar)
209+
<WithStyles(ForwardRef(Avatar))
206210
aria-label="mgol"
207-
classes={
208-
Object {
209-
"colorDefault": "MuiAvatar-colorDefault",
210-
"img": "MuiAvatar-img",
211-
"root": "MuiAvatar-root",
212-
}
213-
}
214211
>
215-
<div
212+
<ForwardRef(Avatar)
216213
aria-label="mgol"
217-
className="MuiAvatar-root MuiAvatar-colorDefault"
218-
/>
219-
</ForwardRef(Avatar)>
220-
</WithStyles(ForwardRef(Avatar))>
214+
classes={
215+
Object {
216+
"colorDefault": "MuiAvatar-colorDefault",
217+
"img": "MuiAvatar-img",
218+
"root": "MuiAvatar-root",
219+
}
220+
}
221+
>
222+
<div
223+
aria-label="mgol"
224+
className="MuiAvatar-root MuiAvatar-colorDefault"
225+
/>
226+
</ForwardRef(Avatar)>
227+
</WithStyles(ForwardRef(Avatar))>
228+
</ForwardRef(Avatar)>
221229
</a>
222230
<ForwardRef(Popper)
223231
anchorEl={
@@ -357,25 +365,29 @@ exports[`test Developers should render the component for maintainers with items
357365
target="_top"
358366
title="dmethvin"
359367
>
360-
<WithStyles(ForwardRef(Avatar))
368+
<ForwardRef(Avatar)
361369
aria-label="dmethvin"
362370
>
363-
<ForwardRef(Avatar)
371+
<WithStyles(ForwardRef(Avatar))
364372
aria-label="dmethvin"
365-
classes={
366-
Object {
367-
"colorDefault": "MuiAvatar-colorDefault",
368-
"img": "MuiAvatar-img",
369-
"root": "MuiAvatar-root",
370-
}
371-
}
372373
>
373-
<div
374+
<ForwardRef(Avatar)
374375
aria-label="dmethvin"
375-
className="MuiAvatar-root MuiAvatar-colorDefault"
376-
/>
377-
</ForwardRef(Avatar)>
378-
</WithStyles(ForwardRef(Avatar))>
376+
classes={
377+
Object {
378+
"colorDefault": "MuiAvatar-colorDefault",
379+
"img": "MuiAvatar-img",
380+
"root": "MuiAvatar-root",
381+
}
382+
}
383+
>
384+
<div
385+
aria-label="dmethvin"
386+
className="MuiAvatar-root MuiAvatar-colorDefault"
387+
/>
388+
</ForwardRef(Avatar)>
389+
</WithStyles(ForwardRef(Avatar))>
390+
</ForwardRef(Avatar)>
379391
</a>
380392
<ForwardRef(Popper)
381393
anchorEl={
@@ -449,25 +461,29 @@ exports[`test Developers should render the component for maintainers with items
449461
target="_top"
450462
title="mgol"
451463
>
452-
<WithStyles(ForwardRef(Avatar))
464+
<ForwardRef(Avatar)
453465
aria-label="mgol"
454466
>
455-
<ForwardRef(Avatar)
467+
<WithStyles(ForwardRef(Avatar))
456468
aria-label="mgol"
457-
classes={
458-
Object {
459-
"colorDefault": "MuiAvatar-colorDefault",
460-
"img": "MuiAvatar-img",
461-
"root": "MuiAvatar-root",
462-
}
463-
}
464469
>
465-
<div
470+
<ForwardRef(Avatar)
466471
aria-label="mgol"
467-
className="MuiAvatar-root MuiAvatar-colorDefault"
468-
/>
469-
</ForwardRef(Avatar)>
470-
</WithStyles(ForwardRef(Avatar))>
472+
classes={
473+
Object {
474+
"colorDefault": "MuiAvatar-colorDefault",
475+
"img": "MuiAvatar-img",
476+
"root": "MuiAvatar-root",
477+
}
478+
}
479+
>
480+
<div
481+
aria-label="mgol"
482+
className="MuiAvatar-root MuiAvatar-colorDefault"
483+
/>
484+
</ForwardRef(Avatar)>
485+
</WithStyles(ForwardRef(Avatar))>
486+
</ForwardRef(Avatar)>
471487
</a>
472488
<ForwardRef(Popper)
473489
anchorEl={

‎src/components/Engines/Engines.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { Component, ReactElement } from 'react';
22

3-
import Avatar from '@material-ui/core/Avatar';
43
import Grid from '@material-ui/core/Grid';
54
import List from '@material-ui/core/List';
65
import ListItemText from '@material-ui/core/ListItemText';
76

87
import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
98
import { Heading, EngineListItem } from './styles';
9+
10+
import Avatar from '../../muiComponents/Avatar';
11+
1012
// @ts-ignore
1113
import node from './img/node.png';
1214
import npm from '../Install/img/npm.svg';

‎src/components/Install/InstallListItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import styled from 'react-emotion';
3-
import Avatar from '@material-ui/core/Avatar';
43
import ListItem from '@material-ui/core/ListItem';
54
import ListItemText from '@material-ui/core/ListItemText';
65

76
import CopyToClipBoard from '../CopyToClipBoard';
7+
import Avatar from '../../muiComponents/Avatar';
88

99
// logos of package managers
1010
import npmLogo from './img/npm.svg';

‎src/components/Package/styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
44
import Grid from '@material-ui/core/Grid';
55
import List from '@material-ui/core/List';
66
import ListItemText from '@material-ui/core/ListItemText';
7-
import Photo from '@material-ui/core/Avatar';
87
import Typography from '@material-ui/core/Typography';
98

109
import { breakpoints } from '../../utils/styles/media';
@@ -13,6 +12,7 @@ import Label from '../Label';
1312
import colors from '../../utils/styles/colors';
1413
import { fontWeight } from '../../utils/styles/sizes';
1514
import { default as MuiIconButton } from '../../muiComponents/IconButton';
15+
import { default as Photo } from '../../muiComponents/Avatar';
1616

1717
export const OverviewItem = styled('span')`
1818
&& {

‎src/components/Repository/Repository.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint react/jsx-max-depth: 0 */
22

33
import React, { Component, Fragment, ReactElement } from 'react';
4-
import Avatar from '@material-ui/core/Avatar';
54
import List from '@material-ui/core/List';
65

76
import { DetailContextConsumer } from '../../pages/Version';
@@ -12,6 +11,8 @@ import { Heading, GithubLink, RepositoryListItem, RepositoryListItemText } from
1211
import git from './img/git.png';
1312
import { isURL } from '../../utils/url';
1413

14+
import Avatar from '../../muiComponents/Avatar';
15+
1516
class Repository extends Component {
1617
public render(): ReactElement<HTMLElement> {
1718
return (

‎src/muiComponents/Avatar/Avatar.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { forwardRef } from 'react';
2+
import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avatar';
3+
4+
// The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop
5+
type AvatarRef = HTMLElementTagNameMap['div'];
6+
7+
/* eslint-disable verdaccio/jsx-spread */
8+
// eslint-disable-next-line react/display-name
9+
const Avatar = forwardRef<AvatarRef, AvatarProps>(function Avatar(props, ref) {
10+
return <MaterialUIAvatar {...props} ref={ref} />;
11+
});
12+
13+
export default Avatar;

‎src/muiComponents/Avatar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './Avatar';

‎src/muiComponents/IconButton/IconButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { forwardRef } from 'react';
2-
import { default as MuiIconButton, IconButtonProps } from '@material-ui/core/IconButton';
2+
import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton';
33

44
type IconButtonRef = HTMLElementTagNameMap['button'];
55

66
/* eslint-disable verdaccio/jsx-spread */
77
// eslint-disable-next-line react/display-name
88
const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
9-
return <MuiIconButton {...props} ref={ref} />;
9+
return <MaterialUIIconButton {...props} ref={ref} />;
1010
});
1111

1212
export default IconButton;

0 commit comments

Comments
 (0)