From 4516b14b592b00a13f6685d9642849f728cecd97 Mon Sep 17 00:00:00 2001 From: rainie <463103063@qq.com> Date: Mon, 27 Jun 2016 17:03:22 +0800 Subject: [PATCH] =?UTF-8?q?[changed]=20=E4=BF=AE=E6=94=B9finish-btn?= =?UTF-8?q?=E8=A1=8C=E9=AB=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.js | 2 +- dist/mobile-datepicker.js | 114 ++++++++++++++++++++++++++++------ dist/mobile-datepicker.min.js | 2 +- lib/index.css | 3 +- webpack.config.js | 2 +- 5 files changed, 98 insertions(+), 25 deletions(-) diff --git a/config.js b/config.js index 972eb47..ed87b7e 100644 --- a/config.js +++ b/config.js @@ -1,3 +1,3 @@ module.exports = { - name: 'mobile-datepicker' + name: 'mobile-datepicker', }; diff --git a/dist/mobile-datepicker.js b/dist/mobile-datepicker.js index 532c653..9fa4e0d 100644 --- a/dist/mobile-datepicker.js +++ b/dist/mobile-datepicker.js @@ -1,12 +1,12 @@ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("react")); + module.exports = factory(require("React")); else if(typeof define === 'function' && define.amd) - define(["react"], factory); + define(["React"], factory); else if(typeof exports === 'object') - exports["InfiniteScroll"] = factory(require("react")); + exports["DatePicker"] = factory(require("React")); else - root["InfiniteScroll"] = factory(root["react"]); + root["DatePicker"] = factory(root["React"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_3__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache @@ -60,7 +60,9 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _DatePicker = __webpack_require__(1); + __webpack_require__(1); + + var _DatePicker = __webpack_require__(2); var _DatePicker2 = _interopRequireDefault(_DatePicker); @@ -70,6 +72,12 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 1 */ +/***/ function(module, exports) { + + // removed by extract-text-webpack-plugin + +/***/ }, +/* 2 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -80,8 +88,6 @@ return /******/ (function(modules) { // webpackBootstrap 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; }; }(); - __webpack_require__(2); - var _react = __webpack_require__(3); var _react2 = _interopRequireDefault(_react); @@ -104,7 +110,6 @@ return /******/ (function(modules) { // webpackBootstrap * @module DatePicker组件 */ - /** * Class DatePicker组件类 * @extends Component @@ -127,9 +132,9 @@ return /******/ (function(modules) { // webpackBootstrap }; }); - _this.animating = false; - _this.touchY = 0; - _this.angle = 0; + _this.animating = false; // 判断是否在transition过渡动画之中 + _this.touchY = 0; // 保存touchstart的pageY + _this.angle = 0; // 容器转过的角度 _this.state = { angle: 0, dates: dates @@ -143,16 +148,37 @@ return /******/ (function(modules) { // webpackBootstrap return _this; } + /** + * 根据角度返回透明度(0-1之间) + * @param {number} angle 角度 + * @return + */ + + _createClass(DatePicker, [{ key: '_setOpacity', value: function _setOpacity(angle) { return angle > 0 ? ((40 - angle) / 40 * 100 | 0) / 100 : ((40 + angle) / 40 * 100 | 0) / 100; } + + /** + * 清除对象的transition样式 + * @param {Dom} obj 指定的对象 + * @return {undefined} + */ + }, { key: '_clearTransition', value: function _clearTransition(obj) { obj.style[_transition.TRANSITION] = ''; // eslint-disable-line } + + /** + * 滑动到下一日期 + * @param {number} direction 滑动方向 + * @return {undefined} + */ + }, { key: '_moveToNext', value: function _moveToNext(direction) { @@ -174,6 +200,14 @@ return /******/ (function(modules) { // webpackBootstrap this._moveTo(scroll, angle + direction * 22.5); } } + + /** + * 添加滑动动画 + * @param {DOM} obj DOM对象 + * @param {number} angle 角度 + * @return {undefined} + */ + }, { key: '_moveTo', value: function _moveTo(obj, angle) { @@ -183,6 +217,12 @@ return /******/ (function(modules) { // webpackBootstrap angle: angle }); } + + /** + * 点击完成按钮事件 + * @return {undefined} + */ + }, { key: 'handleFinishBtnClick', value: function handleFinishBtnClick() { @@ -193,6 +233,13 @@ return /******/ (function(modules) { // webpackBootstrap }); this.props.onSelect(date.value); } + + /** + * 滑动日期选择器事件 + * @param {Object} event 事件对象 + * @return {undefined} + */ + }, { key: 'handleContentTouch', value: function handleContentTouch(event) { @@ -217,6 +264,12 @@ return /******/ (function(modules) { // webpackBootstrap } } } + + /** + * transition过渡完成事件 + * @return {undefined} + */ + }, { key: 'handleContentTransitionEnd', value: function handleContentTransitionEnd() { @@ -242,6 +295,13 @@ return /******/ (function(modules) { // webpackBootstrap angle: 0 }); } + + /** + * 渲染一个日期DOM对象 + * @param {Object} date date数据 + * @return {Object} JSX对象 + */ + }, { key: 'renderDatepickerItem', value: function renderDatepickerItem(date) { @@ -256,6 +316,12 @@ return /******/ (function(modules) { // webpackBootstrap date.name ); } + + /** + * render函数 + * @return {Object} JSX对象 + */ + }, { key: 'render', value: function render() { @@ -339,17 +405,11 @@ return /******/ (function(modules) { // webpackBootstrap exports.default = DatePicker; -/***/ }, -/* 2 */ -/***/ function(module, exports) { - - // removed by extract-text-webpack-plugin - /***/ }, /* 3 */ /***/ function(module, exports) { - module.exports = __WEBPACK_EXTERNAL_MODULE_3__; + module.exports = React; /***/ }, /* 4 */ @@ -365,6 +425,10 @@ return /******/ (function(modules) { // webpackBootstrap 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; } + /** + * @module time工具 + */ + function convertDate(timestamp, formate) { var date = new Date(timestamp); var year = date.getFullYear(); @@ -377,6 +441,11 @@ return /******/ (function(modules) { // webpackBootstrap return formate.replace(/Y+/, year).replace(/M+/, month).replace(/D+/, day).replace(/h+/, hour).replace(/m+/, minute).replace(/s+/, second); } + /** + * 获取相对日期的偏移日期 + * @param {Date} 日期 + * @return {number} 相对的天数 + */ 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]; @@ -390,6 +459,11 @@ return /******/ (function(modules) { // webpackBootstrap return date; } + /** + * 获取指定日期的格式化日期名称 + * @param {Date} 日期 + * @return {String} 格式化日期名称 + */ function getTimeName(now) { var _expection; @@ -425,7 +499,7 @@ return /******/ (function(modules) { // webpackBootstrap exports.TRANSITIONEND = TRANSITIONEND = 'transitionend'; exports.TRANSITION_CSS = TRANSITION_CSS = 'transition'; } else if (typeof document.body.style.webkitTransition === 'string') { - exports.TRANSITION = TRANSITION = 'webkitTransition'; + exports.TRANSITION = TRANSITION = 'WebkitTransition'; exports.TRANSITION_CSS = TRANSITION_CSS = '-webkit-transition'; exports.TRANSITIONEND = TRANSITIONEND = 'webkitTransitionEnd'; } @@ -436,7 +510,7 @@ return /******/ (function(modules) { // webpackBootstrap exports.TRANSFORM = TRANSFORM = 'transform'; exports.TRANSFORM_CSS = TRANSFORM_CSS = 'transform'; } else if (typeof document.body.style.webkitTransform === 'string') { - exports.TRANSFORM = TRANSFORM = 'webkitTransform'; + exports.TRANSFORM = TRANSFORM = 'WebkitTransform'; exports.TRANSFORM_CSS = TRANSFORM_CSS = '-webkit-transform'; } diff --git a/dist/mobile-datepicker.min.js b/dist/mobile-datepicker.min.js index 20bb2a8..7d1f149 100644 --- a/dist/mobile-datepicker.min.js +++ b/dist/mobile-datepicker.min.js @@ -1 +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.InfiniteScroll=t(require("react")):e.InfiniteScroll=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});var a=n(1),o=r(a);t["default"]=o["default"]},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);t0?((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.touchLen0?((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