Skip to content

Commit e9308bd

Browse files
Rokt33rRokt33r
committed
refactor hotkeys
1 parent 16b60ad commit e9308bd

10 files changed

Lines changed: 233 additions & 115 deletions

‎browser/main/Components/BlueprintDeleteModal.jsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ var BlueprintDeleteModal = React.createClass({
99
},
1010
componentDidMount: function () {
1111
this.unsubscribe = PlanetStore.listen(this.onListen)
12+
React.findDOMNode(this.refs.submit).focus()
1213
},
1314
componentWillUnmount: function () {
1415
this.unsubscribe()
@@ -23,12 +24,18 @@ var BlueprintDeleteModal = React.createClass({
2324
stopPropagation: function (e) {
2425
e.stopPropagation()
2526
},
27+
handleKeyDown: function (e) {
28+
if ((e.keyCode === 13 && e.metaKey)) {
29+
e.preventDefault()
30+
this.submit()
31+
}
32+
},
2633
submit: function () {
2734
PlanetActions.deleteBlueprint(this.props.blueprint.id)
2835
},
2936
render: function () {
3037
return (
31-
<div onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
38+
<div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
3239
<div className='modal-header'>
3340
<h1>Delete Blueprint</h1>
3441
</div>
@@ -37,8 +44,8 @@ var BlueprintDeleteModal = React.createClass({
3744
</div>
3845
<div className='modal-footer'>
3946
<div className='modal-control'>
40-
<button onClick={this.props.close} className='btn-default'>Cancle</button>
41-
<button onClick={this.submit} className='btn-primary'>Delete</button>
47+
<button onClick={this.props.close} className='btn-default'>Cancel</button>
48+
<button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
4249
</div>
4350
</div>
4451
</div>

‎browser/main/Components/BlueprintForm.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ var BlueprintForm = React.createClass({
9494
handleKeyDown: function (e) {
9595
if (e.keyCode === 13 && e.metaKey) {
9696
this.submit()
97+
e.stopPropagation()
9798
}
9899
},
99100
render: function () {

‎browser/main/Components/ModalBase.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var ModalBase = React.createClass({
99
render: function () {
1010
if (this.props.isOpen) {
1111
return (
12-
<div onClick={this.props.close} className='ModalBase'>
12+
<div ref='modal' onClick={this.props.close} className='ModalBase'>
1313
{this.props.children}
1414
</div>
1515
)

‎browser/main/Components/PlanetArticleDetail.jsx‎

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,22 @@ var React = require('react/addons')
22
var moment = require('moment')
33

44
var CodeViewer = require('../Components/CodeViewer')
5-
var ModalBase = require('../Components/ModalBase')
6-
var SnippetEditModal = require('../Components/SnippetEditModal')
7-
var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
8-
var BlueprintEditModal = require('../Components/BlueprintEditModal')
9-
var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
105

116
var ForceUpdate = require('../Mixins/ForceUpdate')
127
var Markdown = require('../Mixins/Markdown')
138

149
var PlanetArticleDetail = React.createClass({
1510
mixins: [ForceUpdate(60000), Markdown],
1611
propTypes: {
17-
article: React.PropTypes.object
12+
article: React.PropTypes.object,
13+
onOpenEditModal: React.PropTypes.func,
14+
onOpenDeleteModal: React.PropTypes.func
1815
},
1916
getInitialState: function () {
2017
return {
2118
isEditModalOpen: false
2219
}
2320
},
24-
openEditModal: function () {
25-
this.setState({isEditModalOpen: true})
26-
},
27-
closeEditModal: function () {
28-
this.setState({isEditModalOpen: false})
29-
},
30-
submitEditModal: function () {
31-
this.setState({isEditModalOpen: false})
32-
},
33-
openDeleteModal: function () {
34-
this.setState({isDeleteModalOpen: true})
35-
},
36-
closeDeleteModal: function () {
37-
this.setState({isDeleteModalOpen: false})
38-
},
39-
submitDeleteModal: function () {
40-
this.setState({isDeleteModalOpen: false})
41-
},
4221
render: function () {
4322
var article = this.props.article
4423

@@ -55,17 +34,9 @@ var PlanetArticleDetail = React.createClass({
5534
<div className='viewer-header'>
5635
<i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
5736
<span className='control-group'>
58-
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
59-
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
37+
<button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
38+
<button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
6039
</span>
61-
62-
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
63-
<SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
64-
</ModalBase>
65-
66-
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
67-
<SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
68-
</ModalBase>
6940
</div>
7041
<div className='viewer-body'>
7142
<div className='viewer-detail'>
@@ -84,17 +55,9 @@ var PlanetArticleDetail = React.createClass({
8455
<div className='viewer-header'>
8556
<i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
8657
<span className='control-group'>
87-
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
88-
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
58+
<button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
59+
<button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
8960
</span>
90-
91-
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
92-
<BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
93-
</ModalBase>
94-
95-
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
96-
<BlueprintDeleteModal blueprint={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
97-
</ModalBase>
9861
</div>
9962
<div className='viewer-body'>
10063
<div className='tags'><i className='fa fa-tags'/>{tags}</div>

‎browser/main/Components/PlanetArticleList.jsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,10 @@ var Markdown = require('../Mixins/Markdown')
88
var PlanetArticleList = React.createClass({
99
mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
1010
propTypes: {
11-
articles: React.PropTypes.array,
12-
onPressDown: React.PropTypes.func,
13-
onPressUp: React.PropTypes.func
11+
articles: React.PropTypes.array
1412
},
1513
handleKeyDown: function (e) {
16-
switch (e.keyCode) {
17-
case 38:
18-
e.preventDefault()
19-
this.props.onPressUp()
20-
break
21-
case 40:
22-
e.preventDefault()
23-
this.props.onPressDown()
24-
}
14+
e.preventDefault()
2515
},
2616
render: function () {
2717
var articles = this.props.articles.map(function (article) {

‎browser/main/Components/PlanetHeader.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ var PlanetHeader = React.createClass({
88
},
99
getInitialState: function () {
1010
return {
11-
isMenuDropDownOpen: false
11+
isMenuDropDownOpen: false,
12+
search: ''
1213
}
1314
},
1415
componentDidMount: function () {
@@ -32,6 +33,11 @@ var PlanetHeader = React.createClass({
3233
this.setState({search: e.target.value})
3334
this.props.onSearchChange(e.target.value)
3435
},
36+
handleKeyDown: function (e) {
37+
if (e.keyCode === 27) {
38+
React.findDOMNode(this.refs.search).blur()
39+
}
40+
},
3541
render: function () {
3642
var currentPlanetName = this.props.currentPlanet.name
3743

@@ -48,7 +54,7 @@ var PlanetHeader = React.createClass({
4854
</div>
4955
<span className='searchInput'>
5056
<i className='fa fa-search'/>
51-
<input onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
57+
<input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
5258
</span>
5359
<a className='downloadBtn btn-primary'>Download Mac app</a>
5460
</div>

‎browser/main/Components/PlanetNavigator.jsx‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,30 @@
11
var React = require('react/addons')
22

3-
var ModalBase = require('../Components/ModalBase')
4-
var LaunchModal = require('../Components/LaunchModal')
5-
63
var PlanetNavigator = React.createClass({
74
propTypes: {
85
currentPlanet: React.PropTypes.shape({
96
name: React.PropTypes.string
107
}),
118
currentUser: React.PropTypes.shape({
129
name: React.PropTypes.string
13-
})
10+
}),
11+
onOpenLaunchModal: React.PropTypes.func
1412
},
1513
getInitialState: function () {
1614
return {
1715
isLaunchModalOpen: false
1816
}
1917
},
20-
handleKeyDown: function (e) {
21-
if (e.keyCode === 13 && e.metaKey) {
22-
e.preventDefault()
23-
this.openLaunchModal()
24-
}
25-
},
26-
componentDidMount: function () {
27-
document.addEventListener('keydown', this.handleKeyDown, false)
28-
},
29-
componentWillUnmount: function () {
30-
document.removeEventListener('keydown', this.handleKeyDown, false)
31-
},
32-
openLaunchModal: function () {
33-
this.setState({isLaunchModalOpen: true})
34-
},
35-
closeLaunchModal: function () {
36-
this.setState({isLaunchModalOpen: false})
37-
},
3818
submitLaunchModal: function (ret) {
3919
console.log(ret)
4020
this.setState({isLaunchModalOpen: false})
4121
},
4222
render: function () {
4323
return (
4424
<div className='PlanetNavigator'>
45-
<button onClick={this.openLaunchModal} className='btn-primary btn-block'>
25+
<button onClick={this.props.onOpenLaunchModal} className='btn-primary btn-block'>
4626
<i className='fa fa-rocket fa-fw'/> Launch
4727
</button>
48-
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
49-
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
50-
</ModalBase>
5128
<nav>
5229
<a>
5330
<i className='fa fa-home fa-fw'/> Home

‎browser/main/Components/SnippetDeleteModal.jsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ var SnippetDeleteModal = React.createClass({
99
},
1010
componentDidMount: function () {
1111
this.unsubscribe = PlanetStore.listen(this.onListen)
12+
React.findDOMNode(this.refs.submit).focus()
1213
},
1314
componentWillUnmount: function () {
1415
this.unsubscribe()
@@ -23,12 +24,18 @@ var SnippetDeleteModal = React.createClass({
2324
stopPropagation: function (e) {
2425
e.stopPropagation()
2526
},
27+
handleKeyDown: function (e) {
28+
if ((e.keyCode === 13 && e.metaKey)) {
29+
e.preventDefault()
30+
this.submit()
31+
}
32+
},
2633
submit: function () {
2734
PlanetActions.deleteSnippet(this.props.snippet.id)
2835
},
2936
render: function () {
3037
return (
31-
<div onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
38+
<div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
3239
<div className='modal-header'>
3340
<h1>Delete Snippet</h1>
3441
</div>
@@ -37,8 +44,8 @@ var SnippetDeleteModal = React.createClass({
3744
</div>
3845
<div className='modal-footer'>
3946
<div className='modal-control'>
40-
<button onClick={this.props.close} className='btn-default'>Cancle</button>
41-
<button onClick={this.submit} className='btn-primary'>Delete</button>
47+
<button onClick={this.props.close} className='btn-default'>Cancel</button>
48+
<button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
4249
</div>
4350
</div>
4451
</div>

‎browser/main/Components/SnippetForm.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ var SnippetForm = React.createClass({
8686
handleKeyDown: function (e) {
8787
if (e.keyCode === 13 && e.metaKey) {
8888
this.submit()
89+
e.stopPropagation()
8990
}
9091
},
9192
render: function () {

0 commit comments

Comments
 (0)