feat: add type definitions for react-window-infinite-loader (#36275)

types/react-window-infinite-loader/index.d.ts

@@ -0,0 +1,22 @@
+// Type definitions for react-window-infinite-loader 1.0
+// Project: https://github.com/bvaughn/react-window-infinite-loader/
+// Definitions by: Nivesh Ravindran <https://github.com/Nibblesh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+
+import { FC, Ref, ReactNode, Component } from "react";
+import { ListOnItemsRenderedProps, FixedSizeList, VariableSizeList } from 'react-window';
+
+type OnItemsRendered = (props: ListOnItemsRenderedProps) => any;
+
+interface InfiniteLoaderProps {
+    isItemLoaded: (index: number) => boolean;
+    loadMoreItems: (startIndex: number, stopIndex: number) => Promise<any>;
+    itemCount: number;
+    children: (props: {onItemsRendered: OnItemsRendered, ref: Ref<any>}) => ReactNode;
+}
+
+declare class InfiniteLoader extends Component<InfiniteLoaderProps> {
+}
+
+export = InfiniteLoader;

types/react-window-infinite-loader/react-window-infinite-loader-tests.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { FixedSizeList } from 'react-window';
+
+const LOADING = 1;
+const LOADED = 2;
+const itemStatusMap: { [key: number]: number } = {};
+
+const isItemLoaded = (index: number) => !!itemStatusMap[index];
+const loadMoreItems = (startIndex: number, stopIndex: number) => {
+    for (let index = startIndex; index <= stopIndex; index++) {
+        itemStatusMap[index] = LOADING;
+    }
+    return new Promise(resolve =>
+        setTimeout(() => {
+            for (let index = startIndex; index <= stopIndex; index++) {
+                itemStatusMap[index] = LOADED;
+            }
+            resolve();
+        }, 2500)
+    );
+};
+
+class Row extends React.PureComponent<{ index: number; style: React.CSSProperties; data: any }> {
+    render() {
+        const { index, style } = this.props;
+
+        return (
+            <div className="ListItem" style={style}>
+                {`${itemStatusMap[index] === LOADED ? `Row ${index}` : 'Loading...'}`}
+            </div>
+        );
+    }
+}
+
+const App = () => (
+    <React.Fragment>
+        <p className="Note">
+            This demo app mimics loading remote data with a 2.5s timer. While rows are "loading" they will display a
+            "Loading..." label. Once data has been "loaded" the row number will be displayed. Start scrolling the list
+            to automatically load data.
+        </p>
+        <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={1000} loadMoreItems={loadMoreItems}>
+            {({ onItemsRendered, ref }) => (
+                <FixedSizeList
+                    className="List"
+                    height={150}
+                    itemCount={1000}
+                    itemSize={30}
+                    onItemsRendered={onItemsRendered}
+                    ref={ref}
+                    width={300}
+                >
+                    {Row}
+                </FixedSizeList>
+            )}
+        </InfiniteLoader>
+        <p className="Note">
+            Check out the documentation to learn more:
+            <br />
+            <a href="https://github.com/bvaughn/react-window-infinite-loader#documentation">
+                github.com/bvaughn/react-window-infinite-loader
+            </a>
+        </p>
+    </React.Fragment>
+);

types/react-window-infinite-loader/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "esModuleInterop": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "strictFunctionTypes": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-window-infinite-loader-tests.tsx"
+    ]
+}

types/react-window-infinite-loader/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }