228 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			228 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| "use strict";
 | |
| 
 | |
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 | |
| 
 | |
| exports.__esModule = true;
 | |
| exports.default = void 0;
 | |
| 
 | |
| var _utils = require("../utils");
 | |
| 
 | |
| var _event = require("../utils/dom/event");
 | |
| 
 | |
| var _scroll = require("../utils/dom/scroll");
 | |
| 
 | |
| var _touch = require("../mixins/touch");
 | |
| 
 | |
| var _loading = _interopRequireDefault(require("../loading"));
 | |
| 
 | |
| // Utils
 | |
| // Mixins
 | |
| // Components
 | |
| var _createNamespace = (0, _utils.createNamespace)('pull-refresh'),
 | |
|     createComponent = _createNamespace[0],
 | |
|     bem = _createNamespace[1],
 | |
|     t = _createNamespace[2];
 | |
| 
 | |
| var DEFAULT_HEAD_HEIGHT = 50;
 | |
| var TEXT_STATUS = ['pulling', 'loosing', 'success'];
 | |
| 
 | |
| var _default = createComponent({
 | |
|   mixins: [_touch.TouchMixin],
 | |
|   props: {
 | |
|     disabled: Boolean,
 | |
|     successText: String,
 | |
|     pullingText: String,
 | |
|     loosingText: String,
 | |
|     loadingText: String,
 | |
|     pullDistance: [Number, String],
 | |
|     value: {
 | |
|       type: Boolean,
 | |
|       required: true
 | |
|     },
 | |
|     successDuration: {
 | |
|       type: [Number, String],
 | |
|       default: 500
 | |
|     },
 | |
|     animationDuration: {
 | |
|       type: [Number, String],
 | |
|       default: 300
 | |
|     },
 | |
|     headHeight: {
 | |
|       type: [Number, String],
 | |
|       default: DEFAULT_HEAD_HEIGHT
 | |
|     }
 | |
|   },
 | |
|   data: function data() {
 | |
|     return {
 | |
|       status: 'normal',
 | |
|       distance: 0,
 | |
|       duration: 0
 | |
|     };
 | |
|   },
 | |
|   computed: {
 | |
|     touchable: function touchable() {
 | |
|       return this.status !== 'loading' && this.status !== 'success' && !this.disabled;
 | |
|     },
 | |
|     headStyle: function headStyle() {
 | |
|       if (this.headHeight !== DEFAULT_HEAD_HEIGHT) {
 | |
|         return {
 | |
|           height: this.headHeight + "px"
 | |
|         };
 | |
|       }
 | |
|     }
 | |
|   },
 | |
|   watch: {
 | |
|     value: function value(loading) {
 | |
|       this.duration = this.animationDuration;
 | |
| 
 | |
|       if (loading) {
 | |
|         this.setStatus(+this.headHeight, true);
 | |
|       } else if (this.slots('success') || this.successText) {
 | |
|         this.showSuccessTip();
 | |
|       } else {
 | |
|         this.setStatus(0, false);
 | |
|       }
 | |
|     }
 | |
|   },
 | |
|   mounted: function mounted() {
 | |
|     this.bindTouchEvent(this.$refs.track);
 | |
|     this.scrollEl = (0, _scroll.getScroller)(this.$el);
 | |
|   },
 | |
|   methods: {
 | |
|     checkPullStart: function checkPullStart(event) {
 | |
|       this.ceiling = (0, _scroll.getScrollTop)(this.scrollEl) === 0;
 | |
| 
 | |
|       if (this.ceiling) {
 | |
|         this.duration = 0;
 | |
|         this.touchStart(event);
 | |
|       }
 | |
|     },
 | |
|     onTouchStart: function onTouchStart(event) {
 | |
|       if (this.touchable) {
 | |
|         this.checkPullStart(event);
 | |
|       }
 | |
|     },
 | |
|     onTouchMove: function onTouchMove(event) {
 | |
|       if (!this.touchable) {
 | |
|         return;
 | |
|       }
 | |
| 
 | |
|       if (!this.ceiling) {
 | |
|         this.checkPullStart(event);
 | |
|       }
 | |
| 
 | |
|       this.touchMove(event);
 | |
| 
 | |
|       if (this.ceiling && this.deltaY >= 0 && this.direction === 'vertical') {
 | |
|         (0, _event.preventDefault)(event);
 | |
|         this.setStatus(this.ease(this.deltaY));
 | |
|       }
 | |
|     },
 | |
|     onTouchEnd: function onTouchEnd() {
 | |
|       var _this = this;
 | |
| 
 | |
|       if (this.touchable && this.ceiling && this.deltaY) {
 | |
|         this.duration = this.animationDuration;
 | |
| 
 | |
|         if (this.status === 'loosing') {
 | |
|           this.setStatus(+this.headHeight, true);
 | |
|           this.$emit('input', true); // ensure value change can be watched
 | |
| 
 | |
|           this.$nextTick(function () {
 | |
|             _this.$emit('refresh');
 | |
|           });
 | |
|         } else {
 | |
|           this.setStatus(0);
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     ease: function ease(distance) {
 | |
|       var pullDistance = +(this.pullDistance || this.headHeight);
 | |
| 
 | |
|       if (distance > pullDistance) {
 | |
|         if (distance < pullDistance * 2) {
 | |
|           distance = pullDistance + (distance - pullDistance) / 2;
 | |
|         } else {
 | |
|           distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
 | |
|         }
 | |
|       }
 | |
| 
 | |
|       return Math.round(distance);
 | |
|     },
 | |
|     setStatus: function setStatus(distance, isLoading) {
 | |
|       var status;
 | |
| 
 | |
|       if (isLoading) {
 | |
|         status = 'loading';
 | |
|       } else if (distance === 0) {
 | |
|         status = 'normal';
 | |
|       } else {
 | |
|         status = distance < (this.pullDistance || this.headHeight) ? 'pulling' : 'loosing';
 | |
|       }
 | |
| 
 | |
|       this.distance = distance;
 | |
| 
 | |
|       if (status !== this.status) {
 | |
|         this.status = status;
 | |
|       }
 | |
|     },
 | |
|     genStatus: function genStatus() {
 | |
|       var h = this.$createElement;
 | |
|       var status = this.status,
 | |
|           distance = this.distance;
 | |
|       var slot = this.slots(status, {
 | |
|         distance: distance
 | |
|       });
 | |
| 
 | |
|       if (slot) {
 | |
|         return slot;
 | |
|       }
 | |
| 
 | |
|       var nodes = [];
 | |
|       var text = this[status + "Text"] || t(status);
 | |
| 
 | |
|       if (TEXT_STATUS.indexOf(status) !== -1) {
 | |
|         nodes.push(h("div", {
 | |
|           "class": bem('text')
 | |
|         }, [text]));
 | |
|       }
 | |
| 
 | |
|       if (status === 'loading') {
 | |
|         nodes.push(h(_loading.default, {
 | |
|           "attrs": {
 | |
|             "size": "16"
 | |
|           }
 | |
|         }, [text]));
 | |
|       }
 | |
| 
 | |
|       return nodes;
 | |
|     },
 | |
|     showSuccessTip: function showSuccessTip() {
 | |
|       var _this2 = this;
 | |
| 
 | |
|       this.status = 'success';
 | |
|       setTimeout(function () {
 | |
|         _this2.setStatus(0);
 | |
|       }, this.successDuration);
 | |
|     }
 | |
|   },
 | |
|   render: function render() {
 | |
|     var h = arguments[0];
 | |
|     var trackStyle = {
 | |
|       transitionDuration: this.duration + "ms",
 | |
|       transform: this.distance ? "translate3d(0," + this.distance + "px, 0)" : ''
 | |
|     };
 | |
|     return h("div", {
 | |
|       "class": bem()
 | |
|     }, [h("div", {
 | |
|       "ref": "track",
 | |
|       "class": bem('track'),
 | |
|       "style": trackStyle
 | |
|     }, [h("div", {
 | |
|       "class": bem('head'),
 | |
|       "style": this.headStyle
 | |
|     }, [this.genStatus()]), this.slots()])]);
 | |
|   }
 | |
| });
 | |
| 
 | |
| exports.default = _default; | 
