react-base-table - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+# v1.2.1 (2019-05-01)
+
+- fix: scrollbar size don't updated in SSR
+
 # v1.2.0 (2019-04-29)
@@ -7,0 +11,0 @@

es/BaseTable.js

@@ -64,2 +64,3 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
     _this.state = {
+      scrollbarSize: 0,
       hoveredRowKey: null,
@@ -103,3 +104,2 @@ resizingKey: null,
     _this._scrollbarPresenceChanged = false;
-    _this._scrollbarSizeMeasured = getScrollbarSize() !== undefined;
     return _this;
@@ -741,9 +741,9 @@ }
   _proto.componentDidMount = function componentDidMount() {
-    // in SSR getScrollbarSize() === undefined, so we have to measure again here
-    if (!this._scrollbarSizeMeasured) {
-      getScrollbarSize();
-      this.setState({});
+    var scrollbarSize = getScrollbarSize();
+
+    if (scrollbarSize > 0) {
+      this.setState({
+        scrollbarSize: scrollbarSize
+      });
     }
-
-    this._maybeScrollbarPresenceChange();
   };
@@ -835,22 +835,28 @@
         width = _this$props14.width;
+    var scrollbarSize = this.state.scrollbarSize;
     var totalRowsHeight = this.getTotalRowsHeight();
     var totalColumnsWidth = this.getTotalColumnsWidth();
-    var scrollbarSize = getScrollbarSize() || 0;
     var prevHorizontalScrollbarSize = this._horizontalScrollbarSize;
-    var prevVerticalScrollbarSize = this._verticalScrollbarSize; // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+    var prevVerticalScrollbarSize = this._verticalScrollbarSize;
 
-    if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+    if (scrollbarSize === 0) {
       this._horizontalScrollbarSize = 0;
-      this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
+      this._verticalScrollbarSize = 0;
     } else {
-      if (totalColumnsWidth > width) {
-        this._horizontalScrollbarSize = scrollbarSize;
-        this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() - this._horizontalScrollbarSize ? scrollbarSize : 0;
+      // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+      if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+        this._horizontalScrollbarSize = 0;
+        this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
       } else {
-        this._horizontalScrollbarSize = 0;
-        this._verticalScrollbarSize = 0;
+        if (totalColumnsWidth > width) {
+          this._horizontalScrollbarSize = scrollbarSize;
+          this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() - this._horizontalScrollbarSize ? scrollbarSize : 0;
+        } else {
+          this._horizontalScrollbarSize = 0;
+          this._verticalScrollbarSize = 0;
 
-        if (totalRowsHeight > this._getBodyHeight()) {
-          this._horizontalScrollbarSize = scrollbarSize;
-          this._verticalScrollbarSize = scrollbarSize;
+          if (totalRowsHeight > this._getBodyHeight()) {
+            this._horizontalScrollbarSize = scrollbarSize;
+            this._verticalScrollbarSize = scrollbarSize;
+          }
         }
@@ -870,3 +876,3 @@ }
       onScrollbarPresenceChange({
-        size: getScrollbarSize(),
+        size: this.state.scrollbarSize,
         horizontal: this._horizontalScrollbarSize > 0,
@@ -873,0 +879,0 @@ vertical: this._verticalScrollbarSize > 0

lib/BaseTable.js

@@ -109,2 +109,3 @@ "use strict";
     _this.state = {
+      scrollbarSize: 0,
       hoveredRowKey: null,
@@ -148,3 +149,2 @@ resizingKey: null,
     _this._scrollbarPresenceChanged = false;
-    _this._scrollbarSizeMeasured = (0, _utils.getScrollbarSize)() !== undefined;
     return _this;
@@ -803,9 +803,9 @@ }
     value: function componentDidMount() {
-      // in SSR getScrollbarSize() === undefined, so we have to measure again here
-      if (!this._scrollbarSizeMeasured) {
-        (0, _utils.getScrollbarSize)();
-        this.setState({});
+      var scrollbarSize = (0, _utils.getScrollbarSize)();
+
+      if (scrollbarSize > 0) {
+        this.setState({
+          scrollbarSize: scrollbarSize
+        });
       }
-
-      this._maybeScrollbarPresenceChange();
     }
@@ -909,22 +909,28 @@ }, {
           width = _this$props14.width;
+      var scrollbarSize = this.state.scrollbarSize;
       var totalRowsHeight = this.getTotalRowsHeight();
       var totalColumnsWidth = this.getTotalColumnsWidth();
-      var scrollbarSize = (0, _utils.getScrollbarSize)() || 0;
       var prevHorizontalScrollbarSize = this._horizontalScrollbarSize;
-      var prevVerticalScrollbarSize = this._verticalScrollbarSize; // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+      var prevVerticalScrollbarSize = this._verticalScrollbarSize;
 
-      if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+      if (scrollbarSize === 0) {
         this._horizontalScrollbarSize = 0;
-        this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
+        this._verticalScrollbarSize = 0;
       } else {
-        if (totalColumnsWidth > width) {
-          this._horizontalScrollbarSize = scrollbarSize;
-          this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() - this._horizontalScrollbarSize ? scrollbarSize : 0;
+        // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+        if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+          this._horizontalScrollbarSize = 0;
+          this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
         } else {
-          this._horizontalScrollbarSize = 0;
-          this._verticalScrollbarSize = 0;
+          if (totalColumnsWidth > width) {
+            this._horizontalScrollbarSize = scrollbarSize;
+            this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() - this._horizontalScrollbarSize ? scrollbarSize : 0;
+          } else {
+            this._horizontalScrollbarSize = 0;
+            this._verticalScrollbarSize = 0;
 
-          if (totalRowsHeight > this._getBodyHeight()) {
-            this._horizontalScrollbarSize = scrollbarSize;
-            this._verticalScrollbarSize = scrollbarSize;
+            if (totalRowsHeight > this._getBodyHeight()) {
+              this._horizontalScrollbarSize = scrollbarSize;
+              this._verticalScrollbarSize = scrollbarSize;
+            }
           }
@@ -945,3 +951,3 @@ }
         onScrollbarPresenceChange({
-          size: (0, _utils.getScrollbarSize)(),
+          size: this.state.scrollbarSize,
           horizontal: this._horizontalScrollbarSize > 0,
@@ -948,0 +954,0 @@ vertical: this._verticalScrollbarSize > 0

package.json

 {
   "name": "react-base-table",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "a react table component to display large data set with high performance and flexibility",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

799073

increased by0.05%

Lines of code

5858

increased by0.21%

No dependency changes