forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Pagination] Add TypeScript types (mui#19933)
- Loading branch information
1 parent
273cba9
commit 9ca0568
Showing
5 changed files
with
209 additions
and
14 deletions.
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,50 @@ | ||
| declare const Pagination: any; | ||
| export default Pagination; | ||
| import * as React from 'react'; | ||
| import { StandardProps } from '@material-ui/core'; | ||
| import { UsePaginationItem, UsePaginationProps } from './usePagination'; | ||
|
|
||
| export interface PaginationProps | ||
| extends UsePaginationProps, | ||
| StandardProps<React.HTMLAttributes<HTMLElement>, PaginationClassKey, 'children' | 'onChange'> { | ||
| /** | ||
| * The active color. | ||
| */ | ||
| color?: 'default' | 'primary' | 'secondary'; | ||
| /** | ||
| * 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 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: 'page' | 'first' | 'last' | 'next' | 'previous', | ||
| page: number, | ||
| selected: boolean, | ||
| ) => string; | ||
| /** | ||
| * Render 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'; | ||
| /** | ||
| * 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
80 changes: 78 additions & 2 deletions
80
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,78 @@ | ||
| declare const usePagination: any; | ||
| export default usePagination; | ||
| import * as React from 'react'; | ||
|
|
||
| export interface UsePaginationProps { | ||
| /** | ||
| * Number of always visible pages at the beginning and end. | ||
| * @default 1 | ||
| */ | ||
| boundaryCount?: number; | ||
| /** | ||
| * The name of the component where this hook is used. | ||
| */ | ||
| 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; | ||
| /** | ||
| * 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<unknown>, page: number) => void; | ||
| /** | ||
| * The current page. | ||
| */ | ||
| 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; | ||
| } | ||
|
|
||
| export interface UsePaginationItem { | ||
| onClick: React.ReactEventHandler; | ||
| type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'; | ||
| page: number; | ||
| selected: boolean; | ||
| disabled: boolean; | ||
| } | ||
|
|
||
| export interface UsePaginationResult { | ||
| items: UsePaginationItem[]; | ||
| } | ||
|
|
||
| export default function usePagination(props: UsePaginationProps): UsePaginationResult; |
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; |