1 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
2 |
|
3 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
4 |
|
5 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
6 |
|
7 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
8 |
|
9 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
10 |
|
11 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
12 |
|
13 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
14 |
|
15 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
16 |
|
17 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
18 |
|
19 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
20 |
|
21 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
22 |
|
23 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
24 |
|
25 | function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
26 |
|
27 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 | import * as React from 'react';
|
55 | import classNames from 'classnames';
|
56 | import shallowEqual from 'shallowequal';
|
57 | import warning from "rc-util/es/warning";
|
58 | import ResizeObserver from 'rc-resize-observer';
|
59 | import getScrollBarSize from "rc-util/es/getScrollBarSize";
|
60 | import ColumnGroup from './sugar/ColumnGroup';
|
61 | import Column from './sugar/Column';
|
62 | import FixedHeader from './Header/FixedHeader';
|
63 | import Header from './Header/Header';
|
64 | import TableContext from './context/TableContext';
|
65 | import BodyContext from './context/BodyContext';
|
66 | import Body from './Body';
|
67 | import useColumns from './hooks/useColumns';
|
68 | import { useFrameState, useTimeoutLock } from './hooks/useFrame';
|
69 | import { getPathValue, mergeObject, validateValue, getColumnsKey } from './utils/valueUtil';
|
70 | import ResizeContext from './context/ResizeContext';
|
71 | import useStickyOffsets from './hooks/useStickyOffsets';
|
72 | import ColGroup from './ColGroup';
|
73 | import { getExpandableProps, getDataAndAriaProps } from './utils/legacyUtil';
|
74 | import Panel from './Panel';
|
75 | import Footer, { FooterComponents } from './Footer';
|
76 | import { findAllChildrenKeys, renderExpandIcon } from './utils/expandUtil';
|
77 | import { getCellFixedInfo } from './utils/fixUtil';
|
78 |
|
79 | var EMPTY_DATA = [];
|
80 |
|
81 | var EMPTY_SCROLL_TARGET = {};
|
82 | export var INTERNAL_HOOKS = 'rc-table-internal-hook';
|
83 | var MemoTableContent = React.memo(function (_ref) {
|
84 | var children = _ref.children;
|
85 | return children;
|
86 | }, function (prev, next) {
|
87 | if (!shallowEqual(prev.props, next.props)) {
|
88 | return false;
|
89 | }
|
90 |
|
91 |
|
92 |
|
93 | return prev.pingLeft !== next.pingLeft || prev.pingRight !== next.pingRight;
|
94 | });
|
95 |
|
96 | function Table(props) {
|
97 | var _classNames;
|
98 |
|
99 | var prefixCls = props.prefixCls,
|
100 | className = props.className,
|
101 | rowClassName = props.rowClassName,
|
102 | style = props.style,
|
103 | data = props.data,
|
104 | rowKey = props.rowKey,
|
105 | scroll = props.scroll,
|
106 | tableLayout = props.tableLayout,
|
107 | direction = props.direction,
|
108 | title = props.title,
|
109 | footer = props.footer,
|
110 | summary = props.summary,
|
111 | id = props.id,
|
112 | showHeader = props.showHeader,
|
113 | components = props.components,
|
114 | emptyText = props.emptyText,
|
115 | onRow = props.onRow,
|
116 | onHeaderRow = props.onHeaderRow,
|
117 | internalHooks = props.internalHooks,
|
118 | transformColumns = props.transformColumns,
|
119 | internalRefs = props.internalRefs;
|
120 | var mergedData = data || EMPTY_DATA;
|
121 | var hasData = !!mergedData.length;
|
122 |
|
123 | var _React$useState = React.useState(0),
|
124 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
125 | scrollbarSize = _React$useState2[0],
|
126 | setScrollbarSize = _React$useState2[1];
|
127 |
|
128 | React.useEffect(function () {
|
129 | setScrollbarSize(getScrollBarSize());
|
130 | });
|
131 |
|
132 | if (process.env.NODE_ENV !== 'production') {
|
133 | ['onRowClick', 'onRowDoubleClick', 'onRowContextMenu', 'onRowMouseEnter', 'onRowMouseLeave'].forEach(function (name) {
|
134 | warning(props[name] === undefined, "`".concat(name, "` is removed, please use `onRow` instead."));
|
135 | });
|
136 | warning(!('getBodyWrapper' in props), '`getBodyWrapper` is deprecated, please use custom `components` instead.');
|
137 | }
|
138 |
|
139 |
|
140 | var mergedComponents = React.useMemo(function () {
|
141 | return mergeObject(components, {});
|
142 | }, [components]);
|
143 | var getComponent = React.useCallback(function (path, defaultComponent) {
|
144 | return getPathValue(mergedComponents, path) || defaultComponent;
|
145 | }, [mergedComponents]);
|
146 | var getRowKey = React.useMemo(function () {
|
147 | if (typeof rowKey === 'function') {
|
148 | return rowKey;
|
149 | }
|
150 |
|
151 | return function (record) {
|
152 | var key = record && record[rowKey];
|
153 |
|
154 | if (process.env.NODE_ENV !== 'production') {
|
155 | warning(key !== undefined, 'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.');
|
156 | }
|
157 |
|
158 | return key;
|
159 | };
|
160 | }, [rowKey]);
|
161 |
|
162 | var expandableConfig = getExpandableProps(props);
|
163 | var expandIcon = expandableConfig.expandIcon,
|
164 | expandedRowKeys = expandableConfig.expandedRowKeys,
|
165 | defaultExpandedRowKeys = expandableConfig.defaultExpandedRowKeys,
|
166 | defaultExpandAllRows = expandableConfig.defaultExpandAllRows,
|
167 | expandedRowRender = expandableConfig.expandedRowRender,
|
168 | onExpand = expandableConfig.onExpand,
|
169 | onExpandedRowsChange = expandableConfig.onExpandedRowsChange,
|
170 | expandRowByClick = expandableConfig.expandRowByClick,
|
171 | rowExpandable = expandableConfig.rowExpandable,
|
172 | expandIconColumnIndex = expandableConfig.expandIconColumnIndex,
|
173 | expandedRowClassName = expandableConfig.expandedRowClassName,
|
174 | childrenColumnName = expandableConfig.childrenColumnName,
|
175 | indentSize = expandableConfig.indentSize;
|
176 | var mergedExpandIcon = expandIcon || renderExpandIcon;
|
177 | var mergedChildrenColumnName = childrenColumnName || 'children';
|
178 | var expandableType = React.useMemo(function () {
|
179 | if (expandedRowRender) {
|
180 | return 'row';
|
181 | }
|
182 |
|
183 |
|
184 | |
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 | if (props.expandable && internalHooks === INTERNAL_HOOKS && props.expandable.__PARENT_RENDER_ICON__ || mergedData.some(function (record) {
|
195 | return record && _typeof(record) === 'object' && mergedChildrenColumnName in record;
|
196 | })) {
|
197 | return 'nest';
|
198 | }
|
199 |
|
200 |
|
201 |
|
202 | return false;
|
203 | }, [!!expandedRowRender, mergedData]);
|
204 |
|
205 | var _React$useState3 = React.useState(function () {
|
206 | if (defaultExpandedRowKeys) {
|
207 | return defaultExpandedRowKeys;
|
208 | }
|
209 |
|
210 | if (defaultExpandAllRows) {
|
211 | return findAllChildrenKeys(mergedData, getRowKey, mergedChildrenColumnName);
|
212 | }
|
213 |
|
214 | return [];
|
215 | }),
|
216 | _React$useState4 = _slicedToArray(_React$useState3, 2),
|
217 | innerExpandedKeys = _React$useState4[0],
|
218 | setInnerExpandedKeys = _React$useState4[1];
|
219 |
|
220 | var mergedExpandedKeys = React.useMemo(function () {
|
221 | return new Set(expandedRowKeys || innerExpandedKeys || []);
|
222 | }, [expandedRowKeys, innerExpandedKeys]);
|
223 | var onTriggerExpand = React.useCallback(function (record) {
|
224 | var key = getRowKey(record, mergedData.indexOf(record));
|
225 | var newExpandedKeys;
|
226 | var hasKey = mergedExpandedKeys.has(key);
|
227 |
|
228 | if (hasKey) {
|
229 | mergedExpandedKeys.delete(key);
|
230 | newExpandedKeys = _toConsumableArray(mergedExpandedKeys);
|
231 | } else {
|
232 | newExpandedKeys = [].concat(_toConsumableArray(mergedExpandedKeys), [key]);
|
233 | }
|
234 |
|
235 | setInnerExpandedKeys(newExpandedKeys);
|
236 |
|
237 | if (onExpand) {
|
238 | onExpand(!hasKey, record);
|
239 | }
|
240 |
|
241 | if (onExpandedRowsChange) {
|
242 | onExpandedRowsChange(newExpandedKeys);
|
243 | }
|
244 | }, [getRowKey, mergedExpandedKeys, mergedData, onExpand, onExpandedRowsChange]);
|
245 |
|
246 | var _React$useState5 = React.useState(0),
|
247 | _React$useState6 = _slicedToArray(_React$useState5, 2),
|
248 | componentWidth = _React$useState6[0],
|
249 | setComponentWidth = _React$useState6[1];
|
250 |
|
251 | var _useColumns = useColumns(_objectSpread(_objectSpread(_objectSpread({}, props), expandableConfig), {}, {
|
252 | expandable: !!expandedRowRender,
|
253 | expandedKeys: mergedExpandedKeys,
|
254 | getRowKey: getRowKey,
|
255 |
|
256 | onTriggerExpand: onTriggerExpand,
|
257 | expandIcon: mergedExpandIcon,
|
258 | expandIconColumnIndex: expandIconColumnIndex,
|
259 | direction: direction
|
260 | }), internalHooks === INTERNAL_HOOKS ? transformColumns : null),
|
261 | _useColumns2 = _slicedToArray(_useColumns, 2),
|
262 | columns = _useColumns2[0],
|
263 | flattenColumns = _useColumns2[1];
|
264 |
|
265 | var columnContext = React.useMemo(function () {
|
266 | return {
|
267 | columns: columns,
|
268 | flattenColumns: flattenColumns
|
269 | };
|
270 | }, [columns, flattenColumns]);
|
271 |
|
272 | var fullTableRef = React.useRef();
|
273 | var scrollHeaderRef = React.useRef();
|
274 | var scrollBodyRef = React.useRef();
|
275 |
|
276 | var _React$useState7 = React.useState(false),
|
277 | _React$useState8 = _slicedToArray(_React$useState7, 2),
|
278 | pingedLeft = _React$useState8[0],
|
279 | setPingedLeft = _React$useState8[1];
|
280 |
|
281 | var _React$useState9 = React.useState(false),
|
282 | _React$useState10 = _slicedToArray(_React$useState9, 2),
|
283 | pingedRight = _React$useState10[0],
|
284 | setPingedRight = _React$useState10[1];
|
285 |
|
286 | var _useFrameState = useFrameState(new Map()),
|
287 | _useFrameState2 = _slicedToArray(_useFrameState, 2),
|
288 | colsWidths = _useFrameState2[0],
|
289 | updateColsWidths = _useFrameState2[1];
|
290 |
|
291 |
|
292 | var colsKeys = getColumnsKey(flattenColumns);
|
293 | var pureColWidths = colsKeys.map(function (columnKey) {
|
294 | return colsWidths.get(columnKey);
|
295 | });
|
296 | var colWidths = React.useMemo(function () {
|
297 | return pureColWidths;
|
298 | }, [pureColWidths.join('_')]);
|
299 | var stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
|
300 | var fixHeader = hasData && scroll && validateValue(scroll.y);
|
301 | var horizonScroll = scroll && validateValue(scroll.x);
|
302 | var fixColumn = horizonScroll && flattenColumns.some(function (_ref2) {
|
303 | var fixed = _ref2.fixed;
|
304 | return fixed;
|
305 | });
|
306 | var scrollXStyle;
|
307 | var scrollYStyle;
|
308 | var scrollTableStyle;
|
309 |
|
310 | if (fixHeader) {
|
311 | scrollYStyle = {
|
312 | overflowY: 'scroll',
|
313 | maxHeight: scroll.y
|
314 | };
|
315 | }
|
316 |
|
317 | if (horizonScroll) {
|
318 | scrollXStyle = {
|
319 | overflowX: 'scroll'
|
320 | };
|
321 |
|
322 |
|
323 |
|
324 | if (!fixHeader) {
|
325 | scrollYStyle = {
|
326 | overflowY: 'hidden'
|
327 | };
|
328 | }
|
329 |
|
330 | scrollTableStyle = {
|
331 | width: scroll.x === true ? 'auto' : scroll.x,
|
332 | minWidth: '100%'
|
333 | };
|
334 | }
|
335 |
|
336 | var onColumnResize = React.useCallback(function (columnKey, width) {
|
337 | updateColsWidths(function (widths) {
|
338 | var newWidths = new Map(widths);
|
339 | newWidths.set(columnKey, width);
|
340 | return newWidths;
|
341 | });
|
342 | }, []);
|
343 |
|
344 | var _useTimeoutLock = useTimeoutLock(null),
|
345 | _useTimeoutLock2 = _slicedToArray(_useTimeoutLock, 2),
|
346 | setScrollTarget = _useTimeoutLock2[0],
|
347 | getScrollTarget = _useTimeoutLock2[1];
|
348 |
|
349 | function forceScroll(scrollLeft, target) {
|
350 |
|
351 | if (target && target.scrollLeft !== scrollLeft) {
|
352 | target.scrollLeft = scrollLeft;
|
353 | }
|
354 |
|
355 |
|
356 | }
|
357 |
|
358 | var onScroll = function onScroll(_ref3) {
|
359 | var currentTarget = _ref3.currentTarget,
|
360 | scrollLeft = _ref3.scrollLeft;
|
361 | var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
|
362 | var compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
|
363 |
|
364 | if (!getScrollTarget() || getScrollTarget() === compareTarget) {
|
365 | setScrollTarget(compareTarget);
|
366 | forceScroll(mergedScrollLeft, scrollHeaderRef.current);
|
367 | forceScroll(mergedScrollLeft, scrollBodyRef.current);
|
368 | }
|
369 |
|
370 | if (currentTarget) {
|
371 | var scrollWidth = currentTarget.scrollWidth,
|
372 | clientWidth = currentTarget.clientWidth;
|
373 | setPingedLeft(mergedScrollLeft > 0);
|
374 | setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
|
375 | }
|
376 | };
|
377 |
|
378 | var triggerOnScroll = function triggerOnScroll() {
|
379 | if (scrollBodyRef.current) {
|
380 | onScroll({
|
381 | currentTarget: scrollBodyRef.current
|
382 | });
|
383 | }
|
384 | };
|
385 |
|
386 | var onFullTableResize = function onFullTableResize(_ref4) {
|
387 | var width = _ref4.width;
|
388 | triggerOnScroll();
|
389 | setComponentWidth(fullTableRef.current ? fullTableRef.current.offsetWidth : width);
|
390 | };
|
391 |
|
392 |
|
393 | React.useEffect(function () {
|
394 | return triggerOnScroll;
|
395 | }, []);
|
396 | React.useEffect(function () {
|
397 | if (horizonScroll) {
|
398 | triggerOnScroll();
|
399 | }
|
400 | }, [horizonScroll]);
|
401 |
|
402 | React.useEffect(function () {
|
403 | if (internalHooks === INTERNAL_HOOKS && internalRefs) {
|
404 | internalRefs.body.current = scrollBodyRef.current;
|
405 | }
|
406 | });
|
407 |
|
408 | var TableComponent = getComponent(['table'], 'table');
|
409 |
|
410 | var mergedTableLayout = React.useMemo(function () {
|
411 | if (tableLayout) {
|
412 | return tableLayout;
|
413 | }
|
414 |
|
415 | if (fixHeader || fixColumn || flattenColumns.some(function (_ref5) {
|
416 | var ellipsis = _ref5.ellipsis;
|
417 | return ellipsis;
|
418 | })) {
|
419 | return 'fixed';
|
420 | }
|
421 |
|
422 | return 'auto';
|
423 | }, [fixHeader, fixColumn, flattenColumns, tableLayout]);
|
424 | var groupTableNode;
|
425 |
|
426 | var headerProps = {
|
427 | colWidths: colWidths,
|
428 | columCount: flattenColumns.length,
|
429 | stickyOffsets: stickyOffsets,
|
430 | onHeaderRow: onHeaderRow
|
431 | };
|
432 |
|
433 | var emptyNode = React.useMemo(function () {
|
434 | if (hasData) {
|
435 | return null;
|
436 | }
|
437 |
|
438 | if (typeof emptyText === 'function') {
|
439 | return emptyText();
|
440 | }
|
441 |
|
442 | return emptyText;
|
443 | }, [hasData, emptyText]);
|
444 |
|
445 | var bodyTable = React.createElement(Body, {
|
446 | data: mergedData,
|
447 | measureColumnWidth: fixHeader || horizonScroll,
|
448 | expandedKeys: mergedExpandedKeys,
|
449 | rowExpandable: rowExpandable,
|
450 | getRowKey: getRowKey,
|
451 | onRow: onRow,
|
452 | emptyNode: emptyNode,
|
453 | childrenColumnName: mergedChildrenColumnName
|
454 | });
|
455 | var bodyColGroup = React.createElement(ColGroup, {
|
456 | colWidths: flattenColumns.map(function (_ref6) {
|
457 | var width = _ref6.width;
|
458 | return width;
|
459 | }),
|
460 | columns: flattenColumns
|
461 | });
|
462 | var footerTable = summary && React.createElement(Footer, null, summary(mergedData));
|
463 | var customizeScrollBody = getComponent(['body']);
|
464 |
|
465 | if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData && !fixHeader) {
|
466 | warning(false, '`components.body` with render props is only work on `scroll.y`.');
|
467 | }
|
468 |
|
469 | if (fixHeader) {
|
470 | var bodyContent;
|
471 |
|
472 | if (typeof customizeScrollBody === 'function') {
|
473 | bodyContent = customizeScrollBody(mergedData, {
|
474 | scrollbarSize: scrollbarSize,
|
475 | ref: scrollBodyRef,
|
476 | onScroll: onScroll
|
477 | });
|
478 | headerProps.colWidths = flattenColumns.map(function (_ref7, index) {
|
479 | var width = _ref7.width;
|
480 | var colWidth = index === columns.length - 1 ? width - scrollbarSize : width;
|
481 |
|
482 | if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
|
483 | return colWidth;
|
484 | }
|
485 |
|
486 | warning(false, 'When use `components.body` with render props. Each column should have a fixed value.');
|
487 | return 0;
|
488 | });
|
489 | } else {
|
490 | bodyContent = React.createElement("div", {
|
491 | style: _objectSpread(_objectSpread({}, scrollXStyle), scrollYStyle),
|
492 | onScroll: onScroll,
|
493 | ref: scrollBodyRef,
|
494 | className: classNames("".concat(prefixCls, "-body"))
|
495 | }, React.createElement(TableComponent, {
|
496 | style: _objectSpread(_objectSpread({}, scrollTableStyle), {}, {
|
497 | tableLayout: mergedTableLayout
|
498 | })
|
499 | }, bodyColGroup, bodyTable, footerTable));
|
500 | }
|
501 |
|
502 | groupTableNode = React.createElement(React.Fragment, null, showHeader !== false && React.createElement("div", {
|
503 | style: {
|
504 | overflow: 'hidden'
|
505 | },
|
506 | onScroll: onScroll,
|
507 | ref: scrollHeaderRef,
|
508 | className: classNames("".concat(prefixCls, "-header"))
|
509 | }, React.createElement(FixedHeader, Object.assign({}, headerProps, columnContext, {
|
510 | direction: direction
|
511 | }))), bodyContent);
|
512 | } else {
|
513 | groupTableNode = React.createElement("div", {
|
514 | style: _objectSpread(_objectSpread({}, scrollXStyle), scrollYStyle),
|
515 | className: classNames("".concat(prefixCls, "-content")),
|
516 | onScroll: onScroll,
|
517 | ref: scrollBodyRef
|
518 | }, React.createElement(TableComponent, {
|
519 | style: _objectSpread(_objectSpread({}, scrollTableStyle), {}, {
|
520 | tableLayout: mergedTableLayout
|
521 | })
|
522 | }, bodyColGroup, showHeader !== false && React.createElement(Header, Object.assign({}, headerProps, columnContext)), bodyTable, footerTable));
|
523 | }
|
524 |
|
525 | var ariaProps = getDataAndAriaProps(props);
|
526 | var fullTable = React.createElement("div", Object.assign({
|
527 | className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls, "-ping-left"), pingedLeft), _defineProperty(_classNames, "".concat(prefixCls, "-ping-right"), pingedRight), _defineProperty(_classNames, "".concat(prefixCls, "-layout-fixed"), tableLayout === 'fixed'), _defineProperty(_classNames, "".concat(prefixCls, "-fixed-header"), fixHeader), _defineProperty(_classNames, "".concat(prefixCls, "-fixed-column"), fixColumn), _defineProperty(_classNames, "".concat(prefixCls, "-scroll-horizontal"), horizonScroll), _defineProperty(_classNames, "".concat(prefixCls, "-has-fix-left"), flattenColumns[0] && flattenColumns[0].fixed), _defineProperty(_classNames, "".concat(prefixCls, "-has-fix-right"), flattenColumns[flattenColumns.length - 1] && flattenColumns[flattenColumns.length - 1].fixed === 'right'), _classNames)),
|
528 | style: style,
|
529 | id: id,
|
530 | ref: fullTableRef
|
531 | }, ariaProps), React.createElement(MemoTableContent, {
|
532 | pingLeft: pingedLeft,
|
533 | pingRight: pingedRight,
|
534 | props: _objectSpread(_objectSpread({}, props), {}, {
|
535 | stickyOffsets: stickyOffsets,
|
536 | mergedExpandedKeys: mergedExpandedKeys
|
537 | })
|
538 | }, title && React.createElement(Panel, {
|
539 | className: "".concat(prefixCls, "-title")
|
540 | }, title(mergedData)), React.createElement("div", {
|
541 | className: "".concat(prefixCls, "-container")
|
542 | }, groupTableNode), footer && React.createElement(Panel, {
|
543 | className: "".concat(prefixCls, "-footer")
|
544 | }, footer(mergedData))));
|
545 |
|
546 | if (horizonScroll) {
|
547 | fullTable = React.createElement(ResizeObserver, {
|
548 | onResize: onFullTableResize
|
549 | }, fullTable);
|
550 | }
|
551 |
|
552 | var TableContextValue = React.useMemo(function () {
|
553 | return {
|
554 | prefixCls: prefixCls,
|
555 | getComponent: getComponent,
|
556 | scrollbarSize: scrollbarSize,
|
557 | direction: direction,
|
558 | fixedInfoList: flattenColumns.map(function (_, colIndex) {
|
559 | return getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction);
|
560 | })
|
561 | };
|
562 | }, [prefixCls, getComponent, scrollbarSize, direction, flattenColumns, stickyOffsets, direction]);
|
563 | var BodyContextValue = React.useMemo(function () {
|
564 | return _objectSpread(_objectSpread({}, columnContext), {}, {
|
565 | tableLayout: mergedTableLayout,
|
566 | rowClassName: rowClassName,
|
567 | expandedRowClassName: expandedRowClassName,
|
568 | componentWidth: componentWidth,
|
569 | fixHeader: fixHeader,
|
570 | fixColumn: fixColumn,
|
571 | horizonScroll: horizonScroll,
|
572 | expandIcon: mergedExpandIcon,
|
573 | expandableType: expandableType,
|
574 | expandRowByClick: expandRowByClick,
|
575 | expandedRowRender: expandedRowRender,
|
576 | onTriggerExpand: onTriggerExpand,
|
577 | expandIconColumnIndex: expandIconColumnIndex,
|
578 | indentSize: indentSize
|
579 | });
|
580 | }, [columnContext, mergedTableLayout, rowClassName, expandedRowClassName, componentWidth, fixHeader, fixColumn, horizonScroll, mergedExpandIcon, expandableType, expandRowByClick, expandedRowRender, onTriggerExpand, expandIconColumnIndex, indentSize]);
|
581 | var ResizeContextValue = React.useMemo(function () {
|
582 | return {
|
583 | onColumnResize: onColumnResize
|
584 | };
|
585 | }, [onColumnResize]);
|
586 | return React.createElement(TableContext.Provider, {
|
587 | value: TableContextValue
|
588 | }, React.createElement(BodyContext.Provider, {
|
589 | value: BodyContextValue
|
590 | }, React.createElement(ResizeContext.Provider, {
|
591 | value: ResizeContextValue
|
592 | }, fullTable)));
|
593 | }
|
594 |
|
595 | Table.Column = Column;
|
596 | Table.ColumnGroup = ColumnGroup;
|
597 | Table.Summary = FooterComponents;
|
598 | Table.defaultProps = {
|
599 | rowKey: 'key',
|
600 | prefixCls: 'rc-table',
|
601 | emptyText: function emptyText() {
|
602 | return 'No Data';
|
603 | }
|
604 | };
|
605 | export default Table; |
\ | No newline at end of file |