From 2397cfbe6df222f96c2719983201acbc89fdec27 Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Fri, 13 Mar 2020 16:46:30 +0200 Subject: [PATCH] AddressBook: use a virtualized list for the contacts. --- package.json | 2 ++ src/components/AddressBook.tsx | 38 +++++++++++++++++++++------------- yarn.lock | 31 ++++++++++++++++++++++++--- 3 files changed, 54 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index ec99c63..683440c 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scripts": "3.3.0", + "react-virtualized": "^9.21.2", "redux": "^4.0.1", "redux-actions": "^2.6.4", "redux-logger": "^3.0.6", @@ -48,6 +49,7 @@ "@types/react-redux": "^7.1.1", "@types/react-router": "^4.4.4", "@types/react-router-dom": "^4.3.1", + "@types/react-virtualized": "^9.21.8", "@types/redux": "^3.6.0", "@types/redux-actions": "^2.3.2", "@types/redux-logger": "^3.0.5", diff --git a/src/components/AddressBook.tsx b/src/components/AddressBook.tsx index 1f53fe6..dfa46a8 100644 --- a/src/components/AddressBook.tsx +++ b/src/components/AddressBook.tsx @@ -6,6 +6,8 @@ import * as React from 'react'; import { createSelector } from 'reselect'; import * as colors from '@material-ui/core/colors'; +import { AutoSizer, List as VirtualizedList } from 'react-virtualized'; +import 'react-virtualized/styles.css'; // only needs to be imported once import { Avatar } from '../widgets/Avatar'; import { List, ListItem } from '../widgets/List'; @@ -92,21 +94,29 @@ class AddressBook extends React.PureComponent { sortedEntries.filter(this.props.filter) : sortedEntries; - const itemList = entries.map((entry) => { - const uid = entry.uid; - - return ( - - ); - }); - return ( - - {itemList} + + + {({ height, width }) => ( + { + return ( +
+ +
+ ); + }} + /> + )} + ); } diff --git a/yarn.lock b/yarn.lock index f061c46..917313e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2206,6 +2206,14 @@ dependencies: "@types/react" "*" +"@types/react-virtualized@^9.21.8": + version "9.21.8" + resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.8.tgz#dc0150a75fd6e42f33729886463ece04d03367ea" + integrity sha512-7fZoA0Azd2jLIE9XC37fMZgMqaJe3o3pfzGjvrzphoKjBCdT4oNl6wikvo4dDMESDnpkZ8DvVTc7aSe4DW86Ew== + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + "@types/react@*": version "16.8.3" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.3.tgz#7b67956f682bea30a5a09b3242c0784ff196c848" @@ -3560,6 +3568,11 @@ clone-deep@^4.0.1: kind-of "^6.0.2" shallow-clone "^3.0.0" +clsx@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702" + integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA== + clsx@^1.0.2, clsx@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec" @@ -4415,7 +4428,7 @@ dom-converter@^0.2: dependencies: utila "~0.4" -dom-helpers@^5.0.1, dom-helpers@^5.1.0: +dom-helpers@^5.0.0, dom-helpers@^5.0.1, dom-helpers@^5.1.0: version "5.1.3" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821" integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw== @@ -7347,7 +7360,7 @@ loglevel@^1.6.4: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312" integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -9361,7 +9374,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -9744,6 +9757,18 @@ react-transition-group@^4.0.0, react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-virtualized@^9.21.2: + version "9.21.2" + resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.2.tgz#02e6df65c1e020c8dbf574ec4ce971652afca84e" + integrity sha512-oX7I7KYiUM7lVXQzmhtF4Xg/4UA5duSA+/ZcAvdWlTLFCoFYq1SbauJT5gZK9cZS/wdYR6TPGpX/dqzvTqQeBA== + dependencies: + babel-runtime "^6.26.0" + clsx "^1.0.1" + dom-helpers "^5.0.0" + loose-envify "^1.3.0" + prop-types "^15.6.0" + react-lifecycles-compat "^3.0.4" + react@^16.10.2: version "16.12.0" resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"