New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
rsuite-table
Advanced tools
rsuite-table - npm Package Compare versions
Comparing version 3.9.5 to 3.10.0
@@ -0,1 +1,5 @@ | ||
| # 3.10.0 | ||
| - **Feature**: Support affixHorizontalScrollbar on Table | ||
| # 3.9.5 | ||
@@ -2,0 +6,0 @@ |
@@ -11,2 +11,3 @@ import * as React from 'react'; | ||
| onMouseDown?: (event: React.MouseEvent) => void; | ||
| [key: string]: any; | ||
| } | ||
@@ -13,0 +14,0 @@ |
@@ -53,3 +53,4 @@ import * as React from 'react'; | ||
| affixHeader?: boolean | number; | ||
| affixHorizontalScrollbar?: boolean | number; | ||
| rtl?: boolean; | ||
| } |
278
es/Table.js
@@ -16,3 +16,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | ||
| import { getTranslateDOMPositionXY } from 'dom-lib/lib/transition/translateDOMPositionXY'; | ||
| import { addStyle, getWidth, getHeight, WheelHandler, scrollLeft, scrollTop, on, getOffset } from 'dom-lib'; | ||
| import { addStyle, removeStyle, getWidth, getHeight, WheelHandler, scrollLeft, scrollTop, on, getOffset } from 'dom-lib'; | ||
| import Row from './Row'; | ||
@@ -23,3 +23,4 @@ import CellGroup from './CellGroup'; | ||
| import { SCROLLBAR_WIDTH, CELL_PADDING_HEIGHT } from './constants'; | ||
| import { getTotalByColumns, colSpanCells, getUnhandledProps, defaultClassPrefix, toggleClass, flattenData, prefix, requestAnimationTimeout, cancelAnimationTimeout, isRTL as _isRTL, findRowKeys, findAllParents, shouldShowRowByExpanded, resetLeftForCells } from './utils'; | ||
| import { getTotalByColumns, colSpanCells, getUnhandledProps, defaultClassPrefix, toggleClass, toggle, flattenData, prefix, requestAnimationTimeout, cancelAnimationTimeout, isRTL as _isRTL, isNumberOrTrue, findRowKeys, findAllParents, shouldShowRowByExpanded, resetLeftForCells } from './utils'; | ||
| var toggleStyle = toggle(addStyle, removeStyle); | ||
| var SORT_TYPE = { | ||
@@ -88,22 +89,76 @@ DESC: 'desc', | ||
| _this.setAffixHeaderOffset = function () { | ||
| var affixHeader = _this.props.affixHeader; | ||
| _this.setOffsetByAffix = function () { | ||
| var _this$headerWrapperRe, _this$tableRef; | ||
| if (affixHeader === 0 || affixHeader) { | ||
| var _this$props = _this.props, | ||
| affixHeader = _this$props.affixHeader, | ||
| affixHorizontalScrollbar = _this$props.affixHorizontalScrollbar; | ||
| var headerNode = (_this$headerWrapperRe = _this.headerWrapperRef) === null || _this$headerWrapperRe === void 0 ? void 0 : _this$headerWrapperRe.current; | ||
| if (isNumberOrTrue(affixHeader) && headerNode) { | ||
| _this.setState(function () { | ||
| return { | ||
| affixHeaderOffset: getOffset(_this.headerWrapperRef.current) | ||
| headerOffset: getOffset(headerNode) | ||
| }; | ||
| }); | ||
| } | ||
| var tableNode = (_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : _this$tableRef.current; | ||
| if (isNumberOrTrue(affixHorizontalScrollbar) && tableNode) { | ||
| _this.setState(function () { | ||
| return { | ||
| tableOffset: getOffset(tableNode) | ||
| }; | ||
| }); | ||
| } | ||
| }; | ||
| _this.updateAffixHeaderStatus = function () { | ||
| _this.handleWindowScroll = function () { | ||
| var _this$props2 = _this.props, | ||
| affixHeader = _this$props2.affixHeader, | ||
| affixHorizontalScrollbar = _this$props2.affixHorizontalScrollbar; | ||
| if (isNumberOrTrue(affixHeader)) { | ||
| _this.affixTableHeader(); | ||
| } | ||
| if (isNumberOrTrue(affixHorizontalScrollbar)) { | ||
| _this.affixHorizontalScrollbar(); | ||
| } | ||
| }; | ||
| _this.affixHorizontalScrollbar = function () { | ||
| var _this$scrollbarXRef, _this$scrollbarXRef$c3, _this$scrollbarXRef$c4; | ||
| var scrollY = window.scrollY || window.pageYOffset; | ||
| var windowHeight = getHeight(window); | ||
| var height = _this.getTableHeight(); | ||
| var tableOffset = _this.state.tableOffset; | ||
| var _this$props3 = _this.props, | ||
| headerHeight = _this$props3.headerHeight, | ||
| affixHorizontalScrollbar = _this$props3.affixHorizontalScrollbar; | ||
| var bottom = typeof affixHorizontalScrollbar === 'number' ? affixHorizontalScrollbar : 0; | ||
| var fixedScrollbar = scrollY + windowHeight < height + (tableOffset.top + bottom) && scrollY + windowHeight - headerHeight > tableOffset.top + bottom; | ||
| var bar = (_this$scrollbarXRef = _this.scrollbarXRef) === null || _this$scrollbarXRef === void 0 ? void 0 : (_this$scrollbarXRef$c3 = _this$scrollbarXRef.current) === null || _this$scrollbarXRef$c3 === void 0 ? void 0 : (_this$scrollbarXRef$c4 = _this$scrollbarXRef$c3.barRef) === null || _this$scrollbarXRef$c4 === void 0 ? void 0 : _this$scrollbarXRef$c4.current; | ||
| if (bar) { | ||
| toggleClass(bar, 'fixed', fixedScrollbar); | ||
| if (bottom) { | ||
| toggleStyle(bar, ['bottom', bottom + "px"])(fixedScrollbar); | ||
| } | ||
| } | ||
| }; | ||
| _this.affixTableHeader = function () { | ||
| var affixHeader = _this.props.affixHeader; | ||
| var top = typeof affixHeader === 'number' ? affixHeader : 0; | ||
| var _this$state = _this.state, | ||
| affixHeaderOffset = _this$state.affixHeaderOffset, | ||
| headerOffset = _this$state.headerOffset, | ||
| contentHeight = _this$state.contentHeight; | ||
| var scrollY = window.scrollY || window.pageYOffset; | ||
| var fixedHeader = scrollY - (affixHeaderOffset.top - top) >= 0 && scrollY < affixHeaderOffset.top - top + contentHeight; | ||
| var fixedHeader = scrollY - (headerOffset.top - top) >= 0 && scrollY < headerOffset.top - top + contentHeight; | ||
@@ -116,3 +171,3 @@ if (_this.affixHeaderWrapperRef.current) { | ||
| _this.handleSortColumn = function (dataKey) { | ||
| var _this$props$onSortCol, _this$props; | ||
| var _this$props$onSortCol, _this$props4; | ||
@@ -129,3 +184,3 @@ var sortType = _this.getSortType(); | ||
| (_this$props$onSortCol = (_this$props = _this.props).onSortColumn) === null || _this$props$onSortCol === void 0 ? void 0 : _this$props$onSortCol.call(_this$props, dataKey, sortType); | ||
| (_this$props$onSortCol = (_this$props4 = _this.props).onSortColumn) === null || _this$props$onSortCol === void 0 ? void 0 : _this$props$onSortCol.call(_this$props4, dataKey, sortType); | ||
| }; | ||
@@ -177,3 +232,3 @@ | ||
| _this.handleTreeToggle = function (rowKey, _rowIndex, rowData) { | ||
| var _this$props$onExpandC, _this$props2; | ||
| var _this$props$onExpandC, _this$props5; | ||
@@ -203,3 +258,3 @@ var expandedRowKeys = _this.getExpandedRowKeys(); | ||
| (_this$props$onExpandC = (_this$props2 = _this.props).onExpandChange) === null || _this$props$onExpandC === void 0 ? void 0 : _this$props$onExpandC.call(_this$props2, !open, rowData); | ||
| (_this$props$onExpandC = (_this$props5 = _this.props).onExpandChange) === null || _this$props$onExpandC === void 0 ? void 0 : _this$props$onExpandC.call(_this$props5, !open, rowData); | ||
| }; | ||
@@ -216,5 +271,5 @@ | ||
| _this.handleWheel = function (deltaX, deltaY) { | ||
| var _this$props3 = _this.props, | ||
| onScroll = _this$props3.onScroll, | ||
| virtualized = _this$props3.virtualized; | ||
| var _this$props6 = _this.props, | ||
| onScroll = _this$props6.onScroll, | ||
| virtualized = _this$props6.virtualized; | ||
| var _this$state2 = _this.state, | ||
@@ -260,3 +315,3 @@ contentWidth = _this$state2.contentWidth, | ||
| _this.handleTouchStart = function (event) { | ||
| var _this$props$onTouchSt, _this$props4; | ||
| var _this$props$onTouchSt, _this$props7; | ||
@@ -271,7 +326,7 @@ if (event.touches) { | ||
| (_this$props$onTouchSt = (_this$props4 = _this.props).onTouchStart) === null || _this$props$onTouchSt === void 0 ? void 0 : _this$props$onTouchSt.call(_this$props4, event); | ||
| (_this$props$onTouchSt = (_this$props7 = _this.props).onTouchStart) === null || _this$props$onTouchSt === void 0 ? void 0 : _this$props$onTouchSt.call(_this$props7, event); | ||
| }; | ||
| _this.handleTouchMove = function (event) { | ||
| var _this$props$onTouchMo, _this$props5; | ||
| var _this$props$onTouchMo, _this$props8; | ||
@@ -281,3 +336,3 @@ var autoHeight = _this.props.autoHeight; | ||
| if (event.touches) { | ||
| var _event$preventDefault, _this$scrollbarXRef$c3, _this$scrollbarXRef$c4, _this$scrollbarYRef$c3, _this$scrollbarYRef$c4; | ||
| var _event$preventDefault, _this$scrollbarXRef$c5, _this$scrollbarXRef$c6, _this$scrollbarYRef$c3, _this$scrollbarYRef$c4; | ||
@@ -298,3 +353,3 @@ var _event$touches$2 = event.touches[0], | ||
| (_this$scrollbarXRef$c3 = _this.scrollbarXRef.current) === null || _this$scrollbarXRef$c3 === void 0 ? void 0 : (_this$scrollbarXRef$c4 = _this$scrollbarXRef$c3.onWheelScroll) === null || _this$scrollbarXRef$c4 === void 0 ? void 0 : _this$scrollbarXRef$c4.call(_this$scrollbarXRef$c3, deltaX); | ||
| (_this$scrollbarXRef$c5 = _this.scrollbarXRef.current) === null || _this$scrollbarXRef$c5 === void 0 ? void 0 : (_this$scrollbarXRef$c6 = _this$scrollbarXRef$c5.onWheelScroll) === null || _this$scrollbarXRef$c6 === void 0 ? void 0 : _this$scrollbarXRef$c6.call(_this$scrollbarXRef$c5, deltaX); | ||
| (_this$scrollbarYRef$c3 = _this.scrollbarYRef.current) === null || _this$scrollbarYRef$c3 === void 0 ? void 0 : (_this$scrollbarYRef$c4 = _this$scrollbarYRef$c3.onWheelScroll) === null || _this$scrollbarYRef$c4 === void 0 ? void 0 : _this$scrollbarYRef$c4.call(_this$scrollbarYRef$c3, deltaY); | ||
@@ -305,3 +360,3 @@ _this.touchX = pageX; | ||
| (_this$props$onTouchMo = (_this$props5 = _this.props).onTouchMove) === null || _this$props$onTouchMo === void 0 ? void 0 : _this$props$onTouchMo.call(_this$props5, event); | ||
| (_this$props$onTouchMo = (_this$props8 = _this.props).onTouchMove) === null || _this$props$onTouchMo === void 0 ? void 0 : _this$props$onTouchMo.call(_this$props8, event); | ||
| }; | ||
@@ -328,5 +383,5 @@ | ||
| _this.shouldHandleWheelX = function (delta) { | ||
| var _this$props6 = _this.props, | ||
| disabledScroll = _this$props6.disabledScroll, | ||
| loading = _this$props6.loading; | ||
| var _this$props9 = _this.props, | ||
| disabledScroll = _this$props9.disabledScroll, | ||
| loading = _this$props9.loading; | ||
@@ -341,5 +396,5 @@ if (delta === 0 || disabledScroll || loading) { | ||
| _this.shouldHandleWheelY = function (delta) { | ||
| var _this$props7 = _this.props, | ||
| disabledScroll = _this$props7.disabledScroll, | ||
| loading = _this$props7.loading; | ||
| var _this$props10 = _this.props, | ||
| disabledScroll = _this$props10.disabledScroll, | ||
| loading = _this$props10.loading; | ||
@@ -358,5 +413,5 @@ if (delta === 0 || disabledScroll || loading) { | ||
| _this.calculateTableWidth = function () { | ||
| var _this$tableRef; | ||
| var _this$tableRef2; | ||
| var table = (_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : _this$tableRef.current; | ||
| var table = (_this$tableRef2 = _this.tableRef) === null || _this$tableRef2 === void 0 ? void 0 : _this$tableRef2.current; | ||
| var width = _this.state.width; | ||
@@ -368,6 +423,6 @@ | ||
| if (width !== nextWidth) { | ||
| var _this$scrollbarXRef, _this$scrollbarXRef$c5; | ||
| var _this$scrollbarXRef2, _this$scrollbarXRef2$; | ||
| _this.scrollX = 0; | ||
| (_this$scrollbarXRef = _this.scrollbarXRef) === null || _this$scrollbarXRef === void 0 ? void 0 : (_this$scrollbarXRef$c5 = _this$scrollbarXRef.current) === null || _this$scrollbarXRef$c5 === void 0 ? void 0 : _this$scrollbarXRef$c5.resetScrollBarPosition(); | ||
| (_this$scrollbarXRef2 = _this.scrollbarXRef) === null || _this$scrollbarXRef2 === void 0 ? void 0 : (_this$scrollbarXRef2$ = _this$scrollbarXRef2.current) === null || _this$scrollbarXRef2$ === void 0 ? void 0 : _this$scrollbarXRef2$.resetScrollBarPosition(); | ||
| } | ||
@@ -382,3 +437,3 @@ | ||
| _this.setAffixHeaderOffset(); | ||
| _this.setOffsetByAffix(); | ||
| }; | ||
@@ -400,3 +455,3 @@ | ||
| _this.scrollLeft = function (left) { | ||
| var _this$scrollbarXRef2, _this$scrollbarXRef2$, _this$scrollbarXRef2$2; | ||
| var _this$scrollbarXRef3, _this$scrollbarXRef3$, _this$scrollbarXRef3$2; | ||
@@ -408,3 +463,3 @@ if (left === void 0) { | ||
| _this.scrollX = -left; | ||
| (_this$scrollbarXRef2 = _this.scrollbarXRef) === null || _this$scrollbarXRef2 === void 0 ? void 0 : (_this$scrollbarXRef2$ = _this$scrollbarXRef2.current) === null || _this$scrollbarXRef2$ === void 0 ? void 0 : (_this$scrollbarXRef2$2 = _this$scrollbarXRef2$.resetScrollBarPosition) === null || _this$scrollbarXRef2$2 === void 0 ? void 0 : _this$scrollbarXRef2$2.call(_this$scrollbarXRef2$, _this.scrollLeftToScrollValue(left)); | ||
| (_this$scrollbarXRef3 = _this.scrollbarXRef) === null || _this$scrollbarXRef3 === void 0 ? void 0 : (_this$scrollbarXRef3$ = _this$scrollbarXRef3.current) === null || _this$scrollbarXRef3$ === void 0 ? void 0 : (_this$scrollbarXRef3$2 = _this$scrollbarXRef3$.resetScrollBarPosition) === null || _this$scrollbarXRef3$2 === void 0 ? void 0 : _this$scrollbarXRef3$2.call(_this$scrollbarXRef3$, _this.scrollLeftToScrollValue(left)); | ||
@@ -424,5 +479,5 @@ _this.updatePosition(); | ||
| return function (event) { | ||
| var _this$props$onRowClic, _this$props8; | ||
| var _this$props$onRowClic, _this$props11; | ||
| (_this$props$onRowClic = (_this$props8 = _this.props).onRowClick) === null || _this$props$onRowClic === void 0 ? void 0 : _this$props$onRowClic.call(_this$props8, rowData, event); | ||
| (_this$props$onRowClic = (_this$props11 = _this.props).onRowClick) === null || _this$props$onRowClic === void 0 ? void 0 : _this$props$onRowClic.call(_this$props11, rowData, event); | ||
| }; | ||
@@ -489,3 +544,3 @@ }; | ||
| _proto.componentDidMount = function componentDidMount() { | ||
| var _this$props9, _this$props9$bodyRef; | ||
| var _this$props13, _this$props13$bodyRef; | ||
@@ -495,3 +550,3 @@ this.calculateTableWidth(); | ||
| this.calculateRowMaxHeight(); | ||
| this.setAffixHeaderOffset(); | ||
| this.setOffsetByAffix(); | ||
| this.initPosition(); | ||
@@ -510,9 +565,11 @@ bindElementResize(this.tableRef.current, debounce(this.calculateTableWidth, 400)); | ||
| var affixHeader = this.props.affixHeader; | ||
| var _this$props12 = this.props, | ||
| affixHeader = _this$props12.affixHeader, | ||
| affixHorizontalScrollbar = _this$props12.affixHorizontalScrollbar; | ||
| if (affixHeader === 0 || affixHeader) { | ||
| this.scrollListener = on(window, 'scroll', this.updateAffixHeaderStatus); | ||
| if (isNumberOrTrue(affixHeader) || isNumberOrTrue(affixHorizontalScrollbar)) { | ||
| this.scrollListener = on(window, 'scroll', this.handleWindowScroll); | ||
| } | ||
| (_this$props9 = this.props) === null || _this$props9 === void 0 ? void 0 : (_this$props9$bodyRef = _this$props9.bodyRef) === null || _this$props9$bodyRef === void 0 ? void 0 : _this$props9$bodyRef.call(_this$props9, this.wheelWrapperRef.current); | ||
| (_this$props13 = this.props) === null || _this$props13 === void 0 ? void 0 : (_this$props13$bodyRef = _this$props13.bodyRef) === null || _this$props13$bodyRef === void 0 ? void 0 : _this$props13$bodyRef.call(_this$props13, this.wheelWrapperRef.current); | ||
| }; | ||
@@ -614,5 +671,5 @@ | ||
| _proto.getTableHeaderHeight = function getTableHeaderHeight() { | ||
| var _this$props10 = this.props, | ||
| headerHeight = _this$props10.headerHeight, | ||
| showHeader = _this$props10.showHeader; | ||
| var _this$props14 = this.props, | ||
| headerHeight = _this$props14.headerHeight, | ||
| showHeader = _this$props14.showHeader; | ||
| return showHeader ? headerHeight : 0; | ||
@@ -627,7 +684,7 @@ } | ||
| var contentHeight = this.state.contentHeight; | ||
| var _this$props11 = this.props, | ||
| minHeight = _this$props11.minHeight, | ||
| height = _this$props11.height, | ||
| autoHeight = _this$props11.autoHeight, | ||
| data = _this$props11.data; | ||
| var _this$props15 = this.props, | ||
| minHeight = _this$props15.minHeight, | ||
| height = _this$props15.height, | ||
| autoHeight = _this$props15.autoHeight, | ||
| data = _this$props15.data; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -672,6 +729,6 @@ | ||
| var tableWidth = this.state.width; | ||
| var _this$props12 = this.props, | ||
| sortColumn = _this$props12.sortColumn, | ||
| rowHeight = _this$props12.rowHeight, | ||
| showHeader = _this$props12.showHeader; | ||
| var _this$props16 = this.props, | ||
| sortColumn = _this$props16.sortColumn, | ||
| rowHeight = _this$props16.rowHeight, | ||
| showHeader = _this$props16.showHeader; | ||
@@ -786,3 +843,3 @@ var _getTotalByColumns = getTotalByColumns(columns), | ||
| } else { | ||
| var _this$wheelWrapperRef, _this$headerWrapperRe; | ||
| var _this$wheelWrapperRef, _this$headerWrapperRe2; | ||
@@ -794,3 +851,3 @@ var wheelStyle = {}; | ||
| ((_this$wheelWrapperRef = this.wheelWrapperRef) === null || _this$wheelWrapperRef === void 0 ? void 0 : _this$wheelWrapperRef.current) && addStyle(this.wheelWrapperRef.current, wheelStyle); | ||
| ((_this$headerWrapperRe = this.headerWrapperRef) === null || _this$headerWrapperRe === void 0 ? void 0 : _this$headerWrapperRe.current) && addStyle(this.headerWrapperRef.current, headerStyle); | ||
| ((_this$headerWrapperRe2 = this.headerWrapperRef) === null || _this$headerWrapperRe2 === void 0 ? void 0 : _this$headerWrapperRe2.current) && addStyle(this.headerWrapperRef.current, headerStyle); | ||
| } | ||
@@ -836,6 +893,6 @@ | ||
| _proto.shouldRenderExpandedRow = function shouldRenderExpandedRow(rowData) { | ||
| var _this$props13 = this.props, | ||
| rowKey = _this$props13.rowKey, | ||
| renderRowExpanded = _this$props13.renderRowExpanded, | ||
| isTree = _this$props13.isTree; | ||
| var _this$props17 = this.props, | ||
| rowKey = _this$props17.rowKey, | ||
| renderRowExpanded = _this$props17.renderRowExpanded, | ||
| isTree = _this$props17.isTree; | ||
| var expandedRowKeys = this.getExpandedRowKeys() || []; | ||
@@ -880,5 +937,5 @@ return isFunction(renderRowExpanded) && !isTree && expandedRowKeys.some(function (key) { | ||
| _proto.calculateTableContentWidth = function calculateTableContentWidth(prevProps) { | ||
| var _this$tableRef2; | ||
| var _this$tableRef3; | ||
| var table = (_this$tableRef2 = this.tableRef) === null || _this$tableRef2 === void 0 ? void 0 : _this$tableRef2.current; | ||
| var table = (_this$tableRef3 = this.tableRef) === null || _this$tableRef3 === void 0 ? void 0 : _this$tableRef3.current; | ||
| var row = table.querySelector("." + this.addPrefix('row') + ":not(.virtualized)"); | ||
@@ -906,6 +963,6 @@ var contentWidth = row ? getWidth(row) : 0; | ||
| var rows = table.querySelectorAll("." + this.addPrefix('row')) || []; | ||
| var _this$props14 = this.props, | ||
| height = _this$props14.height, | ||
| autoHeight = _this$props14.autoHeight, | ||
| rowHeight = _this$props14.rowHeight; | ||
| var _this$props18 = this.props, | ||
| height = _this$props18.height, | ||
| autoHeight = _this$props18.autoHeight, | ||
| rowHeight = _this$props18.rowHeight; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -969,7 +1026,7 @@ var contentHeight = rows.length ? Array.from(rows).map(function (row) { | ||
| _proto.renderRowData = function renderRowData(bodyCells, rowData, props, shouldRenderExpandedRow) { | ||
| var _this$props15 = this.props, | ||
| renderTreeToggle = _this$props15.renderTreeToggle, | ||
| rowKey = _this$props15.rowKey, | ||
| wordWrap = _this$props15.wordWrap, | ||
| isTree = _this$props15.isTree; | ||
| var _this$props19 = this.props, | ||
| renderTreeToggle = _this$props19.renderTreeToggle, | ||
| rowKey = _this$props19.rowKey, | ||
| wordWrap = _this$props19.wordWrap, | ||
| isTree = _this$props19.isTree; | ||
| var hasChildren = isTree && rowData.children && Array.isArray(rowData.children); | ||
@@ -1088,5 +1145,5 @@ var nextRowKey = typeof rowData[rowKey] !== 'undefined' ? rowData[rowKey] : props.key; | ||
| _proto.renderRowExpanded = function renderRowExpanded(rowData) { | ||
| var _this$props16 = this.props, | ||
| renderRowExpanded = _this$props16.renderRowExpanded, | ||
| rowExpandedHeight = _this$props16.rowExpandedHeight; | ||
| var _this$props20 = this.props, | ||
| renderRowExpanded = _this$props20.renderRowExpanded, | ||
| rowExpandedHeight = _this$props20.rowExpandedHeight; | ||
| var styles = { | ||
@@ -1156,10 +1213,10 @@ height: rowExpandedHeight | ||
| _proto.renderTableBody = function renderTableBody(bodyCells, rowWidth) { | ||
| var _this$props17 = this.props, | ||
| rowExpandedHeight = _this$props17.rowExpandedHeight, | ||
| renderRowExpanded = _this$props17.renderRowExpanded, | ||
| isTree = _this$props17.isTree, | ||
| rowKey = _this$props17.rowKey, | ||
| wordWrap = _this$props17.wordWrap, | ||
| virtualized = _this$props17.virtualized, | ||
| rowHeight = _this$props17.rowHeight; | ||
| var _this$props21 = this.props, | ||
| rowExpandedHeight = _this$props21.rowExpandedHeight, | ||
| renderRowExpanded = _this$props21.renderRowExpanded, | ||
| isTree = _this$props21.isTree, | ||
| rowKey = _this$props21.rowKey, | ||
| wordWrap = _this$props21.wordWrap, | ||
| virtualized = _this$props21.virtualized, | ||
| rowHeight = _this$props21.rowHeight; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -1301,6 +1358,6 @@ var _this$state6 = this.state, | ||
| _proto.renderInfo = function renderInfo() { | ||
| var _this$props18 = this.props, | ||
| locale = _this$props18.locale, | ||
| renderEmpty = _this$props18.renderEmpty, | ||
| loading = _this$props18.loading; | ||
| var _this$props22 = this.props, | ||
| locale = _this$props22.locale, | ||
| renderEmpty = _this$props22.renderEmpty, | ||
| loading = _this$props22.loading; | ||
@@ -1321,3 +1378,4 @@ if (this._visibleRows.length || loading) { | ||
| contentWidth = _this$state7.contentWidth, | ||
| contentHeight = _this$state7.contentHeight; | ||
| contentHeight = _this$state7.contentHeight, | ||
| width = _this$state7.width; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -1331,2 +1389,5 @@ var height = this.getTableHeight(); | ||
| return React.createElement("div", null, React.createElement(Scrollbar, { | ||
| style: { | ||
| width: width | ||
| }, | ||
| length: this.state.width, | ||
@@ -1350,7 +1411,7 @@ onScroll: this.handleScrollX, | ||
| _proto.renderLoading = function renderLoading() { | ||
| var _this$props19 = this.props, | ||
| locale = _this$props19.locale, | ||
| loading = _this$props19.loading, | ||
| loadAnimation = _this$props19.loadAnimation, | ||
| renderLoading = _this$props19.renderLoading; | ||
| var _this$props23 = this.props, | ||
| locale = _this$props23.locale, | ||
| loading = _this$props23.loading, | ||
| loadAnimation = _this$props23.loadAnimation, | ||
| renderLoading = _this$props23.renderLoading; | ||
@@ -1376,17 +1437,17 @@ if (!loadAnimation && !loading) { | ||
| var _this$props20 = this.props, | ||
| children = _this$props20.children, | ||
| className = _this$props20.className, | ||
| _this$props20$width = _this$props20.width, | ||
| width = _this$props20$width === void 0 ? 0 : _this$props20$width, | ||
| style = _this$props20.style, | ||
| isTree = _this$props20.isTree, | ||
| hover = _this$props20.hover, | ||
| bordered = _this$props20.bordered, | ||
| cellBordered = _this$props20.cellBordered, | ||
| wordWrap = _this$props20.wordWrap, | ||
| classPrefix = _this$props20.classPrefix, | ||
| loading = _this$props20.loading, | ||
| showHeader = _this$props20.showHeader, | ||
| rest = _objectWithoutPropertiesLoose(_this$props20, ["children", "className", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader"]); | ||
| var _this$props24 = this.props, | ||
| children = _this$props24.children, | ||
| className = _this$props24.className, | ||
| _this$props24$width = _this$props24.width, | ||
| width = _this$props24$width === void 0 ? 0 : _this$props24$width, | ||
| style = _this$props24.style, | ||
| isTree = _this$props24.isTree, | ||
| hover = _this$props24.hover, | ||
| bordered = _this$props24.bordered, | ||
| cellBordered = _this$props24.cellBordered, | ||
| wordWrap = _this$props24.wordWrap, | ||
| classPrefix = _this$props24.classPrefix, | ||
| loading = _this$props24.loading, | ||
| showHeader = _this$props24.showHeader, | ||
| rest = _objectWithoutPropertiesLoose(_this$props24, ["children", "className", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader"]); | ||
@@ -1471,2 +1532,3 @@ var isColumnResizing = this.state.isColumnResizing; | ||
| affixHeader: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), | ||
| affixHorizontalScrollbar: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), | ||
| rtl: PropTypes.bool | ||
@@ -1473,0 +1535,0 @@ }; |
@@ -7,2 +7,3 @@ export * from './prefix'; | ||
| export { default as toggleClass } from './toggleClass'; | ||
| export { default as toggle } from './toggle'; | ||
| export { default as flattenData } from './flattenData'; | ||
@@ -15,2 +16,3 @@ export { default as translateDOMPositionXY } from './translateDOMPositionXY'; | ||
| export { default as resetLeftForCells } from './resetLeftForCells'; | ||
| export { default as isNumberOrTrue } from './isNumberOrTrue'; | ||
| export * from './requestAnimationTimeout'; |
@@ -11,2 +11,3 @@ import * as React from 'react'; | ||
| onMouseDown?: (event: React.MouseEvent) => void; | ||
| [key: string]: any; | ||
| } | ||
@@ -13,0 +14,0 @@ |
@@ -53,3 +53,4 @@ import * as React from 'react'; | ||
| affixHeader?: boolean | number; | ||
| affixHorizontalScrollbar?: boolean | number; | ||
| rtl?: boolean; | ||
| } |
274
lib/Table.js
@@ -54,2 +54,3 @@ "use strict"; | ||
| var toggleStyle = (0, _utils.toggle)(_domLib.addStyle, _domLib.removeStyle); | ||
| var SORT_TYPE = { | ||
@@ -118,22 +119,76 @@ DESC: 'desc', | ||
| _this.setAffixHeaderOffset = function () { | ||
| var affixHeader = _this.props.affixHeader; | ||
| _this.setOffsetByAffix = function () { | ||
| var _this$headerWrapperRe, _this$tableRef; | ||
| if (affixHeader === 0 || affixHeader) { | ||
| var _this$props = _this.props, | ||
| affixHeader = _this$props.affixHeader, | ||
| affixHorizontalScrollbar = _this$props.affixHorizontalScrollbar; | ||
| var headerNode = (_this$headerWrapperRe = _this.headerWrapperRef) === null || _this$headerWrapperRe === void 0 ? void 0 : _this$headerWrapperRe.current; | ||
| if ((0, _utils.isNumberOrTrue)(affixHeader) && headerNode) { | ||
| _this.setState(function () { | ||
| return { | ||
| affixHeaderOffset: (0, _domLib.getOffset)(_this.headerWrapperRef.current) | ||
| headerOffset: (0, _domLib.getOffset)(headerNode) | ||
| }; | ||
| }); | ||
| } | ||
| var tableNode = (_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : _this$tableRef.current; | ||
| if ((0, _utils.isNumberOrTrue)(affixHorizontalScrollbar) && tableNode) { | ||
| _this.setState(function () { | ||
| return { | ||
| tableOffset: (0, _domLib.getOffset)(tableNode) | ||
| }; | ||
| }); | ||
| } | ||
| }; | ||
| _this.updateAffixHeaderStatus = function () { | ||
| _this.handleWindowScroll = function () { | ||
| var _this$props2 = _this.props, | ||
| affixHeader = _this$props2.affixHeader, | ||
| affixHorizontalScrollbar = _this$props2.affixHorizontalScrollbar; | ||
| if ((0, _utils.isNumberOrTrue)(affixHeader)) { | ||
| _this.affixTableHeader(); | ||
| } | ||
| if ((0, _utils.isNumberOrTrue)(affixHorizontalScrollbar)) { | ||
| _this.affixHorizontalScrollbar(); | ||
| } | ||
| }; | ||
| _this.affixHorizontalScrollbar = function () { | ||
| var _this$scrollbarXRef, _this$scrollbarXRef$c3, _this$scrollbarXRef$c4; | ||
| var scrollY = window.scrollY || window.pageYOffset; | ||
| var windowHeight = (0, _domLib.getHeight)(window); | ||
| var height = _this.getTableHeight(); | ||
| var tableOffset = _this.state.tableOffset; | ||
| var _this$props3 = _this.props, | ||
| headerHeight = _this$props3.headerHeight, | ||
| affixHorizontalScrollbar = _this$props3.affixHorizontalScrollbar; | ||
| var bottom = typeof affixHorizontalScrollbar === 'number' ? affixHorizontalScrollbar : 0; | ||
| var fixedScrollbar = scrollY + windowHeight < height + (tableOffset.top + bottom) && scrollY + windowHeight - headerHeight > tableOffset.top + bottom; | ||
| var bar = (_this$scrollbarXRef = _this.scrollbarXRef) === null || _this$scrollbarXRef === void 0 ? void 0 : (_this$scrollbarXRef$c3 = _this$scrollbarXRef.current) === null || _this$scrollbarXRef$c3 === void 0 ? void 0 : (_this$scrollbarXRef$c4 = _this$scrollbarXRef$c3.barRef) === null || _this$scrollbarXRef$c4 === void 0 ? void 0 : _this$scrollbarXRef$c4.current; | ||
| if (bar) { | ||
| (0, _utils.toggleClass)(bar, 'fixed', fixedScrollbar); | ||
| if (bottom) { | ||
| toggleStyle(bar, ['bottom', bottom + "px"])(fixedScrollbar); | ||
| } | ||
| } | ||
| }; | ||
| _this.affixTableHeader = function () { | ||
| var affixHeader = _this.props.affixHeader; | ||
| var top = typeof affixHeader === 'number' ? affixHeader : 0; | ||
| var _this$state = _this.state, | ||
| affixHeaderOffset = _this$state.affixHeaderOffset, | ||
| headerOffset = _this$state.headerOffset, | ||
| contentHeight = _this$state.contentHeight; | ||
| var scrollY = window.scrollY || window.pageYOffset; | ||
| var fixedHeader = scrollY - (affixHeaderOffset.top - top) >= 0 && scrollY < affixHeaderOffset.top - top + contentHeight; | ||
| var fixedHeader = scrollY - (headerOffset.top - top) >= 0 && scrollY < headerOffset.top - top + contentHeight; | ||
@@ -146,3 +201,3 @@ if (_this.affixHeaderWrapperRef.current) { | ||
| _this.handleSortColumn = function (dataKey) { | ||
| var _this$props$onSortCol, _this$props; | ||
| var _this$props$onSortCol, _this$props4; | ||
@@ -159,3 +214,3 @@ var sortType = _this.getSortType(); | ||
| (_this$props$onSortCol = (_this$props = _this.props).onSortColumn) === null || _this$props$onSortCol === void 0 ? void 0 : _this$props$onSortCol.call(_this$props, dataKey, sortType); | ||
| (_this$props$onSortCol = (_this$props4 = _this.props).onSortColumn) === null || _this$props$onSortCol === void 0 ? void 0 : _this$props$onSortCol.call(_this$props4, dataKey, sortType); | ||
| }; | ||
@@ -207,3 +262,3 @@ | ||
| _this.handleTreeToggle = function (rowKey, _rowIndex, rowData) { | ||
| var _this$props$onExpandC, _this$props2; | ||
| var _this$props$onExpandC, _this$props5; | ||
@@ -233,3 +288,3 @@ var expandedRowKeys = _this.getExpandedRowKeys(); | ||
| (_this$props$onExpandC = (_this$props2 = _this.props).onExpandChange) === null || _this$props$onExpandC === void 0 ? void 0 : _this$props$onExpandC.call(_this$props2, !open, rowData); | ||
| (_this$props$onExpandC = (_this$props5 = _this.props).onExpandChange) === null || _this$props$onExpandC === void 0 ? void 0 : _this$props$onExpandC.call(_this$props5, !open, rowData); | ||
| }; | ||
@@ -246,5 +301,5 @@ | ||
| _this.handleWheel = function (deltaX, deltaY) { | ||
| var _this$props3 = _this.props, | ||
| onScroll = _this$props3.onScroll, | ||
| virtualized = _this$props3.virtualized; | ||
| var _this$props6 = _this.props, | ||
| onScroll = _this$props6.onScroll, | ||
| virtualized = _this$props6.virtualized; | ||
| var _this$state2 = _this.state, | ||
@@ -290,3 +345,3 @@ contentWidth = _this$state2.contentWidth, | ||
| _this.handleTouchStart = function (event) { | ||
| var _this$props$onTouchSt, _this$props4; | ||
| var _this$props$onTouchSt, _this$props7; | ||
@@ -301,7 +356,7 @@ if (event.touches) { | ||
| (_this$props$onTouchSt = (_this$props4 = _this.props).onTouchStart) === null || _this$props$onTouchSt === void 0 ? void 0 : _this$props$onTouchSt.call(_this$props4, event); | ||
| (_this$props$onTouchSt = (_this$props7 = _this.props).onTouchStart) === null || _this$props$onTouchSt === void 0 ? void 0 : _this$props$onTouchSt.call(_this$props7, event); | ||
| }; | ||
| _this.handleTouchMove = function (event) { | ||
| var _this$props$onTouchMo, _this$props5; | ||
| var _this$props$onTouchMo, _this$props8; | ||
@@ -311,3 +366,3 @@ var autoHeight = _this.props.autoHeight; | ||
| if (event.touches) { | ||
| var _event$preventDefault, _this$scrollbarXRef$c3, _this$scrollbarXRef$c4, _this$scrollbarYRef$c3, _this$scrollbarYRef$c4; | ||
| var _event$preventDefault, _this$scrollbarXRef$c5, _this$scrollbarXRef$c6, _this$scrollbarYRef$c3, _this$scrollbarYRef$c4; | ||
@@ -328,3 +383,3 @@ var _event$touches$2 = event.touches[0], | ||
| (_this$scrollbarXRef$c3 = _this.scrollbarXRef.current) === null || _this$scrollbarXRef$c3 === void 0 ? void 0 : (_this$scrollbarXRef$c4 = _this$scrollbarXRef$c3.onWheelScroll) === null || _this$scrollbarXRef$c4 === void 0 ? void 0 : _this$scrollbarXRef$c4.call(_this$scrollbarXRef$c3, deltaX); | ||
| (_this$scrollbarXRef$c5 = _this.scrollbarXRef.current) === null || _this$scrollbarXRef$c5 === void 0 ? void 0 : (_this$scrollbarXRef$c6 = _this$scrollbarXRef$c5.onWheelScroll) === null || _this$scrollbarXRef$c6 === void 0 ? void 0 : _this$scrollbarXRef$c6.call(_this$scrollbarXRef$c5, deltaX); | ||
| (_this$scrollbarYRef$c3 = _this.scrollbarYRef.current) === null || _this$scrollbarYRef$c3 === void 0 ? void 0 : (_this$scrollbarYRef$c4 = _this$scrollbarYRef$c3.onWheelScroll) === null || _this$scrollbarYRef$c4 === void 0 ? void 0 : _this$scrollbarYRef$c4.call(_this$scrollbarYRef$c3, deltaY); | ||
@@ -335,3 +390,3 @@ _this.touchX = pageX; | ||
| (_this$props$onTouchMo = (_this$props5 = _this.props).onTouchMove) === null || _this$props$onTouchMo === void 0 ? void 0 : _this$props$onTouchMo.call(_this$props5, event); | ||
| (_this$props$onTouchMo = (_this$props8 = _this.props).onTouchMove) === null || _this$props$onTouchMo === void 0 ? void 0 : _this$props$onTouchMo.call(_this$props8, event); | ||
| }; | ||
@@ -358,5 +413,5 @@ | ||
| _this.shouldHandleWheelX = function (delta) { | ||
| var _this$props6 = _this.props, | ||
| disabledScroll = _this$props6.disabledScroll, | ||
| loading = _this$props6.loading; | ||
| var _this$props9 = _this.props, | ||
| disabledScroll = _this$props9.disabledScroll, | ||
| loading = _this$props9.loading; | ||
@@ -371,5 +426,5 @@ if (delta === 0 || disabledScroll || loading) { | ||
| _this.shouldHandleWheelY = function (delta) { | ||
| var _this$props7 = _this.props, | ||
| disabledScroll = _this$props7.disabledScroll, | ||
| loading = _this$props7.loading; | ||
| var _this$props10 = _this.props, | ||
| disabledScroll = _this$props10.disabledScroll, | ||
| loading = _this$props10.loading; | ||
@@ -388,5 +443,5 @@ if (delta === 0 || disabledScroll || loading) { | ||
| _this.calculateTableWidth = function () { | ||
| var _this$tableRef; | ||
| var _this$tableRef2; | ||
| var table = (_this$tableRef = _this.tableRef) === null || _this$tableRef === void 0 ? void 0 : _this$tableRef.current; | ||
| var table = (_this$tableRef2 = _this.tableRef) === null || _this$tableRef2 === void 0 ? void 0 : _this$tableRef2.current; | ||
| var width = _this.state.width; | ||
@@ -398,6 +453,6 @@ | ||
| if (width !== nextWidth) { | ||
| var _this$scrollbarXRef, _this$scrollbarXRef$c5; | ||
| var _this$scrollbarXRef2, _this$scrollbarXRef2$; | ||
| _this.scrollX = 0; | ||
| (_this$scrollbarXRef = _this.scrollbarXRef) === null || _this$scrollbarXRef === void 0 ? void 0 : (_this$scrollbarXRef$c5 = _this$scrollbarXRef.current) === null || _this$scrollbarXRef$c5 === void 0 ? void 0 : _this$scrollbarXRef$c5.resetScrollBarPosition(); | ||
| (_this$scrollbarXRef2 = _this.scrollbarXRef) === null || _this$scrollbarXRef2 === void 0 ? void 0 : (_this$scrollbarXRef2$ = _this$scrollbarXRef2.current) === null || _this$scrollbarXRef2$ === void 0 ? void 0 : _this$scrollbarXRef2$.resetScrollBarPosition(); | ||
| } | ||
@@ -412,3 +467,3 @@ | ||
| _this.setAffixHeaderOffset(); | ||
| _this.setOffsetByAffix(); | ||
| }; | ||
@@ -430,3 +485,3 @@ | ||
| _this.scrollLeft = function (left) { | ||
| var _this$scrollbarXRef2, _this$scrollbarXRef2$, _this$scrollbarXRef2$2; | ||
| var _this$scrollbarXRef3, _this$scrollbarXRef3$, _this$scrollbarXRef3$2; | ||
@@ -438,3 +493,3 @@ if (left === void 0) { | ||
| _this.scrollX = -left; | ||
| (_this$scrollbarXRef2 = _this.scrollbarXRef) === null || _this$scrollbarXRef2 === void 0 ? void 0 : (_this$scrollbarXRef2$ = _this$scrollbarXRef2.current) === null || _this$scrollbarXRef2$ === void 0 ? void 0 : (_this$scrollbarXRef2$2 = _this$scrollbarXRef2$.resetScrollBarPosition) === null || _this$scrollbarXRef2$2 === void 0 ? void 0 : _this$scrollbarXRef2$2.call(_this$scrollbarXRef2$, _this.scrollLeftToScrollValue(left)); | ||
| (_this$scrollbarXRef3 = _this.scrollbarXRef) === null || _this$scrollbarXRef3 === void 0 ? void 0 : (_this$scrollbarXRef3$ = _this$scrollbarXRef3.current) === null || _this$scrollbarXRef3$ === void 0 ? void 0 : (_this$scrollbarXRef3$2 = _this$scrollbarXRef3$.resetScrollBarPosition) === null || _this$scrollbarXRef3$2 === void 0 ? void 0 : _this$scrollbarXRef3$2.call(_this$scrollbarXRef3$, _this.scrollLeftToScrollValue(left)); | ||
@@ -454,5 +509,5 @@ _this.updatePosition(); | ||
| return function (event) { | ||
| var _this$props$onRowClic, _this$props8; | ||
| var _this$props$onRowClic, _this$props11; | ||
| (_this$props$onRowClic = (_this$props8 = _this.props).onRowClick) === null || _this$props$onRowClic === void 0 ? void 0 : _this$props$onRowClic.call(_this$props8, rowData, event); | ||
| (_this$props$onRowClic = (_this$props11 = _this.props).onRowClick) === null || _this$props$onRowClic === void 0 ? void 0 : _this$props$onRowClic.call(_this$props11, rowData, event); | ||
| }; | ||
@@ -519,3 +574,3 @@ }; | ||
| _proto.componentDidMount = function componentDidMount() { | ||
| var _this$props9, _this$props9$bodyRef; | ||
| var _this$props13, _this$props13$bodyRef; | ||
@@ -525,3 +580,3 @@ this.calculateTableWidth(); | ||
| this.calculateRowMaxHeight(); | ||
| this.setAffixHeaderOffset(); | ||
| this.setOffsetByAffix(); | ||
| this.initPosition(); | ||
@@ -540,9 +595,11 @@ (0, _elementResizeEvent["default"])(this.tableRef.current, (0, _debounce["default"])(this.calculateTableWidth, 400)); | ||
| var affixHeader = this.props.affixHeader; | ||
| var _this$props12 = this.props, | ||
| affixHeader = _this$props12.affixHeader, | ||
| affixHorizontalScrollbar = _this$props12.affixHorizontalScrollbar; | ||
| if (affixHeader === 0 || affixHeader) { | ||
| this.scrollListener = (0, _domLib.on)(window, 'scroll', this.updateAffixHeaderStatus); | ||
| if ((0, _utils.isNumberOrTrue)(affixHeader) || (0, _utils.isNumberOrTrue)(affixHorizontalScrollbar)) { | ||
| this.scrollListener = (0, _domLib.on)(window, 'scroll', this.handleWindowScroll); | ||
| } | ||
| (_this$props9 = this.props) === null || _this$props9 === void 0 ? void 0 : (_this$props9$bodyRef = _this$props9.bodyRef) === null || _this$props9$bodyRef === void 0 ? void 0 : _this$props9$bodyRef.call(_this$props9, this.wheelWrapperRef.current); | ||
| (_this$props13 = this.props) === null || _this$props13 === void 0 ? void 0 : (_this$props13$bodyRef = _this$props13.bodyRef) === null || _this$props13$bodyRef === void 0 ? void 0 : _this$props13$bodyRef.call(_this$props13, this.wheelWrapperRef.current); | ||
| }; | ||
@@ -644,5 +701,5 @@ | ||
| _proto.getTableHeaderHeight = function getTableHeaderHeight() { | ||
| var _this$props10 = this.props, | ||
| headerHeight = _this$props10.headerHeight, | ||
| showHeader = _this$props10.showHeader; | ||
| var _this$props14 = this.props, | ||
| headerHeight = _this$props14.headerHeight, | ||
| showHeader = _this$props14.showHeader; | ||
| return showHeader ? headerHeight : 0; | ||
@@ -657,7 +714,7 @@ } | ||
| var contentHeight = this.state.contentHeight; | ||
| var _this$props11 = this.props, | ||
| minHeight = _this$props11.minHeight, | ||
| height = _this$props11.height, | ||
| autoHeight = _this$props11.autoHeight, | ||
| data = _this$props11.data; | ||
| var _this$props15 = this.props, | ||
| minHeight = _this$props15.minHeight, | ||
| height = _this$props15.height, | ||
| autoHeight = _this$props15.autoHeight, | ||
| data = _this$props15.data; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -702,6 +759,6 @@ | ||
| var tableWidth = this.state.width; | ||
| var _this$props12 = this.props, | ||
| sortColumn = _this$props12.sortColumn, | ||
| rowHeight = _this$props12.rowHeight, | ||
| showHeader = _this$props12.showHeader; | ||
| var _this$props16 = this.props, | ||
| sortColumn = _this$props16.sortColumn, | ||
| rowHeight = _this$props16.rowHeight, | ||
| showHeader = _this$props16.showHeader; | ||
@@ -816,3 +873,3 @@ var _getTotalByColumns = (0, _utils.getTotalByColumns)(columns), | ||
| } else { | ||
| var _this$wheelWrapperRef, _this$headerWrapperRe; | ||
| var _this$wheelWrapperRef, _this$headerWrapperRe2; | ||
@@ -824,3 +881,3 @@ var wheelStyle = {}; | ||
| ((_this$wheelWrapperRef = this.wheelWrapperRef) === null || _this$wheelWrapperRef === void 0 ? void 0 : _this$wheelWrapperRef.current) && (0, _domLib.addStyle)(this.wheelWrapperRef.current, wheelStyle); | ||
| ((_this$headerWrapperRe = this.headerWrapperRef) === null || _this$headerWrapperRe === void 0 ? void 0 : _this$headerWrapperRe.current) && (0, _domLib.addStyle)(this.headerWrapperRef.current, headerStyle); | ||
| ((_this$headerWrapperRe2 = this.headerWrapperRef) === null || _this$headerWrapperRe2 === void 0 ? void 0 : _this$headerWrapperRe2.current) && (0, _domLib.addStyle)(this.headerWrapperRef.current, headerStyle); | ||
| } | ||
@@ -866,6 +923,6 @@ | ||
| _proto.shouldRenderExpandedRow = function shouldRenderExpandedRow(rowData) { | ||
| var _this$props13 = this.props, | ||
| rowKey = _this$props13.rowKey, | ||
| renderRowExpanded = _this$props13.renderRowExpanded, | ||
| isTree = _this$props13.isTree; | ||
| var _this$props17 = this.props, | ||
| rowKey = _this$props17.rowKey, | ||
| renderRowExpanded = _this$props17.renderRowExpanded, | ||
| isTree = _this$props17.isTree; | ||
| var expandedRowKeys = this.getExpandedRowKeys() || []; | ||
@@ -910,5 +967,5 @@ return (0, _isFunction["default"])(renderRowExpanded) && !isTree && expandedRowKeys.some(function (key) { | ||
| _proto.calculateTableContentWidth = function calculateTableContentWidth(prevProps) { | ||
| var _this$tableRef2; | ||
| var _this$tableRef3; | ||
| var table = (_this$tableRef2 = this.tableRef) === null || _this$tableRef2 === void 0 ? void 0 : _this$tableRef2.current; | ||
| var table = (_this$tableRef3 = this.tableRef) === null || _this$tableRef3 === void 0 ? void 0 : _this$tableRef3.current; | ||
| var row = table.querySelector("." + this.addPrefix('row') + ":not(.virtualized)"); | ||
@@ -936,6 +993,6 @@ var contentWidth = row ? (0, _domLib.getWidth)(row) : 0; | ||
| var rows = table.querySelectorAll("." + this.addPrefix('row')) || []; | ||
| var _this$props14 = this.props, | ||
| height = _this$props14.height, | ||
| autoHeight = _this$props14.autoHeight, | ||
| rowHeight = _this$props14.rowHeight; | ||
| var _this$props18 = this.props, | ||
| height = _this$props18.height, | ||
| autoHeight = _this$props18.autoHeight, | ||
| rowHeight = _this$props18.rowHeight; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -999,7 +1056,7 @@ var contentHeight = rows.length ? Array.from(rows).map(function (row) { | ||
| _proto.renderRowData = function renderRowData(bodyCells, rowData, props, shouldRenderExpandedRow) { | ||
| var _this$props15 = this.props, | ||
| renderTreeToggle = _this$props15.renderTreeToggle, | ||
| rowKey = _this$props15.rowKey, | ||
| wordWrap = _this$props15.wordWrap, | ||
| isTree = _this$props15.isTree; | ||
| var _this$props19 = this.props, | ||
| renderTreeToggle = _this$props19.renderTreeToggle, | ||
| rowKey = _this$props19.rowKey, | ||
| wordWrap = _this$props19.wordWrap, | ||
| isTree = _this$props19.isTree; | ||
| var hasChildren = isTree && rowData.children && Array.isArray(rowData.children); | ||
@@ -1116,5 +1173,5 @@ var nextRowKey = typeof rowData[rowKey] !== 'undefined' ? rowData[rowKey] : props.key; | ||
| _proto.renderRowExpanded = function renderRowExpanded(rowData) { | ||
| var _this$props16 = this.props, | ||
| renderRowExpanded = _this$props16.renderRowExpanded, | ||
| rowExpandedHeight = _this$props16.rowExpandedHeight; | ||
| var _this$props20 = this.props, | ||
| renderRowExpanded = _this$props20.renderRowExpanded, | ||
| rowExpandedHeight = _this$props20.rowExpandedHeight; | ||
| var styles = { | ||
@@ -1184,10 +1241,10 @@ height: rowExpandedHeight | ||
| _proto.renderTableBody = function renderTableBody(bodyCells, rowWidth) { | ||
| var _this$props17 = this.props, | ||
| rowExpandedHeight = _this$props17.rowExpandedHeight, | ||
| renderRowExpanded = _this$props17.renderRowExpanded, | ||
| isTree = _this$props17.isTree, | ||
| rowKey = _this$props17.rowKey, | ||
| wordWrap = _this$props17.wordWrap, | ||
| virtualized = _this$props17.virtualized, | ||
| rowHeight = _this$props17.rowHeight; | ||
| var _this$props21 = this.props, | ||
| rowExpandedHeight = _this$props21.rowExpandedHeight, | ||
| renderRowExpanded = _this$props21.renderRowExpanded, | ||
| isTree = _this$props21.isTree, | ||
| rowKey = _this$props21.rowKey, | ||
| wordWrap = _this$props21.wordWrap, | ||
| virtualized = _this$props21.virtualized, | ||
| rowHeight = _this$props21.rowHeight; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -1329,6 +1386,6 @@ var _this$state6 = this.state, | ||
| _proto.renderInfo = function renderInfo() { | ||
| var _this$props18 = this.props, | ||
| locale = _this$props18.locale, | ||
| renderEmpty = _this$props18.renderEmpty, | ||
| loading = _this$props18.loading; | ||
| var _this$props22 = this.props, | ||
| locale = _this$props22.locale, | ||
| renderEmpty = _this$props22.renderEmpty, | ||
| loading = _this$props22.loading; | ||
@@ -1349,3 +1406,4 @@ if (this._visibleRows.length || loading) { | ||
| contentWidth = _this$state7.contentWidth, | ||
| contentHeight = _this$state7.contentHeight; | ||
| contentHeight = _this$state7.contentHeight, | ||
| width = _this$state7.width; | ||
| var headerHeight = this.getTableHeaderHeight(); | ||
@@ -1359,2 +1417,5 @@ var height = this.getTableHeight(); | ||
| return React.createElement("div", null, React.createElement(_Scrollbar["default"], { | ||
| style: { | ||
| width: width | ||
| }, | ||
| length: this.state.width, | ||
@@ -1378,7 +1439,7 @@ onScroll: this.handleScrollX, | ||
| _proto.renderLoading = function renderLoading() { | ||
| var _this$props19 = this.props, | ||
| locale = _this$props19.locale, | ||
| loading = _this$props19.loading, | ||
| loadAnimation = _this$props19.loadAnimation, | ||
| renderLoading = _this$props19.renderLoading; | ||
| var _this$props23 = this.props, | ||
| locale = _this$props23.locale, | ||
| loading = _this$props23.loading, | ||
| loadAnimation = _this$props23.loadAnimation, | ||
| renderLoading = _this$props23.renderLoading; | ||
@@ -1404,17 +1465,17 @@ if (!loadAnimation && !loading) { | ||
| var _this$props20 = this.props, | ||
| children = _this$props20.children, | ||
| className = _this$props20.className, | ||
| _this$props20$width = _this$props20.width, | ||
| width = _this$props20$width === void 0 ? 0 : _this$props20$width, | ||
| style = _this$props20.style, | ||
| isTree = _this$props20.isTree, | ||
| hover = _this$props20.hover, | ||
| bordered = _this$props20.bordered, | ||
| cellBordered = _this$props20.cellBordered, | ||
| wordWrap = _this$props20.wordWrap, | ||
| classPrefix = _this$props20.classPrefix, | ||
| loading = _this$props20.loading, | ||
| showHeader = _this$props20.showHeader, | ||
| rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props20, ["children", "className", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader"]); | ||
| var _this$props24 = this.props, | ||
| children = _this$props24.children, | ||
| className = _this$props24.className, | ||
| _this$props24$width = _this$props24.width, | ||
| width = _this$props24$width === void 0 ? 0 : _this$props24$width, | ||
| style = _this$props24.style, | ||
| isTree = _this$props24.isTree, | ||
| hover = _this$props24.hover, | ||
| bordered = _this$props24.bordered, | ||
| cellBordered = _this$props24.cellBordered, | ||
| wordWrap = _this$props24.wordWrap, | ||
| classPrefix = _this$props24.classPrefix, | ||
| loading = _this$props24.loading, | ||
| showHeader = _this$props24.showHeader, | ||
| rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props24, ["children", "className", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader"]); | ||
| var isColumnResizing = this.state.isColumnResizing; | ||
@@ -1496,2 +1557,3 @@ | ||
| affixHeader: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number]), | ||
| affixHorizontalScrollbar: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number]), | ||
| rtl: _propTypes["default"].bool | ||
@@ -1498,0 +1560,0 @@ }; |
@@ -12,2 +12,3 @@ "use strict"; | ||
| toggleClass: true, | ||
| toggle: true, | ||
| flattenData: true, | ||
@@ -19,5 +20,6 @@ translateDOMPositionXY: true, | ||
| shouldShowRowByExpanded: true, | ||
| resetLeftForCells: true | ||
| resetLeftForCells: true, | ||
| isNumberOrTrue: true | ||
| }; | ||
| exports.resetLeftForCells = exports.shouldShowRowByExpanded = exports.findAllParents = exports.findRowKeys = exports.isRTL = exports.translateDOMPositionXY = exports.flattenData = exports.toggleClass = exports.colSpanCells = exports.getTotalByColumns = exports.getUnhandledProps = exports.isNullOrUndefined = void 0; | ||
| exports.isNumberOrTrue = exports.resetLeftForCells = exports.shouldShowRowByExpanded = exports.findAllParents = exports.findRowKeys = exports.isRTL = exports.translateDOMPositionXY = exports.flattenData = exports.toggle = exports.toggleClass = exports.colSpanCells = exports.getTotalByColumns = exports.getUnhandledProps = exports.isNullOrUndefined = void 0; | ||
@@ -52,2 +54,6 @@ var _prefix = require("./prefix"); | ||
| var _toggle = _interopRequireDefault(require("./toggle")); | ||
| exports.toggle = _toggle["default"]; | ||
| var _flattenData = _interopRequireDefault(require("./flattenData")); | ||
@@ -81,2 +87,6 @@ | ||
| var _isNumberOrTrue = _interopRequireDefault(require("./isNumberOrTrue")); | ||
| exports.isNumberOrTrue = _isNumberOrTrue["default"]; | ||
| var _requestAnimationTimeout = require("./requestAnimationTimeout"); | ||
@@ -83,0 +93,0 @@ |
| { | ||
| "name": "rsuite-table", | ||
| "version": "3.9.5", | ||
| "version": "3.10.0", | ||
| "description": "A React table component", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -97,39 +97,40 @@ # rsuite-table | ||
| | Property | Type `(Default)` | Description | | ||
| | ---------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | | ||
| | affixHeader | boolean,number | Affix the table header to the specified location on the page | | ||
| | autoHeight | boolean | Automatic height | | ||
| | bodyRef | (ref: HTMLElement) => void | A ref attached to the table body element | | ||
| | bordered | boolean | Show border | | ||
| | cellBordered | boolean | Show cell border | | ||
| | data \* | object[] | Table data | | ||
| | defaultExpandAllRows | boolean | Expand all nodes By default | | ||
| | defaultExpandedRowKeys | string[] | Specify the default expanded row by `rowkey` | | ||
| | defaultSortType | enum: 'desc', 'asc' | Sort type | | ||
| | expandedRowKeys | string[] | Specify the default expanded row by `rowkey` (Controlled) | | ||
| | headerHeight | number`(40)` | Table Header Height | | ||
| | height | number`(200)` | Table height | | ||
| | hover | boolean `(true)` | The row of the table has a mouseover effect | | ||
| | isTree | boolean | Show as Tree table | | ||
| | loading | boolean | Show loading | | ||
| | locale | object: { emptyMessage: `('No data')`, loading: `('Loading...')` } | Messages for empty data and loading states | | ||
| | minHeight | number `(0)` | Minimum height | | ||
| | onExpandChange | (expanded:boolean,rowData:object)=>void | Tree table, the callback function in the expanded node | | ||
| | onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to `rowDate` | | ||
| | onScroll | (scrollX:object, scrollY:object)=>void | Callback function for scroll bar scrolling | | ||
| | onSortColumn | (dataKey:string, sortType:string)=>void | Click the callback function of the sort sequence to return the value `sortColumn`, `sortType` | | ||
| | renderEmpty | (info: React.ReactNode) => React.ReactNode | Customized data is empty display content | | ||
| | renderLoading | (loading: React.ReactNode) => React.ReactNode | Customize the display content in the data load | | ||
| | renderRowExpanded | (rowDate?: Object) => React.ReactNode | Customize what you can do to expand a zone | | ||
| | renderTreeToggle | (icon:node,rowData:object,expanded:boolean)=> node | Tree table, the callback function in the expanded node | | ||
| | rowClassName | string , (rowData:object)=>string | Add an optional extra class name to row | | ||
| | rowExpandedHeight | number `(100)` | Set the height of an expandable area | | ||
| | rowHeight | number`(46)`, (rowData: object) => number | Row height | | ||
| | rowKey | string `('key')` | Each row corresponds to the unique `key` in `data` | | ||
| | rtl | boolean | Right to left | | ||
| | showHeader | boolean `(true)` | Display header | | ||
| | sortColumn | string | Sort column name ˝ | | ||
| | sortType | enum: 'desc', 'asc' | Sort type (Controlled) | | ||
| | virtualized | boolean | Effectively render large tabular data | | ||
| | width | number | Table width | | ||
| | Property | Type `(Default)` | Description | | ||
| | ------------------------ | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | | ||
| | affixHeader | boolean,number | Affix the table header to the specified position on the page | | ||
| | affixHorizontalScrollbar | boolean,number | Affix the table horizontal scrollbar to the specified position on the page | | ||
| | autoHeight | boolean | Automatic height | | ||
| | bodyRef | (ref: HTMLElement) => void | A ref attached to the table body element | | ||
| | bordered | boolean | Show border | | ||
| | cellBordered | boolean | Show cell border | | ||
| | data \* | object[] | Table data | | ||
| | defaultExpandAllRows | boolean | Expand all nodes By default | | ||
| | defaultExpandedRowKeys | string[] | Specify the default expanded row by `rowkey` | | ||
| | defaultSortType | enum: 'desc', 'asc' | Sort type | | ||
| | expandedRowKeys | string[] | Specify the default expanded row by `rowkey` (Controlled) | | ||
| | headerHeight | number`(40)` | Table Header Height | | ||
| | height | number`(200)` | Table height | | ||
| | hover | boolean `(true)` | The row of the table has a mouseover effect | | ||
| | isTree | boolean | Show as Tree table | | ||
| | loading | boolean | Show loading | | ||
| | locale | object: { emptyMessage: `('No data')`, loading: `('Loading...')` } | Messages for empty data and loading states | | ||
| | minHeight | number `(0)` | Minimum height | | ||
| | onExpandChange | (expanded:boolean,rowData:object)=>void | Tree table, the callback function in the expanded node | | ||
| | onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to `rowDate` | | ||
| | onScroll | (scrollX:object, scrollY:object)=>void | Callback function for scroll bar scrolling | | ||
| | onSortColumn | (dataKey:string, sortType:string)=>void | Click the callback function of the sort sequence to return the value `sortColumn`, `sortType` | | ||
| | renderEmpty | (info: React.ReactNode) => React.ReactNode | Customized data is empty display content | | ||
| | renderLoading | (loading: React.ReactNode) => React.ReactNode | Customize the display content in the data load | | ||
| | renderRowExpanded | (rowDate?: Object) => React.ReactNode | Customize what you can do to expand a zone | | ||
| | renderTreeToggle | (icon:node,rowData:object,expanded:boolean)=> node | Tree table, the callback function in the expanded node | | ||
| | rowClassName | string , (rowData:object)=>string | Add an optional extra class name to row | | ||
| | rowExpandedHeight | number `(100)` | Set the height of an expandable area | | ||
| | rowHeight | number`(46)`, (rowData: object) => number | Row height | | ||
| | rowKey | string `('key')` | Each row corresponds to the unique `key` in `data` | | ||
| | rtl | boolean | Right to left | | ||
| | showHeader | boolean `(true)` | Display header | | ||
| | sortColumn | string | Sort column name ˝ | | ||
| | sortType | enum: 'desc', 'asc' | Sort type (Controlled) | | ||
| | virtualized | boolean | Effectively render large tabular data | | ||
| | width | number | Table width | | ||
@@ -136,0 +137,0 @@ ### `<Column>` |
@@ -11,2 +11,3 @@ import * as React from 'react'; | ||
| onMouseDown?: (event: React.MouseEvent) => void; | ||
| [key: string]: any; | ||
| } | ||
@@ -13,0 +14,0 @@ |
@@ -53,3 +53,4 @@ import * as React from 'react'; | ||
| affixHeader?: boolean | number; | ||
| affixHorizontalScrollbar?: boolean | number; | ||
| rtl?: boolean; | ||
| } |
@@ -7,2 +7,3 @@ export * from './prefix'; | ||
| export { default as toggleClass } from './toggleClass'; | ||
| export { default as toggle } from './toggle'; | ||
| export { default as flattenData } from './flattenData'; | ||
@@ -15,2 +16,3 @@ export { default as translateDOMPositionXY } from './translateDOMPositionXY'; | ||
| export { default as resetLeftForCells } from './resetLeftForCells'; | ||
| export { default as isNumberOrTrue } from './isNumberOrTrue'; | ||
| export * from './requestAnimationTimeout'; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by2.75%
383279
- Number of package files
- increased by4.14%
151
- Lines of code
- increased by2.83%
8246
- Number of lines in readme file
- increased by0.47%
213
No dependency changes