index.js 4.9 KB

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