tav-ui
Version:
177 lines (174 loc) • 6.06 kB
JavaScript
import { ref, computed, unref, watch, nextTick } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { useWindowSizeFn } from '../../../../hooks/event/useWindowSizeFn2.mjs';
import { getViewportOffset } from '../../../../utils/domUtils2.mjs';
import { isBoolean } from '../../../../utils/is2.mjs';
import { useModalContext } from '../../../modal/src/hooks/useModalContext2.mjs';
import { useKeepScroll } from '../../../../hooks/event/useKeepScroll2.mjs';
function useTableScroll(propsRef, tableElRef, columnsRef, rowSelectionRef, getDataSourceRef, slots, wrapRef, formRef, actionRef) {
const tableHeightRef = ref(null);
const modalFn = useModalContext();
const debounceRedoHeight = useDebounceFn(redoHeight, 100);
const getCanResize = computed(() => {
const { canResize, scroll } = unref(propsRef);
return canResize && !(scroll || {}).y;
});
watch(() => [unref(getCanResize), unref(getDataSourceRef)?.length], () => {
debounceRedoHeight();
}, {
flush: "post"
});
function redoHeight() {
nextTick(() => {
calcTableHeight();
});
}
function setHeight(height) {
tableHeightRef.value = height;
modalFn?.redoModalHeight?.();
}
let footerEl;
let bodyEl;
const keepScrollIns = ref(null);
async function calcTableHeight() {
const {
resizeHeightOffset,
pagination,
maxHeight,
isCanResizeParent,
formRefMarginTopDistance,
tablePaddingDistance
} = unref(propsRef);
const table = unref(tableElRef);
if (!table)
return;
const tableEl = table.$el;
if (!tableEl)
return;
if (!bodyEl) {
bodyEl = tableEl.querySelector(".ant-table-body");
if (!bodyEl)
return;
}
if (unref(propsRef).keepScrollTop) {
keepScrollIns.value = useKeepScroll({ scrollEl: bodyEl });
}
const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
if (hasScrollBarY) {
tableEl.classList.contains("hide-scrollbar-y") && tableEl.classList.remove("hide-scrollbar-y");
} else {
!tableEl.classList.contains("hide-scrollbar-y") && tableEl.classList.add("hide-scrollbar-y");
}
if (hasScrollBarX) {
tableEl.classList.contains("hide-scrollbar-x") && tableEl.classList.remove("hide-scrollbar-x");
} else {
!tableEl.classList.contains("hide-scrollbar-x") && tableEl.classList.add("hide-scrollbar-x");
}
bodyEl.style.height = "100%";
if (isCanResizeParent) {
bodyEl.style.height = "100%";
if (!unref(getCanResize))
return;
} else {
bodyEl.style.height = "unset";
if (!unref(getCanResize))
return;
}
await nextTick();
const headEl = tableEl.querySelector(".ant-table-thead");
if (!headEl)
return;
let paginationHeight = 32;
if (!isBoolean(pagination)) {
paginationHeight = 32;
} else {
paginationHeight = 0;
}
let footerHeight = 0;
if (!isBoolean(pagination)) {
if (!footerEl) {
footerEl = tableEl.querySelector(".ant-table-footer");
} else {
const offsetHeight = footerEl.offsetHeight;
footerHeight += offsetHeight || 0;
}
}
let headerHeight = 0;
if (headEl) {
headerHeight = headEl.offsetHeight;
}
let bottomIncludeBody = 0;
let height = 0;
const tablePadding = tablePaddingDistance;
if (unref(wrapRef) && isCanResizeParent) {
const formMargin = formRefMarginTopDistance;
const TableMargin = 0;
const wrapHeight = unref(wrapRef)?.offsetHeight ?? 0;
let formHeight = unref(formRef)?.offsetHeight ?? 0;
const actionHeight = unref(actionRef)?.offsetHeight ?? 0;
formHeight = formHeight > actionHeight ? formHeight : actionHeight;
if (formHeight && formMargin) {
formHeight += formMargin;
}
let paginationMargin = 0;
if (isBoolean(pagination) && !pagination) {
paginationMargin = 0;
}
const headerCellHeight = tableEl.querySelector(".ant-table-title")?.offsetHeight ?? 0;
bottomIncludeBody = wrapHeight - formHeight - headerCellHeight - (tablePadding ? tablePadding : 0) - paginationMargin - TableMargin;
height = bottomIncludeBody - paginationHeight - footerHeight - headerHeight;
} else {
bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody;
height = bottomIncludeBody - (resizeHeightOffset || 0) - (tablePadding ? tablePadding : 0) - paginationHeight - footerHeight - headerHeight;
}
height = (height > maxHeight ? maxHeight : height) ?? height;
setHeight(height);
if (isCanResizeParent) {
bodyEl.style.height = `${height}px`;
} else {
if (!slots.footer) {
bodyEl.style.height = `${height}px`;
}
}
}
const fnInit = () => {
calcTableHeight();
nextTick(() => {
debounceRedoHeight();
});
};
useWindowSizeFn(calcTableHeight, 280);
const getScrollX = computed(() => {
let width = 0;
if (unref(rowSelectionRef)) {
width += 60;
}
const NORMAL_WIDTH = 150;
const columns = unref(columnsRef).filter((item) => !item.defaultHidden);
columns.forEach((item) => {
width += Number.parseInt(item.width) || 0;
});
const unsetWidthColumns = columns.filter((item) => !Reflect.has(item, "width"));
const len = unsetWidthColumns.length;
if (len !== 0) {
width += len * NORMAL_WIDTH;
}
const table = unref(tableElRef);
const tableWidth = table?.$el?.offsetWidth ?? 0;
return tableWidth > width ? "100%" : width;
});
const getScrollRef = computed(() => {
const tableHeight = unref(tableHeightRef);
const { canResize, scroll } = unref(propsRef);
return {
x: unref(getScrollX),
y: canResize ? tableHeight || 1 : null,
scrollToFirstRowOnChange: true,
...scroll
};
});
return { getScrollRef, redoHeight, fnInit, keepScrollIns };
}
export { useTableScroll };
//# sourceMappingURL=useTableScroll2.mjs.map