fix: listItem Component - Introduced ForwardRef (#183)

* refactor: introduced forwardRef

* fix: fixed button prop listItem

* chore: rollback package upgrade

* fix: fixed snap
This commit is contained in:
Priscila Oliveira 2019-10-12 21:11:23 +02:00 committed by Juan Picado @jotadeveloper
parent d2c1130efd
commit 82d7107de7
16 changed files with 43 additions and 27 deletions

View File

@ -2,4 +2,4 @@
exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-9q3x3c eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

View File

@ -1,15 +1,13 @@
import styled from 'react-emotion';
import { default as MuiFab } from '@material-ui/core/Fab';
import ListItem from '@material-ui/core/ListItem';
import colors from '../../utils/styles/colors';
import ListItem from '../../muiComponents/ListItem';
export const ActionListItem = styled(ListItem)({
'&&': {
paddingTop: 0,
paddingLeft: 0,
paddingRight: 0,
},
paddingTop: 0,
paddingLeft: 0,
paddingRight: 0,
});
export const Fab = styled(MuiFab)({

View File

@ -1,9 +1,9 @@
import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import ListItemText from '@material-ui/core/ListItemText';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
export const Heading = styled(Typography)({
'&&': {

View File

@ -1,13 +1,12 @@
import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItem from '../../muiComponents/ListItem';
export const TitleListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
paddingBottom: 0,
},
paddingLeft: 0,
paddingRight: 0,
paddingBottom: 0,
});
export const TitleListItemText = styled(ListItemText)({

View File

@ -1,11 +1,11 @@
import styled from 'react-emotion';
import { default as MuiFab } from '@material-ui/core/Fab';
import Chip from '@material-ui/core/Chip';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
export const Heading = styled(Typography)({
'&&': {

View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-dt93b2 et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-dt93b2 et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;

View File

@ -1,8 +1,8 @@
import styled from 'react-emotion';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
export const Heading = styled(Typography)({
'&&': {
@ -12,7 +12,5 @@ export const Heading = styled(Typography)({
});
export const EngineListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
},
paddingLeft: 0,
});

View File

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

View File

@ -2,7 +2,6 @@ import React from 'react';
import BugReport from '@material-ui/icons/BugReport';
import Grid from '@material-ui/core/Grid';
import HomeIcon from '@material-ui/icons/Home';
import ListItem from '@material-ui/core/ListItem';
import { PackageMetaInterface, Author as PackageAuthor } from 'types/packageMeta';
import Tag from '../Tag';
@ -10,6 +9,7 @@ import fileSizeSI from '../../utils/file-size';
import { formatDate, formatDateDistance } from '../../utils/package';
import Tooltip from '../../muiComponents/Tooltip';
import { isURL } from '../../utils/url';
import ListItem from '../../muiComponents/ListItem';
import {
Author,

View File

@ -1,12 +1,12 @@
import styled from 'react-emotion';
import Grid from '@material-ui/core/Grid';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import ListItemText from '@material-ui/core/ListItemText';
import Github from '../../icons/GitHub';
import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
export const Heading = styled(Typography)({
'&&': {

View File

@ -1,10 +1,10 @@
import React, { useContext } from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import { DetailContext } from '../../pages/Version';
import NoItems from '../NoItems';
import { formatDateDistance } from '../../utils/package';
import ListItem from '../../muiComponents/ListItem';
import { Heading, Spacer, ListItemText } from './styles';

View File

@ -1,11 +1,11 @@
import React from 'react';
import List from '@material-ui/core/List';
import Link from '@material-ui/core/Link';
import ListItem from '@material-ui/core/ListItem';
import { Link as RouterLink } from 'react-router-dom';
import { Versions, Time } from '../../../types/packageMeta';
import { formatDateDistance } from '../../utils/package';
import ListItem from '../../muiComponents/ListItem';
import { Spacer, ListItemText } from './styles';

View File

@ -1,8 +1,8 @@
import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import { DistTags } from '../../../types/packageMeta';
import ListItem from '../../muiComponents/ListItem';
import { Spacer, ListItemText } from './styles';

View File

@ -0,0 +1,20 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem';
type ListItemRef<T extends boolean = false> = T extends true ? HTMLDivElement : HTMLLIElement;
interface Props<T extends boolean = false> extends Omit<ListItemProps, 'button'> {
button?: T;
}
const ListItem = forwardRef(function ListItem<T extends boolean>({ button, ...props }: Props<T>, ref: React.Ref<ListItemRef<T>>) {
// it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return <MaterialUIListItem {...props} button={button as any} innerRef={ref} />;
});
ListItem.defaultProps = {
button: false,
};
export default ListItem;

View File

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

View File

@ -14023,4 +14023,4 @@ yup@^0.27.0:
lodash "^4.17.11"
property-expr "^1.5.0"
synchronous-promise "^2.0.6"
toposort "^2.0.2"
toposort "^2.0.2"