✨ [feature] update some depend packages(lanjingling0510#15)

Author: lanjingling0510

examples/basic/index.js

@@ -3,9 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { convertDate } from '../../lib/time.js';
 import DatePicker from '../../lib/index';
-// import DatePicker from '../../dist/react-mobile-datepicker.js';
-
-window.Perf = require('react-addons-perf');
 
 (function main() {
     class App extends React.Component {
@@ -61,9 +58,8 @@ window.Perf = require('react-addons-perf');
                         </a>
                     </div>
                     <DatePicker
-                        dateFormat={['hh', 'mm', 'ss']}
-                        showFormat="hh:mm:ss"
                         value={this.state.time}
+                        min={new Date(2017, 2, 2)}
                         theme={this.state.theme}
                         isOpen={this.state.isOpen}
                         onSelect={this.handleSelect}

lib/DatePicker.js

@@ -2,16 +2,33 @@
  * @module DatePicker Component
  */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import DatePickerItem from './DatePickerItem.js';
 import PureRender from './pureRender.js';
 import { convertDate, nextDate } from './time.js';
 
+type Props = {
+    theme: string,
+    value: Object,
+    min: Object,
+    max: Object,
+    dateFormat: Array<*>,
+    showFormat: string,
+    confirmText: string,
+    cancelText: string,
+    onSelect: Function,
+    onCancel: Function,
+}
+
+type State = {
+    value: Date,
+}
+
 /**
  * Class DatePicker Component Class
  * @extends Component
  */
-class DatePicker extends Component {
+class DatePicker extends Component<void, Props, State> {
     constructor(props) {
         super(props);
         this.state = {
@@ -99,17 +116,4 @@ class DatePicker extends Component {
     }
  }
 
-DatePicker.propTypes = {
-    theme: PropTypes.string,
-    value: PropTypes.object,
-    min: PropTypes.object,
-    max: PropTypes.object,
-    dateFormat: PropTypes.array,
-    showFormat: PropTypes.string,
-    confirmText: PropTypes.string,
-    cancelText: PropTypes.string,
-    onSelect: PropTypes.func,
-    onCancel: PropTypes.func,
-};
-
 export default DatePicker;

lib/DatePickerItem.js

@@ -2,7 +2,7 @@
 /**
  * @module Date组件
  */
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import * as TimeUtil from './time.js';
 import { shallowEqual } from './pureRender.js';
 import { addPrefixCss, formatCss } from './prefix.js';
@@ -40,12 +40,24 @@ const getTimeType = format => {
     throw new Error('时间格式必须包含 Y, M, D, h, m 或 s字母');
 }
 
+type Props = {
+    value: Object,
+    min: Object,
+    max: Object,
+    format: string,
+    onSelect: Function,
+}
+
+type State = {
+    translateY: number,
+    marginTop: number,
+}
 
 /**
  * Class Date组件类
  * @extends Component
  */
-class DatePickerItem extends Component {
+class DatePickerItem extends Component<void, Props, State> {
     constructor(props) {
         super(props);
         this.animating = false;                 // 判断是否在transition过渡动画之中
@@ -329,12 +341,4 @@ class DatePickerItem extends Component {
     }
 }
 
-DatePickerItem.propTypes = {
-    value: PropTypes.object,
-    min: PropTypes.object,
-    max: PropTypes.object,
-    format: PropTypes.string,
-    onSelect: PropTypes.func,
-};
-
 export default DatePickerItem;

lib/Modal.js

@@ -1,13 +1,17 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
 
+type Props = {
+    children: React.Element<*>,
+    isOpen: boolean,
+}
 
-class Modal extends Component {
-    static propTypes = {
-        children: PropTypes.node,
-        isOpen: PropTypes.bool,
-    }
+type DefaultProps = {
+    isOpen: boolean,
+}
+
+class Modal extends Component<DefaultProps, Props, void> {
 
     static defaultProps = {
         isOpen: false,

lib/index.js

@@ -1,10 +1,13 @@
 import './index.css';
-import React, { PropTypes } from 'react';
+import React from 'react';
 import DatePicker from './DatePicker.js';
 import Modal from './Modal.js';
 
+type EnhanceDatePickerProps<T> = T & {
+    isOpen: boolean,
+}
 
-function EnhanceDatePicker({ isOpen, ...props }) {
+function EnhanceDatePicker<T: *>({ isOpen, ...props }: EnhanceDatePickerProps<T>) {
     function onModalClose(event) {
         if (event.target === event.currentTarget) {
             props.onCancel();
@@ -21,8 +24,11 @@ function EnhanceDatePicker({ isOpen, ...props }) {
     );
 }
 
+type ModalDatePickerProps<T> = T & {
+    isPopup: boolean,
+}
 
-function ModalDatePicker({ isPopup, ...props }) {
+function ModalDatePicker<T: *>({ isPopup, ...props }: ModalDatePickerProps<T>) {
     if (!isPopup) {
         return <DatePicker {...props} />;
     }
@@ -34,20 +40,6 @@ function ModalDatePicker({ isPopup, ...props }) {
     );
 }
 
-ModalDatePicker.propTypes = {
-    isPopup: PropTypes.bool,
-    isOpen: PropTypes.bool,
-    theme: PropTypes.string,
-    value: PropTypes.object,
-    min: PropTypes.object,
-    max: PropTypes.object,
-    dateFormat: PropTypes.array,
-    confirmText: PropTypes.string,
-    cancelText: PropTypes.string,
-    onSelect: PropTypes.func,
-    onCancel: PropTypes.func,
-};
-
 ModalDatePicker.defaultProps = {
     isPopup: true,
     isOpen: false,