diff --git a/src/calendar-list/index.js b/src/calendar-list/index.js index d43f764797..eed271f36f 100644 --- a/src/calendar-list/index.js +++ b/src/calendar-list/index.js @@ -64,9 +64,9 @@ class CalendarList extends Component { constructor(props) { super(props); - + this.style = styleConstructor(props.theme); - + this.viewabilityConfig = { itemVisiblePercentThreshold: 20 }; @@ -74,7 +74,7 @@ class CalendarList extends Component { 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,10 +212,10 @@ class CalendarList extends Component { return ( ); @@ -217,7 +223,7 @@ class CalendarList extends Component { 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} />