Tinysymphony · 7laria · Jul 9, 2019 · Sep 24, 2019 · Jan 2, 2020
diff --git a/Calendar.js b/Calendar.js
@@ -10,9 +10,6 @@ import {
   Text,
   Modal,
   Image,
-  StyleSheet,
-  ScrollView,
-  Dimensions,
   TouchableHighlight
 } from 'react-native';
 import Moment from 'moment';

diff --git a/Day/index.js b/Day/index.js
@@ -13,21 +13,22 @@ import {
 } from 'react-native';
 import Moment from 'moment';
 import styles from './style';
+import moment from 'moment';
 
 export default class Day extends Component {
   static propTypes = {
     onChoose: PropTypes.func
   }
-  constructor (props) {
+  constructor(props) {
     super(props);
     this._chooseDay = this._chooseDay.bind(this);
     this._statusCheck = this._statusCheck.bind(this);
     this._statusCheck();
   }
-  _chooseDay () {
+  _chooseDay() {
     this.props.onChoose && this.props.onChoose(this.props.date);
   }
-  _statusCheck (props) {
+  _statusCheck(props) {
     const {
       startDate,
       endDate,
@@ -49,22 +50,29 @@ export default class Day extends Component {
     this.isFocus = this.isMid || this.isStart || this.isEnd;
     return this.isFocus;
   }
-  shouldComponentUpdate (nextProps) {
+  shouldComponentUpdate(nextProps) {
     let prevStatus = this.isFocus;
     let nextStatus = this._statusCheck(nextProps);
     if (prevStatus || nextStatus) return true;
     return false;
   }
-  render () {
+  isDisabled = (day) => {
+    if (day)
+      return day.isBefore(Moment().subtract(2, 'day'))
+    else
+      return false
+  }
+  render() {
     const {
       date,
       color
     } = this.props;
     let text = date ? date.date() : '';
-    let mainColor = {color: color.mainColor};
-    let subColor = {color: color.subColor};
-    let mainBack = {backgroundColor: color.mainColor};
-    let subBack = {backgroundColor: color.subColor};
+    let mainColor = { color: color.mainColor };
+    let subColor = { color: color.subColor };
+    let mainBack = { backgroundColor: color.mainColor };
+    let subBack = { backgroundColor: color.subColor };
+
     return (
       <View
         style={[
@@ -77,6 +85,7 @@ export default class Day extends Component {
         {this.isValid ?
           <TouchableHighlight
             style={[styles.day, this.isToday && styles.today, this.isFocus && subBack]}
+            disabled={this.isDisabled(date)}
             underlayColor="rgba(255, 255, 255, 0.35)"
             onPress={this._chooseDay}>
             <Text style={[styles.dayText, subColor, this.isFocus && mainColor]}>{text}</Text>

diff --git a/MonthList.js b/MonthList.js
@@ -12,43 +12,47 @@ import {
 import Moment from 'moment';
 import styles from './CalendarStyle';
 import Month from './Month';
+import { FlatList } from 'react-native-gesture-handler';
+import {_getMonthList,_checkRange,_getWeekNums} from './utils'
 const {width} = Dimensions.get('window');
+
+
 export default class MonthList extends Component {
   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: _getMonthList(this.props)
     };
-    this._renderMonth = this._renderMonth.bind(this);
-    this._shouldUpdate = this._shouldUpdate.bind(this);
-    this._checkRange = this._checkRange.bind(this);
-    this._getWeekNums = this._getWeekNums.bind(this);
+
+    this._shouldUpdate = this._shouldUpdate.bind(this)
     this._scrollToSelecetdMonth = this._scrollToSelecetdMonth.bind(this);
   }
-  componentWillReceiveProps (nextProps) {
+  static getDerivedStateFromProps(nextProps, prevState){
     let isDateUpdated = ['startDate', 'endDate', 'minDate', 'maxDate'].reduce((prev, next) => {
-      if (prev || nextProps[next] !== this.props[next]) {
+      if (prev || nextProps[next] !== prevState[next]) {
         return true;
       }
       return prev;
     }, false);
     if (isDateUpdated) {
-      this.setState({
-        dataSource:
-          this.state.dataSource.cloneWithRows(this._getMonthList(nextProps))
-      });
+      return{
+        ...prevState,
+        dataSource:_getMonthList(nextProps)
+      };
+    }
+    return {
+      ...prevState
     }
   }
-  _renderMonth (month) {
+
+
+
+  _renderMonth =({item,index})=> {
     return (
       <Month
-        month={month.date || {}}
+        month={item.date || {}}
         {...this.props}
       />
     );
@@ -69,54 +73,24 @@ export default class MonthList extends Component {
     const {
       date
     } = month;
-    let next = this._checkRange(date, startDate, endDate);
-    let prev = this._checkRange(date, this.props.startDate, this.props.endDate);
+    let next = _checkRange(date, startDate, endDate);
+    let prev = _checkRange(date, this.props.startDate, this.props.endDate);
     if (prev || next) return true;
     return false;
   }
-  _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()
-    )) {
-      let month = {
-        date: minDate.clone()
-      };
-      month.shouldUpdate = this._shouldUpdate(month, props);
-      monthList.push(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')) {
-      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');
-    }
-    return total;
-  }
+
+
   _scrollToSelecetdMonth () {
     const {
       startDate,
       minDate
     } = this.props;
     let monthOffset = 12 * (startDate.year() - minDate.year()) +
       startDate.month() - minDate.month();
-    let weekOffset = this._getWeekNums(minDate, startDate);
+    let weekOffset = _getWeekNums(minDate, startDate);
     setTimeout(() => {
-      this.list && this.list.scrollTo({
-        x: 0,
-        y: monthOffset * (24 + 25) + (monthOffset ? weekOffset * Math.ceil(width / 7 + 10) : 0),
+      this.list && this.list.scrollToOffset({
+        offset: monthOffset * (24 + 25) + (monthOffset ? weekOffset * Math.ceil(width / 7 + 10) : 0),
         animated: true
       });
     }, 400);
@@ -126,13 +100,14 @@ export default class MonthList extends Component {
   }
   render () {
     return (
-      <ListView
+      <FlatList
         ref={(list) => {this.list = list;}}
         style={styles.scrollArea}
-        dataSource={this.state.dataSource}
-        renderRow={this._renderMonth}
+        data={this.state.dataSource}
+        renderItem={this._renderMonth}
         pageSize={2}
         initialListSize={2}
+        keyExtractor={(item,index)=> item.date.format('X')}
         showsVerticalScrollIndicator={false}
       />
     );

diff --git a/package.json b/package.json
@@ -1,59 +1,88 @@
 {
-	"name": "react-native-calendar-select",
-	"version": "0.1.2",
-	"description": "Calendar select component for react-native, like Airbnb.",
-	"main": "./Calendar.js",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Tinysymphony/react-native-calendar-select.git"
-	},
-	"scripts": {
-		"start": "react-native start",
-		"ios": "react-native run-ios",
-		"android": "react-native run-android",
-		"test": "jest",
-		"coverage": "cat ./coverage/lcov.info | coveralls",
-		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
-	},
-	"keywords": [
-		"react-native",
-		"react-native-calendar-xg",
-		"calendar"
-	],
-	"dependencies": {
-		"moment": "^2.18.1"
-	},
-	"peerDependencies": {
-		"prop-types": "^15.6.0",
-		"react": "^15.4.2",
-		"react-native": "^0.41.2"
-	},
-	"devDependencies": {
-		"coveralls": "^2.13.1",
-		"cz-conventional-changelog": "^2.0.0",
-		"babel-jest": "21.2.0",
-		"babel-preset-react-native": "4.0.0",
-		"enzyme": "^3.2.0",
-		"enzyme-adapter-react-16": "^1.1.0",
-		"istanbul": "^0.4.5",
-		"jest": "21.2.1",
-		"react": "^16.1.0",
-		"react-addons-test-utils": "^15.6.2",
-		"react-dom": "^16.2.0",
-		"react-native": "^0.50.0",
-		"react-test-renderer": "16.0.0"
-	},
-	"jest": {
-		"preset": "react-native",
-		"verbose": true,
-		"collectCoverage": true,
-		"moduleFileExtensions": [
-			"js"
-		]
-	},
-	"config": {
-		"commitizen": {
-			"path": "./node_modules/cz-conventional-changelog"
-		}
-	}
+  "_from": "react-native-calendar-select@0.1.2",
+  "_id": "react-native-calendar-select@0.1.2",
+  "_inBundle": false,
+  "_integrity": "sha512-iL/nVWS/5/+UfBTUP765FAn+/NBkYfJr+ap12EpO6y9+tq9sXnXIByX61fbk2R4FSTIwspL3EXr0U+yoXabB+A==",
+  "_location": "/react-native-calendar-select",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "version",
+    "registry": true,
+    "raw": "react-native-calendar-select@0.1.2",
+    "name": "react-native-calendar-select",
+    "escapedName": "react-native-calendar-select",
+    "rawSpec": "0.1.2",
+    "saveSpec": null,
+    "fetchSpec": "0.1.2"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/react-native-calendar-select/-/react-native-calendar-select-0.1.2.tgz",
+  "_shasum": "814302a2add128209e91d1485d9afdb83b726712",
+  "_spec": "react-native-calendar-select@0.1.2",
+  "_where": "/Users/developer7/Desktop/repository hotelhug/master/hotelhug-app",
+  "bugs": {
+    "url": "https://github.com/Tinysymphony/react-native-calendar-select/issues"
+  },
+  "bundleDependencies": false,
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "dependencies": {
+    "moment": "^2.18.1"
+  },
+  "deprecated": false,
+  "description": "Calendar select component for react-native, like Airbnb.",
+  "devDependencies": {
+    "babel-jest": "21.2.0",
+    "babel-preset-react-native": "4.0.0",
+    "coveralls": "^2.13.1",
+    "cz-conventional-changelog": "^2.0.0",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "istanbul": "^0.4.5",
+    "jest": "21.2.1",
+    "react": "^16.1.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.2.0",
+    "react-native": "^0.50.0",
+    "react-test-renderer": "16.0.0"
+  },
+  "homepage": "https://github.com/Tinysymphony/react-native-calendar-select#readme",
+  "jest": {
+    "preset": "react-native",
+    "verbose": true,
+    "collectCoverage": true,
+    "moduleFileExtensions": [
+      "js"
+    ]
+  },
+  "keywords": [
+    "react-native",
+    "react-native-calendar-xg",
+    "calendar"
+  ],
+  "main": "./Calendar.js",
+  "name": "react-native-calendar-select",
+  "peerDependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^15.4.2",
+    "react-native": "^0.41.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tinysymphony/react-native-calendar-select.git"
+  },
+  "scripts": {
+    "android": "react-native run-android",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "coverage": "cat ./coverage/lcov.info | coveralls",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "version": "0.1.2"
 }