{"version":3,"file":"pull-down-refresh.mjs","sources":["../../src/pull-down-refresh/pull-down-refresh.tsx"],"sourcesContent":["import { defineComponent, onUnmounted, ref, toRefs, computed, watch, onMounted } from 'vue';\nimport { useElementSize } from '@vueuse/core';\nimport { debounce } from 'lodash-es';\nimport PullDownRefreshProps from './props';\nimport { convertUnit, reconvertUnit } from '../shared';\nimport { preventDefault } from '../shared/dom';\nimport config from '../config';\nimport TLoading from '../loading';\nimport useVModel from '../hooks/useVModel';\nimport { useContent } from '../hooks/tnode';\nimport { useTouch, isReachTop, easeDistance } from './useTouch';\nimport { usePrefixClass, useConfig } from '../hooks/useClass';\n\nconst { prefix } = config;\n\nconst statusName = ['pulling', 'loosing', 'loading', 'success', 'initial'];\n\nexport default defineComponent({\n name: `${prefix}-pull-down-refresh`,\n components: { TLoading },\n props: PullDownRefreshProps,\n emits: ['refresh', 'timeout', 'scrolltolower', 'update:value', 'update:modelValue'],\n setup(props) {\n const pullDownRefreshClass = usePrefixClass('pull-down-refresh');\n const { globalConfig } = useConfig('pullDownRefresh');\n const renderContent = useContent();\n\n let timer: any = null;\n\n // 滑动距离\n const distance = ref(0);\n const afterLoading = ref(false);\n const { value, modelValue } = toRefs(props);\n const [loading, setLoading] = useVModel(value, modelValue, props.defaultValue, props.onChange);\n\n const loadingText = computed(() => {\n const index = statusName.indexOf(status.value);\n const loadingTexts = props.loadingTexts?.length > 0 ? props.loadingTexts : globalConfig.value.loadingTexts;\n return index >= 0 ? loadingTexts[index] : '';\n });\n\n const touch = useTouch();\n const loadingBar = ref();\n const maxBar = ref();\n const { height: loadingBarHeight } = useElementSize(loadingBar);\n const { height: maxBarHeight } = useElementSize(maxBar);\n const actualLoadingBarHeight = ref(0);\n\n // 默认 0 左右移动 1 上下移动 -1\n let touchDir: -1 | 0 | 1;\n const touchThreshold = 5;\n\n watch(\n [loading, loadingBarHeight],\n ([val], [prevVal]) => {\n if (val) {\n distance.value = loadingBarHeight.value;\n }\n if (!val && prevVal) {\n afterLoading.value = true;\n }\n },\n {\n immediate: true,\n },\n );\n\n const status = computed(() => {\n if (afterLoading.value) {\n return 'success';\n }\n if (!loading.value && distance.value === 0) {\n return 'initial';\n }\n if (distance.value < loadingBarHeight.value) {\n return 'pulling';\n }\n if (loading.value) {\n return 'loading';\n }\n return 'loosing';\n });\n\n watch(status, (newVal) => {\n if (newVal === 'success') {\n // 延时300ms收起下拉框，加强刷新成功提示\n setTimeout(() => {\n distance.value = 0;\n }, 300);\n }\n });\n\n // 统一判断是否可以滑动\n const isTouchable = () => loading.value || props.disabled;\n\n const onTouchStart = (e: TouchEvent) => {\n if (isTouchable()) return;\n if (!isReachTop(e)) return;\n\n clearTimeout(timer);\n timer = null;\n distance.value = 0;\n touch.start(e);\n touchDir = 0;\n };\n\n const onTouchMove = (e: TouchEvent) => {\n if (isTouchable()) return;\n if (!isReachTop(e)) return;\n\n touch.move(e);\n\n const { diffY, diffX } = touch;\n const absX = Math.abs(diffX.value);\n const absY = Math.abs(diffY.value);\n\n if (!touchDir && absX < touchThreshold && absY < touchThreshold) {\n return;\n }\n if (!touchDir && absX < absY) {\n touchDir = -1;\n } else if (!touchDir && absX >= absY) {\n touchDir = 1;\n }\n\n // 左右移动时，不进行后续操作\n if (touchDir === 1) return;\n\n actualLoadingBarHeight.value = diffY.value;\n const nextDistance = easeDistance(diffY.value, loadingBarHeight.value);\n // 下拉时，防止下拉整个页面\n if (diffY.value > 0) {\n preventDefault(e, false);\n }\n if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {\n distance.value = nextDistance;\n }\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n if (isTouchable()) return;\n if (!isReachTop(e)) return;\n\n if (status.value === 'loosing') {\n distance.value = loadingBarHeight.value;\n setLoading(true);\n props.onRefresh?.();\n timer = setTimeout(() => {\n if (loading.value) {\n props.onTimeout?.();\n setLoading(false);\n }\n }, props.refreshTimeout);\n } else {\n distance.value = 0;\n }\n };\n\n const onReachBottom = debounce(\n () => {\n const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动高度\n const { clientHeight, scrollHeight } = document.documentElement; // 可视区域/屏幕高度， 页面高度\n const distance = 20; // 距离视窗 20 时，开始触发\n if (scrollTop + clientHeight >= scrollHeight - distance) {\n props.onScrolltolower?.();\n }\n },\n 300,\n {\n leading: true,\n trailing: false,\n },\n );\n\n const onTransitionEnd = () => {\n if (afterLoading.value) {\n afterLoading.value = false;\n }\n };\n\n const trackStyle = computed(() => {\n return {\n transform: `translate3d(0, ${distance.value}px, 0)`,\n };\n });\n const heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;\n const loadingBarStyles = computed(() => {\n return {\n transform: `translateY(${heightDiff}px)`,\n height: `${actualLoadingBarHeight.value}px`,\n maxHeight: convertUnit(props.loadingBarHeight),\n };\n });\n const maxBarStyles = computed(() => ({\n height: convertUnit(props.maxBarHeight),\n }));\n\n onMounted(() => {\n window.addEventListener('scroll', onReachBottom);\n });\n\n onUnmounted(() => {\n clearTimeout(timer);\n window.removeEventListener('scroll', onReachBottom);\n });\n const renderLoading = () => {\n if (status.value === 'loading') {\n return ;\n }\n return {loadingText.value}
;\n };\n return () => {\n const content = renderContent('default', 'content');\n let className = `${pullDownRefreshClass.value}__track`;\n if (status.value !== 'pulling') {\n className = `${className} ${pullDownRefreshClass.value}__track--loosing`;\n }\n return (\n \n
\n \n
\n {renderLoading()}\n
\n