diff --git a/MonthList.js b/MonthList.js
index 9c05255..38365a0 100644
--- a/MonthList.js
+++ b/MonthList.js
@@ -2,28 +2,18 @@
* Created by TinySymphony on 2017-05-11.
*/
-import React, {PropTypes, Component} from 'react';
-import {
- View,
- Text,
- ListView,
- Dimensions
-} from 'react-native';
-import Moment from 'moment';
-import styles from './CalendarStyle';
-import Month from './Month';
-const {width} = Dimensions.get('window');
+import React, { PropTypes, Component } from "react";
+import { View, Text, FlatList, Dimensions } from "react-native";
+import Moment from "moment";
+import styles from "./CalendarStyle";
+import Month from "./Month";
+const { width } = Dimensions.get("window");
export default class MonthList extends Component {
- constructor (props) {
+ constructor(props) {
super(props);
- this.ds = new ListView.DataSource({
- rowHasChanged: (r1, r2) => {
- return r2.shouldUpdate;
- }
- });
this.monthList = [];
this.state = {
- dataSource: this.ds.cloneWithRows(this._getMonthList())
+ dataSource: this._getMonthList()
};
this._renderMonth = this._renderMonth.bind(this);
this._shouldUpdate = this._shouldUpdate.bind(this);
@@ -31,109 +21,122 @@ export default class MonthList extends Component {
this._getWeekNums = this._getWeekNums.bind(this);
this._scrollToSelecetdMonth = this._scrollToSelecetdMonth.bind(this);
}
- componentWillReceiveProps (nextProps) {
- let isDateUpdated = ['startDate', 'endDate', 'minDate', 'maxDate'].reduce((prev, next) => {
- if (prev || nextProps[next] !== this.props[next]) {
- return true;
- }
- return prev;
- }, false);
+ componentWillReceiveProps(nextProps) {
+ let isDateUpdated = ["startDate", "endDate", "minDate", "maxDate"].reduce(
+ (prev, next) => {
+ if (prev || nextProps[next] !== this.props[next]) {
+ return true;
+ }
+ return prev;
+ },
+ false
+ );
if (isDateUpdated) {
this.setState({
- dataSource:
- this.state.dataSource.cloneWithRows(this._getMonthList(nextProps))
+ dataSourceUpdated: this._getMonthList(nextProps)
});
}
}
- _renderMonth (month) {
- return (
-
- );
+ _renderMonth(month) {
+ return ;
}
- _checkRange (date, start, end) {
+ _checkRange(date, start, end) {
if (!date || !start) return false;
- if (!end) return date.year() === start.year() && date.month() === start.month();
- if (date.year() < start.year() || (date.year() === start.year() && date.month() < start.month())) return false;
- if (date.year() > end.year() || (date.year() === end.year() && date.month() > end.month())) return false;
+ if (!end)
+ return date.year() === start.year() && date.month() === start.month();
+ if (
+ date.year() < start.year() ||
+ (date.year() === start.year() && date.month() < start.month())
+ )
+ return false;
+ if (
+ date.year() > end.year() ||
+ (date.year() === end.year() && date.month() > end.month())
+ )
+ return false;
return true;
}
- _shouldUpdate (month, props) {
+ _shouldUpdate(month, props) {
if (!props) return false;
- const {
- startDate,
- endDate
- } = props;
- const {
- date
- } = month;
+ const { startDate, endDate } = props;
+ const { date } = month;
let next = this._checkRange(date, startDate, endDate);
let prev = this._checkRange(date, this.props.startDate, this.props.endDate);
if (prev || next) return true;
return false;
}
- _getMonthList (props) {
+ _getMonthList(props) {
let minDate = (props || this.props).minDate.clone().date(1);
let maxDate = (props || this.props).maxDate.clone();
let monthList = [];
if (!maxDate || !minDate) return monthList;
- while (maxDate > minDate || (
- maxDate.year() === minDate.year() &&
- maxDate.month() === minDate.month()
- )) {
+ while (
+ maxDate > minDate ||
+ (maxDate.year() === minDate.year() && maxDate.month() === minDate.month())
+ ) {
let month = {
date: minDate.clone()
};
month.shouldUpdate = this._shouldUpdate(month, props);
monthList.push(month);
- minDate.add(1, 'month');
+ minDate.add(1, "month");
}
return monthList;
}
_getWeekNums(start, end) {
- let clonedMoment = Moment(start), date, day, num, y, m, total = 0;
- while (!clonedMoment.isSame(end, 'months')) {
+ let clonedMoment = Moment(start),
+ date,
+ day,
+ num,
+ y,
+ m,
+ total = 0;
+ while (!clonedMoment.isSame(end, "months")) {
y = clonedMoment.year();
m = clonedMoment.month();
date = new Date(y, m, 1);
day = date.getDay();
num = new Date(y, m + 1, 0).getDate();
total += Math.ceil((num + day) / 7);
- clonedMoment.add(1, 'months');
+ clonedMoment.add(1, "months");
}
return total;
}
- _scrollToSelecetdMonth () {
- const {
- startDate,
- minDate
- } = this.props;
- let monthOffset = 12 * (startDate.year() - minDate.year()) +
- startDate.month() - minDate.month();
+ _scrollToSelecetdMonth() {
+ const { startDate } = this.props;
+ let minDate = Moment();
+ let monthOffset =
+ 12 * (startDate.year() - minDate.year()) +
+ startDate.month() -
+ minDate.month();
let weekOffset = this._getWeekNums(minDate, startDate);
setTimeout(() => {
- this.list && this.list.scrollTo({
- x: 0,
- y: monthOffset * (24 + 25) + (monthOffset ? weekOffset * Math.ceil(width / 7 + 10) : 0),
- animated: true
- });
+ this.list &&
+ this.list.scrollToOffset({
+ offset:
+ monthOffset * (24 + 25) +
+ (monthOffset ? weekOffset * Math.ceil(width / 7 + 10) : 0),
+ animated: true
+ });
}, 400);
}
- componentDidMount () {
+ componentDidMount() {
this.props.startDate && this._scrollToSelecetdMonth();
}
- render () {
+ render() {
return (
- {this.list = list;}}
+ {
+ this.list = list;
+ }}
+ data={this.state.dataSource}
+ extraData={this.state.dataSourceUpdated}
style={styles.scrollArea}
- dataSource={this.state.dataSource}
- renderRow={this._renderMonth}
- pageSize={2}
- initialListSize={2}
- showsVerticalScrollIndicator={false}
+ renderItem={({ item }) => {
+ return this._renderMonth(item);
+ }}
+ initialNumToRender={2}
+ keyExtractor={(item, index) => index.toString()}
/>
);
}