scroll list working

package.json

@@ -22,7 +22,9 @@
     "@types/node": "^10.12.18",
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
+    "@types/react-measure": "^2.0.4",
     "@types/react-redux": "^6.0.12",
+    "@types/react-window": "^1.1.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
     "css-loader": "^2.1.0",
@@ -58,7 +60,9 @@
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-measure": "^2.2.2",
     "react-redux": "^6.0.0",
+    "react-window": "^1.5.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "typesafe-actions": "^3.0.0"

src/ts/app/PokemonApp.tsx

@@ -5,15 +5,13 @@ import { Dispatch } from 'redux';
 import { appReducers } from './index';
 
 import * as ActionsPokemonSelectList from './PokemonSelectList/actions';
-import { IPokemonSelectListState, ThunkDispatchPokemonSelectList } from './PokemonSelectList/types';
+import { ThunkDispatchPokemonSelectList } from './PokemonSelectList/types';
 
 import { PokemonSelectList } from './PokemonSelectList/PokemonSelectList';
 
-interface IPokemonAppProps {
+type PokemonAppProps = ReturnType<typeof appReducers>;
-    pokemonSelectListState : IPokemonSelectListState;
-}
 
-interface IConnectedPokemonAppProps extends IPokemonAppProps {
+interface IConnectedPokemonAppProps extends PokemonAppProps {
     dispatch : ThunkDispatchPokemonSelectList;
 }
 
@@ -33,7 +31,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
     }
 }
 
-const mapStateToProps = (state : ReturnType<typeof appReducers>) : IPokemonAppProps => {
+const mapStateToProps = (state : ReturnType<typeof appReducers>) : PokemonAppProps => {
     return {
         pokemonSelectListState: state.pokemonSelectListState,
     };

src/ts/app/PokemonSelectList/PokemonSelectList.tsx

@@ -1,4 +1,6 @@
-import * as React from 'react';
+import React from 'react';
+import { ContentRect, default as Measure } from 'react-measure';
+import { FixedSizeList } from 'react-window';
 
 import { IPokemon } from 'app/models/Pokemon';
 
@@ -6,12 +8,66 @@ export interface IPokemonSelectListProps {
     pokemonList : Array<IPokemon>;
 }
 
-export class PokemonSelectList extends React.Component<IPokemonSelectListProps, object> {
+interface IState {
+    dimensions : {
+        width : number;
+        height : number;
+    };
+}
+
+interface IRowFactory {
+    index : number;
+    style : React.CSSProperties;
+}
+
+export class PokemonSelectList extends React.Component<IPokemonSelectListProps, IState> {
+
+    constructor(props : IPokemonSelectListProps) {
+        super(props);
+
+        this.state = {
+            dimensions: {
+                width: -1,
+                height: -1,
+            }
+        };
+    }
+
     public render() {
+        const { width, height } = this.state.dimensions;
+        const onResize = (contentRect : ContentRect) => {
+            if (typeof contentRect.bounds !== 'undefined') {
+                this.setState({ dimensions: contentRect.bounds });
+            }
+        };
+
         return (
-            <div>
+            <div style={ { height: '400px' } }>
-                { this.props.pokemonList.map((pokemon, index) => <div key={ index }>{ pokemon.name }</div>) }
+                <Measure
+                    bounds={ true }
+                    onResize={ onResize }
+                >
+                    {
+                        ({ measureRef }) => (
+                            <div ref={ measureRef } style={ { height: '100%' } }>
+                                <FixedSizeList
+                                    height={ height }
+                                    itemCount={ this.props.pokemonList.length }
+                                    itemSize={ 35 }
+                                    width={ width }
+                                >
+                                    { this.rowFactory.bind(this) }
+                                </FixedSizeList>
+                            </div>
+                        )
+                    }
+                </Measure>
             </div>
         );
     }
+
+    private rowFactory({ index, style } : IRowFactory) {
+        const pokemon = this.props.pokemonList[index];
+        return <div key={ index } style={ style }>{ pokemon.name }</div>;
+    }
 }

src/ts/app/index.tsx

@@ -4,8 +4,6 @@ import { Provider } from 'react-redux';
 import * as Redux from 'redux';
 import thunk from 'redux-thunk';
 
-import { IProviderExtraArguments } from 'common/models/IProviderExtraArguments';
-
 import { IPokemonSelectListExtraArguments } from 'app/PokemonSelectList/types';
 
 import { PokemonService } from 'api/PokemonService';

yarn.lock

@@ -673,7 +673,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.1.0"
 
-"@babel/runtime@^7.2.0":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
   integrity sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==
@@ -748,6 +748,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-measure@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-measure/-/react-measure-2.0.4.tgz#54ca765f7b5171861e8249f7184a07fa24724769"
+  integrity sha512-0puxiERCQ5Az4LyO+2r9bh6ECXTuy2PpsO+LY8ICezEi3YgIVaJwqRsplpNU18dZMqkpsdJlTB2cvSvkY0eR5Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^6.0.12":
   version "6.0.12"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-6.0.12.tgz#f3e9a400b8d40db43ffd8949ce14db4aa17a53ce"
@@ -756,6 +763,13 @@
     "@types/react" "*"
     redux "^4.0.0"
 
+"@types/react-window@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.1.0.tgz#5253a7545b9017e0a4440f2a14e78136b4a7fb2a"
+  integrity sha512-T387G7k7VvBOkI1foivqK5uFhR6+QJte4pLd+ZPkwEnYLRE2gyhZpVnCCbxpGg2U3Bj7AIKKXPvgwzJozyqHlA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.7.18":
   version "16.7.18"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.18.tgz#f4ce0d539a893dd61e36cd11ae3a5e54f5a48337"
@@ -2593,6 +2607,11 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
 
+get-node-dimensions@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
+  integrity sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ==
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -3628,6 +3647,11 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
+memoize-one@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
+  integrity sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -4723,6 +4747,16 @@ react-is@^16.3.2, react-is@^16.6.3:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
   integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
 
+react-measure@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.2.2.tgz#881a7fc29db9f4eb2694a94dd16f60baadf6025a"
+  integrity sha512-7cnTiqUfS08o2VQ+tZ614/MSpzgr5NiSWF3mmWM2MbvL1r8V20LXJZ1Mpyi0Nfwf7G1bP692eGCmgOc0fsWvFg==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    get-node-dimensions "^1.2.1"
+    prop-types "^15.6.2"
+    resize-observer-polyfill "^1.5.0"
+
 react-redux@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0.tgz#09e86eeed5febb98e9442458ad2970c8f1a173ef"
@@ -4735,6 +4769,14 @@ react-redux@^6.0.0:
     prop-types "^15.6.2"
     react-is "^16.6.3"
 
+react-window@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.5.0.tgz#3e56b720b97666bce38a9e932bdd238d56e258f1"
+  integrity sha512-55WeZKjMNF5JdCuKghc/H65DBecoeGgH8MOX3CgT7BJ66xb4ITRuXPUlz0qU6r50wetdF/oLhorYBRvKD4Z1IQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one "^3.1.1"
+
 react@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
@@ -5030,6 +5072,11 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"