forked from apache/druid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
spec-dialog.tsx
99 lines (90 loc) · 2.74 KB
/
spec-dialog.tsx
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
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
import React from 'react';
import AceEditor from 'react-ace';
import { validJson } from '../../utils';
import './spec-dialog.scss';
export interface SpecDialogProps {
onSubmit: (spec: JSON) => void;
onClose: () => void;
title: string;
initSpec?: any;
}
export interface SpecDialogState {
spec: string;
}
export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogState> {
constructor(props: SpecDialogProps) {
super(props);
this.state = {
spec: props.initSpec ? JSON.stringify(props.initSpec, null, 2) : '{\n\n}',
};
}
private postSpec(): void {
const { onClose, onSubmit } = this.props;
const { spec } = this.state;
if (!validJson(spec)) return;
onSubmit(JSON.parse(spec));
onClose();
}
render(): JSX.Element {
const { onClose, title } = this.props;
const { spec } = this.state;
return (
<Dialog
className="spec-dialog"
isOpen
onClose={onClose}
title={title}
canOutsideClickClose={false}
>
<AceEditor
mode="hjson"
theme="solarized_dark"
className="spec-dialog-textarea"
onChange={e => {
this.setState({ spec: e });
}}
fontSize={12}
showPrintMargin={false}
showGutter
highlightActiveLine
value={spec}
width="100%"
setOptions={{
showLineNumbers: true,
tabSize: 2,
}}
style={{}}
/>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button text="Close" onClick={onClose} />
<Button
text="Submit"
intent={Intent.PRIMARY}
onClick={() => this.postSpec()}
disabled={!validJson(spec)}
/>
</div>
</div>
</Dialog>
);
}
}