From d4a969b2a23c2e38bf4265be5ea53b0f36617cef Mon Sep 17 00:00:00 2001
From: Michele Lugano <michele.lugano9@gmail.com>
Date: Mon, 16 Jul 2018 16:48:35 +0200
Subject: [PATCH] Horizontal scrollbar near the footer

---
 package-lock.json          | 14 +++----
 package.json               |  2 +-
 src/Cell.js                |  1 -
 src/FunctionalDataGrid.js  |  4 +-
 src/Header.js              |  2 +-
 src/HorizontalScrollbar.js | 82 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 94 insertions(+), 11 deletions(-)
 create mode 100644 src/HorizontalScrollbar.js

diff --git a/package-lock.json b/package-lock.json
index d1387d6..41594c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "functional-data-grid",
-  "version": "1.1.27",
+  "version": "1.1.34",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6286,9 +6286,9 @@
       }
     },
     "react": {
-      "version": "16.4.0",
-      "resolved": "http://dev.beltos.com/nexus/repository/npm-group/react/-/react-16.4.0.tgz",
-      "integrity": "sha512-K0UrkLXSAekf5nJu89obKUM7o2vc6MMN9LYoKnCa+c+8MJRAT120xzPLENcWSRc7GYKIg0LlgJRDorrufdglQQ==",
+      "version": "16.4.1",
+      "resolved": "http://dev.beltos.com/nexus/repository/npm-group/react/-/react-16.4.1.tgz",
+      "integrity": "sha512-3GEs0giKp6E0Oh/Y9ZC60CmYgUPnp7voH9fbjWsvXtYFb4EWtgQub0ADSq0sJR0BbHc4FThLLtzlcFaFXIorwg==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -6319,9 +6319,9 @@
       }
     },
     "react-dom": {
-      "version": "16.4.0",
-      "resolved": "http://dev.beltos.com/nexus/repository/npm-group/react-dom/-/react-dom-16.4.0.tgz",
-      "integrity": "sha512-bbLd+HYpBEnYoNyxDe9XpSG2t9wypMohwQPvKw8Hov3nF7SJiJIgK56b46zHpBUpHb06a1iEuw7G3rbrsnNL6w==",
+      "version": "16.4.1",
+      "resolved": "http://dev.beltos.com/nexus/repository/npm-group/react-dom/-/react-dom-16.4.1.tgz",
+      "integrity": "sha512-1Gin+wghF/7gl4Cqcvr1DxFX2Osz7ugxSwl6gBqCMpdrxHjIFUS7GYxrFftZ9Ln44FHw0JxCFD9YtZsrbR5/4A==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
diff --git a/package.json b/package.json
index dcb0303..7c63d5e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "functional-data-grid",
-  "version": "1.1.34",
+  "version": "1.1.35",
   "description": "Functional Data Grid",
   "main": "dist/FunctionalDataGrid.js",
   "author": "Michele Lugano <michele.lugano9@gmail.com> (https://www.linkedin.com/in/mlugano/)",
diff --git a/src/Cell.js b/src/Cell.js
index 574e48e..52ec82e 100644
--- a/src/Cell.js
+++ b/src/Cell.js
@@ -66,7 +66,6 @@ export default class Cell extends React.Component<CellProps, CellState> {
       backgroundColor: 'inherit',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      zIndex: 1,
       alignSelf: 'center',
       width: '100%'
     }
diff --git a/src/FunctionalDataGrid.js b/src/FunctionalDataGrid.js
index 0b05303..c943a15 100644
--- a/src/FunctionalDataGrid.js
+++ b/src/FunctionalDataGrid.js
@@ -15,6 +15,7 @@ import DataRow from './DataRow'
 import Aggregate from './Aggregate'
 import debounce from 'debounce'
 import Footer from './Footer'
+import HorizontalScrollbar from './HorizontalScrollbar'
 
 const debounceTimeout = 250
 const defaultInitialColumnWidth = 100
@@ -141,7 +142,8 @@ export default class FunctionalDataGrid<T, A: void> extends React.Component<Func
                 )}
               </AutoSizer>
             </div>
-              { this.props.showFooter && <Footer style={this.props.style.footer != null ? this.props.style.footer : {}} totalElements={this.getElements().filter(r => r.type === 'element').size} /> }
+            <HorizontalScrollbar enableColumnsVisibilityMenu={this.props.enableColumnsVisibilityMenu} columnsVisibility={this.state.columnsVisibility} columns={this.props.columns} columnsWidth={this.state.columnsWidth} scrollLeft={scrollLeft} onScroll={onScroll} />
+            { this.props.showFooter && <Footer style={this.props.style.footer != null ? this.props.style.footer : {}} totalElements={this.getElements().filter(r => r.type === 'element').size} /> }
           </div>
         )}
       </ScrollSync>
diff --git a/src/Header.js b/src/Header.js
index 3fdce2e..2c02676 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -72,7 +72,7 @@ export default class Header extends React.Component<HeaderProps, HeaderState> {
       <div style={{display: 'flex'}}>
         { this.renderColumns(this.props.columns.filter((c, index) => c.locked && index < firstUnlockedColumnIndex)) }
       </div>
-      <div style={{display: 'flex', overflow: 'overlay', flexGrow: 1}} ref={(el) => this.scrollingDiv = el} onScroll={this.triggerOnScroll}>
+      <div style={{display: 'flex', overflow: 'hidden', flexGrow: 1}} ref={(el) => this.scrollingDiv = el} onScroll={this.triggerOnScroll}>
         { this.renderColumns(this.props.columns.filter(c => ! c.locked)) }
       </div>
       <div style={{display: 'flex'}}>
diff --git a/src/HorizontalScrollbar.js b/src/HorizontalScrollbar.js
new file mode 100644
index 0000000..c505944
--- /dev/null
+++ b/src/HorizontalScrollbar.js
@@ -0,0 +1,82 @@
+// @flow
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { List, Map } from 'immutable'
+import ColumnGroup from "./ColumnGroup"
+import BaseColumn from "./BaseColumn"
+
+type HorizontalScrollbarProps = {
+  columns: List<BaseColumn | ColumnGroup>,
+  scrollLeft: number,
+  onScroll: Function,
+  columnsWidth : Map<string, number>,
+  columnsVisibility: Map<string, boolean>,
+  style: Object,
+  enableColumnsVisibilityMenu: boolean
+}
+
+export default class HorizontalScrollbar extends React.Component<HorizontalScrollbarProps> {
+
+  props: HorizontalScrollbarProps
+
+  scrollingDiv : any
+
+  constructor(props : HorizontalScrollbarProps) {
+    super(props)
+  }
+
+  componentDidMount = () => {
+    this.updateScroll()
+  }
+
+  componentDidUpdate = () => {
+    this.updateScroll()
+  }
+
+  updateScroll = () => {
+    this.scrollingDiv.scrollLeft = this.props.scrollLeft // eslint-disable-line
+  }
+
+  triggerOnScroll = (event : Object) => {
+    let scrollEvent = {
+      scrollLeft: event.target.scrollLeft
+    }
+    if (this.props.onScroll != null)
+      this.props.onScroll(scrollEvent)
+  }
+
+  render = () => {
+    let style = { display: 'flex', flexGrow: 0, width: '100%', backgroundColor: 'transparent', position: 'relative', borderBottom: 'solid 1px #ccc' }
+
+    let firstUnlockedColumnIndex = this.props.columns.findIndex((c) => ! c.locked)
+
+    return <div className='functional-data-grid__horizontal-scrollbar' style={{...style}}>
+      <div style={{display: 'flex'}}>
+        { this.renderColumns(this.props.columns.filter((c, index) => c.locked && index < firstUnlockedColumnIndex)) }
+      </div>
+      <div style={{display: 'flex', overflow: 'auto', flexGrow: 1}} ref={(el) => this.scrollingDiv = el} onScroll={this.triggerOnScroll}>
+        { this.renderColumns(this.props.columns.filter(c => ! c.locked)) }
+      </div>
+      <div style={{display: 'flex'}}>
+        { this.renderColumns(this.props.columns.filter((c, index) => c.locked && index >= firstUnlockedColumnIndex)) }
+      </div>
+      { this.props.enableColumnsVisibilityMenu && <div style={{ width: '26px' }}></div> }
+    </div>
+  }
+
+  renderColumns = (columns : List<BaseColumn | ColumnGroup>) => columns
+    .map((c, index) => c instanceof ColumnGroup ? this.renderColumnGroup(c, index) : (this.isColumnVisible(c.id) && this.renderColumn(c)))
+
+  renderColumnGroup = (cg : ColumnGroup, index : number) => <div key={index} style={{ display: 'flex', flexDirection: 'column' }}>
+    <div style={{ display: 'flex' }}>
+      { cg.columns.filter(c => this.isColumnVisible(c.id)).map(c => this.renderColumn(c)) }
+    </div>
+  </div>
+
+  getColumnWidth = (c : BaseColumn) => this.props.columnsWidth.get(c.id) != null ? this.props.columnsWidth.get(c.id) : c.width
+
+  renderColumn = (c : BaseColumn) => <div key={c.id} style={{width: this.getColumnWidth(c) + 'px', flexShrink: 0, minHeight: '1px'}} />
+
+  isColumnVisible = (columnId: string) => this.props.columnsVisibility.get(columnId)
+}