From 96a7b9f451d5b02cc525d53aad46d1ae28dd2a45 Mon Sep 17 00:00:00 2001
From: Ben <benlorantfy@gmail.com>
Date: Sat, 26 Jan 2019 16:08:45 -0500
Subject: [PATCH] add ITEM_TYPES and misc

---
 types/react-ultimate-pagination/index.d.ts    | 27 ++++++++----
 .../react-ultimate-pagination-tests.tsx       | 44 ++++++++++++++++++-
 types/react-ultimate-pagination/tsconfig.json |  1 +
 3 files changed, 61 insertions(+), 11 deletions(-)

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<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;
 
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 (
+    <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
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": [
             "../"