123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- "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;
|