ant-design-vue/es/vc-table/FixedHolder/index.js

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

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { createVNode as _createVNode } from "vue";
import ColGroup from '../ColGroup';
import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRef, watchEffect } from 'vue';
import { useInjectTable } from '../context/TableContext';
import classNames from '../../_util/classNames';
import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
function useColumnWidth(colWidthsRef, columCountRef) {
  return computed(function () {
    var cloneColumns = [];
    var colWidths = colWidthsRef.value;
    var columCount = columCountRef.value;
    for (var i = 0; i < columCount; i += 1) {
      var val = colWidths[i];
      if (val !== undefined) {
        cloneColumns[i] = val;
      } else {
        return null;
      }
    }
    return cloneColumns;
  });
}
export default defineComponent({
  name: 'FixedHolder',
  inheritAttrs: false,
  props: ['columns', 'flattenColumns', 'stickyOffsets', 'customHeaderRow', 'noData', 'maxContentScroll', 'colWidths', 'columCount', 'direction', 'fixHeader', 'stickyTopOffset', 'stickyBottomOffset', 'stickyClassName'],
  emits: ['scroll'],
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs,
      slots = _ref.slots,
      emit = _ref.emit;
    var tableContext = useInjectTable();
    var combinationScrollBarSize = computed(function () {
      return tableContext.isSticky && !props.fixHeader ? 0 : tableContext.scrollbarSize;
    });
    var scrollRef = ref();
    var onWheel = function onWheel(e) {
      var currentTarget = e.currentTarget,
        deltaX = e.deltaX;
      if (deltaX) {
        emit('scroll', {
          currentTarget: currentTarget,
          scrollLeft: currentTarget.scrollLeft + deltaX
        });
        e.preventDefault();
      }
    };
    var wheelEvent = ref();
    onMounted(function () {
      nextTick(function () {
        wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
      });
    });
    onBeforeUnmount(function () {
      var _wheelEvent$value;
      (_wheelEvent$value = wheelEvent.value) === null || _wheelEvent$value === void 0 ? void 0 : _wheelEvent$value.remove();
    });
    // Check if all flattenColumns has width
    var allFlattenColumnsWithWidth = computed(function () {
      return props.flattenColumns.every(function (column) {
        return column.width && column.width !== 0 && column.width !== '0px';
      });
    });
    var columnsWithScrollbar = ref([]);
    var flattenColumnsWithScrollbar = ref([]);
    watchEffect(function () {
      // Add scrollbar column
      var lastColumn = props.flattenColumns[props.flattenColumns.length - 1];
      var ScrollBarColumn = {
        fixed: lastColumn ? lastColumn.fixed : null,
        scrollbar: true,
        customHeaderCell: function customHeaderCell() {
          return {
            class: "".concat(tableContext.prefixCls, "-cell-scrollbar")
          };
        }
      };
      columnsWithScrollbar.value = combinationScrollBarSize.value ? [].concat(_toConsumableArray(props.columns), [ScrollBarColumn]) : props.columns;
      flattenColumnsWithScrollbar.value = combinationScrollBarSize.value ? [].concat(_toConsumableArray(props.flattenColumns), [ScrollBarColumn]) : props.flattenColumns;
    });
    // Calculate the sticky offsets
    var headerStickyOffsets = computed(function () {
      var stickyOffsets = props.stickyOffsets,
        direction = props.direction;
      var right = stickyOffsets.right,
        left = stickyOffsets.left;
      return _objectSpread(_objectSpread({}, stickyOffsets), {}, {
        left: direction === 'rtl' ? [].concat(_toConsumableArray(left.map(function (width) {
          return width + combinationScrollBarSize.value;
        })), [0]) : left,
        right: direction === 'rtl' ? right : [].concat(_toConsumableArray(right.map(function (width) {
          return width + combinationScrollBarSize.value;
        })), [0]),
        isSticky: tableContext.isSticky
      });
    });
    var mergedColumnWidth = useColumnWidth(toRef(props, 'colWidths'), toRef(props, 'columCount'));
    return function () {
      var _slots$default;
      var noData = props.noData,
        columCount = props.columCount,
        stickyTopOffset = props.stickyTopOffset,
        stickyBottomOffset = props.stickyBottomOffset,
        stickyClassName = props.stickyClassName,
        maxContentScroll = props.maxContentScroll;
      var isSticky = tableContext.isSticky;
      return _createVNode("div", {
        "style": _objectSpread({
          overflow: 'hidden'
        }, isSticky ? {
          top: "".concat(stickyTopOffset, "px"),
          bottom: "".concat(stickyBottomOffset, "px")
        } : {}),
        "ref": scrollRef,
        "class": classNames(attrs.class, _defineProperty({}, stickyClassName, !!stickyClassName))
      }, [_createVNode("table", {
        "style": {
          tableLayout: 'fixed',
          visibility: noData || mergedColumnWidth.value ? null : 'hidden'
        }
      }, [(!noData || !maxContentScroll || allFlattenColumnsWithWidth.value) && _createVNode(ColGroup, {
        "colWidths": mergedColumnWidth.value ? [].concat(_toConsumableArray(mergedColumnWidth.value), [combinationScrollBarSize.value]) : [],
        "columCount": columCount + 1,
        "columns": flattenColumnsWithScrollbar.value
      }, null), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, _objectSpread(_objectSpread({}, props), {}, {
        stickyOffsets: headerStickyOffsets.value,
        columns: columnsWithScrollbar.value,
        flattenColumns: flattenColumnsWithScrollbar.value
      }))])]);
    };
  }
});