hongluan-ui/lib/components/simple-table/src/composables/use-scroll.js

Hongluan Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var lodashUnified = require('lodash-unified');
require('../../../../utils/index.js');
var shared = require('@vue/shared');

function useScroll(scrollContainer, cols, table) {
  const scrollClass = vue.ref("is-scrolling-left");
  let resizeObserver = null;
  const { proxy } = vue.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 (shared.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(lodashUnified.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;
  };
  vue.watch(() => cols.value.realCols, () => {
    !resizeObserver && addScrollEvent();
  }, {
    deep: true
  });
  vue.onMounted(() => {
    addScrollEvent();
  });
  vue.onBeforeUnmount(() => {
    removeScrollEvent();
  });
  return {
    scrollClass
  };
}

exports.useScroll = useScroll;
//# sourceMappingURL=use-scroll.js.map