From 626bcce5cba7cd2ef21d7f23eefc06de07151273 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 6 Oct 2019 18:30:05 +0200 Subject: [PATCH] fix: introduced forwardRef (#163) --- src/components/Author/Author.tsx | 7 +- .../AvatarTooltip/AvatarTooltip.tsx | 2 +- .../__snapshots__/Developers.test.tsx.snap | 128 ++++++++++-------- src/components/Engines/Engines.tsx | 4 +- src/components/Install/InstallListItem.tsx | 2 +- src/components/Package/styles.ts | 2 +- src/components/Repository/Repository.tsx | 3 +- src/muiComponents/Avatar/Avatar.tsx | 13 ++ src/muiComponents/Avatar/index.ts | 1 + src/muiComponents/IconButton/IconButton.tsx | 4 +- src/muiComponents/TextField/TextField.tsx | 4 +- src/muiComponents/Tooltip/Tooltip.tsx | 4 +- src/pages/Version/Version.test.tsx | 2 +- 13 files changed, 105 insertions(+), 71 deletions(-) create mode 100644 src/muiComponents/Avatar/Avatar.tsx create mode 100644 src/muiComponents/Avatar/index.ts diff --git a/src/components/Author/Author.tsx b/src/components/Author/Author.tsx index f5a3225..4e76e1d 100644 --- a/src/components/Author/Author.tsx +++ b/src/components/Author/Author.tsx @@ -1,13 +1,14 @@ import React, { FC, useContext } from 'react'; -import Avatar from '@material-ui/core/Avatar'; import List from '@material-ui/core/List'; import { DetailContext } from '../../pages/Version'; import { Heading, AuthorListItem, AuthorListItemText } from './styles'; import { isEmail } from '../../utils/url'; -const Authors: FC = () => { +import Avatar from '../../muiComponents/Avatar'; + +const Author: FC = () => { const { packageMeta } = useContext(DetailContext); if (!packageMeta) { @@ -41,4 +42,4 @@ const Authors: FC = () => { ); }; -export default Authors; +export default Author; diff --git a/src/components/AvatarTooltip/AvatarTooltip.tsx b/src/components/AvatarTooltip/AvatarTooltip.tsx index 941772a..7a4c11d 100644 --- a/src/components/AvatarTooltip/AvatarTooltip.tsx +++ b/src/components/AvatarTooltip/AvatarTooltip.tsx @@ -1,9 +1,9 @@ import React, { FC } from 'react'; -import Avatar from '@material-ui/core/Avatar'; import { isEmail } from '../../utils/url'; import Tooltip from '../../muiComponents/Tooltip'; +import Avatar from '../../muiComponents/Avatar'; export interface AvatarDeveloper { name: string; diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap index eb9ea57..5f37f2d 100644 --- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap +++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap @@ -107,25 +107,29 @@ exports[`test Developers should render the component for contributors with items target="_top" title="dmethvin" > - - -
- - + classes={ + Object { + "colorDefault": "MuiAvatar-colorDefault", + "img": "MuiAvatar-img", + "root": "MuiAvatar-root", + } + } + > +
+ + + - - -
- - + classes={ + Object { + "colorDefault": "MuiAvatar-colorDefault", + "img": "MuiAvatar-img", + "root": "MuiAvatar-root", + } + } + > +
+ + + - - -
- - + classes={ + Object { + "colorDefault": "MuiAvatar-colorDefault", + "img": "MuiAvatar-img", + "root": "MuiAvatar-root", + } + } + > +
+ + + - - -
- - + classes={ + Object { + "colorDefault": "MuiAvatar-colorDefault", + "img": "MuiAvatar-img", + "root": "MuiAvatar-root", + } + } + > +
+ + + { return ( diff --git a/src/muiComponents/Avatar/Avatar.tsx b/src/muiComponents/Avatar/Avatar.tsx new file mode 100644 index 0000000..90b5984 --- /dev/null +++ b/src/muiComponents/Avatar/Avatar.tsx @@ -0,0 +1,13 @@ +import React, { forwardRef } from 'react'; +import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avatar'; + +// The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop +type AvatarRef = HTMLElementTagNameMap['div']; + +/* eslint-disable verdaccio/jsx-spread */ +// eslint-disable-next-line react/display-name +const Avatar = forwardRef(function Avatar(props, ref) { + return ; +}); + +export default Avatar; diff --git a/src/muiComponents/Avatar/index.ts b/src/muiComponents/Avatar/index.ts new file mode 100644 index 0000000..ea51b74 --- /dev/null +++ b/src/muiComponents/Avatar/index.ts @@ -0,0 +1 @@ +export { default } from './Avatar'; diff --git a/src/muiComponents/IconButton/IconButton.tsx b/src/muiComponents/IconButton/IconButton.tsx index 9b344d5..6df6870 100644 --- a/src/muiComponents/IconButton/IconButton.tsx +++ b/src/muiComponents/IconButton/IconButton.tsx @@ -1,12 +1,12 @@ import React, { forwardRef } from 'react'; -import { default as MuiIconButton, IconButtonProps } from '@material-ui/core/IconButton'; +import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton'; type IconButtonRef = HTMLElementTagNameMap['button']; /* eslint-disable verdaccio/jsx-spread */ // eslint-disable-next-line react/display-name const IconButton = forwardRef(function IconButton(props, ref) { - return ; + return ; }); export default IconButton; diff --git a/src/muiComponents/TextField/TextField.tsx b/src/muiComponents/TextField/TextField.tsx index c26edd5..594ab31 100644 --- a/src/muiComponents/TextField/TextField.tsx +++ b/src/muiComponents/TextField/TextField.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from 'react'; -import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField'; +import { default as MaterialUITextField, TextFieldProps } from '@material-ui/core/TextField'; // The default element type of MUI's TextField is 'div' type TextFieldRef = HTMLElementTagNameMap['div']; @@ -8,7 +8,7 @@ type TextFieldRef = HTMLElementTagNameMap['div']; // eslint-disable-next-line react/display-name const TextField = forwardRef(function ToolTip({ InputProps, classes, ...props }, ref) { return ( - (function ToolTip(props, ref) { - return ; + return ; }); export default Tooltip; diff --git a/src/pages/Version/Version.test.tsx b/src/pages/Version/Version.test.tsx index c66d383..732615d 100644 --- a/src/pages/Version/Version.test.tsx +++ b/src/pages/Version/Version.test.tsx @@ -10,7 +10,7 @@ import { waitForElement } from '@testing-library/dom'; import ErrorBoundary from '../../App/AppError'; // :-) we mock this otherways fails on render, some weird issue on material-ui -jest.mock('@material-ui/core/Avatar'); +jest.mock('../../muiComponents/Avatar'); // eslint-disable-next-line react/display-name jest.mock('../../components/NotFound', () => () =>
{'Not found'}
);