-
Notifications
You must be signed in to change notification settings - Fork 13
/
HorizontalScrollbar.js
82 lines (64 loc) · 2.89 KB
/
HorizontalScrollbar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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)
}