diff options
Diffstat (limited to 'src/components/Feed/Feed.tsx')
-rw-r--r-- | src/components/Feed/Feed.tsx | 64 |
1 files changed, 34 insertions, 30 deletions
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index a56d57e..03358da 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Poll } from 'which-types'; import { WindowScroller, AutoSizer, List } from 'react-virtualized'; import CircularProgress from '@material-ui/core/CircularProgress'; +import { makeStyles } from '@material-ui/core'; import PollCard from '../PollCard/PollCard'; -import {makeStyles} from "@material-ui/core"; interface PropTypes { polls: Poll[]; @@ -17,9 +17,9 @@ interface RenderPropTypes { const useStyles = makeStyles(theme => ({ loader: { - width:'100%', - textAlign:'center', - marginTop:theme.spacing(10) + width: '100%', + textAlign: 'center', + marginTop: theme.spacing(10) } })); @@ -36,39 +36,43 @@ const Feed: React.FC<PropTypes> = ({ polls }) => { ); }; - const loader = <div className={classes.loader}> - <CircularProgress color="primary" style={{margin: '0 auto'}}/> - </div> + const loader = ( + <div className={classes.loader}> + <CircularProgress color="primary" style={{ margin: '0 auto' }} /> + </div> + ); - const list = <WindowScroller> - {({ + const list = ( + <WindowScroller> + {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( - <AutoSizer disableHeight> - {({ width }) => ( - <div ref={registerChild}> - <List - autoHeight - height={height} - isScrolling={isScrolling} - onScroll={onChildScroll} - rowCount={polls.length} - rowHeight={550} - rowRenderer={RenderItem} - scrollTop={scrollTop} - width={width} - containerStyle={{ pointerEvents: 'auto' }} - overscanRowCount={1} - /> - </div> - )} - </AutoSizer> - )} - </WindowScroller> + <AutoSizer disableHeight> + {({ width }) => ( + <div ref={registerChild}> + <List + autoHeight + height={height} + isScrolling={isScrolling} + onScroll={onChildScroll} + rowCount={polls.length} + rowHeight={550} + rowRenderer={RenderItem} + scrollTop={scrollTop} + width={width} + containerStyle={{ pointerEvents: 'auto' }} + overscanRowCount={1} + /> + </div> + )} + </AutoSizer> + )} + </WindowScroller> + ); return polls.length ? list : loader; }; |