-
Notifications
You must be signed in to change notification settings - Fork 1k
/
Field.jsx
75 lines (64 loc) · 2.37 KB
/
Field.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
import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem, Well } from 'react-bootstrap';
import { PluginStore } from 'graylog-web-plugin/plugin';
import OverlayDropdown from './OverlayDropdown';
import style from './Field.css';
import FieldType from '../logic/fieldtypes/FieldType';
export default class Field extends React.Component {
static propTypes = {
children: PropTypes.node,
disabled: PropTypes.bool,
name: PropTypes.string.isRequired,
menuContainer: PropTypes.object,
queryId: PropTypes.string.isRequired,
type: PropTypes.instanceOf(FieldType).isRequired,
};
static defaultProps = {
children: null,
disabled: false,
interactive: false,
viewId: null,
menuContainer: document.body,
};
constructor(props, context) {
super(props, context);
this.state = {
open: false,
};
}
_onMenuToggle = () => this.setState(state => ({ open: !state.open }));
render() {
const { children, disabled, menuContainer, name, queryId, type } = this.props;
const element = children || name;
const wrappedElement = disabled ? <span className={style.disabled}>{element}</span> : element;
const fieldActions = PluginStore.exports('fieldActions').map((fieldAction) => {
const onSelect = ({ field }) => {
this._onMenuToggle();
fieldAction.handler(queryId, field);
};
const condition = fieldAction.condition || (() => true);
const actionDisabled = !condition({ name, type });
return (<MenuItem key={`${name}-action-${fieldAction.type}`}
disabled={actionDisabled}
eventKey={{ action: fieldAction.type, field: name }}
onSelect={onSelect}>{fieldAction.title}</MenuItem>);
});
return (
<OverlayDropdown show={this.state.open}
toggle={wrappedElement}
onToggle={this._onMenuToggle}
menuContainer={menuContainer} >
<div style={{ marginBottom: '10px' }}>
<span className={style.dropdownheader}>
{name} = {type.type}
</span>
</div>
<MenuItem divider />
<MenuItem header>Actions</MenuItem>
{fieldActions}
<Well style={{ marginTop: '10px', fontWeight: 200 }}>These are very useful stats about the field.</Well>
</OverlayDropdown>
);
}
}