diff options
| -rw-r--r-- | package-lock.json | 27 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/components/Feed/Feed.tsx | 49 |
3 files changed, 66 insertions, 12 deletions
diff --git a/package-lock.json b/package-lock.json index e7f7059..896898a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1686,6 +1686,15 @@ "@types/react": "*" } }, + "@types/react-virtualized": { + "version": "9.21.10", + "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.10.tgz", + "integrity": "sha512-f5Ti3A7gGdLkPPFNHTrvKblpsPNBiQoSorOEOD+JPx72g/Ng2lOt4MYfhvQFQNgyIrAro+Z643jbcKafsMW2ag==", + "requires": { + "@types/prop-types": "*", + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -10784,6 +10793,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -11153,6 +11167,19 @@ "prop-types": "^15.6.2" } }, + "react-virtualized": { + "version": "9.21.2", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.2.tgz", + "integrity": "sha512-oX7I7KYiUM7lVXQzmhtF4Xg/4UA5duSA+/ZcAvdWlTLFCoFYq1SbauJT5gZK9cZS/wdYR6TPGpX/dqzvTqQeBA==", + "requires": { + "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" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index f75c0e8..15972e6 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,14 @@ "dependencies": { "@material-ui/core": "^4.10.1", "@material-ui/icons": "^4.9.1", + "@types/react-virtualized": "^9.21.10", "axios": "^0.19.2", "lodash": "^4.17.15", "react": "^16.13.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", "react-scripts": "3.4.1", + "react-virtualized": "^9.21.2", "typeface-roboto": "0.0.75", "which-types": "^1.6.1" }, diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 7636573..785dd79 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -1,26 +1,51 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; import { Poll } from 'which-types'; import PollCard from '../PollCard/PollCard'; +import { WindowScroller, AutoSizer, List } from 'react-virtualized'; interface PropTypes { polls: Poll[]; } -const useStyles = makeStyles(theme => ({ - root: { - position: 'relative', - maxWidth: theme.spacing(75), - margin: '0 auto' - } -})); +interface RenderPropTypes { + index: number; + key: string; + style: React.CSSProperties; +} const Feed: React.FC<PropTypes> = ({ polls }) => { - const classes = useStyles(); + + const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => { + const poll = polls[index]; + return ( + <div key={key} style={style}> + <PollCard initialPoll={poll} /> + </div> + ) + }; + return ( - <div className={classes.root}> - {polls.map(poll => <PollCard initialPoll={poll} key={poll._id} />)} - </div> + <WindowScroller> + {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => ( + <AutoSizer disableHeight> + {({width}) => ( + <div ref={registerChild}> + <List + autoHeight + height={height} + isScrolling={isScrolling} + onScroll={onChildScroll} + rowCount={polls.length} + rowHeight={600} + rowRenderer={RenderItem} + scrollTop={scrollTop} + width={width} + /> + </div> + )} + </AutoSizer> + )} + </WindowScroller> ); }; |