element-plus
Version:
A Component Library for Vue 3
1 lines • 7.66 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../packages/components/infinite-scroll/src/index.ts"],"sourcesContent":["// @ts-nocheck\nimport { nextTick } from 'vue'\nimport { throttle } from 'lodash-unified'\nimport {\n getOffsetTopDistance,\n getScrollContainer,\n isFunction,\n throwError,\n} from '@element-plus/utils'\nimport { useDeprecated } from '@element-plus/hooks'\n\nimport type { ComponentPublicInstance, ObjectDirective } from 'vue'\n\nexport const SCOPE = 'ElInfiniteScroll'\nexport const CHECK_INTERVAL = 50\nexport const DEFAULT_DELAY = 200\nexport const DEFAULT_DISTANCE = 0\n\nconst attributes = {\n delay: {\n type: Number,\n default: DEFAULT_DELAY,\n },\n distance: {\n type: Number,\n default: DEFAULT_DISTANCE,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n immediate: {\n type: Boolean,\n default: true,\n },\n}\n\ntype Attrs = typeof attributes\ntype ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }\ntype InfiniteScrollCallback = () => void\ntype InfiniteScrollEl = HTMLElement & {\n [SCOPE]: {\n container: HTMLElement | Window\n containerEl: HTMLElement\n instance: ComponentPublicInstance\n delay: number // export for test\n lastScrollTop: number\n cb: InfiniteScrollCallback\n onScroll: () => void\n observer?: MutationObserver\n }\n}\n\nconst getScrollOptions = (\n el: HTMLElement,\n instance: ComponentPublicInstance\n): ScrollOptions => {\n return Object.entries(attributes).reduce((acm, [name, option]) => {\n const { type, default: defaultValue } = option\n const attrVal = el.getAttribute(`infinite-scroll-${name}`)\n let value = instance[attrVal] ?? attrVal ?? defaultValue\n value = value === 'false' ? false : value\n value = type(value)\n acm[name] = Number.isNaN(value) ? defaultValue : value\n return acm\n }, {} as ScrollOptions)\n}\n\nconst destroyObserver = (el: InfiniteScrollEl) => {\n const { observer } = el[SCOPE]\n\n if (observer) {\n observer.disconnect()\n delete el[SCOPE].observer\n }\n}\n\nconst handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {\n const { container, containerEl, instance, observer, lastScrollTop } =\n el[SCOPE]\n const { disabled, distance } = getScrollOptions(el, instance)\n const { clientHeight, scrollHeight, scrollTop } = containerEl\n const delta = scrollTop - lastScrollTop\n\n el[SCOPE].lastScrollTop = scrollTop\n\n // trigger only if full check has done and not disabled and scroll down\n if (observer || disabled || delta < 0) return\n\n let shouldTrigger = false\n\n if (container === el) {\n shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance\n } else {\n // get the scrollHeight since el might be visible overflow\n const { clientTop, scrollHeight: height } = el\n const offsetTop = getOffsetTopDistance(el, containerEl)\n shouldTrigger =\n scrollTop + clientHeight >= offsetTop + clientTop + height - distance\n }\n\n if (shouldTrigger) {\n cb.call(instance)\n }\n}\n\nfunction checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {\n const { containerEl, instance } = el[SCOPE]\n const { disabled } = getScrollOptions(el, instance)\n\n if (disabled || containerEl.clientHeight === 0) return\n\n if (containerEl.scrollHeight <= containerEl.clientHeight) {\n cb.call(instance)\n } else {\n destroyObserver(el)\n }\n}\n\nconst InfiniteScroll: ObjectDirective<\n InfiniteScrollEl,\n InfiniteScrollCallback\n> = {\n async mounted(el, binding) {\n const { instance, value: cb } = binding\n\n useDeprecated(\n {\n scope: SCOPE,\n from: 'the directive v-infinite-scroll',\n replacement: 'the el-scrollbar infinite scroll',\n version: '3.0.0',\n ref: 'https://element-plus.org/en-US/component/scrollbar#infinite-scroll',\n },\n true\n )\n\n if (!isFunction(cb)) {\n throwError(SCOPE, \"'v-infinite-scroll' binding value must be a function\")\n }\n\n // ensure parentNode mounted\n await nextTick()\n\n const { delay, immediate } = getScrollOptions(el, instance)\n const container = getScrollContainer(el, true)\n const containerEl =\n container === window\n ? document.documentElement\n : (container as HTMLElement)\n const onScroll = throttle(handleScroll.bind(null, el, cb), delay)\n\n if (!container) return\n\n el[SCOPE] = {\n instance,\n container,\n containerEl,\n delay,\n cb,\n onScroll,\n lastScrollTop: containerEl.scrollTop,\n }\n\n if (immediate) {\n const observer = new MutationObserver(\n throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL)\n )\n el[SCOPE].observer = observer\n observer.observe(el, { childList: true, subtree: true })\n checkFull(el, cb)\n }\n\n container.addEventListener('scroll', onScroll)\n },\n unmounted(el) {\n if (!el[SCOPE]) return\n const { container, onScroll } = el[SCOPE]\n\n container?.removeEventListener('scroll', onScroll)\n destroyObserver(el)\n },\n async updated(el) {\n if (!el[SCOPE]) {\n await nextTick()\n } else {\n const { containerEl, cb, observer } = el[SCOPE]\n if (containerEl.clientHeight && observer) {\n checkFull(el, cb)\n }\n }\n },\n}\n\nexport default InfiniteScroll\n"],"mappings":"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"}