Fix CalendarList not loading past months

Link: wix#425 (comment) Fixed past months not being loaded due to limit of initialNumToRender prop on FlatList
freework-gmbh · Jul 26, 2019 · 27c2666 · 27c2666
1 parent 385ede2
commit 27c2666
Showing 1 changed file with 24 additions and 17 deletions.
diff --git a/src/calendar-list/index.js b/src/calendar-list/index.js
@@ -64,17 +64,17 @@ class CalendarList extends Component {
 
   constructor(props) {
     super(props);
-    
+
     this.style = styleConstructor(props.theme);
-    
+
     this.viewabilityConfig = {
       itemVisiblePercentThreshold: 20
     };
 
     const rows = [];
     const texts = [];
     const date = parseDate(props.current) || XDate();
-    
+
     for (let i = 0; i <= this.props.pastScrollRange + this.props.futureScrollRange; i++) {
       const rangeDate = date.clone().addMonths(i - this.props.pastScrollRange, true);
       const rangeDateStr = rangeDate.toString('MMM yyyy');
@@ -114,7 +114,7 @@ class CalendarList extends Component {
     const diffMonths = Math.round(this.state.openDate.clone().setDate(1).diffMonths(day.clone().setDate(1)));
     const size = this.props.horizontal ? this.props.calendarWidth : this.props.calendarHeight;
     let scrollAmount = (size * this.props.pastScrollRange) + (diffMonths * size) + (offset || 0);
-    
+
     if (!this.props.horizontal) {
       let week = 0;
       const days = dateutils.page(day, this.props.firstDay);
@@ -139,17 +139,23 @@ class CalendarList extends Component {
     this.listView.scrollToOffset({offset: scrollAmount, animated: false});
   }
 
+  componentDidMount() {
+    requestAnimationFrame(() => {
+      this.listView.scrollToIndex({animated: false, index: this.getMonthIndex(this.state.openDate)});
+    });
+  }
+
   componentWillReceiveProps(props) {
     const current = parseDate(this.props.current);
     const nextCurrent = parseDate(props.current);
-    
+
     if (nextCurrent && current && nextCurrent.getTime() !== current.getTime()) {
       this.scrollToMonth(nextCurrent);
     }
 
     const rowclone = this.state.rows;
     const newrows = [];
-    
+
     for (let i = 0; i < rowclone.length; i++) {
       let val = this.state.texts[i];
       if (rowclone[i].getTime) {
@@ -176,11 +182,11 @@ class CalendarList extends Component {
     const rowclone = this.state.rows;
     const newrows = [];
     const visibleMonths = [];
-    
+
     for (let i = 0; i < rowclone.length; i++) {
       let val = rowclone[i];
       const rowShouldBeRendered = rowIsCloseToViewable(i, 1);
-      
+
       if (rowShouldBeRendered && !rowclone[i].getTime) {
         val = this.state.openDate.clone().addMonths(i - this.props.pastScrollRange, true);
       } else if (!rowShouldBeRendered) {
@@ -191,7 +197,7 @@ class CalendarList extends Component {
         visibleMonths.push(xdateToData(val));
       }
     }
-    
+
     if (this.props.onVisibleMonthsChange) {
       this.props.onVisibleMonthsChange(visibleMonths);
     }
@@ -206,18 +212,18 @@ class CalendarList extends Component {
     return (
       <CalendarListItem
         scrollToMonth={this.scrollToMonth.bind(this)}
-        item={item} 
-        calendarHeight={this.props.calendarHeight} 
-        calendarWidth={this.props.horizontal ? this.props.calendarWidth : undefined} 
-        {...this.props} 
+        item={item}
+        calendarHeight={this.props.calendarHeight}
+        calendarWidth={this.props.horizontal ? this.props.calendarWidth : undefined}
+        {...this.props}
         style={this.props.calendarStyle}
       />
     );
   }
 
   getItemLayout(data, index) {
     return {
-      length: this.props.horizontal ? this.props.calendarWidth : this.props.calendarHeight, 
+      length: this.props.horizontal ? this.props.calendarWidth : this.props.calendarHeight,
       offset: (this.props.horizontal ? this.props.calendarWidth : this.props.calendarHeight) * index, index
     };
   }
@@ -240,7 +246,7 @@ class CalendarList extends Component {
       currentMonth: day.clone()
     }, () => {
       this.scrollToMonth(this.state.currentMonth);
-      
+
       if (!doNotTriggerListeners) {
         const currMont = this.state.currentMonth.clone();
         if (this.props.onMonthChange) {
@@ -256,7 +262,7 @@ class CalendarList extends Component {
   renderStaticHeader() {
     const {staticHeader, horizontal} = this.props;
     const useStaticHeader = staticHeader && horizontal;
-    
+
     if (useStaticHeader) {
       let indicator;
       if (this.props.showIndicator) {
@@ -292,7 +298,9 @@ class CalendarList extends Component {
           ref={(c) => this.listView = c}
           //scrollEventThrottle={1000}
           style={[this.style.container, this.props.style]}
+          ref={c => this.listView = c}
           initialListSize={this.props.pastScrollRange + this.props.futureScrollRange + 1}
+          initialNumToRender={this.props.pastScrollRange + this.props.futureScrollRange + 1}
           data={this.state.rows}
           //snapToAlignment='start'
           //snapToInterval={this.calendarHeight}
@@ -307,7 +315,6 @@ class CalendarList extends Component {
           showsHorizontalScrollIndicator={this.props.showScrollIndicator}
           scrollEnabled={this.props.scrollEnabled}
           keyExtractor={(item, index) => String(index)}
-          initialScrollIndex={this.state.openDate ? this.getMonthIndex(this.state.openDate) : false}
           getItemLayout={this.getItemLayout}
           scrollsToTop={this.props.scrollsToTop}
         />