index.js 6.4 KB

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