index.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  12. var _context = require("@rc-component/context");
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _ref2 = require("rc-util/lib/ref");
  15. var _react = _interopRequireWildcard(require("react"));
  16. var React = _react;
  17. var _ColGroup = _interopRequireDefault(require("../ColGroup"));
  18. var _TableContext = _interopRequireDefault(require("../context/TableContext"));
  19. var _useRenderTimes = _interopRequireDefault(require("../hooks/useRenderTimes"));
  20. var _excluded = ["className", "noData", "columns", "flattenColumns", "colWidths", "colGroup", "columCount", "stickyOffsets", "direction", "fixHeader", "stickyTopOffset", "stickyBottomOffset", "stickyClassName", "scrollX", "tableLayout", "onScroll", "children"];
  21. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  22. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  23. function useColumnWidth(colWidths, columCount) {
  24. return (0, _react.useMemo)(function () {
  25. var cloneColumns = [];
  26. for (var i = 0; i < columCount; i += 1) {
  27. var val = colWidths[i];
  28. if (val !== undefined) {
  29. cloneColumns[i] = val;
  30. } else {
  31. return null;
  32. }
  33. }
  34. return cloneColumns;
  35. }, [colWidths.join('_'), columCount]);
  36. }
  37. var FixedHolder = /*#__PURE__*/React.forwardRef(function (props, ref) {
  38. if (process.env.NODE_ENV !== 'production') {
  39. (0, _useRenderTimes.default)(props);
  40. }
  41. var className = props.className,
  42. noData = props.noData,
  43. columns = props.columns,
  44. flattenColumns = props.flattenColumns,
  45. colWidths = props.colWidths,
  46. colGroup = props.colGroup,
  47. columCount = props.columCount,
  48. stickyOffsets = props.stickyOffsets,
  49. direction = props.direction,
  50. fixHeader = props.fixHeader,
  51. stickyTopOffset = props.stickyTopOffset,
  52. stickyBottomOffset = props.stickyBottomOffset,
  53. stickyClassName = props.stickyClassName,
  54. scrollX = props.scrollX,
  55. _props$tableLayout = props.tableLayout,
  56. tableLayout = _props$tableLayout === void 0 ? 'fixed' : _props$tableLayout,
  57. onScroll = props.onScroll,
  58. children = props.children,
  59. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  60. var _useContext = (0, _context.useContext)(_TableContext.default, ['prefixCls', 'scrollbarSize', 'isSticky', 'getComponent']),
  61. prefixCls = _useContext.prefixCls,
  62. scrollbarSize = _useContext.scrollbarSize,
  63. isSticky = _useContext.isSticky,
  64. getComponent = _useContext.getComponent;
  65. var TableComponent = getComponent(['header', 'table'], 'table');
  66. var combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;
  67. // Pass wheel to scroll event
  68. var scrollRef = React.useRef(null);
  69. var setScrollRef = React.useCallback(function (element) {
  70. (0, _ref2.fillRef)(ref, element);
  71. (0, _ref2.fillRef)(scrollRef, element);
  72. }, []);
  73. React.useEffect(function () {
  74. function onWheel(e) {
  75. var _ref = e,
  76. currentTarget = _ref.currentTarget,
  77. deltaX = _ref.deltaX;
  78. if (deltaX) {
  79. onScroll({
  80. currentTarget: currentTarget,
  81. scrollLeft: currentTarget.scrollLeft + deltaX
  82. });
  83. e.preventDefault();
  84. }
  85. }
  86. var scrollEle = scrollRef.current;
  87. scrollEle === null || scrollEle === void 0 || scrollEle.addEventListener('wheel', onWheel, {
  88. passive: false
  89. });
  90. return function () {
  91. scrollEle === null || scrollEle === void 0 || scrollEle.removeEventListener('wheel', onWheel);
  92. };
  93. }, []);
  94. // Add scrollbar column
  95. var lastColumn = flattenColumns[flattenColumns.length - 1];
  96. var ScrollBarColumn = {
  97. fixed: lastColumn ? lastColumn.fixed : null,
  98. scrollbar: true,
  99. onHeaderCell: function onHeaderCell() {
  100. return {
  101. className: "".concat(prefixCls, "-cell-scrollbar")
  102. };
  103. }
  104. };
  105. var columnsWithScrollbar = (0, _react.useMemo)(function () {
  106. return combinationScrollBarSize ? [].concat((0, _toConsumableArray2.default)(columns), [ScrollBarColumn]) : columns;
  107. }, [combinationScrollBarSize, columns]);
  108. var flattenColumnsWithScrollbar = (0, _react.useMemo)(function () {
  109. return combinationScrollBarSize ? [].concat((0, _toConsumableArray2.default)(flattenColumns), [ScrollBarColumn]) : flattenColumns;
  110. }, [combinationScrollBarSize, flattenColumns]);
  111. // Calculate the sticky offsets
  112. var headerStickyOffsets = (0, _react.useMemo)(function () {
  113. var right = stickyOffsets.right,
  114. left = stickyOffsets.left;
  115. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, stickyOffsets), {}, {
  116. left: direction === 'rtl' ? [].concat((0, _toConsumableArray2.default)(left.map(function (width) {
  117. return width + combinationScrollBarSize;
  118. })), [0]) : left,
  119. right: direction === 'rtl' ? right : [].concat((0, _toConsumableArray2.default)(right.map(function (width) {
  120. return width + combinationScrollBarSize;
  121. })), [0]),
  122. isSticky: isSticky
  123. });
  124. }, [combinationScrollBarSize, stickyOffsets, isSticky]);
  125. var mergedColumnWidth = useColumnWidth(colWidths, columCount);
  126. var isColGroupEmpty = (0, _react.useMemo)(function () {
  127. // use original ColGroup if no data or no calculated column width, otherwise use calculated column width
  128. // Return original colGroup if no data, or mergedColumnWidth is empty, or all widths are falsy
  129. var noWidth = !mergedColumnWidth || !mergedColumnWidth.length || mergedColumnWidth.every(function (w) {
  130. return !w;
  131. });
  132. return noData || noWidth;
  133. }, [noData, mergedColumnWidth]);
  134. return /*#__PURE__*/React.createElement("div", {
  135. style: (0, _objectSpread2.default)({
  136. overflow: 'hidden'
  137. }, isSticky ? {
  138. top: stickyTopOffset,
  139. bottom: stickyBottomOffset
  140. } : {}),
  141. ref: setScrollRef,
  142. className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, stickyClassName, !!stickyClassName))
  143. }, /*#__PURE__*/React.createElement(TableComponent, {
  144. style: {
  145. tableLayout: tableLayout,
  146. minWidth: '100%',
  147. // https://github.com/ant-design/ant-design/issues/54894
  148. width: scrollX
  149. }
  150. }, isColGroupEmpty ? colGroup : /*#__PURE__*/React.createElement(_ColGroup.default, {
  151. colWidths: [].concat((0, _toConsumableArray2.default)(mergedColumnWidth), [combinationScrollBarSize]),
  152. columCount: columCount + 1,
  153. columns: flattenColumnsWithScrollbar
  154. }), children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
  155. stickyOffsets: headerStickyOffsets,
  156. columns: columnsWithScrollbar,
  157. flattenColumns: flattenColumnsWithScrollbar
  158. }))));
  159. });
  160. if (process.env.NODE_ENV !== 'production') {
  161. FixedHolder.displayName = 'FixedHolder';
  162. }
  163. /** Return a table in div as fixed element which contains sticky info */
  164. // export default responseImmutable(FixedHolder);
  165. var _default = exports.default = /*#__PURE__*/React.memo(FixedHolder);