index.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  4. import { createVNode as _createVNode } from "vue";
  5. import ColGroup from '../ColGroup';
  6. import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRef, watchEffect } from 'vue';
  7. import { useInjectTable } from '../context/TableContext';
  8. import classNames from '../../_util/classNames';
  9. import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
  10. function useColumnWidth(colWidthsRef, columCountRef) {
  11. return computed(function () {
  12. var cloneColumns = [];
  13. var colWidths = colWidthsRef.value;
  14. var columCount = columCountRef.value;
  15. for (var i = 0; i < columCount; i += 1) {
  16. var val = colWidths[i];
  17. if (val !== undefined) {
  18. cloneColumns[i] = val;
  19. } else {
  20. return null;
  21. }
  22. }
  23. return cloneColumns;
  24. });
  25. }
  26. export default defineComponent({
  27. name: 'FixedHolder',
  28. inheritAttrs: false,
  29. props: ['columns', 'flattenColumns', 'stickyOffsets', 'customHeaderRow', 'noData', 'maxContentScroll', 'colWidths', 'columCount', 'direction', 'fixHeader', 'stickyTopOffset', 'stickyBottomOffset', 'stickyClassName'],
  30. emits: ['scroll'],
  31. setup: function setup(props, _ref) {
  32. var attrs = _ref.attrs,
  33. slots = _ref.slots,
  34. emit = _ref.emit;
  35. var tableContext = useInjectTable();
  36. var combinationScrollBarSize = computed(function () {
  37. return tableContext.isSticky && !props.fixHeader ? 0 : tableContext.scrollbarSize;
  38. });
  39. var scrollRef = ref();
  40. var onWheel = function onWheel(e) {
  41. var currentTarget = e.currentTarget,
  42. deltaX = e.deltaX;
  43. if (deltaX) {
  44. emit('scroll', {
  45. currentTarget: currentTarget,
  46. scrollLeft: currentTarget.scrollLeft + deltaX
  47. });
  48. e.preventDefault();
  49. }
  50. };
  51. var wheelEvent = ref();
  52. onMounted(function () {
  53. nextTick(function () {
  54. wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
  55. });
  56. });
  57. onBeforeUnmount(function () {
  58. var _wheelEvent$value;
  59. (_wheelEvent$value = wheelEvent.value) === null || _wheelEvent$value === void 0 ? void 0 : _wheelEvent$value.remove();
  60. });
  61. // Check if all flattenColumns has width
  62. var allFlattenColumnsWithWidth = computed(function () {
  63. return props.flattenColumns.every(function (column) {
  64. return column.width && column.width !== 0 && column.width !== '0px';
  65. });
  66. });
  67. var columnsWithScrollbar = ref([]);
  68. var flattenColumnsWithScrollbar = ref([]);
  69. watchEffect(function () {
  70. // Add scrollbar column
  71. var lastColumn = props.flattenColumns[props.flattenColumns.length - 1];
  72. var ScrollBarColumn = {
  73. fixed: lastColumn ? lastColumn.fixed : null,
  74. scrollbar: true,
  75. customHeaderCell: function customHeaderCell() {
  76. return {
  77. class: "".concat(tableContext.prefixCls, "-cell-scrollbar")
  78. };
  79. }
  80. };
  81. columnsWithScrollbar.value = combinationScrollBarSize.value ? [].concat(_toConsumableArray(props.columns), [ScrollBarColumn]) : props.columns;
  82. flattenColumnsWithScrollbar.value = combinationScrollBarSize.value ? [].concat(_toConsumableArray(props.flattenColumns), [ScrollBarColumn]) : props.flattenColumns;
  83. });
  84. // Calculate the sticky offsets
  85. var headerStickyOffsets = computed(function () {
  86. var stickyOffsets = props.stickyOffsets,
  87. direction = props.direction;
  88. var right = stickyOffsets.right,
  89. left = stickyOffsets.left;
  90. return _objectSpread(_objectSpread({}, stickyOffsets), {}, {
  91. left: direction === 'rtl' ? [].concat(_toConsumableArray(left.map(function (width) {
  92. return width + combinationScrollBarSize.value;
  93. })), [0]) : left,
  94. right: direction === 'rtl' ? right : [].concat(_toConsumableArray(right.map(function (width) {
  95. return width + combinationScrollBarSize.value;
  96. })), [0]),
  97. isSticky: tableContext.isSticky
  98. });
  99. });
  100. var mergedColumnWidth = useColumnWidth(toRef(props, 'colWidths'), toRef(props, 'columCount'));
  101. return function () {
  102. var _slots$default;
  103. var noData = props.noData,
  104. columCount = props.columCount,
  105. stickyTopOffset = props.stickyTopOffset,
  106. stickyBottomOffset = props.stickyBottomOffset,
  107. stickyClassName = props.stickyClassName,
  108. maxContentScroll = props.maxContentScroll;
  109. var isSticky = tableContext.isSticky;
  110. return _createVNode("div", {
  111. "style": _objectSpread({
  112. overflow: 'hidden'
  113. }, isSticky ? {
  114. top: "".concat(stickyTopOffset, "px"),
  115. bottom: "".concat(stickyBottomOffset, "px")
  116. } : {}),
  117. "ref": scrollRef,
  118. "class": classNames(attrs.class, _defineProperty({}, stickyClassName, !!stickyClassName))
  119. }, [_createVNode("table", {
  120. "style": {
  121. tableLayout: 'fixed',
  122. visibility: noData || mergedColumnWidth.value ? null : 'hidden'
  123. }
  124. }, [(!noData || !maxContentScroll || allFlattenColumnsWithWidth.value) && _createVNode(ColGroup, {
  125. "colWidths": mergedColumnWidth.value ? [].concat(_toConsumableArray(mergedColumnWidth.value), [combinationScrollBarSize.value]) : [],
  126. "columCount": columCount + 1,
  127. "columns": flattenColumnsWithScrollbar.value
  128. }, null), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, _objectSpread(_objectSpread({}, props), {}, {
  129. stickyOffsets: headerStickyOffsets.value,
  130. columns: columnsWithScrollbar.value,
  131. flattenColumns: flattenColumnsWithScrollbar.value
  132. }))])]);
  133. };
  134. }
  135. });