@fe6/water-pro/es/table-pro/src/hooks/use-table-footer.js

An enterprise-class UI design language and Vue-based implementation

/** @format */
import { unref, computed, h, nextTick, watchEffect } from 'vue';
import { useEventListener } from '../../../_util/hooks/use-event-listener';
import TableFooter from '../components/table-footer';
export function useTableFooter(propsRef, scrollRef, tableElRef, getDataSourceRef) {
  var getIsEmptyData = computed(function () {
    return (unref(getDataSourceRef) || []).length === 0;
  });
  var getFooterProps = computed(function () {
    var _unref = unref(propsRef),
        summaryFunc = _unref.summaryFunc,
        showSummary = _unref.showSummary,
        summaryData = _unref.summaryData;

    return showSummary && !unref(getIsEmptyData) ? function () {
      return h(TableFooter, {
        summaryFunc: summaryFunc,
        summaryData: summaryData,
        scroll: unref(scrollRef)
      });
    } : undefined;
  });
  watchEffect(function () {
    handleSummary();
  });

  function handleSummary() {
    var _unref2 = unref(propsRef),
        showSummary = _unref2.showSummary;

    if (!showSummary || unref(getIsEmptyData)) {
      return;
    }

    nextTick(function () {
      var tableEl = unref(tableElRef);

      if (!tableEl) {
        return;
      }

      var bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body');
      var bodyDom = bodyDomList[0];
      useEventListener({
        el: bodyDom,
        name: 'scroll',
        listener: function listener() {
          var footerBodyDom = tableEl.$el.querySelector('.ant-table-footer .ant-table-body');

          if (!footerBodyDom || !bodyDom) {
            return;
          }

          footerBodyDom.scrollLeft = bodyDom.scrollLeft;
        },
        wait: 0,
        options: true
      });
    });
  }

  return {
    getFooterProps: getFooterProps
  };
}