/
TemplateDetails.jsx
71 lines (65 loc) · 2.46 KB
/
TemplateDetails.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
var Editor = require('./Editor.jsx');
var Textarea = require('./Textarea.jsx');
module.exports = React.createClass({
onViewChange(type, value){
if(type === "condition"){
this.props.onViewChange(type, value["condition"]);
}else{
var newString = value.replace(/{\w*[A-Z]\w*}/, match => match.toLowerCase() );
this.props.onViewChange(type, value);
}
},
render(){
var isTemplateLegal = _(this.props.template).pick("front", "back").mapValues(
templateStr=>(templateStr.match(/{(\w*)}/g)||[]).every(
entryName => _(this.props.entryNames).contains(entryName.slice(1, -1))
)
).value();
return (
<div>
<section>
<h3>Front</h3>
<Textarea
isLegal={isTemplateLegal.front}
value={this.props.template.front}
placeholder="Front template"
onEntryEdit={this.onViewChange.bind(this, "front")}
/>
</section>
<section>
<h3>Back</h3>
<Textarea
isLegal={isTemplateLegal.back}
value={this.props.template.back}
placeholder="Back template"
onEntryEdit={this.onViewChange.bind(this, "back")}
/>
</section>
<Editor
path={this.props.template}
objects={[
{
displayName: "Filter",
key: "condition",
displayType: "input",
placeholder: "Empty condition matches all"
}
]}
onUpdate={this.onViewChange.bind(null, "condition")}
/>
{this.props.delete &&
<section>
<h3>Delete</h3>
<div>
<button
className="buttonDanger"
onClick={this.props.delete}>
Delete this Template
</button>
</div>
</section>
}
</div>
);
}
});