From 9e902dc05c4ee7703ca7eb575c3d694507207a08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C4=B0lhan=20Tekir?= Date: Mon, 7 Jan 2019 15:27:34 +0300 Subject: [PATCH] Migrating from ListView to FlatList --- MonthList.js | 155 ++++++++++++++++++++++++++------------------------- 1 file changed, 79 insertions(+), 76 deletions(-) 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()} /> ); }