diff --git a/Calendar.js b/Calendar.js index ed32f6e..0834f7c 100644 --- 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 index 57e321d..2b43ba2 100644 --- 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 ( {text} diff --git a/MonthList.js b/MonthList.js index 9c05255..564bbd3 100644 --- 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 ( ); @@ -69,42 +73,13 @@ 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, @@ -112,11 +87,10 @@ export default class MonthList extends Component { } = 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 ( - {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 index 07aac9e..1d4a29a 100644 --- 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" } diff --git a/utils.js b/utils.js new file mode 100644 index 0000000..45014ce --- /dev/null +++ b/utils.js @@ -0,0 +1,40 @@ +import Moment from 'moment' +export const _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; + return true; + } + + export const _getMonthList = (props) => { + let minDate =props.minDate.clone().date(1); + let maxDate = 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() + }; + monthList.push(month); + minDate.add(1, 'month'); + } + return monthList; + } + +export const _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; + } \ No newline at end of file