Skip to content
This repository was archived by the owner on Feb 23, 2021. It is now read-only.

Close channel/tx detail on escape press #455

Merged
merged 3 commits into from
Jul 24, 2018
Merged

Close channel/tx detail on escape press #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
becd6af
Close channel/tx detail on escape press
valentinewallace Jul 17, 2018
97b027c
Remove bind usage + create Escapable component
valentinewallace Jul 24, 2018
975f52d
Use bind again because eventListener won’t be found
tanx Jul 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions src/component/escapable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component } from 'react';
import PropTypes from 'prop-types';

class Escapable extends Component {
constructor(props) {
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this);
}

componentDidMount() {
if (typeof document !== 'undefined') {
Copy link
Contributor

@tanx tanx Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When checking for a global like document or window always use typeof otherwise you'll get this error in an environment that does not have them: ReferenceError: document is not defined

document.addEventListener('keydown', this.handleKeyDown);
}
}

componentWillUnmount() {
if (typeof document !== 'undefined') {
document.removeEventListener('keydown', this.handleKeyDown);
Copy link
Contributor

@tanx tanx Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@valentinewallace it turn out we needed to use the bind style after all otherwise the function pointer would not have been consistent and the event listener would not have been removed.

}
}

handleKeyDown(event) {
if (event.keyCode === 27) {
this.props.onClose();
}
}
}

Escapable.propTypes = {
onClose: PropTypes.func.isRequired,
};

export default Escapable;
26 changes: 16 additions & 10 deletions src/component/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import { View, ViewPropTypes, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { Button } from '../../src/component/button';
import { Button } from './button';
import { H4Text } from './text';
import Icon from './icon';
import Escapable from './escapable';
import { color } from './style';

const styles = StyleSheet.create({
Expand Down Expand Up @@ -34,15 +35,20 @@ const styles = StyleSheet.create({
},
});

const Modal = ({ title = '', onClose, children, style }) => (
<View style={[styles.modal, style]}>
<H4Text style={styles.title}>{title.toUpperCase()}</H4Text>
<Button style={styles.cancelBtn} onPress={onClose}>
<Icon image="cancel-grey" style={styles.cancelIcon} />
</Button>
{children}
</View>
);
class Modal extends Escapable {
render() {
const { title = '', style, onClose, children } = this.props;
return (
<View style={[styles.modal, style]}>
<H4Text style={styles.title}>{title.toUpperCase()}</H4Text>
<Button style={styles.cancelBtn} onPress={onClose}>
<Icon image="cancel-grey" style={styles.cancelIcon} />
</Button>
{children}
</View>
);
}
}
Copy link
Contributor

@tanx tanx Jul 23, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should pull this out into an Escapable component that the modal inherits from.


Modal.propTypes = {
title: PropTypes.string.isRequired,
Expand Down