tav-ui/lib/packages/components/table/src/hooks/useTableScroll2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var useWindowSizeFn = require('../../../../hooks/event/useWindowSizeFn2.js');
var domUtils = require('../../../../utils/domUtils2.js');
var is = require('../../../../utils/is2.js');
var useModalContext = require('../../../modal/src/hooks/useModalContext2.js');
var useKeepScroll = require('../../../../hooks/event/useKeepScroll2.js');

function useTableScroll(propsRef, tableElRef, columnsRef, rowSelectionRef, getDataSourceRef, slots, wrapRef, formRef, actionRef) {
  const tableHeightRef = vue.ref(null);
  const modalFn = useModalContext.useModalContext();
  const debounceRedoHeight = core.useDebounceFn(redoHeight, 100);
  const getCanResize = vue.computed(() => {
    const { canResize, scroll } = vue.unref(propsRef);
    return canResize && !(scroll || {}).y;
  });
  vue.watch(() => [vue.unref(getCanResize), vue.unref(getDataSourceRef)?.length], () => {
    debounceRedoHeight();
  }, {
    flush: "post"
  });
  function redoHeight() {
    vue.nextTick(() => {
      calcTableHeight();
    });
  }
  function setHeight(height) {
    tableHeightRef.value = height;
    modalFn?.redoModalHeight?.();
  }
  let footerEl;
  let bodyEl;
  const keepScrollIns = vue.ref(null);
  async function calcTableHeight() {
    const {
      resizeHeightOffset,
      pagination,
      maxHeight,
      isCanResizeParent,
      formRefMarginTopDistance,
      tablePaddingDistance
    } = vue.unref(propsRef);
    const table = vue.unref(tableElRef);
    if (!table)
      return;
    const tableEl = table.$el;
    if (!tableEl)
      return;
    if (!bodyEl) {
      bodyEl = tableEl.querySelector(".ant-table-body");
      if (!bodyEl)
        return;
    }
    if (vue.unref(propsRef).keepScrollTop) {
      keepScrollIns.value = useKeepScroll.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 (!vue.unref(getCanResize))
        return;
    } else {
      bodyEl.style.height = "unset";
      if (!vue.unref(getCanResize))
        return;
    }
    await vue.nextTick();
    const headEl = tableEl.querySelector(".ant-table-thead");
    if (!headEl)
      return;
    let paginationHeight = 32;
    if (!is.isBoolean(pagination)) {
      paginationHeight = 32;
    } else {
      paginationHeight = 0;
    }
    let footerHeight = 0;
    if (!is.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 (vue.unref(wrapRef) && isCanResizeParent) {
      const formMargin = formRefMarginTopDistance;
      const TableMargin = 0;
      const wrapHeight = vue.unref(wrapRef)?.offsetHeight ?? 0;
      let formHeight = vue.unref(formRef)?.offsetHeight ?? 0;
      const actionHeight = vue.unref(actionRef)?.offsetHeight ?? 0;
      formHeight = formHeight > actionHeight ? formHeight : actionHeight;
      if (formHeight && formMargin) {
        formHeight += formMargin;
      }
      let paginationMargin = 0;
      if (is.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 = domUtils.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();
    vue.nextTick(() => {
      debounceRedoHeight();
    });
  };
  useWindowSizeFn.useWindowSizeFn(calcTableHeight, 280);
  const getScrollX = vue.computed(() => {
    let width = 0;
    if (vue.unref(rowSelectionRef)) {
      width += 60;
    }
    const NORMAL_WIDTH = 150;
    const columns = vue.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 = vue.unref(tableElRef);
    const tableWidth = table?.$el?.offsetWidth ?? 0;
    return tableWidth > width ? "100%" : width;
  });
  const getScrollRef = vue.computed(() => {
    const tableHeight = vue.unref(tableHeightRef);
    const { canResize, scroll } = vue.unref(propsRef);
    return {
      x: vue.unref(getScrollX),
      y: canResize ? tableHeight || 1 : null,
      scrollToFirstRowOnChange: true,
      ...scroll
    };
  });
  return { getScrollRef, redoHeight, fnInit, keepScrollIns };
}

exports.useTableScroll = useTableScroll;
//# sourceMappingURL=useTableScroll2.js.map