forked from apache/superset
-
Notifications
You must be signed in to change notification settings - Fork 3
/
TextAreaControl.jsx
99 lines (92 loc) · 2.66 KB
/
TextAreaControl.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
import React from 'react';
import PropTypes from 'prop-types';
import { Button, FormGroup, FormControl } from 'react-bootstrap';
import AceEditor from 'react-ace';
import 'brace/mode/sql';
import 'brace/mode/json';
import 'brace/mode/html';
import 'brace/mode/markdown';
import 'brace/theme/textmate';
import ControlHeader from '../ControlHeader';
import ModalTrigger from '../../../components/ModalTrigger';
import { t } from '../../../locales';
const propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.string,
description: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.string,
height: PropTypes.number,
language: PropTypes.oneOf([null, 'json', 'html', 'sql', 'markdown']),
minLines: PropTypes.number,
maxLines: PropTypes.number,
offerEditInModal: PropTypes.bool,
};
const defaultProps = {
label: null,
description: null,
onChange: () => {},
value: '',
height: 250,
minLines: 10,
maxLines: 10,
offerEditInModal: true,
};
export default class TextAreaControl extends React.Component {
onControlChange(event) {
this.props.onChange(event.target.value);
}
onAceChange(value) {
this.props.onChange(value);
}
renderEditor(inModal = false) {
if (this.props.language) {
return (
<AceEditor
mode={this.props.language}
theme="textmate"
style={{ border: '1px solid #CCC' }}
minLines={inModal ? 40 : this.props.minLines}
maxLines={inModal ? 1000 : this.props.maxLines}
onChange={this.onAceChange.bind(this)}
width="100%"
editorProps={{ $blockScrolling: true }}
enableLiveAutocompletion
value={this.props.value}
/>
);
}
return (
<FormGroup controlId="formControlsTextarea">
<FormControl
componentClass="textarea"
placeholder={t('textarea')}
onChange={this.onControlChange.bind(this)}
value={this.props.value}
style={{ height: this.props.height }}
/>
</FormGroup>);
}
render() {
const controlHeader = <ControlHeader {...this.props} />;
return (
<div>
{controlHeader}
{this.renderEditor()}
{this.props.offerEditInModal &&
<ModalTrigger
bsSize="large"
modalTitle={controlHeader}
triggerNode={
<Button bsSize="small" className="m-t-5">
{t('Edit')} <strong>{this.props.language}</strong> {t('in modal')}
</Button>
}
modalBody={this.renderEditor(true)}
/>}
</div>
);
}
}
TextAreaControl.propTypes = propTypes;
TextAreaControl.defaultProps = defaultProps;