Fix previous month disappearing when scrolling down

Because of bvaughn/react-virtualized#478 the previous month will disappear because it's "out of view". This will extend the view so the last partial week of a month won't disappear.
toggl · Feb 22, 2017 · 594084f · 594084f
1 parent 450db2d
commit 594084f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/src/List/index.js b/src/List/index.js
@@ -10,6 +10,7 @@ export default class List extends Component {
 	static propTypes = {
 		width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 		height: PropTypes.number,
+		style: PropTypes.object,
 		rowHeight: PropTypes.number,
 		selectedDate: PropTypes.object,
 		disabledDates: PropTypes.arrayOf(PropTypes.string),
@@ -106,12 +107,14 @@ export default class List extends Component {
 		);
 	};
 	render() {
-		let {height, isScrolling, onScroll, overscanMonthCount, months, rowHeight, selectedDate, today, width} = this.props;
+		let {height, isScrolling, onScroll, overscanMonthCount, months, rowHeight, selectedDate, today, width, style} = this.props;
 		if (!this._initScrollTop) this._initScrollTop = this.getDateOffset(selectedDate && selectedDate.date || today.date);
 		if (typeof width == 'string' && width.indexOf('%') !== -1) {
 			width = window.innerWidth * parseInt(width.replace('%', ''), 10) / 100; // See https://github.com/bvaughn/react-virtualized/issues/229
 		}
 
+		const containerStyle = { ...this.props.style, lineHeight: `${rowHeight}px` }
+
 		return (
 			<VirtualScroll
 				ref="VirtualScroll"
@@ -124,7 +127,7 @@ export default class List extends Component {
 				onScroll={onScroll}
 				scrollTop={this._initScrollTop}
 				className={classNames(style.root, {[style.scrolling]: isScrolling})}
-				style={{lineHeight: `${rowHeight}px`}}
+				style={containerStyle}
 				overscanRowCount={overscanMonthCount}
 			/>
 		);

diff --git a/src/index.js b/src/index.js
@@ -370,6 +370,7 @@ export default class InfiniteCalendar extends Component {
 			showHeader,
 			tabIndex,
 			width,
+			rowHeight,
 			...other
 		} = this.props;
 		let disabledDates = this.getDisabledDates(this.props.disabledDates);
@@ -383,6 +384,12 @@ export default class InfiniteCalendar extends Component {
 			selectedDate = null;
 		}
 
+		// To have visible overscan we trick react-virtualized into thinking that the container is larger than it actually is and thus
+		// the previous/next month is "in view" for longer. We need this because our react-virtualized items are overlapping.
+		// PR that causes the problem: https://github.com/bvaughn/react-virtualized/pull/478
+		const listHeight = height + rowHeight * 2
+		const listStyle = { top: `-${rowHeight}px` }
+
 		return (
 			<div tabIndex={tabIndex} onKeyDown={keyboardSupport && this.handleKeyDown} className={classNames(className, style.container.root, {[style.container.landscape]: layout == 'landscape'})} style={{color: theme.textColor.default, width}} aria-label="Calendar" ref="node">
 				{showHeader &&
@@ -394,26 +401,30 @@ export default class InfiniteCalendar extends Component {
 						{showTodayHelper &&
 							<Today scrollToDate={this.scrollToDate} show={showToday} today={today} theme={theme} locale={locale} />
 						}
-						<List
-							ref="List"
-							{...other}
-							width={width}
-							height={height}
-							selectedDate={parseDate(selectedDate)}
-							disabledDates={disabledDates}
-							disabledDays={disabledDays}
-							months={this.months}
-							onDaySelect={this.onDaySelect}
-							onScroll={this.onScroll}
-							isScrolling={isScrolling}
-							today={today}
-							min={parseDate(min)}
-							minDate={parseDate(minDate)}
-							maxDate={parseDate(maxDate)}
-							theme={theme}
-							locale={locale}
-							overscanMonthCount={overscanMonthCount}
-						/>
+						<div style={{height: `${height}px`}}>
+							<List
+								ref="List"
+								{...other}
+								width={width}
+								height={listHeight}
+								rowHeight={rowHeight}
+								style={listStyle}
+								selectedDate={parseDate(selectedDate)}
+								disabledDates={disabledDates}
+								disabledDays={disabledDays}
+								months={this.months}
+								onDaySelect={this.onDaySelect}
+								onScroll={this.onScroll}
+								isScrolling={isScrolling}
+								today={today}
+								min={parseDate(min)}
+								minDate={parseDate(minDate)}
+								maxDate={parseDate(maxDate)}
+								theme={theme}
+								locale={locale}
+								overscanMonthCount={overscanMonthCount}
+							/>
+						</div>
 					</div>
 					{display == 'years' &&
 						<Years