-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.js
97 lines (83 loc) · 2.48 KB
/
index.js
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
import React from "react";
import PropTypes from "prop-types";
import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-css";
import "prismjs/components/prism-json";
import WarningList from "../warning-list/";
import SyntaxSelect from "../syntax-select";
import styles from "./index.css";
function hightlightWithLineNumbers(input, language) {
return highlight(input, language)
.split("\n")
.map(line => `<span class=${styles.editorLineNumber}></span>${line}`)
.join("\n");
}
const Linter = ({
onCodeChange,
onConfigChange,
onSyntaxChange,
code,
config,
syntax,
warnings,
error
}) => {
const errorOutput = <div className={styles.error}>{error}</div>;
const warningOutput = (
<div className={styles.results}>
<WarningList warnings={warnings} />
</div>
);
return (
<div className={styles.root}>
<div className={styles.codeInput}>
<span className={styles.caption}>
<SyntaxSelect
selectedSyntax={syntax}
onSyntaxChange={onSyntaxChange}
/>
{"input"}
</span>
<div className={styles.editorWrapper}>
<Editor
value={code}
onValueChange={onCodeChange}
highlight={input => hightlightWithLineNumbers(input, languages.css)}
className={styles.editor}
padding={10}
/>
</div>
</div>
<div className={styles.output}>
<span className={styles.caption}>{"Result"}</span>
{error ? errorOutput : warningOutput}
</div>
<div className={styles.configInput}>
<span className={styles.caption}>{"Config input"}</span>
<div className={styles.editorWrapper}>
<Editor
value={config}
onValueChange={onConfigChange}
highlight={input =>
hightlightWithLineNumbers(input, languages.json)
}
className={`${styles.editor} language-json`}
padding={10}
/>
</div>
</div>
</div>
);
};
Linter.propTypes = {
onCodeChange: PropTypes.func.isRequired,
onConfigChange: PropTypes.func.isRequired,
onSyntaxChange: PropTypes.any,
code: PropTypes.string.isRequired,
config: PropTypes.string.isRequired,
syntax: PropTypes.any,
warnings: PropTypes.array.isRequired,
error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired
};
export default Linter;