From 8cbc0722ec301911de2bbe083bd1938d0972cc76 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 16 Jan 2020 23:04:25 +0000 Subject: [PATCH] fix feedback --- .../pagination/{Pagination.js => BasicPagination.js} | 0 .../{Pagination.tsx => BasicPagination.tsx} | 0 .../src/pages/components/pagination/PaginationLink.js | 6 +----- .../pages/components/pagination/PaginationLink.tsx | 8 +------- .../pages/components/pagination/PaginationLink2.js | 9 ++------- .../pages/components/pagination/PaginationLink2.tsx | 11 ++--------- ...inationOutlinedRounded.js => PaginationRounded.js} | 6 ++---- ...ationOutlinedRounded.tsx => PaginationRounded.tsx} | 6 ++---- docs/src/pages/components/pagination/pagination.md | 6 +++--- packages/material-ui-lab/src/Pagination/Pagination.js | 4 ++-- .../src/PaginationItem/PaginationItem.js | 6 +++--- 11 files changed, 18 insertions(+), 44 deletions(-) rename docs/src/pages/components/pagination/{Pagination.js => BasicPagination.js} (100%) rename docs/src/pages/components/pagination/{Pagination.tsx => BasicPagination.tsx} (100%) rename docs/src/pages/components/pagination/{PaginationOutlinedRounded.js => PaginationRounded.js} (58%) rename docs/src/pages/components/pagination/{PaginationOutlinedRounded.tsx => PaginationRounded.tsx} (61%) diff --git a/docs/src/pages/components/pagination/Pagination.js b/docs/src/pages/components/pagination/BasicPagination.js similarity index 100% rename from docs/src/pages/components/pagination/Pagination.js rename to docs/src/pages/components/pagination/BasicPagination.js diff --git a/docs/src/pages/components/pagination/Pagination.tsx b/docs/src/pages/components/pagination/BasicPagination.tsx similarity index 100% rename from docs/src/pages/components/pagination/Pagination.tsx rename to docs/src/pages/components/pagination/BasicPagination.tsx diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js index 79e32f91ad6963..0ee5fed2828c37 100644 --- a/docs/src/pages/components/pagination/PaginationLink.js +++ b/docs/src/pages/components/pagination/PaginationLink.js @@ -1,6 +1,6 @@ import React from 'react'; import { MemoryRouter as Router } from 'react-router'; -import { Link as RouterLink } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; @@ -13,10 +13,6 @@ const useStyles = makeStyles(theme => ({ }, })); -// The use of React.forwardRef will no longer be required for react-router-dom v6. -// See https://github.com/ReactTraining/react-router/issues/6056 -const Link = React.forwardRef((props, ref) => ); - export default function PaginationLink() { return ( diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx b/docs/src/pages/components/pagination/PaginationLink.tsx index f42abc0004cfbd..92713f6bdc6921 100644 --- a/docs/src/pages/components/pagination/PaginationLink.tsx +++ b/docs/src/pages/components/pagination/PaginationLink.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MemoryRouter as Router } from 'react-router'; -import { Link as RouterLink } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Pagination from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; @@ -15,12 +15,6 @@ const useStyles = makeStyles((theme: Theme) => }), ); -// The use of React.forwardRef will no longer be required for react-router-dom v6. -// See https://github.com/ReactTraining/react-router/issues/6056 -const Link = React.forwardRef((props, ref) => ( - -)); - export default function PaginationLink() { return ( diff --git a/docs/src/pages/components/pagination/PaginationLink2.js b/docs/src/pages/components/pagination/PaginationLink2.js index dfa44ba19f01aa..2eeee2f19d8be9 100644 --- a/docs/src/pages/components/pagination/PaginationLink2.js +++ b/docs/src/pages/components/pagination/PaginationLink2.js @@ -1,6 +1,6 @@ import React from 'react'; import { MemoryRouter as Router } from 'react-router'; -import { Link as RouterLink } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import { usePagination } from '@material-ui/lab/Pagination'; import Pagination from '@material-ui/lab/Pagination'; @@ -14,10 +14,6 @@ const useStyles = makeStyles(theme => ({ }, })); -// The use of React.forwardRef will no longer be required for react-router-dom v6. -// See https://github.com/ReactTraining/react-router/issues/6056 -const Link = React.forwardRef((props, ref) => ); - export default function PaginationLink2() { const { items } = usePagination({ count: 10, @@ -27,12 +23,11 @@ export default function PaginationLink2() { {items.map((item, index) => ( -
  • +
    • ))} diff --git a/docs/src/pages/components/pagination/PaginationLink2.tsx b/docs/src/pages/components/pagination/PaginationLink2.tsx index dc7d063868e36f..0712db084a307b 100644 --- a/docs/src/pages/components/pagination/PaginationLink2.tsx +++ b/docs/src/pages/components/pagination/PaginationLink2.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MemoryRouter as Router } from 'react-router'; -import { Link as RouterLink } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { usePagination } from '@material-ui/lab/Pagination'; import Pagination from '@material-ui/lab/Pagination'; @@ -16,12 +16,6 @@ const useStyles = makeStyles((theme: Theme) => }), ); -// The use of React.forwardRef will no longer be required for react-router-dom v6. -// See https://github.com/ReactTraining/react-router/issues/6056 -const Link = React.forwardRef((props, ref) => ( - -)); - export default function PaginationLink2() { const { items } = usePagination({ count: 10, @@ -31,12 +25,11 @@ export default function PaginationLink2() { {items.map((item, index) => ( -
  • +
    • ))} diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js b/docs/src/pages/components/pagination/PaginationRounded.js similarity index 58% rename from docs/src/pages/components/pagination/PaginationOutlinedRounded.js rename to docs/src/pages/components/pagination/PaginationRounded.js index 98ed723ed6959c..f1447c530e5413 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js +++ b/docs/src/pages/components/pagination/PaginationRounded.js @@ -10,15 +10,13 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function PaginationOutlinedRounded() { +export default function PaginationRounded() { const classes = useStyles(); return (
    + - - -
    ); } diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx b/docs/src/pages/components/pagination/PaginationRounded.tsx similarity index 61% rename from docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx rename to docs/src/pages/components/pagination/PaginationRounded.tsx index 1a5ff3735ded24..66df6a30535cf6 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx +++ b/docs/src/pages/components/pagination/PaginationRounded.tsx @@ -12,15 +12,13 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function PaginationOutlinedRounded() { +export default function PaginationRounded() { const classes = useStyles(); return (
    + - - -
    ); } diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index 8308eb65207b52..6db2391dee9737 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -9,15 +9,15 @@ components: Pagination ## Pagination -{{"demo": "pages/components/pagination/Pagination.js"}} +{{"demo": "pages/components/pagination/BasicPagination.js"}} ## Outlined pagination {{"demo": "pages/components/pagination/PaginationOutlined.js"}} -## Outlined rounded pagination +## Rounded pagination -{{"demo": "pages/components/pagination/PaginationOutlinedRounded.js"}} +{{"demo": "pages/components/pagination/PaginationRounded.js"}} ## Pagination size diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 7d02dbdad0493d..816cd570bb0d2c 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -11,7 +11,7 @@ export const styles = { display: 'flex', flexWrap: 'wrap', alignItems: 'center', - listStyleType: 'none', + listStyle: 'none', padding: 0, // Reset margin: 0, // Reset }, @@ -46,7 +46,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { > {children || items.map((item, index) => ( -
  • {renderItem({ key: index.toString(), ...item, ...itemProps })}
    • +
  • {renderItem({ ...item, ...itemProps })}
    • ))} ); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 9c1b68c5683d93..2569513aa95536 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -209,7 +209,7 @@ function ariaLabel(type, page, selected) { return `Go to ${type} page`; } -function PaginationItem(props) { +const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { const { classes, className, @@ -258,7 +258,7 @@ function PaginationItem(props) { )} ); -} +}); PaginationItem.propTypes = { /** @@ -279,7 +279,7 @@ PaginationItem.propTypes = { */ component: PropTypes.elementType, /** - * If `true`, the button will be disabled. + * If `true`, the item will be disabled. */ disabled: PropTypes.bool, /**