rsuite-table - npm Package Compare versions

Comparing version 3.1.5 to 3.1.6

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 3.1.6
+
+- Bugfix: The scroll bar is not reset after the column has changed
+
 # 3.1.5
@@ -2,0 +6,0 @@

lib/Table.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _flatten2 = require('lodash/flatten');
+
+var _flatten3 = _interopRequireDefault(_flatten2);
+
 var _merge2 = require('lodash/merge');
@@ -174,5 +178,5 @@
     key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps) {
       this.calculateTableContextHeight();
-      this.calculateTableContentWidth();
+      this.calculateTableContentWidth(prevProps);
       this.calculateRowMaxHeight();
@@ -407,3 +411,3 @@ this.updatePosition();
     key: 'calculateTableContentWidth',
-    value: function calculateTableContentWidth() {
+    value: function calculateTableContentWidth(prevProps) {
       var table = this.table;
@@ -416,2 +420,13 @@ var row = table.querySelector('.' + this.addPrefix('row'));
       this.minScrollX = -(contentWidth - this.state.width) - 10;
+
+      /**
+       * 1.判断 Table 内容区域是否宽度有变化
+       * 2.判断 Table 列数是否发生变化
+       *
+       * 满足 1 和 2 则更新横向滚动条位置
+       */
+      if (this.state.contentWidth !== contentWidth && (0, _flatten3.default)(this.props.children).length !== (0, _flatten3.default)(prevProps.children).length) {
+        this.scrollX = 0;
+        this.scrollbarX && this.scrollbarX.resetScrollBarPosition();
+      }
     }
@@ -418,0 +433,0 @@ }, {

package.json

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

src/Table.js

@@ -183,5 +183,5 @@ // @flow
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: Props) {
     this.calculateTableContextHeight();
-    this.calculateTableContentWidth();
+    this.calculateTableContentWidth(prevProps);
     this.calculateRowMaxHeight();
@@ -536,3 +536,3 @@ this.updatePosition();
 
-  calculateTableContentWidth() {
+  calculateTableContentWidth(prevProps: Props) {
     const table = this.table;
@@ -545,2 +545,16 @@ const row = table.querySelector(`.${this.addPrefix('row')}`);
     this.minScrollX = -(contentWidth - this.state.width) - 10;
+
+    /**
+     * 1.判断 Table 内容区域是否宽度有变化
+     * 2.判断 Table 列数是否发生变化
+     *
+     * 满足 1 和 2 则更新横向滚动条位置
+     */
+    if (
+      this.state.contentWidth !== contentWidth &&
+      _.flatten(this.props.children).length !== _.flatten(prevProps.children).length
+    ) {
+      this.scrollX = 0;
+      this.scrollbarX && this.scrollbarX.resetScrollBarPosition();
+    }
   }
@@ -547,0 +561,0 @@

No alert changes

Improved metrics

Total package byte prevSize

172946

increased by0.66%

Lines of code

3808

increased by0.66%

No dependency changes