/
NodeActionConditionItem.js
75 lines (65 loc) · 3.22 KB
/
NodeActionConditionItem.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
import React, { Component } from 'react';
import NodeTriggerList from '../NodeTriggerList';
class NodeActionConditionItem extends Component {
constructor(props) {
super(props);
this.onAttrChange = this.onAttrChange.bind(this);
this.onchangeAttr = this.onchangeAttr.bind(this);
this.onConditionChange = this.onConditionChange.bind(this);
}
onAttrChange(payload) {
this.props.onChangeFieldAttr({id : this.props.id, 'path' : ['content', 'attr'], value : payload});
}
onValChange(payload) {
this.props.onChangeFieldAttr({id : this.props.id, 'path' : ['content', 'val'], value : payload});
}
onConditionChange(payload) {
this.props.onChangeFieldAttr({id : this.props.id, 'path' : ['content', 'comp'], value : payload});
}
deleteField() {
this.props.onDeleteField(this.props.id);
}
onchangeAttr(e) {
this.props.onChangeFieldAttr({id : this.props.id, 'path' : ['content'].concat(e.path), value : e.value});
}
render() {
return (
<div className="row">
<div className="col-4">
<div className="form-group">
<label>Attribute</label>
<input type="text" placeholder="yes, thanks" className="form-control form-control-sm" onChange={(e) => this.onAttrChange(e.target.value)} defaultValue={this.props.action.getIn(['content','attr'])} />
</div>
</div>
<div className="col-2">
<div className="form-group">
<label>Condition</label>
<select className="form-control form-control-sm" onChange={(e) => this.onConditionChange(e.target.value)} defaultValue={this.props.action.getIn(['content','comp'])} >
<option value="">--Choose--</option>
<option value="gt">></option>
<option value="gte">>=</option>
<option value="lt"><</option>
<option value="lte"><=</option>
<option value="eq">=</option>
<option value="neq">!=</option>
<option value="like">Text like</option>
<option value="notlike">Text not like</option>
<option value="contains">Contains</option>
</select>
</div>
</div>
<div className="col-4">
<div className="form-group">
<label>Value</label>
<input type="text" placeholder="" className="form-control form-control-sm" onChange={(e) => this.onValChange(e.target.value)} defaultValue={this.props.action.getIn(['content','val'])} />
</div>
</div>
<div className="col-2">
<div><label> </label></div>
<button type="button" className="btn btn-block btn-warning btn-sm" onClick={this.deleteField.bind(this)}>Delete</button>
</div>
</div>
);
}
}
export default NodeActionConditionItem;