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