Reduce dom elements - Approach #3

src/FixedDataCellGroupFunction.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import FixedDataTableTranslateDOMPosition from './FixedDataTableTranslateDOMPosition';
+import cx from './vendor_upstream/stubs/cx';
+
+function CellGroup(props) {
+  var style = {
+    height: props.cellGroupWrapperHeight || props.height,
+    position: 'absolute',
+    width: props.contentWidth,
+    zIndex: props.zIndex,
+  };
+
+  FixedDataTableTranslateDOMPosition(
+    style,
+    -1 * props.left,
+    0,
+    props._initialRender,
+    props.isRTL
+  );
+
+  if (props.isRTL) {
+    style.right = props.offsetLeft;
+  } else {
+    style.left = props.offsetLeft;
+  }
+  return (
+    <div
+      className={cx('fixedDataTableCellGroupLayout/cellGroup')}
+      style={style}
+    >
+      {props.sortedCells}
+    </div>
+  );
+}
+export default CellGroup;

src/FixedDataCellGroupLegacyFunction.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import FixedDataTableTranslateDOMPosition from './FixedDataTableTranslateDOMPosition';
+import cx from './vendor_upstream/stubs/cx';
+function CellGroupLegacy(props) {
+  var style1 = {
+    height: props.cellGroupWrapperHeight || props.height,
+    width: props.width,
+  };
+
+  if (props.isRTL) {
+    style1.right = props.offsetLeft;
+  } else {
+    style1.left = props.offsetLeft;
+  }
+
+  var style2 = {
+    height: props.height,
+    position: 'absolute',
+    width: props.contentWidth,
+    zIndex: props.zIndex,
+  };
+  FixedDataTableTranslateDOMPosition(
+    style2,
+    -1 * props.left,
+    0,
+    props._initialRender,
+    props.isRTL
+  );
+
+  return (
+    <div
+      style={style1}
+      className={cx('fixedDataTableCellGroupLayout/cellGroupWrapper')}
+    >
+      <div
+        className={cx('fixedDataTableCellGroupLayout/cellGroup')}
+        style={style2}
+      >
+        {props.sortedCells}
+      </div>
+    </div>
+  );
+}
+export default CellGroupLegacy;

src/FixedDataTable.js

@@ -872,6 +872,7 @@ class FixedDataTable extends React.Component {
           fixedColumnsWidth={this.props.fixedColumnsWidth}
           fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
           isGroupHeader={true}
+          shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
         />
       );
     }
@@ -923,6 +924,7 @@ class FixedDataTable extends React.Component {
           endViewportColumnIndex={this.props.endColumnIndex}
           fixedColumnsWidth={this.props.fixedColumnsWidth}
           fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
+          shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
         />
       );
     }
@@ -976,6 +978,7 @@ class FixedDataTable extends React.Component {
         fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
         firstViewportColumnIndex={this.props.firstColumnIndex}
         endViewportColumnIndex={this.props.endColumnIndex}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
 
@@ -1123,6 +1126,7 @@ class FixedDataTable extends React.Component {
         fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
         scrollbarYWidth={props.scrollbarYWidth}
         isRTL={props.isRTL}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
   };

src/FixedDataTableBufferedRows.js

@@ -228,8 +228,10 @@ class FixedDataTableBufferedRows extends React.Component {
         fixedRightColumnsWidth={this.props.fixedRightColumnsWidth}
         firstViewportColumnIndex={this.props.firstViewportColumnIndex}
         endViewportColumnIndex={this.props.endViewportColumnIndex}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
   }
 }
+//}
 export default FixedDataTableBufferedRows;

src/FixedDataTableCellGroup.js

@@ -15,13 +15,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import cx from './vendor_upstream/stubs/cx';
 import FixedDataTableCell from './FixedDataTableCell';
-import FixedDataTableTranslateDOMPosition from './FixedDataTableTranslateDOMPosition';
 import _ from 'lodash';
 import inRange from 'lodash/inRange';
+import CellGroup from './FixedDataCellGroupFunction';
+import CellGroupLegacy from './FixedDataCellGroupLegacyFunction';
 
-class FixedDataTableCellGroupImpl extends React.Component {
+class FixedDataTableCellGroup extends React.Component {
   /**
    * PropTypes are disabled in this component, because having them on slows
    * down the FixedDataTable hugely in DEV mode. You can enable them back for
@@ -59,6 +59,8 @@ class FixedDataTableCellGroupImpl extends React.Component {
 
     isHeaderOrFooter: PropTypes.bool,
 
+    offsetLeft: PropTypes.number,
+
     isRTL: PropTypes.bool,
 
     /**
@@ -114,6 +116,20 @@ class FixedDataTableCellGroupImpl extends React.Component {
   componentDidMount() {
     this._initialRender = false;
   }
+  shouldComponentUpdate(/*object*/ nextProps) /*boolean*/ {
+    /// if offsets haven't changed for the same cell group while scrolling, then skip update
+    return !(
+      nextProps.isScrolling &&
+      this.props.rowIndex === nextProps.rowIndex &&
+      this.props.left === nextProps.left &&
+      this.props.offsetLeft === nextProps.offsetLeft
+    );
+  }
+
+  static defaultProps = /*object*/ {
+    left: 0,
+    offsetLeft: 0,
+  };
 
   render() /*object*/ {
     var props = this.props;
@@ -147,32 +163,21 @@ class FixedDataTableCellGroupImpl extends React.Component {
       this._staticCells[i] = this._renderCell(i, columnIndex);
     }
 
-    var style = {
-      height: props.height,
-      position: 'absolute',
-      width: props.contentWidth,
-      zIndex: props.zIndex,
-    };
-    FixedDataTableTranslateDOMPosition(
-      style,
-      -1 * props.left,
-      0,
-      this._initialRender,
-      this.props.isRTL
-    );
-
     // NOTE (pradeep): Sort the cells by column index so that they appear with the right order in the DOM (see #221)
     const sortedCells = _.sortBy(this._staticCells, (cell) =>
       _.get(cell, 'props.columnIndex', Infinity)
     );
 
+    const CellGroupComponent = this.props.shouldUseLegacyComponents
+      ? CellGroupLegacy
+      : CellGroup;
+
     return (
-      <div
-        className={cx('fixedDataTableCellGroupLayout/cellGroup')}
-        style={style}
-      >
-        {sortedCells}
-      </div>
+      <CellGroupComponent
+        {...props}
+        _initialRender={this._initialRender}
+        sortedCells={sortedCells}
+      />
     );
   }
 
@@ -207,7 +212,6 @@ class FixedDataTableCellGroupImpl extends React.Component {
         className={className}
         height={this.props.rowHeight}
         key={key}
-        columnIndex={columnIndex}
         maxWidth={columnProps.maxWidth}
         minWidth={columnProps.minWidth}
         touchEnabled={this.props.touchEnabled}
@@ -222,71 +226,10 @@ class FixedDataTableCellGroupImpl extends React.Component {
         isRTL={this.props.isRTL}
         visible={visible}
         cellGroupType={this.props.cellGroupType}
+        shouldUseLegacyComponents={this.props.shouldUseLegacyComponents}
       />
     );
   };
 }
 
-class FixedDataTableCellGroup extends React.Component {
-  /**
-   * PropTypes are disabled in this component, because having them on slows
-   * down the FixedDataTable hugely in DEV mode. You can enable them back for
-   * development, but please don't commit this component with enabled propTypes.
-   */
-  static propTypes_DISABLED_FOR_PERFORMANCE = {
-    isScrolling: PropTypes.bool,
-    /**
-     * Height of the row.
-     */
-    height: PropTypes.number.isRequired,
-
-    offsetLeft: PropTypes.number,
-
-    left: PropTypes.number,
-    /**
-     * Z-index on which the row will be displayed. Used e.g. for keeping
-     * header and footer in front of other rows.
-     */
-    zIndex: PropTypes.number.isRequired,
-  };
-
-  shouldComponentUpdate(/*object*/ nextProps) /*boolean*/ {
-    /// if offsets haven't changed for the same cell group while scrolling, then skip update
-    return !(
-      nextProps.isScrolling &&
-      this.props.rowIndex === nextProps.rowIndex &&
-      this.props.left === nextProps.left &&
-      this.props.offsetLeft === nextProps.offsetLeft
-    );
-  }
-
-  static defaultProps = /*object*/ {
-    left: 0,
-    offsetLeft: 0,
-  };
-
-  render() /*object*/ {
-    var { offsetLeft, ...props } = this.props;
-
-    var style = {
-      height: props.cellGroupWrapperHeight || props.height,
-      width: props.width,
-    };
-
-    if (this.props.isRTL) {
-      style.right = offsetLeft;
-    } else {
-      style.left = offsetLeft;
-    }
-
-    return (
-      <div
-        style={style}
-        className={cx('fixedDataTableCellGroupLayout/cellGroupWrapper')}
-      >
-        <FixedDataTableCellGroupImpl {...props} />
-      </div>
-    );
-  }
-}
 export default FixedDataTableCellGroup;

src/FixedDataTableContainer.js

@@ -30,6 +30,7 @@ class FixedDataTableContainer extends React.Component {
     defaultScrollbars: true,
     scrollbarXHeight: Scrollbar.SIZE,
     scrollbarYWidth: Scrollbar.SIZE,
+    shouldUseLegacyComponents: false,
   };
 
   constructor(props) {