hongluan-ui
Version:
Hongluan Component Library for Vue 3
91 lines (88 loc) • 2.89 kB
JavaScript
import { ref, getCurrentInstance, watch, onMounted, onBeforeUnmount } from 'vue';
import { debounce } from 'lodash-unified';
import '../../../../utils/index.mjs';
import { isString } from '@vue/shared';
function useScroll(scrollContainer, cols, table) {
const scrollClass = ref("is-scrolling-left");
let resizeObserver = null;
const { proxy } = getCurrentInstance();
const hasFixedCol = () => cols.value.realCols.some((c) => !!c.fixed);
const getParentElement = () => {
var _a, _b;
let parent;
if (((_a = proxy == null ? void 0 : proxy.$parent) == null ? void 0 : _a.$options.name) === "Scrollbar") {
parent = (_b = table.value.parentElement) == null ? void 0 : _b.parentElement;
} else {
parent = table.value.parentElement;
}
return parent;
};
const getScrollContainer = () => {
let scrollContainerEle;
if (scrollContainer) {
if (isString(scrollContainer)) {
scrollContainerEle = document.querySelector(scrollContainer);
} else {
scrollContainerEle = scrollContainer;
}
} else {
scrollContainerEle = getParentElement();
}
return scrollContainerEle;
};
const initScrollClass = (container) => {
if (container.getBoundingClientRect().width >= table.value.scrollWidth) {
scrollClass.value = "is-scrolling-none";
} else {
scrollClass.value = "is-scrolling-left";
}
};
const scrollEventHandler = (event) => {
const { scrollLeft, offsetWidth, scrollWidth } = event.target;
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
scrollClass.value = "is-scrolling-right";
} else if (scrollLeft === 0) {
scrollClass.value = "is-scrolling-left";
} else {
scrollClass.value = "is-scrolling-middle";
}
};
const addScrollEvent = () => {
if (hasFixedCol()) {
const container = getScrollContainer();
initScrollClass(container);
container == null ? void 0 : container.addEventListener("scroll", scrollEventHandler, {
passive: true
});
resizeObserver = new ResizeObserver(debounce(() => {
initScrollClass(container);
}, 300));
resizeObserver.observe(container);
} else {
scrollClass.value = "is-scrolling-none";
}
};
const removeScrollEvent = () => {
const container = getScrollContainer();
container == null ? void 0 : container.removeEventListener("scroll", scrollEventHandler);
resizeObserver && resizeObserver.disconnect();
resizeObserver = null;
};
watch(() => cols.value.realCols, () => {
!resizeObserver && addScrollEvent();
}, {
deep: true
});
onMounted(() => {
addScrollEvent();
});
onBeforeUnmount(() => {
removeScrollEvent();
});
return {
scrollClass
};
}
export { useScroll };
//# sourceMappingURL=use-scroll.mjs.map