[fixed] 修复滚动快速出现的bug

Author: lanjingling0510

README.md

@@ -2,12 +2,15 @@
 [![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]
 
 一个移动端时间选择器react组件
+---------------------------------------
 
 
 安装
 ------------
 Using [npm](https://www.npmjs.com/):
-`$ npm install react-mobile-datepicker --save`
+
+	$ npm install react-mobile-datepicker --save
+
 
 然后，使用模块加载工具流，支持common.js或ES2015模块,例如[webpack](https://github.com/webpack/webpack)
 
@@ -26,7 +29,7 @@ require('react-mobile-datepicker/dist/react-mobile-datepicker.css');
 ### 例子
 
 ```js
-import React from 'react';
+import React, { Component } from 'react';
 import { render } from 'react-dom';
 import InfiniteCalendar from 'react-mobile-datepicker';
 import 'react-mobile-datepicker/dist/react-mobile-datepicker.css'; // only needs to be imported once
@@ -35,42 +38,44 @@ import 'react-mobile-datepicker/dist/react-mobile-datepicker.css'; // only needs
 var today = new Date();
 var minDate = Number(new Date()) - (24*60*60*1000) * 7; // One week before today
 
+class Wrap extends Component {
+	state = {
+		isOpen: true,
+	}
+	render() {
+		return (
+			<DatePicker
+				isOpen={this.state.isOpen}
+				startDate={today}
+				minDate={minDate}
+				onCancel={() => { this.state.isOpen = false; }}
+				onSelect={(time) => { console.log(time); }} />
+		);
+	}
+}
+
+
 render(
-    <DatePicker
-        isOpen={true}
-        startDate={today}
-        minDate={minDate}
-        onCancel={() => { isOpen = false; }}
-        onSelect={(time) => { console.log(time); }} />,
+  <Wrap />,
   document.getElementById('root')
 );
 ```
 
 
-目录
+Prop Types
 ------------
-```
-.
-├── .DS_Store
-├── .babelrc
-├── .eslintignore
-├── .eslintrc
-├── .git
-├── .gitignore
-├── .npmignore
-├── .travis.yml
-├── CHANGELOG.md
-├── README.md
-├── dist
-├── examples
-├── lib
-├── node_modules
-├── package.json
-├── scripts
-├── test
-└── webpack.config.js
 
-```
+| Property        | Type           | Default  | Description |
+| ------------- | ------------- | ---------------- |
+| btnColor      | String | #fff | 完成按钮颜色 |
+| dateColor      | String      | #fff  | 日期文字颜色 |
+| layerBackground | String     | #ffa70b | 背景颜色 |
+| isOpen | 	Boolean | true | 是否显示 |
+| startDate | Date | new Date() | 初始日期 |
+| minDate  | Date | 前一周 | 最小日期 |
+| maxDate  | Date | new Date() | 最小日期 |
+| onSelect | Function | () => {} | 点击完成后的回调函数, Date对象作为参数 |
+| onCancel | Function | () => {} | 隐藏时间选择器的回调函数 |
 
 Changelog
 -------------

examples/basic/index.js

@@ -9,6 +9,7 @@ import { nextTime } from '../../lib/time.js';
         <DatePicker
             isOpen={isOpen}
             startDate={nextTime(new Date(), -1)}
+            minDate={nextTime(new Date(), -3)}
             onCancel={() => { isOpen = false; }}
             onSelect={(time) => { console.log(time); }} />
     );

lib/DatePicker.js

@@ -54,10 +54,19 @@ class DatePicker extends Component {
     _moveToNext(direction) {
         const scroll = this.refs.scroll;
         const angle = this.angle;
-        if (direction === 1) {
-            this._moveTo(scroll, angle + 22.5);
+        const { maxDate, minDate } = this.props;
+
+        const date = (direction === 1) ?
+                    this.state.dates.find(value =>
+                        value.value.getTime() > nextTime(maxDate, 0).getTime() &&
+                            angle + direction * 22.5 + value.angle === 0) :
+                    this.state.dates.find(value =>
+                        value.value.getTime() < nextTime(minDate, 0).getTime() &&
+                            angle + direction * 22.5 + value.angle === 0);
+        if (date) {
+            this._moveTo(scroll, angle);
         } else {
-            this._moveTo(scroll, angle - 22.5);
+            this._moveTo(scroll, angle + direction * 22.5);
         }
     }
 
@@ -134,7 +143,7 @@ class DatePicker extends Component {
     }
 
     render() {
-        const { layerBackground } = this.props;
+        const { layerBackground, btnColor } = this.props;
         const scrollStyle = {
             [TRANSFORM]: `rotateX(${this.state.angle}deg)`,
         };
@@ -150,6 +159,7 @@ class DatePicker extends Component {
                 style={datePickerStyle}>
                 <p className="datepicker-navbar">
                     <span
+                        style={{ color: btnColor }}
                         className="datepicker-finish-btn"
                         onClick={this.handleFinishBtnClick}>完成</span>
                 </p>
@@ -180,24 +190,22 @@ DatePicker.propTypes = {
     dateColor: PropTypes.string,
     layerBackground: PropTypes.string,
     isOpen: PropTypes.bool,
-    startDate: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.number,
-    ]),
-    minDate: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.number,
-    ]),
+    startDate: PropTypes.object,
+    minDate: PropTypes.object,
+    maxDate: PropTypes.object,
     onSelect: PropTypes.func,
     onCancel: PropTypes.func,
 };
 
 DatePicker.defaultProps = {
     touchLen: 40,
     dateColor: '#fff',
+    btnColor: '#fff',
+    isOpen: true,
     layerBackground: '#ffa70b',
-    startDate: new Date(),
-    minDate: new Date(2016, 3, 7),
+    startDate: nextTime(new Date(), 0),
+    minDate: nextTime(new Date(), -30),
+    maxDate: nextTime(new Date(), 0),
     onSelect: () => {},
     onCancel: () => {},
 };

lib/index.css

@@ -15,7 +15,6 @@
 
     .datepicker-finish-btn {
         font: 12px/18px 微软雅黑;
-        color: #fff;
         line-height: 31px;
         font-size: 14px;
         float: right;

lib/time.js

@@ -17,7 +17,7 @@ function convertDate(timestamp, formate) {
 }
 
 
-export function nextTime(now, index = 1) {
+export function nextTime(now = new Date(), index = 1) {
     if (Object.prototype.toString.call(now, null) !== '[object Date]') {
         throw new Error('参数类型不对');
     }