From c96d70aa352df05bb02c3f05dceed551cceac575 Mon Sep 17 00:00:00 2001 From: Peter Glas Date: Tue, 14 Mar 2017 14:25:09 +0100 Subject: [PATCH 1/6] Added tslint.json --- react-paginate/tslint.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 react-paginate/tslint.json diff --git a/react-paginate/tslint.json b/react-paginate/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/react-paginate/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" } From 2468af34fbd34d53a1caa6d5dfcb419621414e24 Mon Sep 17 00:00:00 2001 From: Peter Glas Date: Thu, 16 Mar 2017 13:37:11 +0100 Subject: [PATCH 2/6] Added typings for latest version 4.2.0 --- react-paginate/index.d.ts | 46 +++++++++++++++---------- react-paginate/react-paginate-tests.tsx | 25 +++++++++++++- 2 files changed, 52 insertions(+), 19 deletions(-) diff --git a/react-paginate/index.d.ts b/react-paginate/index.d.ts index aaa3931b74..4e0d447193 100644 --- a/react-paginate/index.d.ts +++ b/react-paginate/index.d.ts @@ -1,6 +1,6 @@ -// Type definitions for react-paginate 2.1.3 +// Type definitions for react-paginate 4.2.0 // Project: https://github.com/AdeleD/react-paginate -// Definitions by: Simon Hartcher +// Definitions by: pegel03 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 @@ -10,7 +10,7 @@ interface ReactPaginateProps { /** * The total number of pages. */ - pageNum: number; + pageCount: number; /** * The range of pages displayed. @@ -23,12 +23,12 @@ interface ReactPaginateProps { marginPagesDisplayed: number; /** - * Label for the `previous` button. + * Label for the previous button. */ previousLabel?: string | JSX.Element; /** - * Label for the `next` button. + * Label for the next button. */ nextLabel?: string | JSX.Element; @@ -38,24 +38,29 @@ interface ReactPaginateProps { breakLabel?: string | JSX.Element; /** - * The classname on tag `li` of the ellipsis element. + * The classname on tag li of the ellipsis element. */ - breakClassName?: string | JSX.Element; + breakClassName?: string; /** - * The method to call when a page is clicked. + * The method to call when a page is clicked. Exposes the current page object as an argument. */ - clickCallback?: Function; + onPageChange?: Function; /** * The initial page selected. */ - initialSelected?: number; + initialPage?: number; /** * To override selected page with parent prop. */ - forceSelected?: number; + forcePage?: number; + + /** + * Disable onPageChange callback with initial page. Default: false + */ + disableInitialCallback?: boolean; /** * The classname of the pagination container. @@ -63,12 +68,12 @@ interface ReactPaginateProps { containerClassName?: string; /** - * The classname on tag `li` of each page element. + * The classname on tag li of each page element. */ pageClassName?: string; /** - * The classname on tag `a` of each page element. + * The classname on tag a of each page element. */ pageLinkClassName?: string; @@ -78,29 +83,34 @@ interface ReactPaginateProps { activeClassName?: string; /** - * The classname on tag `li` of the `previous` button. + * The classname on tag li of the previous button. */ previousClassName?: string; /** - * The classname on tag `li` of the `next` button. + * The classname on tag li of the next button. */ nextClassName?: string; /** - * The classname on tag `a` of the `previous` button. + * The classname on tag a of the previous button. */ previousLinkClassName?: string; /** - * The classname on tag `a` of the `next` button. + * The classname on tag a of the next button. */ nextLinkClassName?: string; /** - * The classname for disabled `previous` and `next` buttons. + * The classname for disabled previous and next buttons. */ disabledClassName?: string; + + /** + * The method is called to generate the href attribute value on tag a of each page element. + */ + hrefBuilder?: Function; } declare const ReactPaginate: React.ComponentClass; diff --git a/react-paginate/react-paginate-tests.tsx b/react-paginate/react-paginate-tests.tsx index 2ae495eacf..ee14a5dc4b 100644 --- a/react-paginate/react-paginate-tests.tsx +++ b/react-paginate/react-paginate-tests.tsx @@ -2,12 +2,35 @@ import * as React from "react"; import ReactPaginate = require("react-paginate"); class Test extends React.Component<{}, {}> { + + private onClick(obj: any): void { + // + } + public render() { return ( this.onClick(nr)} + initialPage={2} + forcePage={3} + disableInitialCallback={false} + containerClassName={'container'} + pageClassName={'page-li'} + pageLinkClassName={'page-a'} + activeClassName={'active'} + previousClassName={'previous-li'} + nextClassName={'next-li'} + previousLinkClassName={'previous-a'} + nextLinkClassName={'next-a'} + disabledClassName={'disabled'} + hrefBuilder={(a: string) => this.onClick(a)} /> ); } From d3f4493ae05fe11d79d20352363d515197c46918 Mon Sep 17 00:00:00 2001 From: Peter Glas Date: Thu, 16 Mar 2017 15:45:43 +0100 Subject: [PATCH 3/6] Readded JSX.Element for breakClassName and set default tsconfig values --- react-paginate/index.d.ts | 2 +- react-paginate/tsconfig.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/react-paginate/index.d.ts b/react-paginate/index.d.ts index 4e0d447193..5c9e22ae67 100644 --- a/react-paginate/index.d.ts +++ b/react-paginate/index.d.ts @@ -40,7 +40,7 @@ interface ReactPaginateProps { /** * The classname on tag li of the ellipsis element. */ - breakClassName?: string; + breakClassName?: string | JSX.Element; /** * The method to call when a page is clicked. Exposes the current page object as an argument. diff --git a/react-paginate/tsconfig.json b/react-paginate/tsconfig.json index c7215760aa..3d4b5809a6 100644 --- a/react-paginate/tsconfig.json +++ b/react-paginate/tsconfig.json @@ -11,7 +11,7 @@ ], "noImplicitAny": true, "noImplicitThis": true, - "strictNullChecks": false, + "strictNullChecks": true, "baseUrl": "../", "typeRoots": [ "../" @@ -21,4 +21,4 @@ "forceConsistentCasingInFileNames": true, "jsx": "react" } -} \ No newline at end of file +} From 0d666c4fd28648061d18494969e0fbe195bd233b Mon Sep 17 00:00:00 2001 From: Peter Glas Date: Thu, 16 Mar 2017 16:25:10 +0100 Subject: [PATCH 4/6] Avoided Function type, ditched minor patch version. Using implicit public for render function --- react-paginate/index.d.ts | 6 +++--- react-paginate/react-paginate-tests.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/react-paginate/index.d.ts b/react-paginate/index.d.ts index 5c9e22ae67..d85dd65db5 100644 --- a/react-paginate/index.d.ts +++ b/react-paginate/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-paginate 4.2.0 +// Type definitions for react-paginate 4.2 // Project: https://github.com/AdeleD/react-paginate // Definitions by: pegel03 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -45,7 +45,7 @@ interface ReactPaginateProps { /** * The method to call when a page is clicked. Exposes the current page object as an argument. */ - onPageChange?: Function; + onPageChange?: (n: number) => void; /** * The initial page selected. @@ -110,7 +110,7 @@ interface ReactPaginateProps { /** * The method is called to generate the href attribute value on tag a of each page element. */ - hrefBuilder?: Function; + hrefBuilder?: (a: string) => void; } declare const ReactPaginate: React.ComponentClass; diff --git a/react-paginate/react-paginate-tests.tsx b/react-paginate/react-paginate-tests.tsx index ee14a5dc4b..aeaffa85a4 100644 --- a/react-paginate/react-paginate-tests.tsx +++ b/react-paginate/react-paginate-tests.tsx @@ -7,7 +7,7 @@ class Test extends React.Component<{}, {}> { // } - public render() { + render() { return ( Date: Thu, 23 Mar 2017 15:29:48 +0100 Subject: [PATCH 5/6] Added linting. Using Function type for function. Again ditched minor patch version... --- react-paginate/index.d.ts | 28 ++++++++++++------------- react-paginate/react-paginate-tests.tsx | 8 +++---- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/react-paginate/index.d.ts b/react-paginate/index.d.ts index 7a9043a035..256f33be58 100644 --- a/react-paginate/index.d.ts +++ b/react-paginate/index.d.ts @@ -1,10 +1,10 @@ -// Type definitions for react-paginate v4.2.0 +// Type definitions for react-paginate v4.2 // Project: https://github.com/AdeleD/react-paginate // Definitions by: Simon Hartcher , Wouter Hardeman , pegel03 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 -import * as React from "react"; +import * as React from 'react'; interface ReactPaginateProps { /** @@ -23,12 +23,12 @@ interface ReactPaginateProps { marginPagesDisplayed: number; /** - * Label for the previous button. + * Label for the `previous` button. */ previousLabel?: string | JSX.Element; /** - * Label for the next button. + * Label for the `next` button. */ nextLabel?: string | JSX.Element; @@ -38,14 +38,14 @@ interface ReactPaginateProps { breakLabel?: string | JSX.Element; /** - * The classname on tag li of the ellipsis element. + * The classname on tag `li` of the ellipsis element. */ breakClassName?: string | JSX.Element; /** * The method to call when a page is clicked. Exposes the current page object as an argument. */ - onPageChange?: (n: number) => void; + onPageChange?: Function; /** * The initial page selected. @@ -68,12 +68,12 @@ interface ReactPaginateProps { containerClassName?: string; /** - * The classname on tag li of each page element. + * The classname on tag `li` of each page element. */ pageClassName?: string; /** - * The classname on tag a of each page element. + * The classname on tag `a` of each page element. */ pageLinkClassName?: string; @@ -83,34 +83,34 @@ interface ReactPaginateProps { activeClassName?: string; /** - * The classname on tag li of the previous button. + * The classname on tag `li` of the `previous` button. */ previousClassName?: string; /** - * The classname on tag li of the next button. + * The classname on tag `li` of the `next` button. */ nextClassName?: string; /** - * The classname on tag a of the previous button. + * The classname on tag `a` of the `previous` button. */ previousLinkClassName?: string; /** - * The classname on tag a of the next button. + * The classname on tag `a` of the `next` button. */ nextLinkClassName?: string; /** - * The classname for disabled previous and next buttons. + * The classname for disabled `previous` and `next` buttons. */ disabledClassName?: string; /** * The method is called to generate the href attribute value on tag a of each page element. */ - hrefBuilder?: (a: string) => void; + hrefBuilder?: Function; } declare const ReactPaginate: React.ComponentClass; diff --git a/react-paginate/react-paginate-tests.tsx b/react-paginate/react-paginate-tests.tsx index aeaffa85a4..9919327c5e 100644 --- a/react-paginate/react-paginate-tests.tsx +++ b/react-paginate/react-paginate-tests.tsx @@ -3,9 +3,7 @@ import ReactPaginate = require("react-paginate"); class Test extends React.Component<{}, {}> { - private onClick(obj: any): void { - // - } + public onClick: Function; render() { return ( @@ -17,7 +15,7 @@ class Test extends React.Component<{}, {}> { nextLabel={'next'} breakLabel={'break-me'} breakClassName={'break-class'} - onPageChange={(nr: number) => this.onClick(nr)} + onPageChange={this.onClick} initialPage={2} forcePage={3} disableInitialCallback={false} @@ -30,7 +28,7 @@ class Test extends React.Component<{}, {}> { previousLinkClassName={'previous-a'} nextLinkClassName={'next-a'} disabledClassName={'disabled'} - hrefBuilder={(a: string) => this.onClick(a)} + hrefBuilder={this.onClick} /> ); } From 79725c759902bcbf5647441b072c33e994326f6e Mon Sep 17 00:00:00 2001 From: Peter Glas Date: Thu, 23 Mar 2017 16:14:34 +0100 Subject: [PATCH 6/6] Trying to avoid forbidden-type Function --- react-paginate/index.d.ts | 6 +++--- react-paginate/react-paginate-tests.tsx | 6 ++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/react-paginate/index.d.ts b/react-paginate/index.d.ts index 256f33be58..18636a8f6f 100644 --- a/react-paginate/index.d.ts +++ b/react-paginate/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-paginate v4.2 +// Type definitions for react-paginate 4.2 // Project: https://github.com/AdeleD/react-paginate // Definitions by: Simon Hartcher , Wouter Hardeman , pegel03 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -45,7 +45,7 @@ interface ReactPaginateProps { /** * The method to call when a page is clicked. Exposes the current page object as an argument. */ - onPageChange?: Function; + onPageChange?: (selectedItem: {selected: number}) => void; /** * The initial page selected. @@ -110,7 +110,7 @@ interface ReactPaginateProps { /** * The method is called to generate the href attribute value on tag a of each page element. */ - hrefBuilder?: Function; + hrefBuilder?: (pageIndex: number) => void; } declare const ReactPaginate: React.ComponentClass; diff --git a/react-paginate/react-paginate-tests.tsx b/react-paginate/react-paginate-tests.tsx index 9919327c5e..5f8f8f1994 100644 --- a/react-paginate/react-paginate-tests.tsx +++ b/react-paginate/react-paginate-tests.tsx @@ -3,8 +3,6 @@ import ReactPaginate = require("react-paginate"); class Test extends React.Component<{}, {}> { - public onClick: Function; - render() { return ( { nextLabel={'next'} breakLabel={'break-me'} breakClassName={'break-class'} - onPageChange={this.onClick} + onPageChange={(selectedItem: {selected: number}) => null} initialPage={2} forcePage={3} disableInitialCallback={false} @@ -28,7 +26,7 @@ class Test extends React.Component<{}, {}> { previousLinkClassName={'previous-a'} nextLinkClassName={'next-a'} disabledClassName={'disabled'} - hrefBuilder={this.onClick} + hrefBuilder={(pageIndex: number) => null} /> ); }