AddressBook: use a virtualized list for the contacts.

master
Tom Hacohen 5 years ago
parent 5cb8dda9cc
commit 2397cfbe6d

@ -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",

@ -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<PropsType> {
sortedEntries.filter(this.props.filter)
: sortedEntries;
const itemList = entries.map((entry) => {
const uid = entry.uid;
return (
<List style={{ height: 'calc(100vh - 300px)' }}>
<AutoSizer>
{({ height, width }) => (
<VirtualizedList
width={width}
height={height}
rowCount={entries.length}
rowHeight={56}
rowRenderer={({ index, key, style }) => {
return (
<div style={style}>
<AddressBookItem
key={uid}
entry={entry}
key={key}
entry={entries[index]}
onClick={this.props.onItemClick}
/>
</div>
);
});
return (
<List>
{itemList}
}}
/>
)}
</AutoSizer>
</List>
);
}

@ -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"

Loading…
Cancel
Save