/
TargetTable.jsx
84 lines (74 loc) · 2.21 KB
/
TargetTable.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
72
73
74
75
76
77
78
79
80
81
82
83
import React from "react";
import { Table, Icon, Button } from "antd";
import AbstractEditableTable from "./AbstractEditableTable";
import { EditableCell } from "./EditableCell";
import { connectDnD } from "./DragableRow";
import ErrorBoundary from "component/ErrorBoundary";
@connectDnD
export class TargetTable extends AbstractEditableTable {
constructor( props ) {
super( props );
this.columns = [
{
title: "Target",
dataIndex: "target",
width: "30%",
render: ( text, record ) => (
<EditableCell
record={ record }
onSubmit={ this.onSubmit }
dataIndex="target"
className="input--target"
placeholder="Enter target name"
liftFormStateUp={ this.liftFormStateUp }
updateRecord={ this.updateRecord }
/>
)
},
{
title: "Selector",
dataIndex: "selector",
width: "calc(70% - 160px)",
render: ( text, record ) => (
<EditableCell
record={ record }
onSubmit={ this.onSubmit }
dataIndex="selector"
className="input--selector"
placeholder="Enter selector"
liftFormStateUp={ this.liftFormStateUp }
updateRecord={ this.updateRecord }
/>
)
},
this.getActionColumn()
];
}
onRowClassName = ( record ) => {
return "model--target " + this.getRightClickClassName( record );
}
fields = [ "target", "selector" ];
model = "Target";
render() {
const data = Object.values( this.props.targets );
return (
<div className="box-margin-vertical">
<ErrorBoundary>
<Table
id="cTargetTable"
className="draggable-table"
components={this.components}
rowClassName={ this.onRowClassName }
onRow={this.onRow}
showHeader={ true }
dataSource={ data }
columns={this.columns}
pagination={false}
footer={() => ( <Button id="cTargetTableAddBtn"
onClick={ this.addRecord }><Icon type="plus" />Add a target</Button> )}
/>
</ErrorBoundary>
</div>
);
}
}