diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap index 3da4e83e4..b6c99f4fd 100644 --- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap @@ -2,4 +2,4 @@ exports[` component should render the component in default state 1`] = `""`; -exports[` component when there is a button to download a tarball 1`] = `""`; +exports[` component when there is a button to download a tarball 1`] = `"
"`; diff --git a/src/components/ActionBar/styles.ts b/src/components/ActionBar/styles.ts index 8ef987c1e..6efd19f69 100644 --- a/src/components/ActionBar/styles.ts +++ b/src/components/ActionBar/styles.ts @@ -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)({ diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index 8b09ecbf2..80f8d12c7 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -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)({ '&&': { diff --git a/src/components/DetailSidebar/styles.ts b/src/components/DetailSidebar/styles.ts index b9ba2c8f7..664ce0d0f 100644 --- a/src/components/DetailSidebar/styles.ts +++ b/src/components/DetailSidebar/styles.ts @@ -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)({ diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index 1ca45c50e..f3bf96b62 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -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)({ '&&': { diff --git a/src/components/Engines/__snapshots__/Engines.test.tsx.snap b/src/components/Engines/__snapshots__/Engines.test.tsx.snap index ec651b4a7..01088824b 100644 --- a/src/components/Engines/__snapshots__/Engines.test.tsx.snap +++ b/src/components/Engines/__snapshots__/Engines.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
    node JS
    >= 0.1.98
    NPM version
    >3
"`; +exports[` component should render the component in default state 1`] = `"
    node JS
    >= 0.1.98
    NPM version
    >3
"`; diff --git a/src/components/Engines/styles.ts b/src/components/Engines/styles.ts index 02cac34a5..2dac66ce5 100644 --- a/src/components/Engines/styles.ts +++ b/src/components/Engines/styles.ts @@ -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, }); diff --git a/src/components/Install/InstallListItem.tsx b/src/components/Install/InstallListItem.tsx index ff9446947..29b28145f 100644 --- a/src/components/Install/InstallListItem.tsx +++ b/src/components/Install/InstallListItem.tsx @@ -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'; diff --git a/src/components/Package/Package.tsx b/src/components/Package/Package.tsx index dae7e91bf..27fbc7fc1 100644 --- a/src/components/Package/Package.tsx +++ b/src/components/Package/Package.tsx @@ -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, diff --git a/src/components/Repository/styles.ts b/src/components/Repository/styles.ts index 29b56361b..4317a4da2 100644 --- a/src/components/Repository/styles.ts +++ b/src/components/Repository/styles.ts @@ -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)({ '&&': { diff --git a/src/components/UpLinks/UpLinks.tsx b/src/components/UpLinks/UpLinks.tsx index f34e4de96..80d2e8c99 100644 --- a/src/components/UpLinks/UpLinks.tsx +++ b/src/components/UpLinks/UpLinks.tsx @@ -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'; diff --git a/src/components/Versions/VersionsHistoryList.tsx b/src/components/Versions/VersionsHistoryList.tsx index d6021f108..3e1bb6181 100644 --- a/src/components/Versions/VersionsHistoryList.tsx +++ b/src/components/Versions/VersionsHistoryList.tsx @@ -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'; diff --git a/src/components/Versions/VersionsTagList.tsx b/src/components/Versions/VersionsTagList.tsx index f35309680..9d6ba30b7 100644 --- a/src/components/Versions/VersionsTagList.tsx +++ b/src/components/Versions/VersionsTagList.tsx @@ -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'; diff --git a/src/muiComponents/ListItem/ListItem.tsx b/src/muiComponents/ListItem/ListItem.tsx new file mode 100644 index 000000000..c32d72537 --- /dev/null +++ b/src/muiComponents/ListItem/ListItem.tsx @@ -0,0 +1,20 @@ +import React, { forwardRef } from 'react'; +import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem'; + +type ListItemRef = T extends true ? HTMLDivElement : HTMLLIElement; + +interface Props extends Omit { + button?: T; +} + +const ListItem = forwardRef(function ListItem({ button, ...props }: Props, ref: React.Ref>) { + // 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 ; +}); + +ListItem.defaultProps = { + button: false, +}; + +export default ListItem; diff --git a/src/muiComponents/ListItem/index.ts b/src/muiComponents/ListItem/index.ts new file mode 100644 index 000000000..741aed270 --- /dev/null +++ b/src/muiComponents/ListItem/index.ts @@ -0,0 +1 @@ +export { default } from './ListItem'; diff --git a/yarn.lock b/yarn.lock index 7c1bf8512..534e1004b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" \ No newline at end of file + toposort "^2.0.2"