diff --git a/types/react-ultimate-pagination/index.d.ts b/types/react-ultimate-pagination/index.d.ts index 8e2c917d75..cb7b83e4c0 100644 --- a/types/react-ultimate-pagination/index.d.ts +++ b/types/react-ultimate-pagination/index.d.ts @@ -27,36 +27,45 @@ export interface PaginationComponentProps { onClick: () => void; } +export enum ITEM_TYPES { + PAGE = "PAGE", + ELLIPSIS = "ELLIPSIS", + FIRST_PAGE_LINK = "FIRST_PAGE_LINK", + PREVIOUS_PAGE_LINK = "PREVIOUS_PAGE_LINK", + NEXT_PAGE_LINK = "NEXT_PAGE_LINK", + LAST_PAGE_LINK = "LAST_PAGE_LINK", +} + export interface ItemTypeToComponent { /** * A link to a page */ - PAGE: React.ComponentType, + PAGE: React.ComponentType; /** * An item that represents groups of pages that currently are not visible in paginator (can be used to navigate to the page in the group that is the nearest to the current page) */ - ELLIPSIS: React.ComponentType, + ELLIPSIS: React.ComponentType; /** * A link to the first page */ - FIRST_PAGE_LINK: React.ComponentType, + FIRST_PAGE_LINK: React.ComponentType; /** * A link to the previous page */ - PREVIOUS_PAGE_LINK: React.ComponentType, + PREVIOUS_PAGE_LINK: React.ComponentType; /** * A link to the next page */ - NEXT_PAGE_LINK: React.ComponentType, + NEXT_PAGE_LINK: React.ComponentType; /** * A link to the last page */ - LAST_PAGE_LINK: React.ComponentType, + LAST_PAGE_LINK: React.ComponentType; } export interface CreateUltimatePaginationOptions { @@ -66,9 +75,9 @@ export interface CreateUltimatePaginationOptions { itemTypeToComponent: ItemTypeToComponent; /** - * A React.js component that will be used as a wrapper for pagination items + * A React.js component that will be used as a wrapper for pagination items */ - WrapperComponent: string|React.ComponentType; + WrapperComponent?: string|React.ComponentType; } export interface UltimatePaginationProps { @@ -108,7 +117,7 @@ export interface UltimatePaginationProps { hideFirstAndLastPageLinks?: boolean; /** - * Callback that will be called with new page when it should be changed by user interaction + * Callback that will be called with new page when it should be changed by user interaction */ onChange?: (newPage: number) => void; diff --git a/types/react-ultimate-pagination/react-ultimate-pagination-tests.tsx b/types/react-ultimate-pagination/react-ultimate-pagination-tests.tsx index 8116f5e42b..8cebdcbf52 100644 --- a/types/react-ultimate-pagination/react-ultimate-pagination-tests.tsx +++ b/types/react-ultimate-pagination/react-ultimate-pagination-tests.tsx @@ -2,7 +2,8 @@ import * as React from "react"; import { PaginationComponentProps, createUltimatePagination, - ItemTypeToComponent + ItemTypeToComponent, + ITEM_TYPES } from "react-ultimate-pagination"; function Page(props: PaginationComponentProps) { @@ -15,6 +16,12 @@ function Page(props: PaginationComponentProps) { ); } +function PageWithExtraProps(props: PaginationComponentProps & { color: "red" }) { + return ( + + ); +} + function Ellipsis(props: PaginationComponentProps) { return ; } @@ -39,6 +46,7 @@ function Wrapper(props: { children: React.ReactChildren }) { return
{props.children}
; } +// ItemTypeToComponent using strings const itemTypeToComponent: ItemTypeToComponent = { PAGE: Page, ELLIPSIS: Ellipsis, @@ -48,6 +56,38 @@ const itemTypeToComponent: ItemTypeToComponent = { LAST_PAGE_LINK: LastPageLink }; -const UltimatePagination = createUltimatePagination({ itemTypeToComponent, WrapperComponent: Wrapper }); // $ExpectType React.ComponentType +// ItemTypeToComponent using enum +const itemTypeToComponent2: ItemTypeToComponent = { + [ITEM_TYPES.PAGE]: Page, + [ITEM_TYPES.ELLIPSIS]: Ellipsis, + [ITEM_TYPES.FIRST_PAGE_LINK]: FirstPageLink, + [ITEM_TYPES.PREVIOUS_PAGE_LINK]: PreviousPageLink, + [ITEM_TYPES.NEXT_PAGE_LINK]: NextPageLink, + [ITEM_TYPES.LAST_PAGE_LINK]: LastPageLink +}; +// ItemTypeToComponent using Page with extra props +const itemTypeToComponent3: Partial = { + [ITEM_TYPES.PAGE]: PageWithExtraProps, +}; + +const UltimatePagination = createUltimatePagination({ itemTypeToComponent, WrapperComponent: Wrapper }); // $ExpectType ComponentType + +// With required props ; + +// With all props + {}} + siblingPagesRange={99} +/>; + +// With unspported prop +; // $ExpectError diff --git a/types/react-ultimate-pagination/tsconfig.json b/types/react-ultimate-pagination/tsconfig.json index b16cb5d3d0..748045849b 100644 --- a/types/react-ultimate-pagination/tsconfig.json +++ b/types/react-ultimate-pagination/tsconfig.json @@ -8,6 +8,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": false, "baseUrl": "../", "typeRoots": [ "../"