-
Notifications
You must be signed in to change notification settings - Fork 1k
/
FieldList.jsx
106 lines (91 loc) · 3.25 KB
/
FieldList.jsx
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React from 'react';
import Reflux from 'reflux';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import EventHandlersThrottler from 'util/EventHandlersThrottler';
import Field from 'enterprise/components/Field';
import FieldSelected from 'enterprise/components/sidebar/FieldSelected';
import { SelectedFieldsActions } from 'enterprise/stores/SelectedFieldsStore';
import styles from './FieldList.css';
import FieldTypeIcon from './FieldTypeIcon';
import { ViewMetadataStore } from '../../stores/ViewMetadataStore';
const FieldList = createReactClass({
propTypes: {
allFields: PropTypes.object.isRequired,
fields: PropTypes.object.isRequired,
selectedFields: PropTypes.object.isRequired,
},
mixins: [Reflux.connect(ViewMetadataStore, 'viewMetadata')],
componentDidMount() {
this._updateHeight();
window.addEventListener('scroll', this._onScroll);
},
componentDidUpdate(prevProps) {
if (!isNaN(this.props.maximumHeight) && this.props.maximumHeight !== prevProps.maximumHeight) {
this._updateHeight();
}
},
componentWillUnmount() {
window.removeEventListener('scroll', this._onScroll);
},
eventsThrottler: new EventHandlersThrottler(),
MINIMUM_FIELDS_HEIGHT: 50,
_onScroll() {
this.eventsThrottler.throttle(this._updateHeight, 30);
},
_updateHeight() {
const fieldsContainer = this.fieldList;
const maxHeight = this.props.maximumHeight -
fieldsContainer.getBoundingClientRect().top;
this.setState({ maxFieldsHeight: Math.max(isNaN(maxHeight) ? 0 : maxHeight, this.MINIMUM_FIELDS_HEIGHT) });
},
_renderField({ fields, fieldType, selectedQuery, selectedView, selectedFields }) {
const { name, type } = fieldType;
const disabled = !fields.find(f => f.name === name);
return (
<li key={`field-${name}`} className={styles.fieldListItem} >
<FieldSelected name={name}
selected={selectedFields.contains(name)}
onToggleSelected={SelectedFieldsActions.toggle} />
{' '}
<FieldTypeIcon type={type} />
{' '}
<Field queryId={selectedQuery}
viewId={selectedView}
disabled={disabled}
menuContainer={document && document.getElementById('sidebar')}
name={name}
type={type}
interactive>
{name}
</Field>
</li>
);
},
_renderFieldList({ fields, selectedFields, allFields }) {
if (!fields) {
return <span>No field information available.</span>;
}
const selectedQuery = this.state.viewMetadata.activeQuery;
const selectedView = this.state.viewMetadata.id;
const fieldList = allFields
.sort()
.map(fieldType => this._renderField({ fieldType, selectedQuery, selectedView, selectedFields, fields }));
return (
<ul ref={(elem) => { this.fieldList = elem; }}
style={{ maxHeight: this.state.maxFieldsHeight }}
className={styles.fieldList}>
{fieldList}
</ul>
);
},
render() {
const { allFields, fields, selectedFields } = this.props;
return (
<div>
{this._renderFieldList({ fields, selectedFields, allFields })}
</div>
);
},
});
export default FieldList;