-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.js
92 lines (85 loc) · 2.34 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
import {
div, span, textarea, h2,
select, option,
label, button,
} from '@cycle/dom';
import {IF} from '../../../../lib/h-helper';
import './index.styl';
const markError = (string, error) => {
if (!error || !error.location) {
return [string];
} else {
const loc = error.location;
const start = loc.start.offset;
const end = loc.end.offset;
return [
string.substring(0, start),
span('.overlay-text-marker.text-marker-error',
string.substring(start, end) || ' '
),
string.substring(end),
];
}
};
const render = (state) =>
div('.logic-panel', [
div('.logic-panel-body', [
label('.logic-language-chooser',[
span('.logic-language-chooser-label', 'Language:'),
select('.syntax-selector',{
name: 'language',
}, [
state.input.langId === 'auto' ?
option(
{value: 'auto', selected: true},
`Auto detect (${state.output.language.name || '???'})`
) :
option(
{value: 'auto', selected: false},
`Auto detect`
),
state.languageList.map((item) =>
option({
value: item.id,
selected: state.input.langId === item.id,
}, item.language.name)
).toArray(),
]),
]),
IF(state.showCompletion, () =>
div('.complete-panel',
state.output.language.completions.map((completion) =>
button('.completion-button', {
title: 'Bottom',
attributes: {
'data-action-insert': completion,
},
}, completion)
).toArray()
)
),
div('.logic-input', [
textarea('.logic-input-field', {
value: state.input.string,
placeholder: 'Enter some logic expression...',
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: false,
}),
div('.logic-input-overlay', [
markError(state.input.string, state.output.error),
]),
]),
IF(state.output.error !== null, () => div('.error-box', [
h2('.error-box-title','Error'),
div('.error-body',[
state.output.error.message,
]),
])),
]),
])
;
export default (state$) =>
state$.map(render)
;