rsuite-table - npm Package Compare versions

Comparing version 3.10.0 to 3.10.1

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 3.10.1
+
+- **Bugfix**: Fix the problem that the position will be reset after clicking the scroll bar
+
 # 3.10.0
@@ -2,0 +6,0 @@

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, removeStyle, getWidth, getHeight, WheelHandler, scrollLeft, scrollTop, on, getOffset } from 'dom-lib';
+import { addStyle, getWidth, getHeight, WheelHandler, scrollLeft, scrollTop, on, getOffset } from 'dom-lib';
 import Row from './Row';
@@ -23,4 +23,3 @@ import CellGroup from './CellGroup';
 import { SCROLLBAR_WIDTH, CELL_PADDING_HEIGHT } from './constants';
-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);
+import { getTotalByColumns, colSpanCells, getUnhandledProps, defaultClassPrefix, toggleClass, flattenData, prefix, requestAnimationTimeout, cancelAnimationTimeout, isRTL as _isRTL, isNumberOrTrue, findRowKeys, findAllParents, shouldShowRowByExpanded, resetLeftForCells } from './utils';
 var SORT_TYPE = {
@@ -138,3 +137,5 @@ DESC: 'desc',
 
-      var tableOffset = _this.state.tableOffset;
+      var _this$state = _this.state,
+          tableOffset = _this$state.tableOffset,
+          fixedHorizontalScrollbar = _this$state.fixedHorizontalScrollbar;
       var _this$props3 = _this.props,
@@ -148,6 +149,6 @@ headerHeight = _this$props3.headerHeight,
       if (bar) {
-        toggleClass(bar, 'fixed', fixedScrollbar);
-
-        if (bottom) {
-          toggleStyle(bar, ['bottom', bottom + "px"])(fixedScrollbar);
+        if (fixedHorizontalScrollbar !== fixedScrollbar) {
+          _this.setState({
+            fixedHorizontalScrollbar: fixedScrollbar
+          });
         }
@@ -160,5 +161,5 @@ }
       var top = typeof affixHeader === 'number' ? affixHeader : 0;
-      var _this$state = _this.state,
-          headerOffset = _this$state.headerOffset,
-          contentHeight = _this$state.contentHeight;
+      var _this$state2 = _this.state,
+          headerOffset = _this$state2.headerOffset,
+          contentHeight = _this$state2.contentHeight;
       var scrollY = window.scrollY || window.pageYOffset;
@@ -272,5 +273,5 @@ var fixedHeader = scrollY - (headerOffset.top - top) >= 0 && scrollY < headerOffset.top - top + contentHeight;
           virtualized = _this$props6.virtualized;
-      var _this$state2 = _this.state,
-          contentWidth = _this$state2.contentWidth,
-          width = _this$state2.width;
+      var _this$state3 = _this.state,
+          contentWidth = _this$state3.contentWidth,
+          width = _this$state3.width;
 
@@ -845,5 +846,5 @@ if (!_this.tableRef.current) {
     var fixedRightGroups = this.getFixedRightCellGroups();
-    var _this$state3 = this.state,
-        contentWidth = _this$state3.contentWidth,
-        width = _this$state3.width;
+    var _this$state4 = this.state,
+        contentWidth = _this$state4.contentWidth,
+        width = _this$state4.width;
     this.translateDOMPositionXY(wheelGroupStyle, this.scrollX, 0);
@@ -989,5 +990,5 @@ this.translateDOMPositionXY(wheelStyle, 0, this.scrollY);
   _proto.scrollLeftToScrollValue = function scrollLeftToScrollValue(value) {
-    var _this$state4 = this.state,
-        contentWidth = _this$state4.contentWidth,
-        width = _this$state4.width;
+    var _this$state5 = this.state,
+        contentWidth = _this$state5.contentWidth,
+        width = _this$state5.width;
     return value / contentWidth * width;
@@ -1042,6 +1043,6 @@ }
     var rowClassName = this.props.rowClassName;
-    var _this$state5 = this.state,
-        shouldFixedColumn = _this$state5.shouldFixedColumn,
-        width = _this$state5.width,
-        contentWidth = _this$state5.contentWidth;
+    var _this$state6 = this.state,
+        shouldFixedColumn = _this$state6.shouldFixedColumn,
+        width = _this$state6.width,
+        contentWidth = _this$state6.contentWidth;
 
@@ -1197,6 +1198,6 @@ if (typeof rowClassName === 'function') {
     var headerHeight = this.getTableHeaderHeight();
-    var _this$state6 = this.state,
-        tableRowsMaxHeight = _this$state6.tableRowsMaxHeight,
-        isScrolling = _this$state6.isScrolling,
-        data = _this$state6.data;
+    var _this$state7 = this.state,
+        tableRowsMaxHeight = _this$state7.tableRowsMaxHeight,
+        isScrolling = _this$state7.isScrolling,
+        data = _this$state7.data;
     var height = this.getTableHeight();
@@ -1349,7 +1350,11 @@ var bodyHeight = height - headerHeight;
   _proto.renderScrollbar = function renderScrollbar() {
-    var disabledScroll = this.props.disabledScroll;
-    var _this$state7 = this.state,
-        contentWidth = _this$state7.contentWidth,
-        contentHeight = _this$state7.contentHeight,
-        width = _this$state7.width;
+    var _this$props23 = this.props,
+        disabledScroll = _this$props23.disabledScroll,
+        affixHorizontalScrollbar = _this$props23.affixHorizontalScrollbar;
+    var _this$state8 = this.state,
+        contentWidth = _this$state8.contentWidth,
+        contentHeight = _this$state8.contentHeight,
+        width = _this$state8.width,
+        fixedHorizontalScrollbar = _this$state8.fixedHorizontalScrollbar;
+    var bottom = typeof affixHorizontalScrollbar === 'number' ? affixHorizontalScrollbar : 0;
     var headerHeight = this.getTableHeaderHeight();
@@ -1363,4 +1368,8 @@ var height = this.getTableHeight();
     return React.createElement("div", null, React.createElement(Scrollbar, {
+      className: classNames({
+        fixed: fixedHorizontalScrollbar
+      }),
       style: {
-        width: width
+        width: width,
+        bottom: fixedHorizontalScrollbar ? bottom : undefined
       },
@@ -1385,7 +1394,7 @@ length: this.state.width,
   _proto.renderLoading = function renderLoading() {
-    var _this$props23 = this.props,
-        locale = _this$props23.locale,
-        loading = _this$props23.loading,
-        loadAnimation = _this$props23.loadAnimation,
-        renderLoading = _this$props23.renderLoading;
+    var _this$props24 = this.props,
+        locale = _this$props24.locale,
+        loading = _this$props24.loading,
+        loadAnimation = _this$props24.loadAnimation,
+        renderLoading = _this$props24.renderLoading;
 
@@ -1411,17 +1420,17 @@ if (!loadAnimation && !loading) {
 
-    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"]);
+    var _this$props25 = this.props,
+        children = _this$props25.children,
+        className = _this$props25.className,
+        _this$props25$width = _this$props25.width,
+        width = _this$props25$width === void 0 ? 0 : _this$props25$width,
+        style = _this$props25.style,
+        isTree = _this$props25.isTree,
+        hover = _this$props25.hover,
+        bordered = _this$props25.bordered,
+        cellBordered = _this$props25.cellBordered,
+        wordWrap = _this$props25.wordWrap,
+        classPrefix = _this$props25.classPrefix,
+        loading = _this$props25.loading,
+        showHeader = _this$props25.showHeader,
+        rest = _objectWithoutPropertiesLoose(_this$props25, ["children", "className", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader"]);
 
@@ -1428,0 +1437,0 @@ var isColumnResizing = this.state.isColumnResizing;

lib/Table.js

@@ -54,3 +54,2 @@ "use strict";
 
-var toggleStyle = (0, _utils.toggle)(_domLib.addStyle, _domLib.removeStyle);
 var SORT_TYPE = {
@@ -168,3 +167,5 @@ DESC: 'desc',
 
-      var tableOffset = _this.state.tableOffset;
+      var _this$state = _this.state,
+          tableOffset = _this$state.tableOffset,
+          fixedHorizontalScrollbar = _this$state.fixedHorizontalScrollbar;
       var _this$props3 = _this.props,
@@ -178,6 +179,6 @@ headerHeight = _this$props3.headerHeight,
       if (bar) {
-        (0, _utils.toggleClass)(bar, 'fixed', fixedScrollbar);
-
-        if (bottom) {
-          toggleStyle(bar, ['bottom', bottom + "px"])(fixedScrollbar);
+        if (fixedHorizontalScrollbar !== fixedScrollbar) {
+          _this.setState({
+            fixedHorizontalScrollbar: fixedScrollbar
+          });
         }
@@ -190,5 +191,5 @@ }
       var top = typeof affixHeader === 'number' ? affixHeader : 0;
-      var _this$state = _this.state,
-          headerOffset = _this$state.headerOffset,
-          contentHeight = _this$state.contentHeight;
+      var _this$state2 = _this.state,
+          headerOffset = _this$state2.headerOffset,
+          contentHeight = _this$state2.contentHeight;
       var scrollY = window.scrollY || window.pageYOffset;
@@ -302,5 +303,5 @@ var fixedHeader = scrollY - (headerOffset.top - top) >= 0 && scrollY < headerOffset.top - top + contentHeight;
           virtualized = _this$props6.virtualized;
-      var _this$state2 = _this.state,
-          contentWidth = _this$state2.contentWidth,
-          width = _this$state2.width;
+      var _this$state3 = _this.state,
+          contentWidth = _this$state3.contentWidth,
+          width = _this$state3.width;
 
@@ -875,5 +876,5 @@ if (!_this.tableRef.current) {
     var fixedRightGroups = this.getFixedRightCellGroups();
-    var _this$state3 = this.state,
-        contentWidth = _this$state3.contentWidth,
-        width = _this$state3.width;
+    var _this$state4 = this.state,
+        contentWidth = _this$state4.contentWidth,
+        width = _this$state4.width;
     this.translateDOMPositionXY(wheelGroupStyle, this.scrollX, 0);
@@ -1019,5 +1020,5 @@ this.translateDOMPositionXY(wheelStyle, 0, this.scrollY);
   _proto.scrollLeftToScrollValue = function scrollLeftToScrollValue(value) {
-    var _this$state4 = this.state,
-        contentWidth = _this$state4.contentWidth,
-        width = _this$state4.width;
+    var _this$state5 = this.state,
+        contentWidth = _this$state5.contentWidth,
+        width = _this$state5.width;
     return value / contentWidth * width;
@@ -1070,6 +1071,6 @@ }
     var rowClassName = this.props.rowClassName;
-    var _this$state5 = this.state,
-        shouldFixedColumn = _this$state5.shouldFixedColumn,
-        width = _this$state5.width,
-        contentWidth = _this$state5.contentWidth;
+    var _this$state6 = this.state,
+        shouldFixedColumn = _this$state6.shouldFixedColumn,
+        width = _this$state6.width,
+        contentWidth = _this$state6.contentWidth;
 
@@ -1225,6 +1226,6 @@ if (typeof rowClassName === 'function') {
     var headerHeight = this.getTableHeaderHeight();
-    var _this$state6 = this.state,
-        tableRowsMaxHeight = _this$state6.tableRowsMaxHeight,
-        isScrolling = _this$state6.isScrolling,
-        data = _this$state6.data;
+    var _this$state7 = this.state,
+        tableRowsMaxHeight = _this$state7.tableRowsMaxHeight,
+        isScrolling = _this$state7.isScrolling,
+        data = _this$state7.data;
     var height = this.getTableHeight();
@@ -1377,7 +1378,11 @@ var bodyHeight = height - headerHeight;
   _proto.renderScrollbar = function renderScrollbar() {
-    var disabledScroll = this.props.disabledScroll;
-    var _this$state7 = this.state,
-        contentWidth = _this$state7.contentWidth,
-        contentHeight = _this$state7.contentHeight,
-        width = _this$state7.width;
+    var _this$props23 = this.props,
+        disabledScroll = _this$props23.disabledScroll,
+        affixHorizontalScrollbar = _this$props23.affixHorizontalScrollbar;
+    var _this$state8 = this.state,
+        contentWidth = _this$state8.contentWidth,
+        contentHeight = _this$state8.contentHeight,
+        width = _this$state8.width,
+        fixedHorizontalScrollbar = _this$state8.fixedHorizontalScrollbar;
+    var bottom = typeof affixHorizontalScrollbar === 'number' ? affixHorizontalScrollbar : 0;
     var headerHeight = this.getTableHeaderHeight();
@@ -1391,4 +1396,8 @@ var height = this.getTableHeight();
     return React.createElement("div", null, React.createElement(_Scrollbar["default"], {
+      className: (0, _classnames["default"])({
+        fixed: fixedHorizontalScrollbar
+      }),
       style: {
-        width: width
+        width: width,
+        bottom: fixedHorizontalScrollbar ? bottom : undefined
       },
@@ -1413,7 +1422,7 @@ length: this.state.width,
   _proto.renderLoading = function renderLoading() {
-    var _this$props23 = this.props,
-        locale = _this$props23.locale,
-        loading = _this$props23.loading,
-        loadAnimation = _this$props23.loadAnimation,
-        renderLoading = _this$props23.renderLoading;
+    var _this$props24 = this.props,
+        locale = _this$props24.locale,
+        loading = _this$props24.loading,
+        loadAnimation = _this$props24.loadAnimation,
+        renderLoading = _this$props24.renderLoading;
 
@@ -1439,17 +1448,17 @@ if (!loadAnimation && !loading) {
 
-    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 _this$props25 = this.props,
+        children = _this$props25.children,
+        className = _this$props25.className,
+        _this$props25$width = _this$props25.width,
+        width = _this$props25$width === void 0 ? 0 : _this$props25$width,
+        style = _this$props25.style,
+        isTree = _this$props25.isTree,
+        hover = _this$props25.hover,
+        bordered = _this$props25.bordered,
+        cellBordered = _this$props25.cellBordered,
+        wordWrap = _this$props25.wordWrap,
+        classPrefix = _this$props25.classPrefix,
+        loading = _this$props25.loading,
+        showHeader = _this$props25.showHeader,
+        rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props25, ["children", "className", "width", "style", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "classPrefix", "loading", "showHeader"]);
     var isColumnResizing = this.state.isColumnResizing;
@@ -1456,0 +1465,0 @@

package.json

 {
   "name": "rsuite-table",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

384584

increased by0.34%

Lines of code

8265

increased by0.23%

No dependency changes