From f8bcc018a32dee0330a55f4463e10c7cf5474859 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 14:17:39 +0100 Subject: [PATCH 01/21] Add types for Pagination --- .../src/Pagination/Pagination.d.ts | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 25fe599df2e74b..a387d57e90945f 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -1,2 +1,29 @@ -declare const Pagination: any; -export default Pagination; +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; + +export interface PaginationProps + extends StandardProps, PaginationClassKey, 'onChange'> { + boundaryCount?: number; + color?: 'default' | 'primary' | 'secondary'; + count?: number; + defaultPage?: number; + disabled?: boolean; + getItemAriaLabel?: (type: string | undefined, page: number, selected: boolean) => string; + hideNextButton?: boolean; + hidePrevButton?: boolean; + onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + page?: number; + renderItem?: (params: object) => React.ReactNode; + shape?: 'round' | 'rounded'; + showFirstButton?: boolean; + showLastButton?: boolean; + siblingCount?: number; + size?: 'small' | 'medium' | 'large'; + variant?: 'text' | 'outlined'; +} + +export type PaginationClassKey = + | 'root' + | 'ul'; + +export default function Pagination(props: PaginationProps): JSX.Element; From 49c5d2bc2db49005d74bda1cf3eb4e49df1be4b1 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 14:50:38 +0100 Subject: [PATCH 02/21] Add types for PaginationItem --- .../src/PaginationItem/PaginationItem.d.ts | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index adf49d899bfed0..76b73875f33079 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -1,2 +1,43 @@ -declare const PaginationItem: any; +import * as React from 'react'; +import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent'; + +export interface PaginationItemTypeMap

{ + props: P & { + color?: 'standard' | 'primary' | 'secondary'; + disabled?: boolean; + page?: number; + selected?: boolean; + shape?: 'round' | 'rounded'; + size?: 'small' | 'medium' | 'large'; + type?: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'; + variant?: 'text' | 'outlined'; + }; + defaultComponent: D; + classKey: PaginationItemClassKey; +} + +declare const PaginationItem: OverridableComponent; + +export type PaginationItemClassKey = + | 'root' + | 'page' + | 'sizeSmall' + | 'sizeLarge' + | 'textPrimary' + | 'textSecondary' + | 'outlined' + | 'outlinedPrimary' + | 'outlinedSecondary' + | 'rounded' + | 'ellipsis' + | 'focusVisible' + | 'disabled' + | 'selected' + | 'icon'; + +export type PaginationItemProps< + D extends React.ElementType = PaginationItemTypeMap['defaultComponent'], + P = {} +> = OverrideProps, D>; + export default PaginationItem; From 4ca64c93daa025185f67b1be990bbc4060d102a3 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 15:26:22 +0100 Subject: [PATCH 03/21] Add types for usePagination --- .../src/Pagination/usePagination.d.ts | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts index c8981e9bce2bf2..f5e6bacdd4c06a 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/usePagination.d.ts @@ -1,2 +1,26 @@ -declare const usePagination: any; -export default usePagination; +import * as React from 'react'; + +export interface UsePaginationProps { + boundaryCount?: number; + componentName?: string; + count?: number; + defaultPage?: number; + disabled?: boolean; + hideNextButton?: boolean; + hidePrevButton?: boolean; + onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + page?: number; + showFirstButton?: boolean; + showLastButton?: boolean; + siblingCount?: number; +} + +export interface UsePaginationItem { + onClick: React.ReactEventHandler; + type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'; + page: number; + selected: boolean; + disabled: boolean; +} + +export default function usePagination(props: UsePaginationProps): UsePaginationItem[]; From dfba1095ee8d4f2d93de5935a5b8264f7546971c Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 15:36:54 +0100 Subject: [PATCH 04/21] Use UsePaginationItem types in other definitions --- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 3 ++- .../material-ui-lab/src/PaginationItem/PaginationItem.d.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index a387d57e90945f..bf17e4b5091f48 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { StandardProps } from '@material-ui/core'; +import { UsePaginationItem } from './usePagination'; export interface PaginationProps extends StandardProps, PaginationClassKey, 'onChange'> { @@ -8,7 +9,7 @@ export interface PaginationProps count?: number; defaultPage?: number; disabled?: boolean; - getItemAriaLabel?: (type: string | undefined, page: number, selected: boolean) => string; + getItemAriaLabel?: (type: UsePaginationItem['type'] | undefined, page: number, selected: boolean) => string; hideNextButton?: boolean; hidePrevButton?: boolean; onChange?: (event: React.ChangeEvent<{}>, page: number) => void; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index 76b73875f33079..2e8f31e17d4556 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent'; +import { UsePaginationItem } from '../Pagination/usePagination'; export interface PaginationItemTypeMap

{ props: P & { @@ -9,7 +10,7 @@ export interface PaginationItemTypeMap

Date: Mon, 2 Mar 2020 16:24:57 +0100 Subject: [PATCH 05/21] Run prettier --- .../src/Pagination/Pagination.d.ts | 44 +++++++------- .../src/Pagination/usePagination.d.ts | 34 +++++------ .../src/PaginationItem/PaginationItem.d.ts | 58 +++++++++---------- 3 files changed, 69 insertions(+), 67 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index bf17e4b5091f48..7504dcd2ac6c56 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -3,28 +3,30 @@ import { StandardProps } from '@material-ui/core'; import { UsePaginationItem } from './usePagination'; export interface PaginationProps - extends StandardProps, PaginationClassKey, 'onChange'> { - boundaryCount?: number; - color?: 'default' | 'primary' | 'secondary'; - count?: number; - defaultPage?: number; - disabled?: boolean; - getItemAriaLabel?: (type: UsePaginationItem['type'] | undefined, page: number, selected: boolean) => string; - hideNextButton?: boolean; - hidePrevButton?: boolean; - onChange?: (event: React.ChangeEvent<{}>, page: number) => void; - page?: number; - renderItem?: (params: object) => React.ReactNode; - shape?: 'round' | 'rounded'; - showFirstButton?: boolean; - showLastButton?: boolean; - siblingCount?: number; - size?: 'small' | 'medium' | 'large'; - variant?: 'text' | 'outlined'; + extends StandardProps, PaginationClassKey, 'onChange'> { + boundaryCount?: number; + color?: 'default' | 'primary' | 'secondary'; + count?: number; + defaultPage?: number; + disabled?: boolean; + getItemAriaLabel?: ( + type: UsePaginationItem['type'] | undefined, + page: number, + selected: boolean, + ) => string; + hideNextButton?: boolean; + hidePrevButton?: boolean; + onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + page?: number; + renderItem?: (params: object) => React.ReactNode; + shape?: 'round' | 'rounded'; + showFirstButton?: boolean; + showLastButton?: boolean; + siblingCount?: number; + size?: 'small' | 'medium' | 'large'; + variant?: 'text' | 'outlined'; } -export type PaginationClassKey = - | 'root' - | 'ul'; +export type PaginationClassKey = 'root' | 'ul'; export default function Pagination(props: PaginationProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts index f5e6bacdd4c06a..a2841ccf40d45a 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/usePagination.d.ts @@ -1,26 +1,26 @@ import * as React from 'react'; export interface UsePaginationProps { - boundaryCount?: number; - componentName?: string; - count?: number; - defaultPage?: number; - disabled?: boolean; - hideNextButton?: boolean; - hidePrevButton?: boolean; - onChange?: (event: React.ChangeEvent<{}>, page: number) => void; - page?: number; - showFirstButton?: boolean; - showLastButton?: boolean; - siblingCount?: number; + boundaryCount?: number; + componentName?: string; + count?: number; + defaultPage?: number; + disabled?: boolean; + hideNextButton?: boolean; + hidePrevButton?: boolean; + onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + page?: number; + showFirstButton?: boolean; + showLastButton?: boolean; + siblingCount?: number; } export interface UsePaginationItem { - onClick: React.ReactEventHandler; - type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'; - page: number; - selected: boolean; - disabled: boolean; + onClick: React.ReactEventHandler; + type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'; + page: number; + selected: boolean; + disabled: boolean; } export default function usePagination(props: UsePaginationProps): UsePaginationItem[]; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index 2e8f31e17d4556..f3b25209255cba 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -3,42 +3,42 @@ import { OverridableComponent, OverrideProps } from '@material-ui/core/Overridab import { UsePaginationItem } from '../Pagination/usePagination'; export interface PaginationItemTypeMap

{ - props: P & { - color?: 'standard' | 'primary' | 'secondary'; - disabled?: boolean; - page?: number; - selected?: boolean; - shape?: 'round' | 'rounded'; - size?: 'small' | 'medium' | 'large'; - type?: UsePaginationItem['type']; - variant?: 'text' | 'outlined'; - }; - defaultComponent: D; - classKey: PaginationItemClassKey; + props: P & { + color?: 'standard' | 'primary' | 'secondary'; + disabled?: boolean; + page?: number; + selected?: boolean; + shape?: 'round' | 'rounded'; + size?: 'small' | 'medium' | 'large'; + type?: UsePaginationItem['type']; + variant?: 'text' | 'outlined'; + }; + defaultComponent: D; + classKey: PaginationItemClassKey; } declare const PaginationItem: OverridableComponent; export type PaginationItemClassKey = - | 'root' - | 'page' - | 'sizeSmall' - | 'sizeLarge' - | 'textPrimary' - | 'textSecondary' - | 'outlined' - | 'outlinedPrimary' - | 'outlinedSecondary' - | 'rounded' - | 'ellipsis' - | 'focusVisible' - | 'disabled' - | 'selected' - | 'icon'; + | 'root' + | 'page' + | 'sizeSmall' + | 'sizeLarge' + | 'textPrimary' + | 'textSecondary' + | 'outlined' + | 'outlinedPrimary' + | 'outlinedSecondary' + | 'rounded' + | 'ellipsis' + | 'focusVisible' + | 'disabled' + | 'selected' + | 'icon'; export type PaginationItemProps< - D extends React.ElementType = PaginationItemTypeMap['defaultComponent'], - P = {} + D extends React.ElementType = PaginationItemTypeMap['defaultComponent'], + P = {} > = OverrideProps, D>; export default PaginationItem; From de59081653a6654a1bec8cfe2450f6beee74fcc1 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 19:04:10 +0100 Subject: [PATCH 06/21] Add tsdoc comments to Pagination types --- .../src/Pagination/Pagination.d.ts | 64 +++++++++++++++++++ .../src/Pagination/Pagination.js | 20 ++++-- 2 files changed, 78 insertions(+), 6 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 7504dcd2ac6c56..28b1d9ea88cdaa 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -4,26 +4,90 @@ import { UsePaginationItem } from './usePagination'; export interface PaginationProps extends StandardProps, PaginationClassKey, 'onChange'> { + /** + * Number of always visible pages at the beginning and end. + */ boundaryCount?: number; + /** + * The active color. + */ color?: 'default' | 'primary' | 'secondary'; + /** + * The total number of pages. + */ count?: number; + /** + * The page selected by default when the component is uncontrolled. + */ defaultPage?: number; + /** + * If `true`, all the pagination components will be disabled. + */ disabled?: boolean; + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current page. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). + * + * @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?: ( type: UsePaginationItem['type'] | undefined, page: number, selected: boolean, ) => string; + /** + * If `true`, hide the next-page button. + */ hideNextButton?: boolean; + /** + * If `true`, hide the previous-page button. + */ hidePrevButton?: boolean; + /** + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + */ onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + /** + * The current page. + */ page?: number; + /** + * Renders the item. + * + * @param {object} params The props to spread on a PaginationItem. + * @returns {ReactNode} + */ renderItem?: (params: object) => React.ReactNode; + /** + * The shape of the pagination items. + */ shape?: 'round' | 'rounded'; + /** + * If `true`, show the first-page button. + */ showFirstButton?: boolean; + /** + * If `true`, show the last-page button. + */ showLastButton?: boolean; + /** + * Number of always visible pages before and after the current page. + */ siblingCount?: number; + /** + * The size of the pagination component. + */ size?: 'small' | 'medium' | 'large'; + /** + * The variant to use. + */ variant?: 'text' | 'outlined'; } diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index a54ce6f2604412..0e4b513db2ac1a 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -40,6 +40,8 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { getItemAriaLabel: getAriaLabel = defaultGetAriaLabel, hideNextButton = false, hidePrevButton = false, + onChange, + page, renderItem = item => , shape = 'round', showFirstButton = false, @@ -68,6 +70,8 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { ...item, color, 'aria-label': getAriaLabel(item.type, item.page, item.selected), + page, + onChange, shape, size, variant, @@ -80,19 +84,23 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { }); Pagination.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Number of always visible pages at the beginning and end. */ boundaryCount: PropTypes.number, /** - * Pagination items. + * The content of the component. */ children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -110,7 +118,7 @@ Pagination.propTypes = { */ defaultPage: PropTypes.number, /** - * If `true`, all the pagination component will be disabled. + * If `true`, all the pagination components will be disabled. */ disabled: PropTypes.bool, /** @@ -144,7 +152,7 @@ Pagination.propTypes = { */ page: PropTypes.number, /** - * Render the item. + * Renders the item. * * @param {object} params The props to spread on a PaginationItem. * @returns {ReactNode} @@ -169,11 +177,11 @@ Pagination.propTypes = { /** * The size of the pagination component. */ - size: PropTypes.oneOf(['small', 'medium', 'large']), + size: PropTypes.oneOf(['large', 'medium', 'small']), /** * The variant to use. */ - variant: PropTypes.oneOf(['text', 'outlined']), + variant: PropTypes.oneOf(['outlined', 'text']), }; export default withStyles(styles, { name: 'MuiPagination' })(Pagination); From 1cb8f7a862714f70f7fe7e55468198c716b40ea8 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 19:20:30 +0100 Subject: [PATCH 07/21] Add tsdoc to PaginationItem types --- .../src/PaginationItem/PaginationItem.d.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index f3b25209255cba..8f4b5b6cc8a288 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -4,13 +4,37 @@ import { UsePaginationItem } from '../Pagination/usePagination'; export interface PaginationItemTypeMap

{ props: P & { + /** + * The active color. + */ color?: 'standard' | 'primary' | 'secondary'; + /** + * If `true`, the item will be disabled. + */ disabled?: boolean; + /** + * The current page number. + */ page?: number; + /** + * If `true` the pagination item is selected. + */ selected?: boolean; + /** + * The shape of the pagination item. + */ shape?: 'round' | 'rounded'; + /** + * The size of the pagination item. + */ size?: 'small' | 'medium' | 'large'; + /** + * The type of pagination item. + */ type?: UsePaginationItem['type']; + /** + * The pagination item variant. + */ variant?: 'text' | 'outlined'; }; defaultComponent: D; From 8d6d30f2f46315314e8f8ed3575eee6d394e7c88 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 19:29:25 +0100 Subject: [PATCH 08/21] Update docs for pagination --- docs/pages/api/pagination.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index e917e2c0423fcc..35eeacaad411cb 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -25,24 +25,24 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | boundaryCount | number | 1 | Number of always visible pages at the beginning and end. | -| children | node | | Pagination items. | +| children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
| 'primary'
| 'secondary' | 'standard' | The active color. | | count | number | 1 | The total number of pages. | | defaultPage | number | 1 | The page selected by default when the component is uncontrolled. | -| disabled | bool | false | If `true`, all the pagination component will be disabled. | +| disabled | bool | false | If `true`, all the pagination components will be disabled. | | getItemAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.
For localization purposes, you can use the provided [translations](/guides/localization/).

**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 | false | If `true`, hide the next-page button. | | hidePrevButton | bool | false | 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 | | The current page. | -| renderItem | func | item => <PaginationItem {...item} /> | Render the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on a PaginationItem. | +| renderItem | func | item => <PaginationItem {...item} /> | Renders the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on a PaginationItem. | | shape | 'round'
| 'rounded' | 'round' | The shape of the pagination items. | | showFirstButton | bool | false | If `true`, show the first-page button. | | showLastButton | bool | false | If `true`, show the last-page button. | | siblingCount | number | 1 | Number of always visible pages before and after the current page. | -| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the pagination component. | -| variant | 'text'
| 'outlined' | 'text' | The variant to use. | +| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the pagination component. | +| variant | 'outlined'
| 'text' | 'text' | The variant to use. | The `ref` is forwarded to the root element. From 61e1e3001f8ee8a176d7b2a7b9acaeeb57367013 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 19:43:11 +0100 Subject: [PATCH 09/21] Do not pass page and onChange to items --- packages/material-ui-lab/src/Pagination/Pagination.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 0e4b513db2ac1a..80f3acd17e54bd 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -70,8 +70,6 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { ...item, color, 'aria-label': getAriaLabel(item.type, item.page, item.selected), - page, - onChange, shape, size, variant, From a241b0f0b17c756656927acebd9438f676e9387a Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 20:11:20 +0100 Subject: [PATCH 10/21] Change prop descriptions to review suggestions --- docs/pages/api/pagination.md | 4 ++-- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 6 +++--- packages/material-ui-lab/src/Pagination/Pagination.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index 35eeacaad411cb..e11ec562155bd7 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -30,13 +30,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | color | 'default'
| 'primary'
| 'secondary' | 'standard' | The active color. | | count | number | 1 | The total number of pages. | | defaultPage | number | 1 | The page selected by default when the component is uncontrolled. | -| disabled | bool | false | If `true`, all the pagination components will be disabled. | +| disabled | bool | false | If `true`, the pagination will be disabled. | | getItemAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.
For localization purposes, you can use the provided [translations](/guides/localization/).

**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 | false | If `true`, hide the next-page button. | | hidePrevButton | bool | false | 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 | | The current page. | -| renderItem | func | item => <PaginationItem {...item} /> | Renders the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on a PaginationItem. | +| renderItem | func | item => <PaginationItem {...item} /> | The pagination item component to render.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on the component. | | shape | 'round'
| 'rounded' | 'round' | The shape of the pagination items. | | showFirstButton | bool | false | If `true`, show the first-page button. | | showLastButton | bool | false | If `true`, show the last-page button. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 28b1d9ea88cdaa..0610af8c625c00 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -21,7 +21,7 @@ export interface PaginationProps */ defaultPage?: number; /** - * If `true`, all the pagination components will be disabled. + * If `true`, the pagination will be disabled. */ disabled?: boolean; /** @@ -59,9 +59,9 @@ export interface PaginationProps */ page?: number; /** - * Renders the item. + * The pagination item component to render. * - * @param {object} params The props to spread on a PaginationItem. + * @param {object} params The props to spread on the component. * @returns {ReactNode} */ renderItem?: (params: object) => React.ReactNode; diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 80f3acd17e54bd..b34b377080ea0f 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -116,7 +116,7 @@ Pagination.propTypes = { */ defaultPage: PropTypes.number, /** - * If `true`, all the pagination components will be disabled. + * If `true`, the pagination will be disabled. */ disabled: PropTypes.bool, /** @@ -150,9 +150,9 @@ Pagination.propTypes = { */ page: PropTypes.number, /** - * Renders the item. + * The pagination item component to render. * - * @param {object} params The props to spread on a PaginationItem. + * @param {object} params The props to spread on the component. * @returns {ReactNode} */ renderItem: PropTypes.func, From c851ff9f45fba1ef94c69408a30724ccf751e14c Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 2 Mar 2020 21:24:20 +0000 Subject: [PATCH 11/21] Remove children prop --- .../pages/components/pagination/pagination.md | 2 -- .../src/Pagination/Pagination.js | 30 ++++++++----------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index ff8a5892a08843..2d9f0d98d971da 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -41,8 +41,6 @@ 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"}} ## `usePagination` diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index b34b377080ea0f..e463445945ae9f 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -30,7 +30,6 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { /* eslint-disable no-unused-vars */ const { boundaryCount = 1, - children, classes, className, color = 'standard', @@ -63,19 +62,18 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { {...other} >

    - {children || - items.map((item, index) => ( -
  • - {renderItem({ - ...item, - color, - 'aria-label': getAriaLabel(item.type, item.page, item.selected), - shape, - size, - variant, - })} -
    • - ))} + {items.map((item, index) => ( +
  • + {renderItem({ + ...item, + color, + 'aria-label': getAriaLabel(item.type, item.page, item.selected), + shape, + size, + variant, + })} +
    • + ))}
); @@ -90,10 +88,6 @@ Pagination.propTypes = { * Number of always visible pages at the beginning and end. */ boundaryCount: PropTypes.number, - /** - * The content of the component. - */ - children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. From 770f5b999adbf09f94622f552f122504a894c74f Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 2 Mar 2020 21:26:25 +0000 Subject: [PATCH 12/21] yarn docs:api --- docs/pages/api/pagination.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index e11ec562155bd7..006d3d850dd3d1 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -25,7 +25,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | boundaryCount | number | 1 | Number of always visible pages at the beginning and end. | -| children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
| 'primary'
| 'secondary' | 'standard' | The active color. | | count | number | 1 | The total number of pages. | From 6f4b0c96120678406608a114e564df1aab52ce01 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Mon, 2 Mar 2020 23:54:46 +0100 Subject: [PATCH 13/21] Remove `children` prop from Pagination --- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 0610af8c625c00..3211168de5464e 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -3,7 +3,11 @@ import { StandardProps } from '@material-ui/core'; import { UsePaginationItem } from './usePagination'; export interface PaginationProps - extends StandardProps, PaginationClassKey, 'onChange'> { + extends StandardProps< + React.HTMLAttributes, + PaginationClassKey, + 'onChange' | 'children' + > { /** * Number of always visible pages at the beginning and end. */ From 3cf241e5c642a44b80bf3efb3e891d3443fd0434 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Tue, 3 Mar 2020 11:48:17 +0100 Subject: [PATCH 14/21] Change {} event type param to unknown --- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 3211168de5464e..9bc1bafc29b578 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -57,7 +57,7 @@ export interface PaginationProps * @param {object} event The event source of the callback. * @param {number} page The page selected. */ - onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + onChange?: (event: React.ChangeEvent, page: number) => void; /** * The current page. */ From 044c60c907fa9407c6c116ab222703f087d7b45c Mon Sep 17 00:00:00 2001 From: pvdstel Date: Tue, 3 Mar 2020 11:59:15 +0100 Subject: [PATCH 15/21] Correct the parameter type of getAriaItem --- docs/pages/api/pagination.md | 2 +- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 4 ++-- packages/material-ui-lab/src/Pagination/Pagination.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/pages/api/pagination.md b/docs/pages/api/pagination.md index 006d3d850dd3d1..69006fea709a62 100644 --- a/docs/pages/api/pagination.md +++ b/docs/pages/api/pagination.md @@ -30,7 +30,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | count | number | 1 | The total number of pages. | | defaultPage | number | 1 | The page selected by default when the component is uncontrolled. | | disabled | bool | false | If `true`, the pagination will be disabled. | -| getItemAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.
For localization purposes, you can use the provided [translations](/guides/localization/).

**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. | +| getItemAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the current page.
For localization purposes, you can use the provided [translations](/guides/localization/).

**Signature:**
`function(type: string, page: number, selected: bool) => string`
*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
*page:* The page number to format.
*selected:* If true, the current page is selected. | | hideNextButton | bool | false | If `true`, hide the next-page button. | | hidePrevButton | bool | false | 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. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 9bc1bafc29b578..a8551dbda2a678 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -33,13 +33,13 @@ export interface PaginationProps * * For localization purposes, you can use the provided [translations](/guides/localization/). * - * @param {string} [type = page] The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). + * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'. * @param {number} page The page number to format. * @param {bool} selected If true, the current page is selected. * @returns {string} */ getItemAriaLabel?: ( - type: UsePaginationItem['type'] | undefined, + type: 'page' | 'first' | 'last' | 'next' | 'previous', page: number, selected: boolean, ) => string; diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index e463445945ae9f..043b5d3237bf67 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -118,7 +118,7 @@ Pagination.propTypes = { * * For localization purposes, you can use the provided [translations](/guides/localization/). * - * @param {string} [type = page] The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). + * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'. * @param {number} page The page number to format. * @param {bool} selected If true, the current page is selected. * @returns {string} From 44a5e15645dfdf2af793632b49c2c84bf20babf5 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Wed, 4 Mar 2020 17:19:14 +0000 Subject: [PATCH 16/21] Revert "Remove `children` prop from Pagination" This reverts commit 6f4b0c96120678406608a114e564df1aab52ce01. --- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index a8551dbda2a678..6feaca84a568f5 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -3,11 +3,7 @@ import { StandardProps } from '@material-ui/core'; import { UsePaginationItem } from './usePagination'; export interface PaginationProps - extends StandardProps< - React.HTMLAttributes, - PaginationClassKey, - 'onChange' | 'children' - > { + extends StandardProps, PaginationClassKey, 'onChange'> { /** * Number of always visible pages at the beginning and end. */ From 0e9f1c732e694743c7f0c94e4d98a1a128f924c9 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Fri, 6 Mar 2020 11:29:42 +0100 Subject: [PATCH 17/21] Move Pagination documentation to usePagination Pagination now extends UsePagination; inherited props have been removed. --- .../src/Pagination/Pagination.d.ts | 52 ++----------------- .../src/Pagination/usePagination.d.ts | 41 ++++++++++++++- 2 files changed, 43 insertions(+), 50 deletions(-) diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 22f8206e3a36b9..69e64ba76fe309 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -1,29 +1,14 @@ import * as React from 'react'; import { StandardProps } from '@material-ui/core'; -import { UsePaginationItem } from './usePagination'; +import { UsePaginationItem, UsePaginationProps } from './usePagination'; export interface PaginationProps - extends StandardProps, PaginationClassKey, 'onChange'> { - /** - * Number of always visible pages at the beginning and end. - */ - boundaryCount?: number; + extends UsePaginationProps, + StandardProps, PaginationClassKey, 'children' | 'onChange'> { /** * The active color. */ color?: 'default' | 'primary' | 'secondary'; - /** - * The total number of pages. - */ - count?: number; - /** - * The page selected by default when the component is uncontrolled. - */ - defaultPage?: number; - /** - * If `true`, the pagination component will be disabled. - */ - disabled?: boolean; /** * Accepts a function which returns a string value that provides a user-friendly name for the current page. * @@ -39,25 +24,6 @@ export interface PaginationProps page: number, selected: boolean, ) => string; - /** - * If `true`, hide the next-page button. - */ - hideNextButton?: boolean; - /** - * If `true`, hide the previous-page button. - */ - hidePrevButton?: boolean; - /** - * Callback fired when the page is changed. - * - * @param {object} event The event source of the callback. - * @param {number} page The page selected. - */ - onChange?: (event: React.ChangeEvent, page: number) => void; - /** - * The current page. - */ - page?: number; /** * The pagination item component to render. * @@ -69,18 +35,6 @@ export interface PaginationProps * The shape of the pagination items. */ shape?: 'round' | 'rounded'; - /** - * If `true`, show the first-page button. - */ - showFirstButton?: boolean; - /** - * If `true`, show the last-page button. - */ - showLastButton?: boolean; - /** - * Number of always visible pages before and after the current page. - */ - siblingCount?: number; /** * The size of the pagination component. */ diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts index a2841ccf40d45a..d3f977b4b4130c 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/usePagination.d.ts @@ -1,17 +1,56 @@ import * as React from 'react'; export interface UsePaginationProps { + /** + * Number of always visible pages at the beginning and end. + */ boundaryCount?: number; + /** + * The name of the component where this hook is used. + */ componentName?: string; + /** + * The total number of pages. + */ count?: number; + /** + * The page selected by default when the component is uncontrolled. + */ defaultPage?: number; + /** + * If `true`, the pagination component will be disabled. + */ disabled?: boolean; + /** + * If `true`, hide the next-page button. + */ hideNextButton?: boolean; + /** + * If `true`, hide the previous-page button. + */ hidePrevButton?: boolean; - onChange?: (event: React.ChangeEvent<{}>, page: number) => void; + /** + * Callback fired when the page is changed. + * + * @param {object} event The event source of the callback. + * @param {number} page The page selected. + */ + onChange?: (event: React.ChangeEvent, page: number) => void; + /** + * The current page. + */ page?: number; + /** + * If `true`, show the first-page button. + */ showFirstButton?: boolean; + /** + * If `true`, show the last-page button. + */ showLastButton?: boolean; + /** + * Number of always visible pages before and after the current page. + */ siblingCount?: number; } From 83178f5237266294b71f2225a6217d3c643c8648 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Fri, 6 Mar 2020 11:32:03 +0100 Subject: [PATCH 18/21] Run proptypes + prettier + docs:api --- docs/pages/api-docs/pagination.md | 18 +++++++++--------- .../src/Pagination/Pagination.js | 10 +--------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md index ad0f681853f6c8..92c55560f85f3e 100644 --- a/docs/pages/api-docs/pagination.md +++ b/docs/pages/api-docs/pagination.md @@ -24,22 +24,22 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| boundaryCount | number | 1 | Number of always visible pages at the beginning and end. | +| boundaryCount | number | | Number of always visible pages at the beginning and end. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
| 'primary'
| 'secondary' | 'standard' | The active color. | -| count | number | 1 | The total number of pages. | -| defaultPage | number | 1 | The page selected by default when the component is uncontrolled. | -| disabled | bool | false | If `true`, the pagination component will be disabled. | +| count | number | | The total number of pages. | +| defaultPage | number | | The page selected by default when the component is uncontrolled. | +| disabled | bool | | If `true`, 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.
For localization purposes, you can use the provided [translations](/guides/localization/).

**Signature:**
`function(type: string, page: number, selected: bool) => string`
*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
*page:* The page number to format.
*selected:* If true, the current page is selected. | -| hideNextButton | bool | false | If `true`, hide the next-page button. | -| hidePrevButton | bool | false | If `true`, hide the previous-page button. | +| 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 | | The current page. | | renderItem | func | item => <PaginationItem {...item} /> | The pagination item component to render.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on the component. | | shape | 'round'
| 'rounded' | 'round' | The shape of the pagination items. | -| showFirstButton | bool | false | If `true`, show the first-page button. | -| showLastButton | bool | false | If `true`, show the last-page button. | -| siblingCount | number | 1 | Number of always visible pages before and after the current page. | +| showFirstButton | bool | | If `true`, show the first-page button. | +| showLastButton | bool | | If `true`, show the last-page button. | +| siblingCount | number | | Number of always visible pages before and after the current page. | | size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the pagination component. | | variant | 'outlined'
| 'text' | 'text' | The variant to use. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 93cd0190713067..a27ca08cfc2aae 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -78,6 +78,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { }); // @default tags synced with default values from usePagination + Pagination.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | @@ -85,7 +86,6 @@ Pagination.propTypes = { // ---------------------------------------------------------------------- /** * Number of always visible pages at the beginning and end. - * @default 1 */ boundaryCount: PropTypes.number, /** @@ -103,17 +103,14 @@ Pagination.propTypes = { color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** * The total number of pages. - * @default 1 */ count: PropTypes.number, /** * The page selected by default when the component is uncontrolled. - * @default 1 */ defaultPage: PropTypes.number, /** * If `true`, the pagination component will be disabled. - * @default false */ disabled: PropTypes.bool, /** @@ -129,12 +126,10 @@ Pagination.propTypes = { getItemAriaLabel: PropTypes.func, /** * If `true`, hide the next-page button. - * @default false */ hideNextButton: PropTypes.bool, /** * If `true`, hide the previous-page button. - * @default false */ hidePrevButton: PropTypes.bool, /** @@ -161,17 +156,14 @@ Pagination.propTypes = { shape: PropTypes.oneOf(['round', 'rounded']), /** * If `true`, show the first-page button. - * @default false */ showFirstButton: PropTypes.bool, /** * If `true`, show the last-page button. - * @default false */ showLastButton: PropTypes.bool, /** * Number of always visible pages before and after the current page. - * @default 1 */ siblingCount: PropTypes.number, /** From f19cbe388a4843e242077bb8da92aa82c76f1236 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Fri, 6 Mar 2020 12:11:26 +0100 Subject: [PATCH 19/21] Add @default tags to usePagination typings --- docs/pages/api-docs/pagination.md | 18 +++++++++--------- .../src/Pagination/Pagination.js | 9 +++++++++ .../src/Pagination/usePagination.d.ts | 9 +++++++++ 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md index 92c55560f85f3e..ad0f681853f6c8 100644 --- a/docs/pages/api-docs/pagination.md +++ b/docs/pages/api-docs/pagination.md @@ -24,22 +24,22 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| boundaryCount | number | | Number of always visible pages at the beginning and end. | +| boundaryCount | number | 1 | Number of always visible pages at the beginning and end. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'default'
| 'primary'
| 'secondary' | 'standard' | The active color. | -| count | number | | The total number of pages. | -| defaultPage | number | | The page selected by default when the component is uncontrolled. | -| disabled | bool | | If `true`, the pagination component will be disabled. | +| count | number | 1 | The total number of pages. | +| defaultPage | number | 1 | The page selected by default when the component is uncontrolled. | +| disabled | bool | false | If `true`, 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.
For localization purposes, you can use the provided [translations](/guides/localization/).

**Signature:**
`function(type: string, page: number, selected: bool) => string`
*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
*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. | +| hideNextButton | bool | false | If `true`, hide the next-page button. | +| hidePrevButton | bool | false | 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 | | The current page. | | renderItem | func | item => <PaginationItem {...item} /> | The pagination item component to render.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on the component. | | shape | 'round'
| 'rounded' | 'round' | The shape of the pagination items. | -| showFirstButton | bool | | If `true`, show the first-page button. | -| showLastButton | bool | | If `true`, show the last-page button. | -| siblingCount | number | | Number of always visible pages before and after the current page. | +| showFirstButton | bool | false | If `true`, show the first-page button. | +| showLastButton | bool | false | If `true`, show the last-page button. | +| siblingCount | number | 1 | Number of always visible pages before and after the current page. | | size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the pagination component. | | variant | 'outlined'
| 'text' | 'text' | The variant to use. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index a27ca08cfc2aae..0241db20fae0f4 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -86,6 +86,7 @@ Pagination.propTypes = { // ---------------------------------------------------------------------- /** * Number of always visible pages at the beginning and end. + * @default 1 */ boundaryCount: PropTypes.number, /** @@ -103,14 +104,17 @@ Pagination.propTypes = { color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** * The total number of pages. + * @default 1 */ count: PropTypes.number, /** * The page selected by default when the component is uncontrolled. + * @default 1 */ defaultPage: PropTypes.number, /** * If `true`, the pagination component will be disabled. + * @default false */ disabled: PropTypes.bool, /** @@ -126,10 +130,12 @@ Pagination.propTypes = { getItemAriaLabel: PropTypes.func, /** * If `true`, hide the next-page button. + * @default false */ hideNextButton: PropTypes.bool, /** * If `true`, hide the previous-page button. + * @default false */ hidePrevButton: PropTypes.bool, /** @@ -156,14 +162,17 @@ Pagination.propTypes = { shape: PropTypes.oneOf(['round', 'rounded']), /** * If `true`, show the first-page button. + * @default false */ showFirstButton: PropTypes.bool, /** * If `true`, show the last-page button. + * @default false */ showLastButton: PropTypes.bool, /** * Number of always visible pages before and after the current page. + * @default 1 */ siblingCount: PropTypes.number, /** diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts index d3f977b4b4130c..79f161c307a816 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/usePagination.d.ts @@ -3,6 +3,7 @@ import * as React from 'react'; export interface UsePaginationProps { /** * Number of always visible pages at the beginning and end. + * @default 1 */ boundaryCount?: number; /** @@ -11,22 +12,27 @@ export interface UsePaginationProps { componentName?: string; /** * The total number of pages. + * @default 1 */ count?: number; /** * The page selected by default when the component is uncontrolled. + * @default 1 */ defaultPage?: number; /** * If `true`, the pagination component will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, hide the next-page button. + * @default false */ hideNextButton?: boolean; /** * If `true`, hide the previous-page button. + * @default false */ hidePrevButton?: boolean; /** @@ -42,14 +48,17 @@ export interface UsePaginationProps { page?: number; /** * If `true`, show the first-page button. + * @default false */ showFirstButton?: boolean; /** * If `true`, show the last-page button. + * @default false */ showLastButton?: boolean; /** * Number of always visible pages before and after the current page. + * @default 1 */ siblingCount?: number; } From 215f51cdfb97b807e8f01039ef4f3a7165322442 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Fri, 6 Mar 2020 13:01:01 +0100 Subject: [PATCH 20/21] Fix usePagination return type --- packages/material-ui-lab/src/Pagination/usePagination.d.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts index 79f161c307a816..b0b2d533b6f481 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/usePagination.d.ts @@ -71,4 +71,8 @@ export interface UsePaginationItem { disabled: boolean; } -export default function usePagination(props: UsePaginationProps): UsePaginationItem[]; +export interface UsePaginationResult { + items: UsePaginationItem[]; +} + +export default function usePagination(props: UsePaginationProps): UsePaginationResult; From 4ef9beae52ea882d505a4bd97928119a51092af1 Mon Sep 17 00:00:00 2001 From: pvdstel Date: Fri, 6 Mar 2020 13:06:54 +0100 Subject: [PATCH 21/21] Undo prop description change --- docs/pages/api-docs/pagination.md | 2 +- packages/material-ui-lab/src/Pagination/Pagination.d.ts | 4 ++-- packages/material-ui-lab/src/Pagination/Pagination.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md index ad0f681853f6c8..5a6e79c80e2fe9 100644 --- a/docs/pages/api-docs/pagination.md +++ b/docs/pages/api-docs/pagination.md @@ -35,7 +35,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | hidePrevButton | bool | false | 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 | | The current page. | -| renderItem | func | item => <PaginationItem {...item} /> | The pagination item component to render.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on the component. | +| renderItem | func | item => <PaginationItem {...item} /> | Render the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on a PaginationItem. | | shape | 'round'
| 'rounded' | 'round' | The shape of the pagination items. | | showFirstButton | bool | false | If `true`, show the first-page button. | | showLastButton | bool | false | If `true`, show the last-page button. | diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 69e64ba76fe309..489551f642a95c 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -25,9 +25,9 @@ export interface PaginationProps selected: boolean, ) => string; /** - * The pagination item component to render. + * Render the item. * - * @param {object} params The props to spread on the component. + * @param {object} params The props to spread on a PaginationItem. * @returns {ReactNode} */ renderItem?: (params: object) => React.ReactNode; diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 0241db20fae0f4..e71712ac0fb132 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -150,9 +150,9 @@ Pagination.propTypes = { */ page: PropTypes.number, /** - * The pagination item component to render. + * Render the item. * - * @param {object} params The props to spread on the component. + * @param {object} params The props to spread on a PaginationItem. * @returns {ReactNode} */ renderItem: PropTypes.func,