-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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] Add TypeScript types #19933
Merged
Merged
Changes from 10 commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
f8bcc01
Add types for Pagination
pvdstel 49c5d2b
Add types for PaginationItem
pvdstel 4ca64c9
Add types for usePagination
pvdstel dfba109
Use UsePaginationItem types in other definitions
pvdstel 1184e87
Run prettier
pvdstel de59081
Add tsdoc comments to Pagination types
pvdstel 1cb8f7a
Add tsdoc to PaginationItem types
pvdstel 8d6d30f
Update docs for pagination
pvdstel 61e1e30
Do not pass page and onChange to items
pvdstel a241b0f
Change prop descriptions to review suggestions
pvdstel c851ff9
Remove children prop
mbrookes 770f5b9
yarn docs:api
mbrookes 6f4b0c9
Remove `children` prop from Pagination
pvdstel 3cf241e
Change {} event type param to unknown
pvdstel 044c60c
Correct the parameter type of getAriaItem
pvdstel 44a5e15
Revert "Remove `children` prop from Pagination"
mbrookes 55aad9c
Merge branch 'master' into HEAD
mbrookes 0e9f1c7
Move Pagination documentation to usePagination
pvdstel 83178f5
Run proptypes + prettier + docs:api
pvdstel f19cbe3
Add @default tags to usePagination typings
pvdstel 215f51c
Fix usePagination return type
pvdstel 4ef9bea
Undo prop description change
pvdstel File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,96 @@ | ||
| declare const Pagination: any; | ||
| export default Pagination; | ||
| import * as React from 'react'; | ||
| import { StandardProps } from '@material-ui/core'; | ||
| import { UsePaginationItem } from './usePagination'; | ||
|
|
||
| export interface PaginationProps | ||
| extends StandardProps<React.HTMLAttributes<HTMLElement>, 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`, the pagination 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; | ||
pvdstel marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /** | ||
| * The current page. | ||
| */ | ||
| page?: number; | ||
| /** | ||
| * The pagination item component to render. | ||
| * | ||
| * @param {object} params The props to spread on the component. | ||
| * @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'; | ||
| } | ||
|
|
||
| export type PaginationClassKey = 'root' | 'ul'; | ||
|
|
||
| export default function Pagination(props: PaginationProps): JSX.Element; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 26 additions & 2 deletions
28
packages/material-ui-lab/src/Pagination/usePagination.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,26 @@ | ||
| declare const usePagination: any; | ||
| export default usePagination; | ||
| import * as React from 'react'; | ||
|
|
||
| export interface UsePaginationProps { | ||
merceyz marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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[]; | ||
68 changes: 67 additions & 1 deletion
68
packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,68 @@ | ||
| declare const PaginationItem: any; | ||
| import * as React from 'react'; | ||
| import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent'; | ||
| import { UsePaginationItem } from '../Pagination/usePagination'; | ||
|
|
||
| export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'div'> { | ||
| 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; | ||
| classKey: PaginationItemClassKey; | ||
| } | ||
|
|
||
| declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>; | ||
|
|
||
| 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<PaginationItemTypeMap<P, D>, D>; | ||
|
|
||
| export default PaginationItem; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you remove the types in the jsdoc? They duplicate the TS types and conflict in this case. It's also not clear when
typecan beundefinedwhile also having a default value.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, I thought that syntax somehow implied an optional argument. Will fix it in a sec.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can't remove the types from the jsdoc here. These docs are copied to the JS component by
yarn proptypes --disable-cache, and then theyarn docs:apicommand will fail because there is no type annotation.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I looked into adding support for this upstream, the parsing of basic types is complete but I stopped after a limited search for a
JSDoc -> AST -> JSDoclib failed.