cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

fix: introduced forwardRef (#163)

Browse Source
This commit is contained in:
Priscila Oliveira 2019-10-06 18:30:05 +02:00 committed by Juan Picado @jotadeveloper
parent 909a8d9fb8
commit 626bcce5cb
13 changed files with 105 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Author/Author.tsx
View File

@ -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;

2
src/components/AvatarTooltip/AvatarTooltip.tsx
View File

@ -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;

128
src/components/Developers/__snapshots__/Developers.test.tsx.snap
View File

@ -107,25 +107,29 @@ exports[`test Developers should render the component for contributors with items
target="_top"
title="dmethvin"
>
<WithStyles(ForwardRef(Avatar))
<ForwardRef(Avatar)
aria-label="dmethvin"
>
<ForwardRef(Avatar)
<WithStyles(ForwardRef(Avatar))
aria-label="dmethvin"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
<ForwardRef(Avatar)
aria-label="dmethvin"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="dmethvin"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
</ForwardRef(Avatar)>
</a>
<ForwardRef(Popper)
anchorEl={
@ -199,25 +203,29 @@ exports[`test Developers should render the component for contributors with items
target="_top"
title="mgol"
>
<WithStyles(ForwardRef(Avatar))
<ForwardRef(Avatar)
aria-label="mgol"
>
<ForwardRef(Avatar)
<WithStyles(ForwardRef(Avatar))
aria-label="mgol"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
<ForwardRef(Avatar)
aria-label="mgol"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="mgol"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
</ForwardRef(Avatar)>
</a>
<ForwardRef(Popper)
anchorEl={
@ -357,25 +365,29 @@ exports[`test Developers should render the component for maintainers with items
target="_top"
title="dmethvin"
>
<WithStyles(ForwardRef(Avatar))
<ForwardRef(Avatar)
aria-label="dmethvin"
>
<ForwardRef(Avatar)
<WithStyles(ForwardRef(Avatar))
aria-label="dmethvin"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
<ForwardRef(Avatar)
aria-label="dmethvin"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="dmethvin"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
</ForwardRef(Avatar)>
</a>
<ForwardRef(Popper)
anchorEl={
@ -449,25 +461,29 @@ exports[`test Developers should render the component for maintainers with items
target="_top"
title="mgol"
>
<WithStyles(ForwardRef(Avatar))
<ForwardRef(Avatar)
aria-label="mgol"
>
<ForwardRef(Avatar)
<WithStyles(ForwardRef(Avatar))
aria-label="mgol"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
<ForwardRef(Avatar)
aria-label="mgol"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="mgol"
className="MuiAvatar-root MuiAvatar-colorDefault"
/>
</ForwardRef(Avatar)>
</WithStyles(ForwardRef(Avatar))>
</ForwardRef(Avatar)>
</a>
<ForwardRef(Popper)
anchorEl={

4
src/components/Engines/Engines.tsx
View File

@ -1,12 +1,14 @@
import React, { Component, ReactElement } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItemText from '@material-ui/core/ListItemText';
import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
import { Heading, EngineListItem } from './styles';
import Avatar from '../../muiComponents/Avatar';
// @ts-ignore
import node from './img/node.png';
import npm from '../Install/img/npm.svg';

2
src/components/Install/InstallListItem.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import styled from 'react-emotion';
import Avatar from '@material-ui/core/Avatar';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import CopyToClipBoard from '../CopyToClipBoard';
import Avatar from '../../muiComponents/Avatar';
// logos of package managers
import npmLogo from './img/npm.svg';

2
src/components/Package/styles.ts
View File

@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItemText from '@material-ui/core/ListItemText';
import Photo from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import { breakpoints } from '../../utils/styles/media';
@ -13,6 +12,7 @@ import Label from '../Label';
import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes';
import { default as MuiIconButton } from '../../muiComponents/IconButton';
import { default as Photo } from '../../muiComponents/Avatar';
export const OverviewItem = styled('span')`
&& {

3
src/components/Repository/Repository.tsx
View File

@ -1,7 +1,6 @@
/* eslint react/jsx-max-depth: 0 */
import React, { Component, Fragment, ReactElement } from 'react';
import Avatar from '@material-ui/core/Avatar';
import List from '@material-ui/core/List';
import { DetailContextConsumer } from '../../pages/Version';
@ -12,6 +11,8 @@ import { Heading, GithubLink, RepositoryListItem, RepositoryListItemText } from
import git from './img/git.png';
import { isURL } from '../../utils/url';
import Avatar from '../../muiComponents/Avatar';
class Repository extends Component {
public render(): ReactElement<HTMLElement> {
return (

13
src/muiComponents/Avatar/Avatar.tsx Normal file
View File

@ -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<AvatarRef, AvatarProps>(function Avatar(props, ref) {
return <MaterialUIAvatar {...props} ref={ref} />;
});
export default Avatar;

1
src/muiComponents/Avatar/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Avatar';

4
src/muiComponents/IconButton/IconButton.tsx
View File

@ -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<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
return <MuiIconButton {...props} ref={ref} />;
return <MaterialUIIconButton {...props} ref={ref} />;
});
export default IconButton;

4
src/muiComponents/TextField/TextField.tsx
View File

@ -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<TextFieldRef, TextFieldProps>(function ToolTip({ InputProps, classes, ...props }, ref) {
return (
<TextFieldMaterialUI
<MaterialUITextField
{...props}
InputProps={{
...InputProps,

4
src/muiComponents/Tooltip/Tooltip.tsx
View File

@ -1,5 +1,5 @@
import React, { forwardRef } from 'react';
import { default as MuiTooltip, TooltipProps } from '@material-ui/core/Tooltip';
import { default as MaterialUITooltip, TooltipProps } from '@material-ui/core/Tooltip';
// The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
type TooltipRef = HTMLElementTagNameMap['div'];
@ -7,7 +7,7 @@ type TooltipRef = HTMLElementTagNameMap['div'];
/* eslint-disable verdaccio/jsx-spread */
// eslint-disable-next-line react/display-name
const Tooltip = forwardRef<TooltipRef, TooltipProps>(function ToolTip(props, ref) {
return <MuiTooltip {...props} innerRef={ref} />;
return <MaterialUITooltip {...props} innerRef={ref} />;
});
export default Tooltip;

2
src/pages/Version/Version.test.tsx
View File

@ -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', () => () => <div>{'Not found'}</div>);