Merge branch 'master' into ts-type-declarations

Author: nihgwu

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## NEXT VERSION
 
+- feat: add `ignoreFunctionInColumnCompare` to solve closure problem in renderers
+- chore: skip unnecessary cloneElement in `renderElement`
+
+## v1.10.9 (2020-08-13)
+
+- fix: input loses focus on unmount
+
+## v1.10.8 (2020-08-11)
+
+- fix: scroll position would be reset to top if column becomes frozen
+
+## v1.10.7 (2020-07-28)
+
+- fix: `getTotalRowsHeight` could be different before/after render in dynamic mode on initial render
+
+## v1.10.6 (2020-07-25)
+
+- fix: `getTotalRowsHeight` could be different before/after render in dynamic mode
+
+## v1.10.5 (2020-07-10)
+
 - chore: do not clear row height cache automatically
 
 ## v1.10.4 (2020-07-02)

README.md

@@ -34,16 +34,32 @@ import 'react-base-table/styles.css'
 
 Learn more at the [website](https://autodesk.github.io/react-base-table/)
 
-**Make sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`**
+### unique key
 
-**`key` is required for column definition or the column will be ignored**
+`key` is required for column definition or the column will be ignored
 
-**`width` and `height`(or `maxHeight`) are required to display the table properly**
+Make sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`
+
+### size
+
+`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example
+
+`width` and `height`(or `maxHeight`) are required to display the table properly
 
 In the [examples](https://autodesk.github.io/react-base-table/examples)
 we are using a wrapper `const Table = props => <BaseTable width={700} height={400} {...props} />` to do that
 
-If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize example](https://autodesk.github.io/react-base-table/examples/auto-resize)
+If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example
+
+### closure problem in custom renderers
+
+In practice we tend to write inline functions for custom renderers, which would make `shouldUpdateComponent` always true as the inline function will create a new instance on every re-render, to avoid "unnecessary" re-renders, **`BaseTable` ignores functions when comparing column definition by default**, it works well in most cases before, but if we use external data instead of reference state in custom renderers, we always get the staled initial value although the data has changed
+
+It's recommended to inject the external data in column definition to solve the problem, like `<Column foo={foo} bar={bar} cellRenderer={({ column: { foo, bar }}) => { ... } } />`, the column definition will update on external data change, with this pattern we can easily move the custom renderers out of column definition for sharing, the downside is it would bloat the column definition and bug prone
+
+Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0`
+
+Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate 
 
 ## Browser Support
 
@@ -117,7 +133,11 @@ We are using a advanced table component based on `BaseTable` internally, with mu
 
 ![AdvanceTable](screenshots/advance-table.png)
 
-[In real products](https://blogs.autodesk.com/bim360-release-notes/2019/11/18/bim-360-cost-management-update-november-2019/) 
+[In real products](https://blogs.autodesk.com/bim360-release-notes/2019/11/18/bim-360-cost-management-update-november-2019/)
+
+## Development
+
+We use `Yarn` as the package manager, checkout this repo and run `yarn` under both root folder and `website` folder in install packages, then run `yarn start` to start the demo site powered by `Gatsby`
 
 ## Contributing
 

docs/get-started.md

@@ -27,14 +27,32 @@ import 'react-base-table/styles.css'
 ...
 ```
 
-**Make sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`**
+### unique key
 
-**`width` and `height` are required to display the table properly**
+`key` is required for column definition or the column will be ignored
+
+Make sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`
+
+### size
+
+`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example
+
+`width` and `height`(or `maxHeight`) are required to display the table properly
 
 In the [examples](https://autodesk.github.io/react-base-table/examples)
 we are using a wrapper `const Table = props => <BaseTable width={700} height={400} {...props} />` to do that
 
-If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize example](https://autodesk.github.io/react-base-table/examples/auto-resize)
+If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example
+
+### closure problem in custom renderers
+
+In practice we tend to write inline functions for custom renderers, which would make `shouldUpdateComponent` always true as the inline function will create a new instance on every re-render, to avoid "unnecessary" re-renders, **`BaseTable` ignores functions when comparing column definition by default**, it works well in most cases before, but if we use external data instead of reference state in custom renderers, we always get the staled initial value although the data has changed
+
+It's recommended to inject the external data in column definition to solve the problem, like `<Column foo={foo} bar={bar} cellRenderer={({ column: { foo, bar }}) => { ... } } />`, the column definition will update on external data change, with this pattern we can easily move the custom renderers out of column definition for sharing, the downside is it would bloat the column definition and bug prone
+
+Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0`
+
+Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate
 
 ## Browser Support
 
@@ -45,8 +63,8 @@ If you want it responsive, you can use the [`AutoResizer`](https://autodesk.gith
 ## Playground
 
 ```jsx live
-const columns = generateColumns(10)
-const data = generateData(columns, 200)
+const columns = generateColumns(10);
+const data = generateData(columns, 200);
 
-export default () => <Table columns={columns} data={data} />
+export default () => <Table columns={columns} data={data} />;
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-base-table",
-  "version": "1.10.4",
+  "version": "1.10.9",
   "description": "a react table component to display large data set with high performance and flexibility",
   "main": "lib/index.js",
   "module": "es/index.js",

src/BaseTable.js

@@ -97,18 +97,21 @@ class BaseTable extends React.PureComponent {
       this._depthMap = {};
       return flattenOnKeys(tree, keys, this._depthMap, dataKey);
     });
-    this._resetColumnManager = memoize((columns, fixed) => {
-      this.columnManager.reset(columns, fixed);
+    this._resetColumnManager = memoize(
+      (columns, fixed) => {
+        this.columnManager.reset(columns, fixed);
 
-      if (this.props.estimatedRowHeight && fixed) {
-        if (!this.columnManager.hasLeftFrozenColumns()) {
-          this._leftRowHeightMap = {};
-        }
-        if (!this.columnManager.hasRightFrozenColumns()) {
-          this._rightRowHeightMap = {};
+        if (this.props.estimatedRowHeight && fixed) {
+          if (!this.columnManager.hasLeftFrozenColumns()) {
+            this._leftRowHeightMap = {};
+          }
+          if (!this.columnManager.hasRightFrozenColumns()) {
+            this._rightRowHeightMap = {};
+          }
         }
-      }
-    }, isObjectEqual);
+      },
+      (newArgs, lastArgs) => isObjectEqual(newArgs, lastArgs, this.props.ignoreFunctionInColumnCompare)
+    );
 
     this._isResetting = false;
     this._resetIndex = null;
@@ -125,6 +128,7 @@ class BaseTable extends React.PureComponent {
       this._rowHeightMapBuffer = {};
       this._resetIndex = null;
       this.forceUpdateTable();
+      this.forceUpdate();
       this._isResetting = false;
     }, 0);
 
@@ -564,6 +568,7 @@ class BaseTable extends React.PureComponent {
         ref={this._setLeftTableRef}
         data={this._data}
         columns={this.columnManager.getLeftFrozenColumns()}
+        initialScrollTop={this._scroll.scrollTop}
         width={columnsWidth + offset}
         height={containerHeight}
         headerHeight={headerHeight}
@@ -597,6 +602,7 @@ class BaseTable extends React.PureComponent {
         ref={this._setRightTableRef}
         data={this._data}
         columns={this.columnManager.getRightFrozenColumns()}
+        initialScrollTop={this._scroll.scrollTop}
         width={columnsWidth + scrollbarWidth}
         height={containerHeight}
         headerHeight={headerHeight}
@@ -695,6 +701,7 @@ class BaseTable extends React.PureComponent {
     }
     // should be after `this._data` assigned
     this._calcScrollbarSizes();
+    this._totalRowsHeight = this.getTotalRowsHeight();
 
     const containerStyle = {
       ...style,
@@ -732,7 +739,7 @@ class BaseTable extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { data, height, maxHeight } = this.props;
+    const { data, height, maxHeight, estimatedRowHeight } = this.props;
     if (data !== prevProps.data) {
       this._lastScannedRowIndex = -1;
       this._hasDataChangedSinceEndReached = true;
@@ -742,6 +749,12 @@ class BaseTable extends React.PureComponent {
       this._maybeCallOnEndReached();
     }
     this._maybeScrollbarPresenceChange();
+
+    if (estimatedRowHeight) {
+      if (this.getTotalRowsHeight() !== this._totalRowsHeight) {
+        this.forceUpdate();
+      }
+    }
   }
 
   _prefixClass(className) {
@@ -1026,6 +1039,7 @@ BaseTable.defaultProps = {
   overscanRowCount: 1,
   onEndReachedThreshold: 500,
   getScrollbarSize: defaultGetScrollbarSize,
+  ignoreFunctionInColumnCompare: true,
 
   onScroll: noop,
   onRowsRendered: noop,
@@ -1276,6 +1290,10 @@ BaseTable.propTypes = {
    * Each of the handlers is of the shape of `({ rowData, rowIndex, rowKey, event }) => object`
    */
   rowEventHandlers: PropTypes.object,
+  /**
+   * whether to ignore function properties while comparing column definition
+   */
+  ignoreFunctionInColumnCompare: PropTypes.bool,
   /**
    * A object for the custom components, like `ExpandIcon` and `SortIndicator`
    */

src/ColumnResizer.js

@@ -13,20 +13,26 @@ export function addUserSelectStyles(doc) {
     styleEl = doc.createElement('style');
     styleEl.type = 'text/css';
     styleEl.id = 'react-draggable-style-el';
-    styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {background: transparent;}\n';
-    styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {background: transparent;}\n';
+    styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n';
+    styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {all: inherit;}\n';
     doc.getElementsByTagName('head')[0].appendChild(styleEl);
   }
   if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');
 }
 
 export function removeUserSelectStyles(doc) {
+  if (!doc) return;
   try {
-    if (doc && doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');
+    if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');
     if (doc.selection) {
       doc.selection.empty();
     } else {
-      window.getSelection().removeAllRanges(); // remove selection caused by scroll
+      // Remove selection caused by scroll, unless it's a focused input
+      // (we use doc.defaultView in case we're in an iframe)
+      const selection = (doc.defaultView || window).getSelection();
+      if (selection && selection.type !== 'Caret') {
+        selection.removeAllRanges();
+      }
     }
   } catch (e) {
     // probably IE

src/utils.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 export function renderElement(renderer, props) {
   if (React.isValidElement(renderer)) {
+    if (!props) return renderer;
     return React.cloneElement(renderer, props);
   } else if (typeof renderer === 'function') {
     if (renderer.prototype && renderer.prototype.isReactComponent) {
@@ -26,7 +27,7 @@ export function normalizeColumns(elements) {
   return columns;
 }
 
-export function isObjectEqual(objA, objB) {
+export function isObjectEqual(objA, objB, ignoreFunction = true) {
   if (objA === objB) return true;
   if (objA === null && objB === null) return true;
   if (objA === null || objB === null) return false;
@@ -38,13 +39,22 @@ export function isObjectEqual(objA, objB) {
 
   for (let i = 0; i < keysA.length; i++) {
     const key = keysA[i];
+
+    if (key === '_owner' && objA.$$typeof) {
+      // React-specific: avoid traversing React elements' _owner.
+      //  _owner contains circular references
+      // and is not needed when comparing the actual elements (and not their owners)
+      continue;
+    }
+
     const valueA = objA[key];
     const valueB = objB[key];
+    const valueAType = typeof valueA;
 
-    if (typeof valueA !== typeof valueB) return false;
-    if (typeof valueA === 'function') continue;
-    if (typeof valueA === 'object') {
-      if (!isObjectEqual(valueA, valueB)) return false;
+    if (valueAType !== typeof valueB) return false;
+    if (valueAType === 'function' && ignoreFunction) continue;
+    if (valueAType === 'object') {
+      if (!isObjectEqual(valueA, valueB, ignoreFunction)) return false;
       else continue;
     }
     if (valueA !== valueB) return false;

website/siteConfig.js

@@ -52,6 +52,10 @@ module.exports = {
       title: 'JSX Column',
       path: '/examples/jsx-column',
     },
+    {
+      title: 'Flex Column(column width in ratio)',
+      path: '/examples/flex-column',
+    },
     {
       title: 'Custom Cell',
       path: '/examples/custom-cell',

website/src/examples/custom-cell.js

@@ -175,7 +175,6 @@ export default class App extends React.Component {
     return (
       <Table
         fixed
-        selectable
         columns={this.columns}
         data={data}
         sortBy={sortBy}

website/src/examples/dynamic-row-heights.js

@@ -193,7 +193,6 @@ export default class App extends React.Component {
         </button>
         <Table
           fixed
-          selectable
           columns={
             !!this.state.toggle ? this.columns.slice(0, 4) : this.columns
           }