tdesign-mobile-vue
Version:
tdesign-mobile-vue
280 lines (272 loc) • 10.6 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var core = require('@vueuse/core');
var debounce = require('lodash/debounce');
var pullDownRefresh_props = require('./props.js');
var shared_dom = require('../shared/dom.js');
var config = require('../config.js');
var loading_index = require('../loading/index.js');
var hooks_tnode = require('../hooks/tnode.js');
var pullDownRefresh_useTouch = require('./useTouch.js');
var hooks_useClass = require('../hooks/useClass.js');
var configProvider_useConfig = require('../config-provider/useConfig.js');
var shared_util = require('../shared/util.js');
var shared_useVModel_index = require('../shared/useVModel/index.js');
require('lodash/isFunction');
require('lodash/isString');
require('../loading/loading.js');
require('@babel/runtime/helpers/defineProperty');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/set-style.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isNumber');
require('lodash/isArray');
require('../loading/icon/spinner.js');
require('../loading/props.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('../loading/plugin.js');
require('../shared/component.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var prefix = config["default"].prefix;
var statusName = ["pulling", "loosing", "loading", "success", "initial"];
var _PullDownRefresh = vue.defineComponent({
name: "".concat(prefix, "-pull-down-refresh"),
components: {
TLoading: loading_index.Loading
},
props: pullDownRefresh_props["default"],
emits: ["refresh", "timeout", "scrolltolower", "update:value", "update:modelValue"],
setup: function setup(props) {
var pullDownRefreshClass = hooks_useClass.usePrefixClass("pull-down-refresh");
var _useConfig = configProvider_useConfig.useConfig("pullDownRefresh"),
globalConfig = _useConfig.globalConfig;
var renderContent = hooks_tnode.useContent();
var timer = null;
var distance = vue.ref(0);
var afterLoading = vue.ref(false);
var _toRefs = vue.toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = shared_useVModel_index.useVModel(value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
loading = _useVModel2[0],
setLoading = _useVModel2[1];
var loadingText = vue.computed(function () {
var _props$loadingTexts;
var index = statusName.indexOf(status.value);
var loadingTexts = ((_props$loadingTexts = props.loadingTexts) === null || _props$loadingTexts === void 0 ? void 0 : _props$loadingTexts.length) > 0 ? props.loadingTexts : globalConfig.value.loadingTexts;
return index >= 0 ? loadingTexts[index] : "";
});
var touch = pullDownRefresh_useTouch.useTouch();
var loadingBar = vue.ref();
var maxBar = vue.ref();
var _useElementSize = core.useElementSize(loadingBar),
loadingBarHeight = _useElementSize.height;
var _useElementSize2 = core.useElementSize(maxBar),
maxBarHeight = _useElementSize2.height;
var actualLoadingBarHeight = vue.ref(0);
var touchDir;
var touchThreshold = 5;
vue.watch([loading, loadingBarHeight], function (_ref, _ref2) {
var _ref3 = _slicedToArray__default["default"](_ref, 1),
val = _ref3[0];
var _ref4 = _slicedToArray__default["default"](_ref2, 1),
prevVal = _ref4[0];
if (val) {
distance.value = loadingBarHeight.value;
}
if (!val && prevVal) {
afterLoading.value = true;
}
}, {
immediate: true
});
var status = vue.computed(function () {
if (afterLoading.value) {
return "success";
}
if (!loading.value && distance.value === 0) {
return "initial";
}
if (distance.value < loadingBarHeight.value) {
return "pulling";
}
if (loading.value) {
return "loading";
}
return "loosing";
});
vue.watch(status, function (newVal) {
if (newVal === "success") {
setTimeout(function () {
distance.value = 0;
}, 300);
}
});
var onTouchStart = function onTouchStart(e) {
e.stopPropagation();
if (!pullDownRefresh_useTouch.isReachTop(e) || loading.value) return;
clearTimeout(timer);
timer = null;
distance.value = 0;
touch.start(e);
touchDir = 0;
};
var onTouchMove = function onTouchMove(e) {
e.stopPropagation();
if (!pullDownRefresh_useTouch.isReachTop(e) || loading.value) return;
touch.move(e);
var diffY = touch.diffY,
diffX = touch.diffX;
var absX = Math.abs(diffX.value);
var absY = Math.abs(diffY.value);
if (!touchDir && absX < touchThreshold && absY < touchThreshold) {
return;
}
if (!touchDir && absX < absY) {
touchDir = -1;
} else if (!touchDir && absX >= absY) {
touchDir = 1;
}
if (touchDir === 1) return;
actualLoadingBarHeight.value = diffY.value;
var nextDistance = pullDownRefresh_useTouch.easeDistance(diffY.value, loadingBarHeight.value);
if (diffY.value > 0) {
shared_dom.preventDefault(e, false);
}
if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {
distance.value = nextDistance;
}
};
var onTouchEnd = function onTouchEnd(e) {
e.stopPropagation();
if (!pullDownRefresh_useTouch.isReachTop(e) || loading.value) return;
if (status.value === "loosing") {
var _props$onRefresh;
distance.value = loadingBarHeight.value;
setLoading(true);
(_props$onRefresh = props.onRefresh) === null || _props$onRefresh === void 0 || _props$onRefresh.call(props);
timer = setTimeout(function () {
if (loading.value) {
var _props$onTimeout;
(_props$onTimeout = props.onTimeout) === null || _props$onTimeout === void 0 || _props$onTimeout.call(props);
setLoading(false);
}
}, props.refreshTimeout);
} else {
distance.value = 0;
}
};
var onReachBottom = debounce__default["default"](function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var _document$documentEle = document.documentElement,
clientHeight = _document$documentEle.clientHeight,
scrollHeight = _document$documentEle.scrollHeight;
var distance2 = 20;
if (scrollTop + clientHeight >= scrollHeight - distance2) {
var _props$onScrolltolowe;
(_props$onScrolltolowe = props.onScrolltolower) === null || _props$onScrolltolowe === void 0 || _props$onScrolltolowe.call(props);
}
}, 300, {
leading: true,
trailing: false
});
var onTransitionEnd = function onTransitionEnd() {
if (afterLoading.value) {
afterLoading.value = false;
}
};
var trackStyle = vue.computed(function () {
return {
transform: "translate3d(0, ".concat(distance.value, "px, 0)")
};
});
var heightDiff = (shared_util.reconvertUnit(props.maxBarHeight) - shared_util.reconvertUnit(props.loadingBarHeight)) / 2;
var loadingBarStyles = vue.computed(function () {
return {
transform: "translateY(".concat(heightDiff, "px)"),
height: "".concat(actualLoadingBarHeight.value, "px"),
maxHeight: shared_util.convertUnit(props.loadingBarHeight)
};
});
var maxBarStyles = vue.computed(function () {
return {
height: shared_util.convertUnit(props.maxBarHeight)
};
});
vue.onMounted(function () {
window.addEventListener("scroll", onReachBottom);
});
vue.onUnmounted(function () {
clearTimeout(timer);
window.removeEventListener("scroll", onReachBottom);
});
var renderLoading = function renderLoading() {
if (status.value === "loading") {
return vue.createVNode(vue.resolveComponent("t-loading"), vue.mergeProps({
"size": "24px",
"text": loadingText.value
}, props.loadingProps), null);
}
return vue.createVNode("div", {
"class": "".concat(pullDownRefreshClass.value, "__text")
}, [loadingText.value]);
};
return function () {
var content = renderContent("default", "content");
var className = "".concat(pullDownRefreshClass.value, "__track");
if (status.value !== "pulling") {
className = "".concat(className, " ").concat(pullDownRefreshClass.value, "__track--loosing");
}
return vue.createVNode("div", {
"class": pullDownRefreshClass.value
}, [vue.createVNode("div", {
"class": className,
"style": trackStyle.value,
"onTouchstart": onTouchStart,
"onTouchmove": onTouchMove,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd,
"onTransitionend": onTransitionEnd
}, [vue.createVNode("div", {
"ref": maxBar,
"class": "".concat(pullDownRefreshClass.value, "__tips"),
"style": maxBarStyles.value
}, [vue.createVNode("div", {
"ref": loadingBar,
"class": "".concat(pullDownRefreshClass.value, "__loading"),
"style": loadingBarStyles.value
}, [renderLoading()])]), content])]);
};
}
});
exports["default"] = _PullDownRefresh;
//# sourceMappingURL=pull-down-refresh.js.map