UNPKG

@douyinfe/semi-ui

Version:

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

752 lines (751 loc) 28.5 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _isFunction2 = _interopRequireDefault(require("lodash/isFunction")); var _isNull2 = _interopRequireDefault(require("lodash/isNull")); var _pick2 = _interopRequireDefault(require("lodash/pick")); var _isEqual2 = _interopRequireDefault(require("lodash/isEqual")); var _each2 = _interopRequireDefault(require("lodash/each")); var _isMap2 = _interopRequireDefault(require("lodash/isMap")); var _size2 = _interopRequireDefault(require("lodash/size")); var _get2 = _interopRequireDefault(require("lodash/get")); var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _classnames = _interopRequireDefault(require("classnames")); var _reactWindow = require("react-window"); var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils"); var _bodyFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/table/bodyFoundation")); var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants"); var _baseComponent = _interopRequireDefault(require("../../_base/baseComponent")); var _utils2 = require("../utils"); var _ColGroup = _interopRequireDefault(require("../ColGroup")); var _BaseRow = _interopRequireWildcard(require("./BaseRow")); var _ExpandedRow = _interopRequireDefault(require("./ExpandedRow")); var _SectionRow = _interopRequireWildcard(require("./SectionRow")); var _TableHeader = _interopRequireDefault(require("../TableHeader")); var _tableContext = _interopRequireDefault(require("../table-context")); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } 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 && {}.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; } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } var __rest = void 0 && (void 0).__rest || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; class Body extends _baseComponent.default { constructor(props, context) { var _this; super(props); _this = this; this.forwardRef = node => { const { forwardedRef } = this.props; this.ref.current = node; this.foundation.observeBodyResize(node); if (typeof forwardedRef === 'function') { forwardedRef(node); } else if (forwardedRef && typeof forwardedRef === 'object') { forwardedRef.current = node; } }; this.setListRef = listInstance => { this.listRef.current = listInstance; const { getVirtualizedListRef } = this.context; if (getVirtualizedListRef) { if (this.props.virtualized) { getVirtualizedListRef(this.listRef); } else { console.warn('getVirtualizedListRef only works with virtualized. ' + 'See https://semi.design/en-US/show/table for more information.'); } } }; this.itemSize = index => { const { virtualized, size: tableSize } = this.props; const { virtualizedData } = this.state; const virtualizedItem = (0, _get2.default)(virtualizedData, index); const defaultConfig = (0, _utils.getDefaultVirtualizedRowConfig)(tableSize, virtualizedItem.sectionRow); const itemSize = (0, _get2.default)(virtualized, 'itemSize', defaultConfig.height); let realSize = itemSize; if (typeof itemSize === 'function') { realSize = itemSize(index, { expandedRow: (0, _get2.default)(virtualizedItem, 'expandedRow', false), sectionRow: (0, _get2.default)(virtualizedItem, 'sectionRow', false) }); } if (realSize < defaultConfig.minHeight) { _utils2.logger.warn(`The computed real \`itemSize\` cannot be less than ${defaultConfig.minHeight}`); } return realSize; }; this.itemKey = (index, data) => (0, _get2.default)(data, [index, 'key'], index); this.handleRowClick = (rowKey, e, expand) => { const { handleRowExpanded } = this.context; handleRowExpanded(!expand, rowKey, e); }; this.handleVirtualizedScroll = function () { let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; const onScroll = (0, _get2.default)(_this.props.virtualized, 'onScroll'); if (typeof onScroll === 'function') { onScroll(props); } }; /** * @param {MouseEvent<HTMLDivElement>} e */ this.handleVirtualizedBodyScroll = e => { const { handleBodyScroll } = this.props; const newScrollLeft = (0, _get2.default)(e, 'nativeEvent.target.scrollLeft'); const newScrollTop = (0, _get2.default)(e, 'nativeEvent.target.scrollTop'); if (newScrollTop === this.state.cache.virtualizedScrollTop) { this.handleVirtualizedScroll({ horizontalScrolling: true }); } this.state.cache.virtualizedScrollLeft = newScrollLeft; this.state.cache.virtualizedScrollTop = newScrollTop; if (typeof handleBodyScroll === 'function') { handleBodyScroll(e); } }; this.getVirtualizedRowWidth = () => { const { getCellWidths } = this.context; const { columns } = this.props; const cellWidths = getCellWidths(columns); const rowWidth = (0, _utils.arrayAdd)(cellWidths, 0, (0, _size2.default)(columns)); return rowWidth; }; this.renderVirtualizedRow = options => { const { index, style } = options; const { virtualizedData, cachedExpandBtnShouldInRow } = this.state; const { flattenedColumns } = this.context; const virtualizedItem = (0, _get2.default)(virtualizedData, [index], {}); const { key, parentKeys, expandedRow, sectionRow } = virtualizedItem, rest = __rest(virtualizedItem, ["key", "parentKeys", "expandedRow", "sectionRow"]); const rowWidth = this.getVirtualizedRowWidth(); const expandBtnShouldInRow = cachedExpandBtnShouldInRow; const props = Object.assign(Object.assign(Object.assign(Object.assign({}, this.props), { style: Object.assign(Object.assign({}, style), { width: rowWidth }) }), rest), { columns: flattenedColumns, index, expandBtnShouldInRow }); return sectionRow ? this.renderSectionRow(props) : expandedRow ? this.renderExpandedRow(props) : this.renderBaseRow(props); }; // virtualized List innerElementType this.renderTbody = /*#__PURE__*/_react.default.forwardRef(function () { let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; let ref = arguments.length > 1 ? arguments[1] : undefined; return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, props, { onScroll: function () { if (props.onScroll) { props.onScroll(...arguments); } }, // eslint-disable-next-line react/no-this-in-sfc,react/destructuring-assignment className: (0, _classnames.default)(props.className, `${_this.props.prefixCls}-tbody`), style: Object.assign({}, props.style), ref: ref })); }); // virtualized List outerElementType this.renderOuter = /*#__PURE__*/_react.default.forwardRef((props, ref) => { const { children } = props, rest = __rest(props, ["children"]); const { handleWheel, prefixCls, emptySlot, dataSource } = this.props; const tableWidth = this.getVirtualizedRowWidth(); const tableCls = (0, _classnames.default)(`${prefixCls}`, `${prefixCls}-fixed`); return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, rest, { ref: ref, onWheel: function () { if (handleWheel) { handleWheel(...arguments); } if (rest.onWheel) { rest.onWheel(...arguments); } }, onScroll: function () { _this.handleVirtualizedBodyScroll(...arguments); if (rest.onScroll) { rest.onScroll(...arguments); } } }), /*#__PURE__*/_react.default.createElement("div", { style: { width: tableWidth }, className: tableCls }, children), (0, _size2.default)(dataSource) === 0 && emptySlot); }); this.onItemsRendered = props => { if (this.state.cache.virtualizedScrollLeft && this.ref.current) { this.ref.current.scrollLeft = this.state.cache.virtualizedScrollLeft; } }; this.renderVirtualizedBody = direction => { const { scroll, prefixCls, virtualized, columns } = this.props; const { virtualizedData } = this.state; const { getCellWidths } = this.context; const cellWidths = getCellWidths(columns); if (!(0, _size2.default)(cellWidths)) { return null; } const rawY = (0, _get2.default)(scroll, 'y'); const yIsNumber = typeof rawY === 'number'; const y = yIsNumber ? rawY : 600; if (!yIsNumber) { _utils2.logger.warn('You have to specific "scroll.y" which must be a number for table virtualization!'); } const listStyle = { width: '100%', height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : null, overflowX: 'auto', overflowY: 'auto' }; const wrapCls = (0, _classnames.default)(`${prefixCls}-body`); return /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, Object.assign({}, typeof virtualized === 'object' ? virtualized : {}, { initialScrollOffset: this.state.cache.virtualizedScrollTop, onScroll: this.handleVirtualizedScroll, onItemsRendered: this.onItemsRendered, ref: this.setListRef, className: wrapCls, outerRef: this.forwardRef, height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : 0, width: listStyle.width, itemData: virtualizedData, itemSize: this.itemSize, itemCount: virtualizedData.length, itemKey: this.itemKey, innerElementType: this.renderTbody, outerElementType: this.renderOuter, style: Object.assign(Object.assign({}, listStyle), { direction }), direction: direction }), this.renderVirtualizedRow); }; /** * render group title * @param {*} props */ this.renderSectionRow = function () { let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { groupKey: undefined }; const { dataSource, rowKey, group, groupKey, index } = props; const sectionRowPickKeys = Object.keys(_SectionRow.sectionRowPropTypes); const sectionRowProps = (0, _pick2.default)(props, sectionRowPickKeys); const { handleRowExpanded } = _this.context; return /*#__PURE__*/_react.default.createElement(_SectionRow.default, Object.assign({}, sectionRowProps, { record: { groupKey, records: [...group].map(recordKey => (0, _utils.getRecord)(dataSource, recordKey, rowKey)) }, index: index, onExpand: handleRowExpanded, data: dataSource, key: groupKey || index })); }; this.renderExpandedRow = function () { let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { renderExpandIcon: () => null }; const { style, components, renderExpandIcon, expandedRowRender, record, columns, expanded, index, rowKey, virtualized, displayNone } = props; let key = (0, _utils.getRecordKey)(record, rowKey); if (key == null) { key = index; } const { flattenedColumns, getCellWidths } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686) if (flattenedColumns !== _this.flattenedColumns) { _this.flattenedColumns = flattenedColumns; _this.cellWidths = getCellWidths(flattenedColumns); } return /*#__PURE__*/_react.default.createElement(_ExpandedRow.default, { style: style, components: components, renderExpandIcon: renderExpandIcon, expandedRowRender: expandedRowRender, record: record, columns: columns, expanded: expanded, index: index, virtualized: virtualized, key: (0, _utils.genExpandedRowKey)(key), cellWidths: _this.cellWidths, displayNone: displayNone }); }; /** * render grouped rows * @returns {ReactNode[]} renderedRows */ this.renderGroupedRows = () => { const { groups, dataSource: data, rowKey, expandedRowKeys, keepDOM } = this.props; const { flattenedColumns } = this.context; const groupsInData = new Map(); const renderedRows = []; if (groups != null && Array.isArray(data) && data.length) { data.forEach(record => { const recordKey = (0, _utils.getRecordKey)(record, rowKey); groups.forEach((group, key) => { if (group.has(recordKey)) { if (!groupsInData.has(key)) { groupsInData.set(key, new Set([])); } groupsInData.get(key).add(recordKey); return false; } return undefined; }); }); } let index = -1; groupsInData.forEach((group, groupKey) => { // Calculate the expanded state of the group const expanded = (0, _utils.isExpanded)(expandedRowKeys, groupKey); // Render the title of the group renderedRows.push(this.renderSectionRow(Object.assign(Object.assign({}, this.props), { columns: flattenedColumns, index: ++index, group, groupKey, expanded }))); // Render the grouped content when the group is expanded if (expanded || keepDOM) { const dataInGroup = []; group.forEach(recordKey => { const record = (0, _utils.getRecord)(data, recordKey, rowKey); if (record != null) { dataInGroup.push(record); } }); /** * Render the contents of the group row */ renderedRows.push(this.renderBodyRows(dataInGroup, undefined, [], !expanded)); } }); return renderedRows; }; this.renderBody = direction => { const { scroll, prefixCls, columns, components, fixed, handleWheel, headerRef, handleBodyScroll, anyColumnFixed, showHeader, emptySlot, includeHeader, dataSource, onScroll, groups, expandedRowRender, tableLayout } = this.props; const x = (0, _get2.default)(scroll, 'x'); const y = (0, _get2.default)(scroll, 'y'); const bodyStyle = {}; const tableStyle = {}; const Table = (0, _get2.default)(components, 'body.outer', 'table'); const BodyWrapper = (0, _get2.default)(components, 'body.wrapper') || 'tbody'; if (y) { bodyStyle.maxHeight = y; } if (x) { tableStyle.width = x; } if (anyColumnFixed && (0, _size2.default)(dataSource)) { // Auto is better than scroll. For example, when there is only scrollY, the scroll axis is not displayed horizontally. bodyStyle.overflow = 'auto'; // Fix weird webkit render bug bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)'; } const colgroup = /*#__PURE__*/_react.default.createElement(_ColGroup.default, { components: (0, _get2.default)(components, 'body'), columns: columns, prefixCls: prefixCls }); // const tableBody = this.renderBody(); const wrapCls = `${prefixCls}-body`; const baseTable = /*#__PURE__*/_react.default.createElement("div", { key: "bodyTable", className: wrapCls, style: bodyStyle, ref: this.forwardRef, onWheel: handleWheel, onScroll: handleBodyScroll }, /*#__PURE__*/_react.default.createElement(Table, { role: (0, _isMap2.default)(groups) || (0, _isFunction2.default)(expandedRowRender) || (0, _utils.isTreeTable)({ dataSource }) ? 'treegrid' : 'grid', "aria-rowcount": dataSource && dataSource.length, "aria-colcount": columns && columns.length, style: tableStyle, className: (0, _classnames.default)(prefixCls, { [`${prefixCls}-fixed`]: tableLayout === 'fixed' }) }, colgroup, includeHeader && showHeader ? (/*#__PURE__*/_react.default.createElement(_TableHeader.default, Object.assign({}, this.props, { ref: headerRef, components: components, columns: columns }))) : null, /*#__PURE__*/_react.default.createElement(BodyWrapper, { className: `${prefixCls}-tbody`, onScroll: onScroll }, (0, _isMap2.default)(groups) ? this.renderGroupedRows() : this.renderBodyRows(dataSource))), emptySlot); if (fixed && columns.length) { return /*#__PURE__*/_react.default.createElement("div", { key: "bodyTable", className: `${prefixCls}-body-outer` }, baseTable); } return baseTable; }; this.ref = /*#__PURE__*/_react.default.createRef(); this.state = { virtualizedData: [], cache: { virtualizedScrollTop: null, virtualizedScrollLeft: null }, cachedExpandBtnShouldInRow: null, cachedExpandRelatedProps: [] }; this.listRef = /*#__PURE__*/_react.default.createRef(); const { flattenedColumns, getCellWidths } = context; this.foundation = new _bodyFoundation.default(this.adapter); this.flattenedColumns = flattenedColumns; this.cellWidths = getCellWidths(flattenedColumns); this.observer = null; } get adapter() { return Object.assign(Object.assign({}, super.adapter), { setVirtualizedData: (virtualizedData, cb) => this.setState({ virtualizedData }, cb), setCachedExpandBtnShouldInRow: cachedExpandBtnShouldInRow => this.setState({ cachedExpandBtnShouldInRow }), setCachedExpandRelatedProps: cachedExpandRelatedProps => this.setState({ cachedExpandRelatedProps }), observeBodyResize: bodyWrapDOM => { const { setBodyHasScrollbar } = this.context; // Callback when the size of the body dom content changes, notifying Table.jsx whether the bodyHasScrollBar exists const resizeCallback = () => { const update = () => { const { offsetWidth, clientWidth } = bodyWrapDOM; const bodyHasScrollBar = clientWidth < offsetWidth; setBodyHasScrollbar(bodyHasScrollBar); }; const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout; requestAnimationFrame(update); }; // Monitor body dom resize if (bodyWrapDOM) { if ((0, _get2.default)(window, 'ResizeObserver')) { if (this.observer) { this.observer.unobserve(bodyWrapDOM); this.observer = null; } this.observer = new ResizeObserver(resizeCallback); this.observer.observe(bodyWrapDOM); } else { _utils2.logger.warn('The current browser does not support ResizeObserver,' + 'and the table may be misaligned after plugging and unplugging the mouse and keyboard.' + 'You can try to refresh it.'); } } }, unobserveBodyResize: () => { const bodyWrapDOM = this.ref.current; if (this.observer) { this.observer.unobserve(bodyWrapDOM); this.observer = null; } } }); } componentDidUpdate(prevProps, prevState) { const { virtualized, dataSource, expandedRowKeys, columns, scroll } = this.props; if (virtualized) { if (prevProps.dataSource !== dataSource || prevProps.expandedRowKeys !== expandedRowKeys || prevProps.columns !== columns) { this.foundation.initVirtualizedData(); } } const expandRelatedProps = _constants.strings.EXPAND_RELATED_PROPS; const newExpandRelatedProps = expandRelatedProps.map(key => (0, _get2.default)(this.props, key, undefined)); if (!(0, _isEqual2.default)(newExpandRelatedProps, prevState.cachedExpandRelatedProps)) { this.foundation.initExpandBtnShouldInRow(newExpandRelatedProps); } const scrollY = (0, _get2.default)(scroll, 'y'); const bodyWrapDOM = this.ref.current; if (scrollY && scrollY !== (0, _get2.default)(prevProps, 'scroll.y')) { this.foundation.observeBodyResize(bodyWrapDOM); } } /** * render base row * @param {*} props * @returns */ renderBaseRow() { let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; const { rowKey, columns, expandedRowKeys, rowExpandable, record, index, level, expandBtnShouldInRow, // effect the display of the indent span selectedRowKeysSet, disabledRowKeysSet, expandRowByClick } = props; const baseRowPickKeys = Object.keys(_BaseRow.baseRowPropTypes); const baseRowProps = (0, _pick2.default)(props, baseRowPickKeys); let key = (0, _utils.getRecordKey)(record, rowKey); if (key == null) { key = index; } const expanded = (0, _utils.isExpanded)(expandedRowKeys, key); const expandable = rowExpandable && rowExpandable(record); const expandableProps = { level: undefined, expanded }; if (expandable || expandBtnShouldInRow) { expandableProps.level = level; expandableProps.expandableRow = expandable; if (expandRowByClick) { expandableProps.onRowClick = this.handleRowClick; } } const selectionProps = { selected: (0, _utils.isSelected)(selectedRowKeysSet, key), disabled: (0, _utils.isDisabled)(disabledRowKeysSet, key) }; const { getCellWidths } = this.context; const cellWidths = getCellWidths(columns, null, true); return /*#__PURE__*/_react.default.createElement(_BaseRow.default, Object.assign({}, baseRowProps, expandableProps, selectionProps, { key: key, rowKey: key, cellWidths: cellWidths })); } renderBodyRows() { let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; let renderedRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : []; let displayNone = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; const { rowKey, expandedRowRender, expandedRowKeys, childrenRecordName, rowExpandable, keepDOM } = this.props; const hasExpandedRowRender = typeof expandedRowRender === 'function'; const expandBtnShouldInRow = this.state.cachedExpandBtnShouldInRow; const { flattenedColumns } = this.context; (0, _each2.default)(data, (record, index) => { let key = (0, _utils.getRecordKey)(record, rowKey); if (key == null) { key = index; } const recordChildren = (0, _get2.default)(record, childrenRecordName); const recordHasChildren = Boolean(Array.isArray(recordChildren) && recordChildren.length); renderedRows.push(this.renderBaseRow(Object.assign(Object.assign({}, this.props), { columns: flattenedColumns, expandBtnShouldInRow, displayNone, record, key, level, index }))); // render expand row const expanded = (0, _utils.isExpanded)(expandedRowKeys, key); const shouldRenderExpandedRows = expanded || keepDOM; if (hasExpandedRowRender && rowExpandable && rowExpandable(record) && shouldRenderExpandedRows) { const currentExpandRow = this.renderExpandedRow(Object.assign(Object.assign({}, this.props), { columns: flattenedColumns, level, index, record, expanded, displayNone: displayNone || !expanded })); /** * If expandedRowRender returns falsy, this expanded row will not be rendered * Render an empty div before v1.19.7 */ if (!(0, _isNull2.default)(currentExpandRow)) { renderedRows.push(currentExpandRow); } } // render tree data if (recordHasChildren && shouldRenderExpandedRows) { const nestedRows = this.renderBodyRows(recordChildren, level + 1, [], displayNone || !expanded); renderedRows.push(...nestedRows); } }); return renderedRows; } render() { const { virtualized } = this.props; const { direction } = this.context; return virtualized ? this.renderVirtualizedBody(direction) : this.renderBody(direction); } } Body.contextType = _tableContext.default; Body.propTypes = { anyColumnFixed: _propTypes.default.bool, childrenRecordName: _propTypes.default.string, columns: _propTypes.default.array, components: _propTypes.default.object, dataSource: _propTypes.default.array, disabledRowKeysSet: _propTypes.default.instanceOf(Set).isRequired, emptySlot: _propTypes.default.node, expandRowByClick: _propTypes.default.bool, expandedRowKeys: _propTypes.default.array, expandedRowRender: _propTypes.default.func, fixed: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]), forwardedRef: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]), groups: _propTypes.default.instanceOf(Map), handleBodyScroll: _propTypes.default.func, handleWheel: _propTypes.default.func, headerRef: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]), includeHeader: _propTypes.default.bool, onScroll: _propTypes.default.func, prefixCls: _propTypes.default.string, renderExpandIcon: _propTypes.default.func, rowExpandable: _propTypes.default.func, rowKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func]), scroll: _propTypes.default.object, selectedRowKeysSet: _propTypes.default.instanceOf(Set).isRequired, showHeader: _propTypes.default.bool, size: _propTypes.default.string, store: _propTypes.default.object, virtualized: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]) }; var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function TableBody(props, ref) { return /*#__PURE__*/_react.default.createElement(Body, Object.assign({}, props, { forwardedRef: ref })); });