From 2ada4e2349432e78927d826c6ee331231ded0f65 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 31 Dec 2019 00:49:54 +0000 Subject: [PATCH 01/64] [Pagination] Add new component --- docs/pages/api/pagination.js | 7 + docs/pages/api/pagination.md | 75 ++++ docs/pages/components/pagination.js | 14 + docs/src/pages.js | 1 + .../pages/components/pagination/Pagination.js | 29 ++ .../components/pagination/Pagination.tsx | 50 +++ .../pagination/PaginationControlled.js | 38 ++ .../pagination/PaginationControlled.tsx | 46 +++ .../pagination/PaginationOutlined.js | 29 ++ .../pagination/PaginationOutlined.tsx | 54 +++ .../pagination/PaginationOutlinedRounded.js | 50 +++ .../pagination/PaginationOutlinedRounded.tsx | 58 +++ .../components/pagination/PaginationSize.js | 27 ++ .../components/pagination/PaginationSize.tsx | 43 +++ .../pages/components/pagination/pagination.md | 38 ++ .../src/Pagination/Pagination.js | 144 ++++++++ .../src/Pagination/PaginationItem.js | 330 ++++++++++++++++++ .../material-ui-lab/src/Pagination/index.js | 1 + .../src/Pagination/usePagination.js | 154 ++++++++ packages/material-ui-lab/src/index.js | 3 + 20 files changed, 1191 insertions(+) create mode 100644 docs/pages/api/pagination.js create mode 100644 docs/pages/api/pagination.md create mode 100644 docs/pages/components/pagination.js create mode 100644 docs/src/pages/components/pagination/Pagination.js create mode 100644 docs/src/pages/components/pagination/Pagination.tsx create mode 100644 docs/src/pages/components/pagination/PaginationControlled.js create mode 100644 docs/src/pages/components/pagination/PaginationControlled.tsx create mode 100644 docs/src/pages/components/pagination/PaginationOutlined.js create mode 100644 docs/src/pages/components/pagination/PaginationOutlined.tsx create mode 100644 docs/src/pages/components/pagination/PaginationOutlinedRounded.js create mode 100644 docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx create mode 100644 docs/src/pages/components/pagination/PaginationSize.js create mode 100644 docs/src/pages/components/pagination/PaginationSize.tsx create mode 100644 docs/src/pages/components/pagination/pagination.md create mode 100644 packages/material-ui-lab/src/Pagination/Pagination.js create mode 100644 packages/material-ui-lab/src/Pagination/PaginationItem.js create mode 100644 packages/material-ui-lab/src/Pagination/index.js create mode 100644 packages/material-ui-lab/src/Pagination/usePagination.js diff --git a/docs/pages/api/pagination.js b/docs/pages/api/pagination.js new file mode 100644 index 00000000000000..f777cfe71f1e6b --- /dev/null +++ b/docs/pages/api/pagination.js @@ -0,0 +1,7 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './pagination.md'; + +export default function Page() { + return ; +} diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md new file mode 100644 index 00000000000000..77d23a8ba507fd --- /dev/null +++ b/docs/pages/api/pagination.md @@ -0,0 +1,75 @@ +--- +filename: /packages/material-ui-lab/src/Pagination/Pagination.js +--- + + + +# Pagination API + +

The API documentation of the Pagination React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import Pagination from '@material-ui/lab/Pagination'; +// or +import { Pagination } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| boundaryRange | number | | Number of always visible pages at the beginning and end. | +| children | node | | Pagination items. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'primary'
| 'secondary' | | The active color. | +| component | elementType | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. | +| count * | number | | The total number of pages. | +| disabled | bool | false | If `true`, all the pagination component will be disabled. | +| firstPageText | string | 'First page' | Label for the first-page button. | +| hideNextButton | bool | false | If `true`, hide the next-page button. | +| hidePrevButton | bool | false | If `true`, hide the previous-page button. | +| lastPageText | string | 'Last page' | Text label for the last-page button. | +| nextPageText | string | 'Next page' | Label for the next-page button. | +| onChange | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | +| page | number | 1 | The current page. | +| prevPageText | string | 'Previous page' | Label for the previous-page button. | +| renderItem | func | (item, index) => <PaginationItem {...item} key={index.toString()} /> | Render the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* null | +| separator | node | | Custom separator node. | +| shape | 'round'
| 'rounded' | | The shape. | +| showFirstButton | bool | false | If `true`, show the first-page button. | +| showLastButton | bool | false | If `true`, show the last-page button. | +| siblingRange | number | 1 | Number of always visible pages before and after the current one. | +| size | 'small'
| 'medium' | | The size. | +| variant | 'text'
| 'outlined' | | The variant to use. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +- Style sheet name: `MuiPagination`. +- Style sheet details: + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiPagination-root | Styles applied to the root element. + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Pagination/Pagination.js) for more detail. + +## Demos + +- [Pagination](/components/pagination/) + diff --git a/docs/pages/components/pagination.js b/docs/pages/components/pagination.js new file mode 100644 index 00000000000000..3610b08f6fa568 --- /dev/null +++ b/docs/pages/components/pagination.js @@ -0,0 +1,14 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; + +const req = require.context('docs/src/pages/components/pagination', false, /\.(md|js|tsx)$/); +const reqSource = require.context( + '!raw-loader!../../src/pages/components/pagination', + false, + /\.(js|tsx)$/, +); +const reqPrefix = 'pages/components/pagination'; + +export default function Page() { + return ; +} diff --git a/docs/src/pages.js b/docs/src/pages.js index e99760c34a486a..bffc694e1ad58f 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -116,6 +116,7 @@ const pages = [ { pathname: '/components/about-the-lab' }, { pathname: '/components/alert' }, { pathname: '/components/autocomplete' }, + { pathname: '/components/pagination' }, { pathname: '/components/rating' }, { pathname: '/components/skeleton' }, { pathname: '/components/speed-dial' }, diff --git a/docs/src/pages/components/pagination/Pagination.js b/docs/src/pages/components/pagination/Pagination.js new file mode 100644 index 00000000000000..1b3b3b36e9692d --- /dev/null +++ b/docs/src/pages/components/pagination/Pagination.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Standard + + Primary + + Secondary + + Disabled + +
+ ); +} diff --git a/docs/src/pages/components/pagination/Pagination.tsx b/docs/src/pages/components/pagination/Pagination.tsx new file mode 100644 index 00000000000000..96b46ad7c25f6d --- /dev/null +++ b/docs/src/pages/components/pagination/Pagination.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Standard + + Primary + + Secondary + + Disabled + +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationControlled.js b/docs/src/pages/components/pagination/PaginationControlled.js new file mode 100644 index 00000000000000..c5cc323d46e7f5 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationControlled.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function BasicPagination() { + const classes = useStyles(); + const [page, setPage] = React.useState(1); + + function handleChange(event, value) { + setPage(value); + } + + return ( +
+ Standard + + Disabled + + Page: {page} +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationControlled.tsx b/docs/src/pages/components/pagination/PaginationControlled.tsx new file mode 100644 index 00000000000000..6892fcc3d65d40 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationControlled.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function BasicPagination() { + const classes = useStyles(); + const [page, setPage] = React.useState(1); + + function handleChange(event, value) { + setPage(value); + } + + return ( +
+ Standard + + Disabled + + Page: {page} +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationOutlined.js b/docs/src/pages/components/pagination/PaginationOutlined.js new file mode 100644 index 00000000000000..6feeb9497748ec --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationOutlined.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Outlined + + Outlined primary + + Outlined secondary + + Outlined disabled + +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx new file mode 100644 index 00000000000000..49d3fcc425d017 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationOutlined.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Outlined + + Outlined primary + + Outlined secondary + + Outlined disabled + +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js new file mode 100644 index 00000000000000..63dcca5d3207e6 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Rounded outlined standard + + Rounded outlined primary + + Rounded outlined secondary + + Rounded outlined disabled + +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx new file mode 100644 index 00000000000000..9d328c6d189f36 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Rounded outlined standard + + Rounded outlined primary + + Rounded outlined secondary + + Rounded outlined disabled + +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationSize.js b/docs/src/pages/components/pagination/PaginationSize.js new file mode 100644 index 00000000000000..1ff9a22638b77c --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationSize.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Small + + Medium + + Large + +
+ ); +} diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx new file mode 100644 index 00000000000000..a2d16cdd741ab7 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationSize.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
+ Small + + Medium + + Large + +
+ ); +} diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md new file mode 100644 index 00000000000000..832454d3ff8afa --- /dev/null +++ b/docs/src/pages/components/pagination/pagination.md @@ -0,0 +1,38 @@ +--- +title: Pagination React component +components: Pagination +--- + +# Pagination + +

The Pagination component enables the user to select a specific page from a range of pages.

+ +## Pagination + +{{"demo": "pages/components/pagination/Pagination.js"}} + +## Outlined pagination + +{{"demo": "pages/components/pagination/PaginationOutlined.js"}} + +## Outlined rounded pagination + +{{"demo": "pages/components/pagination/PaginationOutlinedRounded.js"}} + +## Pagination size + +{{"demo": "pages/components/pagination/PaginationSize.js"}} + +## Controlled pagination + +{{"demo": "pages/components/pagination/PaginationControlled.js"}} + +## Accessibility + +### ARIA + +The root node has a role of "navigation" and aria-label "Pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "oo to previous page", "go to page 1" etc.). You can override these using the `getItemAriaLabel` prop. + +### Keyboard + +The pagination items are in tab order, with a tabindex of "0". diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js new file mode 100644 index 00000000000000..8e950cb81a8706 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -0,0 +1,144 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { withStyles } from '@material-ui/core/styles'; +import usePagination from './usePagination'; +import PaginationItem from './PaginationItem'; + +export const styles = { + /* Styles applied to the root element. */ + root: { + display: 'flex', + flexWrap: 'wrap', + alignItems: 'center', + padding: 0, // Reset + margin: 0, // Reset + }, +}; + +const Pagination = React.forwardRef(function Pagination(props, ref) { + const { + children, + classes, + className, + component: Component = 'ul', + items, + renderItem = (itemProps, index) => , + ...other + } = usePagination(props); + + return ( +
    + {children || items.map((item, index) => renderItem(item, index))} +
+ ); +}); +usePagination.propTypes = { + /** + * Number of always visible pages at the beginning and end. + */ + boundaryRange: PropTypes.number, + /** + * Pagination items. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The active color. + */ + color: PropTypes.oneOf(['default', 'primary', 'secondary']), + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + * By default, it maps the variant to a good default headline component. + */ + component: PropTypes.elementType, + /** + * The total number of pages. + */ + count: PropTypes.number.isRequired, + /** + * If `true`, all the pagination component will be disabled. + */ + disabled: PropTypes.bool, + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current page. + * + * @param {string} [type = page] The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). + * @param {number} page The page number to format. + * @param {bool} selected If true, the current page is selected. + * @returns {string} + */ + getItemAriaLabel: PropTypes.func, + /** + * If `true`, hide the next-page button. + */ + hideNextButton: PropTypes.bool, + /** + * If `true`, hide the previous-page button. + */ + hidePrevButton: PropTypes.bool, + /** + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + */ + onChange: PropTypes.func, + /** + * The current page. + */ + page: PropTypes.number.isRequired, + /** + * The query string appended to the URL to identify the page. + */ + queryString: PropTypes.string, + /** + * Render the item. + * + * @param {object} params + * @returns {ReactNode} + */ + renderItem: PropTypes.func, + /** + * The shape of the pagination items. + */ + shape: PropTypes.oneOf(['round', 'rounded']), + /** + * If `true`, show the first-page button. + */ + showFirstButton: PropTypes.bool, + /** + * If `true`, show the last-page button. + */ + showLastButton: PropTypes.bool, + /** + * Number of always visible pages before and after the current page. + */ + siblingRange: PropTypes.number, + /** + * The size of the pagination component. + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** + * The variant to use. + */ + variant: PropTypes.oneOf(['text', 'outlined']), +}; + +export default withStyles(styles, { name: 'MuiPagination' })(Pagination); diff --git a/packages/material-ui-lab/src/Pagination/PaginationItem.js b/packages/material-ui-lab/src/Pagination/PaginationItem.js new file mode 100644 index 00000000000000..201c7b2eb2c3d3 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/PaginationItem.js @@ -0,0 +1,330 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { fade, withStyles } from '@material-ui/core/styles'; +import ButtonBase from '@material-ui/core/ButtonBase'; +import FirstPageIcon from '@material-ui/icons/FirstPage'; +import LastPageIcon from '@material-ui/icons/LastPage'; +import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; +import NavigateNextIcon from '@material-ui/icons/NavigateNext'; +import { capitalize } from '@material-ui/core/utils'; + +const styles = theme => ({ + root: { + listStyleType: 'none', + }, + button: { + borderRadius: '50%', + width: 32, + height: 32, + margin: '0 4px', + color: theme.palette.text.primary, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.short, + }), + '&:hover, &:focus': { + backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + '&$selected': { + backgroundColor: fade(theme.palette.action.active, 0.09), + '&:hover, &:focus': { + backgroundColor: fade(theme.palette.action.active, 0.15), + }, + '&$disabled': { + backgroundColor: fade(theme.palette.action.disabled, 0.07), + }, + }, + '&$disabled': { + color: fade(theme.palette.text.primary, 0.5), + backgroundColor: 'transparent', + pointerEvents: 'none', + }, + }, + rounded: { + borderRadius: theme.shape.borderRadius, + }, + outlined: { + border: `1px solid ${ + theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + '&:hover, &:focus': { + backgroundColor: fade(theme.palette.action.active, 0.05), + '&$disabled': { + backgroundColor: fade(theme.palette.action.disabled, 0.03), + }, + }, + '&$disabled': { + color: fade(theme.palette.action.disabled, 0.12), + backgroundColor: fade(theme.palette.action.disabled, 0.03), + pointerEvents: 'none', + }, + '&$selected': { + color: theme.palette.action.active, + backgroundColor: fade(theme.palette.action.active, 0.12), + '&:hover, &:focus': { + backgroundColor: fade(theme.palette.action.active, 0.15), + }, + '&$disabled': { + color: fade(theme.palette.action.disabled, 0.3), + backgroundColor: fade(theme.palette.action.disabled, 0.07), + }, + }, + }, + textPrimary: { + '&:hover, &:focus': { + color: theme.palette.primary.main, + backgroundColor: fade(theme.palette.primary.main, 0.2), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + '&$selected': { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + '&:hover, &:focus': { + backgroundColor: theme.palette.primary.dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.primary.main, + }, + }, + '&$disabled': { + color: theme.palette.text.primary, + backgroundColor: fade(theme.palette.action.disabled, 0.07), + }, + }, + }, + textSecondary: { + '&:hover, &:focus': { + color: theme.palette.secondary.main, + backgroundColor: fade(theme.palette.secondary.main, 0.2), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + '&$selected': { + color: theme.palette.secondary.contrastText, + backgroundColor: theme.palette.secondary.main, + '&:hover, &:focus': { + backgroundColor: theme.palette.secondary.dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.secondary.main, + }, + }, + '&$disabled': { + color: theme.palette.text.secondary, + backgroundColor: fade(theme.palette.action.disabled, 0.07), + }, + }, + }, + outlinedPrimary: { + '&:hover, &:focus': { + color: theme.palette.primary.main, + backgroundColor: fade(theme.palette.primary.main, 0.1), + border: `1px solid ${fade(theme.palette.primary.main, 0.2)}`, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + '&$selected': { + color: theme.palette.primary.main, + border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`, + backgroundColor: fade(theme.palette.primary.main, 0.15), + '&:hover, &:focus': { + backgroundColor: fade(theme.palette.primary.dark, 0.17), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + }, + }, + outlinedSecondary: { + '&:hover, &:focus': { + color: theme.palette.secondary.main, + backgroundColor: fade(theme.palette.secondary.main, 0.1), + border: `1px solid ${fade(theme.palette.secondary.main, 0.2)}`, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + '&$selected': { + color: theme.palette.secondary.main, + border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`, + backgroundColor: fade(theme.palette.secondary.main, 0.15), + '&:hover, &:focus': { + backgroundColor: fade(theme.palette.secondary.dark, 0.17), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + }, + }, + sizeSmall: { + width: 24, + height: 24, + }, + sizeLarge: { + width: 40, + height: 40, + }, + ellipsis: { + textAlign: 'center', + width: 24, + margin: '0 8px', + '&sizeSmall': { + margin: 0, + }, + '&sizeLarge': { + margin: '0 16px', + }, + }, + /* Pseudo-class applied to the root element if `disabled={true}`. */ + disabled: {}, + /* Pseudo-class applied to the root element if `selected={true}`. */ + selected: {}, +}); + +function ariaLabel(type, page, selected) { + if (type === 'page') { + return `${selected ? '' : 'go to '}page ${page}`; + } + return `Go to ${type} page`; +} + +/** + * @ignore - internal component. + */ +function PaginationItem(props) { + const { + classes, + className, + color = 'standard', + disabled, + getAriaLabel, + page, + queryString, + onChange: handleChange, + selected, + shape = 'round', + size = 'medium', + type = 'page', + variant, + ...other + } = props; + + const buttonClass = clsx( + classes.button, + classes[variant], + classes[shape], + { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + } + ); + + return ( + + {type === 'ellipsis' ? ( +
  • +
    ...
    +
    • + ) : ( +
  • + handleChange(event, page) : undefined} + className={buttonClass} + > + {type === 'page' && page} + {type === 'previous' && } + {type === 'next' && } + {type === 'first' && } + {type === 'last' && } + +
    • + )} + +     + ); +} + +PaginationItem.propTypes = { + /** + * @ignore + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The active color. + */ + color: PropTypes.oneOf(['standard', 'primary', 'secondary']), + /** + * If `true`, the button will be disabled. + */ + disabled: PropTypes.bool, + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current page. + * + * @param {string} [type = page] The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). + * @param {number} page The page number to format. + * @param {bool} selected If true, the current page is selected. + * @returns {string} + */ + getAriaLabel: PropTypes.func, + /** + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + */ + onChange: PropTypes.func, + /** + * The current page number. + */ + page: PropTypes.number, + /** + * The query string used to identify the page. + */ + queryString: PropTypes.string, + /** + * If `true` the pagination item is selected. + */ + selected: PropTypes.bool, + /** + * The shape of the pagination item. + */ + shape: PropTypes.oneOf(['round', 'rounded']), + /** + * The size of the pagination item. + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /* + * The type of pagination item. + */ + type: PropTypes.oneOf(['page', 'ellipsis', 'first', 'last', 'next', 'previous']), + /* + * The pagination item variant. + */ + variant: PropTypes.oneOf(['text', 'outlined']), +}; + +export default withStyles(styles, { name: 'PrivatePaginationItem' })(PaginationItem); diff --git a/packages/material-ui-lab/src/Pagination/index.js b/packages/material-ui-lab/src/Pagination/index.js new file mode 100644 index 00000000000000..eaef04eb736083 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/index.js @@ -0,0 +1 @@ +export { default } from './Pagination'; diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js new file mode 100644 index 00000000000000..2611ed834ede66 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -0,0 +1,154 @@ +import React from 'react'; + +export default function usePagination(props) { + const { + children, + classes, + className, + color = 'standard', + component, + count, + disabled = false, + getItemAriaLabel: getAriaLabel, + hideNextButton = false, + hidePrevButton = false, + showFirstButton = false, + renderItem, + showLastButton = false, + size, + onChange: handleChange, + page: pageProp = 1, + queryString = 'page', + shape = 'round', + siblingRange = 1, + variant = 'text', + ...other + } = props; + + const [page, setPage] = React.useState(pageProp); + + React.useEffect(() => { + // Get the value of the querystring with key `queryString`. + // IE11 Does not support URLSearchParams() + const queryValue = window.location.search.substr(1).split("&").reduce((acc, item) => ( + acc + item.split("=")[0] === queryString ? item.split("=")[1] : '' + ), ''); + + setPage(queryValue === '' ? pageProp : Number(queryValue)) + }, [pageProp, queryString]) + + const itemProps = { + color, + getAriaLabel, + disabled, + onChange: handleChange, + page, + shape, + size, + queryString, + variant, + }; + + const items = []; + + // First page button + if (showFirstButton) { + items.push({ + ...itemProps, + disabled: disabled || page <= 1, + page: 1, + type: 'first', + }); + } + + // Previous page button + if (!hidePrevButton) { + items.push({ + ...itemProps, + disabled: disabled || page <= 1, + page: page - 1, + type: 'previous', + }); + } + + // First page + items.push({ + ...itemProps, + page: 1, + selected: page === 1, + }); + + // Start ellipsis + if (page - siblingRange > 3) { + items.push({ type: 'ellipsis' }); + } else { + items.push({ + ...itemProps, + page: 2, + selected: page === 2, + }); + } + + // Siblings + for ( + let i = Math.max(3, Math.min(page - siblingRange, count - 2 - siblingRange * 2)); + i <= Math.max(Math.min(count - 2, page + siblingRange), siblingRange * 2 + 3); + i += 1 + ) { + items.push({ + ...itemProps, + page: i, + selected: page === i, + }); + } + + // End ellipsis + if (page + siblingRange < count - 2) { + items.push({ type: 'ellipsis' }); + } else { + items.push({ + ...itemProps, + page: count - 1, + selected: page === count - 1, + }); + } + + // Last page + if (count > 1) { + items.push({ + ...itemProps, + page: count, + selected: page === count, + }); + } + + // Next page button + if (!hideNextButton) { + items.push({ + ...itemProps, + disabled: disabled || page >= count, + page: page + 1, + type: 'next', + }); + } + + // Last page button + if (showLastButton) { + items.push({ + ...itemProps, + disabled: disabled || page >= count, + page: count, + type: 'last', + }); + } + + return { + children, + classes, + className, + component, + items, + renderItem, + ...other, + } +} diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 0a1f15f1d9cc94..61f7cdeff5d27d 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -11,6 +11,9 @@ export * from './Autocomplete'; export { default as AvatarGroup } from './AvatarGroup'; export * from './AvatarGroup'; +export { default as Pagination } from './Pagination'; +export * from './Pagination'; + export { default as Rating } from './Rating'; export * from './Rating'; From dddd56c52a6f2c1c2ecbdfcbbed6ea7c42293978 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 31 Dec 2019 11:58:25 +0000 Subject: [PATCH 02/64] Update docs/src/pages/components/pagination/pagination.md Co-Authored-By: Joshua --- docs/src/pages/components/pagination/pagination.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index 832454d3ff8afa..cddfe1691ccc40 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -31,7 +31,7 @@ components: Pagination ### ARIA -The root node has a role of "navigation" and aria-label "Pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "oo to previous page", "go to page 1" etc.). You can override these using the `getItemAriaLabel` prop. +The root node has a role of "navigation" and aria-label "Pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the `getItemAriaLabel` prop. ### Keyboard From 0669be2824c159adebd9f803021124deba4e6e72 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 31 Dec 2019 23:42:04 +0000 Subject: [PATCH 03/64] Remove demo labels --- docs/src/pages/components/pagination/Pagination.js | 5 ----- docs/src/pages/components/pagination/Pagination.tsx | 5 ----- docs/src/pages/components/pagination/PaginationControlled.js | 2 -- .../src/pages/components/pagination/PaginationControlled.tsx | 2 -- docs/src/pages/components/pagination/PaginationOutlined.js | 5 ----- docs/src/pages/components/pagination/PaginationOutlined.tsx | 5 ----- .../pages/components/pagination/PaginationOutlinedRounded.js | 5 ----- .../components/pagination/PaginationOutlinedRounded.tsx | 5 ----- docs/src/pages/components/pagination/PaginationSize.js | 4 ---- docs/src/pages/components/pagination/PaginationSize.tsx | 4 ---- 10 files changed, 42 deletions(-) diff --git a/docs/src/pages/components/pagination/Pagination.js b/docs/src/pages/components/pagination/Pagination.js index 1b3b3b36e9692d..7f852f9d5f853d 100644 --- a/docs/src/pages/components/pagination/Pagination.js +++ b/docs/src/pages/components/pagination/Pagination.js @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; import { Pagination } from '@material-ui/lab'; const useStyles = makeStyles(theme => ({ @@ -16,13 +15,9 @@ export default function BasicPagination() { return (
    - Standard - Primary - Secondary - Disabled
    ); diff --git a/docs/src/pages/components/pagination/Pagination.tsx b/docs/src/pages/components/pagination/Pagination.tsx index 96b46ad7c25f6d..d88037a5318445 100644 --- a/docs/src/pages/components/pagination/Pagination.tsx +++ b/docs/src/pages/components/pagination/Pagination.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; import { Pagination } from '@material-ui/lab'; const useStyles = makeStyles((theme: Theme) => @@ -18,27 +17,23 @@ export default function BasicPagination() { return (
    - Standard - Primary - Secondary - Disabled - Standard - Disabled - Standard - Disabled ({ @@ -16,13 +15,9 @@ export default function BasicPagination() { return (
    - Outlined - Outlined primary - Outlined secondary - Outlined disabled
    ); diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx index 49d3fcc425d017..c644fc41cb364f 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlined.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; import { Pagination } from '@material-ui/lab'; const useStyles = makeStyles((theme: Theme) => @@ -18,14 +17,12 @@ export default function BasicPagination() { return (
    - Outlined - Outlined primary - Outlined secondary - Outlined disabled ({ @@ -16,9 +15,7 @@ export default function BasicPagination() { return (
    - Rounded outlined standard - Rounded outlined primary - Rounded outlined secondary - Rounded outlined disabled @@ -18,7 +17,6 @@ export default function BasicPagination() { return (
    - Rounded outlined standard - Rounded outlined primary - Rounded outlined secondary - Rounded outlined disabled ({ @@ -16,11 +15,8 @@ export default function BasicPagination() { return (
    - Small - Medium - Large
    ); diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx index a2d16cdd741ab7..44d0f0274fa4c5 100644 --- a/docs/src/pages/components/pagination/PaginationSize.tsx +++ b/docs/src/pages/components/pagination/PaginationSize.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; import { Pagination } from '@material-ui/lab'; const useStyles = makeStyles((theme: Theme) => @@ -18,20 +17,17 @@ export default function BasicPagination() { return (
    - Small - Medium - Large Date: Wed, 1 Jan 2020 00:27:00 +0000 Subject: [PATCH 04/64] Buttons demo --- .../pages/components/pagination/Pagination.js | 8 +-- .../components/pagination/Pagination.tsx | 27 ++------- .../pagination/PaginationButtons.js | 22 ++++++++ .../pagination/PaginationButtons.tsx | 24 ++++++++ .../pagination/PaginationControlled.js | 11 +--- .../pagination/PaginationControlled.tsx | 17 +----- .../pagination/PaginationOutlined.js | 8 +-- .../pagination/PaginationOutlined.tsx | 31 ++-------- .../pagination/PaginationOutlinedRounded.js | 29 ++-------- .../pagination/PaginationOutlinedRounded.tsx | 35 ++---------- .../components/pagination/PaginationSize.js | 6 +- .../components/pagination/PaginationSize.tsx | 20 +------ .../pages/components/pagination/pagination.md | 5 ++ .../src/Pagination/Pagination.js | 4 +- .../src/Pagination/PaginationItem.js | 56 +++++++++---------- .../src/Pagination/usePagination.js | 16 ++++-- 16 files changed, 123 insertions(+), 196 deletions(-) create mode 100644 docs/src/pages/components/pagination/PaginationButtons.js create mode 100644 docs/src/pages/components/pagination/PaginationButtons.tsx diff --git a/docs/src/pages/components/pagination/Pagination.js b/docs/src/pages/components/pagination/Pagination.js index 7f852f9d5f853d..8a43ef758442bd 100644 --- a/docs/src/pages/components/pagination/Pagination.js +++ b/docs/src/pages/components/pagination/Pagination.js @@ -15,10 +15,10 @@ export default function BasicPagination() { return (
    - - - - + + + +
    ); } diff --git a/docs/src/pages/components/pagination/Pagination.tsx b/docs/src/pages/components/pagination/Pagination.tsx index d88037a5318445..899ebdb7ccf13c 100644 --- a/docs/src/pages/components/pagination/Pagination.tsx +++ b/docs/src/pages/components/pagination/Pagination.tsx @@ -17,29 +17,10 @@ export default function BasicPagination() { return (
    - - - - + + + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationButtons.js b/docs/src/pages/components/pagination/PaginationButtons.js new file mode 100644 index 00000000000000..629d14edc3c9d0 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationButtons.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
    + + +
    + ); +} diff --git a/docs/src/pages/components/pagination/PaginationButtons.tsx b/docs/src/pages/components/pagination/PaginationButtons.tsx new file mode 100644 index 00000000000000..487fc1132ab58e --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationButtons.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function BasicPagination() { + const classes = useStyles(); + + return ( +
    + + +
    + ); +} diff --git a/docs/src/pages/components/pagination/PaginationControlled.js b/docs/src/pages/components/pagination/PaginationControlled.js index c71afed8f61fcb..8673fd13dd5189 100644 --- a/docs/src/pages/components/pagination/PaginationControlled.js +++ b/docs/src/pages/components/pagination/PaginationControlled.js @@ -21,15 +21,8 @@ export default function BasicPagination() { return (
    - - + + Page: {page}
    ); diff --git a/docs/src/pages/components/pagination/PaginationControlled.tsx b/docs/src/pages/components/pagination/PaginationControlled.tsx index 12df8bcdc3c49f..9bd556054e16b3 100644 --- a/docs/src/pages/components/pagination/PaginationControlled.tsx +++ b/docs/src/pages/components/pagination/PaginationControlled.tsx @@ -23,21 +23,8 @@ export default function BasicPagination() { return (
    - - + + Page: {page}
    ); diff --git a/docs/src/pages/components/pagination/PaginationOutlined.js b/docs/src/pages/components/pagination/PaginationOutlined.js index 11af50957dd6bf..633a29dcf8056e 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.js +++ b/docs/src/pages/components/pagination/PaginationOutlined.js @@ -15,10 +15,10 @@ export default function BasicPagination() { return (
    - - - - + + + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx index c644fc41cb364f..2a85c9f5d3a30f 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlined.tsx @@ -17,33 +17,10 @@ export default function BasicPagination() { return (
    - - - - + + + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js index f20ec8f1eee554..bebcfabfae26e4 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js @@ -15,31 +15,10 @@ export default function BasicPagination() { return (
    - - - - + + + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx index b876e94ea17e68..e09f690eb2b4b4 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx @@ -17,37 +17,10 @@ export default function BasicPagination() { return (
    - - - - + + + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationSize.js b/docs/src/pages/components/pagination/PaginationSize.js index 9b2fd459e57156..983fed484b7eaa 100644 --- a/docs/src/pages/components/pagination/PaginationSize.js +++ b/docs/src/pages/components/pagination/PaginationSize.js @@ -15,9 +15,9 @@ export default function BasicPagination() { return (
    - - - + + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx index 44d0f0274fa4c5..c2776f4e3f0546 100644 --- a/docs/src/pages/components/pagination/PaginationSize.tsx +++ b/docs/src/pages/components/pagination/PaginationSize.tsx @@ -17,23 +17,9 @@ export default function BasicPagination() { return (
    - - - + + +
    ); } diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index cddfe1691ccc40..fe746680941f82 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -11,6 +11,11 @@ components: Pagination {{"demo": "pages/components/pagination/Pagination.js"}} +## Buttons + +You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons. +{{"demo": "pages/components/pagination/PaginationButtons.js"}} + ## Outlined pagination {{"demo": "pages/components/pagination/PaginationOutlined.js"}} diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 8e950cb81a8706..3786c4a9e60e8a 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -116,8 +116,8 @@ usePagination.propTypes = { */ renderItem: PropTypes.func, /** - * The shape of the pagination items. - */ + * The shape of the pagination items. + */ shape: PropTypes.oneOf(['round', 'rounded']), /** * If `true`, show the first-page button. diff --git a/packages/material-ui-lab/src/Pagination/PaginationItem.js b/packages/material-ui-lab/src/Pagination/PaginationItem.js index 201c7b2eb2c3d3..4d5a99a573af0a 100644 --- a/packages/material-ui-lab/src/Pagination/PaginationItem.js +++ b/packages/material-ui-lab/src/Pagination/PaginationItem.js @@ -50,7 +50,7 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), '&$disabled': { @@ -223,17 +223,12 @@ function PaginationItem(props) { ...other } = props; - const buttonClass = clsx( - classes.button, - classes[variant], - classes[shape], - { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - } - ); + const buttonClass = clsx(classes.button, classes[variant], classes[shape], { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + }); return ( @@ -242,24 +237,25 @@ function PaginationItem(props) {
    ...
    ) : ( -
  • - handleChange(event, page) : undefined} - className={buttonClass} - > - {type === 'page' && page} - {type === 'previous' && } - {type === 'next' && } - {type === 'first' && } - {type === 'last' && } - -
    • - )} - +
  • + handleChange(event, page) : undefined} + className={buttonClass} + > + {type === 'page' && page} + {type === 'previous' && } + {type === 'next' && } + {type === 'first' && } + {type === 'last' && } + +
    • + )}     ); } diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 2611ed834ede66..dce98c8827aa14 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -30,12 +30,16 @@ export default function usePagination(props) { React.useEffect(() => { // Get the value of the querystring with key `queryString`. // IE11 Does not support URLSearchParams() - const queryValue = window.location.search.substr(1).split("&").reduce((acc, item) => ( - acc + item.split("=")[0] === queryString ? item.split("=")[1] : '' - ), ''); + const queryValue = window.location.search + .substr(1) + .split('&') + .reduce( + (acc, item) => (acc + item.split('=')[0] === queryString ? item.split('=')[1] : ''), + '', + ); - setPage(queryValue === '' ? pageProp : Number(queryValue)) - }, [pageProp, queryString]) + setPage(queryValue === '' ? pageProp : Number(queryValue)); + }, [pageProp, queryString]); const itemProps = { color, @@ -150,5 +154,5 @@ export default function usePagination(props) { items, renderItem, ...other, - } + }; } From e40a027ebdc6c7af49980cfbd2a6194667c4f834 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 1 Jan 2020 00:28:10 +0000 Subject: [PATCH 05/64] proptypes --- packages/material-ui-lab/src/Pagination/Pagination.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 3786c4a9e60e8a..c9001d42d28a74 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -40,7 +40,8 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { ); }); -usePagination.propTypes = { + +Pagination.propTypes = { /** * Number of always visible pages at the beginning and end. */ From 5f026738012352cf7ccf033979e52b0915f46d47 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 1 Jan 2020 01:38:05 +0000 Subject: [PATCH 06/64] Pass through props uneeded by usePagination --- .../src/Pagination/Pagination.js | 12 +++++++++-- .../src/Pagination/usePagination.js | 21 ------------------- 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index c9001d42d28a74..081ac40e5a105e 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -21,12 +21,20 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { children, classes, className, + color = 'standard', component: Component = 'ul', + getItemAriaLabel: getAriaLabel, items, - renderItem = (itemProps, index) => , + renderItem = (item, index) => , + shape = 'round', + size, + queryString = 'page', + variant = 'text', ...other } = usePagination(props); + const itemProps = { color, getAriaLabel, shape, size, queryString, variant } + return (
      - {children || items.map((item, index) => renderItem(item, index))} + {children || items.map((item, index) => renderItem({ ...item, ...itemProps }, index))}
    ); }); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index dce98c8827aa14..ba84f0e7bdf2c9 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -2,26 +2,16 @@ import React from 'react'; export default function usePagination(props) { const { - children, - classes, - className, - color = 'standard', - component, count, disabled = false, - getItemAriaLabel: getAriaLabel, hideNextButton = false, hidePrevButton = false, showFirstButton = false, - renderItem, showLastButton = false, - size, onChange: handleChange, page: pageProp = 1, queryString = 'page', - shape = 'round', siblingRange = 1, - variant = 'text', ...other } = props; @@ -42,15 +32,9 @@ export default function usePagination(props) { }, [pageProp, queryString]); const itemProps = { - color, - getAriaLabel, disabled, onChange: handleChange, page, - shape, - size, - queryString, - variant, }; const items = []; @@ -147,12 +131,7 @@ export default function usePagination(props) { } return { - children, - classes, - className, - component, items, - renderItem, ...other, }; } From 599d8ef8c9907cac7e806ecb71824c635a8702e8 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 1 Jan 2020 16:23:49 +0000 Subject: [PATCH 07/64] Less prominent outlined-disabled --- .../src/Pagination/PaginationItem.js | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/PaginationItem.js b/packages/material-ui-lab/src/Pagination/PaginationItem.js index 4d5a99a573af0a..e154409cb7619b 100644 --- a/packages/material-ui-lab/src/Pagination/PaginationItem.js +++ b/packages/material-ui-lab/src/Pagination/PaginationItem.js @@ -50,16 +50,16 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), - '&$disabled': { - backgroundColor: fade(theme.palette.action.disabled, 0.03), - }, }, '&$disabled': { - color: fade(theme.palette.action.disabled, 0.12), + color: fade(theme.palette.action.disabled, 0.2), backgroundColor: fade(theme.palette.action.disabled, 0.03), + border: `1px solid ${ + theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' + }`, pointerEvents: 'none', }, '&$selected': { @@ -70,7 +70,7 @@ const styles = theme => ({ }, '&$disabled': { color: fade(theme.palette.action.disabled, 0.3), - backgroundColor: fade(theme.palette.action.disabled, 0.07), + backgroundColor: fade(theme.palette.action.disabled, 0.06), }, }, }, @@ -237,25 +237,25 @@ function PaginationItem(props) {
    ...
    ) : ( -
  • - handleChange(event, page) : undefined} - className={buttonClass} - > - {type === 'page' && page} - {type === 'previous' && } - {type === 'next' && } - {type === 'first' && } - {type === 'last' && } - -
    • - )} +
  • + handleChange(event, page) : undefined} + className={buttonClass} + > + {type === 'page' && page} + {type === 'previous' && } + {type === 'next' && } + {type === 'first' && } + {type === 'last' && } + +
    • + )} ); } From 4ddcac9a00a5c0f0d6ef1f8bf5519b46315b5d0f Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 1 Jan 2020 16:29:40 +0000 Subject: [PATCH 08/64] Remove querystring support --- .../src/Pagination/Pagination.js | 4 ---- .../src/Pagination/PaginationItem.js | 3 +-- .../src/Pagination/usePagination.js | 21 +------------------ 3 files changed, 2 insertions(+), 26 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 081ac40e5a105e..572156216571c7 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -113,10 +113,6 @@ Pagination.propTypes = { * The current page. */ page: PropTypes.number.isRequired, - /** - * The query string appended to the URL to identify the page. - */ - queryString: PropTypes.string, /** * Render the item. * diff --git a/packages/material-ui-lab/src/Pagination/PaginationItem.js b/packages/material-ui-lab/src/Pagination/PaginationItem.js index e154409cb7619b..90d4e566b09bea 100644 --- a/packages/material-ui-lab/src/Pagination/PaginationItem.js +++ b/packages/material-ui-lab/src/Pagination/PaginationItem.js @@ -213,7 +213,6 @@ function PaginationItem(props) { disabled, getAriaLabel, page, - queryString, onChange: handleChange, selected, shape = 'round', @@ -244,7 +243,7 @@ function PaginationItem(props) { } aria-current={selected ? 'page' : undefined} component={handleChange ? 'div' : 'a'} - href={handleChange ? undefined : `?${queryString}=${page}`} + href={handleChange ? undefined : page} onClick={handleChange ? event => handleChange(event, page) : undefined} className={buttonClass} > diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index ba84f0e7bdf2c9..5a1e53582e2b00 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -1,5 +1,3 @@ -import React from 'react'; - export default function usePagination(props) { const { count, @@ -9,28 +7,11 @@ export default function usePagination(props) { showFirstButton = false, showLastButton = false, onChange: handleChange, - page: pageProp = 1, - queryString = 'page', + page = 1, siblingRange = 1, ...other } = props; - const [page, setPage] = React.useState(pageProp); - - React.useEffect(() => { - // Get the value of the querystring with key `queryString`. - // IE11 Does not support URLSearchParams() - const queryValue = window.location.search - .substr(1) - .split('&') - .reduce( - (acc, item) => (acc + item.split('=')[0] === queryString ? item.split('=')[1] : ''), - '', - ); - - setPage(queryValue === '' ? pageProp : Number(queryValue)); - }, [pageProp, queryString]); - const itemProps = { disabled, onChange: handleChange, From 62987573414d2425b26d32bebb66513a9acea1b6 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 1 Jan 2020 17:32:16 +0000 Subject: [PATCH 09/64] Make PaginationItem public --- .../src/Pagination/Pagination.js | 2 +- .../PaginationItem.js | 20 +++++++++++++------ .../src/PaginationItem/index.js | 1 + 3 files changed, 16 insertions(+), 7 deletions(-) rename packages/material-ui-lab/src/{Pagination => PaginationItem}/PaginationItem.js (92%) create mode 100644 packages/material-ui-lab/src/PaginationItem/index.js diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 572156216571c7..58e0ec53314179 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import usePagination from './usePagination'; -import PaginationItem from './PaginationItem'; +import PaginationItem from '../PaginationItem'; export const styles = { /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/Pagination/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js similarity index 92% rename from packages/material-ui-lab/src/Pagination/PaginationItem.js rename to packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 90d4e566b09bea..b2ec56cb0e3725 100644 --- a/packages/material-ui-lab/src/Pagination/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -10,9 +10,11 @@ import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import { capitalize } from '@material-ui/core/utils'; const styles = theme => ({ + /* Styles applied to the root element. */ root: { listStyleType: 'none', }, + /* Styles applied to the button element. */ button: { borderRadius: '50%', width: 32, @@ -44,9 +46,7 @@ const styles = theme => ({ pointerEvents: 'none', }, }, - rounded: { - borderRadius: theme.shape.borderRadius, - }, + /* Styles applied to the button element if `outlined="true"`. */ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' @@ -74,6 +74,7 @@ const styles = theme => ({ }, }, }, + /* Styles applied to the button element if `variant="text"` and `color="primary"`. */ textPrimary: { '&:hover, &:focus': { color: theme.palette.primary.main, @@ -99,6 +100,7 @@ const styles = theme => ({ }, }, }, + /* Styles applied to the button element if `variant="text"` and `color="secondary"`. */ textSecondary: { '&:hover, &:focus': { color: theme.palette.secondary.main, @@ -124,6 +126,7 @@ const styles = theme => ({ }, }, }, + /* Styles applied to the button element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: { '&:hover, &:focus': { color: theme.palette.primary.main, @@ -147,6 +150,7 @@ const styles = theme => ({ }, }, }, + /* Styles applied to the button element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: { '&:hover, &:focus': { color: theme.palette.secondary.main, @@ -170,14 +174,21 @@ const styles = theme => ({ }, }, }, + /* Styles applied to the button element if `rounded="true"`. */ + rounded: { + borderRadius: theme.shape.borderRadius, + }, + /* Styles applied to the button element if `size="small"`. */ sizeSmall: { width: 24, height: 24, }, + /* Styles applied to the button element if `size="large"`. */ sizeLarge: { width: 40, height: 40, }, + /* Styles applied to the ellipsis element. */ ellipsis: { textAlign: 'center', width: 24, @@ -202,9 +213,6 @@ function ariaLabel(type, page, selected) { return `Go to ${type} page`; } -/** - * @ignore - internal component. - */ function PaginationItem(props) { const { classes, diff --git a/packages/material-ui-lab/src/PaginationItem/index.js b/packages/material-ui-lab/src/PaginationItem/index.js new file mode 100644 index 00000000000000..b6fada1496f3cd --- /dev/null +++ b/packages/material-ui-lab/src/PaginationItem/index.js @@ -0,0 +1 @@ +export { default } from './PaginationItem'; From 27578c84f382c19c1fc7e99ca3a779a50a69416e Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 9 Jan 2020 20:15:59 +0000 Subject: [PATCH 10/64] no href --- packages/material-ui-lab/src/PaginationItem/PaginationItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index b2ec56cb0e3725..6a321c842a92c1 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -251,7 +251,7 @@ function PaginationItem(props) { } aria-current={selected ? 'page' : undefined} component={handleChange ? 'div' : 'a'} - href={handleChange ? undefined : page} + href={handleChange ? undefined : ''} onClick={handleChange ? event => handleChange(event, page) : undefined} className={buttonClass} > From 9861e24e3cbf6318eb2a31c31c5aebea001ae131 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 10 Jan 2020 16:08:16 +0000 Subject: [PATCH 11/64] Add support for boundaryRange prop --- .../components/pagination/PaginationRanges.js | 37 ++++++++ .../pagination/PaginationRanges.tsx | 33 +++++++ .../pages/components/pagination/pagination.md | 13 ++- .../src/Pagination/Pagination.js | 2 +- .../src/Pagination/usePagination.js | 92 ++++++++++++------- .../src/PaginationItem/PaginationItem.js | 42 ++++----- 6 files changed, 161 insertions(+), 58 deletions(-) create mode 100644 docs/src/pages/components/pagination/PaginationRanges.js create mode 100644 docs/src/pages/components/pagination/PaginationRanges.tsx diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js new file mode 100644 index 00000000000000..189695114f65cb --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function PaginationRanges() { + const classes = useStyles(); + const [page, setPage] = React.useState(1); + + function handleChange(event, value) { + setPage(value); + } + + return ( +
    + + + + + Page: {page} +
    + ); +} diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx new file mode 100644 index 00000000000000..638825eb116108 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationRanges.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import { Pagination } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function PaginationRanges() { + const classes = useStyles(); + const [page, setPage] = React.useState(1); + + function handleChange(event, value) { + setPage(value); + } + + return ( +
    + + + + + Page: {page} +
    + ); +} diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index fe746680941f82..2a41d08da3b0dd 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -24,14 +24,19 @@ You can optionally enable first-page and last-page buttons, or disable the previ {{"demo": "pages/components/pagination/PaginationOutlinedRounded.js"}} -## Pagination size - -{{"demo": "pages/components/pagination/PaginationSize.js"}} - ## Controlled pagination {{"demo": "pages/components/pagination/PaginationControlled.js"}} +## Pagination ranges + +You can specify how many digits to display either side of current page with the `siblingRange` prop, and adjacent to the start and end page number with the `boundaryRange` prop. +{{"demo": "pages/components/pagination/PaginationRanges.js"}} + +## Pagination size + +{{"demo": "pages/components/pagination/PaginationSize.js"}} + ## Accessibility ### ARIA diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 58e0ec53314179..fd0f0271cee913 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -33,7 +33,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { ...other } = usePagination(props); - const itemProps = { color, getAriaLabel, shape, size, queryString, variant } + const itemProps = { color, getAriaLabel, shape, size, queryString, variant }; return (
      start + i); + } + + const startPages = range(1, Math.min(boundaryRange + 1, count)); + const endPages = range(Math.max(count - boundaryRange, boundaryRange + 2), count); + + const siblingsStart = Math.max( + Math.min( + // Natural start + page - siblingRange, + // Lower boundary when page is high + count - boundaryRange - siblingRange * 2 - 2), + // Greater than startPages + boundaryRange + 3 + ); + + const siblingsEnd = Math.min( + Math.max( + // Natural end + page + siblingRange, + // Upper boundary when page is low + boundaryRange + siblingRange * 2 + 3 + ), + // Less than endPages + endPages[0] - 2 + ); + + const siblingPages = range(siblingsStart, siblingsEnd); + const itemProps = { disabled, onChange: handleChange, @@ -25,7 +57,6 @@ export default function usePagination(props) { items.push({ ...itemProps, disabled: disabled || page <= 1, - page: 1, type: 'first', }); } @@ -35,68 +66,64 @@ export default function usePagination(props) { items.push({ ...itemProps, disabled: disabled || page <= 1, - page: page - 1, type: 'previous', }); } - // First page - items.push({ - ...itemProps, - page: 1, - selected: page === 1, - }); + // Start pages + startPages.forEach(i => ( + items.push({ + ...itemProps, + page: i, + selected: page === i, + }) + )); // Start ellipsis - if (page - siblingRange > 3) { + if (siblingsStart > boundaryRange + 3) { items.push({ type: 'ellipsis' }); - } else { + } else if (2 + boundaryRange < count - boundaryRange - 1) { items.push({ ...itemProps, - page: 2, - selected: page === 2, + page: 2 + boundaryRange, + selected: page === 2 + boundaryRange, }); } - // Siblings - for ( - let i = Math.max(3, Math.min(page - siblingRange, count - 2 - siblingRange * 2)); - i <= Math.max(Math.min(count - 2, page + siblingRange), siblingRange * 2 + 3); - i += 1 - ) { + // Sibling pages + siblingPages.forEach(i => ( items.push({ ...itemProps, page: i, selected: page === i, - }); - } + }) + )); // End ellipsis - if (page + siblingRange < count - 2) { + if (siblingsEnd < count - boundaryRange - 2) { items.push({ type: 'ellipsis' }); - } else { + } else if (count - boundaryRange - 1 > boundaryRange + 1) { items.push({ ...itemProps, - page: count - 1, - selected: page === count - 1, + page: count - boundaryRange - 1, + selected: page === count - boundaryRange - 1, }); } - // Last page - if (count > 1) { + // End pages + endPages.forEach(i => ( items.push({ ...itemProps, - page: count, - selected: page === count, - }); - } + page: i, + selected: page === i, + }) + )); // Next page button if (!hideNextButton) { items.push({ ...itemProps, disabled: disabled || page >= count, - page: page + 1, type: 'next', }); } @@ -106,11 +133,12 @@ export default function usePagination(props) { items.push({ ...itemProps, disabled: disabled || page >= count, - page: count, type: 'last', }); } + console.log(items) + return { items, ...other, diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 6a321c842a92c1..5b35a9c9a9aaf1 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -50,7 +50,7 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -59,7 +59,7 @@ const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -244,25 +244,25 @@ function PaginationItem(props) {
      ...
      ) : ( -
    • - handleChange(event, page) : undefined} - className={buttonClass} - > - {type === 'page' && page} - {type === 'previous' && } - {type === 'next' && } - {type === 'first' && } - {type === 'last' && } - -
      • - )} +
    • + handleChange(event, page) : undefined} + className={buttonClass} + > + {type === 'page' && page} + {type === 'previous' && } + {type === 'next' && } + {type === 'first' && } + {type === 'last' && } + +
      • + )} ); } From ed0e6ec270d068adfa33a7098fda086359c212e3 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 10 Jan 2020 23:52:23 +0000 Subject: [PATCH 12/64] refactor usePaginiation --- .../pagination/PaginationRanges.tsx | 8 +- .../src/Pagination/usePagination.js | 141 ++++++------------ 2 files changed, 56 insertions(+), 93 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx index 638825eb116108..497d29a06c18f8 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.tsx +++ b/docs/src/pages/components/pagination/PaginationRanges.tsx @@ -26,7 +26,13 @@ export default function PaginationRanges() { - + Page: {page}
    ); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 0b51bd868b4e5e..468879d865c961 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -26,9 +26,10 @@ export default function usePagination(props) { // Natural start page - siblingRange, // Lower boundary when page is high - count - boundaryRange - siblingRange * 2 - 2), + count - boundaryRange - siblingRange * 2 - 2, + ), // Greater than startPages - boundaryRange + 3 + boundaryRange + 3, ); const siblingsEnd = Math.min( @@ -36,108 +37,64 @@ export default function usePagination(props) { // Natural end page + siblingRange, // Upper boundary when page is low - boundaryRange + siblingRange * 2 + 3 + boundaryRange + siblingRange * 2 + 3, ), // Less than endPages - endPages[0] - 2 + endPages[0] - 2, ); const siblingPages = range(siblingsStart, siblingsEnd); + // itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] + const itemList = [ + ...(showFirstButton ? ['first'] : []), + ...(hidePrevButton ? [] : ['previous']), + ...startPages, + + // Start ellipsis + // eslint-disable-next-line no-nested-ternary + ...(siblingsStart > boundaryRange + 3 + ? ['ellipsis'] + : 2 + boundaryRange < count - boundaryRange - 1 + ? [2 + boundaryRange] + : []), + + ...siblingPages, + + // End ellipsis + // eslint-disable-next-line no-nested-ternary + ...(siblingsEnd < count - boundaryRange - 2 + ? ['ellipsis'] + : count - boundaryRange - 1 > boundaryRange + 1 + ? [count - boundaryRange - 1] + : []), + + ...endPages, + ...(hideNextButton ? [] : ['next']), + ...(showLastButton ? ['last'] : []), + ]; + + console.log(itemList); + const itemProps = { disabled, onChange: handleChange, page, }; - const items = []; - - // First page button - if (showFirstButton) { - items.push({ - ...itemProps, - disabled: disabled || page <= 1, - type: 'first', - }); - } - - // Previous page button - if (!hidePrevButton) { - items.push({ - ...itemProps, - disabled: disabled || page <= 1, - type: 'previous', - }); - } - - // Start pages - startPages.forEach(i => ( - items.push({ - ...itemProps, - page: i, - selected: page === i, - }) - )); - - // Start ellipsis - if (siblingsStart > boundaryRange + 3) { - items.push({ type: 'ellipsis' }); - } else if (2 + boundaryRange < count - boundaryRange - 1) { - items.push({ - ...itemProps, - page: 2 + boundaryRange, - selected: page === 2 + boundaryRange, - }); - } - - // Sibling pages - siblingPages.forEach(i => ( - items.push({ - ...itemProps, - page: i, - selected: page === i, - }) - )); - - // End ellipsis - if (siblingsEnd < count - boundaryRange - 2) { - items.push({ type: 'ellipsis' }); - } else if (count - boundaryRange - 1 > boundaryRange + 1) { - items.push({ - ...itemProps, - page: count - boundaryRange - 1, - selected: page === count - boundaryRange - 1, - }); - } - - // End pages - endPages.forEach(i => ( - items.push({ - ...itemProps, - page: i, - selected: page === i, - }) - )); - - // Next page button - if (!hideNextButton) { - items.push({ - ...itemProps, - disabled: disabled || page >= count, - type: 'next', - }); - } - - // Last page button - if (showLastButton) { - items.push({ - ...itemProps, - disabled: disabled || page >= count, - type: 'last', - }); - } - - console.log(items) + const items = itemList.map(item => { + return typeof item === 'number' + ? { + ...itemProps, + page: item, + selected: item === page, + } + : { + ...itemProps, + type: item, + disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), + }; + }); return { items, From d5aa97efa64ee98a8957e9cbf12a2cbee5a70df9 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 11 Jan 2020 15:38:52 +0000 Subject: [PATCH 13/64] Fix buttons after refactor --- .../src/Pagination/usePagination.js | 47 ++++++++++++------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 468879d865c961..c5611412229a1c 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -43,8 +43,6 @@ export default function usePagination(props) { endPages[0] - 2, ); - const siblingPages = range(siblingsStart, siblingsEnd); - // itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] const itemList = [ ...(showFirstButton ? ['first'] : []), @@ -56,44 +54,59 @@ export default function usePagination(props) { ...(siblingsStart > boundaryRange + 3 ? ['ellipsis'] : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] - : []), + ? [2 + boundaryRange] + : []), - ...siblingPages, + // Sibling pages + ...range(siblingsStart, siblingsEnd), // End ellipsis // eslint-disable-next-line no-nested-ternary ...(siblingsEnd < count - boundaryRange - 2 ? ['ellipsis'] : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] - : []), + ? [count - boundaryRange - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : []), ]; - console.log(itemList); - const itemProps = { disabled, onChange: handleChange, page, }; + function buttonPage(type) { + switch (type) { + case 'first': + return 1; + case 'previous': + return page - 1; + case 'next': + return page + 1; + case 'last': + return count; + default: + } + + } + const items = itemList.map(item => { return typeof item === 'number' ? { - ...itemProps, - page: item, - selected: item === page, - } + ...itemProps, + page: item, + selected: item === page, + } : { - ...itemProps, - type: item, - disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), - }; + ...itemProps, + type: item, + page: buttonPage(item), + disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), + }; }); return { From e845016cbd97ef29ac3bc5da70af833f800c99b6 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 12 Jan 2020 15:49:10 +0000 Subject: [PATCH 14/64] misc cleanup --- .../src/Pagination/Pagination.js | 3 +-- .../src/Pagination/usePagination.js | 27 +++++++++---------- .../src/PaginationItem/PaginationItem.js | 14 +++------- 3 files changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index fd0f0271cee913..d7f73c8bb07fc3 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -28,12 +28,11 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { renderItem = (item, index) => , shape = 'round', size, - queryString = 'page', variant = 'text', ...other } = usePagination(props); - const itemProps = { color, getAriaLabel, shape, size, queryString, variant }; + const itemProps = { color, getAriaLabel, shape, size, variant }; return (
      boundaryRange + 3 ? ['ellipsis'] : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] - : []), + ? [2 + boundaryRange] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -65,8 +65,8 @@ export default function usePagination(props) { ...(siblingsEnd < count - boundaryRange - 2 ? ['ellipsis'] : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] - : []), + ? [count - boundaryRange - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -91,22 +91,21 @@ export default function usePagination(props) { return count; default: } - } const items = itemList.map(item => { return typeof item === 'number' ? { - ...itemProps, - page: item, - selected: item === page, - } + ...itemProps, + page: item, + selected: item === page, + } : { - ...itemProps, - type: item, - page: buttonPage(item), - disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), - }; + ...itemProps, + type: item, + page: buttonPage(item), + disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), + }; }); return { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 5b35a9c9a9aaf1..a855be90dc0b2a 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -250,9 +250,7 @@ function PaginationItem(props) { getAriaLabel ? getAriaLabel(type, page, selected) : ariaLabel(type, page, selected) } aria-current={selected ? 'page' : undefined} - component={handleChange ? 'div' : 'a'} - href={handleChange ? undefined : ''} - onClick={handleChange ? event => handleChange(event, page) : undefined} + onClick={event => handleChange(event, page)} className={buttonClass} > {type === 'page' && page} @@ -299,15 +297,11 @@ PaginationItem.propTypes = { * @param {object} event The event source of the callback. * @param {number} page The page selected. */ - onChange: PropTypes.func, + onChange: PropTypes.func.isRequired, /** * The current page number. */ - page: PropTypes.number, - /** - * The query string used to identify the page. - */ - queryString: PropTypes.string, + page: PropTypes.number.isRequired, /** * If `true` the pagination item is selected. */ @@ -330,4 +324,4 @@ PaginationItem.propTypes = { variant: PropTypes.oneOf(['text', 'outlined']), }; -export default withStyles(styles, { name: 'PrivatePaginationItem' })(PaginationItem); +export default withStyles(styles, { name: 'MuiPaginationItem' })(PaginationItem); From 7f68de1437000f08495c5049be41756aab89f6a5 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 12 Jan 2020 20:10:52 +0000 Subject: [PATCH 15/64] uncontrolled --- .../pages/components/pagination/Pagination.js | 2 +- .../components/pagination/Pagination.tsx | 2 +- .../pagination/PaginationButtons.js | 2 +- .../pagination/PaginationButtons.tsx | 2 +- .../pagination/PaginationControlled.js | 10 ++-- .../pagination/PaginationControlled.tsx | 10 ++-- .../pagination/PaginationOutlined.js | 2 +- .../pagination/PaginationOutlined.tsx | 2 +- .../pagination/PaginationOutlinedRounded.js | 2 +- .../pagination/PaginationOutlinedRounded.tsx | 2 +- .../components/pagination/PaginationRanges.js | 23 ++-------- .../pagination/PaginationRanges.tsx | 23 ++-------- .../components/pagination/PaginationSize.js | 2 +- .../components/pagination/PaginationSize.tsx | 2 +- .../pages/components/pagination/pagination.md | 20 ++++---- .../src/Pagination/usePagination.js | 46 ++++++++++++++++--- 16 files changed, 77 insertions(+), 75 deletions(-) diff --git a/docs/src/pages/components/pagination/Pagination.js b/docs/src/pages/components/pagination/Pagination.js index 8a43ef758442bd..400314ac13f661 100644 --- a/docs/src/pages/components/pagination/Pagination.js +++ b/docs/src/pages/components/pagination/Pagination.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/components/pagination/Pagination.tsx b/docs/src/pages/components/pagination/Pagination.tsx index 899ebdb7ccf13c..2da38a215cd550 100644 --- a/docs/src/pages/components/pagination/Pagination.tsx +++ b/docs/src/pages/components/pagination/Pagination.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/docs/src/pages/components/pagination/PaginationButtons.js b/docs/src/pages/components/pagination/PaginationButtons.js index 629d14edc3c9d0..8ce0aff084a51d 100644 --- a/docs/src/pages/components/pagination/PaginationButtons.js +++ b/docs/src/pages/components/pagination/PaginationButtons.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/components/pagination/PaginationButtons.tsx b/docs/src/pages/components/pagination/PaginationButtons.tsx index 487fc1132ab58e..846cc68b76f875 100644 --- a/docs/src/pages/components/pagination/PaginationButtons.tsx +++ b/docs/src/pages/components/pagination/PaginationButtons.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/docs/src/pages/components/pagination/PaginationControlled.js b/docs/src/pages/components/pagination/PaginationControlled.js index 8673fd13dd5189..4c3366c80760bf 100644 --- a/docs/src/pages/components/pagination/PaginationControlled.js +++ b/docs/src/pages/components/pagination/PaginationControlled.js @@ -1,7 +1,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; -import { Pagination } from '@material-ui/lab'; +import Typography from '@material-ui/core/Typography'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { @@ -14,15 +14,11 @@ const useStyles = makeStyles(theme => ({ export default function BasicPagination() { const classes = useStyles(); const [page, setPage] = React.useState(1); - - function handleChange(event, value) { - setPage(value); - } + const handleChange = (event, value) => setPage(value); return (
      - Page: {page}
      ); diff --git a/docs/src/pages/components/pagination/PaginationControlled.tsx b/docs/src/pages/components/pagination/PaginationControlled.tsx index 9bd556054e16b3..f0151a80db076b 100644 --- a/docs/src/pages/components/pagination/PaginationControlled.tsx +++ b/docs/src/pages/components/pagination/PaginationControlled.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; -import { Pagination } from '@material-ui/lab'; +import Typography from '@material-ui/core/Typography'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -16,15 +16,11 @@ const useStyles = makeStyles((theme: Theme) => export default function BasicPagination() { const classes = useStyles(); const [page, setPage] = React.useState(1); - - function handleChange(event, value) { - setPage(value); - } + const handleChange = (event, value) => setPage(value); return (
      - Page: {page}
      ); diff --git a/docs/src/pages/components/pagination/PaginationOutlined.js b/docs/src/pages/components/pagination/PaginationOutlined.js index 633a29dcf8056e..3d9cd6ce8137f5 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.js +++ b/docs/src/pages/components/pagination/PaginationOutlined.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx index 2a85c9f5d3a30f..8daf8adbb7da55 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlined.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js index bebcfabfae26e4..157d134a1b963c 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx index e09f690eb2b4b4..6f82398ac5d66e 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index 189695114f65cb..3085d724894af0 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -1,7 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { @@ -13,25 +12,13 @@ const useStyles = makeStyles(theme => ({ export default function PaginationRanges() { const classes = useStyles(); - const [page, setPage] = React.useState(1); - - function handleChange(event, value) { - setPage(value); - } return (
      - - - - - Page: {page} + + + +
      ); } diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx index 497d29a06c18f8..554a4de07062e2 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.tsx +++ b/docs/src/pages/components/pagination/PaginationRanges.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Typography } from '@material-ui/core'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -15,25 +14,13 @@ const useStyles = makeStyles((theme: Theme) => export default function PaginationRanges() { const classes = useStyles(); - const [page, setPage] = React.useState(1); - - function handleChange(event, value) { - setPage(value); - } return (
      - - - - - Page: {page} + + + +
      ); } diff --git a/docs/src/pages/components/pagination/PaginationSize.js b/docs/src/pages/components/pagination/PaginationSize.js index 983fed484b7eaa..bfd21b90b0ec86 100644 --- a/docs/src/pages/components/pagination/PaginationSize.js +++ b/docs/src/pages/components/pagination/PaginationSize.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles(theme => ({ root: { diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx index c2776f4e3f0546..64984eb5baf8d9 100644 --- a/docs/src/pages/components/pagination/PaginationSize.tsx +++ b/docs/src/pages/components/pagination/PaginationSize.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import { Pagination } from '@material-ui/lab'; +import Pagination from '@material-ui/lab/Pagination'; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index 2a41d08da3b0dd..ad1896a20145a6 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -11,11 +11,6 @@ components: Pagination {{"demo": "pages/components/pagination/Pagination.js"}} -## Buttons - -You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons. -{{"demo": "pages/components/pagination/PaginationButtons.js"}} - ## Outlined pagination {{"demo": "pages/components/pagination/PaginationOutlined.js"}} @@ -24,18 +19,25 @@ You can optionally enable first-page and last-page buttons, or disable the previ {{"demo": "pages/components/pagination/PaginationOutlinedRounded.js"}} -## Controlled pagination +## Pagination size -{{"demo": "pages/components/pagination/PaginationControlled.js"}} +{{"demo": "pages/components/pagination/PaginationSize.js"}} + +## Buttons + +You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons. + +{{"demo": "pages/components/pagination/PaginationButtons.js"}} ## Pagination ranges You can specify how many digits to display either side of current page with the `siblingRange` prop, and adjacent to the start and end page number with the `boundaryRange` prop. + {{"demo": "pages/components/pagination/PaginationRanges.js"}} -## Pagination size +## Controlled pagination -{{"demo": "pages/components/pagination/PaginationSize.js"}} +{{"demo": "pages/components/pagination/PaginationControlled.js"}} ## Accessibility diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 9e4687c3414eed..d41eb3b89a0275 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -1,3 +1,5 @@ +import React from 'react'; + export default function usePagination(props) { const { boundaryRange = 0, @@ -7,16 +9,48 @@ export default function usePagination(props) { hidePrevButton = false, showFirstButton = false, showLastButton = false, - onChange: handleChange, - page = 1, + onChange: handleChangeProp, + page: pageProp, siblingRange = 1, ...other } = props; - function range(start, end) { + const { current: isControlled } = React.useRef(pageProp != null); + const [pageState, setPageState] = React.useState(1); + const page = isControlled ? pageProp : pageState; + + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + if (isControlled !== (pageProp != null)) { + console.error( + [ + `Material-UI: A component is changing ${ + isControlled ? 'a ' : 'an un' + }controlled Pagination to be ${isControlled ? 'un' : ''}controlled.`, + 'Elements should not switch from uncontrolled to controlled (or vice versa).', + 'Decide between using a controlled or uncontrolled Pagination ' + + 'element for the lifetime of the component.', + 'More info: https://fb.me/react-controlled-components', + ].join('\n'), + ); + } + }, [pageProp, isControlled]); + } + + const handleChange = (event, value) => { + if (!isControlled) { + setPageState(value); + } + if (handleChangeProp) { + handleChangeProp(event, value); + } + }; + + const range = (start, end) => { const length = end - start + 1; return Array.from({ length }, (_, i) => start + i); - } + }; const startPages = range(1, Math.min(boundaryRange + 1, count)); const endPages = range(Math.max(count - boundaryRange, boundaryRange + 2), count); @@ -79,7 +113,7 @@ export default function usePagination(props) { page, }; - function buttonPage(type) { + const buttonPage = type => { switch (type) { case 'first': return 1; @@ -91,7 +125,7 @@ export default function usePagination(props) { return count; default: } - } + }; const items = itemList.map(item => { return typeof item === 'number' From 0a8aa86b8f7500d13abd68be339f7b6d64ce35ed Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 12 Jan 2020 20:40:56 +0000 Subject: [PATCH 16/64] fix demo function names --- docs/src/pages/components/pagination/PaginationButtons.js | 2 +- docs/src/pages/components/pagination/PaginationButtons.tsx | 2 +- docs/src/pages/components/pagination/PaginationControlled.js | 2 +- docs/src/pages/components/pagination/PaginationControlled.tsx | 2 +- docs/src/pages/components/pagination/PaginationOutlined.js | 2 +- docs/src/pages/components/pagination/PaginationOutlined.tsx | 2 +- .../pages/components/pagination/PaginationOutlinedRounded.js | 2 +- .../pages/components/pagination/PaginationOutlinedRounded.tsx | 2 +- docs/src/pages/components/pagination/PaginationSize.js | 2 +- docs/src/pages/components/pagination/PaginationSize.tsx | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationButtons.js b/docs/src/pages/components/pagination/PaginationButtons.js index 8ce0aff084a51d..9cf8a239a52ed9 100644 --- a/docs/src/pages/components/pagination/PaginationButtons.js +++ b/docs/src/pages/components/pagination/PaginationButtons.js @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function BasicPagination() { +export default function PaginationButtons() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationButtons.tsx b/docs/src/pages/components/pagination/PaginationButtons.tsx index 846cc68b76f875..c16072d1a30840 100644 --- a/docs/src/pages/components/pagination/PaginationButtons.tsx +++ b/docs/src/pages/components/pagination/PaginationButtons.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function BasicPagination() { +export default function PaginationButtons() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationControlled.js b/docs/src/pages/components/pagination/PaginationControlled.js index 4c3366c80760bf..f9463614852ef9 100644 --- a/docs/src/pages/components/pagination/PaginationControlled.js +++ b/docs/src/pages/components/pagination/PaginationControlled.js @@ -11,7 +11,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function BasicPagination() { +export default function PaginationControlled() { const classes = useStyles(); const [page, setPage] = React.useState(1); const handleChange = (event, value) => setPage(value); diff --git a/docs/src/pages/components/pagination/PaginationControlled.tsx b/docs/src/pages/components/pagination/PaginationControlled.tsx index f0151a80db076b..af316f0ec6c2b5 100644 --- a/docs/src/pages/components/pagination/PaginationControlled.tsx +++ b/docs/src/pages/components/pagination/PaginationControlled.tsx @@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function BasicPagination() { +export default function PaginationControlled() { const classes = useStyles(); const [page, setPage] = React.useState(1); const handleChange = (event, value) => setPage(value); diff --git a/docs/src/pages/components/pagination/PaginationOutlined.js b/docs/src/pages/components/pagination/PaginationOutlined.js index 3d9cd6ce8137f5..78a006f3d27710 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.js +++ b/docs/src/pages/components/pagination/PaginationOutlined.js @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function BasicPagination() { +export default function PaginationOutlined() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx index 8daf8adbb7da55..322475558a60db 100644 --- a/docs/src/pages/components/pagination/PaginationOutlined.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlined.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function BasicPagination() { +export default function PaginationOutlined() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js index 157d134a1b963c..98ed723ed6959c 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.js @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function BasicPagination() { +export default function PaginationOutlinedRounded() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx index 6f82398ac5d66e..1a5ff3735ded24 100644 --- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx +++ b/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function BasicPagination() { +export default function PaginationOutlinedRounded() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationSize.js b/docs/src/pages/components/pagination/PaginationSize.js index bfd21b90b0ec86..679c9083c34226 100644 --- a/docs/src/pages/components/pagination/PaginationSize.js +++ b/docs/src/pages/components/pagination/PaginationSize.js @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function BasicPagination() { +export default function PaginationSize() { const classes = useStyles(); return ( diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx index 64984eb5baf8d9..dffc165dbc769e 100644 --- a/docs/src/pages/components/pagination/PaginationSize.tsx +++ b/docs/src/pages/components/pagination/PaginationSize.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function BasicPagination() { +export default function PaginationSize() { const classes = useStyles(); return ( From 32e6617d0c1dc775d03b304455ecf09622c22d06 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 13 Jan 2020 21:31:14 +0000 Subject: [PATCH 17/64] Router integration --- .../components/pagination/PaginationLink.js | 35 ++++++++++++ .../components/pagination/PaginationLink.tsx | 39 +++++++++++++ .../components/pagination/PaginationLink2.js | 42 ++++++++++++++ .../components/pagination/PaginationLink2.tsx | 46 +++++++++++++++ .../pages/components/pagination/pagination.md | 5 ++ .../src/Pagination/Pagination.js | 13 +++-- .../material-ui-lab/src/Pagination/index.js | 1 + .../src/Pagination/usePagination.js | 6 +- .../src/PaginationItem/PaginationItem.js | 56 +++++++++---------- 9 files changed, 207 insertions(+), 36 deletions(-) create mode 100644 docs/src/pages/components/pagination/PaginationLink.js create mode 100644 docs/src/pages/components/pagination/PaginationLink.tsx create mode 100644 docs/src/pages/components/pagination/PaginationLink2.js create mode 100644 docs/src/pages/components/pagination/PaginationLink2.tsx diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js new file mode 100644 index 00000000000000..79e32f91ad6963 --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationLink.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { MemoryRouter as Router } from 'react-router'; +import { Link as RouterLink } 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'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +// 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 new file mode 100644 index 00000000000000..f42abc0004cfbd --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationLink.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { MemoryRouter as Router } from 'react-router'; +import { Link as RouterLink } 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'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +// 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 new file mode 100644 index 00000000000000..dfa44ba19f01aa --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationLink2.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { MemoryRouter as Router } from 'react-router'; +import { Link as RouterLink } 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'; +import PaginationItem from '@material-ui/lab/PaginationItem'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, +})); + +// 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, + }); + + return ( + + + {items.map((item, index) => ( +
    • + +
      • + ))} +       +       + ); +} diff --git a/docs/src/pages/components/pagination/PaginationLink2.tsx b/docs/src/pages/components/pagination/PaginationLink2.tsx new file mode 100644 index 00000000000000..dc7d063868e36f --- /dev/null +++ b/docs/src/pages/components/pagination/PaginationLink2.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { MemoryRouter as Router } from 'react-router'; +import { Link as RouterLink } 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'; +import PaginationItem from '@material-ui/lab/PaginationItem'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +// 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, + }); + + return ( + + + {items.map((item, index) => ( +
    • + +
      • + ))} +       +       + ); +} diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index ad1896a20145a6..8308eb65207b52 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -39,6 +39,11 @@ You can specify how many digits to display either side of current page with the {{"demo": "pages/components/pagination/PaginationControlled.js"}} +## Router integration + +{{"demo": "pages/components/pagination/PaginationLink.js"}} +{{"demo": "pages/components/pagination/PaginationLink2.js"}} + ## Accessibility ### ARIA diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index d7f73c8bb07fc3..7d02dbdad0493d 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -11,6 +11,7 @@ export const styles = { display: 'flex', flexWrap: 'wrap', alignItems: 'center', + listStyleType: 'none', padding: 0, // Reset margin: 0, // Reset }, @@ -25,7 +26,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { component: Component = 'ul', getItemAriaLabel: getAriaLabel, items, - renderItem = (item, index) => , + renderItem = item => , shape = 'round', size, variant = 'text', @@ -43,7 +44,10 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { ref={ref} {...other} > - {children || items.map((item, index) => renderItem({ ...item, ...itemProps }, index))} + {children || + items.map((item, index) => ( +
    • {renderItem({ key: index.toString(), ...item, ...itemProps })}
      • + ))}
    ); }); @@ -73,13 +77,12 @@ Pagination.propTypes = { /** * The component used for the root node. * Either a string to use a DOM element or a component. - * By default, it maps the variant to a good default headline component. */ component: PropTypes.elementType, /** * The total number of pages. */ - count: PropTypes.number.isRequired, + count: PropTypes.number, /** * If `true`, all the pagination component will be disabled. */ @@ -111,7 +114,7 @@ Pagination.propTypes = { /** * The current page. */ - page: PropTypes.number.isRequired, + page: PropTypes.number, /** * Render the item. * diff --git a/packages/material-ui-lab/src/Pagination/index.js b/packages/material-ui-lab/src/Pagination/index.js index eaef04eb736083..c5fe13b7582c02 100644 --- a/packages/material-ui-lab/src/Pagination/index.js +++ b/packages/material-ui-lab/src/Pagination/index.js @@ -1 +1,2 @@ export { default } from './Pagination'; +export { default as usePagination } from './usePagination'; diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index d41eb3b89a0275..1b6b26c3d05e44 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -3,7 +3,7 @@ import React from 'react'; export default function usePagination(props) { const { boundaryRange = 0, - count, + count = 0, disabled = false, hideNextButton = false, hidePrevButton = false, @@ -38,7 +38,7 @@ export default function usePagination(props) { }, [pageProp, isControlled]); } - const handleChange = (event, value) => { + const handleClick = (event, value) => { if (!isControlled) { setPageState(value); } @@ -109,7 +109,7 @@ export default function usePagination(props) { const itemProps = { disabled, - onChange: handleChange, + onClick: handleClick, page, }; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index a855be90dc0b2a..9c1b68c5683d93 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -12,10 +12,6 @@ import { capitalize } from '@material-ui/core/utils'; const styles = theme => ({ /* Styles applied to the root element. */ root: { - listStyleType: 'none', - }, - /* Styles applied to the button element. */ - button: { borderRadius: '50%', width: 32, height: 32, @@ -218,10 +214,11 @@ function PaginationItem(props) { classes, className, color = 'standard', + component, disabled, getAriaLabel, page, - onChange: handleChange, + onClick: handleClick, selected, shape = 'round', size = 'medium', @@ -230,7 +227,7 @@ function PaginationItem(props) { ...other } = props; - const buttonClass = clsx(classes.button, classes[variant], classes[shape], { + const buttonClass = clsx(classes.root, classes[variant], classes[shape], { [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', [classes.disabled]: disabled, [classes.selected]: selected, @@ -240,26 +237,24 @@ function PaginationItem(props) { return ( {type === 'ellipsis' ? ( -
  • -
    ...
    -
    • +
    ...
    ) : ( -
  • - handleChange(event, page)} - className={buttonClass} - > - {type === 'page' && page} - {type === 'previous' && } - {type === 'next' && } - {type === 'first' && } - {type === 'last' && } - -
    • + handleClick(event, page)} + className={buttonClass} + {...other} + > + {type === 'page' && page} + {type === 'previous' && } + {type === 'next' && } + {type === 'first' && } + {type === 'last' && } + )}     ); @@ -278,6 +273,11 @@ PaginationItem.propTypes = { * The active color. */ color: PropTypes.oneOf(['standard', 'primary', 'secondary']), + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + */ + component: PropTypes.elementType, /** * If `true`, the button will be disabled. */ @@ -297,11 +297,11 @@ PaginationItem.propTypes = { * @param {object} event The event source of the callback. * @param {number} page The page selected. */ - onChange: PropTypes.func.isRequired, + onClick: PropTypes.func, /** * The current page number. */ - page: PropTypes.number.isRequired, + page: PropTypes.number, /** * If `true` the pagination item is selected. */ @@ -324,4 +324,4 @@ PaginationItem.propTypes = { variant: PropTypes.oneOf(['text', 'outlined']), }; -export default withStyles(styles, { name: 'MuiPaginationItem' })(PaginationItem); +export default withStyles(styles, { name: 'PaginationItem' })(PaginationItem); From 40bc04918dcd5758934b3568f345b8197b0eb2bd Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 16 Jan 2020 23:04:25 +0000 Subject: [PATCH 18/64] 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, /** From 2b9a0b2242df3b85fa154a7a993704ffc5c0b7ef Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 17 Jan 2020 18:22:45 +0000 Subject: [PATCH 19/64] Use useControlled --- .../src/Pagination/Pagination.js | 2 +- .../src/Pagination/usePagination.js | 37 ++++++------------- 2 files changed, 12 insertions(+), 27 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 816cd570bb0d2c..ee59dae8863311 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -31,7 +31,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { size, variant = 'text', ...other - } = usePagination(props); + } = usePagination({ ...props, componentName: 'Pagination' }); const itemProps = { color, getAriaLabel, shape, size, variant }; diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 1b6b26c3d05e44..e1c85d21c10570 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -1,45 +1,29 @@ -import React from 'react'; +import { useControlled } from '@material-ui/core/utils'; export default function usePagination(props) { const { boundaryRange = 0, + componentName = 'usePagination', count = 0, disabled = false, hideNextButton = false, hidePrevButton = false, - showFirstButton = false, - showLastButton = false, onChange: handleChangeProp, page: pageProp, + showFirstButton = false, + showLastButton = false, siblingRange = 1, ...other } = props; - const { current: isControlled } = React.useRef(pageProp != null); - const [pageState, setPageState] = React.useState(1); - const page = isControlled ? pageProp : pageState; - - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-hooks/rules-of-hooks - React.useEffect(() => { - if (isControlled !== (pageProp != null)) { - console.error( - [ - `Material-UI: A component is changing ${ - isControlled ? 'a ' : 'an un' - }controlled Pagination to be ${isControlled ? 'un' : ''}controlled.`, - 'Elements should not switch from uncontrolled to controlled (or vice versa).', - 'Decide between using a controlled or uncontrolled Pagination ' + - 'element for the lifetime of the component.', - 'More info: https://fb.me/react-controlled-components', - ].join('\n'), - ); - } - }, [pageProp, isControlled]); - } + const [page, setPageState] = useControlled({ + controlled: pageProp, + default: 1, + name: componentName, + }); const handleClick = (event, value) => { - if (!isControlled) { + if (!pageProp) { setPageState(value); } if (handleChangeProp) { @@ -124,6 +108,7 @@ export default function usePagination(props) { case 'last': return count; default: + return null; } }; From 75bb39635adc74f8889b58410e82853c21034a0d Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 17 Jan 2020 20:30:55 +0000 Subject: [PATCH 20/64] remove itemProps abstraction --- .../src/Pagination/usePagination.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index e1c85d21c10570..49ae83ae314fc3 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -61,6 +61,7 @@ export default function usePagination(props) { endPages[0] - 2, ); + // Basic list of items to render // itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] const itemList = [ ...(showFirstButton ? ['first'] : []), @@ -91,12 +92,7 @@ export default function usePagination(props) { ...(showLastButton ? ['last'] : []), ]; - const itemProps = { - disabled, - onClick: handleClick, - page, - }; - + // Map the button type to its page number const buttonPage = type => { switch (type) { case 'first': @@ -112,15 +108,17 @@ export default function usePagination(props) { } }; + // Convert the basic item list to PaginationItem props objects const items = itemList.map(item => { return typeof item === 'number' ? { - ...itemProps, + disabled, + onClick: handleClick, page: item, selected: item === page, } : { - ...itemProps, + onClick: handleClick, type: item, page: buttonPage(item), disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), From 545f266d4bb629846aef4f2d9fe0f455698af1ee Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 17 Jan 2020 20:47:32 +0000 Subject: [PATCH 21/64] simplify paginationItem rendering --- .../src/PaginationItem/PaginationItem.js | 45 +++++++++---------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 2569513aa95536..f3d30419062ae2 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -234,29 +234,28 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { [classes[`size${capitalize(size)}`]]: size !== 'medium', }); - return ( - - {type === 'ellipsis' ? ( -
    ...
    - ) : ( - handleClick(event, page)} - className={buttonClass} - {...other} - > - {type === 'page' && page} - {type === 'previous' && } - {type === 'next' && } - {type === 'first' && } - {type === 'last' && } - - )} -     + return type === 'ellipsis' ? ( +
    + … +
    + ) : ( + handleClick(event, page)} + className={buttonClass} + {...other} + > + {type === 'page' && page} + {type === 'previous' && } + {type === 'next' && } + {type === 'first' && } + {type === 'last' && } + ); }); From 00d1d0400ed914682bf671841f2fe73dd1412507 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 17 Jan 2020 21:22:33 +0000 Subject: [PATCH 22/64] Change paginationRange demo order --- .../{PaginationLink2.js => PaginationLinkChildren.js} | 2 +- .../{PaginationLink2.tsx => PaginationLinkChildren.tsx} | 2 +- docs/src/pages/components/pagination/PaginationRanges.js | 8 ++++---- docs/src/pages/components/pagination/PaginationRanges.tsx | 8 ++++---- docs/src/pages/components/pagination/pagination.md | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) rename docs/src/pages/components/pagination/{PaginationLink2.js => PaginationLinkChildren.js} (94%) rename docs/src/pages/components/pagination/{PaginationLink2.tsx => PaginationLinkChildren.tsx} (94%) diff --git a/docs/src/pages/components/pagination/PaginationLink2.js b/docs/src/pages/components/pagination/PaginationLinkChildren.js similarity index 94% rename from docs/src/pages/components/pagination/PaginationLink2.js rename to docs/src/pages/components/pagination/PaginationLinkChildren.js index 2eeee2f19d8be9..e7f364e0241b80 100644 --- a/docs/src/pages/components/pagination/PaginationLink2.js +++ b/docs/src/pages/components/pagination/PaginationLinkChildren.js @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export default function PaginationLink2() { +export default function PaginationLinkChildren() { const { items } = usePagination({ count: 10, }); diff --git a/docs/src/pages/components/pagination/PaginationLink2.tsx b/docs/src/pages/components/pagination/PaginationLinkChildren.tsx similarity index 94% rename from docs/src/pages/components/pagination/PaginationLink2.tsx rename to docs/src/pages/components/pagination/PaginationLinkChildren.tsx index 0712db084a307b..a1c1474ebdb953 100644 --- a/docs/src/pages/components/pagination/PaginationLink2.tsx +++ b/docs/src/pages/components/pagination/PaginationLinkChildren.tsx @@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function PaginationLink2() { +export default function PaginationLinkChildren() { const { items } = usePagination({ count: 10, }); diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index 3085d724894af0..97fac135fbb157 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -15,10 +15,10 @@ export default function PaginationRanges() { return (
    - - - - + + {/* Default: siblingRange={1} boundaryRange={0} */} + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx index 554a4de07062e2..6e2330bfde02c3 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.tsx +++ b/docs/src/pages/components/pagination/PaginationRanges.tsx @@ -17,10 +17,10 @@ export default function PaginationRanges() { return (
    - - - - + + {/* Default: siblingRange={1} boundaryRange={0} */} + +
    ); } diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index 6db2391dee9737..a4e7c85939b8d1 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -42,7 +42,7 @@ You can specify how many digits to display either side of current page with the ## Router integration {{"demo": "pages/components/pagination/PaginationLink.js"}} -{{"demo": "pages/components/pagination/PaginationLink2.js"}} +{{"demo": "pages/components/pagination/PaginationLinkChildren.js"}} ## Accessibility From 1bb5913cbadb0cd1c1c0680b34514c2e9d5b8c23 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 17 Jan 2020 21:33:35 +0000 Subject: [PATCH 23/64] Support defaultPage --- docs/src/pages/components/pagination/PaginationRanges.js | 8 ++++---- docs/src/pages/components/pagination/PaginationRanges.tsx | 8 ++++---- packages/material-ui-lab/src/Pagination/Pagination.js | 4 ++++ packages/material-ui-lab/src/Pagination/usePagination.js | 3 ++- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index 97fac135fbb157..4181674dc00fd1 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -15,10 +15,10 @@ export default function PaginationRanges() { return (
    - - {/* Default: siblingRange={1} boundaryRange={0} */} - - + + {/* Default ranges */} + +
    ); } diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx index 6e2330bfde02c3..bc19406d5edcc5 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.tsx +++ b/docs/src/pages/components/pagination/PaginationRanges.tsx @@ -17,10 +17,10 @@ export default function PaginationRanges() { return (
    - - {/* Default: siblingRange={1} boundaryRange={0} */} - - + + {/* Default ranges */} + +
    ); } diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index ee59dae8863311..ac837bd56f9768 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -83,6 +83,10 @@ Pagination.propTypes = { * The total number of pages. */ count: PropTypes.number, + /** + * The page selected by default when the component is uncontrolled. + */ + defaultPage: PropTypes.number, /** * If `true`, all the pagination component will be disabled. */ diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 49ae83ae314fc3..a6507047c7f5ac 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -5,6 +5,7 @@ export default function usePagination(props) { boundaryRange = 0, componentName = 'usePagination', count = 0, + defaultPage = 1, disabled = false, hideNextButton = false, hidePrevButton = false, @@ -18,7 +19,7 @@ export default function usePagination(props) { const [page, setPageState] = useControlled({ controlled: pageProp, - default: 1, + default: defaultPage, name: componentName, }); From c1f65508e30abf5f360bd9ab97d9c27a379a0f80 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 18 Jan 2020 14:27:33 +0000 Subject: [PATCH 24/64] Add tests for usePagination --- package.json | 1 + .../src/Pagination/usePagination.js | 32 ++--- .../src/Pagination/usePagination.test.js | 128 ++++++++++++++++++ yarn.lock | 25 +++- 4 files changed, 169 insertions(+), 17 deletions(-) create mode 100644 packages/material-ui-lab/src/Pagination/usePagination.test.js diff --git a/package.json b/package.json index bec5a1b8031add..006c8b085b87e8 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@babel/register": "^7.7.4", "@testing-library/dom": "^6.8.1", "@testing-library/react": "^9.3.2", + "@testing-library/react-hooks": "3.2.1", "@types/chai": "^4.2.3", "@types/chai-dom": "^0.0.8", "@types/enzyme": "^3.10.3", diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index a6507047c7f5ac..d3601438520b6a 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -1,10 +1,10 @@ import { useControlled } from '@material-ui/core/utils'; -export default function usePagination(props) { +export default function usePagination(props = {}) { const { boundaryRange = 0, componentName = 'usePagination', - count = 0, + count = 1, defaultPage = 1, disabled = false, hideNextButton = false, @@ -74,8 +74,8 @@ export default function usePagination(props) { ...(siblingsStart > boundaryRange + 3 ? ['ellipsis'] : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] - : []), + ? [2 + boundaryRange] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -85,8 +85,8 @@ export default function usePagination(props) { ...(siblingsEnd < count - boundaryRange - 2 ? ['ellipsis'] : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] - : []), + ? [count - boundaryRange - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -113,17 +113,17 @@ export default function usePagination(props) { const items = itemList.map(item => { return typeof item === 'number' ? { - disabled, - onClick: handleClick, - page: item, - selected: item === page, - } + disabled, + onClick: handleClick, + page: item, + selected: item === page, + } : { - onClick: handleClick, - type: item, - page: buttonPage(item), - disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), - }; + onClick: handleClick, + type: item, + page: buttonPage(item), + disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), + }; }); return { diff --git a/packages/material-ui-lab/src/Pagination/usePagination.test.js b/packages/material-ui-lab/src/Pagination/usePagination.test.js new file mode 100644 index 00000000000000..c316a4f094aba0 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/usePagination.test.js @@ -0,0 +1,128 @@ +import { renderHook } from '@testing-library/react-hooks'; +import { assert } from 'chai'; +import { usePagination } from '.'; + +describe('usePagination', () => { + it('has one page by default', () => { + const { items } = renderHook(() => usePagination()).result.current; + assert.strictEqual(items.length, 3); + assert.strictEqual(items[1].page, 1); + }); + + it('has disabled previous & next buttons by default', () => { + const { items } = renderHook(() => usePagination()).result.current; + assert.strictEqual(items[0].type, 'previous'); + assert.strictEqual(items[0].disabled, true); + assert.strictEqual(items[2].type, 'next'); + assert.strictEqual(items[2].disabled, true); + }); + it('has a disabled previous button & an enabled next button when count > 1', () => { + const { items } = renderHook(() => usePagination({ count: 2 })).result.current; + assert.strictEqual(items[0].type, 'previous'); + assert.strictEqual(items[0].disabled, true); + assert.strictEqual(items[3].type, 'next'); + assert.strictEqual(items[3].disabled, false); + assert.strictEqual(items[3].page, 2); + }); + it('has an enabled previous button & disabled next button when page === count', () => { + const { items } = renderHook(() => usePagination({ count: 2, page: 2 })).result.current; + assert.strictEqual(items[0].type, 'previous'); + assert.strictEqual(items[0].disabled, false); + assert.strictEqual(items[0].page, 1); + assert.strictEqual(items[3].type, 'next'); + assert.strictEqual(items[3].disabled, true); + }); + it('has a disabled first button when showFirstButton === true', () => { + const { items } = renderHook(() => usePagination({ showFirstButton: true })).result.current; + assert.strictEqual(items[0].type, 'first'); + assert.strictEqual(items[0].disabled, true); + assert.strictEqual(items[0].page, 1); + }); + it('has a disabled last button when showLastButton === true', () => { + const { items } = renderHook(() => usePagination({ showLastButton: true })).result.current; + assert.strictEqual(items[3].type, 'last'); + assert.strictEqual(items[3].disabled, true); + assert.strictEqual(items[3].page, 1); + }); + it('has an enabled first button when showFirstButton === true && page > 1', () => { + const { items } = renderHook(() => + usePagination({ showFirstButton: true, count: 2, page: 2 }), + ).result.current; + assert.strictEqual(items[0].type, 'first'); + assert.strictEqual(items[0].disabled, false); + assert.strictEqual(items[0].page, 1); + }); + it('has an enabled last button when showLastButton === true && page < count', () => { + const { items } = renderHook(() => + usePagination({ showLastButton: true, count: 2 }), + ).result.current; + assert.strictEqual(items[4].type, 'last'); + assert.strictEqual(items[4].disabled, false); + assert.strictEqual(items[4].page, 2); + }); + it('has no ellipses when count <= 7', () => { + const { items } = renderHook(() => usePagination({ count: 7 })).result.current; + assert.strictEqual(items[1].page, 1); + assert.strictEqual(items[2].page, 2); + assert.strictEqual(items[3].page, 3); + assert.strictEqual(items[4].page, 4); + assert.strictEqual(items[5].page, 5); + assert.strictEqual(items[6].page, 6); + assert.strictEqual(items[7].page, 7); + }); + it('has an end ellipsis by default when count >= 8', () => { + const { items } = renderHook(() => usePagination({ count: 8 })).result.current; + assert.strictEqual(items.length, 9); + assert.strictEqual(items[2].page, 2); + assert.strictEqual(items[6].type, 'ellipsis'); + assert.strictEqual(items[6].page, null); + }); + it('has a start ellipsis when page >= 5', () => { + const { items } = renderHook(() => usePagination({ count: 8, page: 5 })).result.current; + assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[2].page, null); + assert.strictEqual(items[6].page, 7); + }); + it('has start & end ellipsis when count >= 9', () => { + const { items } = renderHook(() => usePagination({ count: 9, page: 5 })).result.current; + assert.strictEqual(items.length, 9); + assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[2].page, null); + assert.strictEqual(items[6].type, 'ellipsis'); + assert.strictEqual(items[6].page, null); + }); + it('can have a reduced siblingRange', () => { + const { items } = renderHook(() => + usePagination({ count: 7, page: 4, siblingRange: 0 }), + ).result.current; + assert.strictEqual(items.length, 7); + assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[3].page, 4); + assert.strictEqual(items[4].type, 'ellipsis'); + }); + it('can have an increased siblingRange', () => { + const { items } = renderHook(() => + usePagination({ count: 11, page: 6, siblingRange: 2 }), + ).result.current; + assert.strictEqual(items.length, 11); + assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[3].page, 4); + assert.strictEqual(items[4].page, 5); + assert.strictEqual(items[5].page, 6); + assert.strictEqual(items[6].page, 7); + assert.strictEqual(items[7].page, 8); + assert.strictEqual(items[8].type, 'ellipsis'); + }); + it('can have an increased boundaryRange', () => { + const { items } = renderHook(() => + usePagination({ count: 11, page: 6, boundaryRange: 1 }), + ).result.current; + assert.strictEqual(items.length, 11); + assert.strictEqual(items[1].page, 1); + assert.strictEqual(items[2].page, 2); + assert.strictEqual(items[3].type, 'ellipsis'); + assert.strictEqual(items[7].type, 'ellipsis'); + assert.strictEqual(items[8].page, 10); + assert.strictEqual(items[9].page, 11); + }); +}); diff --git a/yarn.lock b/yarn.lock index 6f541a31cd6f95..b6465e072a9f1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -838,7 +838,7 @@ core-js "^2.6.5" regenerator-runtime "^0.13.2" -"@babel/runtime@7.0.0", "@babel/runtime@7.1.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6": +"@babel/runtime@7.0.0", "@babel/runtime@7.1.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6": version "7.8.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.0.tgz#8c81711517c56b3d00c6de706b0fb13dc3531549" integrity sha512-Z7ti+HB0puCcLmFE3x90kzaVgbx6TRrYIReaygW6EkBEnJh1ajS4/inhF7CypzWeDV3NFl1AfWj0eMtdihojxw== @@ -2023,6 +2023,14 @@ pretty-format "^24.9.0" wait-for-expect "^3.0.0" +"@testing-library/react-hooks@3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294" + integrity sha512-1OB6Ksvlk6BCJA1xpj8/WWz0XVd1qRcgqdaFAq+xeC6l61Ucj0P6QpA5u+Db/x9gU4DCX8ziR5b66Mlfg0M2RA== + dependencies: + "@babel/runtime" "^7.5.4" + "@types/testing-library__react-hooks" "^3.0.0" + "@testing-library/react@^9.3.2": version "9.4.0" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5" @@ -2239,6 +2247,13 @@ dependencies: "@types/react" "*" +"@types/react-test-renderer@*": + version "16.9.1" + resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.1.tgz#9d432c46c515ebe50c45fa92c6fb5acdc22e39c4" + integrity sha512-nCXQokZN1jp+QkoDNmDZwoWpKY8HDczqevIDO4Uv9/s9rbGPbSpy8Uaxa5ixHKkcm/Wt0Y9C3wCxZivh4Al+rQ== + dependencies: + "@types/react" "*" + "@types/react-text-mask@^5.4.6": version "5.4.6" resolved "https://registry.yarnpkg.com/@types/react-text-mask/-/react-text-mask-5.4.6.tgz#3a81e9de472beb939038e78cb16d737ae94ba14a" @@ -2312,6 +2327,14 @@ dependencies: "@types/pretty-format" "*" +"@types/testing-library__react-hooks@^3.0.0": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.2.0.tgz#52f3a109bef06080e3b1e3ae7ea1c014ce859897" + integrity sha512-dE8iMTuR5lzB+MqnxlzORlXzXyCL0EKfzH0w/lau20OpkHD37EaWjZDz0iNG8b71iEtxT4XKGmSKAGVEqk46mw== + dependencies: + "@types/react" "*" + "@types/react-test-renderer" "*" + "@types/testing-library__react@^9.1.2": version "9.1.2" resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351" From ac3d8d08b1fdcdf66524ffebf3092bc93a216e8a Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 18 Jan 2020 14:32:47 +0000 Subject: [PATCH 25/64] Remove incomplete typescript demos --- .../components/pagination/BasicPagination.tsx | 26 ------------- .../pagination/PaginationButtons.tsx | 24 ------------ .../pagination/PaginationControlled.tsx | 27 ------------- .../components/pagination/PaginationLink.tsx | 33 ---------------- .../pagination/PaginationLinkChildren.tsx | 39 ------------------- .../pagination/PaginationOutlined.tsx | 26 ------------- .../pagination/PaginationRanges.tsx | 26 ------------- .../pagination/PaginationRounded.tsx | 24 ------------ .../components/pagination/PaginationSize.tsx | 25 ------------ 9 files changed, 250 deletions(-) delete mode 100644 docs/src/pages/components/pagination/BasicPagination.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationButtons.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationControlled.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationLink.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationLinkChildren.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationOutlined.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationRanges.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationRounded.tsx delete mode 100644 docs/src/pages/components/pagination/PaginationSize.tsx diff --git a/docs/src/pages/components/pagination/BasicPagination.tsx b/docs/src/pages/components/pagination/BasicPagination.tsx deleted file mode 100644 index 2da38a215cd550..00000000000000 --- a/docs/src/pages/components/pagination/BasicPagination.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function BasicPagination() { - const classes = useStyles(); - - return ( -
    - - - - -
    - ); -} diff --git a/docs/src/pages/components/pagination/PaginationButtons.tsx b/docs/src/pages/components/pagination/PaginationButtons.tsx deleted file mode 100644 index c16072d1a30840..00000000000000 --- a/docs/src/pages/components/pagination/PaginationButtons.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationButtons() { - const classes = useStyles(); - - return ( -
    - - -
    - ); -} diff --git a/docs/src/pages/components/pagination/PaginationControlled.tsx b/docs/src/pages/components/pagination/PaginationControlled.tsx deleted file mode 100644 index af316f0ec6c2b5..00000000000000 --- a/docs/src/pages/components/pagination/PaginationControlled.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationControlled() { - const classes = useStyles(); - const [page, setPage] = React.useState(1); - const handleChange = (event, value) => setPage(value); - - return ( -
    - - Page: {page} -
    - ); -} diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx b/docs/src/pages/components/pagination/PaginationLink.tsx deleted file mode 100644 index 92713f6bdc6921..00000000000000 --- a/docs/src/pages/components/pagination/PaginationLink.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { MemoryRouter as Router } from 'react-router'; -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'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationLink() { - return ( - - ( - - )} - /> - - ); -} diff --git a/docs/src/pages/components/pagination/PaginationLinkChildren.tsx b/docs/src/pages/components/pagination/PaginationLinkChildren.tsx deleted file mode 100644 index a1c1474ebdb953..00000000000000 --- a/docs/src/pages/components/pagination/PaginationLinkChildren.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { MemoryRouter as Router } from 'react-router'; -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'; -import PaginationItem from '@material-ui/lab/PaginationItem'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationLinkChildren() { - const { items } = usePagination({ - count: 10, - }); - - return ( - - - {items.map((item, index) => ( -
  • - -
    • - ))} -     -     - ); -} diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx deleted file mode 100644 index 322475558a60db..00000000000000 --- a/docs/src/pages/components/pagination/PaginationOutlined.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationOutlined() { - const classes = useStyles(); - - return ( -
    - - - - -
    - ); -} diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx deleted file mode 100644 index bc19406d5edcc5..00000000000000 --- a/docs/src/pages/components/pagination/PaginationRanges.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationRanges() { - const classes = useStyles(); - - return ( -
    - - {/* Default ranges */} - - -
    - ); -} diff --git a/docs/src/pages/components/pagination/PaginationRounded.tsx b/docs/src/pages/components/pagination/PaginationRounded.tsx deleted file mode 100644 index 66df6a30535cf6..00000000000000 --- a/docs/src/pages/components/pagination/PaginationRounded.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationRounded() { - const classes = useStyles(); - - return ( -
    - - -
    - ); -} diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx deleted file mode 100644 index dffc165dbc769e..00000000000000 --- a/docs/src/pages/components/pagination/PaginationSize.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import Pagination from '@material-ui/lab/Pagination'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function PaginationSize() { - const classes = useStyles(); - - return ( -
    - - - -
    - ); -} From 47891cc645a19eb26f543275e54f932773e87071 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 18 Jan 2020 21:03:04 +0000 Subject: [PATCH 26/64] Update API docs --- docs/pages/api/pagination-item.js | 7 +++ docs/pages/api/pagination-item.md | 46 +++++++++++++++++++ docs/pages/api/pagination.md | 33 ++++++------- .../pages/components/pagination/pagination.md | 2 +- .../src/Pagination/Pagination.test.js | 0 .../src/PaginationItem/PaginationItem.test.js | 0 6 files changed, 69 insertions(+), 19 deletions(-) create mode 100644 docs/pages/api/pagination-item.js create mode 100644 docs/pages/api/pagination-item.md create mode 100644 packages/material-ui-lab/src/Pagination/Pagination.test.js create mode 100644 packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js diff --git a/docs/pages/api/pagination-item.js b/docs/pages/api/pagination-item.js new file mode 100644 index 00000000000000..0f86547725f748 --- /dev/null +++ b/docs/pages/api/pagination-item.js @@ -0,0 +1,7 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './pagination-item.md'; + +export default function Page() { + return ; +} diff --git a/docs/pages/api/pagination-item.md b/docs/pages/api/pagination-item.md new file mode 100644 index 00000000000000..573f6dc21b6d58 --- /dev/null +++ b/docs/pages/api/pagination-item.md @@ -0,0 +1,46 @@ +--- +filename: /packages/material-ui-lab/src/PaginationItem/PaginationItem.js +--- + + + +# PaginationItem API + +

    The API documentation of the PaginationItem React component. Learn more about the props and the CSS customization points.

    + +## Import + +```js +import PaginationItem from '@material-ui/lab/PaginationItem'; +// or +import { PaginationItem } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| color | 'standard'
    | 'primary'
    | 'secondary'     | 'standard' | The active color. | +| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | | If `true`, the item will be disabled. | +| getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.

    **Signature:**
    `function(type?: string, page: number, selected: bool) => string`
    *type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
    *page:* The page number to format.
    *selected:* If true, the current page is selected. | +| onClick | func | | Callback fired when the page is changed.

    **Signature:**
    `function(event: object, page: number) => void`
    *event:* The event source of the callback.
    *page:* The page selected. | +| page | number | | The current page number. | +| selected | bool | | If `true` the pagination item is selected. | +| shape | 'round'
    | 'rounded'     | 'round' | The shape of the pagination item. | +| size | 'small'
    | 'medium'
    | 'large'     | 'medium' | The size of the pagination item. | +| type | 'page'
    | 'ellipsis'
    | 'first'
    | 'last'
    | 'next'
    | 'previous'     | 'page' | | +| variant | 'text'
    | 'outlined'     | | | + +The component cannot hold a ref. + +Any other props supplied will be provided to the root element (native element). + +## Demos + +- [Pagination](/components/pagination/) + diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index 77d23a8ba507fd..f9be61311b6082 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -28,27 +28,24 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | children | node | | Pagination items. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
    | 'primary'
    | 'secondary'     | | The active color. | -| component | elementType | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. | -| count * | number | | The total number of pages. | -| disabled | bool | false | If `true`, all the pagination component will be disabled. | -| firstPageText | string | 'First page' | Label for the first-page button. | -| hideNextButton | bool | false | If `true`, hide the next-page button. | -| hidePrevButton | bool | false | If `true`, hide the previous-page button. | -| lastPageText | string | 'Last page' | Text label for the last-page button. | -| nextPageText | string | 'Next page' | Label for the next-page button. | +| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | +| count | number | | The total number of pages. | +| defaultPage | number | | The page selected by default when the component is uncontrolled. | +| disabled | bool | | If `true`, all the pagination component will be disabled. | +| getItemAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.

    **Signature:**
    `function(type?: string, page: number, selected: bool) => string`
    *type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
    *page:* The page number to format.
    *selected:* If true, the current page is selected. | +| hideNextButton | bool | | If `true`, hide the next-page button. | +| hidePrevButton | bool | | If `true`, hide the previous-page button. | | onChange | func | | Callback fired when the page is changed.

    **Signature:**
    `function(event: object, page: number) => void`
    *event:* The event source of the callback.
    *page:* The page selected. | -| page | number | 1 | The current page. | -| prevPageText | string | 'Previous page' | Label for the previous-page button. | -| renderItem | func | (item, index) => <PaginationItem {...item} key={index.toString()} /> | Render the item.

    **Signature:**
    `function(params: object) => ReactNode`
    *params:* null | -| separator | node | | Custom separator node. | -| shape | 'round'
    | 'rounded'     | | The shape. | -| showFirstButton | bool | false | If `true`, show the first-page button. | -| showLastButton | bool | false | If `true`, show the last-page button. | -| siblingRange | number | 1 | Number of always visible pages before and after the current one. | -| size | 'small'
    | 'medium'     | | The size. | +| page | number | | The current page. | +| renderItem | func | | Render the item.

    **Signature:**
    `function(params: object) => ReactNode`
    *params:* null | +| shape | 'round'
    | 'rounded'     | | The shape of the pagination items. | +| showFirstButton | bool | | If `true`, show the first-page button. | +| showLastButton | bool | | If `true`, show the last-page button. | +| siblingRange | number | | Number of always visible pages before and after the current page. | +| size | 'small'
    | 'medium'
    | 'large'     | | The size of the pagination component. | | variant | 'text'
    | 'outlined'     | | The variant to use. | -The `ref` is forwarded to the root element. +The component cannot hold a ref. Any other props supplied will be provided to the root element (native element). diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index a4e7c85939b8d1..88225477d49469 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -1,6 +1,6 @@ --- title: Pagination React component -components: Pagination +components: Pagination, PaginationItem --- # Pagination diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 From 10cf379f553b28ba1c3b75726de835291ad47d58 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 18 Jan 2020 22:14:44 +0000 Subject: [PATCH 27/64] Don't mandate index.d.ts --- scripts/copy-files.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/copy-files.js b/scripts/copy-files.js index cb41f6c6916cef..02c93873a688b3 100644 --- a/scripts/copy-files.js +++ b/scripts/copy-files.js @@ -42,7 +42,7 @@ async function createModulePackages({ from, to }) { ]); if (!typingsExist) { - throw new Error(`index.d.ts for ${directoryPackage} is missing`); + console.error(`index.d.ts for ${directoryPackage} is missing`); } return packageJsonPath; From df33709ed36695628ac7d5691a957f15bddbee59 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 18 Jan 2020 22:48:01 +0000 Subject: [PATCH 28/64] prettier --- .../src/Pagination/usePagination.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index d3601438520b6a..8ffd5118a03d73 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -74,8 +74,8 @@ export default function usePagination(props = {}) { ...(siblingsStart > boundaryRange + 3 ? ['ellipsis'] : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] - : []), + ? [2 + boundaryRange] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -85,8 +85,8 @@ export default function usePagination(props = {}) { ...(siblingsEnd < count - boundaryRange - 2 ? ['ellipsis'] : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] - : []), + ? [count - boundaryRange - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -113,17 +113,17 @@ export default function usePagination(props = {}) { const items = itemList.map(item => { return typeof item === 'number' ? { - disabled, - onClick: handleClick, - page: item, - selected: item === page, - } + disabled, + onClick: handleClick, + page: item, + selected: item === page, + } : { - onClick: handleClick, - type: item, - page: buttonPage(item), - disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), - }; + onClick: handleClick, + type: item, + page: buttonPage(item), + disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), + }; }); return { From ef362480f1ce621a28cf9a62cb415a7d60b4f340 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 18 Jan 2020 23:38:42 +0000 Subject: [PATCH 29/64] fix demos --- .../pages/components/pagination/PaginationLink.js | 9 --------- .../components/pagination/PaginationLinkChildren.js | 12 +----------- 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js index 0ee5fed2828c37..5a4d92d6ae31fe 100644 --- a/docs/src/pages/components/pagination/PaginationLink.js +++ b/docs/src/pages/components/pagination/PaginationLink.js @@ -1,18 +1,9 @@ import React from 'react'; import { MemoryRouter as Router } from 'react-router'; 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'; -const useStyles = makeStyles(theme => ({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, -})); - export default function PaginationLink() { return ( diff --git a/docs/src/pages/components/pagination/PaginationLinkChildren.js b/docs/src/pages/components/pagination/PaginationLinkChildren.js index e7f364e0241b80..5f25937cdd32fb 100644 --- a/docs/src/pages/components/pagination/PaginationLinkChildren.js +++ b/docs/src/pages/components/pagination/PaginationLinkChildren.js @@ -1,19 +1,9 @@ import React from 'react'; import { MemoryRouter as Router } from 'react-router'; 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'; +import Pagination, { usePagination } from '@material-ui/lab/Pagination'; import PaginationItem from '@material-ui/lab/PaginationItem'; -const useStyles = makeStyles(theme => ({ - root: { - '& > *': { - marginTop: theme.spacing(2), - }, - }, -})); - export default function PaginationLinkChildren() { const { items } = usePagination({ count: 10, From 35ed3563806196af914ee6b376a519d6a5ac25be Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 19 Jan 2020 13:35:39 +0000 Subject: [PATCH 30/64] Font sizes, size spacing, disabled ellipis --- .../src/Pagination/usePagination.js | 5 +- .../src/PaginationItem/PaginationItem.js | 70 ++++++++++++------- 2 files changed, 47 insertions(+), 28 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 8ffd5118a03d73..bf6e2b7ff3fdfc 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -122,7 +122,10 @@ export default function usePagination(props = {}) { onClick: handleClick, type: item, page: buttonPage(item), - disabled: disabled || (item === 'next' || item === 'last' ? page >= count : page <= 1), + disabled: + disabled || + (!item === 'ellipsis' && + (item === 'next' || item === 'last' ? page >= count : page <= 1)), }; }); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index f3d30419062ae2..9ba0d7d3d65a7e 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -12,10 +12,11 @@ import { capitalize } from '@material-ui/core/utils'; const styles = theme => ({ /* Styles applied to the root element. */ root: { + fontSize: theme.typography.pxToRem(14), borderRadius: '50%', width: 32, height: 32, - margin: '0 4px', + margin: '0 3px', color: theme.palette.text.primary, transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.short, @@ -41,6 +42,18 @@ const styles = theme => ({ backgroundColor: 'transparent', pointerEvents: 'none', }, + '&$sizeSmall': { + width: 24, + height: 24, + margin: '0 2px', + fontSize: theme.typography.pxToRem(13), + }, + '&$sizeLarge': { + width: 40, + height: 40, + margin: '0 4px', + fontSize: theme.typography.pxToRem(15), + }, }, /* Styles applied to the button element if `outlined="true"`. */ outlined: { @@ -174,28 +187,27 @@ const styles = theme => ({ rounded: { borderRadius: theme.shape.borderRadius, }, - /* Styles applied to the button element if `size="small"`. */ - sizeSmall: { - width: 24, - height: 24, - }, - /* Styles applied to the button element if `size="large"`. */ - sizeLarge: { - width: 40, - height: 40, - }, /* Styles applied to the ellipsis element. */ ellipsis: { + fontSize: theme.typography.pxToRem(14), textAlign: 'center', - width: 24, - margin: '0 8px', - '&sizeSmall': { - margin: 0, + width: 38, + '&$disabled': { + color: fade(theme.palette.text.primary, 0.5), + }, + '&$sizeSmall': { + fontSize: theme.typography.pxToRem(13), + width: 28, }, - '&sizeLarge': { - margin: '0 16px', + '&$sizeLarge': { + fontSize: theme.typography.pxToRem(15), + width: 48, }, }, + /* Pseudo-class applied to the root element if `size="small"`. */ + sizeSmall: {}, + /* Pseudo-class applied to the root element if `size="large"`. */ + sizeLarge: {}, /* Pseudo-class applied to the root element if `disabled={true}`. */ disabled: {}, /* Pseudo-class applied to the root element if `selected={true}`. */ @@ -215,7 +227,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { className, color = 'standard', component, - disabled, + disabled = 'false', getAriaLabel, page, onClick: handleClick, @@ -227,15 +239,14 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { ...other } = props; - const buttonClass = clsx(classes.root, classes[variant], classes[shape], { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - }); - return type === 'ellipsis' ? ( -
    +
    …
    ) : ( @@ -247,7 +258,12 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { } aria-current={selected ? 'page' : undefined} onClick={event => handleClick(event, page)} - className={buttonClass} + className={clsx(classes.root, classes[variant], classes[shape], { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + })} {...other} > {type === 'page' && page} From 11050e8b556237dc9304b64098d19f45f1a7a196 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 19 Jan 2020 13:58:44 +0000 Subject: [PATCH 31/64] Icon sizes --- .../src/PaginationItem/PaginationItem.js | 86 +++++++++++++------ 1 file changed, 61 insertions(+), 25 deletions(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 9ba0d7d3d65a7e..55b72b43c11e11 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -68,7 +68,7 @@ const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -204,6 +204,18 @@ const styles = theme => ({ width: 48, }, }, + /* Styles applied to the icon element. */ + icon: { + fontSize: theme.typography.pxToRem(20), + '&$sizeSmall': { + fontSize: theme.typography.pxToRem(18), + width: 28, + }, + '&$sizeLarge': { + fontSize: theme.typography.pxToRem(22), + width: 48, + }, + }, /* Pseudo-class applied to the root element if `size="small"`. */ sizeSmall: {}, /* Pseudo-class applied to the root element if `size="large"`. */ @@ -250,29 +262,53 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { …
    ) : ( - handleClick(event, page)} - className={clsx(classes.root, classes[variant], classes[shape], { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} - {...other} - > - {type === 'page' && page} - {type === 'previous' && } - {type === 'next' && } - {type === 'first' && } - {type === 'last' && } - - ); + handleClick(event, page)} + className={clsx(classes.root, classes[variant], classes[shape], { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + })} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + + )} + + ); }); PaginationItem.propTypes = { From df0fd3b8b4222a5751ad82f158eb21dd89792da0 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 19 Jan 2020 14:13:00 +0000 Subject: [PATCH 32/64] Internalize the icons --- .../src/PaginationItem/PaginationItem.js | 8 ++++---- .../src/internal/svg-icons/FirstPage.js | 10 ++++++++++ .../material-ui-lab/src/internal/svg-icons/LastPage.js | 7 +++++++ .../src/internal/svg-icons/NavigateBefore.js | 7 +++++++ .../src/internal/svg-icons/NavigateNext.js | 7 +++++++ 5 files changed, 35 insertions(+), 4 deletions(-) create mode 100644 packages/material-ui-lab/src/internal/svg-icons/FirstPage.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/LastPage.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js create mode 100644 packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 55b72b43c11e11..44d3b4679e45c8 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { fade, withStyles } from '@material-ui/core/styles'; import ButtonBase from '@material-ui/core/ButtonBase'; -import FirstPageIcon from '@material-ui/icons/FirstPage'; -import LastPageIcon from '@material-ui/icons/LastPage'; -import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; -import NavigateNextIcon from '@material-ui/icons/NavigateNext'; +import FirstPageIcon from '../internal/svg-icons/FirstPage'; +import LastPageIcon from '../internal/svg-icons/LastPage'; +import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; +import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; import { capitalize } from '@material-ui/core/utils'; const styles = theme => ({ diff --git a/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js b/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js new file mode 100644 index 00000000000000..291376b0f0e34b --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +export default createSvgIcon( + + + + , + 'FirstPage', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/LastPage.js b/packages/material-ui-lab/src/internal/svg-icons/LastPage.js new file mode 100644 index 00000000000000..f32bc97447d284 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/LastPage.js @@ -0,0 +1,7 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +export default createSvgIcon( + , + 'LastPage', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js b/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js new file mode 100644 index 00000000000000..8499021c91f555 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js @@ -0,0 +1,7 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +export default createSvgIcon( + , + 'NavigateBefore', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js b/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js new file mode 100644 index 00000000000000..2655298b349efd --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js @@ -0,0 +1,7 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +export default createSvgIcon( + , + 'NavigateNext', +); From 4f476e8e2dde5b17a7c08231b114531453d14a79 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 19 Jan 2020 20:48:26 +0000 Subject: [PATCH 33/64] Use unique key to fix rerender when ellipses change --- .../pagination/PaginationLinkChildren.js | 4 +- .../src/Pagination/Pagination.js | 4 +- .../src/Pagination/usePagination.js | 38 +++++++++---------- .../src/PaginationItem/PaginationItem.js | 2 +- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationLinkChildren.js b/docs/src/pages/components/pagination/PaginationLinkChildren.js index 5f25937cdd32fb..e46b2acd032661 100644 --- a/docs/src/pages/components/pagination/PaginationLinkChildren.js +++ b/docs/src/pages/components/pagination/PaginationLinkChildren.js @@ -12,8 +12,8 @@ export default function PaginationLinkChildren() { return ( - {items.map((item, index) => ( -
  • + {items.map(item => ( +
  • {children || - items.map((item, index) => ( -
  • {renderItem({ ...item, ...itemProps })}
    • + items.map(item => ( +
  • {renderItem({ ...item, ...itemProps })}
    • ))} ); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index bf6e2b7ff3fdfc..f4b5cd223c4b72 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -72,10 +72,10 @@ export default function usePagination(props = {}) { // Start ellipsis // eslint-disable-next-line no-nested-ternary ...(siblingsStart > boundaryRange + 3 - ? ['ellipsis'] + ? ['start-ellipsis'] : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] - : []), + ? [2 + boundaryRange] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -83,10 +83,10 @@ export default function usePagination(props = {}) { // End ellipsis // eslint-disable-next-line no-nested-ternary ...(siblingsEnd < count - boundaryRange - 2 - ? ['ellipsis'] + ? ['end-ellipsis'] : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] - : []), + ? [count - boundaryRange - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -113,20 +113,20 @@ export default function usePagination(props = {}) { const items = itemList.map(item => { return typeof item === 'number' ? { - disabled, - onClick: handleClick, - page: item, - selected: item === page, - } + disabled, + onClick: handleClick, + page: item, + selected: item === page, + } : { - onClick: handleClick, - type: item, - page: buttonPage(item), - disabled: - disabled || - (!item === 'ellipsis' && - (item === 'next' || item === 'last' ? page >= count : page <= 1)), - }; + onClick: handleClick, + type: item, + page: buttonPage(item), + disabled: + disabled || + (!item === 'ellipsis' && + (item === 'next' || item === 'last' ? page >= count : page <= 1)), + }; }); return { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 44d3b4679e45c8..289268a514948b 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -251,7 +251,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { ...other } = props; - return type === 'ellipsis' ? ( + return type === 'start-ellipsis' || type === 'end-ellipsis' ? (
    Date: Sun, 19 Jan 2020 21:19:28 +0000 Subject: [PATCH 34/64] reorder link demo props --- docs/src/pages/components/pagination/PaginationLink.js | 2 +- docs/src/pages/components/pagination/PaginationLinkChildren.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js index 5a4d92d6ae31fe..f58132f547b45a 100644 --- a/docs/src/pages/components/pagination/PaginationLink.js +++ b/docs/src/pages/components/pagination/PaginationLink.js @@ -11,8 +11,8 @@ export default function PaginationLink() { count={10} renderItem={item => ( )} diff --git a/docs/src/pages/components/pagination/PaginationLinkChildren.js b/docs/src/pages/components/pagination/PaginationLinkChildren.js index e46b2acd032661..11b198674efa85 100644 --- a/docs/src/pages/components/pagination/PaginationLinkChildren.js +++ b/docs/src/pages/components/pagination/PaginationLinkChildren.js @@ -15,8 +15,8 @@ export default function PaginationLinkChildren() { {items.map(item => (
    • From 9268a5e78195f645baed8b8e674b07a406d19291 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 19 Jan 2020 22:49:33 +0000 Subject: [PATCH 35/64] no transition, disable ripple --- packages/material-ui-lab/src/PaginationItem/PaginationItem.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 289268a514948b..1e14add9b7d56b 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -18,9 +18,6 @@ const styles = theme => ({ height: 32, margin: '0 3px', color: theme.palette.text.primary, - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.short, - }), '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity @@ -276,6 +273,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { [classes.selected]: selected, [classes[`size${capitalize(size)}`]]: size !== 'medium', })} + disableRipple {...other} > {type === 'page' && page} From 9f9f9b35e655e8b94d4a9fe49bab10ee4a73735a Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 20 Jan 2020 15:25:02 +0000 Subject: [PATCH 36/64] Revert "no transition, disable ripple" This reverts commit ae3ee0a2084d2f3b621af29cbb05869d82c95e19. --- packages/material-ui-lab/src/PaginationItem/PaginationItem.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 1e14add9b7d56b..289268a514948b 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -18,6 +18,9 @@ const styles = theme => ({ height: 32, margin: '0 3px', color: theme.palette.text.primary, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.short, + }), '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity @@ -273,7 +276,6 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { [classes.selected]: selected, [classes[`size${capitalize(size)}`]]: size !== 'medium', })} - disableRipple {...other} > {type === 'page' && page} From aacf707c525e2a64fb08f0b6abea71635c5c8aa9 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 20 Jan 2020 15:41:58 +0000 Subject: [PATCH 37/64] Use timer to delay click event --- .../src/Pagination/usePagination.js | 48 ++++----- .../src/PaginationItem/PaginationItem.js | 98 +++++++++---------- 2 files changed, 74 insertions(+), 72 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index f4b5cd223c4b72..54c173da7e64ca 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -24,12 +24,14 @@ export default function usePagination(props = {}) { }); const handleClick = (event, value) => { - if (!pageProp) { - setPageState(value); - } - if (handleChangeProp) { - handleChangeProp(event, value); - } + setTimeout(() => { + if (!pageProp) { + setPageState(value); + } + if (handleChangeProp) { + handleChangeProp(event, value); + } + }, 240); }; const range = (start, end) => { @@ -74,8 +76,8 @@ export default function usePagination(props = {}) { ...(siblingsStart > boundaryRange + 3 ? ['start-ellipsis'] : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] - : []), + ? [2 + boundaryRange] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -85,8 +87,8 @@ export default function usePagination(props = {}) { ...(siblingsEnd < count - boundaryRange - 2 ? ['end-ellipsis'] : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] - : []), + ? [count - boundaryRange - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -113,20 +115,20 @@ export default function usePagination(props = {}) { const items = itemList.map(item => { return typeof item === 'number' ? { - disabled, - onClick: handleClick, - page: item, - selected: item === page, - } + disabled, + onClick: handleClick, + page: item, + selected: item === page, + } : { - onClick: handleClick, - type: item, - page: buttonPage(item), - disabled: - disabled || - (!item === 'ellipsis' && - (item === 'next' || item === 'last' ? page >= count : page <= 1)), - }; + onClick: handleClick, + type: item, + page: buttonPage(item), + disabled: + disabled || + (!item === 'ellipsis' && + (item === 'next' || item === 'last' ? page >= count : page <= 1)), + }; }); return { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 289268a514948b..190cdedda74ed5 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -68,7 +68,7 @@ const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -262,53 +262,53 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { …
    ) : ( - handleClick(event, page)} - className={clsx(classes.root, classes[variant], classes[shape], { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} - {...other} - > - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - - )} - - ); + handleClick(event, page)} + className={clsx(classes.root, classes[variant], classes[shape], { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + })} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + + )} + + ); }); PaginationItem.propTypes = { From 727bac920e897878ed95470a5093b7c289e70705 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 21 Jan 2020 20:07:04 +0000 Subject: [PATCH 38/64] update roadmap, fix PaginationItem PropTypes --- .../pages/discover-more/roadmap/roadmap.md | 6 +- .../src/PaginationItem/PaginationItem.js | 100 +++++++++--------- 2 files changed, 53 insertions(+), 53 deletions(-) diff --git a/docs/src/pages/discover-more/roadmap/roadmap.md b/docs/src/pages/discover-more/roadmap/roadmap.md index 766b7aee6e5d40..fc4d71880515d2 100644 --- a/docs/src/pages/discover-more/roadmap/roadmap.md +++ b/docs/src/pages/discover-more/roadmap/roadmap.md @@ -68,7 +68,8 @@ Here are the components we will work on being supported in the Material-UI ecosy | Autocomplete | 🧪 | | Combo Box | 🧪 | | Multiselect | 🧪 | -| Alert | 🧪 | +| Alert | | +| Pagination | 🧪 | | Date Picker (& range) | 🛠 | | Data Table | 🛠⭐️ | | Carousel | ⏳ | @@ -79,7 +80,6 @@ Here are the components we will work on being supported in the Material-UI ecosy | Navbar | ⏳ | | Nested Menu | ⏳ | | Numeric Input | ⏳ | -| Pagination | ⏳ | | Scrollspy | ⏳ | | TopLayout | ⏳ | | Big Calendar | ⏳⭐️ | @@ -88,7 +88,7 @@ Here are the components we will work on being supported in the Material-UI ecosy | Color Picker | ⏳⭐️ | | Gantt Chart | ⏳⭐️ | | Gauge | ⏳⭐️ | -| Masonery | ⏳⭐️ | +| Masonary | ⏳⭐️ | | Pivot Grid | ⏳⭐️ | | Rich Text Editor | ⏳⭐️ | | Scheduler | ⏳⭐️ | diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 190cdedda74ed5..8fadf2b2ab28a9 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -68,7 +68,7 @@ const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -262,53 +262,53 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { …
    ) : ( - handleClick(event, page)} - className={clsx(classes.root, classes[variant], classes[shape], { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} - {...other} - > - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - - )} - - ); + handleClick(event, page)} + className={clsx(classes.root, classes[variant], classes[shape], { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + })} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + + )} + + ); }); PaginationItem.propTypes = { @@ -368,7 +368,7 @@ PaginationItem.propTypes = { /* * The type of pagination item. */ - type: PropTypes.oneOf(['page', 'ellipsis', 'first', 'last', 'next', 'previous']), + type: PropTypes.oneOf(['page', 'first', 'last', 'next', 'previous', 'start-ellipsis', 'end-ellipsis']), /* * The pagination item variant. */ From 8de9629eb618578812015ce11311ed3832314803 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 23 Jan 2020 00:05:57 +0000 Subject: [PATCH 39/64] fix previous / next disabled state --- .../src/Pagination/usePagination.js | 2 +- .../src/PaginationItem/PaginationItem.js | 108 ++++++++++-------- 2 files changed, 59 insertions(+), 51 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 54c173da7e64ca..f4b3bd12cd78aa 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -126,7 +126,7 @@ export default function usePagination(props = {}) { page: buttonPage(item), disabled: disabled || - (!item === 'ellipsis' && + (item !== 'ellipsis' && (item === 'next' || item === 'last' ? page >= count : page <= 1)), }; }); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 8fadf2b2ab28a9..96aaa536ec7c98 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -68,7 +68,7 @@ const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -262,53 +262,53 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { …
    ) : ( - handleClick(event, page)} - className={clsx(classes.root, classes[variant], classes[shape], { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} - {...other} - > - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - - )} - - ); + handleClick(event, page)} + className={clsx(classes.root, classes[variant], classes[shape], { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + })} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + + )} + + ); }); PaginationItem.propTypes = { @@ -368,7 +368,15 @@ PaginationItem.propTypes = { /* * The type of pagination item. */ - type: PropTypes.oneOf(['page', 'first', 'last', 'next', 'previous', 'start-ellipsis', 'end-ellipsis']), + type: PropTypes.oneOf([ + 'page', + 'first', + 'last', + 'next', + 'previous', + 'start-ellipsis', + 'end-ellipsis', + ]), /* * The pagination item variant. */ From 0496ebb0528cccd3bffc4c6e0bdd3effb71b7818 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 23 Jan 2020 19:46:38 +0000 Subject: [PATCH 40/64] Fix usePagination tests after 4f476e8 --- .../src/Pagination/usePagination.test.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.test.js b/packages/material-ui-lab/src/Pagination/usePagination.test.js index c316a4f094aba0..23f1fa67b92ade 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.test.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.test.js @@ -74,21 +74,21 @@ describe('usePagination', () => { const { items } = renderHook(() => usePagination({ count: 8 })).result.current; assert.strictEqual(items.length, 9); assert.strictEqual(items[2].page, 2); - assert.strictEqual(items[6].type, 'ellipsis'); + assert.strictEqual(items[6].type, 'end-ellipsis'); assert.strictEqual(items[6].page, null); }); it('has a start ellipsis when page >= 5', () => { const { items } = renderHook(() => usePagination({ count: 8, page: 5 })).result.current; - assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[2].type, 'start-ellipsis'); assert.strictEqual(items[2].page, null); assert.strictEqual(items[6].page, 7); }); it('has start & end ellipsis when count >= 9', () => { const { items } = renderHook(() => usePagination({ count: 9, page: 5 })).result.current; assert.strictEqual(items.length, 9); - assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[2].type, 'start-ellipsis'); assert.strictEqual(items[2].page, null); - assert.strictEqual(items[6].type, 'ellipsis'); + assert.strictEqual(items[6].type, 'end-ellipsis'); assert.strictEqual(items[6].page, null); }); it('can have a reduced siblingRange', () => { @@ -96,22 +96,22 @@ describe('usePagination', () => { usePagination({ count: 7, page: 4, siblingRange: 0 }), ).result.current; assert.strictEqual(items.length, 7); - assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[2].type, 'start-ellipsis'); assert.strictEqual(items[3].page, 4); - assert.strictEqual(items[4].type, 'ellipsis'); + assert.strictEqual(items[4].type, 'end-ellipsis'); }); it('can have an increased siblingRange', () => { const { items } = renderHook(() => usePagination({ count: 11, page: 6, siblingRange: 2 }), ).result.current; assert.strictEqual(items.length, 11); - assert.strictEqual(items[2].type, 'ellipsis'); + assert.strictEqual(items[2].type, 'start-ellipsis'); assert.strictEqual(items[3].page, 4); assert.strictEqual(items[4].page, 5); assert.strictEqual(items[5].page, 6); assert.strictEqual(items[6].page, 7); assert.strictEqual(items[7].page, 8); - assert.strictEqual(items[8].type, 'ellipsis'); + assert.strictEqual(items[8].type, 'end-ellipsis'); }); it('can have an increased boundaryRange', () => { const { items } = renderHook(() => @@ -120,8 +120,8 @@ describe('usePagination', () => { assert.strictEqual(items.length, 11); assert.strictEqual(items[1].page, 1); assert.strictEqual(items[2].page, 2); - assert.strictEqual(items[3].type, 'ellipsis'); - assert.strictEqual(items[7].type, 'ellipsis'); + assert.strictEqual(items[3].type, 'start-ellipsis'); + assert.strictEqual(items[7].type, 'end-ellipsis'); assert.strictEqual(items[8].page, 10); assert.strictEqual(items[9].page, 11); }); From 3a1ee2d465b9c2173eafda0292f73d86cb4f4a62 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 23 Jan 2020 22:37:39 +0000 Subject: [PATCH 41/64] Base test structure --- .../src/Pagination/Pagination.js | 5 +-- .../src/Pagination/Pagination.test.js | 42 +++++++++++++++++++ .../src/PaginationItem/PaginationItem.js | 20 +++++---- .../src/PaginationItem/PaginationItem.test.js | 42 +++++++++++++++++++ .../src/Breadcrumbs/Breadcrumbs.test.js | 2 +- .../src/test-utils/describeConformance.js | 4 +- 6 files changed, 102 insertions(+), 13 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index ea17f78e64cc4e..3aa498532364bc 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -36,10 +36,9 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { const itemProps = { color, getAriaLabel, shape, size, variant }; return ( -
      (
    • {renderItem({ ...item, ...itemProps })}
      • ))} -
    + ); }); diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index e69de29bb2d1d6..c705d42dd2d9a2 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { expect } from 'chai'; +import { spy } from 'sinon'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import { createEvent, createClientRender, fireEvent } from 'test/utils/createClientRender'; +import Pagination from './Pagination'; + +describe('', () => { + let classes; + let mount; + const render = createClientRender({ strict: false }); + + before(() => { + mount = createMount(); + classes = getClasses(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'ul', + mount, + refInstanceof: window.HTMLUListElement, + after: () => mount.cleanUp(), + })); + + it('should render', () => { + const { container } = render(); + + expect(container.firstChild).to.have.class(classes.root); + }); + + it('should call onClick when clicked', () => { + const handleClick = spy(); + + const { getByText } = render(); + + fireEvent.click(getByText('1')); + + expect(handleClick.callCount).to.equal(1); + }); +}); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 96aaa536ec7c98..2e529d351bca63 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -9,7 +9,7 @@ import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; import { capitalize } from '@material-ui/core/utils'; -const styles = theme => ({ +export const styles = theme => ({ /* Styles applied to the root element. */ root: { fontSize: theme.typography.pxToRem(14), @@ -270,12 +270,18 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { } aria-current={selected ? 'page' : undefined} onClick={event => handleClick(event, page)} - className={clsx(classes.root, classes[variant], classes[shape], { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} + className={clsx( + classes.root, + classes[variant], + classes[shape], + { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + }, + className, + )} {...other} > {type === 'page' && page} diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js index e69de29bb2d1d6..4054f03ed3e3c0 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { expect } from 'chai'; +import { spy } from 'sinon'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import { createEvent, createClientRender, fireEvent } from 'test/utils/createClientRender'; +import PaginationItem from './PaginationItem'; + +describe('', () => { + let classes; + let mount; + const render = createClientRender({ strict: false }); + + before(() => { + mount = createMount(); + classes = getClasses(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'button', + mount, + refInstanceof: window.HTMLButtonElement, + after: () => mount.cleanUp(), + })); + + it('should render', () => { + const { container } = render(); + + expect(container.firstChild).to.have.class(classes.root); + }); + + it('should call onClick when clicked', () => { + const handleClick = spy(); + + const { getByText } = render(); + + fireEvent.click(getByText('1')); + + expect(handleClick.callCount).to.equal(1); + }); +}); diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js index 4e5730a1c4fc94..f142d2ff06564c 100644 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js @@ -41,7 +41,7 @@ describe('', () => { expect(getByRole('list')).to.have.text('first/second'); }); - it('should render an ellipse between `itemsAfterCollapse` and `itemsBeforeCollapse`', () => { + it('should render an ellipsis between `itemsAfterCollapse` and `itemsBeforeCollapse`', () => { const { getAllByRole, getByRole } = render( first diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index ed9e9d7feb4aca..f34972da6640a6 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -84,7 +84,7 @@ function testComponentProp(element, getOptions) { * @param {() => ConformanceOptions} getOptions */ function testPropsSpread(element, getOptions) { - it(`does spread props to the root component`, () => { + it(`spreads props to the root component`, () => { // type def in ConformanceOptions const { classes, inheritComponent, mount } = getOptions(); const testProp = 'data-test-props-spread'; @@ -131,7 +131,7 @@ function describeRef(element, getOptions) { * @param {() => ConformanceOptions} getOptions */ function testRootClass(element, getOptions) { - it('applies to root class to the root component if it has this class', () => { + it('applies the root class to the root component if it has this class', () => { const { classes, mount } = getOptions(); if (classes.root == null) { return; From 6c6d01b8792aa37207415704e2d37af43bbc4861 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 23 Jan 2020 23:25:04 +0000 Subject: [PATCH 42/64] Mark icons as internal component We should probably have a way to blacklist components globally --- docs/pages/api/pagination-item.md | 35 +++++++++++++++++-- docs/pages/api/pagination.md | 2 +- .../src/internal/svg-icons/FirstPage.js | 3 ++ .../src/internal/svg-icons/LastPage.js | 3 ++ .../src/internal/svg-icons/NavigateBefore.js | 3 ++ .../src/internal/svg-icons/NavigateNext.js | 3 ++ 6 files changed, 45 insertions(+), 4 deletions(-) diff --git a/docs/pages/api/pagination-item.md b/docs/pages/api/pagination-item.md index 573f6dc21b6d58..3a0a53eada2e50 100644 --- a/docs/pages/api/pagination-item.md +++ b/docs/pages/api/pagination-item.md @@ -26,20 +26,49 @@ You can learn more about the difference by [reading this guide](/guides/minimizi |:-----|:-----|:--------|:------------| | color | 'standard'
    | 'primary'
    | 'secondary'     | 'standard' | The active color. | | component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | | If `true`, the item will be disabled. | +| disabled | bool | 'false' | If `true`, the item will be disabled. | | getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.

    **Signature:**
    `function(type?: string, page: number, selected: bool) => string`
    *type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
    *page:* The page number to format.
    *selected:* If true, the current page is selected. | | onClick | func | | Callback fired when the page is changed.

    **Signature:**
    `function(event: object, page: number) => void`
    *event:* The event source of the callback.
    *page:* The page selected. | | page | number | | The current page number. | | selected | bool | | If `true` the pagination item is selected. | | shape | 'round'
    | 'rounded'     | 'round' | The shape of the pagination item. | | size | 'small'
    | 'medium'
    | 'large'     | 'medium' | The size of the pagination item. | -| type | 'page'
    | 'ellipsis'
    | 'first'
    | 'last'
    | 'next'
    | 'previous'     | 'page' | | +| type | 'page'
    | 'first'
    | 'last'
    | 'next'
    | 'previous'
    | 'start-ellipsis'
    | 'end-ellipsis'     | 'page' | | | variant | 'text'
    | 'outlined'     | | | -The component cannot hold a ref. +The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). +## CSS + +- Style sheet name: `PaginationItem`. +- Style sheet details: + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .root-42 | Styles applied to the root element. +| outlined | .outlined-43 | Styles applied to the button element if `outlined="true"`. +| textPrimary | .textPrimary-44 | Styles applied to the button element if `variant="text"` and `color="primary"`. +| textSecondary | .textSecondary-45 | Styles applied to the button element if `variant="text"` and `color="secondary"`. +| outlinedPrimary | .outlinedPrimary-46 | Styles applied to the button element if `variant="outlined"` and `color="primary"`. +| outlinedSecondary | .outlinedSecondary-47 | Styles applied to the button element if `variant="outlined"` and `color="secondary"`. +| rounded | .rounded-48 | Styles applied to the button element if `rounded="true"`. +| ellipsis | .ellipsis-49 | Styles applied to the ellipsis element. +| icon | .icon-50 | Styles applied to the icon element. +| sizeSmall | .sizeSmall-51 | Pseudo-class applied to the root element if `size="small"`. +| sizeLarge | .sizeLarge-52 | Pseudo-class applied to the root element if `size="large"`. +| disabled | .disabled-53 | Pseudo-class applied to the root element if `disabled={true}`. +| selected | .selected-54 | Pseudo-class applied to the root element if `selected={true}`. + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/PaginationItem/PaginationItem.js) for more detail. + ## Demos - [Pagination](/components/pagination/) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index f9be61311b6082..fb3819bc257a7e 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -45,7 +45,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | size | 'small'
    | 'medium'
    | 'large'     | | The size of the pagination component. | | variant | 'text'
    | 'outlined'     | | The variant to use. | -The component cannot hold a ref. +The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). diff --git a/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js b/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js index 291376b0f0e34b..153f53cf2eb0ce 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js +++ b/packages/material-ui-lab/src/internal/svg-icons/FirstPage.js @@ -1,6 +1,9 @@ import React from 'react'; import createSvgIcon from './createSvgIcon'; +/** + * @ignore - internal component. + */ export default createSvgIcon( diff --git a/packages/material-ui-lab/src/internal/svg-icons/LastPage.js b/packages/material-ui-lab/src/internal/svg-icons/LastPage.js index f32bc97447d284..10007361129156 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/LastPage.js +++ b/packages/material-ui-lab/src/internal/svg-icons/LastPage.js @@ -1,6 +1,9 @@ import React from 'react'; import createSvgIcon from './createSvgIcon'; +/** + * @ignore - internal component. + */ export default createSvgIcon( , 'LastPage', diff --git a/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js b/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js index 8499021c91f555..08163c63155d0c 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js +++ b/packages/material-ui-lab/src/internal/svg-icons/NavigateBefore.js @@ -1,6 +1,9 @@ import React from 'react'; import createSvgIcon from './createSvgIcon'; +/** + * @ignore - internal component. + */ export default createSvgIcon( , 'NavigateBefore', diff --git a/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js b/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js index 2655298b349efd..cd2dfda1116b3d 100644 --- a/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js +++ b/packages/material-ui-lab/src/internal/svg-icons/NavigateNext.js @@ -1,6 +1,9 @@ import React from 'react'; import createSvgIcon from './createSvgIcon'; +/** + * @ignore - internal component. + */ export default createSvgIcon( , 'NavigateNext', From e0c9d04a08e2df174d847c7493710b334ca0b080 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 24 Jan 2020 01:19:14 +0000 Subject: [PATCH 43/64] lint --- packages/material-ui-lab/src/Pagination/Pagination.test.js | 2 +- .../material-ui-lab/src/PaginationItem/PaginationItem.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index c705d42dd2d9a2..7322d0e4769eef 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import { createEvent, createClientRender, fireEvent } from 'test/utils/createClientRender'; +import { createClientRender, fireEvent } from 'test/utils/createClientRender'; import Pagination from './Pagination'; describe('', () => { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js index 4054f03ed3e3c0..cdd22bfcf164df 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import { createEvent, createClientRender, fireEvent } from 'test/utils/createClientRender'; +import { createClientRender, fireEvent } from 'test/utils/createClientRender'; import PaginationItem from './PaginationItem'; describe('', () => { From cea79e399fb0a83f0815a2c0fc057807f1b8d48c Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 27 Jan 2020 19:54:48 +0000 Subject: [PATCH 44/64] tests --- .../src/Pagination/Pagination.test.js | 2 - .../src/PaginationItem/PaginationItem.js | 111 +++++++++--------- .../src/PaginationItem/PaginationItem.test.js | 9 +- .../src/ToggleButton/ToggleButton.test.js | 2 +- 4 files changed, 63 insertions(+), 61 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index 7322d0e4769eef..c7d8b233223685 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -32,11 +32,9 @@ describe('', () => { it('should call onClick when clicked', () => { const handleClick = spy(); - const { getByText } = render(); fireEvent.click(getByText('1')); - expect(handleClick.callCount).to.equal(1); }); }); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 2e529d351bca63..ca1f180c172c84 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ export const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -68,7 +68,7 @@ export const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -239,7 +239,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { className, color = 'standard', component, - disabled = 'false', + disabled = false, getAriaLabel, page, onClick: handleClick, @@ -262,59 +262,60 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { …
    ) : ( - handleClick(event, page)} - className={clsx( - classes.root, - classes[variant], - classes[shape], - { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - }, - className, - )} - {...other} - > - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - handleClick(event, page)} + className={clsx( + classes.root, + classes[variant], + classes[shape], + { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} - /> - )} - - ); + }, + className, + )} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + + )} + + ); }); PaginationItem.propTypes = { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js index cdd22bfcf164df..3402394740cc03 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js @@ -26,17 +26,20 @@ describe('', () => { it('should render', () => { const { container } = render(); - expect(container.firstChild).to.have.class(classes.root); }); it('should call onClick when clicked', () => { const handleClick = spy(); - const { getByText } = render(); fireEvent.click(getByText('1')); - expect(handleClick.callCount).to.equal(1); }); + + it('should render a disabled button if `disabled={true}`', () => { + const { getByRole } = render(); + + expect(getByRole('button')).to.have.property('disabled', true); + }); }); diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js index 625bcd01e229c9..a0031a002f1230 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js @@ -37,7 +37,7 @@ describe('', () => { expect(getByTestId('root')).to.have.class(classes.selected); }); - it('should render a disabled button if `distabled={true}`', () => { + it('should render a disabled button if `disabled={true}`', () => { const { getByRole } = render( Hello World From 4e757bc1a53ea9d0af5fb596b7230f4a92b443d2 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Thu, 30 Jan 2020 00:17:53 +0000 Subject: [PATCH 45/64] docs:api --- docs/pages/api/pagination-item.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api/pagination-item.md b/docs/pages/api/pagination-item.md index 3a0a53eada2e50..adcce924695d3c 100644 --- a/docs/pages/api/pagination-item.md +++ b/docs/pages/api/pagination-item.md @@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi |:-----|:-----|:--------|:------------| | color | 'standard'
    | 'primary'
    | 'secondary'     | 'standard' | The active color. | | component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | 'false' | If `true`, the item will be disabled. | +| disabled | bool | false | If `true`, the item will be disabled. | | getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.

    **Signature:**
    `function(type?: string, page: number, selected: bool) => string`
    *type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
    *page:* The page number to format.
    *selected:* If true, the current page is selected. | | onClick | func | | Callback fired when the page is changed.

    **Signature:**
    `function(event: object, page: number) => void`
    *event:* The event source of the callback.
    *page:* The page selected. | | page | number | | The current page number. | From 758ff8c9fe8033dc7d94d32700ea7cbb4dd04483 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 1 Feb 2020 22:48:42 +0000 Subject: [PATCH 46/64] tests --- .../src/Pagination/Pagination.test.js | 11 +- .../src/Pagination/usePagination.js | 6 +- .../src/PaginationItem/PaginationItem.js | 110 +++++++++--------- .../src/PaginationItem/PaginationItem.test.js | 71 +++++++++-- 4 files changed, 121 insertions(+), 77 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index c7d8b233223685..aa32ba12ef618e 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -1,9 +1,8 @@ import React from 'react'; import { expect } from 'chai'; -import { spy } from 'sinon'; import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import { createClientRender, fireEvent } from 'test/utils/createClientRender'; +import { createClientRender } from 'test/utils/createClientRender'; import Pagination from './Pagination'; describe('', () => { @@ -29,12 +28,4 @@ describe('', () => { expect(container.firstChild).to.have.class(classes.root); }); - - it('should call onClick when clicked', () => { - const handleClick = spy(); - const { getByText } = render(); - - fireEvent.click(getByText('1')); - expect(handleClick.callCount).to.equal(1); - }); }); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index f4b3bd12cd78aa..4da20eff0f4aad 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -9,7 +9,7 @@ export default function usePagination(props = {}) { disabled = false, hideNextButton = false, hidePrevButton = false, - onChange: handleChangeProp, + onChange: handleChange, page: pageProp, showFirstButton = false, showLastButton = false, @@ -28,8 +28,8 @@ export default function usePagination(props = {}) { if (!pageProp) { setPageState(value); } - if (handleChangeProp) { - handleChangeProp(event, value); + if (handleChange) { + handleChange(event, value); } }, 240); }; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index ca1f180c172c84..f9d9c2821e3904 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ export const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: fade(theme.palette.action.active, 0.05), }, @@ -68,7 +68,7 @@ export const styles = theme => ({ backgroundColor: fade(theme.palette.action.disabled, 0.03), border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -262,60 +262,60 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { …
    ) : ( - handleClick(event, page)} - className={clsx( - classes.root, - classes[variant], - classes[shape], - { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, + handleClick(event, page)} + className={clsx( + classes.root, + classes[variant], + classes[shape], + { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + }, + className, + )} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - - )} - - ); + })} + /> + )} + + ); }); PaginationItem.propTypes = { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js index 3402394740cc03..33b5f1cf810daa 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import { createClientRender, fireEvent } from 'test/utils/createClientRender'; +import { createClientRender } from 'test/utils/createClientRender'; import PaginationItem from './PaginationItem'; describe('', () => { @@ -29,17 +29,70 @@ describe('', () => { expect(container.firstChild).to.have.class(classes.root); }); - it('should call onClick when clicked', () => { - const handleClick = spy(); - const { getByText } = render(); + it('should add the `selected` class to the root element if `selected={true}`', () => { + const { getByRole } = render(); - fireEvent.click(getByText('1')); - expect(handleClick.callCount).to.equal(1); + expect(getByRole('button')).to.have.class(classes.selected); }); - it('should render a disabled button if `disabled={true}`', () => { - const { getByRole } = render(); + describe('prop: disabled', () => { + it('should add the `disabled` class to the root element if `disabled={true}`', () => { + const { getByRole } = render(); - expect(getByRole('button')).to.have.property('disabled', true); + expect(getByRole('button')).to.have.class(classes.disabled); + }); + + it('should render a disabled button if `disabled={true}`', () => { + const { getByRole } = render(); + + expect(getByRole('button')).to.have.property('disabled', true); + }); + }); + + it('should render a small button', () => { + const { getByTestId } = render( + + Hello World + , + ); + + const root = getByTestId('root'); + expect(root).to.have.class(classes.root); + expect(root).to.have.class(classes.sizeSmall); + expect(root).not.to.have.class(classes.sizeLarge); + }); + + it('should render a large button', () => { + const { getByTestId } = render( + + Hello World + , + ); + + const root = getByTestId('root'); + expect(root).to.have.class(classes.root); + expect(root).not.to.have.class(classes.sizeSmall); + expect(root).to.have.class(classes.sizeLarge); + }); + + describe('prop: onClick', () => { + it('should be called when clicked', () => { + const handleClick = spy(); + const { getByRole } = render(); + + getByRole('button').click(); + + expect(handleClick.callCount).to.equal(1); + }); + + it('should be called with the button value', () => { + const handleClick = spy(); + const { getByRole } = render(); + + getByRole('button').click(); + + expect(handleClick.callCount).to.equal(1); + expect(handleClick.args[0][1]).to.equal(1); + }); }); }); From 7812f140b28b16c59a07d1b2683354840d04064c Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 00:47:41 +0000 Subject: [PATCH 47/64] yarn --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 49be15a71d93da..f31c15f4179fae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -838,7 +838,7 @@ core-js "^2.6.5" regenerator-runtime "^0.13.2" -"@babel/runtime@7.0.0", "@babel/runtime@7.1.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3": +"@babel/runtime@7.0.0", "@babel/runtime@7.1.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1" integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w== From 55257da22f74279fc65c9d26e364e35c1fa0a5f2 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 00:58:43 +0000 Subject: [PATCH 48/64] docs:api - not sure how this got lost --- docs/pages/api/pagination-item.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/pages/api/pagination-item.md b/docs/pages/api/pagination-item.md index adcce924695d3c..5491d68e2eb016 100644 --- a/docs/pages/api/pagination-item.md +++ b/docs/pages/api/pagination-item.md @@ -47,19 +47,19 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .root-42 | Styles applied to the root element. -| outlined | .outlined-43 | Styles applied to the button element if `outlined="true"`. -| textPrimary | .textPrimary-44 | Styles applied to the button element if `variant="text"` and `color="primary"`. -| textSecondary | .textSecondary-45 | Styles applied to the button element if `variant="text"` and `color="secondary"`. -| outlinedPrimary | .outlinedPrimary-46 | Styles applied to the button element if `variant="outlined"` and `color="primary"`. -| outlinedSecondary | .outlinedSecondary-47 | Styles applied to the button element if `variant="outlined"` and `color="secondary"`. -| rounded | .rounded-48 | Styles applied to the button element if `rounded="true"`. -| ellipsis | .ellipsis-49 | Styles applied to the ellipsis element. -| icon | .icon-50 | Styles applied to the icon element. -| sizeSmall | .sizeSmall-51 | Pseudo-class applied to the root element if `size="small"`. -| sizeLarge | .sizeLarge-52 | Pseudo-class applied to the root element if `size="large"`. -| disabled | .disabled-53 | Pseudo-class applied to the root element if `disabled={true}`. -| selected | .selected-54 | Pseudo-class applied to the root element if `selected={true}`. +| root | .root-44 | Styles applied to the root element. +| outlined | .outlined-45 | Styles applied to the button element if `outlined="true"`. +| textPrimary | .textPrimary-46 | Styles applied to the button element if `variant="text"` and `color="primary"`. +| textSecondary | .textSecondary-47 | Styles applied to the button element if `variant="text"` and `color="secondary"`. +| outlinedPrimary | .outlinedPrimary-48 | Styles applied to the button element if `variant="outlined"` and `color="primary"`. +| outlinedSecondary | .outlinedSecondary-49 | Styles applied to the button element if `variant="outlined"` and `color="secondary"`. +| rounded | .rounded-50 | Styles applied to the button element if `rounded="true"`. +| ellipsis | .ellipsis-51 | Styles applied to the ellipsis element. +| icon | .icon-52 | Styles applied to the icon element. +| sizeSmall | .sizeSmall-53 | Pseudo-class applied to the root element if `size="small"`. +| sizeLarge | .sizeLarge-54 | Pseudo-class applied to the root element if `size="large"`. +| disabled | .disabled-55 | Pseudo-class applied to the root element if `disabled={true}`. +| selected | .selected-56 | Pseudo-class applied to the root element if `selected={true}`. You can override the style of the component thanks to one of these customization points: From 7d873e45e9a22a42646aa44e2e8169f720dbac26 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 01:38:43 +0000 Subject: [PATCH 49/64] fix roadmap --- docs/src/pages/discover-more/roadmap/roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/discover-more/roadmap/roadmap.md b/docs/src/pages/discover-more/roadmap/roadmap.md index c09c2aaf7e9551..57bd47dfa5a856 100644 --- a/docs/src/pages/discover-more/roadmap/roadmap.md +++ b/docs/src/pages/discover-more/roadmap/roadmap.md @@ -68,7 +68,7 @@ Here are the components we will work on being supported in the Material-UI ecosy | Autocomplete | 🧪 | | Combo Box | 🧪 | | Multiselect | 🧪 | -| Alert | | +| Alert | 🧪 | | Pagination | 🧪 | | Date Picker (& range) | 🛠 | | Data Table | 🛠⭐️ | From ce346197d4c3a5a17c803ccea7ca61cc09149b5c Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 19:21:58 +0000 Subject: [PATCH 50/64] Correct the spelling "correction" :) --- docs/src/pages/discover-more/roadmap/roadmap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/discover-more/roadmap/roadmap.md b/docs/src/pages/discover-more/roadmap/roadmap.md index 57bd47dfa5a856..2f1254a37404c4 100644 --- a/docs/src/pages/discover-more/roadmap/roadmap.md +++ b/docs/src/pages/discover-more/roadmap/roadmap.md @@ -88,7 +88,7 @@ Here are the components we will work on being supported in the Material-UI ecosy | Color Picker | ⏳⭐️ | | Gantt Chart | ⏳⭐️ | | Gauge | ⏳⭐️ | -| Masonary | ⏳⭐️ | +| Masonry | ⏳⭐️ | | Pivot Grid | ⏳⭐️ | | Rich Text Editor | ⏳⭐️ | | Scheduler | ⏳⭐️ | From 30c7bef1a0baeed8c79d3c24dc4f45e31dd48823 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 19:22:35 +0000 Subject: [PATCH 51/64] Remove component prop --- docs/pages/api/pagination.md | 1 - packages/material-ui-lab/src/Pagination/Pagination.js | 10 ++-------- .../material-ui-lab/src/Pagination/Pagination.test.js | 1 + 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index fb3819bc257a7e..72b5eb1c5930d7 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -28,7 +28,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | children | node | | Pagination items. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
    | 'primary'
    | 'secondary'     | | The active color. | -| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | | count | number | | The total number of pages. | | defaultPage | number | | The page selected by default when the component is uncontrolled. | | disabled | bool | | If `true`, all the pagination component will be disabled. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 3aa498532364bc..8ce7cc4e0b1856 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -23,7 +23,6 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { classes, className, color = 'standard', - component: Component = 'ul', getItemAriaLabel: getAriaLabel, items, renderItem = item => , @@ -36,7 +35,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { const itemProps = { color, getAriaLabel, shape, size, variant }; return ( - (
  • {renderItem({ ...item, ...itemProps })}
    • ))} -     + ); }); @@ -73,11 +72,6 @@ Pagination.propTypes = { * The active color. */ color: PropTypes.oneOf(['default', 'primary', 'secondary']), - /** - * The component used for the root node. - * Either a string to use a DOM element or a component. - */ - component: PropTypes.elementType, /** * The total number of pages. */ diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index aa32ba12ef618e..0e406b3d071723 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -21,6 +21,7 @@ describe('', () => { mount, refInstanceof: window.HTMLUListElement, after: () => mount.cleanUp(), + skip: ['componentProp'], })); it('should render', () => { From 319c582572e9b6e8078012d2f63bfbd2ddc0d263 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 22:59:24 +0000 Subject: [PATCH 52/64] boundaryRange -> boundaryCount --- docs/pages/api/pagination.md | 2 +- .../components/pagination/PaginationRanges.js | 4 +-- .../src/Pagination/Pagination.js | 2 +- .../src/Pagination/usePagination.js | 29 ++++++++++--------- .../src/Pagination/usePagination.test.js | 4 +-- 5 files changed, 22 insertions(+), 19 deletions(-) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index 72b5eb1c5930d7..079f40a7139abe 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| boundaryRange | number | | Number of always visible pages at the beginning and end. | +| boundaryCount | number | | Number of always visible pages at the beginning and end. | | children | node | | Pagination items. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
    | 'primary'
    | 'secondary'     | | The active color. | diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index 4181674dc00fd1..9474e59dc7fa8f 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -17,8 +17,8 @@ export default function PaginationRanges() {
    {/* Default ranges */} - - + +
    ); } diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 8ce7cc4e0b1856..8b04a1dae8d5be 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -54,7 +54,7 @@ Pagination.propTypes = { /** * Number of always visible pages at the beginning and end. */ - boundaryRange: PropTypes.number, + boundaryCount: PropTypes.number, /** * Pagination items. */ diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 4da20eff0f4aad..1bd36ddad624aa 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -2,7 +2,7 @@ import { useControlled } from '@material-ui/core/utils'; export default function usePagination(props = {}) { const { - boundaryRange = 0, + boundaryCount: boundaryCountProp = 1, componentName = 'usePagination', count = 1, defaultPage = 1, @@ -17,6 +17,9 @@ export default function usePagination(props = {}) { ...other } = props; + // TODO: Update all formulae to remove this adjustment + const boundaryCount = boundaryCountProp - 1; + const [page, setPageState] = useControlled({ controlled: pageProp, default: defaultPage, @@ -39,18 +42,18 @@ export default function usePagination(props = {}) { return Array.from({ length }, (_, i) => start + i); }; - const startPages = range(1, Math.min(boundaryRange + 1, count)); - const endPages = range(Math.max(count - boundaryRange, boundaryRange + 2), count); + const startPages = range(1, Math.min(boundaryCount + 1, count)); + const endPages = range(Math.max(count - boundaryCount, boundaryCount + 2), count); const siblingsStart = Math.max( Math.min( // Natural start page - siblingRange, // Lower boundary when page is high - count - boundaryRange - siblingRange * 2 - 2, + count - boundaryCount - siblingRange * 2 - 2, ), // Greater than startPages - boundaryRange + 3, + boundaryCount + 3, ); const siblingsEnd = Math.min( @@ -58,14 +61,14 @@ export default function usePagination(props = {}) { // Natural end page + siblingRange, // Upper boundary when page is low - boundaryRange + siblingRange * 2 + 3, + boundaryCount + siblingRange * 2 + 3, ), // Less than endPages endPages[0] - 2, ); // Basic list of items to render - // itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] + // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] const itemList = [ ...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), @@ -73,10 +76,10 @@ export default function usePagination(props = {}) { // Start ellipsis // eslint-disable-next-line no-nested-ternary - ...(siblingsStart > boundaryRange + 3 + ...(siblingsStart > boundaryCount + 3 ? ['start-ellipsis'] - : 2 + boundaryRange < count - boundaryRange - 1 - ? [2 + boundaryRange] + : 2 + boundaryCount < count - boundaryCount - 1 + ? [2 + boundaryCount] : []), // Sibling pages @@ -84,10 +87,10 @@ export default function usePagination(props = {}) { // End ellipsis // eslint-disable-next-line no-nested-ternary - ...(siblingsEnd < count - boundaryRange - 2 + ...(siblingsEnd < count - boundaryCount - 2 ? ['end-ellipsis'] - : count - boundaryRange - 1 > boundaryRange + 1 - ? [count - boundaryRange - 1] + : count - boundaryCount - 1 > boundaryCount + 1 + ? [count - boundaryCount - 1] : []), ...endPages, diff --git a/packages/material-ui-lab/src/Pagination/usePagination.test.js b/packages/material-ui-lab/src/Pagination/usePagination.test.js index 23f1fa67b92ade..e397ad26e9f688 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.test.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.test.js @@ -113,9 +113,9 @@ describe('usePagination', () => { assert.strictEqual(items[7].page, 8); assert.strictEqual(items[8].type, 'end-ellipsis'); }); - it('can have an increased boundaryRange', () => { + it('can have an increased boundaryCount', () => { const { items } = renderHook(() => - usePagination({ count: 11, page: 6, boundaryRange: 1 }), + usePagination({ count: 11, page: 6, boundaryCount: 2 }), ).result.current; assert.strictEqual(items.length, 11); assert.strictEqual(items[1].page, 1); From 9465a5383d555d4f8fdfc9aa07a91048eee4ed3d Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 23:01:39 +0000 Subject: [PATCH 53/64] siblingRange -> siblingCount --- .../pages/components/pagination/PaginationRanges.js | 4 ++-- .../material-ui-lab/src/Pagination/usePagination.js | 10 +++++----- .../src/Pagination/usePagination.test.js | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index 9474e59dc7fa8f..cac58a5611783e 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -15,9 +15,9 @@ export default function PaginationRanges() { return (
    - + {/* Default ranges */} - +
    ); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 1bd36ddad624aa..8e3cd91af8954d 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -13,7 +13,7 @@ export default function usePagination(props = {}) { page: pageProp, showFirstButton = false, showLastButton = false, - siblingRange = 1, + siblingCount = 1, ...other } = props; @@ -48,9 +48,9 @@ export default function usePagination(props = {}) { const siblingsStart = Math.max( Math.min( // Natural start - page - siblingRange, + page - siblingCount, // Lower boundary when page is high - count - boundaryCount - siblingRange * 2 - 2, + count - boundaryCount - siblingCount * 2 - 2, ), // Greater than startPages boundaryCount + 3, @@ -59,9 +59,9 @@ export default function usePagination(props = {}) { const siblingsEnd = Math.min( Math.max( // Natural end - page + siblingRange, + page + siblingCount, // Upper boundary when page is low - boundaryCount + siblingRange * 2 + 3, + boundaryCount + siblingCount * 2 + 3, ), // Less than endPages endPages[0] - 2, diff --git a/packages/material-ui-lab/src/Pagination/usePagination.test.js b/packages/material-ui-lab/src/Pagination/usePagination.test.js index e397ad26e9f688..9e21a3b5d8a835 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.test.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.test.js @@ -91,18 +91,18 @@ describe('usePagination', () => { assert.strictEqual(items[6].type, 'end-ellipsis'); assert.strictEqual(items[6].page, null); }); - it('can have a reduced siblingRange', () => { + it('can have a reduced siblingCount', () => { const { items } = renderHook(() => - usePagination({ count: 7, page: 4, siblingRange: 0 }), + usePagination({ count: 7, page: 4, siblingCount: 0 }), ).result.current; assert.strictEqual(items.length, 7); assert.strictEqual(items[2].type, 'start-ellipsis'); assert.strictEqual(items[3].page, 4); assert.strictEqual(items[4].type, 'end-ellipsis'); }); - it('can have an increased siblingRange', () => { + it('can have an increased siblingCount', () => { const { items } = renderHook(() => - usePagination({ count: 11, page: 6, siblingRange: 2 }), + usePagination({ count: 11, page: 6, siblingCount: 2 }), ).result.current; assert.strictEqual(items.length, 11); assert.strictEqual(items[2].type, 'start-ellipsis'); From 91e396e0793808a0e8fac43c4afc7366e12aab1b Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 23:08:57 +0000 Subject: [PATCH 54/64] stub types --- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 2 ++ packages/material-ui-lab/src/Pagination/index.d.ts | 4 ++++ packages/material-ui-lab/src/Pagination/usePagination.d.ts | 2 ++ .../material-ui-lab/src/PaginationItem/PaginationItem.d.ts | 2 ++ packages/material-ui-lab/src/PaginationItem/index.d.ts | 2 ++ scripts/copy-files.js | 2 +- 6 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 packages/material-ui-lab/src/Pagination/Pagination.d.ts create mode 100644 packages/material-ui-lab/src/Pagination/index.d.ts create mode 100644 packages/material-ui-lab/src/Pagination/usePagination.d.ts create mode 100644 packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts create mode 100644 packages/material-ui-lab/src/PaginationItem/index.d.ts diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts new file mode 100644 index 00000000000000..25fe599df2e74b --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -0,0 +1,2 @@ +declare const Pagination: any; +export default Pagination; diff --git a/packages/material-ui-lab/src/Pagination/index.d.ts b/packages/material-ui-lab/src/Pagination/index.d.ts new file mode 100644 index 00000000000000..28b29a19618ae3 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/index.d.ts @@ -0,0 +1,4 @@ +export { default } from './Pagination'; +export { default as usePagination } from './usePagination'; +export * from './Pagination'; +export * from './usePagination'; diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts new file mode 100644 index 00000000000000..c8981e9bce2bf2 --- /dev/null +++ b/packages/material-ui-lab/src/Pagination/usePagination.d.ts @@ -0,0 +1,2 @@ +declare const usePagination: any; +export default usePagination; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts new file mode 100644 index 00000000000000..adf49d899bfed0 --- /dev/null +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -0,0 +1,2 @@ +declare const PaginationItem: any; +export default PaginationItem; diff --git a/packages/material-ui-lab/src/PaginationItem/index.d.ts b/packages/material-ui-lab/src/PaginationItem/index.d.ts new file mode 100644 index 00000000000000..8038a4ad1c487b --- /dev/null +++ b/packages/material-ui-lab/src/PaginationItem/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './PaginationItem'; +export * from './PaginationItem'; diff --git a/scripts/copy-files.js b/scripts/copy-files.js index 02c93873a688b3..cb41f6c6916cef 100644 --- a/scripts/copy-files.js +++ b/scripts/copy-files.js @@ -42,7 +42,7 @@ async function createModulePackages({ from, to }) { ]); if (!typingsExist) { - console.error(`index.d.ts for ${directoryPackage} is missing`); + throw new Error(`index.d.ts for ${directoryPackage} is missing`); } return packageJsonPath; From 471ea3a7d92a40246b93bb747364f72a1feb0605 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sun, 2 Feb 2020 23:55:24 +0000 Subject: [PATCH 55/64] expect > assert --- .../src/Pagination/usePagination.test.js | 134 +++++++++--------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.test.js b/packages/material-ui-lab/src/Pagination/usePagination.test.js index 9e21a3b5d8a835..6e100302f1e51b 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.test.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.test.js @@ -1,128 +1,128 @@ import { renderHook } from '@testing-library/react-hooks'; -import { assert } from 'chai'; +import { expect } from 'chai'; import { usePagination } from '.'; describe('usePagination', () => { it('has one page by default', () => { const { items } = renderHook(() => usePagination()).result.current; - assert.strictEqual(items.length, 3); - assert.strictEqual(items[1].page, 1); + expect(items).to.have.length(3); + expect(items[1]).to.have.property('page', 1); }); it('has disabled previous & next buttons by default', () => { const { items } = renderHook(() => usePagination()).result.current; - assert.strictEqual(items[0].type, 'previous'); - assert.strictEqual(items[0].disabled, true); - assert.strictEqual(items[2].type, 'next'); - assert.strictEqual(items[2].disabled, true); + expect(items[0]).to.have.property('type', 'previous'); + expect(items[0]).to.have.property('disabled', true); + expect(items[2]).to.have.property('type', 'next'); + expect(items[2]).to.have.property('disabled', true); }); it('has a disabled previous button & an enabled next button when count > 1', () => { const { items } = renderHook(() => usePagination({ count: 2 })).result.current; - assert.strictEqual(items[0].type, 'previous'); - assert.strictEqual(items[0].disabled, true); - assert.strictEqual(items[3].type, 'next'); - assert.strictEqual(items[3].disabled, false); - assert.strictEqual(items[3].page, 2); + expect(items[0]).to.have.property('type', 'previous'); + expect(items[0]).to.have.property('disabled', true); + expect(items[3]).to.have.property('type', 'next'); + expect(items[3]).to.have.property('disabled', false); + expect(items[3]).to.have.property('page', 2); }); it('has an enabled previous button & disabled next button when page === count', () => { const { items } = renderHook(() => usePagination({ count: 2, page: 2 })).result.current; - assert.strictEqual(items[0].type, 'previous'); - assert.strictEqual(items[0].disabled, false); - assert.strictEqual(items[0].page, 1); - assert.strictEqual(items[3].type, 'next'); - assert.strictEqual(items[3].disabled, true); + expect(items[0]).to.have.property('type', 'previous'); + expect(items[0]).to.have.property('disabled', false); + expect(items[0]).to.have.property('page', 1); + expect(items[3]).to.have.property('type', 'next'); + expect(items[3]).to.have.property('disabled', true); }); it('has a disabled first button when showFirstButton === true', () => { const { items } = renderHook(() => usePagination({ showFirstButton: true })).result.current; - assert.strictEqual(items[0].type, 'first'); - assert.strictEqual(items[0].disabled, true); - assert.strictEqual(items[0].page, 1); + expect(items[0]).to.have.property('type', 'first'); + expect(items[0]).to.have.property('disabled', true); + expect(items[0]).to.have.property('page', 1); }); it('has a disabled last button when showLastButton === true', () => { const { items } = renderHook(() => usePagination({ showLastButton: true })).result.current; - assert.strictEqual(items[3].type, 'last'); - assert.strictEqual(items[3].disabled, true); - assert.strictEqual(items[3].page, 1); + expect(items[3]).to.have.property('type', 'last'); + expect(items[3]).to.have.property('disabled', true); + expect(items[3]).to.have.property('page', 1); }); it('has an enabled first button when showFirstButton === true && page > 1', () => { const { items } = renderHook(() => usePagination({ showFirstButton: true, count: 2, page: 2 }), ).result.current; - assert.strictEqual(items[0].type, 'first'); - assert.strictEqual(items[0].disabled, false); - assert.strictEqual(items[0].page, 1); + expect(items[0]).to.have.property('type', 'first'); + expect(items[0]).to.have.property('disabled', false); + expect(items[0]).to.have.property('page', 1); }); it('has an enabled last button when showLastButton === true && page < count', () => { const { items } = renderHook(() => usePagination({ showLastButton: true, count: 2 }), ).result.current; - assert.strictEqual(items[4].type, 'last'); - assert.strictEqual(items[4].disabled, false); - assert.strictEqual(items[4].page, 2); + expect(items[4]).to.have.property('type', 'last'); + expect(items[4]).to.have.property('disabled', false); + expect(items[4]).to.have.property('page', 2); }); it('has no ellipses when count <= 7', () => { const { items } = renderHook(() => usePagination({ count: 7 })).result.current; - assert.strictEqual(items[1].page, 1); - assert.strictEqual(items[2].page, 2); - assert.strictEqual(items[3].page, 3); - assert.strictEqual(items[4].page, 4); - assert.strictEqual(items[5].page, 5); - assert.strictEqual(items[6].page, 6); - assert.strictEqual(items[7].page, 7); + expect(items[1]).to.have.property('page', 1); + expect(items[2]).to.have.property('page', 2); + expect(items[3]).to.have.property('page', 3); + expect(items[4]).to.have.property('page', 4); + expect(items[5]).to.have.property('page', 5); + expect(items[6]).to.have.property('page', 6); + expect(items[7]).to.have.property('page', 7); }); it('has an end ellipsis by default when count >= 8', () => { const { items } = renderHook(() => usePagination({ count: 8 })).result.current; - assert.strictEqual(items.length, 9); - assert.strictEqual(items[2].page, 2); - assert.strictEqual(items[6].type, 'end-ellipsis'); - assert.strictEqual(items[6].page, null); + expect(items).to.have.length(9); + expect(items[2]).to.have.property('page', 2); + expect(items[6]).to.have.property('type', 'end-ellipsis'); + expect(items[6]).to.have.property('page', null); }); it('has a start ellipsis when page >= 5', () => { const { items } = renderHook(() => usePagination({ count: 8, page: 5 })).result.current; - assert.strictEqual(items[2].type, 'start-ellipsis'); - assert.strictEqual(items[2].page, null); - assert.strictEqual(items[6].page, 7); + expect(items[2]).to.have.property('type', 'start-ellipsis'); + expect(items[2]).to.have.property('page', null); + expect(items[6]).to.have.property('page', 7); }); it('has start & end ellipsis when count >= 9', () => { const { items } = renderHook(() => usePagination({ count: 9, page: 5 })).result.current; - assert.strictEqual(items.length, 9); - assert.strictEqual(items[2].type, 'start-ellipsis'); - assert.strictEqual(items[2].page, null); - assert.strictEqual(items[6].type, 'end-ellipsis'); - assert.strictEqual(items[6].page, null); + expect(items).to.have.length(9); + expect(items[2]).to.have.property('type', 'start-ellipsis'); + expect(items[2]).to.have.property('page', null); + expect(items[6]).to.have.property('type', 'end-ellipsis'); + expect(items[6]).to.have.property('page', null); }); it('can have a reduced siblingCount', () => { const { items } = renderHook(() => usePagination({ count: 7, page: 4, siblingCount: 0 }), ).result.current; - assert.strictEqual(items.length, 7); - assert.strictEqual(items[2].type, 'start-ellipsis'); - assert.strictEqual(items[3].page, 4); - assert.strictEqual(items[4].type, 'end-ellipsis'); + expect(items).to.have.length(7); + expect(items[2]).to.have.property('type', 'start-ellipsis'); + expect(items[3]).to.have.property('page', 4); + expect(items[4]).to.have.property('type', 'end-ellipsis'); }); it('can have an increased siblingCount', () => { const { items } = renderHook(() => usePagination({ count: 11, page: 6, siblingCount: 2 }), ).result.current; - assert.strictEqual(items.length, 11); - assert.strictEqual(items[2].type, 'start-ellipsis'); - assert.strictEqual(items[3].page, 4); - assert.strictEqual(items[4].page, 5); - assert.strictEqual(items[5].page, 6); - assert.strictEqual(items[6].page, 7); - assert.strictEqual(items[7].page, 8); - assert.strictEqual(items[8].type, 'end-ellipsis'); + expect(items).to.have.length(11); + expect(items[2]).to.have.property('type', 'start-ellipsis'); + expect(items[3]).to.have.property('page', 4); + expect(items[4]).to.have.property('page', 5); + expect(items[5]).to.have.property('page', 6); + expect(items[6]).to.have.property('page', 7); + expect(items[7]).to.have.property('page', 8); + expect(items[8]).to.have.property('type', 'end-ellipsis'); }); it('can have an increased boundaryCount', () => { const { items } = renderHook(() => usePagination({ count: 11, page: 6, boundaryCount: 2 }), ).result.current; - assert.strictEqual(items.length, 11); - assert.strictEqual(items[1].page, 1); - assert.strictEqual(items[2].page, 2); - assert.strictEqual(items[3].type, 'start-ellipsis'); - assert.strictEqual(items[7].type, 'end-ellipsis'); - assert.strictEqual(items[8].page, 10); - assert.strictEqual(items[9].page, 11); + expect(items).to.have.length(11); + expect(items[1]).to.have.property('page', 1); + expect(items[2]).to.have.property('page', 2); + expect(items[3]).to.have.property('type', 'start-ellipsis'); + expect(items[7]).to.have.property('type', 'end-ellipsis'); + expect(items[8]).to.have.property('page', 10); + expect(items[9]).to.have.property('page', 11); }); }); From c46cb323adaf866a09d64d0d94ab979f995ebe36 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 3 Feb 2020 10:33:15 +0000 Subject: [PATCH 56/64] use theme colors --- .../src/PaginationItem/PaginationItem.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index f9d9c2821e3904..3369d0b021001f 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -22,23 +22,23 @@ export const styles = theme => ({ duration: theme.transitions.duration.short, }), '&:hover, &:focus': { - backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity), + backgroundColor: theme.palette.action.hover, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', }, }, '&$selected': { - backgroundColor: fade(theme.palette.action.active, 0.09), + backgroundColor: theme.palette.action.selected, '&:hover, &:focus': { - backgroundColor: fade(theme.palette.action.active, 0.15), + backgroundColor: theme.palette.action.disabledBackground, }, '&$disabled': { - backgroundColor: fade(theme.palette.action.disabled, 0.07), + backgroundColor: theme.palette.action.disabledBackground, }, }, '&$disabled': { - color: fade(theme.palette.text.primary, 0.5), + color: theme.palette.action.disabled, backgroundColor: 'transparent', pointerEvents: 'none', }, From aa70802d4964dc9d6ec620113a7096ed4d7dc754 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 3 Feb 2020 10:51:56 +0000 Subject: [PATCH 57/64] yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 6ce5366f4d0799..6c7d3f46855e42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -838,7 +838,7 @@ core-js "^2.6.5" regenerator-runtime "^0.13.2" -"@babel/runtime@7.0.0", "@babel/runtime@7.1.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3": +"@babel/runtime@7.0.0", "@babel/runtime@7.1.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3": version "7.8.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308" integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ== From c085b2c661ac4d4fcd8c676cee161ebc84536ffb Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 4 Feb 2020 00:59:47 +0000 Subject: [PATCH 58/64] Use theme colors continued --- .../src/PaginationItem/PaginationItem.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 3369d0b021001f..11a0c7a7d0bf5c 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -31,7 +31,7 @@ export const styles = theme => ({ '&$selected': { backgroundColor: theme.palette.action.selected, '&:hover, &:focus': { - backgroundColor: theme.palette.action.disabledBackground, + backgroundColor: 'rgba(0, 0, 0, 0.12)', }, '&$disabled': { backgroundColor: theme.palette.action.disabledBackground, @@ -61,11 +61,11 @@ export const styles = theme => ({ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, '&:hover, &:focus': { - backgroundColor: fade(theme.palette.action.active, 0.05), + backgroundColor: theme.palette.action.hover, }, '&$disabled': { - color: fade(theme.palette.action.disabled, 0.2), - backgroundColor: fade(theme.palette.action.disabled, 0.03), + color: theme.palette.action.disabled, + backgroundColor: 'rgba(0, 0, 0, 0.03)', border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' }`, @@ -73,13 +73,13 @@ export const styles = theme => ({ }, '&$selected': { color: theme.palette.action.active, - backgroundColor: fade(theme.palette.action.active, 0.12), + backgroundColor: 'rgba(0, 0, 0, 0.12)', '&:hover, &:focus': { - backgroundColor: fade(theme.palette.action.active, 0.15), + backgroundColor: 'rgba(0, 0, 0, 0.15)', }, '&$disabled': { - color: fade(theme.palette.action.disabled, 0.3), - backgroundColor: fade(theme.palette.action.disabled, 0.06), + color: theme.palette.action.disabled, + backgroundColor: 'rgba(0, 0, 0, 0.06)', }, }, }, @@ -87,7 +87,7 @@ export const styles = theme => ({ textPrimary: { '&:hover, &:focus': { color: theme.palette.primary.main, - backgroundColor: fade(theme.palette.primary.main, 0.2), + backgroundColor: 'rgba(0, 0, 0, 0.2)', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -105,7 +105,7 @@ export const styles = theme => ({ }, '&$disabled': { color: theme.palette.text.primary, - backgroundColor: fade(theme.palette.action.disabled, 0.07), + backgroundColor: 'rgba(0, 0, 0, 0.07)', }, }, }, @@ -113,7 +113,7 @@ export const styles = theme => ({ textSecondary: { '&:hover, &:focus': { color: theme.palette.secondary.main, - backgroundColor: fade(theme.palette.secondary.main, 0.2), + backgroundColor: 'rgba(0, 0, 0, 0.2)', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -131,7 +131,7 @@ export const styles = theme => ({ }, '&$disabled': { color: theme.palette.text.secondary, - backgroundColor: fade(theme.palette.action.disabled, 0.07), + backgroundColor: 'rgba(0, 0, 0, 0.13)', }, }, }, From 3f0aaec07883e8ac7ebe5457d1ea7b423b0a7080 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 4 Feb 2020 17:46:56 +0000 Subject: [PATCH 59/64] Add comment with source of range function --- .../src/Pagination/usePagination.js | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 8e3cd91af8954d..106c132e18f8dd 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -37,6 +37,7 @@ export default function usePagination(props = {}) { }, 240); }; + https://dev.to/namirsab/comment/2050 const range = (start, end) => { const length = end - start + 1; return Array.from({ length }, (_, i) => start + i); @@ -79,8 +80,8 @@ export default function usePagination(props = {}) { ...(siblingsStart > boundaryCount + 3 ? ['start-ellipsis'] : 2 + boundaryCount < count - boundaryCount - 1 - ? [2 + boundaryCount] - : []), + ? [2 + boundaryCount] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -90,8 +91,8 @@ export default function usePagination(props = {}) { ...(siblingsEnd < count - boundaryCount - 2 ? ['end-ellipsis'] : count - boundaryCount - 1 > boundaryCount + 1 - ? [count - boundaryCount - 1] - : []), + ? [count - boundaryCount - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -118,20 +119,20 @@ export default function usePagination(props = {}) { const items = itemList.map(item => { return typeof item === 'number' ? { - disabled, - onClick: handleClick, - page: item, - selected: item === page, - } + disabled, + onClick: handleClick, + page: item, + selected: item === page, + } : { - onClick: handleClick, - type: item, - page: buttonPage(item), - disabled: - disabled || - (item !== 'ellipsis' && - (item === 'next' || item === 'last' ? page >= count : page <= 1)), - }; + onClick: handleClick, + type: item, + page: buttonPage(item), + disabled: + disabled || + (item !== 'ellipsis' && + (item === 'next' || item === 'last' ? page >= count : page <= 1)), + }; }); return { From 8d6934974d3c422115859e49e9bc91dfc8ae6336 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 4 Feb 2020 19:30:16 +0000 Subject: [PATCH 60/64] Update packages/material-ui-lab/src/Pagination/Pagination.js Co-Authored-By: Sebastian Silbermann --- packages/material-ui-lab/src/Pagination/Pagination.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 8b04a1dae8d5be..17ed8651cd05d0 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -44,7 +44,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { > {children || items.map(item => ( -
  • {renderItem({ ...item, ...itemProps })}
    • +
  • {renderItem({ ...item, ...itemProps })}
    • ))} ); From 3d83a6613b98de45c91b2b844c3760808d9132c2 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 4 Feb 2020 19:39:11 +0000 Subject: [PATCH 61/64] rename ariaLabel to defaultAriaLabel & fix comment --- .../src/Pagination/usePagination.js | 2 +- .../src/PaginationItem/PaginationItem.js | 112 +++++++++--------- 2 files changed, 56 insertions(+), 58 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 106c132e18f8dd..8daa8e0ffe2492 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -37,7 +37,7 @@ export default function usePagination(props = {}) { }, 240); }; - https://dev.to/namirsab/comment/2050 + // https://dev.to/namirsab/comment/2050 const range = (start, end) => { const length = end - start + 1; return Array.from({ length }, (_, i) => start + i); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 11a0c7a7d0bf5c..4a79f0c5343b67 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ export const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: theme.palette.action.hover, }, @@ -68,7 +68,7 @@ export const styles = theme => ({ backgroundColor: 'rgba(0, 0, 0, 0.03)', border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -226,7 +226,7 @@ export const styles = theme => ({ selected: {}, }); -function ariaLabel(type, page, selected) { +function defaultGetAriaLabel(type, page, selected) { if (type === 'page') { return `${selected ? '' : 'go to '}page ${page}`; } @@ -240,7 +240,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { color = 'standard', component, disabled = false, - getAriaLabel, + getAriaLabel = defaultGetAriaLabel, page, onClick: handleClick, selected, @@ -262,60 +262,58 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { … ) : ( - handleClick(event, page)} - className={clsx( - classes.root, - classes[variant], - classes[shape], - { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, - [classes[`size${capitalize(size)}`]]: size !== 'medium', - }, - className, - )} - {...other} - > - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - handleClick(event, page)} + className={clsx( + classes.root, + classes[variant], + classes[shape], + { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, [classes[`size${capitalize(size)}`]]: size !== 'medium', - })} - /> - )} - - ); + }, + className, + )} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + + )} + + ); }); PaginationItem.propTypes = { From 6263722011eb5f4c86e316e5c461b389062e7ed5 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 4 Feb 2020 19:46:18 +0000 Subject: [PATCH 62/64] docs:api & prettier --- docs/pages/api/pagination-item.md | 2 +- .../src/Pagination/Pagination.js | 4 +- .../src/Pagination/usePagination.js | 34 +++--- .../src/PaginationItem/PaginationItem.js | 106 +++++++++--------- 4 files changed, 74 insertions(+), 72 deletions(-) diff --git a/docs/pages/api/pagination-item.md b/docs/pages/api/pagination-item.md index 5491d68e2eb016..dd249842b73082 100644 --- a/docs/pages/api/pagination-item.md +++ b/docs/pages/api/pagination-item.md @@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | color | 'standard'
    | 'primary'
    | 'secondary'     | 'standard' | The active color. | | component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | false | If `true`, the item will be disabled. | -| getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.

    **Signature:**
    `function(type?: string, page: number, selected: bool) => string`
    *type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
    *page:* The page number to format.
    *selected:* If true, the current page is selected. | +| getAriaLabel | func | function defaultGetAriaLabel(type, page, selected) { if (type === 'page') { return `${selected ? '' : 'go to '}page ${page}`; } return `Go to ${type} page`;} | Accepts a function which returns a string value that provides a user-friendly name for the current page.

    **Signature:**
    `function(type?: string, page: number, selected: bool) => string`
    *type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
    *page:* The page number to format.
    *selected:* If true, the current page is selected. | | onClick | func | | Callback fired when the page is changed.

    **Signature:**
    `function(event: object, page: number) => void`
    *event:* The event source of the callback.
    *page:* The page selected. | | page | number | | The current page number. | | selected | bool | | If `true` the pagination item is selected. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 17ed8651cd05d0..02d75e3bd86508 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -44,7 +44,9 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { > {children || items.map(item => ( -
  • {renderItem({ ...item, ...itemProps })}
    • +
  • + {renderItem({ ...item, ...itemProps })} +
    • ))} ); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.js b/packages/material-ui-lab/src/Pagination/usePagination.js index 8daa8e0ffe2492..dfbd01b3b20d4e 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.js +++ b/packages/material-ui-lab/src/Pagination/usePagination.js @@ -80,8 +80,8 @@ export default function usePagination(props = {}) { ...(siblingsStart > boundaryCount + 3 ? ['start-ellipsis'] : 2 + boundaryCount < count - boundaryCount - 1 - ? [2 + boundaryCount] - : []), + ? [2 + boundaryCount] + : []), // Sibling pages ...range(siblingsStart, siblingsEnd), @@ -91,8 +91,8 @@ export default function usePagination(props = {}) { ...(siblingsEnd < count - boundaryCount - 2 ? ['end-ellipsis'] : count - boundaryCount - 1 > boundaryCount + 1 - ? [count - boundaryCount - 1] - : []), + ? [count - boundaryCount - 1] + : []), ...endPages, ...(hideNextButton ? [] : ['next']), @@ -119,20 +119,20 @@ export default function usePagination(props = {}) { const items = itemList.map(item => { return typeof item === 'number' ? { - disabled, - onClick: handleClick, - page: item, - selected: item === page, - } + disabled, + onClick: handleClick, + page: item, + selected: item === page, + } : { - onClick: handleClick, - type: item, - page: buttonPage(item), - disabled: - disabled || - (item !== 'ellipsis' && - (item === 'next' || item === 'last' ? page >= count : page <= 1)), - }; + onClick: handleClick, + type: item, + page: buttonPage(item), + disabled: + disabled || + (item !== 'ellipsis' && + (item === 'next' || item === 'last' ? page >= count : page <= 1)), + }; }); return { diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 4a79f0c5343b67..f8d4f4ac273072 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -59,7 +59,7 @@ export const styles = theme => ({ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, + }`, '&:hover, &:focus': { backgroundColor: theme.palette.action.hover, }, @@ -68,7 +68,7 @@ export const styles = theme => ({ backgroundColor: 'rgba(0, 0, 0, 0.03)', border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)' - }`, + }`, pointerEvents: 'none', }, '&$selected': { @@ -262,58 +262,58 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { … ) : ( - handleClick(event, page)} - className={clsx( - classes.root, - classes[variant], - classes[shape], - { - [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', - [classes.disabled]: disabled, - [classes.selected]: selected, + handleClick(event, page)} + className={clsx( + classes.root, + classes[variant], + classes[shape], + { + [classes[`${variant}${capitalize(color)}`]]: color !== 'standard', + [classes.disabled]: disabled, + [classes.selected]: selected, + [classes[`size${capitalize(size)}`]]: size !== 'medium', + }, + className, + )} + {...other} + > + {type === 'page' && page} + {type === 'previous' && ( + + )} + {type === 'next' && ( + + )} + {type === 'first' && ( + + )} + {type === 'last' && ( + - {type === 'page' && page} - {type === 'previous' && ( - - )} - {type === 'next' && ( - - )} - {type === 'first' && ( - - )} - {type === 'last' && ( - - )} - - ); + })} + /> + )} + + ); }); PaginationItem.propTypes = { From f55cfea271879b42191572e29b09711a09e3c5e5 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 4 Feb 2020 22:36:54 +0000 Subject: [PATCH 63/64] Use for --- packages/material-ui-lab/src/PaginationItem/PaginationItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index f8d4f4ac273072..02a811adf1ef17 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -267,7 +267,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) { component={component} disabled={disabled} aria-label={getAriaLabel(type, page, selected)} - aria-current={selected ? 'page' : undefined} + aria-current={selected ? 'true' : undefined} onClick={event => handleClick(event, page)} className={clsx( classes.root, From 5d968aa36ff47cb4a5c2e9405c6a24720106f00d Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 7 Feb 2020 21:04:48 +0000 Subject: [PATCH 64/64] Add words to router integration section --- docs/src/pages/components/pagination/pagination.md | 7 ++++++- packages/material-ui-lab/src/Pagination/Pagination.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index 88225477d49469..7bfb088906970c 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -41,14 +41,19 @@ You can specify how many digits to display either side of current page with the ## Router integration +Pagination supports two approaches for Router integration, the `renderItem` prop: + {{"demo": "pages/components/pagination/PaginationLink.js"}} + +And children: + {{"demo": "pages/components/pagination/PaginationLinkChildren.js"}} ## Accessibility ### ARIA -The root node has a role of "navigation" and aria-label "Pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the `getItemAriaLabel` prop. +The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the `getItemAriaLabel` prop. ### Keyboard diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 02d75e3bd86508..28a063f135cae6 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -37,7 +37,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { return (