react-base-table - npm Package Compare versions

Comparing version 1.7.3 to 1.8.0-rc.0

CHANGELOG.md

@@ -5,2 +5,4 @@ # CHANGELOG
 
+- chore: remove the use of `componentWillReceiveProps`
+
 ## v1.7.3 (2019-08-27)
@@ -7,0 +9,0 @@

es/BaseTable.js

@@ -27,2 +27,5 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import { renderElement, normalizeColumns, getScrollbarSize as defaultGetScrollbarSize, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray, getValue, throttle, noop } from './utils';
+var getColumns = memoize(function (columns, children) {
+  return columns || normalizeColumns(children);
+});
 
@@ -44,3 +47,5 @@ var getContainerStyle = function getContainerStyle(width, maxWidth, height) {
 };
-var RESIZE_THROTTLE_WAIT = 50;
+var RESIZE_THROTTLE_WAIT = 50; // used for memoization
+
+var EMPTY_ARRAY = [];
 /**
@@ -61,3 +66,2 @@ * React table component
         children = props.children,
-        expandedRowKeys = props.expandedRowKeys,
         defaultExpandedRowKeys = props.defaultExpandedRowKeys;
@@ -69,5 +73,5 @@ _this.state = {
       resizingWidth: 0,
-      expandedRowKeys: cloneArray(props.expandedRowKeys !== undefined ? expandedRowKeys : defaultExpandedRowKeys)
+      expandedRowKeys: cloneArray(defaultExpandedRowKeys)
     };
-    _this.columnManager = new ColumnManager(columns || normalizeColumns(children), props.fixed);
+    _this.columnManager = new ColumnManager(getColumns(columns, children), props.fixed);
     _this._setContainerRef = _this._setContainerRef.bind(_assertThisInitialized(_this));
@@ -97,2 +101,5 @@ _this._setMainTableRef = _this._setMainTableRef.bind(_assertThisInitialized(_this));
     });
+    _this._resetColumnManager = memoize(function (columns, fixed) {
+      _this.columnManager.reset(columns, fixed);
+    }, isObjectEqual);
     _this._scroll = {
@@ -131,2 +138,11 @@ scrollLeft: 0,
   /**
+   * Get internal `expandedRowKeys` state
+   */
+  ;
+
+  _proto.getExpandedRowKeys = function getExpandedRowKeys() {
+    var expandedRowKeys = this.props.expandedRowKeys;
+    return expandedRowKeys !== undefined ? expandedRowKeys || EMPTY_ARRAY : this.state.expandedRowKeys;
+  }
+  /**
    * Get the expanded state, fallback to normal state if not expandable.
@@ -139,3 +155,3 @@ */
       expandedData: this._data,
-      expandedRowKeys: this.state.expandedRowKeys,
+      expandedRowKeys: this.getExpandedRowKeys(),
       expandedDepthMap: this._depthMap
@@ -267,3 +283,3 @@ };
     var expandable = rowIndex >= 0 && hasChildren(rowData);
-    var expanded = rowIndex >= 0 && this.state.expandedRowKeys.indexOf(rowData[rowKey]) >= 0;
+    var expanded = rowIndex >= 0 && this.getExpandedRowKeys().indexOf(rowData[rowKey]) >= 0;
     var extraProps = callOrReturn(expandIconProps, {
@@ -313,3 +329,3 @@ rowData: rowData,
     var depth = this._depthMap[rowKey] || 0;
-    var className = cn(this._prefixClass('row'), rowClass, (_cn = {}, _cn[this._prefixClass("row--depth-" + depth)] = !!expandColumnKey && rowIndex >= 0, _cn[this._prefixClass('row--expanded')] = !!expandColumnKey && this.state.expandedRowKeys.indexOf(rowKey) >= 0, _cn[this._prefixClass('row--hovered')] = !isScrolling && rowKey === this.state.hoveredRowKey, _cn[this._prefixClass('row--frozen')] = depth === 0 && rowIndex < 0, _cn[this._prefixClass('row--customized')] = rowRenderer, _cn));
+    var className = cn(this._prefixClass('row'), rowClass, (_cn = {}, _cn[this._prefixClass("row--depth-" + depth)] = !!expandColumnKey && rowIndex >= 0, _cn[this._prefixClass('row--expanded')] = !!expandColumnKey && this.getExpandedRowKeys().indexOf(rowKey) >= 0, _cn[this._prefixClass('row--hovered')] = !isScrolling && rowKey === this.state.hoveredRowKey, _cn[this._prefixClass('row--frozen')] = depth === 0 && rowIndex < 0, _cn[this._prefixClass('row--customized')] = rowRenderer, _cn));
 
@@ -720,3 +736,4 @@ var rowProps = _objectSpread({}, extraProps, {
     var _this$props11 = this.props,
-        classPrefix = _this$props11.classPrefix,
+        columns = _this$props11.columns,
+        children = _this$props11.children,
         width = _this$props11.width,
@@ -730,6 +747,9 @@ fixed = _this$props11.fixed,
         style = _this$props11.style,
-        footerHeight = _this$props11.footerHeight;
+        footerHeight = _this$props11.footerHeight,
+        classPrefix = _this$props11.classPrefix;
 
+    this._resetColumnManager(getColumns(columns, children), fixed);
+
     if (expandColumnKey) {
-      this._data = this._flattenOnKeys(data, this.state.expandedRowKeys, this.props.rowKey);
+      this._data = this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey);
     } else {
@@ -756,27 +776,2 @@ this._data = data;
 
-  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    var nextColumns = nextProps.columns || normalizeColumns(nextProps.children);
-    var columns = this.columnManager.getOriginalColumns();
-
-    if (!isObjectEqual(nextColumns, columns) || nextProps.fixed !== this.props.fixed) {
-      this.columnManager.reset(nextColumns, nextProps.fixed);
-    }
-
-    if (nextProps.data !== this.props.data) {
-      this._lastScannedRowIndex = -1;
-      this._hasDataChangedSinceEndReached = true;
-    }
-
-    if (nextProps.maxHeight !== this.props.maxHeight || nextProps.height !== this.props.height) {
-      this._maybeCallOnEndReached();
-    } // if `expandedRowKeys` is controlled
-
-
-    if (nextProps.expandColumnKey && nextProps.expandedRowKeys !== undefined && nextProps.expandedRowKeys !== this.props.expandedRowKeys) {
-      this.setState({
-        expandedRowKeys: cloneArray(nextProps.expandedRowKeys)
-      });
-    }
-  };
-
   _proto.componentDidMount = function componentDidMount() {
@@ -793,2 +788,16 @@ var scrollbarSize = this.props.getScrollbarSize();
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var _this$props12 = this.props,
+        data = _this$props12.data,
+        height = _this$props12.height,
+        maxHeight = _this$props12.maxHeight;
+
+    if (data !== prevProps.data) {
+      this._lastScannedRowIndex = -1;
+      this._hasDataChangedSinceEndReached = true;
+    }
+
+    if (maxHeight !== prevProps.maxHeight || height !== prevProps.height) {
+      this._maybeCallOnEndReached();
+    }
+
     this._maybeScrollbarPresenceChange();
@@ -835,5 +844,5 @@ };
   _proto._getFrozenRowsHeight = function _getFrozenRowsHeight() {
-    var _this$props12 = this.props,
-        frozenData = _this$props12.frozenData,
-        rowHeight = _this$props12.rowHeight;
+    var _this$props13 = this.props,
+        frozenData = _this$props13.frozenData,
+        rowHeight = _this$props13.rowHeight;
     return frozenData.length * rowHeight;
@@ -843,6 +852,6 @@ };
   _proto._getTableHeight = function _getTableHeight() {
-    var _this$props13 = this.props,
-        height = _this$props13.height,
-        maxHeight = _this$props13.maxHeight,
-        footerHeight = _this$props13.footerHeight;
+    var _this$props14 = this.props,
+        height = _this$props14.height,
+        maxHeight = _this$props14.maxHeight,
+        footerHeight = _this$props14.footerHeight;
     var tableHeight = height - footerHeight;
@@ -880,5 +889,5 @@
   _proto._calcScrollbarSizes = function _calcScrollbarSizes() {
-    var _this$props14 = this.props,
-        fixed = _this$props14.fixed,
-        width = _this$props14.width;
+    var _this$props15 = this.props,
+        fixed = _this$props15.fixed,
+        width = _this$props15.width;
     var scrollbarSize = this.state.scrollbarSize;
@@ -932,5 +941,5 @@ var totalRowsHeight = this.getTotalRowsHeight();
   _proto._maybeCallOnEndReached = function _maybeCallOnEndReached() {
-    var _this$props15 = this.props,
-        onEndReached = _this$props15.onEndReached,
-        onEndReachedThreshold = _this$props15.onEndReachedThreshold;
+    var _this$props16 = this.props,
+        onEndReached = _this$props16.onEndReached,
+        onEndReachedThreshold = _this$props16.onEndReachedThreshold;
     var scrollTop = this._scroll.scrollTop;
@@ -990,3 +999,3 @@ var scrollHeight = this.getTotalRowsHeight();
         rowKey = _ref10.rowKey;
-    var expandedRowKeys = cloneArray(this.state.expandedRowKeys);
+    var expandedRowKeys = cloneArray(this.getExpandedRowKeys());
 
@@ -1047,6 +1056,6 @@ if (expanded) {
     var key = event.currentTarget.dataset.key;
-    var _this$props16 = this.props,
-        sortBy = _this$props16.sortBy,
-        sortState = _this$props16.sortState,
-        onColumnSort = _this$props16.onColumnSort;
+    var _this$props17 = this.props,
+        sortBy = _this$props17.sortBy,
+        sortState = _this$props17.sortState,
+        onColumnSort = _this$props17.onColumnSort;
     var order = SortOrder.ASC;
@@ -1053,0 +1062,0 @@

lib/BaseTable.js

@@ -66,2 +66,6 @@ "use strict";
 
+var getColumns = (0, _memoizeOne["default"])(function (columns, children) {
+  return columns || (0, _utils.normalizeColumns)(children);
+});
+
 var getContainerStyle = function getContainerStyle(width, maxWidth, height) {
@@ -82,3 +86,5 @@ return {
 };
-var RESIZE_THROTTLE_WAIT = 50;
+var RESIZE_THROTTLE_WAIT = 50; // used for memoization
+
+var EMPTY_ARRAY = [];
 /**
@@ -100,3 +106,2 @@ * React table component
         children = props.children,
-        expandedRowKeys = props.expandedRowKeys,
         defaultExpandedRowKeys = props.defaultExpandedRowKeys;
@@ -108,5 +113,5 @@ _this.state = {
       resizingWidth: 0,
-      expandedRowKeys: (0, _utils.cloneArray)(props.expandedRowKeys !== undefined ? expandedRowKeys : defaultExpandedRowKeys)
+      expandedRowKeys: (0, _utils.cloneArray)(defaultExpandedRowKeys)
     };
-    _this.columnManager = new _ColumnManager["default"](columns || (0, _utils.normalizeColumns)(children), props.fixed);
+    _this.columnManager = new _ColumnManager["default"](getColumns(columns, children), props.fixed);
     _this._setContainerRef = _this._setContainerRef.bind((0, _assertThisInitialized2["default"])(_this));
@@ -136,2 +141,5 @@ _this._setMainTableRef = _this._setMainTableRef.bind((0, _assertThisInitialized2["default"])(_this));
     });
+    _this._resetColumnManager = (0, _memoizeOne["default"])(function (columns, fixed) {
+      _this.columnManager.reset(columns, fixed);
+    }, _utils.isObjectEqual);
     _this._scroll = {
@@ -171,2 +179,12 @@ scrollLeft: 0,
     /**
+     * Get internal `expandedRowKeys` state
+     */
+
+  }, {
+    key: "getExpandedRowKeys",
+    value: function getExpandedRowKeys() {
+      var expandedRowKeys = this.props.expandedRowKeys;
+      return expandedRowKeys !== undefined ? expandedRowKeys || EMPTY_ARRAY : this.state.expandedRowKeys;
+    }
+    /**
      * Get the expanded state, fallback to normal state if not expandable.
@@ -180,3 +198,3 @@ */
         expandedData: this._data,
-        expandedRowKeys: this.state.expandedRowKeys,
+        expandedRowKeys: this.getExpandedRowKeys(),
         expandedDepthMap: this._depthMap
@@ -311,3 +329,3 @@ };
       var expandable = rowIndex >= 0 && (0, _utils.hasChildren)(rowData);
-      var expanded = rowIndex >= 0 && this.state.expandedRowKeys.indexOf(rowData[rowKey]) >= 0;
+      var expanded = rowIndex >= 0 && this.getExpandedRowKeys().indexOf(rowData[rowKey]) >= 0;
       var extraProps = (0, _utils.callOrReturn)(expandIconProps, {
@@ -358,3 +376,3 @@ rowData: rowData,
       var depth = this._depthMap[rowKey] || 0;
-      var className = (0, _classnames["default"])(this._prefixClass('row'), rowClass, (_cn = {}, (0, _defineProperty2["default"])(_cn, this._prefixClass("row--depth-".concat(depth)), !!expandColumnKey && rowIndex >= 0), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--expanded'), !!expandColumnKey && this.state.expandedRowKeys.indexOf(rowKey) >= 0), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--hovered'), !isScrolling && rowKey === this.state.hoveredRowKey), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--frozen'), depth === 0 && rowIndex < 0), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--customized'), rowRenderer), _cn));
+      var className = (0, _classnames["default"])(this._prefixClass('row'), rowClass, (_cn = {}, (0, _defineProperty2["default"])(_cn, this._prefixClass("row--depth-".concat(depth)), !!expandColumnKey && rowIndex >= 0), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--expanded'), !!expandColumnKey && this.getExpandedRowKeys().indexOf(rowKey) >= 0), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--hovered'), !isScrolling && rowKey === this.state.hoveredRowKey), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--frozen'), depth === 0 && rowIndex < 0), (0, _defineProperty2["default"])(_cn, this._prefixClass('row--customized'), rowRenderer), _cn));
 
@@ -774,3 +792,4 @@ var rowProps = _objectSpread({}, extraProps, {
       var _this$props11 = this.props,
-          classPrefix = _this$props11.classPrefix,
+          columns = _this$props11.columns,
+          children = _this$props11.children,
           width = _this$props11.width,
@@ -784,6 +803,9 @@ fixed = _this$props11.fixed,
           style = _this$props11.style,
-          footerHeight = _this$props11.footerHeight;
+          footerHeight = _this$props11.footerHeight,
+          classPrefix = _this$props11.classPrefix;
 
+      this._resetColumnManager(getColumns(columns, children), fixed);
+
       if (expandColumnKey) {
-        this._data = this._flattenOnKeys(data, this.state.expandedRowKeys, this.props.rowKey);
+        this._data = this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey);
       } else {
@@ -810,28 +832,2 @@ this._data = data;
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var nextColumns = nextProps.columns || (0, _utils.normalizeColumns)(nextProps.children);
-      var columns = this.columnManager.getOriginalColumns();
-
-      if (!(0, _utils.isObjectEqual)(nextColumns, columns) || nextProps.fixed !== this.props.fixed) {
-        this.columnManager.reset(nextColumns, nextProps.fixed);
-      }
-
-      if (nextProps.data !== this.props.data) {
-        this._lastScannedRowIndex = -1;
-        this._hasDataChangedSinceEndReached = true;
-      }
-
-      if (nextProps.maxHeight !== this.props.maxHeight || nextProps.height !== this.props.height) {
-        this._maybeCallOnEndReached();
-      } // if `expandedRowKeys` is controlled
-
-
-      if (nextProps.expandColumnKey && nextProps.expandedRowKeys !== undefined && nextProps.expandedRowKeys !== this.props.expandedRowKeys) {
-        this.setState({
-          expandedRowKeys: (0, _utils.cloneArray)(nextProps.expandedRowKeys)
-        });
-      }
-    }
-  }, {
     key: "componentDidMount",
@@ -850,2 +846,16 @@ value: function componentDidMount() {
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this$props12 = this.props,
+          data = _this$props12.data,
+          height = _this$props12.height,
+          maxHeight = _this$props12.maxHeight;
+
+      if (data !== prevProps.data) {
+        this._lastScannedRowIndex = -1;
+        this._hasDataChangedSinceEndReached = true;
+      }
+
+      if (maxHeight !== prevProps.maxHeight || height !== prevProps.height) {
+        this._maybeCallOnEndReached();
+      }
+
       this._maybeScrollbarPresenceChange();
@@ -900,5 +910,5 @@ }
     value: function _getFrozenRowsHeight() {
-      var _this$props12 = this.props,
-          frozenData = _this$props12.frozenData,
-          rowHeight = _this$props12.rowHeight;
+      var _this$props13 = this.props,
+          frozenData = _this$props13.frozenData,
+          rowHeight = _this$props13.rowHeight;
       return frozenData.length * rowHeight;
@@ -909,6 +919,6 @@ }
     value: function _getTableHeight() {
-      var _this$props13 = this.props,
-          height = _this$props13.height,
-          maxHeight = _this$props13.maxHeight,
-          footerHeight = _this$props13.footerHeight;
+      var _this$props14 = this.props,
+          height = _this$props14.height,
+          maxHeight = _this$props14.maxHeight,
+          footerHeight = _this$props14.footerHeight;
       var tableHeight = height - footerHeight;
@@ -949,5 +959,5 @@
     value: function _calcScrollbarSizes() {
-      var _this$props14 = this.props,
-          fixed = _this$props14.fixed,
-          width = _this$props14.width;
+      var _this$props15 = this.props,
+          fixed = _this$props15.fixed,
+          width = _this$props15.width;
       var scrollbarSize = this.state.scrollbarSize;
@@ -1003,5 +1013,5 @@ var totalRowsHeight = this.getTotalRowsHeight();
     value: function _maybeCallOnEndReached() {
-      var _this$props15 = this.props,
-          onEndReached = _this$props15.onEndReached,
-          onEndReachedThreshold = _this$props15.onEndReachedThreshold;
+      var _this$props16 = this.props,
+          onEndReached = _this$props16.onEndReached,
+          onEndReachedThreshold = _this$props16.onEndReachedThreshold;
       var scrollTop = this._scroll.scrollTop;
@@ -1066,3 +1076,3 @@ var scrollHeight = this.getTotalRowsHeight();
           rowKey = _ref10.rowKey;
-      var expandedRowKeys = (0, _utils.cloneArray)(this.state.expandedRowKeys);
+      var expandedRowKeys = (0, _utils.cloneArray)(this.getExpandedRowKeys());
 
@@ -1127,6 +1137,6 @@ if (expanded) {
       var key = event.currentTarget.dataset.key;
-      var _this$props16 = this.props,
-          sortBy = _this$props16.sortBy,
-          sortState = _this$props16.sortState,
-          onColumnSort = _this$props16.onColumnSort;
+      var _this$props17 = this.props,
+          sortBy = _this$props17.sortBy,
+          sortState = _this$props17.sortState,
+          onColumnSort = _this$props17.onColumnSort;
       var order = _SortOrder["default"].ASC;
@@ -1133,0 +1143,0 @@

package.json

 {
   "name": "react-base-table",
-  "version": "1.7.3",
+  "version": "1.8.0-rc.0",
   "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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Lines of code

6299

increased by0.27%

Worsened metrics

Total package byte prevSize

836557

decreased by-0.01%

Number of low quality alerts

2

increased by100%

No dependency changes