xdesign-vue-next/cjs/table/hooks/useAffix.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

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

var isBoolean = require('lodash/isBoolean');
var vue = require('vue');
var utils_dom = require('../../utils/dom.js');
require('../../_chunks/dep-8d10b59f.js');
require('lodash/isString');
require('lodash/isFunction');
require('lodash/isArray');
require('../../utils/easing.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);

function useAffix(props) {
  var tableContentRef = vue.ref();
  var affixHeaderRef = vue.ref();
  var affixFooterRef = vue.ref();
  var horizontalScrollbarRef = vue.ref();
  var paginationRef = vue.ref();
  var showAffixHeader = vue.ref(true);
  var showAffixFooter = vue.ref(true);
  var showAffixPagination = vue.ref(true);
  var isVirtualScroll = vue.computed(function () {
    return props.scroll && props.scroll.type === "virtual" && (props.scroll.threshold || 100) < props.data.length;
  });
  var isAffixed = vue.computed(function () {
    return !!(props.headerAffixedTop || props.footerAffixedBottom || props.horizontalScrollAffixedBottom);
  });
  var lastScrollLeft = 0;
  var onHorizontalScroll = function onHorizontalScroll(scrollElement) {
    if (!isAffixed.value && !isVirtualScroll.value) return;
    var target = scrollElement;
    if (!target && tableContentRef.value) {
      lastScrollLeft = 0;
      target = tableContentRef.value;
    }
    if (!target) return;
    var left = target.scrollLeft;
    if (lastScrollLeft === left) return;
    lastScrollLeft = left;
    var toUpdateScrollElement = [tableContentRef.value, affixHeaderRef.value, affixFooterRef.value, horizontalScrollbarRef.value];
    for (var i = 0, len = toUpdateScrollElement.length; i < len; i++) {
      if (toUpdateScrollElement[i] && scrollElement !== toUpdateScrollElement[i]) {
        toUpdateScrollElement[i].scrollLeft = left;
      }
    }
  };
  var isAffixedBottomElementShow = function isAffixedBottomElementShow(elementRect, tableRect, headerHeight) {
    return tableRect.top + headerHeight < elementRect.top && elementRect.top > elementRect.height;
  };
  var getOffsetTop = function getOffsetTop(props2) {
    if (isBoolean__default["default"](props2)) return 0;
    return props2.offsetTop || 0;
  };
  var updateAffixHeaderOrFooter = function updateAffixHeaderOrFooter() {
    var _tableContentRef$valu, _tableContentRef$valu2, _affixFooterRef$value;
    if (!isAffixed.value && !isVirtualScroll.value) return;
    var pos = (_tableContentRef$valu = tableContentRef.value) === null || _tableContentRef$valu === void 0 ? void 0 : _tableContentRef$valu.getBoundingClientRect();
    var headerRect = (_tableContentRef$valu2 = tableContentRef.value) === null || _tableContentRef$valu2 === void 0 || (_tableContentRef$valu2 = _tableContentRef$valu2.querySelector("thead")) === null || _tableContentRef$valu2 === void 0 ? void 0 : _tableContentRef$valu2.getBoundingClientRect();
    var headerHeight = (headerRect === null || headerRect === void 0 ? void 0 : headerRect.height) || 0;
    var footerRect = (_affixFooterRef$value = affixFooterRef.value) === null || _affixFooterRef$value === void 0 ? void 0 : _affixFooterRef$value.getBoundingClientRect();
    if ((props.headerAffixedTop || isVirtualScroll.value) && affixHeaderRef.value) {
      var offsetTop = getOffsetTop(props.headerAffixProps || props.headerAffixedTop);
      var footerHeight = (footerRect === null || footerRect === void 0 ? void 0 : footerRect.height) || 0;
      var r = Math.abs(pos.top) < pos.height - headerHeight - offsetTop - footerHeight;
      if (isVirtualScroll.value) {
        r = pos.top > -1 * headerRect.height;
      }
      showAffixHeader.value = r;
    }
    if (props.footerAffixedBottom && affixFooterRef !== null && affixFooterRef !== void 0 && affixFooterRef.value) {
      showAffixFooter.value = isAffixedBottomElementShow(footerRect, pos, headerHeight);
    } else if (props.horizontalScrollAffixedBottom && horizontalScrollbarRef !== null && horizontalScrollbarRef !== void 0 && horizontalScrollbarRef.value) {
      var horizontalScrollbarRect = horizontalScrollbarRef.value.getBoundingClientRect();
      showAffixFooter.value = isAffixedBottomElementShow(horizontalScrollbarRect, pos, headerHeight);
    }
    if (props.paginationAffixedBottom && paginationRef.value) {
      var pageRect = paginationRef.value.getBoundingClientRect();
      showAffixPagination.value = isAffixedBottomElementShow(pageRect, pos, headerHeight);
    }
  };
  var onDocumentScroll = function onDocumentScroll() {
    updateAffixHeaderOrFooter();
  };
  var onFootScroll = function onFootScroll() {
    onHorizontalScroll(affixFooterRef.value);
  };
  var onHeaderScroll = function onHeaderScroll() {
    onHorizontalScroll(affixHeaderRef.value);
  };
  var horizontalScrollbarScroll = function horizontalScrollbarScroll() {
    onHorizontalScroll(horizontalScrollbarRef.value);
  };
  var onTableContentScroll = function onTableContentScroll() {
    onHorizontalScroll(tableContentRef.value);
  };
  var onFootMouseEnter = function onFootMouseEnter() {
    utils_dom.on(affixFooterRef.value, "scroll", onFootScroll);
  };
  var onFootMouseLeave = function onFootMouseLeave() {
    utils_dom.off(affixFooterRef.value, "scroll", onFootScroll);
  };
  var onHeaderMouseEnter = function onHeaderMouseEnter() {
    utils_dom.on(affixHeaderRef.value, "scroll", onHeaderScroll);
  };
  var onHeaderMouseLeave = function onHeaderMouseLeave() {
    utils_dom.off(affixHeaderRef.value, "scroll", onHeaderScroll);
  };
  var onScrollbarMouseEnter = function onScrollbarMouseEnter() {
    utils_dom.on(horizontalScrollbarRef.value, "scroll", horizontalScrollbarScroll);
  };
  var onScrollbarMouseLeave = function onScrollbarMouseLeave() {
    utils_dom.off(horizontalScrollbarRef.value, "scroll", horizontalScrollbarScroll);
  };
  var onTableContentMouseEnter = function onTableContentMouseEnter() {
    utils_dom.on(tableContentRef.value, "scroll", onTableContentScroll);
  };
  var onTableContentMouseLeave = function onTableContentMouseLeave() {
    utils_dom.off(tableContentRef.value, "scroll", onTableContentScroll);
  };
  var addHorizontalScrollListeners = function addHorizontalScrollListeners() {
    if (affixHeaderRef.value) {
      utils_dom.on(affixHeaderRef.value, "mouseenter", onHeaderMouseEnter);
      utils_dom.on(affixHeaderRef.value, "mouseleave", onHeaderMouseLeave);
    }
    if (props.footerAffixedBottom && affixFooterRef.value) {
      utils_dom.on(affixFooterRef.value, "mouseenter", onFootMouseEnter);
      utils_dom.on(affixFooterRef.value, "mouseleave", onFootMouseLeave);
    }
    if (props.horizontalScrollAffixedBottom && horizontalScrollbarRef.value) {
      utils_dom.on(horizontalScrollbarRef.value, "mouseenter", onScrollbarMouseEnter);
      utils_dom.on(horizontalScrollbarRef.value, "mouseleave", onScrollbarMouseLeave);
    }
    if ((isAffixed.value || isVirtualScroll.value) && tableContentRef.value) {
      utils_dom.on(tableContentRef.value, "mouseenter", onTableContentMouseEnter);
      utils_dom.on(tableContentRef.value, "mouseleave", onTableContentMouseLeave);
    }
  };
  var removeHorizontalScrollListeners = function removeHorizontalScrollListeners() {
    if (affixHeaderRef.value) {
      utils_dom.off(affixHeaderRef.value, "mouseenter", onHeaderMouseEnter);
      utils_dom.off(affixHeaderRef.value, "mouseleave", onHeaderMouseLeave);
    }
    if (affixFooterRef.value) {
      utils_dom.off(affixFooterRef.value, "mouseenter", onFootMouseEnter);
      utils_dom.off(affixFooterRef.value, "mouseleave", onFootMouseLeave);
    }
    if (tableContentRef.value) {
      utils_dom.off(tableContentRef.value, "mouseenter", onTableContentMouseEnter);
      utils_dom.off(tableContentRef.value, "mouseleave", onTableContentMouseLeave);
    }
    if (horizontalScrollbarRef.value) {
      utils_dom.off(horizontalScrollbarRef.value, "mouseenter", onScrollbarMouseEnter);
      utils_dom.off(horizontalScrollbarRef.value, "mouseleave", onScrollbarMouseLeave);
    }
  };
  var addVerticalScrollListener = function addVerticalScrollListener() {
    if (!isAffixed.value && !props.paginationAffixedBottom) return;
    var timer = setTimeout(function () {
      if (isAffixed.value || props.paginationAffixedBottom) {
        utils_dom.on(document, "scroll", onDocumentScroll);
      } else {
        utils_dom.off(document, "scroll", onDocumentScroll);
      }
      clearTimeout(timer);
    });
  };
  vue.watch([affixHeaderRef, affixFooterRef, horizontalScrollbarRef, tableContentRef], function () {
    addHorizontalScrollListeners();
    onHorizontalScroll();
    updateAffixHeaderOrFooter();
  });
  vue.watch(isAffixed, addVerticalScrollListener);
  vue.watch(function () {
    return [props.data, props.columns, props.headerAffixedTop, props.footerAffixedBottom, props.horizontalScrollAffixedBottom];
  }, function () {
    onHorizontalScroll();
  });
  vue.onBeforeMount(function () {
    utils_dom.off(document, "scroll", onDocumentScroll);
    removeHorizontalScrollListeners();
  });
  var setTableContentRef = function setTableContentRef(tableContent) {
    tableContentRef.value = tableContent;
    addVerticalScrollListener();
  };
  return {
    showAffixHeader: showAffixHeader,
    showAffixFooter: showAffixFooter,
    showAffixPagination: showAffixPagination,
    affixHeaderRef: affixHeaderRef,
    affixFooterRef: affixFooterRef,
    horizontalScrollbarRef: horizontalScrollbarRef,
    paginationRef: paginationRef,
    onHorizontalScroll: onHorizontalScroll,
    setTableContentRef: setTableContentRef,
    updateAffixHeaderOrFooter: updateAffixHeaderOrFooter
  };
}

exports["default"] = useAffix;
//# sourceMappingURL=useAffix.js.map