From 060d8517069139bd0557ddea5818811cc4be9afe Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Tue, 5 Jun 2018 15:40:50 -0400 Subject: [PATCH 1/3] Added types for react-infinite-scroll-component --- .../index.d.ts | 107 ++++++++++++++++++ .../react-infinite-scroll-component-tests.tsx | 14 +++ .../tsconfig.json | 22 ++++ .../tslint.json | 1 + 4 files changed, 144 insertions(+) create mode 100644 types/react-infinite-scroll-component/index.d.ts create mode 100644 types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx create mode 100644 types/react-infinite-scroll-component/tsconfig.json create mode 100644 types/react-infinite-scroll-component/tslint.json diff --git a/types/react-infinite-scroll-component/index.d.ts b/types/react-infinite-scroll-component/index.d.ts new file mode 100644 index 0000000000..e5166be3c6 --- /dev/null +++ b/types/react-infinite-scroll-component/index.d.ts @@ -0,0 +1,107 @@ +// Type definitions for react-infinite-scroll-component 4.1 +// Project: https://github.com/ankeetmaini/react-infinite-scroll-component#readme +// Definitions by: Stephanie Roy +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.6 + +/// + +declare module InfiniteScroll { + interface InfiniteScrollProps { + /** + * Set the length of the data.This will unlock the subsequent calls to next. + */ + dataLength: number; + + /** + * A function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. + * The data is passed as children to the InfiniteScroll component and the data should contain previous items too. + * e.g. Initial data = [1, 2, 3] and then next load of data should be [1, 2, 3, 4, 5, 6]. + */ + next: () => void; + + /** + * It tells the InfiniteScroll component on whether to call next function on reaching the bottom and shows an endMessage to the user + */ + hasMore: boolean; + + /** + * This message is shown to the user when he has seen all the records which means he's at the bottom and hasMore is false + */ + endMessage: React.ReactNode + + /** + * You can send a loader component to show while the component waits for the next load of data. e.g.

Loading...

or any fancy loader element + */ + loader?: React.ReactNode; + + /** + * This function will be called, it should return the fresh data that you want to show the user + */ + refreshFunction?: () => void; + + /** + * To enable Pull Down to Refresh feature + */ + pullDownToRefresh?: boolean; + + /** + * Any JSX that you want to show the user, default={

Pull down to refresh

} + */ + pullDownToRefreshContent?: React.ReactNode; + + /** + * Minimum distance the user needs to pull down to trigger the refresh, default=100px + */ + pullDownToRefreshThreshold?: number; + + /** + * Any JSX that you want to show the user, default={

Release to refresh

} + */ + releaseToRefreshContent?: boolean; + + /** + * A threshold value after that the InfiniteScroll will call next. By default it's 0.8. It means the next will be called when the user comes below 80% of the total height. + */ + scrollThreshold?: number; + + /** + * A function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect. + */ + onScroll?: () => void; + + /** + * Reference to a (parent) DOM element that is already providing overflow scrollbars to the InfiniteScroll component. + * You should provide the id of the DOM node preferably. + */ + scrollableTarget?: React.ReactNode | string; + + /** + * Children is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, + * if your children is not an array, specify this prop to tell if your items are 0 or more. + */ + hasChildren?: boolean; + + /** + * Set a scroll y position for the component to render with. + */ + initialScrollY?: number; + + /** + * Set a scroll y position for the component to render with. + */ + style?: any; + + /** + * Give only if you want to have a fixed height scrolling content + */ + height?: number; + } +} + +declare class InfiniteScroll extends React.Component {} + +declare module 'react-infinite-scroll-component' { + export = InfiniteScroll; + export as namespace InfiniteScroll; +} diff --git a/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx b/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx new file mode 100644 index 0000000000..ad515bb7bd --- /dev/null +++ b/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx @@ -0,0 +1,14 @@ +import * as InfiniteScroll from 'react-infinite-scroll-component'; + +const options: JSX.Element[] = [ +
1
, +
2
, +]; + +const props: InfiniteScroll.InfiniteScrollProps = { + dataLength: 4, + hasMore: true, + endMessage: 'The end.' +}; + +{options} \ No newline at end of file diff --git a/types/react-infinite-scroll-component/tsconfig.json b/types/react-infinite-scroll-component/tsconfig.json new file mode 100644 index 0000000000..f2d3d0d9bb --- /dev/null +++ b/types/react-infinite-scroll-component/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-infinite-scroll-component-tests.tsx" + ] +} diff --git a/types/react-infinite-scroll-component/tslint.json b/types/react-infinite-scroll-component/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-infinite-scroll-component/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 4e43709c96e5a372ea2b59b223e21f879c3beece Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Tue, 5 Jun 2018 16:09:50 -0400 Subject: [PATCH 2/3] Fix lint errors --- types/react-infinite-scroll-component/index.d.ts | 14 +++++--------- .../react-infinite-scroll-component-tests.tsx | 6 ++++-- .../react-infinite-scroll-component/tsconfig.json | 2 ++ types/react-infinite-scroller/index.d.ts | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/types/react-infinite-scroll-component/index.d.ts b/types/react-infinite-scroll-component/index.d.ts index e5166be3c6..4e2ba078f5 100644 --- a/types/react-infinite-scroll-component/index.d.ts +++ b/types/react-infinite-scroll-component/index.d.ts @@ -4,9 +4,9 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 -/// +import * as React from 'react'; -declare module InfiniteScroll { +declare namespace InfiniteScroll { interface InfiniteScrollProps { /** * Set the length of the data.This will unlock the subsequent calls to next. @@ -28,7 +28,7 @@ declare module InfiniteScroll { /** * This message is shown to the user when he has seen all the records which means he's at the bottom and hasMore is false */ - endMessage: React.ReactNode + endMessage: React.ReactNode; /** * You can send a loader component to show while the component waits for the next load of data. e.g.

Loading...

or any fancy loader element @@ -99,9 +99,5 @@ declare module InfiniteScroll { } } -declare class InfiniteScroll extends React.Component {} - -declare module 'react-infinite-scroll-component' { - export = InfiniteScroll; - export as namespace InfiniteScroll; -} +declare class InfiniteScroll extends React.Component {} +export = InfiniteScroll; diff --git a/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx b/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx index ad515bb7bd..2b5a01d4cc 100644 --- a/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx +++ b/types/react-infinite-scroll-component/react-infinite-scroll-component-tests.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import * as InfiniteScroll from 'react-infinite-scroll-component'; const options: JSX.Element[] = [ @@ -8,7 +9,8 @@ const options: JSX.Element[] = [ const props: InfiniteScroll.InfiniteScrollProps = { dataLength: 4, hasMore: true, - endMessage: 'The end.' + endMessage: 'The end.', + next: () => null, }; -{options} \ No newline at end of file +{options}; diff --git a/types/react-infinite-scroll-component/tsconfig.json b/types/react-infinite-scroll-component/tsconfig.json index f2d3d0d9bb..b1a54cd2ea 100644 --- a/types/react-infinite-scroll-component/tsconfig.json +++ b/types/react-infinite-scroll-component/tsconfig.json @@ -7,6 +7,8 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, + "jsx": "react", "baseUrl": "../", "typeRoots": [ "../" diff --git a/types/react-infinite-scroller/index.d.ts b/types/react-infinite-scroller/index.d.ts index 066714344c..d0c3141f17 100644 --- a/types/react-infinite-scroller/index.d.ts +++ b/types/react-infinite-scroller/index.d.ts @@ -66,4 +66,4 @@ declare namespace InfiniteScroll { namespace InfiniteScroll {} } -export = InfiniteScroll.InfiniteScroll; +export = InfiniteScroll; From 81e5885bbfcd962522e4c40e60c2325ebbc61ad7 Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Tue, 5 Jun 2018 16:14:21 -0400 Subject: [PATCH 3/3] remove unwanted change --- types/react-infinite-scroller/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-infinite-scroller/index.d.ts b/types/react-infinite-scroller/index.d.ts index d0c3141f17..066714344c 100644 --- a/types/react-infinite-scroller/index.d.ts +++ b/types/react-infinite-scroller/index.d.ts @@ -66,4 +66,4 @@ declare namespace InfiniteScroll { namespace InfiniteScroll {} } -export = InfiniteScroll; +export = InfiniteScroll.InfiniteScroll;