tdesign-mobile-vue
Version:
tdesign-mobile-vue
271 lines (267 loc) • 9.78 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { defineComponent, ref, toRefs, computed, watch, onMounted, onUnmounted, createVNode, resolveComponent, mergeProps } from 'vue';
import { useElementSize } from '@vueuse/core';
import debounce from 'lodash/debounce';
import PullDownRefreshProps from './props.js';
import { preventDefault } from '../shared/dom.js';
import config from '../config.js';
import { Loading } from '../loading/index.js';
import { useContent } from '../hooks/tnode.js';
import { useTouch, isReachTop, easeDistance } from './useTouch.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useConfig } from '../config-provider/useConfig.js';
import { reconvertUnit, convertUnit } from '../shared/util.js';
import { useVModel } from '../shared/useVModel/index.js';
import 'lodash/isFunction';
import 'lodash/isString';
import '../loading/loading.js';
import '@babel/runtime/helpers/defineProperty';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/set-style.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isNumber';
import 'lodash/isArray';
import '../loading/icon/spinner.js';
import '../loading/props.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import '../loading/plugin.js';
import '../shared/component.js';
var prefix = config.prefix;
var statusName = ["pulling", "loosing", "loading", "success", "initial"];
var _PullDownRefresh = defineComponent({
name: "".concat(prefix, "-pull-down-refresh"),
components: {
TLoading: Loading
},
props: PullDownRefreshProps,
emits: ["refresh", "timeout", "scrolltolower", "update:value", "update:modelValue"],
setup: function setup(props) {
var pullDownRefreshClass = usePrefixClass("pull-down-refresh");
var _useConfig = useConfig("pullDownRefresh"),
globalConfig = _useConfig.globalConfig;
var renderContent = useContent();
var timer = null;
var distance = ref(0);
var afterLoading = ref(false);
var _toRefs = toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
loading = _useVModel2[0],
setLoading = _useVModel2[1];
var loadingText = 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 = useTouch();
var loadingBar = ref();
var maxBar = ref();
var _useElementSize = useElementSize(loadingBar),
loadingBarHeight = _useElementSize.height;
var _useElementSize2 = useElementSize(maxBar),
maxBarHeight = _useElementSize2.height;
var actualLoadingBarHeight = ref(0);
var touchDir;
var touchThreshold = 5;
watch([loading, loadingBarHeight], function (_ref, _ref2) {
var _ref3 = _slicedToArray(_ref, 1),
val = _ref3[0];
var _ref4 = _slicedToArray(_ref2, 1),
prevVal = _ref4[0];
if (val) {
distance.value = loadingBarHeight.value;
}
if (!val && prevVal) {
afterLoading.value = true;
}
}, {
immediate: true
});
var status = 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";
});
watch(status, function (newVal) {
if (newVal === "success") {
setTimeout(function () {
distance.value = 0;
}, 300);
}
});
var onTouchStart = function onTouchStart(e) {
e.stopPropagation();
if (!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 (!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 = easeDistance(diffY.value, loadingBarHeight.value);
if (diffY.value > 0) {
preventDefault(e, false);
}
if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {
distance.value = nextDistance;
}
};
var onTouchEnd = function onTouchEnd(e) {
e.stopPropagation();
if (!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(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 = computed(function () {
return {
transform: "translate3d(0, ".concat(distance.value, "px, 0)")
};
});
var heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;
var loadingBarStyles = computed(function () {
return {
transform: "translateY(".concat(heightDiff, "px)"),
height: "".concat(actualLoadingBarHeight.value, "px"),
maxHeight: convertUnit(props.loadingBarHeight)
};
});
var maxBarStyles = computed(function () {
return {
height: convertUnit(props.maxBarHeight)
};
});
onMounted(function () {
window.addEventListener("scroll", onReachBottom);
});
onUnmounted(function () {
clearTimeout(timer);
window.removeEventListener("scroll", onReachBottom);
});
var renderLoading = function renderLoading() {
if (status.value === "loading") {
return createVNode(resolveComponent("t-loading"), mergeProps({
"size": "24px",
"text": loadingText.value
}, props.loadingProps), null);
}
return 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 createVNode("div", {
"class": pullDownRefreshClass.value
}, [createVNode("div", {
"class": className,
"style": trackStyle.value,
"onTouchstart": onTouchStart,
"onTouchmove": onTouchMove,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd,
"onTransitionend": onTransitionEnd
}, [createVNode("div", {
"ref": maxBar,
"class": "".concat(pullDownRefreshClass.value, "__tips"),
"style": maxBarStyles.value
}, [createVNode("div", {
"ref": loadingBar,
"class": "".concat(pullDownRefreshClass.value, "__loading"),
"style": loadingBarStyles.value
}, [renderLoading()])]), content])]);
};
}
});
export { _PullDownRefresh as default };
//# sourceMappingURL=pull-down-refresh.js.map