-
Notifications
You must be signed in to change notification settings - Fork 1k
/
ConfigurablePivot.jsx
60 lines (52 loc) · 1.7 KB
/
ConfigurablePivot.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
import React from 'react';
import PropTypes from 'prop-types';
import Select from 'react-select';
import { Popover } from 'react-bootstrap';
import { Portal } from 'react-portal';
import { Position } from 'react-overlays';
import connect from 'stores/connect';
import PivotConfiguration from './PivotConfiguration';
import { FieldTypesStore } from '../../stores/FieldTypesStore';
import FieldType from '../../logic/fieldtypes/FieldType';
class ConfigurablePivot extends React.Component {
static propTypes = {};
constructor(props, context) {
super(props, context);
this.state = {
isOpen: false,
};
}
_onClick = () => {
this.setState(state => ({ isOpen: !state.isOpen }));
};
_onClose = (config) => {
this.setState({ isOpen: false });
this.props.onChange(config);
};
render() {
const { value, config, fields } = this.props;
const fieldTypes = fields.all.filter(v => v.name === value.label);
const fieldType = fieldTypes.isEmpty() ? FieldType.Unknown : fieldTypes.first().type;
const popover = this.state.isOpen && (
<Portal>
<Position
container={document.body}
placement="bottom"
target={this.target}>
<Popover title="Pivot Configuration">
<PivotConfiguration field={value.value} type={fieldType} config={config} onClose={this._onClose} />
</Popover>
</Position>
</Portal>
);
return (
<span>
<Select.Value ref={(elem) => { this.target = elem; }} {...this.props} onClick={this._onClick}>
{this.props.children}
</Select.Value>
{popover}
</span>
);
}
}
export default connect(ConfigurablePivot, { fields: FieldTypesStore });