[changed] ✅ update version,An increase of five theme,A slide can move multiple dates.

Author: lanjingling0510

.github/preview.gif

@@ -53,6 +53,10 @@ class App extends React.Component {
 		this.setState({ isOpen: true });
 	}
 
+	handleCancel = () => {
+		this.setState({ isOpen: false });
+	}
+
 	handleSelect = (time) => {
 		this.setState({ time, isOpen: false });
 	}
@@ -70,9 +74,10 @@ class App extends React.Component {
 				</p>
 
 				<DatePicker
-					date={this.state.time}
+					value={this.state.time}
 					isOpen={this.state.isOpen}
-					onSelect={this.handleSelect} />
+					onSelect={this.handleSelect}
+					onCancel={this.handleCancel} />
 			</div>
 		);
 	}
@@ -87,13 +92,14 @@ ReactDOM.render(<App />, document.getElementById('react-box'));
 
 | Property        | Type           | Default  | Description |
 |:------------- |:------------- |:-------------- |:---------- |
-| btnColor      | String | #fff | done button color |
-| dateColor      | String      | #fff  | date of text color |
-| layerBackground | String     | #ffa70b | background color |
-| date | Date | new Date() | date value |
-| minDate  | Date | new Date(1970, 0, 1) | minimum date |
-| maxDate  | Date | new Date(2050, 0, 1) | maximum date |
+| isOpen      | Boolean | false | whether to open datepicker |
+| theme      | String      | default  | theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark' |
+| dateFormat | Array     | ['YYYY', 'M', 'D'] | according to year, month, day format specified display text. E.g ['YYYY年', 'MM月', 'DD日']|
+| value | Date | new Date() | date value |
+| min  | Date | new Date(1970, 0, 1) | minimum date |
+| max | Date | new Date(2050, 0, 1) | maximum date |
 | onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter |
+| onCancel | Function | () => {} | the callback function after click button of cancel |
 
 ## Changelog
 * [Changelog](CHANGELOG.md)

README.md

@@ -2,29 +2,25 @@ import './main.css';
 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';
+// import DatePicker from '../../lib/index';
+import DatePicker from '../../dist/react-mobile-datepicker.js';
 
-(function main() {
-    const BACKGROUNDS = {
-        'yellow': '#ffa70b',
-        'blue': '#0483bc',
-        'black': '#333',
-    };
+window.Perf = require('react-addons-perf');
 
+(function main() {
     class App extends React.Component {
         state = {
             time: new Date(),
             isOpen: false,
-            layerBackground: BACKGROUNDS.yellow,
+            theme: 'default',
         }
 
-        handleClick = () => {
-            this.setState({ isOpen: true });
+        handleToggle = (isOpen) => () => {
+            this.setState({ isOpen });
         }
 
-        handleBackgroundClick = (background) => () => {
-            this.setState({ layerBackground: BACKGROUNDS[background] });
+        handleThemeToggle = (theme) => () => {
+            this.setState({ theme, isOpen: true });
         }
 
         handleSelect = (time) => {
@@ -34,39 +30,42 @@ import DatePicker from '../../lib/index';
         render() {
             return (
                 <div className="App">
-                    <a
-                        className="select-btn"
-                        onClick={this.handleClick}>
-                        select time
-                    </a>
                     <p className="select-time ">
                         {convertDate(this.state.time, 'YYYY-MM-DD')}
                     </p>
                     <div>
                         <a
                             className="select-btn sm"
-                            style={{ background: BACKGROUNDS.yellow }}
-                            onClick={this.handleBackgroundClick('yellow')}>
-                            yellow
+                            onClick={this.handleThemeToggle('default')}>
+                            default
+                        </a>
+                        <a
+                            className="select-btn sm"
+                            onClick={this.handleThemeToggle('dark')}>
+                            dark
+                        </a>
+                        <a
+                            className="select-btn sm"
+                            onClick={this.handleThemeToggle('ios')}>
+                            ios
                         </a>
                         <a
                             className="select-btn sm"
-                            style={{ background: BACKGROUNDS.blue }}
-                            onClick={this.handleBackgroundClick('blue')}>
-                            blue
+                            onClick={this.handleThemeToggle('android')}>
+                            android
                         </a>
                         <a
                             className="select-btn sm"
-                            style={{ background: BACKGROUNDS.black }}
-                            onClick={this.handleBackgroundClick('black')}>
-                            black
+                            onClick={this.handleThemeToggle('android-dark')}>
+                            android-dark
                         </a>
                     </div>
                     <DatePicker
-                        layerBackground={this.state.layerBackground}
-                        date={this.state.time}
+                        value={this.state.time}
+                        theme={this.state.theme}
                         isOpen={this.state.isOpen}
-                        onSelect={this.handleSelect} />
+                        onSelect={this.handleSelect}
+                        onCancel={this.handleToggle(false)} />
                 </div>
             );
         }

dist/react-mobile-datepicker.js

@@ -24,7 +24,6 @@
     &.sm {
         margin: .5rem .5rem;
         padding: .5rem;
-        color: #fff;
     }
 }
 

dist/react-mobile-datepicker.js.map

@@ -1,125 +1,124 @@
 /**
- * @module DatePicker组件
+ * @module DatePicker Component
  */
 
 import React, { Component, PropTypes } from 'react';
 import DatePickerItem from './DatePickerItem.js';
-import { nextDate, getTime } from './time.js';
+import PureRender from './pureRender.js';
+import { convertDate, nextDate } from './time.js';
 
 /**
- * Class DatePicker组件类
+ * Class DatePicker Component Class
  * @extends Component
  */
 class DatePicker extends Component {
     constructor(props) {
-        super(props); // 容器转过的角度
+        super(props);
         this.state = {
-            date: this._productDate(props.date),
-            minDate: this._productDate(props.minDate),
-            maxDate: this._productDate(props.maxDate),
+            value: nextDate(this.props.value),
         };
 
         this.handleFinishBtnClick = this.handleFinishBtnClick.bind(this);
         this.handleDateSelect = this.handleDateSelect.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
-        this.setState({
-            date: this._productDate(nextProps.date),
-            minDate: this._productDate(nextProps.minDate),
-            maxDate: this._productDate(nextProps.maxDate),
-        });
+        // update value of state
+        const date = nextDate(nextProps.value);
+        if (date.getTime() !== this.state.value.getTime()) {
+            this.setState({ value: date });
+        }
     }
 
-    _productDate(date) {
-        const nDate = nextDate(date, 0);
-        return {
-            value: nDate,
-            timestamp: nDate.getTime(),
-            Year: getTime(nDate, 'Year'),
-            Month: getTime(nDate, 'Month'),
-            Date: getTime(nDate, 'Date'),
-        };
+    /**
+     * Optimization component, Prevents unnecessary rendering
+     * Only props or state change or value before re-rendering
+     *
+     * @param  {Object} nextProps next props
+     * @param  {Object} nextState next state
+     * @return {Boolean}          Whether re-rendering
+     */
+    shouldComponentUpdate(nextProps, nextState) {
+        const date = nextDate(nextState.value);
+        return date.getTime() !== this.state.value.getTime() ||
+                PureRender.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
     }
 
     /**
      * 点击完成按钮事件
      * @return {undefined}
      */
     handleFinishBtnClick() {
-        this.props.onSelect(this.state.date.value);
+        this.props.onSelect(this.state.value);
     }
 
     /**
      * 选择下一个日期
      * @return {undefined}
      */
-    handleDateSelect(date) {
-        this.setState({ date: this._productDate(date) });
+    handleDateSelect(value) {
+        this.setState({ value });
     }
 
     /**
      * render函数
      * @return {Object} JSX对象
      */
     render() {
-        const { layerBackground, btnColor, touchLen, dateColor } = this.props;
-        const { date, minDate, maxDate } = this.state;
-        const datePickerStyle = {
-            backgroundColor: layerBackground,
-        };
+        const { min, max, theme, dateFormat } = this.props;
+        const value = this.state.value;
+        const themeClassName =
+            ['default', 'dark', 'ios', 'android', 'android-dark'].indexOf(theme) === -1 ?
+            'default' : theme;
 
         return (
             <div
-                className="datepicker"
-                style={datePickerStyle}>
-                <p className="datepicker-navbar">
-                    <span
-                        style={{ color: btnColor }}
-                        className="datepicker-finish-btn"
-                        onClick={this.handleFinishBtnClick}>完成</span>
-                </p>
+                className={`datepicker ${themeClassName}`}>
+                <div className="datepicker-header">{convertDate(value, 'YYYY/MM/DD')}</div>
                 <div className="datepicker-content">
                     <DatePickerItem
-                        date={date}
+                        value={value}
+                        min={min}
+                        max={max}
                         typeName="Year"
-                        minDate={minDate}
-                        maxDate={maxDate}
-                        touchLen={touchLen}
-                        dateColor={dateColor}
+                        format={dateFormat[0]}
                         onSelect={this.handleDateSelect} />
                     <DatePickerItem
-                        date={date}
+                        value={value}
+                        min={min}
+                        max={max}
                         typeName="Month"
-                        minDate={minDate}
-                        maxDate={maxDate}
-                        touchLen={touchLen}
-                        dateColor={dateColor}
+                        format={dateFormat[1]}
                         onSelect={this.handleDateSelect} />
                     <DatePickerItem
-                        date={date}
+                        value={value}
+                        min={min}
+                        max={max}
                         typeName="Date"
-                        minDate={minDate}
-                        maxDate={maxDate}
-                        touchLen={touchLen}
-                        dateColor={dateColor}
+                        format={dateFormat[2]}
                         onSelect={this.handleDateSelect} />
                 </div>
+                <div className="datepicker-navbar">
+                    <a
+                        className="datepicker-navbar-btn"
+                        onClick={this.handleFinishBtnClick}>完成</a>
+                    <a
+                        className="datepicker-navbar-btn"
+                        onClick={this.props.onCancel}>取消</a>
+                </div>
             </div>
         );
     }
  }
 
 DatePicker.propTypes = {
-    touchLen: PropTypes.number,
-    btnColor: PropTypes.string,
-    dateColor: PropTypes.string,
-    layerBackground: PropTypes.string,
-    date: PropTypes.object,
-    minDate: PropTypes.object,
-    maxDate: PropTypes.object,
+    theme: PropTypes.string,
+    value: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    dateFormat: PropTypes.array,
     onSelect: PropTypes.func,
+    onCancel: PropTypes.func,
 };
 
-
 export default DatePicker;