Horizontal scrollbar near the footer

energydrink9 · Jul 16, 2018 · d4a969b · d4a969b
1 parent 8690b7a
commit d4a969b
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)
+}