react-mobile-datepicker - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

@@ -0,1 +1,7 @@
+v2.0.2 - Tue, 05 Jul 2016 00:48:26 GMT
+--------------------------------------
+
+- 
+
+
 v2.0.1 - Mon, 04 Jul 2016 14:45:41 GMT
@@ -2,0 +8,0 @@ --------------------------------------

dist/mobile-datepicker.js

@@ -95,12 +95,10 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	var _time = __webpack_require__(4);
+	var _DatePickerItem = __webpack_require__(4);
 
-	var _transition = __webpack_require__(5);
+	var _DatePickerItem2 = _interopRequireDefault(_DatePickerItem);
 
+	var _time = __webpack_require__(5);
+
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -125,37 +123,263 @@
 
+	        // 容器转过的角度
+
 	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DatePicker).call(this, props));
 
-	        var dates = Array.apply(undefined, _toConsumableArray(Array(5))).map(function (value, index) {
-	            var now = (0, _time.nextTime)(props.startDate, index - 2);
+	        _this.state = {
+	            angle: 0,
+	            date: _this._productDate(props.date),
+	            minDate: _this._productDate(props.minDate),
+	            maxDate: _this._productDate(props.maxDate)
+	        };
+
+	        _this.handleFinishBtnClick = _this.handleFinishBtnClick.bind(_this);
+	        _this.handleDateSelect = _this.handleDateSelect.bind(_this);
+	        return _this;
+	    }
+
+	    _createClass(DatePicker, [{
+	        key: '_productDate',
+	        value: function _productDate(date) {
+	            var nDate = (0, _time.nextDate)(date, 0);
 	            return {
-	                name: (0, _time.getTimeName)(now),
-	                value: now,
-	                angle: (2 - index) * 22.5
+	                value: nDate,
+	                timestamp: nDate.getTime(),
+	                Year: (0, _time.getTime)(nDate, 'Year'),
+	                Month: (0, _time.getTime)(nDate, 'Month'),
+	                Date: (0, _time.getTime)(nDate, 'Date')
 	            };
-	        });
+	        }
 
+	        /**
+	         * 点击完成按钮事件
+	         * @return {undefined}
+	         */
+
+	    }, {
+	        key: 'handleFinishBtnClick',
+	        value: function handleFinishBtnClick() {
+	            this.props.onSelect(this.state.date.value);
+	        }
+
+	        /**
+	         * 选择下一个日期
+	         * @return {undefined}
+	         */
+
+	    }, {
+	        key: 'handleDateSelect',
+	        value: function handleDateSelect(date) {
+	            this.setState({ date: this._productDate(date) });
+	        }
+
+	        /**
+	         * render函数
+	         * @return {Object} JSX对象
+	         */
+
+	    }, {
+	        key: 'render',
+	        value: function render() {
+	            var _props = this.props;
+	            var layerBackground = _props.layerBackground;
+	            var btnColor = _props.btnColor;
+	            var touchLen = _props.touchLen;
+	            var dateColor = _props.dateColor;
+	            var _state = this.state;
+	            var date = _state.date;
+	            var minDate = _state.minDate;
+	            var maxDate = _state.maxDate;
+
+	            var datePickerStyle = {
+	                backgroundColor: layerBackground
+	            };
+
+	            return _react2.default.createElement(
+	                'div',
+	                {
+	                    className: 'datepicker',
+	                    style: datePickerStyle },
+	                _react2.default.createElement(
+	                    'p',
+	                    { className: 'datepicker-navbar' },
+	                    _react2.default.createElement(
+	                        'span',
+	                        {
+	                            style: { color: btnColor },
+	                            className: 'datepicker-finish-btn',
+	                            onClick: this.handleFinishBtnClick },
+	                        '完成'
+	                    )
+	                ),
+	                _react2.default.createElement(
+	                    'div',
+	                    { className: 'datepicker-content' },
+	                    _react2.default.createElement(_DatePickerItem2.default, {
+	                        date: date,
+	                        typeName: 'Year',
+	                        minDate: minDate,
+	                        maxDate: maxDate,
+	                        touchLen: touchLen,
+	                        dateColor: dateColor,
+	                        onSelect: this.handleDateSelect }),
+	                    _react2.default.createElement(_DatePickerItem2.default, {
+	                        date: date,
+	                        typeName: 'Month',
+	                        minDate: minDate,
+	                        maxDate: maxDate,
+	                        touchLen: touchLen,
+	                        dateColor: dateColor,
+	                        onSelect: this.handleDateSelect }),
+	                    _react2.default.createElement(_DatePickerItem2.default, {
+	                        date: date,
+	                        typeName: 'Date',
+	                        minDate: minDate,
+	                        maxDate: maxDate,
+	                        touchLen: touchLen,
+	                        dateColor: dateColor,
+	                        onSelect: this.handleDateSelect })
+	                )
+	            );
+	        }
+	    }]);
+
+	    return DatePicker;
+	}(_react.Component);
+
+	DatePicker.propTypes = {
+	    touchLen: _react.PropTypes.number,
+	    btnColor: _react.PropTypes.string,
+	    dateColor: _react.PropTypes.string,
+	    layerBackground: _react.PropTypes.string,
+	    date: _react.PropTypes.object,
+	    minDate: _react.PropTypes.object,
+	    maxDate: _react.PropTypes.object,
+	    onSelect: _react.PropTypes.func
+	};
+
+	DatePicker.defaultProps = {
+	    touchLen: 40,
+	    dateColor: '#fff',
+	    btnColor: '#fff',
+	    layerBackground: '#ffa70b',
+	    date: new Date(),
+	    minDate: new Date(1970, 0, 1),
+	    maxDate: new Date(2050, 0, 1),
+	    onSelect: function onSelect() {}
+	};
+
+	exports.default = DatePicker;
+
+/***/ },
+/* 3 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _react = __webpack_require__(3);
+
+	var _react2 = _interopRequireDefault(_react);
+
+	var _time = __webpack_require__(5);
+
+	var TimeUtil = _interopRequireWildcard(_time);
+
+	var _transition = __webpack_require__(6);
+
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+	/**
+	 * @module Date组件
+	 */
+
+
+	/**
+	 * Class Date组件类
+	 * @extends Component
+	 */
+
+	var DatePickerItem = function (_Component) {
+	    _inherits(DatePickerItem, _Component);
+
+	    function DatePickerItem(props) {
+	        _classCallCheck(this, DatePickerItem);
+
+	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DatePickerItem).call(this, props));
+
 	        _this.animating = false; // 判断是否在transition过渡动画之中
 	        _this.touchY = 0; // 保存touchstart的pageY
 	        _this.angle = 0; // 容器转过的角度
-	        _this.state = {
-	            angle: 0,
-	            dates: dates
-	        };
-
-	        _this.handleFinishBtnClick = _this.handleFinishBtnClick.bind(_this);
 	        _this.renderDatepickerItem = _this.renderDatepickerItem.bind(_this);
 	        _this.handleContentTouch = _this.handleContentTouch.bind(_this);
 	        _this.handleContentTransitionEnd = _this.handleContentTransitionEnd.bind(_this);
-	        _this._moveToNext = _this._moveToNext.bind(_this);
+	        _this.state = {
+	            angle: 0
+	        };
 	        return _this;
 	    }
 
-	    /**
-	     * 根据角度返回透明度(0-1之间)
-	     * @param {number} angle 角度
-	     * @return
-	     */
+	    _createClass(DatePickerItem, [{
+	        key: 'componentWillMount',
+	        value: function componentWillMount() {
+	            var _this2 = this;
 
+	            var dates = Array.apply(undefined, _toConsumableArray(Array(5))).map(function (value, index) {
+	                var date = TimeUtil['next' + _this2.props.typeName](_this2.props.date.value, index - 2);
+	                return _extends({}, TimeUtil.getTime(date, _this2.props.typeName), {
+	                    angle: (2 - index) * 22.5
+	                });
+	            });
+	            this.setState({ dates: dates });
+	        }
+	    }, {
+	        key: 'componentWillReceiveProps',
+	        value: function componentWillReceiveProps(nextProps) {
+	            // 更新同级的组件日期视图
+	            var scroll = this.refs.scroll;
+	            var angle = this.angle;
+	            var typeName = this.props.typeName;
+	            var nowVal = this.props.date[typeName].value;
+	            var nextVal = nextProps.date[typeName].value;
+	            var nowstamp = this.props.date.timestamp;
+	            var nextstamp = nextProps.date.timestamp;
 
-	    _createClass(DatePicker, [{
+	            var direction = void 0;
+	            if (nextVal > nowVal && nextstamp > nowstamp || nextVal < nowVal && nextstamp > nowstamp) direction = 1;else if (nextVal > nowVal && nextstamp < nowstamp || nextVal < nowVal && nextstamp < nowstamp) direction = -1;
+	            if (direction) {
+	                this._moveTo(scroll, angle + direction * 22.5);
+	            }
+	        }
+
+	        /**
+	         * 根据角度返回透明度(0-1之间)
+	         * @param {number} angle 角度
+	         * @return
+	         */
+
+	    }, {
 	        key: '_setOpacity',
@@ -187,18 +411,14 @@ value: function _setOpacity(angle) {
 	        value: function _moveToNext(direction) {
-	            var scroll = this.refs.scroll;
-	            var angle = this.angle;
 	            var _props = this.props;
+	            var typeName = _props.typeName;
+	            var date = _props.date;
 	            var maxDate = _props.maxDate;
 	            var minDate = _props.minDate;
 
-
-	            var date = direction === 1 ? this.state.dates.find(function (value) {
-	                return value.value.getTime() > (0, _time.nextTime)(maxDate, 0).getTime() && angle + direction * 22.5 + value.angle === 0;
-	            }) : this.state.dates.find(function (value) {
-	                return value.value.getTime() < (0, _time.nextTime)(minDate, 0).getTime() && angle + direction * 22.5 + value.angle === 0;
-	            });
-	            if (date) {
-	                this._moveTo(scroll, angle);
+	            var nextDate = TimeUtil['next' + typeName](date.value, direction);
+	            var canMove = direction === 1 ? nextDate.getTime() <= maxDate.timestamp : nextDate.getTime() >= minDate.timestamp;
+	            if (canMove) {
+	                this.props.onSelect(nextDate);
 	            } else {
-	                this._moveTo(scroll, angle + direction * 22.5);
+	                this._moveTo(this.refs.scroll, this.angle);
 	            }
@@ -218,3 +438,3 @@ }
 	            this.animating = true;
-	            obj.style[_transition.TRANSITION] = _transition.TRANSFORM_CSS + ' .2s ease-out'; // eslint-disable-line
+	            obj.style[_transition.TRANSITION] = 'all .2s ease-out'; // eslint-disable-line
 	            this.setState({
@@ -226,18 +446,2 @@ angle: angle
 	        /**
-	         * 点击完成按钮事件
-	         * @return {undefined}
-	         */
-
-	    }, {
-	        key: 'handleFinishBtnClick',
-	        value: function handleFinishBtnClick() {
-	            var _this2 = this;
-
-	            var date = this.state.dates.find(function (value) {
-	                return value.angle + _this2.state.angle === 0;
-	            });
-	            this.props.onSelect(date.value);
-	        }
-
-	        /**
 	         * 滑动日期选择器事件
@@ -281,17 +485,12 @@ * @param  {Object} event 事件对象
 	        value: function handleContentTransitionEnd() {
-	            var _state = this.state;
-	            var dates = _state.dates;
-	            var angle = _state.angle;
+	            var _this3 = this;
 
-	            var date = dates.find(function (value) {
-	                return value.angle + angle === 0;
-	            });
+	            var date = this.props.date;
 	            var newDates = Array.apply(undefined, _toConsumableArray(Array(5))).map(function (value, index) {
-	                var now = (0, _time.nextTime)(date.value, index - 2);
-	                return {
-	                    name: (0, _time.getTimeName)(now),
-	                    value: now,
+	                var now = TimeUtil['next' + _this3.props.typeName](date.value, index - 2);
+	                return _extends({}, TimeUtil.getTime(now, _this3.props.typeName), {
 	                    angle: (2 - index) * 22.5
-	                };
+	                });
 	            });
+
 	            this.animating = false;
@@ -313,3 +512,3 @@ this._clearTransition(this.refs.scroll);
 	        key: 'renderDatepickerItem',
-	        value: function renderDatepickerItem(date) {
+	        value: function renderDatepickerItem(date, index) {
 	            var _itemStyle;
@@ -321,64 +520,28 @@
 	                {
-	                    key: date.value,
+	                    key: index,
 	                    style: itemStyle },
-	                date.name
+	                date.value,
+	                date.suffix
 	            );
 	        }
-
-	        /**
-	         * render函数
-	         * @return {Object} JSX对象
-	         */
-
 	    }, {
 	        key: 'render',
 	        value: function render() {
-	            var _props2 = this.props;
-	            var layerBackground = _props2.layerBackground;
-	            var btnColor = _props2.btnColor;
-
 	            var scrollStyle = _defineProperty({}, _transition.TRANSFORM, 'rotateX(' + this.state.angle + 'deg)');
 
-	            var datePickerStyle = {
-	                backgroundColor: layerBackground
-	            };
-
 	            return _react2.default.createElement(
 	                'div',
 	                {
-	                    className: 'datepicker',
-	                    style: datePickerStyle },
+	                    className: 'datepicker-viewport',
+	                    onTouchStart: this.handleContentTouch,
+	                    onTouchMove: this.handleContentTouch,
+	                    onTouchEnd: this.handleContentTouch,
+	                    onTransitionEnd: this.handleContentTransitionEnd },
 	                _react2.default.createElement(
-	                    'p',
-	                    { className: 'datepicker-navbar' },
-	                    _react2.default.createElement(
-	                        'span',
-	                        {
-	                            style: { color: btnColor },
-	                            className: 'datepicker-finish-btn',
-	                            onClick: this.handleFinishBtnClick },
-	                        '完成'
-	                    )
-	                ),
-	                _react2.default.createElement(
-	                    'div',
+	                    'ul',
 	                    {
-	                        ref: 'parent',
-	                        className: 'datepicker-content',
-	                        onTouchStart: this.handleContentTouch,
-	                        onTouchMove: this.handleContentTouch,
-	                        onTouchEnd: this.handleContentTouch,
-	                        onTransitionEnd: this.handleContentTransitionEnd },
-	                    _react2.default.createElement(
-	                        'div',
-	                        { className: 'datepicker-viewport' },
-	                        _react2.default.createElement(
-	                            'ul',
-	                            {
-	                                ref: 'scroll',
-	                                className: 'datepicker-scroll',
-	                                style: scrollStyle },
-	                            this.state.dates.map(this.renderDatepickerItem)
-	                        )
-	                    )
+	                        ref: 'scroll',
+	                        className: 'datepicker-scroll',
+	                        style: scrollStyle },
+	                    this.state.dates.map(this.renderDatepickerItem)
 	                )
@@ -389,39 +552,27 @@ );
 
-	    return DatePicker;
+	    return DatePickerItem;
 	}(_react.Component);
 
-	DatePicker.propTypes = {
+	DatePickerItem.propTypes = {
+	    date: _react.PropTypes.object.isRequired,
+	    minDate: _react.PropTypes.object.isRequired,
+	    maxDate: _react.PropTypes.object.isRequired,
+	    typeName: _react.PropTypes.string.isRequired,
 	    touchLen: _react.PropTypes.number,
-	    btnColor: _react.PropTypes.string,
 	    dateColor: _react.PropTypes.string,
-	    layerBackground: _react.PropTypes.string,
-	    startDate: _react.PropTypes.object,
-	    minDate: _react.PropTypes.object,
-	    maxDate: _react.PropTypes.object,
 	    onSelect: _react.PropTypes.func
 	};
 
-	DatePicker.defaultProps = {
+	DatePickerItem.defaultProps = {
+	    dateColor: '#fff',
 	    touchLen: 40,
-	    dateColor: '#fff',
-	    btnColor: '#fff',
-	    layerBackground: '#ffa70b',
-	    startDate: (0, _time.nextTime)(new Date(), 0),
-	    minDate: (0, _time.nextTime)(new Date(), -30),
-	    maxDate: (0, _time.nextTime)(new Date(), 0),
 	    onSelect: function onSelect() {}
 	};
 
-	exports.default = DatePicker;
+	exports.default = DatePickerItem;
 
 /***/ },
-/* 3 */
+/* 5 */
 /***/ function(module, exports) {
 
-	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
-
-/***/ },
-/* 4 */
-/***/ function(module, exports) {
-
 	'use strict';
@@ -432,7 +583,6 @@
 	});
-	exports.nextTime = nextTime;
-	exports.getTimeName = getTimeName;
-
-	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+	exports.nextYear = nextYear;
+	exports.nextMonth = nextMonth;
+	exports.nextDate = nextDate;
+	exports.getTime = getTime;
 	/**
@@ -442,4 +592,3 @@ * @module time工具
 
-	function convertDate(timestamp, formate) {
-	    var date = new Date(timestamp);
+	function convertDate(date, formate) {
 	    var year = date.getFullYear();
@@ -455,2 +604,8 @@ var month = date.getMonth() + 1;
 
+	function throwIfInvalidDate(date) {
+	    if (Object.prototype.toString.call(date, null) !== '[object Date]') {
+	        throw new Error('参数类型不对');
+	    }
+	}
+
 	/**
@@ -461,35 +616,45 @@ * 获取相对日期的偏移日期
 	 */
-	function nextTime() {
-	    var now = arguments.length <= 0 || arguments[0] === undefined ? new Date() : arguments[0];
-	    var index = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
+	function nextYear(now) {
+	    var index = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
 
-	    if (Object.prototype.toString.call(now, null) !== '[object Date]') {
-	        throw new Error('参数类型不对');
-	    }
+	    throwIfInvalidDate(now);
+	    var date = new Date(now.getFullYear() + index, now.getMonth(), now.getDate());
+	    return date;
+	}
 
-	    var date = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-	    date.setDate(now.getDate() + index);
+	function nextMonth(now) {
+	    var index = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+
+	    throwIfInvalidDate(now);
+	    var date = new Date(now.getFullYear(), now.getMonth() + index, now.getDate());
 	    return date;
 	}
 
+	function nextDate(now) {
+	    var index = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+
+	    throwIfInvalidDate(now);
+	    var date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + index);
+	    return date;
+	}
+
 	/**
-	 * 获取指定日期的格式化日期名称
+	 * 获取指定日期年，月或日
 	 * @param  {Date}     日期
 	 * @return {String}   格式化日期名称
 	 */
-	function getTimeName(now) {
-	    var _expection;
+	function getTime(date, type) {
+	    throwIfInvalidDate(date);
+	    var units = {
+	        Year: ['YYYY', '年'],
+	        Month: ['MM', '月'],
+	        Date: ['DD', '日']
+	    };
 
-	    if (Object.prototype.toString.call(now, null) !== '[object Date]') {
-	        throw new Error('参数类型不对');
-	    }
+	    if (!units[type]) throw new Error('类型不对');
 
-	    var expection = (_expection = {}, _defineProperty(_expection, convertDate(new Date().getTime(), 'YYYY-MM-DD'), '今天'), _defineProperty(_expection, convertDate(nextTime(new Date(), -1).getTime(), 'YYYY-MM-DD'), '昨天'), _expection);
-
-	    var timeStamp = now.getTime();
-	    var result = convertDate(timeStamp, 'YYYY-MM-DD');
-
-	    if (expection[result]) {
-	        return expection[result];
-	    }
+	    var result = {
+	        value: parseInt(convertDate(date, units[type][0]), 10),
+	        suffix: units[type][1]
+	    };
 	    return result;
@@ -499,3 +664,3 @@ }
 /***/ },
-/* 5 */
+/* 6 */
 /***/ function(module, exports) {
@@ -502,0 +667,0 @@

dist/mobile-datepicker.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.DatePicker=t(require("react")):e.DatePicker=t(e.react)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),n(1);var a=n(2),o=r(a);t["default"]=o["default"]},function(e,t){},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(3),f=r(c),p=n(4),d=n(5),h=function(e){function t(e){i(this,t);var n=s(this,Object.getPrototypeOf(t).call(this,e)),r=Array.apply(void 0,o(Array(5))).map(function(t,n){var r=(0,p.nextTime)(e.startDate,n-2);return{name:(0,p.getTimeName)(r),value:r,angle:22.5*(2-n)}});return n.animating=!1,n.touchY=0,n.angle=0,n.state={angle:0,dates:r},n.handleFinishBtnClick=n.handleFinishBtnClick.bind(n),n.renderDatepickerItem=n.renderDatepickerItem.bind(n),n.handleContentTouch=n.handleContentTouch.bind(n),n.handleContentTransitionEnd=n.handleContentTransitionEnd.bind(n),n._moveToNext=n._moveToNext.bind(n),n}return l(t,e),u(t,[{key:"_setOpacity",value:function(e){return e>0?((40-e)/40*100|0)/100:((40+e)/40*100|0)/100}},{key:"_clearTransition",value:function(e){e.style[d.TRANSITION]=""}},{key:"_moveToNext",value:function(e){var t=this.refs.scroll,n=this.angle,r=this.props,a=r.maxDate,o=r.minDate,i=1===e?this.state.dates.find(function(t){return t.value.getTime()>(0,p.nextTime)(a,0).getTime()&&n+22.5*e+t.angle===0}):this.state.dates.find(function(t){return t.value.getTime()<(0,p.nextTime)(o,0).getTime()&&n+22.5*e+t.angle===0});i?this._moveTo(t,n):this._moveTo(t,n+22.5*e)}},{key:"_moveTo",value:function(e,t){this.animating=!0,e.style[d.TRANSITION]=d.TRANSFORM_CSS+" .2s ease-out",this.setState({angle:t})}},{key:"handleFinishBtnClick",value:function(){var e=this,t=this.state.dates.find(function(t){return t.angle+e.state.angle===0});this.props.onSelect(t.value)}},{key:"handleContentTouch",value:function(e){if(e.preventDefault(),!this.animating)if("touchstart"===e.type)this.touchY=e.targetTouches[0].pageY,this.angle=this.state.angle;else if("touchmove"===e.type){var t=e.targetTouches[0].pageY,n=t-this.touchY,r=this.angle-parseInt(22.5*n/180,10);this.setState({angle:r})}else if("touchend"===e.type){var a=e.changedTouches[0].pageY,o=a-this.touchY,i=o>0?-1:1;1===i&&this.props.touchLen<-o||i===-1&&this.props.touchLen<o?this._moveToNext(i):this._moveTo(this.refs.scroll,this.angle)}}},{key:"handleContentTransitionEnd",value:function(){var e=this.state,t=e.dates,n=e.angle,r=t.find(function(e){return e.angle+n===0}),a=Array.apply(void 0,o(Array(5))).map(function(e,t){var n=(0,p.nextTime)(r.value,t-2);return{name:(0,p.getTimeName)(n),value:n,angle:22.5*(2-t)}});this.animating=!1,this._clearTransition(this.refs.scroll),this.setState({dates:a,angle:0})}},{key:"renderDatepickerItem",value:function(e){var t,n=(t={},a(t,d.TRANSFORM,"rotateX("+e.angle+"deg) translate3d(0,0,100px)"),a(t,"opacity",this._setOpacity(e.angle+this.state.angle)),a(t,"color",this.props.dateColor),t);return f["default"].createElement("li",{key:e.value,style:n},e.name)}},{key:"render",value:function(){var e=this.props,t=e.layerBackground,n=e.btnColor,r=a({},d.TRANSFORM,"rotateX("+this.state.angle+"deg)"),o={backgroundColor:t};return f["default"].createElement("div",{className:"datepicker",style:o},f["default"].createElement("p",{className:"datepicker-navbar"},f["default"].createElement("span",{style:{color:n},className:"datepicker-finish-btn",onClick:this.handleFinishBtnClick},"完成")),f["default"].createElement("div",{ref:"parent",className:"datepicker-content",onTouchStart:this.handleContentTouch,onTouchMove:this.handleContentTouch,onTouchEnd:this.handleContentTouch,onTransitionEnd:this.handleContentTransitionEnd},f["default"].createElement("div",{className:"datepicker-viewport"},f["default"].createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:r},this.state.dates.map(this.renderDatepickerItem)))))}}]),t}(c.Component);h.propTypes={touchLen:c.PropTypes.number,btnColor:c.PropTypes.string,dateColor:c.PropTypes.string,layerBackground:c.PropTypes.string,startDate:c.PropTypes.object,minDate:c.PropTypes.object,maxDate:c.PropTypes.object,onSelect:c.PropTypes.func},h.defaultProps={touchLen:40,dateColor:"#fff",btnColor:"#fff",layerBackground:"#ffa70b",startDate:(0,p.nextTime)(new Date,0),minDate:(0,p.nextTime)(new Date,-30),maxDate:(0,p.nextTime)(new Date,0),onSelect:function(){}},t["default"]=h},function(t,n){t.exports=e},function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=new Date(e),r=n.getFullYear(),a=n.getMonth()+1,o=n.getDate(),i=n.getHours(),s=n.getMinutes(),l=n.getSeconds();return t.replace(/Y+/,r).replace(/M+/,a).replace(/D+/,o).replace(/h+/,i).replace(/m+/,s).replace(/s+/,l)}function a(){var e=arguments.length<=0||void 0===arguments[0]?new Date:arguments[0],t=arguments.length<=1||void 0===arguments[1]?1:arguments[1];if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对");var n=new Date(e.getFullYear(),e.getMonth(),e.getDate());return n.setDate(e.getDate()+t),n}function o(e){var t;if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对");var o=(t={},n(t,r((new Date).getTime(),"YYYY-MM-DD"),"今天"),n(t,r(a(new Date,-1).getTime(),"YYYY-MM-DD"),"昨天"),t),i=e.getTime(),s=r(i,"YYYY-MM-DD");return o[s]?o[s]:s}Object.defineProperty(t,"__esModule",{value:!0}),t.nextTime=a,t.getTimeName=o},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=null,r=null,a=null;"string"==typeof document.body.style.transition?(t.TRANSITION=n="transition",t.TRANSITIONEND=r="transitionend",t.TRANSITION_CSS=a="transition"):"string"==typeof document.body.style.webkitTransition&&(t.TRANSITION=n="WebkitTransition",t.TRANSITION_CSS=a="-webkit-transition",t.TRANSITIONEND=r="webkitTransitionEnd");var o=null,i=null;"string"==typeof document.body.style.transform?(t.TRANSFORM=o="transform",t.TRANSFORM_CSS=i="transform"):"string"==typeof document.body.style.webkitTransform&&(t.TRANSFORM=o="WebkitTransform",t.TRANSFORM_CSS=i="-webkit-transform"),t.TRANSITION=n,t.TRANSITIONEND=r,t.TRANSITION_CSS=a,t.TRANSFORM=o,t.TRANSFORM_CSS=i}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.DatePicker=t(require("react")):e.DatePicker=t(e.react)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),n(1);var a=n(2),o=r(a);t["default"]=o["default"]},function(e,t){},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(3),u=r(s),c=n(4),p=r(c),f=n(5),d=function(e){function t(e){a(this,t);var n=o(this,Object.getPrototypeOf(t).call(this,e));return n.state={angle:0,date:n._productDate(e.date),minDate:n._productDate(e.minDate),maxDate:n._productDate(e.maxDate)},n.handleFinishBtnClick=n.handleFinishBtnClick.bind(n),n.handleDateSelect=n.handleDateSelect.bind(n),n}return i(t,e),l(t,[{key:"_productDate",value:function(e){var t=(0,f.nextDate)(e,0);return{value:t,timestamp:t.getTime(),Year:(0,f.getTime)(t,"Year"),Month:(0,f.getTime)(t,"Month"),Date:(0,f.getTime)(t,"Date")}}},{key:"handleFinishBtnClick",value:function(){this.props.onSelect(this.state.date.value)}},{key:"handleDateSelect",value:function(e){this.setState({date:this._productDate(e)})}},{key:"render",value:function(){var e=this.props,t=e.layerBackground,n=e.btnColor,r=e.touchLen,a=e.dateColor,o=this.state,i=o.date,l=o.minDate,s=o.maxDate,c={backgroundColor:t};return u["default"].createElement("div",{className:"datepicker",style:c},u["default"].createElement("p",{className:"datepicker-navbar"},u["default"].createElement("span",{style:{color:n},className:"datepicker-finish-btn",onClick:this.handleFinishBtnClick},"完成")),u["default"].createElement("div",{className:"datepicker-content"},u["default"].createElement(p["default"],{date:i,typeName:"Year",minDate:l,maxDate:s,touchLen:r,dateColor:a,onSelect:this.handleDateSelect}),u["default"].createElement(p["default"],{date:i,typeName:"Month",minDate:l,maxDate:s,touchLen:r,dateColor:a,onSelect:this.handleDateSelect}),u["default"].createElement(p["default"],{date:i,typeName:"Date",minDate:l,maxDate:s,touchLen:r,dateColor:a,onSelect:this.handleDateSelect})))}}]),t}(s.Component);d.propTypes={touchLen:s.PropTypes.number,btnColor:s.PropTypes.string,dateColor:s.PropTypes.string,layerBackground:s.PropTypes.string,date:s.PropTypes.object,minDate:s.PropTypes.object,maxDate:s.PropTypes.object,onSelect:s.PropTypes.func},d.defaultProps={touchLen:40,dateColor:"#fff",btnColor:"#fff",layerBackground:"#ffa70b",date:new Date,minDate:new Date(1970,0,1),maxDate:new Date(2050,0,1),onSelect:function(){}},t["default"]=d},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function a(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(3),d=a(f),h=n(5),y=r(h),m=n(6),v=function(e){function t(e){l(this,t);var n=s(this,Object.getPrototypeOf(t).call(this,e));return n.animating=!1,n.touchY=0,n.angle=0,n.renderDatepickerItem=n.renderDatepickerItem.bind(n),n.handleContentTouch=n.handleContentTouch.bind(n),n.handleContentTransitionEnd=n.handleContentTransitionEnd.bind(n),n.state={angle:0},n}return u(t,e),p(t,[{key:"componentWillMount",value:function(){var e=this,t=Array.apply(void 0,i(Array(5))).map(function(t,n){var r=y["next"+e.props.typeName](e.props.date.value,n-2);return c({},y.getTime(r,e.props.typeName),{angle:22.5*(2-n)})});this.setState({dates:t})}},{key:"componentWillReceiveProps",value:function(e){var t=this.refs.scroll,n=this.angle,r=this.props.typeName,a=this.props.date[r].value,o=e.date[r].value,i=this.props.date.timestamp,l=e.date.timestamp,s=void 0;o>a&&l>i||o<a&&l>i?s=1:(o>a&&l<i||o<a&&l<i)&&(s=-1),s&&this._moveTo(t,n+22.5*s)}},{key:"_setOpacity",value:function(e){return e>0?((40-e)/40*100|0)/100:((40+e)/40*100|0)/100}},{key:"_clearTransition",value:function(e){e.style[m.TRANSITION]=""}},{key:"_moveToNext",value:function(e){var t=this.props,n=t.typeName,r=t.date,a=t.maxDate,o=t.minDate,i=y["next"+n](r.value,e),l=1===e?i.getTime()<=a.timestamp:i.getTime()>=o.timestamp;l?this.props.onSelect(i):this._moveTo(this.refs.scroll,this.angle)}},{key:"_moveTo",value:function(e,t){this.animating=!0,e.style[m.TRANSITION]="all .2s ease-out",this.setState({angle:t})}},{key:"handleContentTouch",value:function(e){if(e.preventDefault(),!this.animating)if("touchstart"===e.type)this.touchY=e.targetTouches[0].pageY,this.angle=this.state.angle;else if("touchmove"===e.type){var t=e.targetTouches[0].pageY,n=t-this.touchY,r=this.angle-parseInt(22.5*n/180,10);this.setState({angle:r})}else if("touchend"===e.type){var a=e.changedTouches[0].pageY,o=a-this.touchY,i=o>0?-1:1;1===i&&this.props.touchLen<-o||i===-1&&this.props.touchLen<o?this._moveToNext(i):this._moveTo(this.refs.scroll,this.angle)}}},{key:"handleContentTransitionEnd",value:function(){var e=this,t=this.props.date,n=Array.apply(void 0,i(Array(5))).map(function(n,r){var a=y["next"+e.props.typeName](t.value,r-2);return c({},y.getTime(a,e.props.typeName),{angle:22.5*(2-r)})});this.animating=!1,this._clearTransition(this.refs.scroll),this.setState({dates:n,angle:0})}},{key:"renderDatepickerItem",value:function(e,t){var n,r=(n={},o(n,m.TRANSFORM,"rotateX("+e.angle+"deg) translate3d(0,0,100px)"),o(n,"opacity",this._setOpacity(e.angle+this.state.angle)),o(n,"color",this.props.dateColor),n);return d["default"].createElement("li",{key:t,style:r},e.value,e.suffix)}},{key:"render",value:function(){var e=o({},m.TRANSFORM,"rotateX("+this.state.angle+"deg)");return d["default"].createElement("div",{className:"datepicker-viewport",onTouchStart:this.handleContentTouch,onTouchMove:this.handleContentTouch,onTouchEnd:this.handleContentTouch,onTransitionEnd:this.handleContentTransitionEnd},d["default"].createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:e},this.state.dates.map(this.renderDatepickerItem)))}}]),t}(f.Component);v.propTypes={date:f.PropTypes.object.isRequired,minDate:f.PropTypes.object.isRequired,maxDate:f.PropTypes.object.isRequired,typeName:f.PropTypes.string.isRequired,touchLen:f.PropTypes.number,dateColor:f.PropTypes.string,onSelect:f.PropTypes.func},v.defaultProps={dateColor:"#fff",touchLen:40,onSelect:function(){}},t["default"]=v},function(e,t){"use strict";function n(e,t){var n=e.getFullYear(),r=e.getMonth()+1,a=e.getDate(),o=e.getHours(),i=e.getMinutes(),l=e.getSeconds();return t.replace(/Y+/,n).replace(/M+/,r).replace(/D+/,a).replace(/h+/,o).replace(/m+/,i).replace(/s+/,l)}function r(e){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function a(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getFullYear()+t,e.getMonth(),e.getDate());return n}function o(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getFullYear(),e.getMonth()+t,e.getDate());return n}function i(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getFullYear(),e.getMonth(),e.getDate()+t);return n}function l(e,t){r(e);var a={Year:["YYYY","年"],Month:["MM","月"],Date:["DD","日"]};if(!a[t])throw new Error("类型不对");var o={value:parseInt(n(e,a[t][0]),10),suffix:a[t][1]};return o}Object.defineProperty(t,"__esModule",{value:!0}),t.nextYear=a,t.nextMonth=o,t.nextDate=i,t.getTime=l},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=null,r=null,a=null;"string"==typeof document.body.style.transition?(t.TRANSITION=n="transition",t.TRANSITIONEND=r="transitionend",t.TRANSITION_CSS=a="transition"):"string"==typeof document.body.style.webkitTransition&&(t.TRANSITION=n="WebkitTransition",t.TRANSITION_CSS=a="-webkit-transition",t.TRANSITIONEND=r="webkitTransitionEnd");var o=null,i=null;"string"==typeof document.body.style.transform?(t.TRANSFORM=o="transform",t.TRANSFORM_CSS=i="transform"):"string"==typeof document.body.style.webkitTransform&&(t.TRANSFORM=o="WebkitTransform",t.TRANSFORM_CSS=i="-webkit-transform"),t.TRANSITION=n,t.TRANSITIONEND=r,t.TRANSITION_CSS=a,t.TRANSFORM=o,t.TRANSFORM_CSS=i}])});

package.json

 {
   "name": "react-mobile-datepicker",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "一个移动端时间选择器react组件",
@@ -20,3 +20,3 @@ "main": "./dist/mobile-datepicker.js",
     "start": "webpack-dev-server",
-    "release": "npm install build;scripts/release",
+    "release": "scripts/release",
     "preview-release": "scripts/preview-release",
@@ -23,0 +23,0 @@ "mocha": "./node_modules/.bin/mocha --compilers js:babel-core/register --require ./test/helper.js --recursive",

No alert changes

Improved metrics

Total package byte prevSize

101919

10.72%

Lines of code

1167

13.3%

No dependency changes