Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-mobile-datepicker
Advanced tools
react-mobile-datepicker - npm Package Compare versions
Comparing version 2.0.1 to 2.0.2
@@ -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 @@ -------------------------------------- |
@@ -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 @@ |
@@ -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}])}); |
| { | ||
| "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", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.72%
101919
- Lines of code
- increased by13.3%
1167
No dependency changes