SS-14164: Add helper code for freeze row support

Author: Kamran Asif

build_helpers/buildAPIDocs.sh

@@ -15,17 +15,17 @@ if (!fs.existsSync(docsPath)) {
 var PROJECT_ROOT = path.join(__dirname, '../');
 var FILES_TO_READ = [
   {
-    path: path.join(PROJECT_ROOT, 'src/FixedDataTableNew.react.js'),
+    path: path.join(PROJECT_ROOT, 'src/FixedDataTable.react.js'),
     name: 'Table',
     markdownFileName: 'TableAPI.md'
   },
   {
-    path: path.join(PROJECT_ROOT, 'src/FixedDataTableColumnNew.react.js'),
+    path: path.join(PROJECT_ROOT, 'src/FixedDataTableColumn.react.js'),
     name: 'Column',
     markdownFileName: 'ColumnAPI.md'
   },
   {
-    path: path.join(PROJECT_ROOT, 'src/FixedDataTableColumnGroupNew.react.js'),
+    path: path.join(PROJECT_ROOT, 'src/FixedDataTableColumnGroup.react.js'),
     name: 'ColumnGroup',
     markdownFileName: 'ColumnGroupAPI.md'
   },

src/FixedDataTable.react.js

@@ -130,6 +130,19 @@ var FixedDataTable = React.createClass({
     overflowX: PropTypes.oneOf(['hidden', 'auto']),
     overflowY: PropTypes.oneOf(['hidden', 'auto']),
 
+    /**
+     * Hide the scrollbar but still enable scroll functionality
+     */
+    showScrollbarX: PropTypes.bool,
+    showScrollbarY: PropTypes.bool,
+
+    /**
+     * Callback when horizontally scrolling the grid
+     *
+     * Return false to stop propagation
+     */
+    onHorizontalScroll: PropTypes.func,
+
     /**
      * Number of rows in the table.
      */
@@ -258,8 +271,8 @@ var FixedDataTable = React.createClass({
       footerHeight: 0,
       groupHeaderHeight: 0,
       headerHeight: 0,
-      scrollLeft: 0,
-      scrollTop: 0,
+      showScrollbarX: true,
+      showScrollbarY: true
     };
   },
 
@@ -419,8 +432,8 @@ var FixedDataTable = React.createClass({
     }
 
     var maxScrollY = this.state.maxScrollY;
-    var showScrollbarX = state.maxScrollX > 0 && state.overflowX !== 'hidden';
-    var showScrollbarY = maxScrollY > 0 && state.overflowY !== 'hidden';
+    var showScrollbarX = state.maxScrollX > 0 && state.overflowX !== 'hidden' && state.showScrollbarX !== false;
+    var showScrollbarY = maxScrollY > 0 && state.overflowY !== 'hidden' && state.showScrollbarY !== false;
     var scrollbarXHeight = showScrollbarX ? Scrollbar.SIZE : 0;
     var scrollbarYHeight = state.height - scrollbarXHeight -
         (2 * BORDER_HEIGHT) - state.footerHeight;
@@ -748,14 +761,14 @@ var FixedDataTable = React.createClass({
     var firstRowIndex = (oldState && oldState.firstRowIndex) || 0;
     var firstRowOffset = (oldState && oldState.firstRowOffset) || 0;
     var scrollX, scrollY;
-    if (oldState && props.overflowX !== 'hidden') {
-      scrollX = oldState.scrollX;
-    } else {
+
+    scrollX = oldState ? oldState.scrollX : 0;
+    if (props.scrollLeft !== this.props.scrollLeft) {
       scrollX = props.scrollLeft;
     }
-    if (oldState && props.overflowY !== 'hidden') {
-      scrollY = oldState.scrollY;
-    } else {
+
+    scrollY = oldState ? oldState.scrollY : 0;
+    if (props.scrollTop !== this.props.scrollTop) {
       scrollState = this._scrollHelper.scrollTo(props.scrollTop);
       firstRowIndex = scrollState.index;
       firstRowOffset = scrollState.offset;
@@ -878,7 +891,7 @@ var FixedDataTable = React.createClass({
       FixedDataTableWidthHelper.getTotalWidth(columns);
 
     var horizontalScrollbarVisible = scrollContentWidth > props.width &&
-      props.overflowX !== 'hidden';
+      props.overflowX !== 'hidden' && props.showScrollbarX !== false;
 
     if (horizontalScrollbarVisible) {
       bodyHeight -= Scrollbar.SIZE;
@@ -990,9 +1003,14 @@ var FixedDataTable = React.createClass({
         x += deltaX;
         x = x < 0 ? 0 : x;
         x = x > this.state.maxScrollX ? this.state.maxScrollX : x;
-        this.setState({
-          scrollX: x,
-        });
+
+        //NOTE (asif) This is a hacky workaround to prevent FDT from setting its internal state
+        var onHorizontalScroll = this.props.onHorizontalScroll;
+        if (onHorizontalScroll ? onHorizontalScroll(x) : true) {
+          this.setState({
+            scrollX: x,
+          });
+        }
       }
 
       this._didScrollStop();
@@ -1005,9 +1023,12 @@ var FixedDataTable = React.createClass({
       if (!this._isScrolling) {
         this._didScrollStart();
       }
-      this.setState({
-        scrollX: scrollPos,
-      });
+      var onHorizontalScroll = this.props.onHorizontalScroll;
+      if (onHorizontalScroll ? onHorizontalScroll(scrollPos) : true) {
+        this.setState({
+          scrollX: scrollPos,
+        });
+      }
       this._didScrollStop();
     }
   },