Table.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  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 = exports.DEFAULT_PREFIX = void 0;
  8. exports.genTable = genTable;
  9. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  10. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  11. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  12. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
  15. var _styleChecker = require("rc-util/lib/Dom/styleChecker");
  16. var _getScrollBarSize = require("rc-util/lib/getScrollBarSize");
  17. var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
  18. var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
  19. var _get = _interopRequireDefault(require("rc-util/lib/utils/get"));
  20. var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
  21. var React = _interopRequireWildcard(require("react"));
  22. var _Body = _interopRequireDefault(require("./Body"));
  23. var _ColGroup = _interopRequireDefault(require("./ColGroup"));
  24. var _constant = require("./constant");
  25. var _TableContext = _interopRequireWildcard(require("./context/TableContext"));
  26. var _FixedHolder = _interopRequireDefault(require("./FixedHolder"));
  27. var _Footer = _interopRequireWildcard(require("./Footer"));
  28. var _Summary = _interopRequireDefault(require("./Footer/Summary"));
  29. var _Header = _interopRequireDefault(require("./Header/Header"));
  30. var _useColumns3 = _interopRequireDefault(require("./hooks/useColumns"));
  31. var _useExpand3 = _interopRequireDefault(require("./hooks/useExpand"));
  32. var _useFixedInfo = _interopRequireDefault(require("./hooks/useFixedInfo"));
  33. var _useFrame = require("./hooks/useFrame");
  34. var _useHover3 = _interopRequireDefault(require("./hooks/useHover"));
  35. var _useSticky2 = _interopRequireDefault(require("./hooks/useSticky"));
  36. var _useStickyOffsets = _interopRequireDefault(require("./hooks/useStickyOffsets"));
  37. var _Panel = _interopRequireDefault(require("./Panel"));
  38. var _stickyScrollBar = _interopRequireDefault(require("./stickyScrollBar"));
  39. var _Column = _interopRequireDefault(require("./sugar/Column"));
  40. var _ColumnGroup = _interopRequireDefault(require("./sugar/ColumnGroup"));
  41. var _valueUtil = require("./utils/valueUtil");
  42. var _findDOMNode = require("rc-util/lib/Dom/findDOMNode");
  43. var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
  44. 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); }
  45. 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; }
  46. /**
  47. * Feature:
  48. * - fixed not need to set width
  49. * - support `rowExpandable` to config row expand logic
  50. * - add `summary` to support `() => ReactNode`
  51. *
  52. * Update:
  53. * - `dataIndex` is `array[]` now
  54. * - `expandable` wrap all the expand related props
  55. *
  56. * Removed:
  57. * - expandIconAsCell
  58. * - useFixedHeader
  59. * - rowRef
  60. * - columns[number].onCellClick
  61. * - onRowClick
  62. * - onRowDoubleClick
  63. * - onRowMouseEnter
  64. * - onRowMouseLeave
  65. * - getBodyWrapper
  66. * - bodyStyle
  67. *
  68. * Deprecated:
  69. * - All expanded props, move into expandable
  70. */
  71. var DEFAULT_PREFIX = exports.DEFAULT_PREFIX = 'rc-table';
  72. // Used for conditions cache
  73. var EMPTY_DATA = [];
  74. // Used for customize scroll
  75. var EMPTY_SCROLL_TARGET = {};
  76. function defaultEmpty() {
  77. return 'No Data';
  78. }
  79. function Table(tableProps, ref) {
  80. var props = (0, _objectSpread2.default)({
  81. rowKey: 'key',
  82. prefixCls: DEFAULT_PREFIX,
  83. emptyText: defaultEmpty
  84. }, tableProps);
  85. var prefixCls = props.prefixCls,
  86. className = props.className,
  87. rowClassName = props.rowClassName,
  88. style = props.style,
  89. data = props.data,
  90. rowKey = props.rowKey,
  91. scroll = props.scroll,
  92. tableLayout = props.tableLayout,
  93. direction = props.direction,
  94. title = props.title,
  95. footer = props.footer,
  96. summary = props.summary,
  97. caption = props.caption,
  98. id = props.id,
  99. showHeader = props.showHeader,
  100. components = props.components,
  101. emptyText = props.emptyText,
  102. onRow = props.onRow,
  103. onHeaderRow = props.onHeaderRow,
  104. measureRowRender = props.measureRowRender,
  105. onScroll = props.onScroll,
  106. internalHooks = props.internalHooks,
  107. transformColumns = props.transformColumns,
  108. internalRefs = props.internalRefs,
  109. tailor = props.tailor,
  110. getContainerWidth = props.getContainerWidth,
  111. sticky = props.sticky,
  112. _props$rowHoverable = props.rowHoverable,
  113. rowHoverable = _props$rowHoverable === void 0 ? true : _props$rowHoverable;
  114. var mergedData = data || EMPTY_DATA;
  115. var hasData = !!mergedData.length;
  116. var useInternalHooks = internalHooks === _constant.INTERNAL_HOOKS;
  117. // ===================== Warning ======================
  118. if (process.env.NODE_ENV !== 'production') {
  119. ['onRowClick', 'onRowDoubleClick', 'onRowContextMenu', 'onRowMouseEnter', 'onRowMouseLeave'].forEach(function (name) {
  120. (0, _warning.default)(props[name] === undefined, "`".concat(name, "` is removed, please use `onRow` instead."));
  121. });
  122. (0, _warning.default)(!('getBodyWrapper' in props), '`getBodyWrapper` is deprecated, please use custom `components` instead.');
  123. }
  124. // ==================== Customize =====================
  125. var getComponent = React.useCallback(function (path, defaultComponent) {
  126. return (0, _get.default)(components, path) || defaultComponent;
  127. }, [components]);
  128. var getRowKey = React.useMemo(function () {
  129. if (typeof rowKey === 'function') {
  130. return rowKey;
  131. }
  132. return function (record) {
  133. var key = record && record[rowKey];
  134. if (process.env.NODE_ENV !== 'production') {
  135. (0, _warning.default)(key !== undefined, 'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.');
  136. }
  137. return key;
  138. };
  139. }, [rowKey]);
  140. var customizeScrollBody = getComponent(['body']);
  141. // ====================== Hover =======================
  142. var _useHover = (0, _useHover3.default)(),
  143. _useHover2 = (0, _slicedToArray2.default)(_useHover, 3),
  144. startRow = _useHover2[0],
  145. endRow = _useHover2[1],
  146. onHover = _useHover2[2];
  147. // ====================== Expand ======================
  148. var _useExpand = (0, _useExpand3.default)(props, mergedData, getRowKey),
  149. _useExpand2 = (0, _slicedToArray2.default)(_useExpand, 6),
  150. expandableConfig = _useExpand2[0],
  151. expandableType = _useExpand2[1],
  152. mergedExpandedKeys = _useExpand2[2],
  153. mergedExpandIcon = _useExpand2[3],
  154. mergedChildrenColumnName = _useExpand2[4],
  155. onTriggerExpand = _useExpand2[5];
  156. // ====================== Column ======================
  157. var scrollX = scroll === null || scroll === void 0 ? void 0 : scroll.x;
  158. var _React$useState = React.useState(0),
  159. _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
  160. componentWidth = _React$useState2[0],
  161. setComponentWidth = _React$useState2[1];
  162. var _useColumns = (0, _useColumns3.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), expandableConfig), {}, {
  163. expandable: !!expandableConfig.expandedRowRender,
  164. columnTitle: expandableConfig.columnTitle,
  165. expandedKeys: mergedExpandedKeys,
  166. getRowKey: getRowKey,
  167. // https://github.com/ant-design/ant-design/issues/23894
  168. onTriggerExpand: onTriggerExpand,
  169. expandIcon: mergedExpandIcon,
  170. expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
  171. direction: direction,
  172. scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null,
  173. clientWidth: componentWidth
  174. }), useInternalHooks ? transformColumns : null),
  175. _useColumns2 = (0, _slicedToArray2.default)(_useColumns, 4),
  176. columns = _useColumns2[0],
  177. flattenColumns = _useColumns2[1],
  178. flattenScrollX = _useColumns2[2],
  179. hasGapFixed = _useColumns2[3];
  180. var mergedScrollX = flattenScrollX !== null && flattenScrollX !== void 0 ? flattenScrollX : scrollX;
  181. var columnContext = React.useMemo(function () {
  182. return {
  183. columns: columns,
  184. flattenColumns: flattenColumns
  185. };
  186. }, [columns, flattenColumns]);
  187. // ======================= Refs =======================
  188. var fullTableRef = React.useRef();
  189. var scrollHeaderRef = React.useRef();
  190. var scrollBodyRef = React.useRef();
  191. var scrollBodyContainerRef = React.useRef();
  192. React.useImperativeHandle(ref, function () {
  193. return {
  194. nativeElement: fullTableRef.current,
  195. scrollTo: function scrollTo(config) {
  196. var _scrollBodyRef$curren3;
  197. if (scrollBodyRef.current instanceof HTMLElement) {
  198. // Native scroll
  199. var index = config.index,
  200. top = config.top,
  201. key = config.key;
  202. if ((0, _valueUtil.validNumberValue)(top)) {
  203. var _scrollBodyRef$curren;
  204. (_scrollBodyRef$curren = scrollBodyRef.current) === null || _scrollBodyRef$curren === void 0 || _scrollBodyRef$curren.scrollTo({
  205. top: top
  206. });
  207. } else {
  208. var _scrollBodyRef$curren2;
  209. var mergedKey = key !== null && key !== void 0 ? key : getRowKey(mergedData[index]);
  210. (_scrollBodyRef$curren2 = scrollBodyRef.current.querySelector("[data-row-key=\"".concat(mergedKey, "\"]"))) === null || _scrollBodyRef$curren2 === void 0 || _scrollBodyRef$curren2.scrollIntoView();
  211. }
  212. } else if ((_scrollBodyRef$curren3 = scrollBodyRef.current) !== null && _scrollBodyRef$curren3 !== void 0 && _scrollBodyRef$curren3.scrollTo) {
  213. // Pass to proxy
  214. scrollBodyRef.current.scrollTo(config);
  215. }
  216. }
  217. };
  218. });
  219. // ====================== Scroll ======================
  220. var scrollSummaryRef = React.useRef();
  221. var _React$useState3 = React.useState(false),
  222. _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
  223. pingedLeft = _React$useState4[0],
  224. setPingedLeft = _React$useState4[1];
  225. var _React$useState5 = React.useState(false),
  226. _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
  227. pingedRight = _React$useState6[0],
  228. setPingedRight = _React$useState6[1];
  229. var _React$useState7 = React.useState(new Map()),
  230. _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
  231. colsWidths = _React$useState8[0],
  232. updateColsWidths = _React$useState8[1];
  233. // Convert map to number width
  234. var colsKeys = (0, _valueUtil.getColumnsKey)(flattenColumns);
  235. var pureColWidths = colsKeys.map(function (columnKey) {
  236. return colsWidths.get(columnKey);
  237. });
  238. var colWidths = React.useMemo(function () {
  239. return pureColWidths;
  240. }, [pureColWidths.join('_')]);
  241. var stickyOffsets = (0, _useStickyOffsets.default)(colWidths, flattenColumns, direction);
  242. var fixHeader = scroll && (0, _valueUtil.validateValue)(scroll.y);
  243. var horizonScroll = scroll && (0, _valueUtil.validateValue)(mergedScrollX) || Boolean(expandableConfig.fixed);
  244. var fixColumn = horizonScroll && flattenColumns.some(function (_ref) {
  245. var fixed = _ref.fixed;
  246. return fixed;
  247. });
  248. // Sticky
  249. var stickyRef = React.useRef();
  250. var _useSticky = (0, _useSticky2.default)(sticky, prefixCls),
  251. isSticky = _useSticky.isSticky,
  252. offsetHeader = _useSticky.offsetHeader,
  253. offsetSummary = _useSticky.offsetSummary,
  254. offsetScroll = _useSticky.offsetScroll,
  255. stickyClassName = _useSticky.stickyClassName,
  256. container = _useSticky.container;
  257. // Footer (Fix footer must fixed header)
  258. var summaryNode = React.useMemo(function () {
  259. return summary === null || summary === void 0 ? void 0 : summary(mergedData);
  260. }, [summary, mergedData]);
  261. var fixFooter = (fixHeader || isSticky) && /*#__PURE__*/React.isValidElement(summaryNode) && summaryNode.type === _Summary.default && summaryNode.props.fixed;
  262. // Scroll
  263. var scrollXStyle;
  264. var scrollYStyle;
  265. var scrollTableStyle;
  266. if (fixHeader) {
  267. scrollYStyle = {
  268. overflowY: hasData ? 'scroll' : 'auto',
  269. maxHeight: scroll.y
  270. };
  271. }
  272. if (horizonScroll) {
  273. scrollXStyle = {
  274. overflowX: 'auto'
  275. };
  276. // When no vertical scrollbar, should hide it
  277. // https://github.com/ant-design/ant-design/pull/20705
  278. // https://github.com/ant-design/ant-design/issues/21879
  279. if (!fixHeader) {
  280. scrollYStyle = {
  281. overflowY: 'hidden'
  282. };
  283. }
  284. scrollTableStyle = {
  285. width: mergedScrollX === true ? 'auto' : mergedScrollX,
  286. minWidth: '100%'
  287. };
  288. }
  289. var onColumnResize = React.useCallback(function (columnKey, width) {
  290. updateColsWidths(function (widths) {
  291. if (widths.get(columnKey) !== width) {
  292. var newWidths = new Map(widths);
  293. newWidths.set(columnKey, width);
  294. return newWidths;
  295. }
  296. return widths;
  297. });
  298. }, []);
  299. var _useTimeoutLock = (0, _useFrame.useTimeoutLock)(null),
  300. _useTimeoutLock2 = (0, _slicedToArray2.default)(_useTimeoutLock, 2),
  301. setScrollTarget = _useTimeoutLock2[0],
  302. getScrollTarget = _useTimeoutLock2[1];
  303. function forceScroll(scrollLeft, target) {
  304. if (!target) {
  305. return;
  306. }
  307. if (typeof target === 'function') {
  308. target(scrollLeft);
  309. } else if (target.scrollLeft !== scrollLeft) {
  310. target.scrollLeft = scrollLeft;
  311. // Delay to force scroll position if not sync
  312. // ref: https://github.com/ant-design/ant-design/issues/37179
  313. if (target.scrollLeft !== scrollLeft) {
  314. setTimeout(function () {
  315. target.scrollLeft = scrollLeft;
  316. }, 0);
  317. }
  318. }
  319. }
  320. var onInternalScroll = (0, _useEvent.default)(function (_ref2) {
  321. var currentTarget = _ref2.currentTarget,
  322. scrollLeft = _ref2.scrollLeft;
  323. var isRTL = direction === 'rtl';
  324. var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
  325. var compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
  326. if (!getScrollTarget() || getScrollTarget() === compareTarget) {
  327. var _stickyRef$current;
  328. setScrollTarget(compareTarget);
  329. forceScroll(mergedScrollLeft, scrollHeaderRef.current);
  330. forceScroll(mergedScrollLeft, scrollBodyRef.current);
  331. forceScroll(mergedScrollLeft, scrollSummaryRef.current);
  332. forceScroll(mergedScrollLeft, (_stickyRef$current = stickyRef.current) === null || _stickyRef$current === void 0 ? void 0 : _stickyRef$current.setScrollLeft);
  333. }
  334. var measureTarget = currentTarget || scrollHeaderRef.current;
  335. if (measureTarget) {
  336. var scrollWidth =
  337. // Should use mergedScrollX in virtual table(useInternalHooks && tailor === true)
  338. useInternalHooks && tailor && typeof mergedScrollX === 'number' ? mergedScrollX : measureTarget.scrollWidth;
  339. var clientWidth = measureTarget.clientWidth;
  340. // There is no space to scroll
  341. if (scrollWidth === clientWidth) {
  342. setPingedLeft(false);
  343. setPingedRight(false);
  344. return;
  345. }
  346. if (isRTL) {
  347. setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
  348. setPingedRight(-mergedScrollLeft > 0);
  349. } else {
  350. setPingedLeft(mergedScrollLeft > 0);
  351. setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
  352. }
  353. }
  354. });
  355. var onBodyScroll = (0, _useEvent.default)(function (e) {
  356. onInternalScroll(e);
  357. onScroll === null || onScroll === void 0 || onScroll(e);
  358. });
  359. var triggerOnScroll = function triggerOnScroll() {
  360. if (horizonScroll && scrollBodyRef.current) {
  361. var _scrollBodyRef$curren4;
  362. onInternalScroll({
  363. currentTarget: (0, _findDOMNode.getDOM)(scrollBodyRef.current),
  364. scrollLeft: (_scrollBodyRef$curren4 = scrollBodyRef.current) === null || _scrollBodyRef$curren4 === void 0 ? void 0 : _scrollBodyRef$curren4.scrollLeft
  365. });
  366. } else {
  367. setPingedLeft(false);
  368. setPingedRight(false);
  369. }
  370. };
  371. var onFullTableResize = function onFullTableResize(_ref3) {
  372. var _stickyRef$current2;
  373. var width = _ref3.width;
  374. (_stickyRef$current2 = stickyRef.current) === null || _stickyRef$current2 === void 0 || _stickyRef$current2.checkScrollBarVisible();
  375. var mergedWidth = fullTableRef.current ? fullTableRef.current.offsetWidth : width;
  376. if (useInternalHooks && getContainerWidth && fullTableRef.current) {
  377. mergedWidth = getContainerWidth(fullTableRef.current, mergedWidth) || mergedWidth;
  378. }
  379. if (mergedWidth !== componentWidth) {
  380. triggerOnScroll();
  381. setComponentWidth(mergedWidth);
  382. }
  383. };
  384. // Sync scroll bar when init or `horizonScroll`, `data` and `columns.length` changed
  385. var mounted = React.useRef(false);
  386. React.useEffect(function () {
  387. // onFullTableResize will be trigger once when ResizeObserver is mounted
  388. // This will reduce one duplicated triggerOnScroll time
  389. if (mounted.current) {
  390. triggerOnScroll();
  391. }
  392. }, [horizonScroll, data, columns.length]);
  393. React.useEffect(function () {
  394. mounted.current = true;
  395. }, []);
  396. // ===================== Effects ======================
  397. var _React$useState9 = React.useState(0),
  398. _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
  399. scrollbarSize = _React$useState10[0],
  400. setScrollbarSize = _React$useState10[1];
  401. var _React$useState11 = React.useState(true),
  402. _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
  403. supportSticky = _React$useState12[0],
  404. setSupportSticky = _React$useState12[1]; // Only IE not support, we mark as support first
  405. (0, _useLayoutEffect.default)(function () {
  406. if (!tailor || !useInternalHooks) {
  407. if (scrollBodyRef.current instanceof Element) {
  408. setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyRef.current).width);
  409. } else {
  410. setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyContainerRef.current).width);
  411. }
  412. }
  413. setSupportSticky((0, _styleChecker.isStyleSupport)('position', 'sticky'));
  414. }, []);
  415. // ================== INTERNAL HOOKS ==================
  416. React.useEffect(function () {
  417. if (useInternalHooks && internalRefs) {
  418. internalRefs.body.current = scrollBodyRef.current;
  419. }
  420. });
  421. // ========================================================================
  422. // == Render ==
  423. // ========================================================================
  424. // =================== Render: Func ===================
  425. var renderFixedHeaderTable = React.useCallback(function (fixedHolderPassProps) {
  426. return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Header.default, fixedHolderPassProps), fixFooter === 'top' && /*#__PURE__*/React.createElement(_Footer.default, fixedHolderPassProps, summaryNode));
  427. }, [fixFooter, summaryNode]);
  428. var renderFixedFooterTable = React.useCallback(function (fixedHolderPassProps) {
  429. return /*#__PURE__*/React.createElement(_Footer.default, fixedHolderPassProps, summaryNode);
  430. }, [summaryNode]);
  431. // =================== Render: Node ===================
  432. var TableComponent = getComponent(['table'], 'table');
  433. // Table layout
  434. var mergedTableLayout = React.useMemo(function () {
  435. if (tableLayout) {
  436. return tableLayout;
  437. }
  438. // https://github.com/ant-design/ant-design/issues/25227
  439. // When scroll.x is max-content, no need to fix table layout
  440. // it's width should stretch out to fit content
  441. if (fixColumn) {
  442. return mergedScrollX === 'max-content' ? 'auto' : 'fixed';
  443. }
  444. if (fixHeader || isSticky || flattenColumns.some(function (_ref4) {
  445. var ellipsis = _ref4.ellipsis;
  446. return ellipsis;
  447. })) {
  448. return 'fixed';
  449. }
  450. return 'auto';
  451. }, [fixHeader, fixColumn, flattenColumns, tableLayout, isSticky]);
  452. var groupTableNode;
  453. // Header props
  454. var headerProps = {
  455. colWidths: colWidths,
  456. columCount: flattenColumns.length,
  457. stickyOffsets: stickyOffsets,
  458. onHeaderRow: onHeaderRow,
  459. fixHeader: fixHeader,
  460. scroll: scroll
  461. };
  462. // Empty
  463. var emptyNode = React.useMemo(function () {
  464. if (hasData) {
  465. return null;
  466. }
  467. if (typeof emptyText === 'function') {
  468. return emptyText();
  469. }
  470. return emptyText;
  471. }, [hasData, emptyText]);
  472. // Body
  473. var bodyTable = /*#__PURE__*/React.createElement(_Body.default, {
  474. data: mergedData,
  475. measureColumnWidth: fixHeader || horizonScroll || isSticky
  476. });
  477. var bodyColGroup = /*#__PURE__*/React.createElement(_ColGroup.default, {
  478. colWidths: flattenColumns.map(function (_ref5) {
  479. var width = _ref5.width;
  480. return width;
  481. }),
  482. columns: flattenColumns
  483. });
  484. var captionElement = caption !== null && caption !== undefined ? /*#__PURE__*/React.createElement("caption", {
  485. className: "".concat(prefixCls, "-caption")
  486. }, caption) : undefined;
  487. var dataProps = (0, _pickAttrs.default)(props, {
  488. data: true
  489. });
  490. var ariaProps = (0, _pickAttrs.default)(props, {
  491. aria: true
  492. });
  493. if (fixHeader || isSticky) {
  494. // >>>>>> Fixed Header
  495. var bodyContent;
  496. if (typeof customizeScrollBody === 'function') {
  497. bodyContent = customizeScrollBody(mergedData, {
  498. scrollbarSize: scrollbarSize,
  499. ref: scrollBodyRef,
  500. onScroll: onInternalScroll
  501. });
  502. headerProps.colWidths = flattenColumns.map(function (_ref6, index) {
  503. var width = _ref6.width;
  504. var colWidth = index === flattenColumns.length - 1 ? width - scrollbarSize : width;
  505. if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
  506. return colWidth;
  507. }
  508. if (process.env.NODE_ENV !== 'production') {
  509. (0, _warning.default)(props.columns.length === 0, 'When use `components.body` with render props. Each column should have a fixed `width` value.');
  510. }
  511. return 0;
  512. });
  513. } else {
  514. bodyContent = /*#__PURE__*/React.createElement("div", {
  515. style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollXStyle), scrollYStyle),
  516. onScroll: onBodyScroll,
  517. ref: scrollBodyRef,
  518. className: (0, _classnames.default)("".concat(prefixCls, "-body"))
  519. }, /*#__PURE__*/React.createElement(TableComponent, (0, _extends2.default)({
  520. style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollTableStyle), {}, {
  521. tableLayout: mergedTableLayout
  522. })
  523. }, ariaProps), captionElement, bodyColGroup, bodyTable, !fixFooter && summaryNode && /*#__PURE__*/React.createElement(_Footer.default, {
  524. stickyOffsets: stickyOffsets,
  525. flattenColumns: flattenColumns
  526. }, summaryNode)));
  527. }
  528. // Fixed holder share the props
  529. var fixedHolderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  530. noData: !mergedData.length
  531. }, headerProps), columnContext), {}, {
  532. direction: direction,
  533. stickyClassName: stickyClassName,
  534. scrollX: mergedScrollX,
  535. tableLayout: mergedTableLayout,
  536. onScroll: onInternalScroll
  537. });
  538. groupTableNode = /*#__PURE__*/React.createElement(React.Fragment, null, showHeader !== false && /*#__PURE__*/React.createElement(_FixedHolder.default, (0, _extends2.default)({}, fixedHolderProps, {
  539. stickyTopOffset: offsetHeader,
  540. className: "".concat(prefixCls, "-header"),
  541. ref: scrollHeaderRef,
  542. colGroup: bodyColGroup
  543. }), renderFixedHeaderTable), bodyContent, fixFooter && fixFooter !== 'top' && /*#__PURE__*/React.createElement(_FixedHolder.default, (0, _extends2.default)({}, fixedHolderProps, {
  544. stickyBottomOffset: offsetSummary,
  545. className: "".concat(prefixCls, "-summary"),
  546. ref: scrollSummaryRef,
  547. colGroup: bodyColGroup
  548. }), renderFixedFooterTable), isSticky && scrollBodyRef.current && scrollBodyRef.current instanceof Element && /*#__PURE__*/React.createElement(_stickyScrollBar.default, {
  549. ref: stickyRef,
  550. offsetScroll: offsetScroll,
  551. scrollBodyRef: scrollBodyRef,
  552. onScroll: onInternalScroll,
  553. container: container,
  554. direction: direction
  555. }));
  556. } else {
  557. // >>>>>> Unique table
  558. groupTableNode = /*#__PURE__*/React.createElement("div", {
  559. style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollXStyle), scrollYStyle),
  560. className: (0, _classnames.default)("".concat(prefixCls, "-content")),
  561. onScroll: onInternalScroll,
  562. ref: scrollBodyRef
  563. }, /*#__PURE__*/React.createElement(TableComponent, (0, _extends2.default)({
  564. style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scrollTableStyle), {}, {
  565. tableLayout: mergedTableLayout
  566. })
  567. }, ariaProps), captionElement, bodyColGroup, showHeader !== false && /*#__PURE__*/React.createElement(_Header.default, (0, _extends2.default)({}, headerProps, columnContext)), bodyTable, summaryNode && /*#__PURE__*/React.createElement(_Footer.default, {
  568. stickyOffsets: stickyOffsets,
  569. flattenColumns: flattenColumns
  570. }, summaryNode)));
  571. }
  572. var fullTable = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
  573. className: (0, _classnames.default)(prefixCls, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-ping-left"), pingedLeft), "".concat(prefixCls, "-ping-right"), pingedRight), "".concat(prefixCls, "-layout-fixed"), tableLayout === 'fixed'), "".concat(prefixCls, "-fixed-header"), fixHeader), "".concat(prefixCls, "-fixed-column"), fixColumn), "".concat(prefixCls, "-fixed-column-gapped"), fixColumn && hasGapFixed), "".concat(prefixCls, "-scroll-horizontal"), horizonScroll), "".concat(prefixCls, "-has-fix-left"), flattenColumns[0] && flattenColumns[0].fixed), "".concat(prefixCls, "-has-fix-right"), flattenColumns[flattenColumns.length - 1] && flattenColumns[flattenColumns.length - 1].fixed === 'right')),
  574. style: style,
  575. id: id,
  576. ref: fullTableRef
  577. }, dataProps), title && /*#__PURE__*/React.createElement(_Panel.default, {
  578. className: "".concat(prefixCls, "-title")
  579. }, title(mergedData)), /*#__PURE__*/React.createElement("div", {
  580. ref: scrollBodyContainerRef,
  581. className: "".concat(prefixCls, "-container")
  582. }, groupTableNode), footer && /*#__PURE__*/React.createElement(_Panel.default, {
  583. className: "".concat(prefixCls, "-footer")
  584. }, footer(mergedData)));
  585. if (horizonScroll) {
  586. fullTable = /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
  587. onResize: onFullTableResize
  588. }, fullTable);
  589. }
  590. var fixedInfoList = (0, _useFixedInfo.default)(flattenColumns, stickyOffsets, direction);
  591. var TableContextValue = React.useMemo(function () {
  592. return {
  593. // Scroll
  594. scrollX: mergedScrollX,
  595. // Table
  596. prefixCls: prefixCls,
  597. getComponent: getComponent,
  598. scrollbarSize: scrollbarSize,
  599. direction: direction,
  600. fixedInfoList: fixedInfoList,
  601. isSticky: isSticky,
  602. supportSticky: supportSticky,
  603. componentWidth: componentWidth,
  604. fixHeader: fixHeader,
  605. fixColumn: fixColumn,
  606. horizonScroll: horizonScroll,
  607. // Body
  608. tableLayout: mergedTableLayout,
  609. rowClassName: rowClassName,
  610. expandedRowClassName: expandableConfig.expandedRowClassName,
  611. expandIcon: mergedExpandIcon,
  612. expandableType: expandableType,
  613. expandRowByClick: expandableConfig.expandRowByClick,
  614. expandedRowRender: expandableConfig.expandedRowRender,
  615. expandedRowOffset: expandableConfig.expandedRowOffset,
  616. onTriggerExpand: onTriggerExpand,
  617. expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
  618. indentSize: expandableConfig.indentSize,
  619. allColumnsFixedLeft: flattenColumns.every(function (col) {
  620. return col.fixed === 'left';
  621. }),
  622. emptyNode: emptyNode,
  623. // Column
  624. columns: columns,
  625. flattenColumns: flattenColumns,
  626. onColumnResize: onColumnResize,
  627. colWidths: colWidths,
  628. // Row
  629. hoverStartRow: startRow,
  630. hoverEndRow: endRow,
  631. onHover: onHover,
  632. rowExpandable: expandableConfig.rowExpandable,
  633. onRow: onRow,
  634. getRowKey: getRowKey,
  635. expandedKeys: mergedExpandedKeys,
  636. childrenColumnName: mergedChildrenColumnName,
  637. rowHoverable: rowHoverable,
  638. // Measure Row
  639. measureRowRender: measureRowRender
  640. };
  641. }, [
  642. // Scroll
  643. mergedScrollX,
  644. // Table
  645. prefixCls, getComponent, scrollbarSize, direction, fixedInfoList, isSticky, supportSticky, componentWidth, fixHeader, fixColumn, horizonScroll,
  646. // Body
  647. mergedTableLayout, rowClassName, expandableConfig.expandedRowClassName, mergedExpandIcon, expandableType, expandableConfig.expandRowByClick, expandableConfig.expandedRowRender, expandableConfig.expandedRowOffset, onTriggerExpand, expandableConfig.expandIconColumnIndex, expandableConfig.indentSize, emptyNode,
  648. // Column
  649. columns, flattenColumns, onColumnResize, colWidths,
  650. // Row
  651. startRow, endRow, onHover, expandableConfig.rowExpandable, onRow, getRowKey, mergedExpandedKeys, mergedChildrenColumnName, rowHoverable, measureRowRender]);
  652. return /*#__PURE__*/React.createElement(_TableContext.default.Provider, {
  653. value: TableContextValue
  654. }, fullTable);
  655. }
  656. var RefTable = /*#__PURE__*/React.forwardRef(Table);
  657. if (process.env.NODE_ENV !== 'production') {
  658. RefTable.displayName = 'Table';
  659. }
  660. function genTable(shouldTriggerRender) {
  661. return (0, _TableContext.makeImmutable)(RefTable, shouldTriggerRender);
  662. }
  663. var ImmutableTable = genTable();
  664. ImmutableTable.EXPAND_COLUMN = _constant.EXPAND_COLUMN;
  665. ImmutableTable.INTERNAL_HOOKS = _constant.INTERNAL_HOOKS;
  666. ImmutableTable.Column = _Column.default;
  667. ImmutableTable.ColumnGroup = _ColumnGroup.default;
  668. ImmutableTable.Summary = _Footer.FooterComponents;
  669. var _default = exports.default = ImmutableTable;