From 13fc0cc8ffb61d8f184707feed1f9010798c45f1 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 18 Sep 2020 22:20:29 +0300 Subject: feat!: allow dynamic item height in PollsList --- src/components/PollsList/PollsList.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'src/components/PollsList/PollsList.tsx') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 039639d..bf2079a 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -3,7 +3,8 @@ import { WindowScroller, AutoSizer, List, - InfiniteLoader + InfiniteLoader, + CellMeasurerCache } from 'react-virtualized'; import _ from 'lodash'; import { Poll } from 'which-types'; @@ -15,17 +16,23 @@ interface PropTypes { mutate: (polls: Poll[], refetch: boolean) => void; } +const cache = new CellMeasurerCache({ + fixedWidth: true, +}); + const PAGE_SIZE = 10; const PollsList: React.FC = ({ polls, mutate }) => { const [displayCount, setDisplayCount] = useState(PAGE_SIZE); - const rowRenderer = useCallback(({ index, style, key }) => ( + const rowRenderer = useCallback(({ index, style, key, parent }) => ( @@ -68,7 +75,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { isScrolling={isScrolling} onScroll={onChildScroll} rowCount={rowCount} - rowHeight={550} + rowHeight={cache.rowHeight} rowRenderer={rowRenderer} scrollTop={scrollTop} width={width} @@ -76,6 +83,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { overscanRowCount={2} onRowsRendered={onRowsRendered} ref={ref} + deferredMeasurementCache={cache} /> )} -- cgit v1.2.3