Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Pagination] Fix missing renderItem types #20592

Merged
4 changes: 2 additions & 2 deletions docs/pages/api-docs/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The `MuiPagination` name can be used for providing [default props](/customizatio
|:-----|:-----|:--------|:------------|
| <span class="prop-name">boundaryCount</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Number of always visible pages at the beginning and end. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'standard'</span> | The active color. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | The active color. |
| <span class="prop-name">count</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The total number of pages. |
| <span class="prop-name">defaultPage</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The page selected by default when the component is uncontrolled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the pagination component will be disabled. |
Expand All @@ -39,7 +39,7 @@ The `MuiPagination` name can be used for providing [default props](/customizatio
| <span class="prop-name">hidePrevButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the previous-page button. |
| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
| <span class="prop-name">page</span> | <span class="prop-type">number</span> | | The current page. |
| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: PaginationRenderItemParams) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
| <span class="prop-name">shape</span> | <span class="prop-type">'round'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'round'</span> | The shape of the pagination items. |
| <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |
| <span class="prop-name">showLastButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the last-page button. |
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/components/pagination/PaginationLink.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ export default function PaginationLink() {
<Route>
{({ location }) => {
const query = new URLSearchParams(location.search);
const page = parseInt(query.get('page'), 10) || 1;

const page = parseInt(query.get('page') || '1', 10);
return (
<Pagination
page={page}
Expand Down
31 changes: 31 additions & 0 deletions docs/src/pages/components/pagination/PaginationLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import { MemoryRouter, Route } from 'react-router';
import { Link } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';

export default function PaginationLink() {
return (
<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
<Route>
{({ location }) => {
const query = new URLSearchParams(location.search);
const page = parseInt(query.get('page') || '1', 10);
return (
<Pagination
page={page}
count={10}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>
);
}}
</Route>
</MemoryRouter>
);
}
13 changes: 10 additions & 3 deletions packages/material-ui-lab/src/Pagination/Pagination.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,20 @@ import * as React from 'react';
import { StandardProps } from '@material-ui/core';
import { UsePaginationItem, UsePaginationProps } from './usePagination';

export interface PaginationRenderItemParams extends UsePaginationItem {
color: PaginationProps['color'];
shape: PaginationProps['shape'];
size: PaginationProps['size'];
variant: PaginationProps['variant'];
}

export interface PaginationProps
extends UsePaginationProps,
StandardProps<React.HTMLAttributes<HTMLElement>, PaginationClassKey, 'children' | 'onChange'> {
/**
* The active color.
*/
color?: 'default' | 'primary' | 'secondary';
color?: 'primary' | 'secondary' | 'standard';
/**
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
*
Expand All @@ -27,10 +34,10 @@ export interface PaginationProps
/**
* Render the item.
*
* @param {object} params The props to spread on a PaginationItem.
* @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
* @returns {ReactNode}
*/
renderItem?: (params: object) => React.ReactNode;
renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
/**
* The shape of the pagination items.
*/
Expand Down
4 changes: 2 additions & 2 deletions packages/material-ui-lab/src/Pagination/Pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ Pagination.propTypes = {
/**
* The active color.
*/
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
color: PropTypes.oneOf(['primary', 'secondary', 'standard']),
/**
* The total number of pages.
* @default 1
Expand Down Expand Up @@ -152,7 +152,7 @@ Pagination.propTypes = {
/**
* Render the item.
*
* @param {object} params The props to spread on a PaginationItem.
* @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
* @returns {ReactNode}
*/
renderItem: PropTypes.func,
Expand Down