/
folder-content.js
106 lines (88 loc) · 2.36 KB
/
folder-content.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
'use strict';
let React = require('react');
let FolderContent = React.createClass({
getInitialState: function () {
return {
editing: false,
name: this.props.name
}
},
startEditing: function () {
this.setState({
editing: true
}, function () {
this.refs.nameInput.focus();
});
},
cancelEditing: function () {
this.setState({
editing: false
});
},
handleNameChange: function (event) {
this.setState({
name: event.target.value
});
},
handleKeyPress: function (event) {
let key = event.key;
if (key === 'Enter' || key === 'Escape') {
this.cancelEditing();
} else if (event.shiftKey && key === 'Tab') {
this.props.onUnIndent(this.props.id);
} else if (key === 'Tab') {
this.props.onIndent(this.props.id);
}
},
handleDelete: function () {
this.props.onDelete(this.props.id);
},
renderIndent: function () {
let depth = this.props.depth,
depthArr = [],
i;
for (i = 1; i < depth; i++) {
depthArr.push(<span key={'indent'+i} className='indent'></span>);
}
return depthArr;
},
renderInput: function () {
return (
<input
ref="nameInput"
type="text"
onKeyDown={this.handleKeyPress}
onChange={this.handleNameChange}
onBlur={this.cancelEditing}
value={this.state.name}/>
);
},
renderName: function () {
return (
<span onClick={this.startEditing} className='name'>{this.state.name}</span>
);
},
renderButtons: function () {
return (
<ul className="cta-buttons">
<li onClick={this.handleDelete}>⛌</li>
</ul>
);
},
render: function () {
let elm;
if (this.state.editing) {
elm = this.renderInput();
} else {
elm = this.renderName();
}
return (
<div className='folder-content group'>
{this.renderButtons()}
{this.renderIndent()}
{elm}
</div>
);
}
});
module.exports = FolderContent;