-
Notifications
You must be signed in to change notification settings - Fork 23
/
Expense.jsx
66 lines (62 loc) · 1.66 KB
/
Expense.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
var d3 = require('d3/d3');
var React = require('react/addons');
var ExpenseVisualization = require('../visualizations/Expense');
var ViewActionCreators = require('../actions/ViewActionCreators');
var ExpenseComponent = React.createClass({
componentDidMount() {
// wrap element in d3
this.d3Node = d3.select(this.getDOMNode());
this.d3Node.datum(this.props.data)
.on('click', this.onClick.bind(this))
.call(ExpenseVisualization.drag, this.beforeDrag, this.onDrag, this.afterDrag)
.call(ExpenseVisualization.enter);
},
shouldComponentUpdate(nextProps) {
if (nextProps.data.update) {
this.d3Node.datum(nextProps.data);
}
return true;
},
componentDidUpate() {
this.d3Node.datum(this.props.data);
},
componentWillUnMount() {
},
render() {
return (
<g className="expense">
<rect className="expenseRect" />
<rect className="textBG" />
<text>{this.props.data.name}</text>
</g>
);
},
// events
onClick() {
if (!this.props.data.id) return;
if (this.props.data.selected) {
ViewActionCreators.unselectNode();
} else {
ViewActionCreators.selectNode({
type: 'expense',
id: this.props.data.id
});
}
},
beforeDrag() {
if (!this.props.data.id) return;
this.props.beforeDrag(this.props.data);
},
onDrag(x, y) {
if (!this.props.data.id) return;
var expense = React.addons.update(this.props.data, {
$merge: {update: true, x, y}
});
this.props.onDrag(expense);
},
afterDrag() {
if (!this.props.data.id) return;
this.props.afterDrag(this.props.data);
}
});
module.exports = ExpenseComponent;