/
PlaybackWrapper.js
60 lines (50 loc) · 1.1 KB
/
PlaybackWrapper.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
import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import {
playNote,
} from '../../actions/PlaybackActions';
// Map keyCodes to columns
export const colMap = {
'83': 0,
'68': 1,
'70': 2,
'32': 3,
'74': 4,
'75': 5,
'76': 6
};
/*
* Wrapper that handles playing notes during playback
*/
const PlaybackWrapper = React.createClass({
componentDidMount() {
ReactDOM.findDOMNode(this).focus();
},
_keysDown: new Set(),
handleKeyDown(e) {
const col = colMap[e.keyCode];
if (col !== undefined) {
if (!this._keysDown.has(e.keyCode)) {
this.props.dispatch(playNote(Date.now(), col));
this._keysDown.add(e.keyCode);
return false;
}
}
},
handleKeyUp(e) {
if (this._keysDown.has(e.keyCode)) {
this._keysDown.delete(e.keyCode);
return false;
}
},
render() {
return (
<div onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} tabIndex="-1"
{...this.props} >
{this.props.children}
</div>
);
}
});
export default connect()(PlaybackWrapper);