add ITEM_TYPES and misc

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<PaginationComponentProps>,
+    PAGE: React.ComponentType<PaginationComponentProps>;
 
     /**
      * 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<PaginationComponentProps>,
+    ELLIPSIS: React.ComponentType<PaginationComponentProps>;
 
     /**
      * A link to the first page
      */
-    FIRST_PAGE_LINK: React.ComponentType<PaginationComponentProps>,
+    FIRST_PAGE_LINK: React.ComponentType<PaginationComponentProps>;
 
     /**
      * A link to the previous page
      */
-    PREVIOUS_PAGE_LINK: React.ComponentType<PaginationComponentProps>,
+    PREVIOUS_PAGE_LINK: React.ComponentType<PaginationComponentProps>;
 
     /**
      * A link to the next page
      */
-    NEXT_PAGE_LINK: React.ComponentType<PaginationComponentProps>,
+    NEXT_PAGE_LINK: React.ComponentType<PaginationComponentProps>;
 
     /**
      * A link to the last page
      */
-    LAST_PAGE_LINK: React.ComponentType<PaginationComponentProps>,
+    LAST_PAGE_LINK: React.ComponentType<PaginationComponentProps>;
 }
 
 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;
 

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 (
+    <button style={{ color: props.color }}>5</button>
+  );
+}
+
 function Ellipsis(props: PaginationComponentProps) {
   return <button onClick={props.onClick} disabled={props.isDisabled}>...</button>;
 }
@@ -39,6 +46,7 @@ function Wrapper(props: { children: React.ReactChildren }) {
   return <div>{props.children}</div>;
 }
 
+// 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<UltimatePaginationProps>
+// 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<ItemTypeToComponent> = {
+  [ITEM_TYPES.PAGE]: PageWithExtraProps,
+};
+
+const UltimatePagination = createUltimatePagination({ itemTypeToComponent, WrapperComponent: Wrapper }); // $ExpectType ComponentType<UltimatePaginationProps>
+
+// With required props
 <UltimatePagination currentPage={0} totalPages={5} />;
+
+// With all props
+<UltimatePagination
+  currentPage={0}
+  totalPages={5}
+  boundaryPagesRange={1}
+  disabled={false}
+  hideEllipsis={false}
+  hideFirstAndLastPageLinks={false}
+  hidePreviousAndNextPageLinks={false}
+  onChange={() => {}}
+  siblingPagesRange={99}
+/>;
+
+// With unspported prop
+<UltimatePagination color="red"/>; // $ExpectError

types/react-ultimate-pagination/tsconfig.json

@@ -8,6 +8,7 @@
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
+        "strictFunctionTypes": false,
         "baseUrl": "../",
         "typeRoots": [
             "../"