From 68dba3005d0f3f856a8e9cecaca3f915132b62cc Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Thu, 17 Jan 2019 23:15:00 -0500 Subject: [PATCH] scroll list working --- package.json | 4 ++ src/ts/app/PokemonApp.tsx | 10 ++- .../PokemonSelectList/PokemonSelectList.tsx | 64 +++++++++++++++++-- src/ts/app/index.tsx | 4 +- yarn.lock | 49 +++++++++++++- 5 files changed, 117 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index f213d25..730c5de 100644 --- a/package.json +++ b/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" diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index 23a885b..6c5d5ff 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/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 { - pokemonSelectListState : IPokemonSelectListState; -} +type PokemonAppProps = ReturnType; -interface IConnectedPokemonAppProps extends IPokemonAppProps { +interface IConnectedPokemonAppProps extends PokemonAppProps { dispatch : ThunkDispatchPokemonSelectList; } @@ -33,7 +31,7 @@ class PokemonApp extends React.Component { } } -const mapStateToProps = (state : ReturnType) : IPokemonAppProps => { +const mapStateToProps = (state : ReturnType) : PokemonAppProps => { return { pokemonSelectListState: state.pokemonSelectListState, }; diff --git a/src/ts/app/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/PokemonSelectList/PokemonSelectList.tsx index b44f381..f7ade3b 100644 --- a/src/ts/app/PokemonSelectList/PokemonSelectList.tsx +++ b/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; } -export class PokemonSelectList extends React.Component { +interface IState { + dimensions : { + width : number; + height : number; + }; +} + +interface IRowFactory { + index : number; + style : React.CSSProperties; +} + +export class PokemonSelectList extends React.Component { + + 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 ( -
- { this.props.pokemonList.map((pokemon, index) =>
{ pokemon.name }
) } +
+ + { + ({ measureRef }) => ( +
+ + { this.rowFactory.bind(this) } + +
+ ) + } +
); } + + private rowFactory({ index, style } : IRowFactory) { + const pokemon = this.props.pokemonList[index]; + return
{ pokemon.name }
; + } } diff --git a/src/ts/app/index.tsx b/src/ts/app/index.tsx index a7eb5d4..40a966d 100644 --- a/src/ts/app/index.tsx +++ b/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'; @@ -17,7 +15,7 @@ import { ConnectedPokemonApp } from './PokemonApp'; import 'styles/index.scss'; export const appReducers = Redux.combineReducers({ - pokemonSelectListState : PokemonSelectListReducers + pokemonSelectListState: PokemonSelectListReducers }); const extraArguments : IPokemonSelectListExtraArguments = { diff --git a/yarn.lock b/yarn.lock index 528600a..ad93b0d 100644 --- a/yarn.lock +++ b/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"