BodyGrid.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof3 = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  9. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  10. var _context = require("@rc-component/context");
  11. var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
  12. var React = _interopRequireWildcard(require("react"));
  13. var _TableContext = _interopRequireWildcard(require("../context/TableContext"));
  14. var _useFlattenRecords = _interopRequireDefault(require("../hooks/useFlattenRecords"));
  15. var _BodyLine = _interopRequireDefault(require("./BodyLine"));
  16. var _context2 = require("./context");
  17. 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); }
  18. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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; }
  19. var Grid = /*#__PURE__*/React.forwardRef(function (props, ref) {
  20. var data = props.data,
  21. onScroll = props.onScroll;
  22. var _useContext = (0, _context.useContext)(_TableContext.default, ['flattenColumns', 'onColumnResize', 'getRowKey', 'prefixCls', 'expandedKeys', 'childrenColumnName', 'scrollX', 'direction']),
  23. flattenColumns = _useContext.flattenColumns,
  24. onColumnResize = _useContext.onColumnResize,
  25. getRowKey = _useContext.getRowKey,
  26. expandedKeys = _useContext.expandedKeys,
  27. prefixCls = _useContext.prefixCls,
  28. childrenColumnName = _useContext.childrenColumnName,
  29. scrollX = _useContext.scrollX,
  30. direction = _useContext.direction;
  31. var _useContext2 = (0, _context.useContext)(_context2.StaticContext),
  32. sticky = _useContext2.sticky,
  33. scrollY = _useContext2.scrollY,
  34. listItemHeight = _useContext2.listItemHeight,
  35. getComponent = _useContext2.getComponent,
  36. onTablePropScroll = _useContext2.onScroll;
  37. // =========================== Ref ============================
  38. var listRef = React.useRef();
  39. // =========================== Data ===========================
  40. var flattenData = (0, _useFlattenRecords.default)(data, childrenColumnName, expandedKeys, getRowKey);
  41. // ========================== Column ==========================
  42. var columnsWidth = React.useMemo(function () {
  43. var total = 0;
  44. return flattenColumns.map(function (_ref) {
  45. var width = _ref.width,
  46. minWidth = _ref.minWidth,
  47. key = _ref.key;
  48. var finalWidth = Math.max(width || 0, minWidth || 0);
  49. total += finalWidth;
  50. return [key, finalWidth, total];
  51. });
  52. }, [flattenColumns]);
  53. var columnsOffset = React.useMemo(function () {
  54. return columnsWidth.map(function (colWidth) {
  55. return colWidth[2];
  56. });
  57. }, [columnsWidth]);
  58. React.useEffect(function () {
  59. columnsWidth.forEach(function (_ref2) {
  60. var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
  61. key = _ref3[0],
  62. width = _ref3[1];
  63. onColumnResize(key, width);
  64. });
  65. }, [columnsWidth]);
  66. // =========================== Ref ============================
  67. React.useImperativeHandle(ref, function () {
  68. var _listRef$current2;
  69. var obj = {
  70. scrollTo: function scrollTo(config) {
  71. var _listRef$current;
  72. (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollTo(config);
  73. },
  74. nativeElement: (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.nativeElement
  75. };
  76. Object.defineProperty(obj, 'scrollLeft', {
  77. get: function get() {
  78. var _listRef$current3;
  79. return ((_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.getScrollInfo().x) || 0;
  80. },
  81. set: function set(value) {
  82. var _listRef$current4;
  83. (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || _listRef$current4.scrollTo({
  84. left: value
  85. });
  86. }
  87. });
  88. // https://github.com/ant-design/ant-design/issues/54734
  89. Object.defineProperty(obj, 'scrollTop', {
  90. get: function get() {
  91. var _listRef$current5;
  92. return ((_listRef$current5 = listRef.current) === null || _listRef$current5 === void 0 ? void 0 : _listRef$current5.getScrollInfo().y) || 0;
  93. },
  94. set: function set(value) {
  95. var _listRef$current6;
  96. (_listRef$current6 = listRef.current) === null || _listRef$current6 === void 0 || _listRef$current6.scrollTo({
  97. top: value
  98. });
  99. }
  100. });
  101. return obj;
  102. });
  103. // ======================= Col/Row Span =======================
  104. var getRowSpan = function getRowSpan(column, index) {
  105. var _flattenData$index;
  106. var record = (_flattenData$index = flattenData[index]) === null || _flattenData$index === void 0 ? void 0 : _flattenData$index.record;
  107. var onCell = column.onCell;
  108. if (onCell) {
  109. var _cellProps$rowSpan;
  110. var cellProps = onCell(record, index);
  111. return (_cellProps$rowSpan = cellProps === null || cellProps === void 0 ? void 0 : cellProps.rowSpan) !== null && _cellProps$rowSpan !== void 0 ? _cellProps$rowSpan : 1;
  112. }
  113. return 1;
  114. };
  115. var extraRender = function extraRender(info) {
  116. var start = info.start,
  117. end = info.end,
  118. getSize = info.getSize,
  119. offsetY = info.offsetY;
  120. // Do nothing if no data
  121. if (end < 0) {
  122. return null;
  123. }
  124. // Find first rowSpan column
  125. var firstRowSpanColumns = flattenColumns.filter(
  126. // rowSpan is 0
  127. function (column) {
  128. return getRowSpan(column, start) === 0;
  129. });
  130. var startIndex = start;
  131. var _loop = function _loop(i) {
  132. firstRowSpanColumns = firstRowSpanColumns.filter(function (column) {
  133. return getRowSpan(column, i) === 0;
  134. });
  135. if (!firstRowSpanColumns.length) {
  136. startIndex = i;
  137. return 1; // break
  138. }
  139. };
  140. for (var i = start; i >= 0; i -= 1) {
  141. if (_loop(i)) break;
  142. }
  143. // Find last rowSpan column
  144. var lastRowSpanColumns = flattenColumns.filter(
  145. // rowSpan is not 1
  146. function (column) {
  147. return getRowSpan(column, end) !== 1;
  148. });
  149. var endIndex = end;
  150. var _loop2 = function _loop2(_i) {
  151. lastRowSpanColumns = lastRowSpanColumns.filter(function (column) {
  152. return getRowSpan(column, _i) !== 1;
  153. });
  154. if (!lastRowSpanColumns.length) {
  155. endIndex = Math.max(_i - 1, end);
  156. return 1; // break
  157. }
  158. };
  159. for (var _i = end; _i < flattenData.length; _i += 1) {
  160. if (_loop2(_i)) break;
  161. }
  162. // Collect the line who has rowSpan
  163. var spanLines = [];
  164. var _loop3 = function _loop3(_i2) {
  165. var item = flattenData[_i2];
  166. // This code will never reach, just incase
  167. if (!item) {
  168. return 1; // continue
  169. }
  170. if (flattenColumns.some(function (column) {
  171. return getRowSpan(column, _i2) > 1;
  172. })) {
  173. spanLines.push(_i2);
  174. }
  175. };
  176. for (var _i2 = startIndex; _i2 <= endIndex; _i2 += 1) {
  177. if (_loop3(_i2)) continue;
  178. }
  179. // Patch extra line on the page
  180. var nodes = spanLines.map(function (index) {
  181. var item = flattenData[index];
  182. var rowKey = getRowKey(item.record, index);
  183. var getHeight = function getHeight(rowSpan) {
  184. var endItemIndex = index + rowSpan - 1;
  185. var endItemKey = getRowKey(flattenData[endItemIndex].record, endItemIndex);
  186. var sizeInfo = getSize(rowKey, endItemKey);
  187. return sizeInfo.bottom - sizeInfo.top;
  188. };
  189. var sizeInfo = getSize(rowKey);
  190. return /*#__PURE__*/React.createElement(_BodyLine.default, {
  191. key: index,
  192. data: item,
  193. rowKey: rowKey,
  194. index: index,
  195. style: {
  196. top: -offsetY + sizeInfo.top
  197. },
  198. extra: true,
  199. getHeight: getHeight
  200. });
  201. });
  202. return nodes;
  203. };
  204. // ========================= Context ==========================
  205. var gridContext = React.useMemo(function () {
  206. return {
  207. columnsOffset: columnsOffset
  208. };
  209. }, [columnsOffset]);
  210. // ========================== Render ==========================
  211. var tblPrefixCls = "".concat(prefixCls, "-tbody");
  212. // default 'div' in rc-virtual-list
  213. var wrapperComponent = getComponent(['body', 'wrapper']);
  214. // ========================== Sticky Scroll Bar ==========================
  215. var horizontalScrollBarStyle = {};
  216. if (sticky) {
  217. horizontalScrollBarStyle.position = 'sticky';
  218. horizontalScrollBarStyle.bottom = 0;
  219. if ((0, _typeof2.default)(sticky) === 'object' && sticky.offsetScroll) {
  220. horizontalScrollBarStyle.bottom = sticky.offsetScroll;
  221. }
  222. }
  223. return /*#__PURE__*/React.createElement(_context2.GridContext.Provider, {
  224. value: gridContext
  225. }, /*#__PURE__*/React.createElement(_rcVirtualList.default, {
  226. fullHeight: false,
  227. ref: listRef,
  228. prefixCls: "".concat(tblPrefixCls, "-virtual"),
  229. styles: {
  230. horizontalScrollBar: horizontalScrollBarStyle
  231. },
  232. className: tblPrefixCls,
  233. height: scrollY,
  234. itemHeight: listItemHeight || 24,
  235. data: flattenData,
  236. itemKey: function itemKey(item) {
  237. return getRowKey(item.record);
  238. },
  239. component: wrapperComponent,
  240. scrollWidth: scrollX,
  241. direction: direction,
  242. onVirtualScroll: function onVirtualScroll(_ref4) {
  243. var _listRef$current7;
  244. var x = _ref4.x;
  245. onScroll({
  246. currentTarget: (_listRef$current7 = listRef.current) === null || _listRef$current7 === void 0 ? void 0 : _listRef$current7.nativeElement,
  247. scrollLeft: x
  248. });
  249. },
  250. onScroll: onTablePropScroll,
  251. extraRender: extraRender
  252. }, function (item, index, itemProps) {
  253. var rowKey = getRowKey(item.record, index);
  254. return /*#__PURE__*/React.createElement(_BodyLine.default, {
  255. data: item,
  256. rowKey: rowKey,
  257. index: index,
  258. style: itemProps.style
  259. });
  260. }));
  261. });
  262. var ResponseGrid = (0, _TableContext.responseImmutable)(Grid);
  263. if (process.env.NODE_ENV !== 'production') {
  264. ResponseGrid.displayName = 'ResponseGrid';
  265. }
  266. var _default = exports.default = ResponseGrid;