Add proper event listener to Portal (#4359)

This commit is contained in:
Nicolas Gotchac 2017-01-31 11:38:53 +01:00 committed by Jaco Greeff
parent 9fb2be8f2b
commit b3a23480de
2 changed files with 26 additions and 6 deletions

View File

@ -175,6 +175,7 @@
"react-dom": "15.4.1", "react-dom": "15.4.1",
"react-dropzone": "3.7.3", "react-dropzone": "3.7.3",
"react-element-to-jsx-string": "6.0.0", "react-element-to-jsx-string": "6.0.0",
"react-event-listener": "0.4.1",
"react-intl": "2.1.5", "react-intl": "2.1.5",
"react-portal": "3.0.0", "react-portal": "3.0.0",
"react-redux": "4.4.6", "react-redux": "4.4.6",

View File

@ -14,6 +14,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import EventListener from 'react-event-listener';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ReactPortal from 'react-portal'; import ReactPortal from 'react-portal';
@ -85,6 +86,7 @@ export default class Portal extends Component {
onKeyDown={ this.handleKeyDown } onKeyDown={ this.handleKeyDown }
> >
<ParityBackground className={ styles.parityBackground } /> <ParityBackground className={ styles.parityBackground } />
{ this.renderBindings() }
{ this.renderCloseIcon() } { this.renderCloseIcon() }
{ children } { children }
</div> </div>
@ -93,6 +95,21 @@ export default class Portal extends Component {
); );
} }
renderBindings () {
const { expanded } = this.state;
if (!expanded) {
return null;
}
return (
<EventListener
target='window'
onKeyUp={ this.handleKeyUp }
/>
);
}
renderCloseIcon () { renderCloseIcon () {
const { expanded } = this.state; const { expanded } = this.state;
@ -121,18 +138,20 @@ export default class Portal extends Component {
handleKeyDown = (event) => { handleKeyDown = (event) => {
const { onKeyDown } = this.props; const { onKeyDown } = this.props;
event.persist();
return onKeyDown
? onKeyDown(event)
: false;
}
handleKeyUp = (event) => {
const codeName = keycode(event); const codeName = keycode(event);
switch (codeName) { switch (codeName) {
case 'esc': case 'esc':
event.preventDefault(); event.preventDefault();
return this.handleClose(); return this.handleClose();
default:
event.persist();
return onKeyDown
? onKeyDown(event)
: false;
} }
} }